From: Jeremy Thomas Date: Sun, 30 Oct 2016 20:02:48 +0000 (+0000) Subject: Fix button icon spacing X-Git-Tag: 0.3.0^2~23 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b016326ac8717a4e51567dfed0a4d6eada2719f8;p=thirdparty%2Fbulma.git Fix button icon spacing --- diff --git a/CHANGELOG.md b/CHANGELOG.md index adeda5417..88fe4249f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,11 +2,14 @@ ## 0.3.0 -* Use `rem` and `em` +* Use `rem` and `em` (!) +* Fix Font Awesome icons in buttons (!) +* Fix message colors (!) +* Use `{% capture %}` to ensure same display as code snippet (!) + * Move variables to their own file * Remove small tag * Add `:focus` state -* Fix Font Awesome icons in buttons * Fix table * Remove table `.is-icon` and `.is-link` * Add `.content` table @@ -16,7 +19,6 @@ * Fix `.level-item` height * Fix `.menu` spacing * Deprecate `.menu-nav` -* Fix message colors (!) ## 0.2.2 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index ccb529e17..e03e7850a 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -615,44 +615,64 @@ a.box:active { color: inherit; } -.button .icon:first-child { - margin-left: calc(-1px - 0.5rem); +.button .icon:first-child:not(:last-child) { + margin-left: -0.25rem; + margin-right: 0.5rem; +} + +.button .icon:last-child:not(:first-child) { + margin-left: 0.5rem; + margin-right: -0.25rem; } -.button .icon:last-child { +.button .icon:first-child:last-child { + margin-left: calc(-1px - 0.5rem); margin-right: calc(-1px - 0.5rem); } -.button .icon.is-small:first-child { - margin-left: calc(-1px - 0.25rem); +.button .icon.is-small:first-child:not(:last-child) { + margin-left: -0.125rem; + margin-right: 0.25rem; } -.button .icon.is-small:last-child { +.button .icon.is-small:last-child:not(:first-child) { + margin-left: 0.25rem; + margin-right: -0.125rem; +} + +.button .icon.is-small:first-child:last-child { + margin-left: calc(-1px - 0.25rem); margin-right: calc(-1px - 0.25rem); } -.button .icon.is-medium:first-child { - margin-left: calc(-1px - 0.75rem); +.button .icon.is-medium:first-child:not(:last-child) { + margin-left: -0.375rem; + margin-right: 0.75rem; } -.button .icon.is-medium:last-child { - margin-right: calc(-1px - 0.75rem); +.button .icon.is-medium:last-child:not(:first-child) { + margin-left: 0.75rem; + margin-right: -0.375rem; } -.button .icon.is-large:first-child { - margin-left: calc(-1px - 1.25rem); +.button .icon.is-medium:first-child:last-child { + margin-left: calc(-1px - 0.75rem); + margin-right: calc(-1px - 0.75rem); } -.button .icon.is-large:last-child { - margin-right: calc(-1px - 1.25rem); +.button .icon.is-large:first-child:not(:last-child) { + margin-left: -0.625rem; + margin-right: 1.25rem; } -.button .icon:first-child:not(:last-child) { - margin-right: 0.25rem !important; +.button .icon.is-large:last-child:not(:first-child) { + margin-left: 1.25rem; + margin-right: -0.625rem; } -.button .icon:last-child:not(:first-child) { - margin-left: 0.25rem !important; +.button .icon.is-large:first-child:last-child { + margin-left: calc(-1px - 1.25rem); + margin-right: calc(-1px - 1.25rem); } .button:hover, .button.is-hovered { @@ -1148,35 +1168,63 @@ a.box:active { font-size: 0.75rem; } -.button.is-small .icon:first-child { - margin-left: calc(-1px - 0.5625rem); +.button.is-small .icon:first-child:not(:last-child) { + margin-left: -0.28125rem; + margin-right: 0.5625rem; +} + +.button.is-small .icon:last-child:not(:first-child) { + margin-left: 0.5625rem; + margin-right: -0.28125rem; } -.button.is-small .icon:last-child { +.button.is-small .icon:first-child:last-child { + margin-left: calc(-1px - 0.5625rem); margin-right: calc(-1px - 0.5625rem); } -.button.is-small .icon.is-small:first-child { - margin-left: calc(-1px - 0.3125rem); +.button.is-small .icon.is-small:first-child:not(:last-child) { + margin-left: -0.15625rem; + margin-right: 0.3125rem; } -.button.is-small .icon.is-small:last-child { +.button.is-small .icon.is-small:last-child:not(:first-child) { + margin-left: 0.3125rem; + margin-right: -0.15625rem; +} + +.button.is-small .icon.is-small:first-child:last-child { + margin-left: calc(-1px - 0.3125rem); margin-right: calc(-1px - 0.3125rem); } -.button.is-small .icon.is-medium:first-child { - margin-left: calc(-1px - 0.8125rem); +.button.is-small .icon.is-medium:first-child:not(:last-child) { + margin-left: -0.40625rem; + margin-right: 0.8125rem; +} + +.button.is-small .icon.is-medium:last-child:not(:first-child) { + margin-left: 0.8125rem; + margin-right: -0.40625rem; } -.button.is-small .icon.is-medium:last-child { +.button.is-small .icon.is-medium:first-child:last-child { + margin-left: calc(-1px - 0.8125rem); margin-right: calc(-1px - 0.8125rem); } -.button.is-small .icon.is-large:first-child { - margin-left: calc(-1px - 1.3125rem); +.button.is-small .icon.is-large:first-child:not(:last-child) { + margin-left: -0.65625rem; + margin-right: 1.3125rem; } -.button.is-small .icon.is-large:last-child { +.button.is-small .icon.is-large:last-child:not(:first-child) { + margin-left: 1.3125rem; + margin-right: -0.65625rem; +} + +.button.is-small .icon.is-large:first-child:last-child { + margin-left: calc(-1px - 1.3125rem); margin-right: calc(-1px - 1.3125rem); } @@ -1184,35 +1232,63 @@ a.box:active { font-size: 1.25rem; } -.button.is-medium .icon:first-child { - margin-left: calc(-1px - 0.4375rem); +.button.is-medium .icon:first-child:not(:last-child) { + margin-left: -0.21875rem; + margin-right: 0.4375rem; } -.button.is-medium .icon:last-child { +.button.is-medium .icon:last-child:not(:first-child) { + margin-left: 0.4375rem; + margin-right: -0.21875rem; +} + +.button.is-medium .icon:first-child:last-child { + margin-left: calc(-1px - 0.4375rem); margin-right: calc(-1px - 0.4375rem); } -.button.is-medium .icon.is-small:first-child { - margin-left: calc(-1px - 0.1875rem); +.button.is-medium .icon.is-small:first-child:not(:last-child) { + margin-left: -0.09375rem; + margin-right: 0.1875rem; +} + +.button.is-medium .icon.is-small:last-child:not(:first-child) { + margin-left: 0.1875rem; + margin-right: -0.09375rem; } -.button.is-medium .icon.is-small:last-child { +.button.is-medium .icon.is-small:first-child:last-child { + margin-left: calc(-1px - 0.1875rem); margin-right: calc(-1px - 0.1875rem); } -.button.is-medium .icon.is-medium:first-child { - margin-left: calc(-1px - 0.6875rem); +.button.is-medium .icon.is-medium:first-child:not(:last-child) { + margin-left: -0.34375rem; + margin-right: 0.6875rem; +} + +.button.is-medium .icon.is-medium:last-child:not(:first-child) { + margin-left: 0.6875rem; + margin-right: -0.34375rem; } -.button.is-medium .icon.is-medium:last-child { +.button.is-medium .icon.is-medium:first-child:last-child { + margin-left: calc(-1px - 0.6875rem); margin-right: calc(-1px - 0.6875rem); } -.button.is-medium .icon.is-large:first-child { - margin-left: calc(-1px - 1.1875rem); +.button.is-medium .icon.is-large:first-child:not(:last-child) { + margin-left: -0.59375rem; + margin-right: 1.1875rem; } -.button.is-medium .icon.is-large:last-child { +.button.is-medium .icon.is-large:last-child:not(:first-child) { + margin-left: 1.1875rem; + margin-right: -0.59375rem; +} + +.button.is-medium .icon.is-large:first-child:last-child { + margin-left: calc(-1px - 1.1875rem); margin-right: calc(-1px - 1.1875rem); } @@ -1220,35 +1296,63 @@ a.box:active { font-size: 1.5rem; } -.button.is-large .icon:first-child { - margin-left: calc(-1px - 0.375rem); +.button.is-large .icon:first-child:not(:last-child) { + margin-left: -0.1875rem; + margin-right: 0.375rem; +} + +.button.is-large .icon:last-child:not(:first-child) { + margin-left: 0.375rem; + margin-right: -0.1875rem; } -.button.is-large .icon:last-child { +.button.is-large .icon:first-child:last-child { + margin-left: calc(-1px - 0.375rem); margin-right: calc(-1px - 0.375rem); } -.button.is-large .icon.is-small:first-child { - margin-left: calc(-1px - 0.125rem); +.button.is-large .icon.is-small:first-child:not(:last-child) { + margin-left: -0.0625rem; + margin-right: 0.125rem; } -.button.is-large .icon.is-small:last-child { +.button.is-large .icon.is-small:last-child:not(:first-child) { + margin-left: 0.125rem; + margin-right: -0.0625rem; +} + +.button.is-large .icon.is-small:first-child:last-child { + margin-left: calc(-1px - 0.125rem); margin-right: calc(-1px - 0.125rem); } -.button.is-large .icon.is-medium:first-child { - margin-left: calc(-1px - 0.625rem); +.button.is-large .icon.is-medium:first-child:not(:last-child) { + margin-left: -0.3125rem; + margin-right: 0.625rem; +} + +.button.is-large .icon.is-medium:last-child:not(:first-child) { + margin-left: 0.625rem; + margin-right: -0.3125rem; } -.button.is-large .icon.is-medium:last-child { +.button.is-large .icon.is-medium:first-child:last-child { + margin-left: calc(-1px - 0.625rem); margin-right: calc(-1px - 0.625rem); } -.button.is-large .icon.is-large:first-child { - margin-left: calc(-1px - 1.125rem); +.button.is-large .icon.is-large:first-child:not(:last-child) { + margin-left: -0.5625rem; + margin-right: 1.125rem; +} + +.button.is-large .icon.is-large:last-child:not(:first-child) { + margin-left: 1.125rem; + margin-right: -0.5625rem; } -.button.is-large .icon.is-large:last-child { +.button.is-large .icon.is-large:first-child:last-child { + margin-left: calc(-1px - 1.125rem); margin-right: calc(-1px - 1.125rem); } @@ -2060,7 +2164,6 @@ a.box:active { } .icon { - background: whitesmoke; display: inline-block; font-size: 21px; height: 1.5rem; @@ -3602,9 +3705,9 @@ a.box:active { .nav-toggle { cursor: pointer; display: block; - height: 50px; + height: 3rem; position: relative; - width: 50px; + width: 3rem; } .nav-toggle span { @@ -3668,7 +3771,7 @@ a.box:active { flex-grow: 0; flex-shrink: 0; justify-content: center; - padding: 10px; + padding: 0.5rem 0.75rem; } .nav-item a { @@ -3677,19 +3780,19 @@ a.box:active { } .nav-item img { - max-height: 24px; + max-height: 1.5rem; } .nav-item .button + .button { - margin-left: 10px; + margin-left: 0.75rem; } .nav-item .tag:first-child { - margin-right: 5px; + margin-right: 0.25rem; } .nav-item .tag:last-child { - margin-left: 5px; + margin-left: 0.25rem; } @media screen and (max-width: 768px) { @@ -3746,7 +3849,7 @@ a.nav-item.is-tab.is-active { } .nav-menu .nav-item { border-top: 1px solid rgba(219, 219, 219, 0.5); - padding: 10px; + padding: 0.75rem; } .nav-menu.is-active { display: block; @@ -3755,7 +3858,7 @@ a.nav-item.is-tab.is-active { @media screen and (min-width: 769px) and (max-width: 979px) { .nav-menu { - padding-right: 20px; + padding-right: 1.5rem; } } @@ -3794,7 +3897,7 @@ a.nav-item.is-tab.is-active { align-items: stretch; background-color: white; display: flex; - min-height: 50px; + min-height: 3rem; position: relative; text-align: center; z-index: 2; @@ -3803,7 +3906,7 @@ a.nav-item.is-tab.is-active { .nav > .container { align-items: stretch; display: flex; - min-height: 50px; + min-height: 3rem; width: 100%; } @@ -3830,7 +3933,7 @@ a.nav-item.is-tab.is-active { @media screen and (max-width: 979px) { .nav > .container > .nav-left > .nav-item.is-brand:first-child, .container > .nav > .nav-left > .nav-item.is-brand:first-child { - padding-left: 20px; + padding-left: 1.5rem; } } diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index c7f6266b3..9774fd905 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -15,486 +15,389 @@ doc-subtab: button
-
-
-
- Button - White - Light - Dark - Black - Link -
-
- Primary - Info - Success - Warning - Danger -
-
-
+{% capture button_example %} +
+ Button + White + Light + Dark + Black + Link +
+
+ Primary + Info + Success + Warning + Danger +
+{% endcapture %} +
+
+{{button_example}} +
+
{% highlight html %} -Button -Primary -Info -Success -Warning -Danger -Link +{{button_example}} {% endhighlight %} -
-
+
+

