bulma-rails 0.2.3 → 0.3.0

data/app/assets/stylesheets/sass/elements/_all.sass

@@ -4,10 +4,12 @@
 @import "button.sass"
 @import "content.sass"
 @import "form.sass"
+@import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
 @import "progress.sass"
 @import "table.sass"
+@import "tag.sass"
 @import "title.sass"
 
 @import "other.sass"

data/app/assets/stylesheets/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,

data/app/assets/stylesheets/sass/elements/button.sass

@@ -1,64 +1,149 @@
+$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
+
+$button-focus: $link-focus !default
+$button-focus-border: $link-focus-border !default
+
+$button-active: $link-active !default
+$button-active-border: $link-active-border !default
+
+$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
+@function buttonIconSpacing($button-font-size, $icon-width)
+  // The rem height of the button
+  // based on a height of 2.5em
+  $button-height: 2.5 * $button-font-size // rem
+  // The rem total horizontal padding of the button
+  $button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
+  // For the icon center to align with the button center
+  // the horizontal padding + the icon width must equal the button height
+  // $button-height = $button-horizontal-padding + $icon-width + $difference
+  $difference: $button-height - $button-horizontal-padding - $icon-width
+  @return $difference / 2
+
+=button-icon($button-font-size)
+  $small-offset: buttonIconSpacing($button-font-size, 1rem)
+  $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
+  $medium-offset: buttonIconSpacing($button-font-size, 2rem)
+  $large-offset: buttonIconSpacing($button-font-size, 3rem)
+  .icon
+    &:first-child:not(:last-child)
+      margin-left: $normal-offset
+      margin-right: $button-font-size / 2
+    &:last-child:not(:first-child)
+      margin-left: $button-font-size / 2
+      margin-right: $normal-offset
+    &:first-child:last-child
+      // The -1px is to account for the button 1px border
+      margin-left: calc(-1px + #{$normal-offset})
+      margin-right: calc(-1px + #{$normal-offset})
+    &.is-small
+      &:first-child:not(:last-child)
+        margin-left: $small-offset
+      &:last-child:not(:first-child)
+        margin-right: $small-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$small-offset})
+        margin-right: calc(-1px + #{$small-offset})
+    &.is-medium
+      &:first-child:not(:last-child)
+        margin-left: $medium-offset
+      &:last-child:not(:first-child)
+        margin-right: $medium-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$medium-offset})
+        margin-right: calc(-1px + #{$medium-offset})
+    &.is-large
+      &:first-child:not(:last-child)
+        margin-left: $large-offset
+      &:last-child:not(:first-child)
+        margin-right: $large-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$large-offset})
+        margin-right: calc(-1px + #{$large-offset})
+
+// The button sizes use mixins so they can be used at different breakpoints
 =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-icon($size-small)
 =button-medium
-  font-size: 18px
-  height: 40px
-  padding-left: 14px
-  padding-right: 14px
+  font-size: $size-medium
+  +button-icon($size-medium)
 =button-large
-  font-size: 22px
-  height: 48px
-  padding-left: 20px
-  padding-right: 20px
+  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: 10px
-  padding-right: 10px
+  padding-left: 0.75em
+  padding-right: 0.75em
   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
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
+  +button-icon($size-normal)
+  // States
   &:hover,
+  &.is-hovered
+    border-color: $button-hover-border
+    color: $button-hover
   &:focus,
+  &.is-focused
+    border-color: $button-focus-border
+    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
+    color: $button-focus
+  &:active,
   &.is-active
-    color: $control-hover
-  &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2)
+    border-color: $button-active-border
+    box-shadow: $button-shadow-inset
+    color: $button-active
   // Colors
+  &.is-link
+    background-color: transparent
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      background-color: $background
+      color: $text-strong
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-width: 0
+      border-color: transparent
       color: $color-invert
       &:hover,
+      &.is-hovered
+        background-color: darken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
       &:focus,
+      &.is-focused
+        border-color: transparent
+        box-shadow: 0 0 0.5em rgba($color, 0.25)
+        color: $color-invert
+      &:active,
       &.is-active
         background-color: darken($color, 5%)
         border-color: transparent
+        box-shadow: $button-shadow-inset
         color: $color-invert
       &.is-inverted
         background-color: $color-invert
@@ -71,22 +156,20 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
-        border-width: 1px
         color: $color
         &:hover,
         &:focus
           background-color: $color
           border-color: $color
           color: $color-invert
