Fix button icons

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9720506f439c3a377fbfce9fe865a227b89d7bd..032729442c5a30cbdbeb59d812001d2889a0acff 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Bulma Changelog
 
+## 0.3.0
+
+# Use `rem` and `em`
+# Move variables to their own file
+# Remove small tag
+# Fix Font Awesome icons in buttons
+
 ## 0.2.2
 
 * Fix: remove multiple imports

diff --git a/docs/.gitignore b/docs/.gitignore
index 9099b6679e072af86ef314c4147006a6c0afa26d..fb0aa0fde3e521e315bc07f107ff68ad2f6755c1 100644 (file)
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -11,5 +11,6 @@ npm-debug.log
 .sass-cache
 /_sass
 /bulma
+/fontawesome
 /styles/node_modules
 _site

diff --git a/docs/_config.yml b/docs/_config.yml
index d2700c769c69f6795be2d43b4caf00ba9bbf220f..6cb9fd597d9baaeed241553c0e77a10d6bdf49db 100644 (file)
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -8,6 +8,7 @@ description:   "Bulma is an open source CSS framework based on Flexbox and built
 markdown:      kramdown
 permalink:     pretty
 url:           http://bulma.io
+fontawesome:   https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
 
 # Variables
 

diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index ef14384ea57284b80170ddace5f45c56948291c8..feae95961e79cb82c6140982ca888ff82c91ef92 100644 (file)
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
+  <link rel="stylesheet" href="{{ site.fontawesome }}">
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index f1994a8fd050533fb3ac14946224899d4a935558..bce0068062a3da9cbafb2513550ff873bf3cfa64 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -20,7 +20,7 @@ body.page-grid .column > .notification
 
 +tablet
   .header-item .button + .button
-    margin-left: 10px
+    margin-left: 0.75rem
 
 // Additional
 svg
@@ -221,13 +221,13 @@ html.route-index #carbon
   background: $white
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 20px
+  padding: 1.5rem
 
 #mc_embed_signup
   .control
     margin-bottom: 0
   .notification
-    margin-top: 10px
+    margin-top: 0.75rem
 
 #social
   align-items: center
@@ -261,12 +261,12 @@ html.route-index #carbon
   border: 1px solid $warning
   border-top-right-radius: $radius
   color: $warning-invert
-  padding: 15px 20px
+  padding: 1.25rem 1.5rem
   position: relative
   &:not(:first-child)
-    margin-top: 30px
+    margin-top: 2rem
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
   &:before
     background: $warning
     border-radius: $radius $radius 0 0
@@ -292,11 +292,11 @@ html.route-index #carbon
     border: 1px solid $warning
     border-radius: 0 0 $radius $radius
     border-top: none
-    margin-top: -20px
+    margin-top: -1.5rem
     pre
       max-height: 600px
     &:not(:last-child)
-      margin-bottom: 40px
+      margin-bottom: 3rem
 
 $structure: $danger
 $structure-invert: $danger-invert
@@ -304,7 +304,7 @@ $structure-invert: $danger-invert
 .structure
   border-color: $structure
   border-radius: $radius
-  padding: 20px
+  padding: 1.5rem
   &:before
     background: $structure
     color: $structure-invert
@@ -331,11 +331,11 @@ $structure-invert: $danger-invert
     padding: 3px 5px
     z-index: 2
   &.is-structure-container
-    padding: 20px 10px 10px
+    padding: 1.5rem 0.75rem 0.75rem
     &:after
       align-items: flex-start
       justify-content: flex-start
-      padding: 5px 10px
+      padding: 0.5rem 0.75rem
 
 .highlight
   position: relative
@@ -360,11 +360,11 @@ $structure-invert: $danger-invert
 
 +tablet
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
-    margin-left: 20px
-    margin-right: 20px
+    margin-left: 1.5rem
+    margin-right: 1.5rem
     & + .highlight