Sizes

-
-
- Small - Normal - Medium - Large -
-
-{% highlight html %} +{% capture button_sizes_example %} Small Normal Medium Large +{% endcapture %} +
+
+{{button_sizes_example}} +
+
+{% highlight html %} +{{button_sizes_example}} {% endhighlight %} -
-
+
+

Styles

Outlined

- -
-
- Outlined - Outlined - Outlined - Outlined - Outlined -
-
-{% highlight html %} +{% capture button_outlined_example %} Outlined Outlined Outlined Outlined Outlined +{% endcapture %} +
+
+{{button_outlined_example}} +
+
+{% highlight html %} +{{button_outlined_example}} {% endhighlight %} -
-
+
+

Inverted (the text color becomes the background color, and vice-versa)

-
-
-
- Inverted - Inverted - Inverted - Inverted -
-
-
-{% highlight html %} +{% capture button_inverted_example %} Inverted Inverted Inverted Inverted -{% endhighlight %} -
+{% endcapture %} +
+
+
+{{button_inverted_example}}
+
+
+{% highlight html %} +{{button_inverted_example}} +{% endhighlight %} +
+

States

Normal

-
-
- Normal - Normal - Normal - Normal - Normal - Normal -
-
-{% highlight html %} +{% capture button_normal_example %} Normal Normal Normal Normal Normal Normal +{% endcapture %} +
+
+{{button_normal_example}} +
+
+{% highlight html %} +{{button_normal_example}} {% endhighlight %} -
-
+
+
+

