-
-
+{% endcapture %}
+
+
+
+{{button_inverted_example}}
+
+
+{% highlight html %}
+{{button_inverted_example}}
+{% endhighlight %}
+
+
States
Normal
-
-
-
-{% highlight html %}
+{% capture button_normal_example %}
Normal
Normal
Normal
Normal
Normal
Normal
+{% endcapture %}
+
+
+{{button_normal_example}}
+
+
+{% highlight html %}
+{{button_normal_example}}
{% endhighlight %}
-
-
+
+
+
Hover
-
-
-
-{% highlight html %}
+{% capture button_hover_example %}
Hover
Hover
Hover
Hover
Hover
Hover
+{% endcapture %}
+
+
+{{button_hover_example}}
+
+
+{% highlight html %}
+{{button_hover_example}}
{% endhighlight %}
-
-
+
+
Focus
-
-
-
-{% highlight html %}
+{% capture button_focus_example %}
Focus
Focus
Focus
Focus
Focus
Focus
+{% endcapture %}
+
+
+{{button_focus_example}}
+
+
+{% highlight html %}
+{{button_focus_example}}
{% endhighlight %}
-
-
+
+
Active
-
-
-
-{% highlight html %}
+{% capture button_active_example %}
Active
Active
Active
Active
Active
Active
+{% endcapture %}
+
+
+{{button_active_example}}
+
+
+{% highlight html %}
+{{button_active_example}}
{% endhighlight %}
-
-
+
+
Loading
-
-
-
-{% highlight html %}
+{% capture button_loading_example %}
Loading
Loading
Loading
Loading
Loading
Loading
+{% endcapture %}
+
+
+{{button_loading_example}}
+
+
+{% highlight html %}
+{{button_loading_example}}
{% endhighlight %}
-
-
+
+
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
-
-
-
-
-
+
+
+
+
+
+ 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:
-
-{% highlight html %}
+{% capture button_group_example %}
+{% 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:
-
-{% 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:
-
+{% capture button_group_addons_example %}
+
+{% 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 197cf10f..184e7f3f 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 5769e1fe..f652a96c 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 1f0bab0c..99add01d 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