Fix button icon spacing

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adeda541745bbffcb0e25d8a90c5907039754b89..88fe4249f844aedda4e426707c1ede445d965d86 100644 (file)
--- 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 ccb529e1741421b4d449110b37db649f09fab4d9..e03e7850a2ed6eed7f497f078dc5c1a7bfcfbf37 100644 (file)
--- 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 c7f6266b3fab5c4bd3f70039bdc3bd1747339844..9774fd90521f36ca1bb4a90b00a0ea61a9c4bbec 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -15,486 +15,389 @@ doc-subtab: button
 
     <hr>
 
-    <div class="columns">
-      <div class="column">
-        <div class="block">
-          <a class="button">Button</a>
-          <a class="button is-white">White</a>
-          <a class="button is-light">Light</a>
-          <a class="button is-dark">Dark</a>
-          <a class="button is-black">Black</a>
-          <a class="button is-link">Link</a>
-        </div>
-        <div class="block">
-          <a class="button is-primary">Primary</a>
-          <a class="button is-info">Info</a>
-          <a class="button is-success">Success</a>
-          <a class="button is-warning">Warning</a>
-          <a class="button is-danger">Danger</a>
-        </div>
-      </div>
-      <div class="column">
+{% capture button_example %}
+<div class="block">
+  <a class="button">Button</a>
+  <a class="button is-white">White</a>
+  <a class="button is-light">Light</a>
+  <a class="button is-dark">Dark</a>
+  <a class="button is-black">Black</a>
+  <a class="button is-link">Link</a>
+</div>
+<div class="block">
+  <a class="button is-primary">Primary</a>
+  <a class="button is-info">Info</a>
+  <a class="button is-success">Success</a>
+  <a class="button is-warning">Warning</a>
+  <a class="button is-danger">Danger</a>
+</div>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_example}}
+  </div>
+  <div class="column">
 {% highlight html %}
-<a class="button">Button</a>
-<a class="button is-primary">Primary</a>
-<a class="button is-info">Info</a>
-<a class="button is-success">Success</a>
-<a class="button is-warning">Warning</a>
-<a class="button is-danger">Danger</a>
-<a class="button is-link">Link</a>
+{{button_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <hr>
 
     <h3 class="title">Sizes</h3>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-small">Small</a>
-        <a class="button">Normal</a>
-        <a class="button is-medium">Medium</a>
-        <a class="button is-large">Large</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_sizes_example %}
 <a class="button is-small">Small</a>
 <a class="button">Normal</a>
 <a class="button is-medium">Medium</a>
 <a class="button is-large">Large</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_sizes_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_sizes_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <hr>
 
     <h3 class="title">Styles</h3>
     <h4 class="subtitle">Outlined</h4>
-
-    <div class="columns">
-      <div class="column">
-        <a class="button is-outlined">Outlined</a>
-        <a class="button is-primary is-outlined">Outlined</a>
-        <a class="button is-info is-outlined">Outlined</a>
-        <a class="button is-success is-outlined">Outlined</a>
-        <a class="button is-danger is-outlined">Outlined</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_outlined_example %}
 <a class="button is-outlined">Outlined</a>
 <a class="button is-primary is-outlined">Outlined</a>
 <a class="button is-info is-outlined">Outlined</a>
 <a class="button is-success is-outlined">Outlined</a>
 <a class="button is-danger is-outlined">Outlined</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_outlined_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_outlined_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
 
-    <div class="columns">
-      <div class="column">
-        <div class="notification is-primary">
-          <a class="button is-primary is-inverted">Inverted</a>
-          <a class="button is-info is-inverted">Inverted</a>
-          <a class="button is-success is-inverted">Inverted</a>
-          <a class="button is-danger is-inverted">Inverted</a>
-        </div>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_inverted_example %}
 <a class="button is-primary is-inverted">Inverted</a>
 <a class="button is-info is-inverted">Inverted</a>
 <a class="button is-success is-inverted">Inverted</a>
 <a class="button is-danger is-inverted">Inverted</a>
-{% endhighlight %}
-      </div>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+    <div class="notification is-primary">
+{{button_inverted_example}}
     </div>
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_inverted_example}}
+{% endhighlight %}
+  </div>
+</div>
 
     <hr>
 
     <h3 class="title">States</h3>
     <h4 class="subtitle">Normal</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button">Normal</a>
-        <a class="button is-primary">Normal</a>
-        <a class="button is-info">Normal</a>
-        <a class="button is-success">Normal</a>
-        <a class="button is-warning">Normal</a>
-        <a class="button is-danger">Normal</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_normal_example %}
 <a class="button">Normal</a>
 <a class="button is-primary">Normal</a>
 <a class="button is-info">Normal</a>
 <a class="button is-success">Normal</a>
 <a class="button is-warning">Normal</a>
 <a class="button is-danger">Normal</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_normal_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_normal_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