Hover

-
-
- Hover - Hover - Hover - Hover - Hover - Hover -
-
-{% highlight html %} +{% capture button_hover_example %} Hover Hover Hover Hover Hover Hover +{% endcapture %} +
+
+{{button_hover_example}} +
+
+{% highlight html %} +{{button_hover_example}} {% endhighlight %} -
-
+
+

Focus

-
-
- Focus - Focus - Focus - Focus - Focus - Focus -
-
-{% highlight html %} +{% capture button_focus_example %} Focus Focus Focus Focus Focus Focus +{% endcapture %} +
+
+{{button_focus_example}} +
+
+{% highlight html %} +{{button_focus_example}} {% endhighlight %} -
-
+
+

Active

-
-
- Active - Active - Active - Active - Active - Active -
-
-{% highlight html %} +{% capture button_active_example %} Active Active Active Active Active Active +{% endcapture %} +
+
+{{button_active_example}} +
+
+{% highlight html %} +{{button_active_example}} {% endhighlight %} -
-
+
+

Loading

-
-
- Loading - Loading - Loading - Loading - Loading - Loading -
-
-{% highlight html %} +{% capture button_loading_example %} Loading Loading Loading Loading Loading Loading +{% endcapture %} +
+
+{{button_loading_example}} +
+
+{% highlight html %} +{{button_loading_example}} {% endhighlight %} -
-
+
+

