bulma-rails 0.7.4 → 0.7.5

data/app/assets/stylesheets/sass/components/pagination.sass

@@ -3,6 +3,11 @@ $pagination-border-color: $grey-lighter !default
 $pagination-margin: -0.25rem !default
 $pagination-min-width: $control-height !default
 
+$pagination-item-font-size: 1em !default
+$pagination-item-margin: 0.25rem !default
+$pagination-item-padding-left: 0.5em !default
+$pagination-item-padding-right: 0.5em !default
+
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
 
@@ -56,11 +61,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-ellipsis
   @extend %control
   @extend %unselectable
-  font-size: 1em
-  padding-left: 0.5em
-  padding-right: 0.5em
+  font-size: $pagination-item-font-size
   justify-content: center
-  margin: 0.25rem
+  margin: $pagination-item-margin
+  padding-left: $pagination-item-padding-left
+  padding-right: $pagination-item-padding-right
   text-align: center
 
 .pagination-previous,

data/app/assets/stylesheets/sass/components/panel.sass

@@ -1,3 +1,4 @@
+$panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border !default
 
 $panel-heading-background-color: $background !default
@@ -8,6 +9,7 @@ $panel-heading-radius: $radius !default
 $panel-heading-size: 1.25em !default
 $panel-heading-weight: $weight-light !default
 
+$panel-tabs-font-size: 0.875em !default
 $panel-tab-border-bottom: 1px solid $border !default
 $panel-tab-active-border-bottom-color: $link-active-border !default
 $panel-tab-active-color: $link-active !default
@@ -26,7 +28,7 @@ $panel-icon-color: $text-light !default
 .panel
   font-size: $size-normal
   &:not(:last-child)
-    margin-bottom: 1.5rem
+    margin-bottom: $panel-margin
 
 .panel-heading,
 .panel-tabs,
@@ -49,7 +51,7 @@ $panel-icon-color: $text-light !default
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: 0.875em
+  font-size: $panel-tabs-font-size
   justify-content: center
   a
     border-bottom: $panel-tab-border-bottom

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

@@ -4,7 +4,6 @@
 @import "button.sass"
 @import "container.sass"
 @import "content.sass"
-@import "form.sass"
 @import "icon.sass"
 @import "image.sass"
 @import "notification.sass"

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

@@ -1,5 +1,6 @@
 $button-color: $grey-darker !default
 $button-background-color: $white !default
+$button-family: false !default
 
 $button-border-color: $grey-lighter !default
 $button-border-width: $control-border-width !default
@@ -50,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
   border-width: $button-border-width
   color: $button-color
   cursor: pointer
+  @if $button-family
+    font-family: $button-family
   justify-content: center
   padding-bottom: $button-padding-vertical
   padding-left: $button-padding-horizontal
@@ -142,7 +145,8 @@ $button-static-border-color: $grey-lighter !default
       &.is-inverted
         background-color: $color-invert
         color: $color
-        &:hover
+        &:hover,
+        &.is-hovered
           background-color: darken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
@@ -158,13 +162,21 @@ $button-static-border-color: $grey-lighter !default
         border-color: $color
         color: $color
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color
           border-color: $color
           color: $color-invert
         &.is-loading
           &::after
             border-color: transparent transparent $color $color !important
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color-invert $color-invert !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
@@ -176,9 +188,18 @@ $button-static-border-color: $grey-lighter !default
         border-color: $color-invert
         color: $color-invert
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color-invert
           color: $color
+        &.is-loading
+          &:hover,
+          &.is-hovered,
+          &:focus,
+          &.is-focused
+            &::after
+              border-color: transparent transparent $color $color !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
@@ -269,7 +290,16 @@ $button-static-border-color: $grey-lighter !default
           z-index: 4
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 1
   &.is-centered
     justify-content: center
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem
   &.is-right
     justify-content: flex-end
+    &:not(.has-addons)
+      .button:not(.is-fullwidth)
+        margin-left: 0.25rem
+        margin-right: 0.25rem

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

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

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

