bulma-rails 0.4.3 → 0.5.1

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

@@ -2,6 +2,7 @@
 
 @import "box.sass"
 @import "button.sass"
+@import "container.sass"
 @import "content.sass"
 @import "form.sass"
 @import "icon.sass"

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

@@ -1,14 +1,24 @@
+$box-color: $text !default
+$box-background-color: $white !default
+$box-radius: $radius-large !default
+$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$box-padding: 1.25rem !default
+
+$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
+
 .box
   +block
-  background-color: $white
-  border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  background-color: $box-background-color
+  border-radius: $box-radius
+  box-shadow: $box-shadow
+  color: $box-color
   display: block
-  padding: 1.25rem
+  padding: $box-padding
 
 a.box
   &:hover,
   &:focus
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+    box-shadow: $box-link-hover-shadow
   &:active
-    box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+    box-shadow: $box-link-active-shadow

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

@@ -1,19 +1,28 @@
-$button: $grey-darker !default
-$button-background: $white !default
-$button-border: $grey-lighter !default
+$button-color: $grey-darker !default
+$button-background-color: $white !default
+$button-border-color: $grey-lighter !default
 
-$button-hover: $link-hover !default
-$button-hover-border: $link-hover-border !default
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
 
-$button-focus: $link-focus !default
-$button-focus-border: $link-focus-border !default
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $link-focus-border !default
 
-$button-active: $link-active !default
-$button-active-border: $link-active-border !default
+$button-active-color: $link-active !default
+$button-active-border-color: $link-active-border !default
 
-$button-static: $grey !default
-$button-static-background: $white-ter !default
-$button-static-border: $grey-lighter !default
+$button-link-color: $text !default
+$button-link-hover-background-color: $background !default
+$button-link-hover-color: $text-strong !default
+
+$button-disabled-background-color: $white !default
+$button-disabled-border-color: $grey-lighter !default
+$button-disabled-shadow: none !default
+$button-disabled-opacity: 0.5 !default
+
+$button-static-color: $grey !default
+$button-static-background-color: $white-ter !default
+$button-static-border-color: $grey-lighter !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 
@@ -29,9 +38,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 .button
   +control
   +unselectable
-  background-color: $button-background
-  border-color: $button-border
-  color: $button
+  background-color: $button-background-color
+  border-color: $button-border-color
+  color: $button-color
   cursor: pointer
   justify-content: center
   padding-left: 0.75em
@@ -59,23 +68,23 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   // States
   &:hover,
   &.is-hovered
-    border-color: $button-hover-border
-    color: $button-hover
+    border-color: $button-hover-border-color
+    color: $button-hover-color
   &:focus,
   &.is-focused
-    border-color: $button-focus-border
-    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
-    color: $button-focus
+    border-color: $button-focus-border-color
+    // box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
+    color: $button-focus-color
   &:active,
   &.is-active
-    border-color: $button-active-border
+    border-color: $button-active-border-color
     box-shadow: $button-shadow-inset
-    color: $button-active
+    color: $button-active-color
   // Colors
   &.is-link
     background-color: transparent
     border-color: transparent
-    color: $text
+    color: $button-link-color
     text-decoration: underline
     &:hover,
     &.is-hovered,
@@ -83,8 +92,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &.is-focused,
     &:active,
     &.is-active
-      background-color: $background
-      color: $text-strong
+      background-color: $button-link-hover-background-color
+      color: $button-link-hover-color
     &[disabled]
       background-color: transparent
       border-color: transparent
@@ -168,10 +177,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     +button-large
   // Modifiers
   &[disabled]
-    background-color: $button-background
-    border-color: $button-border
-    box-shadow: none
-    opacity: 0.5
+    background-color: $button-disabled-background-color
+    border-color: $button-disabled-border-color
+    box-shadow: $button-disabled-shadow
+    opacity: $button-disabled-opacity
   &.is-fullwidth
     display: flex
     width: 100%
@@ -183,15 +192,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       +center(1em)
       position: absolute !important
   &.is-static
-    background-color: $button-static-background
-    border-color: $button-static-border
-    color: $button-static
+    background-color: $button-static-background-color
+    border-color: $button-static-border-color
+    color: $button-static-color
     box-shadow: none
     pointer-events: none
-
-// Adjustment for vertical spacing
-button.button,
-input[type="submit"].button
-  line-height: 1
-  padding-bottom: 0.4em
-  padding-top: 0.35em

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