+
     <h4 class="subtitle">Hover</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-hovered">Hover</a>
-        <a class="button is-primary is-hovered">Hover</a>
-        <a class="button is-info is-hovered">Hover</a>
-        <a class="button is-success is-hovered">Hover</a>
-        <a class="button is-warning is-hovered">Hover</a>
-        <a class="button is-danger is-hovered">Hover</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_hover_example %}
 <a class="button is-hovered">Hover</a>
 <a class="button is-primary is-hovered">Hover</a>
 <a class="button is-info is-hovered">Hover</a>
 <a class="button is-success is-hovered">Hover</a>
 <a class="button is-warning is-hovered">Hover</a>
 <a class="button is-danger is-hovered">Hover</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_hover_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_hover_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">Focus</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-focused">Focus</a>
-        <a class="button is-primary is-focused">Focus</a>
-        <a class="button is-info is-focused">Focus</a>
-        <a class="button is-success is-focused">Focus</a>
-        <a class="button is-warning is-focused">Focus</a>
-        <a class="button is-danger is-focused">Focus</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_focus_example %}
 <a class="button is-focused">Focus</a>
 <a class="button is-primary is-focused">Focus</a>
 <a class="button is-info is-focused">Focus</a>
 <a class="button is-success is-focused">Focus</a>
 <a class="button is-warning is-focused">Focus</a>
 <a class="button is-danger is-focused">Focus</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_focus_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_focus_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">Active</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-active">Active</a>
-        <a class="button is-primary is-active">Active</a>
-        <a class="button is-info is-active">Active</a>
-        <a class="button is-success is-active">Active</a>
-        <a class="button is-warning is-active">Active</a>
-        <a class="button is-danger is-active">Active</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_active_example %}
 <a class="button is-active">Active</a>
 <a class="button is-primary is-active">Active</a>
 <a class="button is-info is-active">Active</a>
 <a class="button is-success is-active">Active</a>
 <a class="button is-warning is-active">Active</a>
 <a class="button is-danger is-active">Active</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_active_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_active_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">Loading</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-loading">Loading</a>
-        <a class="button is-primary is-loading">Loading</a>
-        <a class="button is-info is-loading">Loading</a>
-        <a class="button is-success is-loading">Loading</a>
-        <a class="button is-warning is-loading">Loading</a>
-        <a class="button is-danger is-loading">Loading</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_loading_example %}
 <a class="button is-loading">Loading</a>
 <a class="button is-primary is-loading">Loading</a>
 <a class="button is-info is-loading">Loading</a>
 <a class="button is-success is-loading">Loading</a>
 <a class="button is-warning is-loading">Loading</a>
 <a class="button is-danger is-loading">Loading</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_loading_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_loading_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">Disabled</h4>
 
-    <div class="columns">
-      <div class="column">
-        <a class="button is-disabled">Disabled</a>
-        <a class="button is-primary is-disabled">Disabled</a>
-        <a class="button is-info is-disabled">Disabled</a>
-        <a class="button is-success is-disabled">Disabled</a>
-        <a class="button is-warning is-disabled">Disabled</a>
-        <a class="button is-danger is-disabled">Disabled</a>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_disabled_example %}
 <a class="button is-disabled">Disabled</a>
 <a class="button is-primary is-disabled">Disabled</a>
 <a class="button is-info is-disabled">Disabled</a>
 <a class="button is-success is-disabled">Disabled</a>
 <a class="button is-warning is-disabled">Disabled</a>
 <a class="button is-danger is-disabled">Disabled</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_disabled_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_disabled_example}}
 {% endhighlight %}
-      </div>
-    </div>
+  </div>
+</div>
 
     <h4 class="subtitle">With Font Awesome icons</h4>
 
