Use em for controls

docs/_includes/carbon.html

@@ -1,3 +1,4 @@
-<div id="carbon" class="box">
+<!-- <div id="carbon" class="box">
   <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script>
 </div>
+ -->

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="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/documentation/overview/variables.html

@@ -458,10 +458,6 @@ doc-subtab: variables
         <td><code>$size-large</code></td>
         <td>$size-3</td>
       </tr>
-      <tr>
-        <td><code>$size-huge</code></td>
-        <td>$size-1</td>
-      </tr>
 
       <tr><th colspan="2">4. Lists and maps</th></tr>
       <tr>

sass/base/generic.sass

@@ -31,13 +31,12 @@ pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
   font-family: $family-code
-  line-height: 1.25
 
 body
   color: $text
   font-size: 1rem
   font-weight: $weight-normal
-  line-height: 1.428571428571429
+  line-height: 1.5
 
 // Inline
 
@@ -52,16 +51,16 @@ a
 code
   background-color: $code-background
   color: $code
-  font-size: 12px
+  font-size: 0.75em
   font-weight: normal
-  padding: 1px 2px 2px
+  padding: 0.25em 0.5em 0.25em
 
 hr
   background-color: $border
   border: none
   display: block
   height: 1px
-  margin: 20px 0
+  margin: 1.5rem 0
 
 img
   max-width: 100%
@@ -86,14 +85,16 @@ strong
 pre
   background-color: $pre-background
   color: $pre
+  font-size: 0.8em
   white-space: pre
   word-wrap: normal
   code
     background-color: $pre-background
     color: $pre
     display: block
+    font-size: 1em
     overflow-x: auto
-    padding: 16px 20px
+    padding: 1.25rem 1.5rem
 
 table
   width: 100%

sass/components/media.sass

@@ -11,17 +11,17 @@
   font-size: $size-medium
   height: 32px
   line-height: 24px
-  margin-right: 10px
+  margin-right: 1rem
   min-width: 32px
   padding: 4px 8px
   text-align: center
   vertical-align: top
 
 .media-left
-  margin-right: 10px
+  margin-right: 1rem
 
 .media-right
-  margin-left: 10px
+  margin-left: 1rem
 
 .media-content
   flex-grow: 1
@@ -33,29 +33,29 @@
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 1rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
     padding-top: 10px
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 5px
+      margin-bottom: 0.5rem
     .media
-      padding-top: 5px
+      padding-top: 0.5rem
       & + .media
-        margin-top: 5px
+        margin-top: 0.5rem
   & + .media
     border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
-    padding-top: 10px
+    margin-top: 1rem
+    padding-top: 1rem
   // Sizes
   &.is-large
     & + .media
-      margin-top: 20px
-      padding-top: 20px
+      margin-top: 1.4rem
+      padding-top: 1.4rem
   // Responsiveness
   +tablet
     &.is-large
       .media-number
-        margin-right: 20px
+        margin-right: 1.4rem

sass/components/message.sass

@@ -1,7 +1,7 @@
 .message-body
   border: 1px solid $border
   border-radius: $radius
-  padding: 12px 15px
+  padding: 0.8rem 1rem
   strong
     color: inherit
 
@@ -9,7 +9,7 @@
   background-color: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
-  padding: 7px 10px
+  padding: 0.4rem 0.8rem
   strong
     color: inherit
   & + .message-body

sass/elements/box.sass

@@ -4,7 +4,7 @@
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
-  padding: 20px
+  padding: 1.25rem
 
 a.box
   &:hover,

sass/elements/button.sass

@@ -1,37 +1,22 @@
 =button-small
   border-radius: $radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =button-medium
-  font-size: 18px
-  height: 40px
-  padding-left: 14px
-  padding-right: 14px
+  font-size: $size-medium
 =button-large
-  font-size: 22px
-  height: 48px
-  padding-left: 20px
-  padding-right: 20px
+  font-size: $size-large
 
 .button
   +control
   +unselectable
   cursor: pointer
   justify-content: center
-  padding-left: 10px
-  padding-right: 10px
+  padding-left: 1em
+  padding-right: 1em
   text-align: center
   white-space: nowrap
   strong
     color: inherit
-  small
-    display: block
-    font-size: $size-small
-    line-height: 1
-    margin-top: 5px
   .icon,
   .tag
     &:first-child

sass/elements/content.sass

@@ -24,30 +24,36 @@
   h5,
   h6
     color: $text-strong
-    font-weight: 300
+    font-weight: $weight-title-normal
     line-height: 1.125
-    margin-bottom: 20px
-  h1,
-  h2,
-  h3
-    &:not(:first-child)
-      margin-top: 40px
-  blockquote
-    background-color: $background
-    border-left: 5px solid $border
-    padding: 1.5em
   h1
     font-size: 2em
+    margin-bottom: 0.5em
+    &:not(:first-child)
+      margin-top: 1em
   h2
     font-size: 1.75em
+    margin-bottom: 0.5714em
+    &:not(:first-child)
+      margin-top: 1.1428em
   h3
     font-size: 1.5em
+    margin-bottom: 0.6666em
+    &:not(:first-child)
+      margin-top: 1.3333em
   h4
     font-size: 1.25em
+    margin-bottom: 0.8em
   h5
     font-size: 1.125em
+    margin-bottom: 0.8888em
   h6
     font-size: 1em
