Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 04:34:30 -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

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