Disabled

-
-
- Disabled - Disabled - Disabled - Disabled - Disabled - Disabled -
-
-{% highlight html %} +{% capture button_disabled_example %} Disabled Disabled Disabled Disabled Disabled Disabled +{% endcapture %} +
+
+{{button_disabled_example}} +
+
+{% highlight html %} +{{button_disabled_example}} {% endhighlight %} -
-
+
+

With Font Awesome icons

-
-
-

- - - - - - - - - - - - - - - -

-

- - - - - GitHub - - - - - - Twitter - - - - - - Save - - - Delete - - - - -

-

- - - - - GitHub - - - - - - GitHub - - - - - - GitHub - - - - - - GitHub - -

-
-
-{% highlight html %} - - - - - GitHub - - - - - - Twitter - - - - - - Save - - - Delete - - - - - - - - - Delete - -{% endhighlight %} -
-
- -
-
-
-

- New! -

-

- If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon. -

-
- -

- - - - - -

-

- - - - - - - - - - -

-

- - - - - - - - - - - - - - - -

-

- - - - - - - - - - - - - - - - - - - - -

-
-
-{% highlight html %} +{% capture button_fa_example %}

- + - + -

-

- + - - + +

- - - + + + + GitHub - + - + + Twitter - - - + + + + + Save + + + Delete + +