+    margin-bottom: 1em
+  blockquote
+    background-color: $background
+    border-left: 5px solid $border
+    padding: 1.25em 1.5em
   ol
     list-style: decimal outside
     margin-left: 2em
@@ -64,11 +70,9 @@
       ul
         list-style-type: square
   // Sizes
+  &.is-small
+    font-size: $size-small
   &.is-medium
-    font-size: $size-5
-    code
-      font-size: $size-6
+    font-size: $size-medium
   &.is-large
-    font-size: $size-4
-    code
-      font-size: $size-5
+    font-size: $size-large

sass/elements/form.sass

@@ -42,7 +42,7 @@
 .radio
   cursor: pointer
   display: inline-block
-  line-height: 16px
+  line-height: 1em
   position: relative
   vertical-align: top
   input
@@ -57,11 +57,11 @@
 
 .radio
   & + .radio
-    margin-left: 10px
+    margin-left: 0.5em
 
 .select
   display: inline-block
-  height: 32px
+  height: 2.5em
   position: relative
   vertical-align: top
   select
@@ -69,7 +69,7 @@
     cursor: pointer
     display: block
     outline: none
-    padding-right: 36px
+    padding-right: 2.5em
     &:hover
       border-color: $control-hover-border
     &::ms-expand
@@ -80,34 +80,19 @@
       width: 100%
   &:after
     +arrow($control-active)
-    margin-top: -6px
+    margin-top: -4px
     right: 16px
     top: 50%
   &:hover
     &:after
       border-color: $control-hover
-  &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
-  &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
-  &.is-large
-    height: 48px
-    select
-      +control-large
-      padding-right: 52px
 
 .label
   color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
-    margin-bottom: 5px
+    margin-bottom: 0.5em
 
 .help
   display: block
@@ -122,13 +107,13 @@
 
 .control-label
   +mobile
-    margin-bottom: 5px
+    margin-bottom: 0.5em
   +tablet
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 20px
-    padding-top: 7px
+    margin-right: 1.5em
+    padding-top: 0.5em
     text-align: right
 
 .control

sass/elements/other.sass

@@ -43,8 +43,7 @@
 
 .highlight
   +block
-  font-size: 12px
-  font-weight: normal
+  font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
   padding: 0

sass/elements/title.sass

@@ -17,56 +17,39 @@
 .title
   color: $text-strong
   font-size: $size-large
-  line-height: 1
-  code
-    display: inline-block
-    font-size: $size-large
+  line-height: 1.125
   strong
     color: inherit
   & + .highlight
-    margin-top: -10px
+    margin-top: -0.75rem
   & + .subtitle
-    margin-top: -10px
+    margin-top: -1.25rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
-  // Responsiveness
-  +tablet
-    & + .subtitle
-      margin-top: -15px
+      font-weight: $weight-bold
 
 .subtitle
   color: $text
   font-size: $size-medium
-  line-height: 1.125
-  code
-    border-radius: $radius
-    display: inline-block
-    font-size: $size-normal
-    padding: 2px 3px
-    vertical-align: top
+  line-height: 1.25
   strong
     color: $text-strong
   & + .title
-    margin-top: -20px
+    margin-top: -1.4rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
+      font-weight: $weight-bold

sass/utilities/controls.sass

@@ -28,14 +28,15 @@ $control-icon-active: $grey-light !default
   background-color: $control-background
   border: 1px solid $control-border
   border-radius: $control-radius
+  box-shadow: none
   color: $control
   display: inline-flex
   font-size: $control-size
-  height: 32px
+  height: 2.5em
   justify-content: flex-start
-  line-height: 24px
-  padding-left: 8px
-  padding-right: 8px
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
   position: relative
   vertical-align: top
   &:hover
@@ -56,20 +57,8 @@ $control-icon-active: $grey-light !default
 
 =control-small
   border-radius: $control-radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
+  font-size: $size-medium
 =control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px
+  font-size: $size-large

sass/utilities/mixins.sass

@@ -12,7 +12,7 @@
 
 =block
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
 
 =clearfix
   &:after

sass/utilities/variables.sass

@@ -29,14 +29,14 @@ $red:          hsl(348, 100%, 61%) !default
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
-$size-1: 48px !default
-$size-2: 40px !default
-$size-3: 28px !default
-$size-4: 24px !default
-$size-5: 18px !default
-$size-6: 14px !default
+$size-1: 3.5rem !default
+$size-2: 2.5rem !default
+$size-3: 1.75rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 16px !default
 
-$size-7: 11px !default
+$size-7: 0.875rem !default
 
 $weight-normal: 400 !default
 $weight-bold: 700 !default
@@ -70,12 +70,10 @@ $dark: $grey-darker !default
 
 // Invert colors
 $primary-invert: findColorInvert($primary) !default
-
 $info-invert: findColorInvert($info) !default
 $success-invert: findColorInvert($success) !default
 $warning-invert: findColorInvert($warning) !default
 $danger-invert: findColorInvert($danger) !default
-
 $light-invert: $dark !default
 $dark-invert: $light !default
 
@@ -119,8 +117,7 @@ $family-code: $family-monospace !default
 $size-small: $size-7 !default
 $size-normal: $size-6 !default
 $size-medium: $size-5 !default
-$size-large: $size-3 !default
-$size-huge: $size-1 !default
+$size-large: $size-4 !default
 
 ////////////////////////////////////////////////
 ////////////////////////////////////////////////