-  &.is-link
-    background-color: transparent
-    border-width: 0
-    color: $text
-    text-decoration: underline
-    &:hover,
-    &:focus
-      background-color: $background
-      color: $text-strong
+      &.is-inverted.is-outlined
+        background-color: transparent
+        border-color: $color-invert
+        color: $color-invert
+        &:hover,
+        &:focus
+          background-color: $color-invert
+          color: $color
   // Sizes
   &.is-small
     +button-small

data/app/assets/stylesheets/sass/elements/content.sass

@@ -2,19 +2,14 @@
   +block
   color: $text
   // Inline
-  a:not(.button)
-    border-bottom: 1px solid $border
-    &:visited
-      color: $link-visited
-    &:hover
-      border-bottom-color: $link
   li + li
     margin-top: 0.25em
   // Block
-  blockquote,
   p,
   ol,
-  ul
+  ul,
+  blockquote,
+  table
     &:not(:last-child)
       margin-bottom: 1em
   h1,
@@ -24,30 +19,36 @@
   h5,
   h6
     color: $text-strong
-    font-weight: 300
+    font-weight: $weight-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
@@ -63,12 +64,40 @@
       margin-top: 0.5em
       ul
         list-style-type: square
+  table
+    width: 100%
+    td,
+    th
+      border: 1px solid $border
+      border-width: 0 0 1px
+      padding: 0.5em 0.75em
+      vertical-align: top
+    th
+      color: $text-strong
+      text-align: left
+    tr
+      &:hover
+        background-color: $background
+    thead
+      td,
+      th
+        border-width: 0 0 2px
+        color: $text-strong
+    tfoot
+      td,
+      th
+        border-width: 2px 0 0
+        color: $text-strong
+    tbody
+      tr
+        &:last-child
+          td,
+          th
+            border-bottom-width: 0
   // 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

data/app/assets/stylesheets/sass/elements/form.sass

@@ -1,18 +1,59 @@
-=form-control
+$input:                     $grey-darker !default
+$input-background:          $white !default
+$input-border:              $grey-lighter !default
+
+$input-hover:               $grey-darker !default
+$input-hover-border:        $grey-light !default
+
+$input-focus:               $grey-darker !default
+$input-focus-border:        $link !default
+
+$input-disabled:            $text-light !default
+$input-disabled-background: $background !default
+$input-disabled-border:     $background !default
+
+$input-arrow:               $link !default
+
+$input-icon:                $grey-lighter !default
+$input-icon-active:         $grey !default
+
+$input-radius:              $radius !default
+
+=input
   +control
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
+  background-color: $input-background
+  border: 1px solid $input-border
+  color: $input
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border
+  &[disabled],
+  &.is-disabled
+    background-color: $input-disabled-background
+    border-color: $input-disabled-border
+    box-shadow: none
+    color: $input-disabled
+    +placeholder
+      color: rgba($input, 0.3)
 
 .input,
 .textarea
-  +form-control
+  +input
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
     border-radius: 290486px
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
   // Sizes
   &.is-small
     +control-small
@@ -30,7 +71,7 @@
 
 .textarea
   display: block
-  line-height: 1.2
+  line-height: 1.25
   max-height: 600px
   max-width: 100%
   min-height: 120px
@@ -40,78 +81,77 @@
 
 .checkbox,
 .radio
+  align-items: center
   cursor: pointer
-  display: inline-block
-  line-height: 16px
+  display: inline-flex
+  flex-wrap: wrap
+  justify-content: flex-start
   position: relative
   vertical-align: top
   input
     cursor: pointer
+    margin-right: 0.5em
   &:hover
-    color: $control-hover
+    color: $input-hover
   &.is-disabled
-    color: $control-disabled
+    color: $input-disabled
     pointer-events: none
     input
       pointer-events: none
 
 .radio
   & + .radio
-    margin-left: 10px
+    margin-left: 0.5em
 
 .select
   display: inline-block
-  height: 32px
+  height: 2.5em
   position: relative
   vertical-align: top
+  &:after
+    +arrow($input-arrow)
+    margin-top: -0.375em
+    right: 1.125em
+    top: 50%
+    z-index: 4
   select
-    +form-control
+    +input
     cursor: pointer
     display: block
+    font-size: 1em
     outline: none
-    padding-right: 36px
+    padding-right: 2.5em
     &:hover