-    <div class="columns">
-      <div class="column">
-        <p class="control">
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-bold"></i>
-            </span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-italic"></i>
-            </span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-underline"></i>
-            </span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button">
-            <span class="icon">
-              <i class="fa fa-github"></i>
-            </span>
-            <span>GitHub</span>
-          </a>
-          <a class="button is-primary">
-            <span class="icon">
-              <i class="fa fa-twitter"></i>
-            </span>
-            <span>Twitter</span>
-          </a>
-          <a class="button is-success">
-            <span class="icon is-small">
-              <i class="fa fa-check"></i>
-            </span>
-            <span>Save</span>
-          </a>
-          <a class="button is-danger is-outlined">
-            <span>Delete</span>
-            <span class="icon is-small">
-              <i class="fa fa-times"></i>
-            </span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-small">
-            <span class="icon is-small">
-              <i class="fa fa-github"></i>
-            </span>
-            <span>GitHub</span>
-          </a>
-          <a class="button">
-            <span class="icon">
-              <i class="fa fa-github"></i>
-            </span>
-            <span>GitHub</span>
-          </a>
-          <a class="button is-medium">
-            <span class="icon">
-              <i class="fa fa-github"></i>
-            </span>
-            <span>GitHub</span>
-          </a>
-          <a class="button is-large">
-            <span class="icon is-medium">
-              <i class="fa fa-github"></i>
-            </span>
-            <span>GitHub</span>
-          </a>
-        </p>
-      </div>
-      <div class="column">
-{% highlight html %}
-<a class="button">
-  <span class="icon">
-    <i class="fa fa-github"></i>
-  </span>
-  <span>GitHub</span>
-</a>
-<a class="button is-primary">
-  <span class="icon">
-    <i class="fa fa-twitter"></i>
-  </span>
-  <span>Twitter</span>
-</a>
-<a class="button is-success">
-  <span class="icon">
-    <i class="fa fa-check"></i>
-  </span>
-  <span>Save</span>
-</a>
-<a class="button is-danger">
-  <span>Delete</span>
-  <span class="icon">
-    <i class="fa fa-times"></i>
-  </span>
-</a>
-<a class="button is-danger is-outlined">
-  <span class="icon">
-    <i class="fa fa-times"></i>
-  </span>
-  <span>Delete</span>
-</a>
-{% endhighlight %}
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            <span class="tag is-success">New!</span>
-          </p>
-          <p>
-            If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
-          </p>
-        </div>
-
-        <p class="control">
-          <a class="button is-small">
-            <span class="icon is-small">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button">
-            <span class="icon">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-medium">
-            <span class="icon is-small">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button is-medium">
-            <span class="icon">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button is-medium">
-            <span class="icon is-medium">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-large">
-            <span class="icon is-small">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button is-large">
-            <span class="icon">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button is-large">
-            <span class="icon is-medium">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-          <a class="button is-large">
-            <span class="icon is-large">
-              <i class="fa fa-header"></i>
-            </span>
-          </a>
-        </p>
-      </div>
-      <div class="column">
-{% highlight html %}
+{% capture button_fa_example %}
 <p class="control">
-  <a class="button is-small">
+  <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fa fa-bold"></i>
     </span>
   </a>
-</p>
-<p class="control">
   <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fa fa-italic"></i>
     </span>
   </a>
   <a class="button">
-    <span class="icon">
-      <i class="fa fa-header"></i>
+    <span class="icon is-small">
+      <i class="fa fa-underline"></i>
     </span>
   </a>
 </p>
 <p class="control">
-  <a class="button is-medium">
-    <span class="icon is-small">
-      <i class="fa fa-header"></i>
+  <a class="button">
+    <span class="icon">
+      <i class="fa fa-github"></i>
     </span>
+    <span>GitHub</span>
   </a>
-  <a class="button is-medium">
+  <a class="button is-primary">
     <span class="icon">
-      <i class="fa fa-header"></i>
+      <i class="fa fa-twitter"></i>
     </span>
+    <span>Twitter</span>
   </a>
-  <a class="button is-medium">
-    <span class="icon is-medium">
-      <i class="fa fa-header"></i>
+  <a class="button is-success">
+    <span class="icon is-small">
+      <i class="fa fa-check"></i>
+    </span>
+    <span>Save</span>
+  </a>
+  <a class="button is-danger is-outlined">
+    <span>Delete</span>
+    <span class="icon is-small">
+      <i class="fa fa-times"></i>
     </span>
   </a>
 </p>
 <p class="control">
-  <a class="button is-large">
+  <a class="button is-small">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fa fa-github"></i>
     </span>
+    <span>GitHub</span>
   </a>
-  <a class="button is-large">
+  <a class="button">
     <span class="icon">
-      <i class="fa fa-header"></i>
+      <i class="fa fa-github"></i>
     </span>
+    <span>GitHub</span>
   </a>
-  <a class="button is-large">
-    <span class="icon is-medium">
-      <i class="fa fa-header"></i>
+  <a class="button is-medium">
+    <span class="icon">
+      <i class="fa fa-github"></i>
     </span>
+    <span>GitHub</span>
   </a>
   <a class="button is-large">
-    <span class="icon is-large">
-      <i class="fa fa-header"></i>
+    <span class="icon is-medium">
+      <i class="fa fa-github"></i>
     </span>