@@ -0,0 +1,27 @@
+$container-offset: 60px !default
+
+.container
+  margin: 0 auto
+  position: relative
+  +from($desktop + $container-offset)
+    max-width: $desktop - (2 * $gap)
+    width: $desktop - (2 * $gap)
+    &.is-fluid
+      margin-left: $gap
+      margin-right: $gap
+      max-width: none
+      width: auto
+  +until($widescreen + $container-offset)
+    &.is-widescreen
+      max-width: $widescreen - (2 * $gap)
+      width: auto
+  +until($fullhd + $container-offset)
+    &.is-fullhd
+      max-width: $fullhd - (2 * $gap)
+      width: auto
+  +from($widescreen + $container-offset)
+    max-width: $widescreen - (2 * $gap)
+    width: $widescreen - (2 * $gap)
+  +from($fullhd + $container-offset)
+    max-width: $fullhd - (2 * $gap)
+    width: $fullhd - (2 * $gap)

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

@@ -1,6 +1,25 @@
+$content-heading-color: $text-strong !default
+$content-heading-weight: $weight-normal !default
+$content-heading-line-height: 1.125 !default
+
+$content-blockquote-background-color: $background !default
+$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-padding: 1.25em 1.5em !default
+
+$content-pre-padding: 1.25em 1.5em !default
+
+$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border-width: 0 0 1px !default
+$content-table-cell-padding: 0.5em 0.75em !default
+$content-table-cell-heading-color: $text-strong !default
+$content-table-row-hover-background-color: $background !default
+$content-table-head-cell-border-width: 0 0 2px !default
+$content-table-head-cell-color: $text-strong !default
+$content-table-foot-cell-border-width: 2px 0 0 !default
+$content-table-foot-cell-color: $text-strong !default
+
 .content
   +block
-  color: $text
   // Inline
   li + li
     margin-top: 0.25em
@@ -20,9 +39,9 @@
   h4,
   h5,
   h6
-    color: $text-strong
-    font-weight: $weight-normal
-    line-height: 1.125
+    color: $content-heading-color
+    font-weight: $content-heading-weight
+    line-height: $content-heading-line-height
   h1
     font-size: 2em
     margin-bottom: 0.5em
@@ -48,9 +67,9 @@
     font-size: 1em
     margin-bottom: 1em
   blockquote
-    background-color: $background
-    border-left: 5px solid $border
-    padding: 1.25em 1.5em
+    background-color: $content-blockquote-background-color
+    border-left: $content-blockquote-border-left
+    padding: $content-blockquote-padding
   ol
     list-style: decimal outside
     margin-left: 2em
@@ -67,6 +86,7 @@
   dd
     margin-left: 2em
   figure
+    margin: 2em
     text-align: center
     img
       display: inline-block
@@ -75,36 +95,36 @@
   pre
     +overflow-touch
     overflow-x: auto
-    padding: 1.25em 1.5em
+    padding: $content-pre-padding
     white-space: pre
     word-wrap: normal
   sup,
   sub
-    font-size: 70%
+    font-size: 75%
   table
     width: 100%
     td,
     th
-      border: 1px solid $border
-      border-width: 0 0 1px
-      padding: 0.5em 0.75em
+      border: $content-table-cell-border
+      border-width: $content-table-cell-border-width
+      padding: $content-table-cell-padding
       vertical-align: top
     th
-      color: $text-strong
+      color: $content-table-cell-heading-color
       text-align: left
     tr
       &:hover
-        background-color: $background
+        background-color: $content-table-row-hover-background-color
     thead
       td,
       th
-        border-width: 0 0 2px
-        color: $text-strong
+        border-width: $content-table-head-cell-border-width
+        color: $content-table-head-cell-color
     tfoot
       td,
       th
-        border-width: 2px 0 0
-        color: $text-strong
+        border-width: $content-table-foot-cell-border-width
+        color: $content-table-foot-cell-color
     tbody
       tr
         &:last-child

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

@@ -1,49 +1,68 @@
-$input:                     $grey-darker !default
-$input-background:          $white !default
-$input-border:              $grey-lighter !default
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
 
-$input-hover:               $grey-darker !default
-$input-hover-border:        $grey-light !default
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
 
-$input-focus:               $grey-darker !default
-$input-focus-border:        $link !default
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
 
-$input-disabled:            $text-light !default
-$input-disabled-background: $background !default
-$input-disabled-border:     $background !default
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
 
-$input-arrow:               $link !default
+$input-arrow: $link !default
 
-$input-icon:                $grey-lighter !default
-$input-icon-active:         $grey !default
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
 
-$input-radius:              $radius !default
+$input-radius: $radius !default
+
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
 
 =input
   +control
-  background-color: $input-background
-  border-color: $input-border
-  color: $input
+  background-color: $input-background-color
+  border-color: $input-border-color
+  color: $input-color
   &:hover,
   &.is-hovered
-    border-color: $input-hover-border
+    border-color: $input-hover-border-color
   &:focus,
   &.is-focused,
   &:active,
   &.is-active