- + - + + GitHub - + - + + GitHub - - - + + + + GitHub - - + + + GitHub

+{% endcapture %} +
+
+{{button_fa_example}} +
+
+{% highlight html %} +{{button_fa_example}} {% endhighlight %} -
+
+
+ +
+
+
+

+ New! +

+

+ If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon. +

+{% capture button_only_icon_example %} +

+ + + + + +

+

+ + + + + + + + + + +

+

+ + + + + + + + + + + + + + + +

+

+ + + + + + + + + + + + + + + + + + + + +

+{% endcapture %} +{{button_only_icon_example}} +
+
+{% highlight html %} +{{button_only_icon_example}} +{% endhighlight %} +
+
@@ -502,26 +405,7 @@ doc-subtab: button

If you want to group buttons together, use the is-grouped modifier on the control container:

-
-
-

- - Save changes - -

-

- - Cancel - -

-

- - Delete post - -

-
-
-{% highlight html %} +{% capture button_group_example %}

@@ -539,6 +423,12 @@ doc-subtab: button

+{% endcapture %} +
+{{button_group_example}} +
+{% highlight html %} +{{button_group_example}} {% endhighlight %}
@@ -547,29 +437,7 @@ doc-subtab: button

If you want to use buttons as addons, use the has-addons modifier on the control container:

-
-

- - - - - Left - - - - - - Center - - - - - - Right - -

-
-{% highlight html %} +{% capture button_addons_example %}

@@ -590,6 +458,12 @@ doc-subtab: button Right

+{% endcapture %} +
+{{button_addons_example}} +
+{% highlight html %} +{{button_addons_example}} {% endhighlight %}
@@ -598,71 +472,55 @@ doc-subtab: button

You can group together addons as well:

-
-
-

- - - - - Bold - - - - - - Italic - - - - - - Underline - -

-

- - - - - Left - - - - - - Center - - - - - - Right - -

-
-
+{% capture button_group_addons_example %} +
+

+ + + + + Bold + + + + + + Italic + + + + + + Underline + +

+

+ + + + + Left + + + + + + Center + + + + + + Right + +

+
+{% endcapture %} +
+{{button_group_addons_example}} +
{% highlight html %} -

- - - - - Left - - - - - - Center - - - - - - Right - -