+    <span>GitHub</span>
   </a>
 </p>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_fa_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_fa_example}}
 {% endhighlight %}
-      </div>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+      </p>
+      <p>
+        If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
+      </p>
     </div>
+{% capture button_only_icon_example %}
+<p class="control">
+<a class="button is-small">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button is-medium">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-medium">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-medium">
+<span class="icon is-medium">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button is-large">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon is-medium">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon is-large">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+{% endcapture %}
+{{button_only_icon_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_only_icon_example}}
+{% endhighlight %}
+  </div>
+</div>
 
     <hr>
 
@@ -502,26 +405,7 @@ doc-subtab: button
     <div class="content">
       <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
     </div>
-    <div class="example">
-      <div class="control is-grouped">
-        <p class="control">
-          <a class="button is-primary">
-            Save changes
-          </a>
-        </p>
-        <p class="control">
-          <a class="button">
-            Cancel
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-danger">
-            Delete post
-          </a>
-        </p>
-      </div>
-    </div>
-{% highlight html %}
+{% capture button_group_example %}
 <div class="control is-grouped">
   <p class="control">
     <a class="button is-primary">
@@ -539,6 +423,12 @@ doc-subtab: button
     </a>
   </p>
 </div>
+{% endcapture %}
+<div class="example">
+{{button_group_example}}
+</div>
+{% highlight html %}
+{{button_group_example}}
 {% endhighlight %}
 
     <hr>
@@ -547,29 +437,7 @@ doc-subtab: button
     <div class="content">
       <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
-    <div class="example">
-      <p class="control has-addons">
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-left"></i>
-          </span>
-          <span>Left</span>
-        </a>
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-center"></i>
-          </span>
-          <span>Center</span>
-        </a>
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-right"></i>
-          </span>
-          <span>Right</span>
-        </a>
-      </p>
-    </div>
-{% highlight html %}
+{% capture button_addons_example %}
 <p class="control has-addons">
   <a class="button">
     <span class="icon is-small">
@@ -590,6 +458,12 @@ doc-subtab: button
     <span>Right</span>
   </a>
 </p>
+{% endcapture %}
+    <div class="example">
+{{button_addons_example}}
+    </div>
+{% highlight html %}
+{{button_addons_example}}
 {% endhighlight %}
 
     <hr>
@@ -598,71 +472,55 @@ doc-subtab: button
     <div class="content">
       <p>You can group together addons as well:</p>
     </div>
-    <div class="example">
-      <div class="control is-grouped">
-        <p class="control has-addons">
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-bold"></i>
-            </span>
-            <span>Bold</span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-italic"></i>
-            </span>
-            <span>Italic</span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-underline"></i>
-            </span>
-            <span>Underline</span>
-          </a>
-        </p>
-        <p class="control has-addons">
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-align-left"></i>
-            </span>
-            <span>Left</span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-align-center"></i>
-            </span>
-            <span>Center</span>
-          </a>
-          <a class="button">
-            <span class="icon is-small">
-              <i class="fa fa-align-right"></i>
-            </span>
-            <span>Right</span>
-          </a>
-        </p>
-      </div>
-    </div>
+{% capture button_group_addons_example %}
+<div class="control is-grouped">
+  <p class="control has-addons">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-bold"></i>
+      </span>
+      <span>Bold</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-italic"></i>
+      </span>
+      <span>Italic</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-underline"></i>
+      </span>
+      <span>Underline</span>
+    </a>
+  </p>
+  <p class="control has-addons">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-left"></i>
+      </span>
+      <span>Left</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-center"></i>
+      </span>
+      <span>Center</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-right"></i>
+      </span>
+      <span>Right</span>
+    </a>
+  </p>
+</div>
+{% endcapture %}
+<div class="example">
+{{button_group_addons_example}}
+</div>
 {% highlight html %}
-<p class="control has-addons">
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-left"></i>
-    </span>
-    <span>Left</span>
-  </a>
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-center"></i>
-    </span>
-    <span>Center</span>
-  </a>
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-right"></i>
-    </span>
-    <span>Right</span>
-  </a>
-</p>
+{{button_group_addons_example}}
 {% endhighlight %}
 
   </div>

diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 197cf10ff2ae6ed0ddf01691fd9cb21f878e68bf..184e7f3fb99aff1b6923e5da2e3383e524c397cd 100644 (file)
--- 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 5769e1fedbfaf96ffc71713294acba47f4e471dc..f652a96c9e43328640f35a6a08ea077a68e5840c 100644 (file)
--- 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 1f0bab0c36618da66410d70c140b83119d2cc7ac..99add01db7bf0dafa517b4eda438551aeee90806 100644 (file)
--- 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