-      border-color: $control-hover-border
+      border-color: $input-hover-border
     &::ms-expand
       display: none
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &:after
-    +arrow($control-active)
-    margin-top: -6px
-    right: 16px
-    top: 50%
+  // States
   &:hover
     &:after
-      border-color: $control-hover
+      border-color: $input-hover
+  // Sizes
   &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
+    +control-small
   &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
+    +control-medium
   &.is-large
-    height: 48px
+    +control-large
+  // Modifiers
+  &.is-fullwidth
+    width: 100%
     select
-      +control-large
-      padding-right: 52px
+      width: 100%
 
 .label
-  color: $control
+  color: $input
   display: block
   font-weight: bold
   &:not(:last-child)
-    margin-bottom: 5px
+    margin-bottom: 0.5em
 
 .help
   display: block
-  font-size: $control-size-small
+  font-size: $size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -122,20 +162,20 @@
 
 .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
   position: relative
   text-align: left
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.has-addons
     display: flex
@@ -148,20 +188,26 @@
       width: auto
       &:hover
         z-index: 2
-      &:active,
-      &:focus
+      &:focus,
+      &:active
         z-index: 3
       &:first-child
-        border-radius: $control-radius 0 0 $control-radius
+        border-radius: $input-radius 0 0 $input-radius
         select
-          border-radius: $control-radius 0 0 $control-radius
+          border-radius: $input-radius 0 0 $input-radius
       &:last-child
-        border-radius: 0 $control-radius $control-radius 0
+        border-radius: 0 $input-radius $input-radius 0
         select
-          border-radius: 0 $control-radius $control-radius 0
+          border-radius: 0 $input-radius $input-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
+    .select select
+      &:hover
+        z-index: 2
+      &:focus,
+      &:active
+        z-index: 3
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -173,66 +219,64 @@
         flex-grow: 1
         flex-shrink: 0
   &.has-icon
-    & > .fa
-      +fa(14px, 24px)
-      color: $control-icon
+    .icon
+      color: $input-icon
       pointer-events: none
       position: absolute
-      top: 4px
+      top: ($size-normal * 2.5) / 2
       z-index: 4
     .input
-      &:focus + .fa
-        color: $control-icon-active
-      &.is-small + .fa
-        font-size: 10.5px
-        top: 0
-      &.is-medium + .fa
-        font-size: 21px
-        top: 8px
-      &.is-large + .fa
-        font-size: 21px
-        top: 12px
+      &:focus
+        & + .icon
+          color: $input-icon-active
+      &.is-small
+        & + .icon
+          top: ($size-small * 2.5) / 2
+      &.is-medium
+        & + .icon
+          top: ($size-medium * 2.5) / 2
+      &.is-large
+        & + .icon
+          top: ($size-large * 2.5) / 2
     &:not(.has-icon-right)
-      & > .fa
-        left: 4px
+      .icon
+        left: ($size-normal * 2.5) / 2
+        transform: translateX(-50%) translateY(-50%)
       .input
-        padding-left: 32px
+        padding-left: 2.5em
         &.is-small
-          padding-left: 24px
-          & + .fa
-            left: 0
+          & + .icon
+            left: ($size-small * 2.5) / 2
         &.is-medium
-          padding-left: 40px
-          & + .fa
-            left: 8px
+          & + .icon
+            left: ($size-medium * 2.5) / 2
         &.is-large
-          padding-left: 48px
-          & + .fa
-            left: 12px
+          & + .icon
+            left: ($size-large * 2.5) / 2
     &.has-icon-right
-      & > .fa
-        right: 4px
+      .icon
+        right: ($size-normal * 2.5) / 2
+        transform: translateX(50%) translateY(-50%)
       .input
-        padding-right: 32px
+        padding-right: 2.5em
         &.is-small
-          padding-right: 24px
-          & + .fa
-            right: 0
+          & + .icon
+            right: ($size-small * 2.5) / 2
         &.is-medium
-          padding-right: 40px
-          & + .fa
-            right: 8px
+          & + .icon
+            right: ($size-medium * 2.5) / 2
         &.is-large
-          padding-right: 48px
-          & + .fa
-            right: 12px
+          & + .icon
+            right: ($size-large * 2.5) / 2
   &.is-grouped
     display: flex
     justify-content: flex-start
     & > .control
+      flex-basis: 0
+      flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 10px
+        margin-right: 0.75rem
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1
@@ -252,5 +296,5 @@
     &:after
       +loader
       position: absolute !important
-      right: 8px
-      top: 8px
+      right: 0.75em
+      top: 0.75em