+{{button_group_addons_example}} {% endhighlight %}
diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 197cf10ff..184e7f3fb 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -1,4 +1,4 @@ -$nav-height: 50px !default +$nav-height: 3rem !default // Components @@ -14,19 +14,19 @@ $nav-height: 50px !default flex-grow: 0 flex-shrink: 0 justify-content: center - padding: 10px + padding: 0.5rem 0.75rem a flex-grow: 1 flex-shrink: 0 img - max-height: 24px + max-height: 1.5rem .button + .button - margin-left: 10px + margin-left: 0.75rem .tag &:first-child - margin-right: 5px + margin-right: 0.25rem &:last-child - margin-left: 5px + margin-left: 0.25rem // Responsiveness +mobile justify-content: flex-start @@ -66,11 +66,11 @@ a.nav-item position: absolute .nav-item border-top: 1px solid rgba($border, 0.5) - padding: 10px + padding: 0.75rem &.is-active display: block +tablet-only - padding-right: 20px + padding-right: 1.5rem .nav-left align-items: stretch @@ -137,4 +137,4 @@ a.nav-item .container > & & > .nav-left & > .nav-item.is-brand:first-child - padding-left: 20px + padding-left: 1.5rem diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 5769e1fed..f652a96c9 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -23,31 +23,53 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) // $button-height = $horizontal-padding + $icon-width + $x $x: $button-height - $horizontal-padding - $icon-width // We divide by 2 to apply this margin on both the left and right sides - $negative-margin: abs($x) / 2 - // We need to remove 1px for the border as well - @return calc(-1px - #{$negative-margin}) + @return abs($x) / 2 =button-icon($button-size) + $small-spacing: buttonIconSpacing($button-size, 1rem) + $normal-spacing: buttonIconSpacing($button-size, 1.5rem) + $medium-spacing: buttonIconSpacing($button-size, 2rem) + $large-spacing: buttonIconSpacing($button-size, 3rem) .icon - &:first-child - margin-left: buttonIconSpacing($button-size, 1.5rem) - &:last-child - margin-right: buttonIconSpacing($button-size, 1.5rem) + &:first-child:not(:last-child) + margin-left: -$normal-spacing / 2 + margin-right: $normal-spacing + &:last-child:not(:first-child) + margin-left: $normal-spacing + margin-right: -$normal-spacing / 2 + &:first-child:last-child + margin-left: calc(-1px - #{$normal-spacing}) + margin-right: calc(-1px - #{$normal-spacing}) &.is-small - &:first-child - margin-left: buttonIconSpacing($button-size, 1rem) - &:last-child - margin-right: buttonIconSpacing($button-size, 1rem) + &:first-child:not(:last-child) + margin-left: -$small-spacing / 2 + margin-right: $small-spacing + &:last-child:not(:first-child) + margin-left: $small-spacing + margin-right: -$small-spacing / 2 + &:first-child:last-child + margin-left: calc(-1px - #{$small-spacing}) + margin-right: calc(-1px - #{$small-spacing}) &.is-medium - &:first-child - margin-left: buttonIconSpacing($button-size, 2rem) - &:last-child - margin-right: buttonIconSpacing($button-size, 2rem) + &:first-child:not(:last-child) + margin-left: -$medium-spacing / 2 + margin-right: $medium-spacing + &:last-child:not(:first-child) + margin-left: $medium-spacing + margin-right: -$medium-spacing / 2 + &:first-child:last-child + margin-left: calc(-1px - #{$medium-spacing}) + margin-right: calc(-1px - #{$medium-spacing}) &.is-large - &:first-child - margin-left: buttonIconSpacing($button-size, 3rem) - &:last-child - margin-right: buttonIconSpacing($button-size, 3rem) + &:first-child:not(:last-child) + margin-left: -$large-spacing / 2 + margin-right: $large-spacing + &:last-child:not(:first-child) + margin-left: $large-spacing + margin-right: -$large-spacing / 2 + &:first-child:last-child + margin-left: calc(-1px - #{$large-spacing}) + margin-right: calc(-1px - #{$large-spacing}) // The button sizes use mixins so they can be used at different breakpoints =button-small @@ -76,11 +98,6 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) strong color: inherit +button-icon($size-normal) - .icon - &:first-child:not(:last-child) - margin-right: 0.25rem !important - &:last-child:not(:first-child) - margin-left: 0.25rem !important // States &:hover, &.is-hovered diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass index 1f0bab0c3..99add01db 100644 --- a/sass/elements/icon.sass +++ b/sass/elements/icon.sass @@ -1,5 +1,4 @@ .icon - background: $background +fa(21px, 1.5rem) .fa font-size: inherit