-    border-color: $input-focus-border
+    border-color: $input-focus-border-color
   &[disabled]
-    background-color: $input-disabled-background
-    border-color: $input-disabled-border
+    background-color: $input-disabled-background-color
+    border-color: $input-disabled-border-color
     box-shadow: none
-    color: $input-disabled
+    color: $input-disabled-color
     +placeholder
-      color: rgba($input, 0.3)
+      color: rgba($input-disabled-color, 0.3)
 
 .input,
 .textarea
   +input
-  box-shadow: inset 0 1px 2px rgba($black, 0.1)
+  box-shadow: $input-shadow
   max-width: 100%
   width: 100%
   &[type="search"]
@@ -70,12 +89,15 @@ $input-radius:              $radius !default
 
 .textarea
   display: block
-  max-height: 600px
   max-width: 100%
-  min-height: 120px
   min-width: 100%
   padding: 0.625em
   resize: vertical
+  &:not([rows])
+    max-height: 600px
+    min-height: 120px
+  &[rows]
+    height: unset
 
 .checkbox,
 .radio
@@ -86,9 +108,9 @@ $input-radius:              $radius !default
   input
     cursor: pointer
   &:hover
-    color: $input-hover
+    color: $input-hover-color
   &[disabled]
-    color: $input-disabled
+    color: $input-disabled-color
     cursor: not-allowed
 
 .radio
@@ -97,16 +119,17 @@ $input-radius:              $radius !default
 
 .select
   display: inline-block
-  height: 2.25em
   max-width: 100%
   position: relative
   vertical-align: top