@@ -125,7 +125,8 @@ $content-table-foot-cell-color: $text-strong !default
       vertical-align: top
     th
       color: $content-table-cell-heading-color
-      text-align: left
+      &:not([align])
+        text-align: left
     thead
       td,
       th
@@ -142,6 +143,9 @@ $content-table-foot-cell-color: $text-strong !default
           td,
           th
             border-bottom-width: 0
+  .tabs
+    li + li
+      margin-top: 0
   // Sizes
   &.is-small
     font-size: $size-small

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

@@ -1,602 +1 @@
-$input-color: $grey-darker !default
-$input-background-color: $white !default
-$input-border-color: $grey-lighter !default
-$input-height: $control-height !default
-$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
-
-$input-hover-color: $grey-darker !default
-$input-hover-border-color: $grey-light !default
-
-$input-focus-color: $grey-darker !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: rgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $grey-lighter !default
-$input-icon-active-color: $grey !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
-  @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  color: $input-color
-  +placeholder
-    color: $input-placeholder-color
-  &:hover,
-  &.is-hovered
-    border-color: $input-hover-border-color
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
-  &[disabled],
-  fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
-    box-shadow: none
-    color: $input-disabled-color
-    +placeholder
-      color: $input-disabled-placeholder-color
-
-.input,
-.textarea
-  +input
-  box-shadow: $input-shadow
-  max-width: 100%
-  width: 100%
-  &[readonly]
-    box-shadow: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-fullwidth
-    display: block
-    width: 100%
-  &.is-inline
-    display: inline
-    width: auto
-
-.input
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
-  &.is-static
-    background-color: transparent
-    border-color: transparent
-    box-shadow: none
-    padding-left: 0
-    padding-right: 0
-
-.textarea
-  display: block
-  max-width: 100%
-  min-width: 100%
-  padding: 0.625em
-  resize: vertical
-  &:not([rows])
-    max-height: 600px
-    min-height: 120px
-  &[rows]
-    height: initial
-  // Modifiers
-  &.has-fixed-size
-    resize: none
-
-.checkbox,
-.radio
-  cursor: pointer
-  display: inline-block
-  line-height: 1.25
-  position: relative
-  input
-    cursor: pointer
-  &:hover
-    color: $input-hover-color
-  &[disabled],
-  fieldset[disabled] &
-    color: $input-disabled-color
-    cursor: not-allowed
-
-.radio
-  & + .radio
-    margin-left: 0.5em
-
-.select
-  display: inline-block
-  max-width: 100%
-  position: relative
-  vertical-align: top
-  &:not(.is-multiple)
-    height: $input-height
-  &:not(.is-multiple):not(.is-loading)
-    &::after
-      @extend %arrow
-      border-color: $input-arrow
-      right: 1.125em
-      z-index: 4
-  &.is-rounded
-    select
-      border-radius: $radius-rounded
-      padding-left: 1em
-  select
-    +input
-    cursor: pointer
-    display: block
-    font-size: 1em
-    max-width: 100%
-    outline: none
-    &::-ms-expand
-      display: none
-    &[disabled]:hover,
-    fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
-    &:not([multiple])
-      padding-right: 2.5em
-    &[multiple]
-      height: auto
-      padding: 0
-      option
-        padding: 0.5em 1em
-  // States
-  &:not(.is-multiple):not(.is-loading):hover
-    &::after
-      border-color: $input-hover-color
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &:not(:hover)::after
-        border-color: $color
-      select
-        border-color: $color
-        &:hover,
-        &.is-hovered
-          border-color: darken($color, 5%)
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
-  // Sizes
-  &.is-small
-    +control-small
-  &.is-medium
-    +control-medium
-  &.is-large
-    +control-large
-  // Modifiers
-  &.is-disabled
-    &::after
-      border-color: $input-disabled-color
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &.is-loading
-    &::after
-      @extend %loader
-      margin-top: 0
-      position: absolute
-      right: 0.625em
-      top: 0.625em
-      transform: none
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
-
-.file
-  @extend %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-empty
-      .file-cta
-        border-radius: $file-radius
-      .file-name
-        display: none
-  &.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-centered
-    justify-content: center
-  &.is-fullwidth
-    .file-label
-      width: 100%
-    .file-name
-      flex-grow: 1
-      max-width: none
-  &.is-right
-    justify-content: flex-end
-    .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
-
-.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: 100%
-  left: 0
-  opacity: 0
-  outline: none
-  position: absolute
-  top: 0
-  width: 100%
-
-.file-cta,
-.file-name
-  @extend %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: $label-color
-  display: block
-  font-size: $size-normal
-  font-weight: $label-weight
-  &:not(:last-child)
-    margin-bottom: 0.5em
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-medium
-    font-size: $size-medium
-  &.is-large
-    font-size: $size-large
-
-.help
-  display: block
-  font-size: $help-size
-  margin-top: 0.25rem
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      color: $color
-
-// Containers
-
-.field
-  &:not(:last-child)
-    margin-bottom: 0.75rem
-  // Modifiers
-  &.has-addons
-    display: flex
-    justify-content: flex-start
-    .control
-      &:not(:last-child)
-        margin-right: -1px
-      &:not(:first-child):not(:last-child)
-        .button,
-        .input,
-        .select select
-          border-radius: 0
-      &:first-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
-      &:last-child:not(:only-child)
-        .button,
-        .input,
-        .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
-      .button,
-      .input,
-      .select select
-        &:not([disabled])
-          &:hover,
-          &.is-hovered
-            z-index: 2
-          &:focus,
-          &.is-focused,
-          &:active,
-          &.is-active
-            z-index: 3
-            &:hover
-              z-index: 4
-      &.is-expanded
-        flex-grow: 1
-    &.has-addons-centered
-      justify-content: center
-    &.has-addons-right
-      justify-content: flex-end
-    &.has-addons-fullwidth
-      .control
-        flex-grow: 1
-        flex-shrink: 0
-  &.is-grouped
-    display: flex
-    justify-content: flex-start
-    & > .control
-      flex-shrink: 0
-      &:not(:last-child)
-        margin-bottom: 0
-        margin-right: 0.75rem
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-    &.is-grouped-centered
-      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
-
-.field-label
-  .label
-    font-size: inherit
-  +mobile
-    margin-bottom: 0.5rem
-  +tablet
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    margin-right: 1.5rem
-    text-align: right
-    &.is-small
-      font-size: $size-small
-      padding-top: 0.375em
-    &.is-normal
-      padding-top: 0.375em
-    &.is-medium
-      font-size: $size-medium
-      padding-top: 0.375em
-    &.is-large
-      font-size: $size-large
-      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-right: 0.75rem
-
-.control
-  box-sizing: border-box
-  clear: both //fixes the icon floating out of the input when help text is floated right
-  font-size: $size-normal
-  position: relative
-  text-align: left
-  // Modifiers
-  &.has-icons-left,
-  &.has-icons-right
-    .input,
-    .select
-      &:focus
-        & ~ .icon
-          color: $input-icon-active-color
-      &.is-small ~ .icon
-        font-size: $size-small
-      &.is-medium ~ .icon
-        font-size: $size-medium
-      &.is-large ~ .icon
-        font-size: $size-large
-    .icon
-      color: $input-icon-color
-      height: $input-height
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: $input-height
-      z-index: 4
-  &.has-icons-left
-    .input,
-    .select select
-      padding-left: $input-height
-    .icon.is-left
-      left: 0
-  &.has-icons-right
-    .input,
-    .select select
-      padding-right: $input-height
-    .icon.is-right
-      right: 0
-  &.is-loading
-    &::after
-      @extend %loader
-      position: absolute !important
-      right: 0.625em
-      top: 0.625em
-      z-index: 4
-    &.is-small:after
-      font-size: $size-small
-    &.is-medium:after
-      font-size: $size-medium
-    &.is-large:after
-      font-size: $size-large
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."