Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Remove icon spacing logic

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-12 14:13:08 +00:00
parent 3384082ddf
commit 6ac14c316f
7 changed files with 157 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
sass/base/generic.sass
View File

@@ -1,6 +1,3 @@
$body-background: $white !default
$body-size: $size-6 !default
html
background-color: $body-background
font-size: $body-size

75
sass/elements/button.sass
View File

@@ -13,72 +13,14 @@ $button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
@function buttonIconSpacing($button-font-size, $icon-width)
// The button font-size value with no unit
$button-value: removeUnit($button-font-size)
// The rem height of the button
// based on a height of 2.5em
$button-height: 2.5rem * $button-value // rem
// The rem total horizontal padding of the button
$button-horizontal-padding: 2 * 0.75rem * $button-value // rem
// For the icon center to align with the button center
// the horizontal padding + the icon width must equal the button height
// $button-height = $button-horizontal-padding + $icon-width + $difference
$difference: $button-height - $button-horizontal-padding - $icon-width
@return $difference / 2
=button-icon($button-font-size)
$small-offset: buttonIconSpacing($button-font-size, 1rem)
$normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
$medium-offset: buttonIconSpacing($button-font-size, 2rem)
$large-offset: buttonIconSpacing($button-font-size, 3rem)
.icon
&:first-child:not(:last-child)
margin-left: $normal-offset
margin-right: $button-font-size / 2
&:last-child:not(:first-child)
margin-left: $button-font-size / 2
margin-right: $normal-offset
&:first-child:last-child
// The -1px is to account for the button 1px border
margin-left: calc(-1px + #{$normal-offset})
margin-right: calc(-1px + #{$normal-offset})
&.is-small
&:first-child:not(:last-child)
margin-left: $small-offset
&:last-child:not(:first-child)
margin-right: $small-offset
&:first-child:last-child
margin-left: calc(-1px + #{$small-offset})
margin-right: calc(-1px + #{$small-offset})
&.is-medium
&:first-child:not(:last-child)
margin-left: $medium-offset
&:last-child:not(:first-child)
margin-right: $medium-offset
&:first-child:last-child
margin-left: calc(-1px + #{$medium-offset})
margin-right: calc(-1px + #{$medium-offset})
&.is-large
&:first-child:not(:last-child)
margin-left: $large-offset
&:last-child:not(:first-child)
margin-right: $large-offset
&:first-child:last-child
margin-left: calc(-1px + #{$large-offset})
margin-right: calc(-1px + #{$large-offset})
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
font-size: $size-small
+button-icon($size-small)
=button-medium
font-size: $size-medium
+button-icon($size-medium)
=button-large
font-size: $size-large
+button-icon($size-large)
.button
+control
@@ -94,7 +36,22 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
white-space: nowrap
strong
color: inherit
+button-icon($size-normal)
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - 1px)
margin-right: 0.375em
&:last-child:not(:first-child)
margin-left: 0.375em
margin-right: calc(-0.375em - 1px)
&:first-child:last-child
margin-left: calc(-0.375em - 1px)
margin-right: calc(-0.375em - 1px)
// States
&:hover,
&.is-hovered

62
sass/elements/form.sass
View File

@@ -76,7 +76,7 @@ $input-radius: $radius !default
max-width: 100%
min-height: 120px
min-width: 100%
padding: 10px
padding: 0.625em
resize: vertical
.checkbox,
@@ -105,7 +105,7 @@ $input-radius: $radius !default
.select
display: inline-block
height: 2.5em
height: 2.25em
position: relative
vertical-align: top
&:after
@@ -221,9 +221,11 @@ $input-radius: $radius !default
&.has-icon
.icon
color: $input-icon
height: 2.25em
pointer-events: none
position: absolute
top: ($size-normal * 2.5) / 2
top: 0
width: 2.25em
z-index: 4
.input
&:focus
@@ -231,43 +233,43 @@ $input-radius: $radius !default
color: $input-icon-active
&.is-small
& + .icon
top: ($size-small * 2.5) / 2
font-size: $size-small
&.is-medium
& + .icon
top: ($size-medium * 2.5) / 2
font-size: $size-medium
&.is-large
& + .icon
top: ($size-large * 2.5) / 2
font-size: $size-large
&:not(.has-icon-right)
.icon
left: ($size-normal * 2.5) / 2
transform: translateX(-50%) translateY(-50%)
left: 0
// transform: translateX(-50%) translateY(-50%)
.input
padding-left: 2.5em
&.is-small
& + .icon
left: ($size-small * 2.5) / 2
&.is-medium
& + .icon
left: ($size-medium * 2.5) / 2
&.is-large
& + .icon
left: ($size-large * 2.5) / 2
padding-left: 2.25em
// &.is-small
// & + .icon
// left: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// left: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// left: ($size-large * 2.5) / 2
&.has-icon-right
.icon
right: ($size-normal * 2.5) / 2
transform: translateX(50%) translateY(-50%)
right: 0
// transform: translateX(50%) translateY(-50%)
.input
padding-right: 2.5em
&.is-small
& + .icon
right: ($size-small * 2.5) / 2
&.is-medium
& + .icon
right: ($size-medium * 2.5) / 2
&.is-large
& + .icon
right: ($size-large * 2.5) / 2
padding-right: 2.25em
// &.is-small
// & + .icon
// right: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// right: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// right: ($size-large * 2.5) / 2
&.is-grouped
display: flex
justify-content: flex-start

26
sass/elements/icon.sass
View File

@@ -1,12 +1,26 @@
.icon
+fa(21px, 1.5rem)
align-items: center
background-color: coral
display: inline-flex
justify-content: center
height: 1.5rem
vertical-align: top
width: 1.5rem
.fa
font-size: inherit
line-height: inherit
font-size: 21px
// Sizes
&.is-small
+fa(14px, 1rem)
height: 1rem
width: 1rem
.fa
font-size: 14px
&.is-medium
+fa(28px, 2rem)
height: 2rem
width: 2rem
.fa
font-size: 28px
&.is-large
+fa(42px, 3rem)
height: 3rem
width: 3rem
.fa
font-size: 42px

8
sass/utilities/controls.sass
View File

@@ -10,11 +10,13 @@ $control-radius-small: $radius-small !default
box-shadow: none
display: inline-flex
font-size: $size-normal
height: 2.285em
height: 2.25em
justify-content: flex-start
line-height: 1.5
padding-left: 0.75em
padding-right: 0.75em
padding-bottom: 0.375em
padding-left: 0.625em
padding-right: 0.625em
padding-top: 0.375em
position: relative
vertical-align: top
// States

8
sass/utilities/variables.sass
View File

@@ -34,7 +34,7 @@ $size-2: 2.75rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 14px !default
$size-6: 1rem !default
$size-7: 0.75rem !default
$weight-light: 300 !default
@@ -42,6 +42,10 @@ $weight-normal: 400 !default
$weight-semibold: 500 !default
$weight-bold: 700 !default
// Body
$body-background: $white !default
$body-size: 14px !default
// Miscellaneous
$easing: ease-out !default
$radius-small: 2px !default
@@ -122,7 +126,7 @@ $family-primary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
$size-normal: 1rem !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default