-  &:after
-    +arrow($input-arrow)
-    margin-top: -0.375em
-    right: 1.125em
-    top: 50%
-    z-index: 4
+  &:not(.is-multiple)
+    height: 2.25em
+    &::after
+      +arrow($input-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+      z-index: 4
   select
     +input
     cursor: pointer
@@ -114,17 +137,28 @@ $input-radius:              $radius !default
     font-size: 1em
     max-width: 100%
     outline: none
-    padding-right: 2.5em
     &:hover
-      border-color: $input-hover-border
+      border-color: $input-hover-border-color
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      border-color: $input-focus-border-color
     &::-ms-expand
       display: none
     &[disabled]:hover
-      border-color: $input-disabled-border
+      border-color: $input-disabled-border-color
+    &:not([multiple])
+      padding-right: 2.5em
+    &[multiple]
+      height: unset
+      padding: 0
+      option
+        padding: 0.5em 1em
   // States
   &:hover
-    &:after
-      border-color: $input-hover
+    &::after
+      border-color: $input-hover-color
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -139,14 +173,14 @@ $input-radius:              $radius !default
     +control-large
   // Modifiers
   &.is-disabled
-    &:after
-      border-color: $input-disabled
+    &::after
+      border-color: $input-disabled-color
   &.is-fullwidth
     width: 100%
     select
       width: 100%
   &.is-loading
-    &:after
+    &::after
       +loader
       margin-top: 0
       position: absolute
@@ -160,11 +194,174 @@ $input-radius:              $radius !default
     &.is-large:after
       font-size: $size-large
 
+.file
+  +unselectable
+  align-items: stretch
+  display: flex
+  justify-content: flex-start
+  position: relative
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      .file-cta
+        background-color: $color
+        border-color: transparent
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: darken($color, 2.5%)
+          border-color: transparent
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          border-color: transparent
+          box-shadow: 0 0 0.5em rgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: darken($color, 5%)
+          border-color: transparent
+          color: $color-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+    .file-icon
+      .fa
+        font-size: 21px
+  &.is-large
+    font-size: $size-large
+    .file-icon
+      .fa
+        font-size: 28px
+  // Modifiers
+  &.has-name
+    .file-cta
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+    .file-name
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+  &.is-centered
+    justify-content: center
+  &.is-right
+    justify-content: flex-end
+  &.is-boxed
+    .file-label
+      flex-direction: column
+    .file-cta
+      flex-direction: column
+      height: auto
+      padding: 1em 3em
+    .file-name
+      border-width: 0 1px 1px
+    .file-icon
+      height: 1.5em
+      width: 1.5em
+      .fa
+        font-size: 21px
+    &.is-small
+      .file-icon .fa
+        font-size: 14px
+    &.is-medium
+      .file-icon .fa
+        font-size: 28px
+    &.is-large
+      .file-icon .fa
+        font-size: 35px
+    &.has-name
+      .file-cta
+        border-radius: $file-radius $file-radius 0 0
+      .file-name
+        border-radius: 0 0 $file-radius $file-radius
+        border-width: 0 1px 1px
+  &.is-right
+    .file-cta
+      border-radius: 0 $file-radius $file-radius 0
+    .file-name
+      border-radius: $file-radius 0 0 $file-radius
+      border-width: 1px 0 1px 1px
+      order: -1
+  &.is-fullwidth
+    .file-label
+      width: 100%
+    .file-name
+      flex-grow: 1
+      max-width: none
+
+.file-label
+  align-items: stretch
+  display: flex
+  cursor: pointer
+  justify-content: flex-start
+  overflow: hidden
+  position: relative
+  &:hover
+    .file-cta
+      background-color: darken($file-cta-background-color, 2.5%)
+      color: $file-cta-hover-color
+    .file-name
+      border-color: darken($file-name-border-color, 2.5%)
+  &:active
+    .file-cta
+      background-color: darken($file-cta-background-color, 5%)
+      color: $file-cta-active-color
+    .file-name
+      border-color: darken($file-name-border-color, 5%)
+
+.file-input
+  height: 0.01em
+  left: 0
+  outline: none
+  position: absolute
+  top: 0
+  width: 0.01em
+
+.file-cta,
+.file-name
+  +control
+  border-color: $file-border-color
+  border-radius: $file-radius
+  font-size: 1em
+  padding-left: 1em
+  padding-right: 1em
+  white-space: nowrap
+
+.file-cta
+  background-color: $file-cta-background-color
+  color: $file-cta-color
+
+.file-name
+  border-color: $file-name-border-color
+  border-style: $file-name-border-style
+  border-width: $file-name-border-width
+  display: block
+  max-width: $file-name-max-width
+  overflow: hidden
+  text-align: left
+  text-overflow: ellipsis
+
+.file-icon
+  align-items: center
+  display: flex
+  height: 1em
+  justify-content: center
+  margin-right: 0.5em
+  width: 1em
+  .fa
+    font-size: 14px
+
 .label
-  color: $input
+  color: $label-color
   display: block
   font-size: $size-normal
-  font-weight: $weight-bold
+  font-weight: $label-weight
   &:not(:last-child)
     margin-bottom: 0.5em
   // Sizes
@@ -177,7 +374,7 @@ $input-radius:              $radius !default
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $help-size
   margin-top: 0.25rem
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -194,7 +391,8 @@ $input-radius:              $radius !default
     display: flex
     justify-content: flex-start
     .control
-      margin-right: -1px
+      &:not(:last-child)
+        margin-right: -1px
       &:first-child
         .button,
         .input,
@@ -246,6 +444,17 @@ $input-radius:              $radius !default
       justify-content: center
     &.is-grouped-right
       justify-content: flex-end
+    &.is-grouped-multiline
+      flex-wrap: wrap
+      & > .control
+        &:last-child,
+        &:not(:last-child)
+          margin-bottom: 0.75rem
+      &:last-child
+        margin-bottom: -0.75rem
+      &:not(:last-child)
+        margin-bottom: 0
+
   &.is-horizontal
     +tablet
       display: flex
@@ -274,17 +483,20 @@ $input-radius:              $radius !default
       padding-top: 0.375em
 
 .field-body
+  .field .field
+    margin-bottom: 0
   +tablet
     display: flex
     flex-basis: 0
     flex-grow: 5
     flex-shrink: 1
     .field
+      margin-bottom: 0
+    & > .field
       flex-shrink: 1
       &:not(.is-narrow)
         flex-grow: 1
       &:not(:last-child)
-        margin-bottom: 0
         margin-right: 0.75rem
 
 .control
@@ -295,7 +507,7 @@ $input-radius:              $radius !default
   // DEPRECATED
   &.has-icon
     .icon
-      color: $input-icon
+      color: $input-icon-color
       height: 2.25em
       pointer-events: none
       position: absolute
@@ -305,7 +517,7 @@ $input-radius:              $radius !default
     .input
       &:focus
         & + .icon
-          color: $input-icon-active
+          color: $input-icon-active-color
       &.is-small
         & + .icon
           font-size: $size-small
@@ -328,10 +540,10 @@ $input-radius:              $radius !default
   &.has-icons-left,
   &.has-icons-right
     .input,
-    .select select
+    .select
       &:focus
         & ~ .icon
-          color: $input-icon-active
+          color: $input-icon-active-color
       &.is-small ~ .icon
         font-size: $size-small
       &.is-medium ~ .icon
@@ -339,7 +551,7 @@ $input-radius:              $radius !default
       &.is-large ~ .icon
         font-size: $size-large
     .icon
-      color: $input-icon
+      color: $input-icon-color
       height: 2.25em
       pointer-events: none
       position: absolute
@@ -359,7 +571,7 @@ $input-radius:              $radius !default
     .icon.is-right
       right: 0
   &.is-loading
-    &:after
+    &::after
       +loader
       position: absolute !important
       right: 0.625em