Use em for controls

2025-01-09 15:44:25 +00:00 · 2016-10-29 18:53:30 +01:00 · 2016-10-29 18:53:30 +01:00 · a2afb61ffe
commit a2afb61ffe
parent 6012880751
16 changed files with 542 additions and 1476 deletions
--- a/docs/_includes/carbon.html
+++ b/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>
+ -->
--- 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="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 }}">
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
--- a/docs/documentation/overview/variables.html
+++ b/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>
--- a/sass/base/generic.sass
+++ b/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%
--- a/sass/components/media.sass
+++ b/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
--- a/sass/components/message.sass
+++ b/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
--- a/sass/elements/box.sass
+++ b/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,
--- a/sass/elements/button.sass
+++ b/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
--- a/sass/elements/content.sass
+++ b/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
+  h1
+    font-size: 2em
+    margin-bottom: 0.5em
    &:not(:first-child)
-      margin-top: 40px
+      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.5em
-  h1
-    font-size: 2em
-  h2
-    font-size: 1.75em
-  h3
-    font-size: 1.5em
-  h4
-    font-size: 1.25em
-  h5
-    font-size: 1.125em
-  h6
-    font-size: 1em
+    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
--- a/sass/elements/form.sass
+++ b/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
--- a/sass/elements/other.sass
+++ b/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
--- a/sass/elements/title.sass
+++ b/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
--- a/sass/utilities/controls.sass
+++ b/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
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@ -12,7 +12,7 @@

 =block
  &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem

 =clearfix
  &:after
--- a/sass/utilities/variables.sass
+++ b/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

 ////////////////////////////////////////////////
 ////////////////////////////////////////////////