-      margin-left: 20px
-      margin-right: 20px
+      margin-left: 1.5rem
+      margin-right: 1.5rem
 
 .section.is-fullwidth
   padding: 0 !important

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index ce6e2a03306ac2b228aca15d695f0ab53c3dfc4d..357e610dd70187724e4c24308fa95b3d2948dafb 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -95,7 +95,7 @@ th {
 
 html {
   background-color: whitesmoke;
-  font-size: 16px;
+  font-size: 1rem;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -173,7 +173,7 @@ input[type="radio"] {
 }
 
 small {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 span {
@@ -189,14 +189,14 @@ strong {
 pre {
   background-color: whitesmoke;
   color: #4a4a4a;
-  font-size: 0.8em;
+  font-size: 0.75em;
   white-space: pre;
   word-wrap: normal;
 }
 
 pre code {
-  background-color: whitesmoke;
-  color: #4a4a4a;
+  background: none;
+  color: inherit;
   display: block;
   font-size: 1em;
   overflow-x: auto;
@@ -579,7 +579,7 @@ a.box:active {
   border-radius: 3px;
   box-shadow: none;
   display: inline-flex;
-  font-size: 1em;
+  font-size: 1rem;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -592,6 +592,9 @@ a.box:active {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  background-color: white;
+  border: 1px solid #dbdbdb;
+  color: #363636;
   cursor: pointer;
   justify-content: center;
   padding-left: 1em;
@@ -612,16 +615,44 @@ a.box:active {
   color: inherit;
 }
 
-.button .icon:first-child,
-.button .tag:first-child {
-  margin-left: -2px;
-  margin-right: 4px;
+.button .icon:first-child {
+  margin-left: calc(-1px - 0.5rem);
+}
+
+.button .icon:last-child {
+  margin-right: calc(-1px - 0.5rem);
+}
+
+.button .icon.is-small:first-child {
+  margin-left: calc(-1px - 0.25rem);
+}
+
+.button .icon.is-small:last-child {
+  margin-right: calc(-1px - 0.25rem);
+}
+
+.button .icon.is-medium:first-child {
+  margin-left: calc(-1px - 0.75rem);
+}
+
+.button .icon.is-medium:last-child {
+  margin-right: calc(-1px - 0.75rem);
+}
+
+.button .icon.is-large:first-child {
+  margin-left: calc(-1px - 1.25rem);
+}
+
+.button .icon.is-large:last-child {
+  margin-right: calc(-1px - 1.25rem);
 }
 
-.button .icon:last-child,
-.button .tag:last-child {
-  margin-left: 4px;
-  margin-right: -2px;
+.button .icon:first-child:not(:last-child) {
+  margin-right: 0.25rem !important;
+}
+
+.button .icon:last-child:not(:first-child) {
+  margin-left: 0.25rem !important;
 }
 
 .button:hover, .button.is-hovered {
@@ -643,7 +674,7 @@ a.box:active {
 
 .button.is-link {
   background-color: transparent;
-  border-width: 0;
+  border-color: transparent;
   color: #4a4a4a;
   text-decoration: underline;
 }
@@ -655,7 +686,7 @@ a.box:active {
 
 .button.is-white {
   background-color: white;
-  border-width: 0;
+  border-color: transparent;
   color: #0a0a0a;
 }
 
@@ -706,7 +737,7 @@ a.box:active {
 
 .button.is-black {
   background-color: #0a0a0a;
-  border-width: 0;
+  border-color: transparent;
   color: white;
 }
 
@@ -757,7 +788,7 @@ a.box:active {
 
 .button.is-light {
   background-color: whitesmoke;
-  border-width: 0;
+  border-color: transparent;
   color: #363636;
 }
 
@@ -808,7 +839,7 @@ a.box:active {
 
 .button.is-dark {
   background-color: #363636;
-  border-width: 0;
+  border-color: transparent;
   color: whitesmoke;
 }
 
@@ -859,31 +890,31 @@ a.box:active {
 
 .button.is-primary {
   background-color: #00d1b2;
-  border-width: 0;
-  color: white;
+  border-color: transparent;
+  color: #fff;
 }
 
 .button.is-primary:hover, .button.is-primary.is-hovered {
   background-color: #00c4a7;
   border-color: transparent;
-  color: white;
+  color: #fff;
 }
 
 .button.is-primary:focus, .button.is-primary.is-focused {
   border-color: transparent;
   box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5);
-  color: white;
+  color: #fff;
 }
 
 .button.is-primary:active, .button.is-primary.is-active {
   background-color: #00b89c;
   border-color: transparent;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-  color: white;
+  color: #fff;
 }
 
 .button.is-primary.is-inverted {
-  background-color: white;
+  background-color: #fff;
   color: #00d1b2;
 }
 
@@ -892,7 +923,7 @@ a.box:active {
 }
 
 .button.is-primary.is-loading:after {
-  border-color: transparent transparent white white !important;
+  border-color: transparent transparent #fff #fff !important;
 }
 
 .button.is-primary.is-outlined {
@@ -905,36 +936,36 @@ a.box:active {
 .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
   background-color: #00d1b2;
   border-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .button.is-info {
   background-color: #3273dc;
-  border-width: 0;
-  color: white;
+  border-color: transparent;
+  color: #fff;
 }
 
 .button.is-info:hover, .button.is-info.is-hovered {
   background-color: #276cda;
   border-color: transparent;
-  color: white;
+  color: #fff;
 }
 
 .button.is-info:focus, .button.is-info.is-focused {
   border-color: transparent;
   box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5);
-  color: white;
+  color: #fff;
 }
 
 .button.is-info:active, .button.is-info.is-active {
   background-color: #2366d1;
   border-color: transparent;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-  color: white;
+  color: #fff;
 }
 
 .button.is-info.is-inverted {
-  background-color: white;
+  background-color: #fff;
   color: #3273dc;
 }
 
@@ -943,7 +974,7 @@ a.box:active {
 }
 
 .button.is-info.is-loading:after {
-  border-color: transparent transparent white white !important;
+  border-color: transparent transparent #fff #fff !important;
 }
 
 .button.is-info.is-outlined {
@@ -956,36 +987,36 @@ a.box:active {
 .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
   background-color: #3273dc;
   border-color: #3273dc;
-  color: white;
+  color: #fff;
 }
 
 .button.is-success {
   background-color: #23d160;
-  border-width: 0;
-  color: white;
+  border-color: transparent;
+  color: #fff;
 }
 
 .button.is-success:hover, .button.is-success.is-hovered {
   background-color: #22c65b;
   border-color: transparent;
-  color: white;
+  color: #fff;
 }
 
 .button.is-success:focus, .button.is-success.is-focused {
   border-color: transparent;
   box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5);
-  color: white;
+  color: #fff;
 }
 
 .button.is-success:active, .button.is-success.is-active {
   background-color: #20bc56;
   border-color: transparent;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-  color: white;
+  color: #fff;
 }
 
 .button.is-success.is-inverted {
-  background-color: white;
+  background-color: #fff;
   color: #23d160;
 }
 
@@ -994,7 +1025,7 @@ a.box:active {
 }
 
 .button.is-success.is-loading:after {
-  border-color: transparent transparent white white !important;
+  border-color: transparent transparent #fff #fff !important;
 }
 
 .button.is-success.is-outlined {
@@ -1007,12 +1038,12 @@ a.box:active {
 .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus {
   background-color: #23d160;
   border-color: #23d160;
-  color: white;
+  color: #fff;
 }
 
 .button.is-warning {
   background-color: #ffdd57;
-  border-width: 0;
+  border-color: transparent;
   color: rgba(0, 0, 0, 0.7);
 }
 
@@ -1063,31 +1094,31 @@ a.box:active {
 
 .button.is-danger {
   background-color: #ff3860;
-  border-width: 0;
-  color: white;
+  border-color: transparent;
+  color: #fff;
 }
 
 .button.is-danger:hover, .button.is-danger.is-hovered {
   background-color: #ff2b56;
   border-color: transparent;
-  color: white;
+  color: #fff;
 }
 
 .button.is-danger:focus, .button.is-danger.is-focused {
   border-color: transparent;
   box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5);
-  color: white;
+  color: #fff;
 }
 
 .button.is-danger:active, .button.is-danger.is-active {
   background-color: #ff1f4b;
   border-color: transparent;
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-  color: white;
+  color: #fff;
 }
 
 .button.is-danger.is-inverted {
-  background-color: white;
+  background-color: #fff;
   color: #ff3860;
 }
 
@@ -1096,7 +1127,7 @@ a.box:active {
 }
 
 .button.is-danger.is-loading:after {
-  border-color: transparent transparent white white !important;
+  border-color: transparent transparent #fff #fff !important;
 }
 
 .button.is-danger.is-outlined {
@@ -1109,22 +1140,118 @@ a.box:active {
 .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus {
   background-color: #ff3860;
   border-color: #ff3860;
-  color: white;
+  color: #fff;
 }
 
 .button.is-small {
   border-radius: 2px;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
+}
+
+.button.is-small .icon:first-child {
+  margin-left: calc(-1px - 0.5625rem);
+}
+
+.button.is-small .icon:last-child {
+  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:last-child {
+  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:last-child {
+  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:last-child {
+  margin-right: calc(-1px - 1.3125rem);
 }
 
 .button.is-medium {
   font-size: 1.25rem;
 }
 
+.button.is-medium .icon:first-child {
+  margin-left: calc(-1px - 0.4375rem);
+}
+
+.button.is-medium .icon:last-child {
+  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:last-child {
+  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:last-child {
+  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:last-child {
+  margin-right: calc(-1px - 1.1875rem);
+}
+
 .button.is-large {
   font-size: 1.5rem;
 }
 
+.button.is-large .icon:first-child {
+  margin-left: calc(-1px - 0.375rem);
+}
+
+.button.is-large .icon:last-child {
+  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:last-child {
+  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:last-child {
+  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:last-child {
+  margin-right: calc(-1px - 1.125rem);
+}
+
 .button[disabled], .button.is-disabled {
   opacity: 0.5;
 }
@@ -1196,7 +1323,7 @@ a.box:active {
 .content h5,
 .content h6 {
   color: #363636;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.125;
 }
 
@@ -1272,7 +1399,7 @@ a.box:active {
 }
 
 .content.is-small {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .content.is-medium {
@@ -1292,7 +1419,7 @@ a.box:active {
   border-radius: 3px;
   box-shadow: none;
   display: inline-flex;
-  font-size: 1em;
+  font-size: 1rem;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -1422,7 +1549,7 @@ a.box:active {
 .input.is-small,
 .textarea.is-small {
   border-radius: 2px;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .input.is-medium,
@@ -1527,7 +1654,7 @@ a.box:active {
   border-radius: 3px;
   box-shadow: none;
   display: inline-flex;
-  font-size: 1em;
+  font-size: 1rem;
   height: 2.5em;
   justify-content: flex-start;
   line-height: 1.5;
@@ -1598,7 +1725,7 @@ a.box:active {
 
 .select.is-small {
   border-radius: 2px;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .select.is-medium {
@@ -1629,7 +1756,7 @@ a.box:active {
 
 .help {
   display: block;
-  font-size: 0.875em;
+  font-size: 0.75rem;
   margin-top: 5px;
 }
 
@@ -1692,7 +1819,7 @@ a.box:active {
 }
 
 .control:not(:last-child) {
-  margin-bottom: 10px;
+  margin-bottom: 0.75rem;
 }
 
 .control.has-addons {
@@ -1881,7 +2008,7 @@ a.box:active {
 
 .control.is-grouped > .control:not(:last-child) {
   margin-bottom: 0;
-  margin-right: 10px;
+  margin-right: 0.75rem;
 }
 
 .control.is-grouped > .control.is-expanded {
@@ -2004,7 +2131,7 @@ a.box:active {
 .notification {
   background-color: whitesmoke;
   border-radius: 3px;
-  padding: 16px 20px;
+  padding: 1.25rem 1.5rem;
   position: relative;
 }
 
@@ -2020,8 +2147,9 @@ a.box:active {
 
 .notification .delete {
   border-radius: 0 3px;
-  float: right;
-  margin: -16px -20px 0 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .notification .title,
@@ -2052,17 +2180,17 @@ a.box:active {
 
 .notification.is-primary {
   background-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .notification.is-info {
   background-color: #3273dc;
-  color: white;
+  color: #fff;
 }
 
 .notification.is-success {
   background-color: #23d160;
-  color: white;
+  color: #fff;
 }
 
 .notification.is-warning {
@@ -2072,7 +2200,7 @@ a.box:active {
 
 .notification.is-danger {
   background-color: #ff3860;
-  color: white;
+  color: #fff;
 }
 
 .progress {
@@ -2081,7 +2209,7 @@ a.box:active {
   border: none;
   border-radius: 290486px;
   display: block;
-  height: 12px;
+  height: 1rem;
   overflow: hidden;
   padding: 0;
   width: 100%;
@@ -2176,15 +2304,15 @@ a.box:active {
 }
 
 .progress.is-small {
-  height: 8px;
+  height: 0.75rem;
 }
 
 .progress.is-medium {
-  height: 16px;
+  height: 1.25rem;
 }
 
 .progress.is-large {
-  height: 20px;
+  height: 1.5rem;
 }
 
 .table {
@@ -2245,7 +2373,7 @@ a.box:active {
 .table td.is-link > a:hover,
 .table th.is-link > a:hover {
   background-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .table td.is-narrow,
@@ -2328,9 +2456,82 @@ a.box:active {
   background-color: whitesmoke;
 }
 
+.tag {
+  align-items: center;
+  background-color: whitesmoke;
+  border-radius: 290486px;
+  color: #4a4a4a;
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 2em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.875em;
+  padding-right: 0.875em;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.tag .delete {
+  margin-left: 0.25em;
+  margin-right: -0.5em;
+}
+
+.tag.is-white {
+  background-color: white;
+  color: #0a0a0a;
+}
+
+.tag.is-black {
+  background-color: #0a0a0a;
+  color: white;
+}
+
+.tag.is-light {
+  background-color: whitesmoke;
+  color: #363636;
+}
+
+.tag.is-dark {
+  background-color: #363636;
+  color: whitesmoke;
+}
+
+.tag.is-primary {
+  background-color: #00d1b2;
+  color: #fff;
+}
+
+.tag.is-info {
+  background-color: #3273dc;
+  color: #fff;
+}
+
+.tag.is-success {
+  background-color: #23d160;
+  color: #fff;
+}
+
+.tag.is-warning {
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.tag.is-danger {
+  background-color: #ff3860;
+  color: #fff;
+}
+
+.tag.is-medium {
+  font-size: 1rem;
+}
+
+.tag.is-large {
+  font-size: 1.25rem;
+}
+
 .title,
 .subtitle {
-  font-weight: 300;
   word-break: break-word;
 }
 
@@ -2363,7 +2564,8 @@ a.box:active {
 
 .title {
   color: #363636;
-  font-size: 1.5rem;
+  font-size: 2rem;
+  font-weight: 300;
   line-height: 1.125;
 }
 
@@ -2384,11 +2586,11 @@ a.box:active {
 }
 
 .title.is-2 {
-  font-size: 2.5rem;
+  font-size: 2.75rem;
 }
 
 .title.is-3 {
-  font-size: 1.75rem;
+  font-size: 2rem;
 }
 
 .title.is-4 {
@@ -2403,17 +2605,10 @@ a.box:active {
   font-size: 16px;
 }
 
-.title.is-normal {
-  font-weight: 400;
-}
-
-.title.is-normal strong {
-  font-weight: 700;
-}
-
 .subtitle {
   color: #4a4a4a;
   font-size: 1.25rem;
+  font-weight: 300;
   line-height: 1.25;
 }
 
@@ -2430,11 +2625,11 @@ a.box:active {
 }
 
 .subtitle.is-2 {
-  font-size: 2.5rem;
+  font-size: 2.75rem;
 }
 
 .subtitle.is-3 {
-  font-size: 1.75rem;
+  font-size: 2rem;
 }
 
 .subtitle.is-4 {
@@ -2449,14 +2644,6 @@ a.box:active {
   font-size: 16px;
 }
 
-.subtitle.is-normal {
-  font-weight: 400;
-}
-
-.subtitle.is-normal strong {
-  font-weight: 700;
-}
-
 .block:not(:last-child) {
   margin-bottom: 1.5rem;
 }
@@ -2478,7 +2665,7 @@ a.box:active {
 
 @media screen and (min-width: 1180px) {
   .container {
-    max-width: 1200px;
+    max-width: 1080px;
   }
 }
 
@@ -2495,32 +2682,34 @@ a.box:active {
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
-  height: 24px;
+  font-size: 1rem;
+  height: 1.5em;
   outline: none;
   position: relative;
+  transform: rotate(45deg);
+  transform-origin: center center;
   vertical-align: top;
-  width: 24px;
+  width: 1.5em;
 }
 
 .delete:before, .delete:after {
   background-color: white;
   content: "";
   display: block;
-  height: 2px;
   left: 50%;
-  margin-left: -25%;
-  margin-top: -1px;
   position: absolute;
   top: 50%;
-  width: 50%;
+  transform: translateX(-50%) translateY(-50%);
 }
 
 .delete:before {
-  transform: rotate(45deg);
+  height: 2px;
+  width: 50%;
 }
 
 .delete:after {
-  transform: rotate(-45deg);
+  height: 50%;
+  width: 2px;
 }
 
 .delete:hover {
@@ -2528,18 +2717,15 @@ a.box:active {
 }
 
 .delete.is-small {
-  height: 16px;
-  width: 16px;
+  font-size: 0.75rem;
 }
 
 .delete.is-medium {
-  height: 32px;
-  width: 32px;
+  font-size: 1.25rem;
 }
 
 .delete.is-large {
-  height: 40px;
-  width: 40px;
+  font-size: 1.5rem;
 }
 
 .fa {
@@ -2551,11 +2737,11 @@ a.box:active {
 .icon {
   display: inline-block;
   font-size: 21px;
-  height: 24px;
-  line-height: 24px;
+  height: 1.5rem;
+  line-height: 1.5rem;
   text-align: center;
   vertical-align: top;
-  width: 24px;
+  width: 1.5rem;
 }
 
 .icon .fa {
@@ -2566,31 +2752,31 @@ a.box:active {
 .icon.is-small {
   display: inline-block;
   font-size: 14px;
-  height: 16px;
-  line-height: 16px;
+  height: 1rem;
+  line-height: 1rem;
   text-align: center;
   vertical-align: top;
-  width: 16px;
+  width: 1rem;
 }
 
 .icon.is-medium {
   display: inline-block;
   font-size: 28px;
-  height: 32px;
-  line-height: 32px;
+  height: 2rem;
+  line-height: 2rem;
   text-align: center;
   vertical-align: top;
-  width: 32px;
+  width: 2rem;
 }
 
 .icon.is-large {
   display: inline-block;
   font-size: 42px;
-  height: 48px;
-  line-height: 48px;
+  height: 3rem;
+  line-height: 3rem;
   text-align: center;
   vertical-align: top;
-  width: 48px;
+  width: 3rem;
 }
 
 .heading {
@@ -2638,99 +2824,6 @@ a.box:active {
   vertical-align: top;
 }
 
-.tag {
-  align-items: center;
-  background-color: whitesmoke;
-  border-radius: 290486px;
-  color: #4a4a4a;
-  display: inline-flex;
-  font-size: 12px;
-  height: 24px;
-  justify-content: center;
-  line-height: 16px;
-  padding-left: 10px;
-  padding-right: 10px;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.tag .delete {
-  margin-left: 4px;
-  margin-right: -6px;
-}
-
-.tag.is-white {
-  background-color: white;
-  color: #0a0a0a;
-}
-
-.tag.is-black {
-  background-color: #0a0a0a;
-  color: white;
-}
-
-.tag.is-light {
-  background-color: whitesmoke;
-  color: #363636;
-}
-
-.tag.is-dark {
-  background-color: #363636;
-  color: whitesmoke;
-}
-
-.tag.is-primary {
-  background-color: #00d1b2;
-  color: white;
-}
-
-.tag.is-info {
-  background-color: #3273dc;
-  color: white;
-}
-
-.tag.is-success {
-  background-color: #23d160;
-  color: white;
-}
-
-.tag.is-warning {
-  background-color: #ffdd57;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.tag.is-danger {
-  background-color: #ff3860;
-  color: white;
-}
-
-.tag.is-small {
-  font-size: 0.875rem;
-  height: 20px;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-.tag.is-medium {
-  font-size: 16px;
-  height: 32px;
-  padding-left: 14px;
-  padding-right: 14px;
-}
-
-.tag.is-large {
-  font-size: 1.25rem;
-  height: 40px;
-  line-height: 24px;
-  padding-left: 18px;
-  padding-right: 18px;
-}
-
-.tag.is-large .delete {
-  margin-left: 4px;
-  margin-right: -8px;
-}
-
 .card-header {
   align-items: stretch;
   box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
@@ -3213,7 +3306,7 @@ a.box:active {
 
 .menu-list a.is-active {
   background-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .menu-list li ul {
@@ -3224,7 +3317,7 @@ a.box:active {
 
 .menu-label {
   color: #7a7a7a;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   letter-spacing: 1px;
   margin-bottom: 5px;
   text-transform: uppercase;
@@ -3247,7 +3340,7 @@ a.box:active {
 .message-header {
   background-color: #4a4a4a;
   border-radius: 3px 3px 0 0;
-  color: white;
+  color: #fff;
   padding: 0.4rem 0.8rem;
 }
 
@@ -3331,7 +3424,7 @@ a.box:active {
 
 .message.is-primary .message-header {
   background-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .message.is-primary .message-body {
@@ -3345,7 +3438,7 @@ a.box:active {
 
 .message.is-info .message-header {
   background-color: #3273dc;
-  color: white;
+  color: #fff;
 }
 
 .message.is-info .message-body {
@@ -3359,7 +3452,7 @@ a.box:active {
 
 .message.is-success .message-header {
   background-color: #23d160;
-  color: white;
+  color: #fff;
 }
 
 .message.is-success .message-body {
@@ -3387,7 +3480,7 @@ a.box:active {
 
 .message.is-danger .message-header {
   background-color: #ff3860;
-  color: white;
+  color: #fff;
 }
 
 .message.is-danger .message-body {
@@ -3435,11 +3528,14 @@ a.box:active {
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
-  height: 24px;
+  font-size: 1rem;
+  height: 1.5em;
   outline: none;
   position: relative;
+  transform: rotate(45deg);
+  transform-origin: center center;
   vertical-align: top;
-  width: 24px;
+  width: 1.5em;
   background: none;
   height: 40px;
   position: fixed;
@@ -3452,21 +3548,20 @@ a.box:active {
   background-color: white;
   content: "";
   display: block;
-  height: 2px;
   left: 50%;
-  margin-left: -25%;
-  margin-top: -1px;
   position: absolute;
   top: 50%;
-  width: 50%;
+  transform: translateX(-50%) translateY(-50%);
 }
 
 .modal-close:before {
-  transform: rotate(45deg);
+  height: 2px;
+  width: 50%;
 }
 
 .modal-close:after {
-  transform: rotate(-45deg);
+  height: 50%;
+  width: 2px;
 }
 
 .modal-close:hover {
@@ -3474,18 +3569,15 @@ a.box:active {
 }
 
 .modal-close.is-small {
-  height: 16px;
-  width: 16px;
+  font-size: 0.75rem;
 }
 
 .modal-close.is-medium {
-  height: 32px;
-  width: 32px;
+  font-size: 1.25rem;
 }
 
 .modal-close.is-large {
-  height: 40px;
-  width: 40px;
+  font-size: 1.5rem;
 }
 
 .modal-card {
@@ -3885,7 +3977,7 @@ a.nav-item.is-tab.is-active {
 
 .panel-tabs {
   display: flex;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   padding: 5px 10px 0;
   justify-content: center;
 }
@@ -4066,7 +4158,7 @@ a.panel-block:hover {
 .tabs.is-toggle li.is-active a {
   background-color: #00d1b2;
   border-color: #00d1b2;
-  color: white;
+  color: #fff;
   z-index: 1;
 }
 
@@ -4075,7 +4167,7 @@ a.panel-block:hover {
 }
 
 .tabs.is-small {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .tabs.is-small a {
@@ -5415,11 +5507,11 @@ a.panel-block:hover {
 
 .hero.is-primary {
   background-color: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 .hero.is-primary .title {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-primary .title a,
@@ -5433,7 +5525,7 @@ a.panel-block:hover {
 
 .hero.is-primary .subtitle a,
 .hero.is-primary .subtitle strong {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-primary .nav {
@@ -5454,11 +5546,11 @@ a.panel-block:hover {
 .hero.is-primary a.nav-item:hover, .hero.is-primary a.nav-item.is-active,
 .hero.is-primary .nav-item a:not(.button):hover,
 .hero.is-primary .nav-item a:not(.button).is-active {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-primary .tabs a {
-  color: white;
+  color: #fff;
   opacity: 0.9;
 }
 
@@ -5471,7 +5563,7 @@ a.panel-block:hover {
 }
 
 .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover {
@@ -5479,8 +5571,8 @@ a.panel-block:hover {
 }
 
 .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover {
-  background-color: white;
-  border-color: white;
+  background-color: #fff;
+  border-color: #fff;
   color: #00d1b2;
 }
 
@@ -5490,13 +5582,13 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-primary .nav-toggle span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-primary .nav-toggle:hover {
     background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-primary .nav-toggle.is-active span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-primary .nav-menu .nav-item {
     border-top-color: rgba(255, 255, 255, 0.2);
@@ -5505,11 +5597,11 @@ a.panel-block:hover {
 
 .hero.is-info {
   background-color: #3273dc;
-  color: white;
+  color: #fff;
 }
 
 .hero.is-info .title {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-info .title a,
@@ -5523,7 +5615,7 @@ a.panel-block:hover {
 
 .hero.is-info .subtitle a,
 .hero.is-info .subtitle strong {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-info .nav {
@@ -5544,11 +5636,11 @@ a.panel-block:hover {
 .hero.is-info a.nav-item:hover, .hero.is-info a.nav-item.is-active,
 .hero.is-info .nav-item a:not(.button):hover,
 .hero.is-info .nav-item a:not(.button).is-active {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-info .tabs a {
-  color: white;
+  color: #fff;
   opacity: 0.9;
 }
 
@@ -5561,7 +5653,7 @@ a.panel-block:hover {
 }
 
 .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover {
@@ -5569,8 +5661,8 @@ a.panel-block:hover {
 }
 
 .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover {
-  background-color: white;
-  border-color: white;
+  background-color: #fff;
+  border-color: #fff;
   color: #3273dc;
 }
 
@@ -5580,13 +5672,13 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-info .nav-toggle span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-info .nav-toggle:hover {
     background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-info .nav-toggle.is-active span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-info .nav-menu .nav-item {
     border-top-color: rgba(255, 255, 255, 0.2);
@@ -5595,11 +5687,11 @@ a.panel-block:hover {
 
 .hero.is-success {
   background-color: #23d160;
-  color: white;
+  color: #fff;
 }
 
 .hero.is-success .title {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-success .title a,
@@ -5613,7 +5705,7 @@ a.panel-block:hover {
 
 .hero.is-success .subtitle a,
 .hero.is-success .subtitle strong {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-success .nav {
@@ -5634,11 +5726,11 @@ a.panel-block:hover {
 .hero.is-success a.nav-item:hover, .hero.is-success a.nav-item.is-active,
 .hero.is-success .nav-item a:not(.button):hover,
 .hero.is-success .nav-item a:not(.button).is-active {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-success .tabs a {
-  color: white;
+  color: #fff;
   opacity: 0.9;
 }
 
@@ -5651,7 +5743,7 @@ a.panel-block:hover {
 }
 
 .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover {
@@ -5659,8 +5751,8 @@ a.panel-block:hover {
 }
 
 .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover {
-  background-color: white;
-  border-color: white;
+  background-color: #fff;
+  border-color: #fff;
   color: #23d160;
 }
 
@@ -5670,13 +5762,13 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-success .nav-toggle span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-success .nav-toggle:hover {
     background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-success .nav-toggle.is-active span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-success .nav-menu .nav-item {
     border-top-color: rgba(255, 255, 255, 0.2);
@@ -5775,11 +5867,11 @@ a.panel-block:hover {
 
 .hero.is-danger {
   background-color: #ff3860;
-  color: white;
+  color: #fff;
 }
 
 .hero.is-danger .title {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-danger .title a,
@@ -5793,7 +5885,7 @@ a.panel-block:hover {
 
 .hero.is-danger .subtitle a,
 .hero.is-danger .subtitle strong {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-danger .nav {
@@ -5814,11 +5906,11 @@ a.panel-block:hover {
 .hero.is-danger a.nav-item:hover, .hero.is-danger a.nav-item.is-active,
 .hero.is-danger .nav-item a:not(.button):hover,
 .hero.is-danger .nav-item a:not(.button).is-active {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-danger .tabs a {
-  color: white;
+  color: #fff;
   opacity: 0.9;
 }
 
@@ -5831,7 +5923,7 @@ a.panel-block:hover {
 }
 
 .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a {
-  color: white;
+  color: #fff;
 }
 
 .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover {
@@ -5839,8 +5931,8 @@ a.panel-block:hover {
 }
 
 .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
-  background-color: white;
-  border-color: white;
+  background-color: #fff;
+  border-color: #fff;
   color: #ff3860;
 }
 
@@ -5850,13 +5942,13 @@ a.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-danger .nav-toggle span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-danger .nav-toggle:hover {
     background-color: rgba(10, 10, 10, 0.1);
   }
   .hero.is-danger .nav-toggle.is-active span {
-    background-color: white;
+    background-color: #fff;
   }
   .hero.is-danger .nav-menu .nav-item {
     border-top-color: rgba(255, 255, 255, 0.2);
@@ -5945,7 +6037,7 @@ body.page-grid .column > .notification {
 
 @media screen and (min-width: 769px) {
   .header-item .button + .button {
-    margin-left: 10px;
+    margin-left: 0.75rem;
   }
 }
 
@@ -5997,7 +6089,7 @@ svg {
 }
 
 #carbonads .carbon-poweredby {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   margin-left: 15px;
 }
 
@@ -6212,7 +6304,7 @@ html.route-index #carbon {
   background: white;
   border-radius: 5px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-  padding: 20px;
+  padding: 1.5rem;
 }
 
 #mc_embed_signup .control {
@@ -6220,7 +6312,7 @@ html.route-index #carbon {
 }
 
 #mc_embed_signup .notification {
-  margin-top: 10px;
+  margin-top: 0.75rem;
 }
 
 #social {
@@ -6260,18 +6352,18 @@ html.route-index #carbon {
   border: 1px solid #ffdd57;
   border-top-right-radius: 3px;
   color: rgba(0, 0, 0, 0.7);
-  padding: 15px 20px;
+  padding: 1.25rem 1.5rem;
   position: relative;
 }
 
 .example:not(:first-child),
 .structure:not(:first-child) {
-  margin-top: 30px;
+  margin-top: 2rem;
 }
 
 .example:not(:last-child),
 .structure:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .example:before,
@@ -6304,7 +6396,7 @@ html.route-index #carbon {
   border: 1px solid #ffdd57;
   border-radius: 0 0 3px 3px;
   border-top: none;
-  margin-top: -20px;
+  margin-top: -1.5rem;
 }
 
 .example + .highlight pre {
@@ -6312,18 +6404,18 @@ html.route-index #carbon {
 }
 
 .example + .highlight:not(:last-child) {
-  margin-bottom: 40px;
+  margin-bottom: 3rem;
 }
 
 .structure {
   border-color: #ff3860;
   border-radius: 3px;
-  padding: 20px;
+  padding: 1.5rem;
 }
 
 .structure:before {
   background: #ff3860;
-  color: white;
+  color: #fff;
   content: "Structure";
 }
 
@@ -6362,13 +6454,13 @@ html.route-index #carbon {
 }
 
 .structure-item.is-structure-container {
-  padding: 20px 10px 10px;
+  padding: 1.5rem 0.75rem 0.75rem;
 }
 
 .structure-item.is-structure-container:after {
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 5px 10px;
+  padding: 0.5rem 0.75rem;
 }
 
 .highlight {
@@ -6406,12 +6498,12 @@ html.route-index #carbon {
 
 @media screen and (min-width: 769px) {
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth) {
-    margin-left: 20px;
-    margin-right: 20px;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
   }
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight {
-    margin-left: 20px;
-    margin-right: 20px;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
   }
 }
 
@@ -6439,10 +6531,10 @@ html.route-index #carbon {
 
 html ::-moz-selection {
   background: #00d1b2;
-  color: white;
+  color: #fff;
 }
 
 html ::selection {
   background: #00d1b2;
-  color: white;
+  color: #fff;
 }

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 6fce3dcb1ab4561ac839c093b76dc73a831ee2dc..c7f6266b3fab5c4bd3f70039bdc3bd1747339844 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -256,6 +256,23 @@ doc-subtab: button
 
     <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">
@@ -345,6 +362,140 @@ doc-subtab: button
       </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 %}
+<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>
+{% endhighlight %}
+      </div>
+    </div>
+
     <hr>
 
     <h3 class="title">Button group</h3>
@@ -439,6 +590,79 @@ doc-subtab: button
     <span>Right</span>
   </a>
 </p>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Button group with addons</h3>
+    <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>
+{% 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>
 {% endhighlight %}
 
   </div>

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index f344e56a2a468d98684b0ad3acf3017d8dd0b053..efed508d09c428393dcbb15d57b419689a40b48d 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -77,10 +77,14 @@ doc-subtab: form
             No
           </label>
         </p>
-        <p class="control">
-          <button class="button is-primary">Submit</button>
-          <button class="button is-link">Cancel</button>
-        </p>
+        <div class="control is-grouped">
+          <p class="control">
+            <button class="button is-primary">Submit</button>
+          </p>
+          <p class="control">
+            <button class="button is-link">Cancel</button>
+          </p>
+        </div>
       </div>
       <div class="column is-half">
 {% highlight html %}
@@ -129,10 +133,14 @@ doc-subtab: form
     No
   </label>
 </p>
-<p class="control">
-  <button class="button is-primary">Submit</button>
-  <button class="button is-link">Cancel</button>
-</p>
+<div class="control is-grouped">
+  <p class="control">
+    <button class="button is-primary">Submit</button>
+  </p>
+  <p class="control">
+    <button class="button is-link">Cancel</button>
+  </p>
+</div>
 {% endhighlight %}
       </div>
     </div>
@@ -363,10 +371,14 @@ doc-subtab: form
             No
           </label>
         </p>
-        <p class="control">
-          <button class="button is-primary" disabled>Submit</button>
-          <button class="button" disabled>Cancel</button>
-        </p>
+        <div class="control is-grouped">
+          <p class="control">
+            <button class="button is-primary" disabled>Submit</button>
+          </p>
+          <p class="control">
+            <button class="button" disabled>Cancel</button>
+          </p>
+        </div>
       </div>
       <div class="column is-half">
 {% highlight html %}
@@ -392,10 +404,14 @@ doc-subtab: form
     No
   </label>
 </p>
-<p class="control">
-  <button class="button is-primary" disabled>Submit</button>
-  <button class="button" disabled>Cancel</button>
-</p>
+<div class="control is-grouped">
+  <p class="control">
+    <button class="button is-primary" disabled>Submit</button>
+  </p>
+  <p class="control">
+    <button class="button" disabled>Cancel</button>
+  </p>
+</div>
 {% endhighlight %}
       </div>
     </div>

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index 8335fc53bfea0c245c583c7645124f23f943fc21..aa69c481873a90096677dbc8e94e780cbc51f9ce 100644 (file)
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -17,7 +17,7 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        By default, a <strong>tag</strong> is a 24px high label.
+        By default, a <strong>tag</strong> is a 1.5rem high label.
       </div>
       <div class="column is-2">
         <span class="tag">
@@ -35,14 +35,29 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        There are <strong>6 different colors</strong> available.
+        Like with buttons, there are <strong>9 different colors</strong> available.
       </div>
       <div class="column is-2">
+        <p class="control">
+          <span class="tag is-black">
+            Black
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-dark">
             Dark
           </span>
         </p>
+        <p class="control">
+          <span class="tag is-light">
+            Light
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-white">
+            White
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-primary">
             Primary
@@ -69,7 +84,10 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
+<span class="tag is-black">Black</span>
 <span class="tag is-dark">Dark</span>
+<span class="tag is-light">Light</span>
+<span class="tag is-white">White</span>
 <span class="tag is-primary">Primary</span>
 <span class="tag is-info">Info</span>
 <span class="tag is-success">Success</span>
@@ -81,14 +99,9 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        And <strong>3 additional</strong> sizes.
+        And <strong>2 additional</strong> sizes.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-dark is-small">
-            Small
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-primary is-medium">
             Medium
@@ -102,7 +115,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-dark is-small">Small</span>
 <span class="tag is-primary is-medium">Medium</span>
 <span class="tag is-info is-large">Large</span>
 {% endhighlight %}
@@ -114,12 +126,6 @@ doc-subtab: tag
         You can also append a <strong>delete button</strong>.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-info is-small">
-            Foo
-            <button class="delete is-small"></button>
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-success">
             Bar
@@ -141,10 +147,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-info is-small">
-  Foo
-  <button class="delete is-small"></button>
-</span>
 <span class="tag is-success">
   Bar
   <button class="delete is-small"></button>

diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 34264e0f7cb0c87c2cb48f9098f162e08310c926..7ec59828e84ed12a41b6f70dba72f4790d6f6632 100644 (file)
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -85,12 +85,12 @@ strong
 pre
   background-color: $pre-background
   color: $pre
-  font-size: 0.8em
+  font-size: 0.75em
   white-space: pre
   word-wrap: normal
   code
-    background-color: $pre-background
-    color: $pre
+    background: none
+    color: inherit
     display: block
     font-size: 1em
     overflow-x: auto

diff --git a/sass/elements/_all.sass b/sass/elements/_all.sass
index e92f8de9dc3dcc51b7dae16c58a1fdbd108eac50..5222c959e89249f7794a82a9ff63b0a6baca14d5 100644 (file)
--- a/sass/elements/_all.sass
+++ b/sass/elements/_all.sass
@@ -8,6 +8,7 @@
 @import "notification.sass"
 @import "progress.sass"
 @import "table.sass"
+@import "tag.sass"
 @import "title.sass"
 
 @import "other.sass"

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 8bd6513eb0466d3402938c8260ceb012bade5cf5..ca7761ca333423bd77759626369b9767adf25490 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -1,3 +1,7 @@
+$button:                     $grey-darker !default
+$button-background:          $white !default
+$button-border:              $grey-lighter !default
+
 $button-hover: $link-hover !default
 $button-hover-border: $link-hover-border !default
 
@@ -9,17 +13,60 @@ $button-active-border: $link-active-border !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
+@function buttonIconSpacing($button-size, $icon-width)
+  // The rem height of the button
+  $button-height: 2.5 * $button-size
+  // For the button to be square, the horizontal padding + the icon width must equal the button height.
+  // We know that $horizontal-padding = 2em
+  $horizontal-padding: 2 * $button-size
+  // We want to solve:
+  // $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})
+
+=button-icon($button-size)
+  .icon
+    &:first-child
+      margin-left: buttonIconSpacing($button-size, 1.5rem)
+    &:last-child
+        margin-right: buttonIconSpacing($button-size, 1.5rem)
+    &.is-small
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 1rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 1rem)
+    &.is-medium
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 2rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 2rem)
+    &.is-large
+      &:first-child
+        margin-left: buttonIconSpacing($button-size, 3rem)
+      &:last-child
+        margin-right: buttonIconSpacing($button-size, 3rem)
+
+// 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
   +unselectable
+  background-color: $button-background
+  border: 1px solid $button-border
+  color: $button
   cursor: pointer
   justify-content: center
   padding-left: 1em
@@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   white-space: nowrap
   strong
     color: inherit
-  .icon,
-  .tag
-    &:first-child
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
+  +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
@@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   // Colors
   &.is-link
     background-color: transparent
-    border-width: 0
+    border-color: transparent
     color: $text
     text-decoration: underline
     &:hover,
@@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-width: 0
+      border-color: transparent
       color: $color-invert
       &:hover,
       &.is-hovered

diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index c0bf997224f423dbed305069cc32328f2632004f..aeb26620fb28bf1d9c0b826a854ffdc8dc46f6b1 100644 (file)
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -24,7 +24,7 @@
   h5,
   h6
     color: $text-strong
-    font-weight: $weight-title-normal
+    font-weight: $weight-normal
     line-height: 1.125
   h1
     font-size: 2em

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 0d31c0251077d3be5470240122f8efcd20e2fb05..de823feb21f6c409fb4a8ec718fc38b04bc57a2e 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -151,7 +151,7 @@ $input-radius:              $radius !default
 
 .help
   display: block
-  font-size: 0.875em
+  font-size: $size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -175,7 +175,7 @@ $input-radius:              $radius !default
   position: relative
   text-align: left
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.has-addons
     display: flex
@@ -278,7 +278,7 @@ $input-radius:              $radius !default
     & > .control
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 10px
+        margin-right: 0.75rem
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1

diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass
index bfee4525ffe4616f39ca8fbd1d16de437be8da64..c5a8b547347b2d89d0f8b87c4308b34326c8334e 100644 (file)
--- a/sass/elements/notification.sass
+++ b/sass/elements/notification.sass
@@ -3,12 +3,13 @@
   +clearfix
   background-color: $background
   border-radius: $radius
-  padding: 16px 20px
+  padding: 1.25rem 1.5rem
   position: relative
   .delete
     border-radius: 0 $radius
-    float: right
-    margin: -16px -20px 0 20px
+    position: absolute
+    right: 0
+    top: 0
   .title,
   .subtitle,
   .content

diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 91fe93c73ab0404d2745384a3a394043e70b1760..ace0e95369a0d16924798440cf6839a3ecae0d7b 100644 (file)
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -11,7 +11,7 @@
       margin: 0 20px
       max-width: none
   +widescreen
-    max-width: 1200px
+    max-width: 1080px
 
 .delete
   +delete
@@ -22,17 +22,17 @@
   vertical-align: top
 
 .icon
-  +fa(21px, 24px)
+  +fa(21px, 1.5rem)
   .fa
     font-size: inherit
     line-height: inherit
   // Sizes
   &.is-small
-    +fa(14px, 16px)
+    +fa(14px, 1rem)
   &.is-medium
-    +fa(28px, 32px)
+    +fa(28px, 2rem)
   &.is-large
-    +fa(42px, 48px)
+    +fa(42px, 3rem)
 
 .heading
   display: block
@@ -60,48 +60,3 @@
   display: inline-block
   font-size: $size-medium
   vertical-align: top
-
-.tag
-  align-items: center
-  background-color: $background
-  border-radius: 290486px
-  color: $text
-  display: inline-flex
-  font-size: 12px
-  height: 24px
-  justify-content: center
-  line-height: 16px
-  padding-left: 10px
-  padding-right: 10px
-  vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding-left: 8px
-    padding-right: 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding-left: 14px
-    padding-right: 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding-left: 18px
-    padding-right: 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px

diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass
index d109d73fb0322051cd77123d3073f500bf743eb3..b17a68787dbdc14770d09d1cd617614a92eeb585 100644 (file)
--- a/sass/elements/progress.sass
+++ b/sass/elements/progress.sass
@@ -5,7 +5,7 @@
   border: none
   border-radius: 290486px
   display: block
-  height: 12px
+  height: $size-normal
   overflow: hidden
   padding: 0
   width: 100%
@@ -25,8 +25,8 @@
         background-color: $color
   // Sizes
   &.is-small
-    height: 8px
+    height: $size-small
   &.is-medium
-    height: 16px
+    height: $size-medium
   &.is-large
-    height: 20px
+    height: $size-large

diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
new file mode 100644 (file)
index 0000000..8d62856
--- /dev/null
+++ b/sass/elements/tag.sass
@@ -0,0 +1,29 @@
+.tag
+  align-items: center
+  background-color: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.875em
+  padding-right: 0.875em
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 0.25em
+    margin-right: -0.5em
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Sizes
+  &.is-medium
+    font-size: $size-normal
+  &.is-large
+    font-size: $size-medium

diff --git a/sass/elements/title.sass b/sass/elements/title.sass
index dae80ab0e9cd3dad9ce1b5890eb3efd8221273b1..b738daa17961c58e4c91020455bcce254001ba98 100644 (file)
--- a/sass/elements/title.sass
+++ b/sass/elements/title.sass
@@ -1,22 +1,32 @@
+$title:             $grey-darker !default
+$title-size:        $size-3 !default
+$title-weight:      $weight-light !default
+$title-weight-bold: $weight-semibold !default
+
+$subtitle:          $grey-dark !default
+$subtitle-size:     $size-5 !default
+$subtitle-strong:   $grey-darker !default
+$subtitle-weight:   $weight-light !default
+
 .title,
 .subtitle
   +block
-  font-weight: $weight-title-normal
   word-break: break-word
   em,
   span
-    font-weight: $weight-title-normal
+    font-weight: $title-weight
   a
     &:hover
       border-bottom: 1px solid
   strong
-    font-weight: $weight-title-bold
+    font-weight: $title-weight-bold
   .tag
     vertical-align: bottom
 
 .title
-  color: $text-strong
-  font-size: $size-large
+  color: $title
+  font-size: $title-size
+  font-weight: $title-weight
   line-height: 1.125
   strong
     color: inherit
@@ -29,18 +39,14 @@
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-  // Modifiers
-  &.is-normal
-    font-weight: $weight-normal
-    strong
-      font-weight: $weight-bold
 
 .subtitle
-  color: $text
-  font-size: $size-medium
+  color: $subtitle
+  font-size: $subtitle-size
+  font-weight: $subtitle-weight
   line-height: 1.25
   strong
-    color: $text-strong
+    color: $subtitle-strong
   & + .title
     margin-top: -1.4rem
   // Colors
@@ -48,8 +54,3 @@
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-  // Modifiers
-  &.is-normal
-    font-weight: $weight-normal
-    strong
-      font-weight: $weight-bold

diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
index 1cd2b764d5b32a2ebce4a3350eae018ded9d634b..4b6b07e9397bc483c616736272255a464798c2d8 100644 (file)
--- a/sass/utilities/controls.sass
+++ b/sass/utilities/controls.sass
@@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
-  font-size: 1em
+  font-size: $size-normal
   height: 2.5em
   justify-content: flex-start
   line-height: 1.5
@@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
   &.is-disabled
     pointer-events: none
 
+// The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small
   font-size: $size-small

diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index fa09024523d5c17a2fbd7152bc30d22216b9db07..e38d1727cd83a65eaa5624cb0cf1081442504afc 100644 (file)
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -23,6 +23,6 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.55)
-    @return rgba(black, 0.7)
+    @return rgba(#000, 0.7)
   @else
-    @return white
+    @return #fff

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 1d9983127cbbe416d661a40f04b56816e1fcbb5c..dfc987130a23f0f411ab179473d27b3571869874 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -36,39 +36,38 @@
   border-radius: 290486px
   cursor: pointer
   display: inline-block
-  height: 24px
+  font-size: $size-normal
+  height: 1.5em
   outline: none
   position: relative
+  transform: rotate(45deg)
+  transform-origin: center center
   vertical-align: top
-  width: 24px
+  width: 1.5em
   &:before,
   &:after
     background-color: $white
     content: ""
     display: block
-    height: 2px
     left: 50%
-    margin-left: -25%
-    margin-top: -1px
     position: absolute
     top: 50%
-    width: 50%
+    transform: translateX(-50%) translateY(-50%)
   &:before
-    transform: rotate(45deg)
+    height: 2px
+    width: 50%
   &:after
-    transform: rotate(-45deg)
+    height: 50%
+    width: 2px
   &:hover
     background-color: rgba($black, 0.2)
   // Sizes
   &.is-small
-    height: 16px
-    width: 16px
+    font-size: $size-small
   &.is-medium
-    height: 32px
-    width: 32px
+    font-size: $size-medium
   &.is-large
-    height: 40px
-    width: 40px
+    font-size: $size-large
 
 =fa($size, $dimensions)
   display: inline-block

diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index c7934578cbf2dca54b9fbcffa41e14c0b183b556..243e6c37db46fe6d1a485e0b242a8fae1e479fd0 100644 (file)
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
 $size-1: 3.5rem !default
-$size-2: 2.5rem !default
-$size-3: 1.75rem !default
+$size-2: 2.75rem !default
+$size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
 $size-6: 16px !default
+$size-7: 0.75rem !default
 
-$size-7: 0.875rem !default
-
+$weight-light: 300 !default
 $weight-normal: 400 !default
+$weight-semibold: 500 !default
 $weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
 
 // Miscellaneous
 $easing: ease-out !default
@@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
-$size-normal: $size-6 !default
+$size-normal: 1rem !default
 $size-medium: $size-5 !default
 $size-large: $size-4 !default