bulma-rails 0.8.0 → 0.9.2

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

@@ -1,14 +1,23 @@
+@import "../utilities/mixins"
+
 $notification-background-color: $background !default
 $notification-code-background-color: $scheme-main !default
 $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
+$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
+
+$notification-colors: $colors !default
 
 .notification
   @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
-  padding: $notification-padding
   position: relative
+  +ltr
+    padding: $notification-padding-ltr
+  +rtl
+    padding: $notification-padding-rtl
   a:not(.button):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
@@ -20,17 +29,24 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
   pre code
     background: transparent
   & > .delete
+    +ltr-position(0.5rem)
     position: absolute
-    right: 0.5rem
     top: 0.5rem
   .title,
   .subtitle,
   .content
     color: currentColor
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $notification-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      // If light and dark colors are provided
+      @if length($pair) >= 4
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 .block
   @extend %block
 

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

@@ -1,9 +1,13 @@
+@import "../utilities/mixins"
+
 $progress-bar-background-color: $border-light !default
 $progress-value-background-color: $text !default
 $progress-border-radius: $radius-rounded !default
 
 $progress-indeterminate-duration: 1.5s !default
 
+$progress-colors: $colors !default
+
 .progress
   @extend %block
   -moz-appearance: none
@@ -25,7 +29,7 @@ $progress-indeterminate-duration: 1.5s !default
     background-color: $progress-value-background-color
     border: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $progress-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value
@@ -51,6 +55,8 @@ $progress-indeterminate-duration: 1.5s !default
       background-color: transparent
     &::-moz-progress-bar
       background-color: transparent
+    &::-ms-fill
+      animation-name: none
 
   // Sizes
   &.is-small

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $table-color: $text-strong !default
 $table-background-color: $scheme-main !default
 
@@ -23,6 +25,8 @@ $table-row-active-color: $primary-invert !default
 $table-striped-row-even-background-color: $scheme-main-bis !default
 $table-striped-row-even-hover-background-color: $scheme-main-ter !default
 
+$table-colors: $colors !default
+
 .table
   @extend %block
   background-color: $table-background-color
@@ -34,7 +38,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
     padding: $table-cell-padding
     vertical-align: top
     // Colors
-    @each $name, $pair in $colors
+    @each $name, $pair in $table-colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}
@@ -51,10 +55,12 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
       a,
       strong
         color: currentColor
+    &.is-vcentered
+      vertical-align: middle
   th
     color: $table-cell-heading-color
     &:not([align])
-      text-align: left
+      text-align: inherit
   tr
     &.is-selected
       background-color: $table-row-active-background-color

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

@@ -1,8 +1,12 @@
+@import "../utilities/mixins"
+
 $tag-background-color: $background !default
 $tag-color: $text !default
 $tag-radius: $radius !default
 $tag-delete-margin: 1px !default
 
+$tag-colors: $colors !default
+
 .tags
   align-items: center
   display: flex
@@ -11,7 +15,7 @@ $tag-delete-margin: 1px !default
   .tag
     margin-bottom: 0.5rem
     &:not(:last-child)
-      margin-right: 0.5rem
+      +ltr-property("margin", 0.5rem)
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
@@ -37,14 +41,22 @@ $tag-delete-margin: 1px !default
         margin-right: 0
   &.has-addons
     .tag
-      margin-right: 0
+      +ltr-property("margin", 0)
       &:not(:first-child)
-        margin-left: 0
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
+        +ltr-property("margin", 0, false)
+        +ltr
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
+        +rtl
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
       &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
+        +ltr
+          border-top-right-radius: 0
+          border-bottom-right-radius: 0
+        +rtl
+          border-top-left-radius: 0
+          border-bottom-left-radius: 0
 
 .tag:not(body)
   align-items: center
@@ -60,10 +72,10 @@ $tag-delete-margin: 1px !default
   padding-right: 0.75em
   white-space: nowrap
   .delete
-    margin-left: 0.25rem
-    margin-right: -0.375rem
+    +ltr-property("margin", 0.25rem, false)
+    +ltr-property("margin", -0.375rem)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $tag-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -85,17 +97,17 @@ $tag-delete-margin: 1px !default
     font-size: $size-medium
   .icon
     &:first-child:not(:last-child)
-      margin-left: -0.375em
-      margin-right: 0.1875em
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", 0.1875em)
     &:last-child:not(:first-child)
-      margin-left: 0.1875em
-      margin-right: -0.375em
+      +ltr-property("margin", 0.1875em, false)
+      +ltr-property("margin", -0.375em)
     &:first-child:last-child
-      margin-left: -0.375em
-      margin-right: -0.375em
+      +ltr-property("margin", -0.375em, false)
+      +ltr-property("margin", -0.375em)
   // Modifiers
   &.is-delete
-    margin-left: $tag-delete-margin
+    +ltr-property("margin", $tag-delete-margin, false)
     padding: 0
     position: relative
     width: 2em

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $title-color: $text-strong !default
 $title-family: false !default
 $title-size: $size-3 !default

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

@@ -1,8 +1,9 @@
+/* Bulma Form */
 @charset "utf-8"
 
-@import "shared.sass"
-@import "input-textarea.sass"
-@import "checkbox-radio.sass"
-@import "select.sass"
-@import "file.sass"
-@import "tools.sass"
+@import "shared"
+@import "input-textarea"
+@import "checkbox-radio"
+@import "select"
+@import "file"
+@import "tools"

data/app/assets/stylesheets/sass/form/checkbox-radio.sass

@@ -8,7 +8,8 @@
   &:hover
     color: $input-hover-color
   &[disabled],
-  fieldset[disabled] &
+  fieldset[disabled] &,
+  input[disabled]
     color: $input-disabled-color
     cursor: not-allowed
 
@@ -18,4 +19,4 @@
 .radio
   @extend %checkbox-radio
   & + .radio
-    margin-left: 0.5em
+    +ltr-property("margin", 0.5em, false)

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

@@ -11,6 +11,8 @@ $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
 
+$file-colors: $form-colors !default
+
 .file
   @extend %unselectable
   align-items: stretch
@@ -18,7 +20,7 @@ $file-name-max-width: 16em !default
   justify-content: flex-start
   position: relative
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $file-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -29,19 +31,19 @@ $file-name-max-width: 16em !default
       &:hover,
       &.is-hovered
         .file-cta
-          background-color: darken($color, 2.5%)
+          background-color: bulmaDarken($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)
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
           color: $color-invert
       &:active,
       &.is-active
         .file-cta
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           border-color: transparent
           color: $color-invert
   // Sizes
@@ -125,16 +127,16 @@ $file-name-max-width: 16em !default
   position: relative
   &:hover
     .file-cta
-      background-color: darken($file-cta-background-color, 2.5%)
+      background-color: bulmaDarken($file-cta-background-color, 2.5%)
       color: $file-cta-hover-color
     .file-name
-      border-color: darken($file-name-border-color, 2.5%)
+      border-color: bulmaDarken($file-name-border-color, 2.5%)
   &:active
     .file-cta
-      background-color: darken($file-cta-background-color, 5%)
+      background-color: bulmaDarken($file-cta-background-color, 5%)
       color: $file-cta-active-color
     .file-name
-      border-color: darken($file-name-border-color, 5%)
+      border-color: bulmaDarken($file-name-border-color, 5%)
 
 .file-input
   height: 100%
@@ -166,7 +168,7 @@ $file-name-max-width: 16em !default
   display: block
   max-width: $file-name-max-width
   overflow: hidden
-  text-align: left
+  text-align: inherit
   text-overflow: ellipsis
 
 .file-icon
@@ -174,7 +176,7 @@ $file-name-max-width: 16em !default
   display: flex
   height: 1em
   justify-content: center
-  margin-right: 0.5em
+  +ltr-property("margin", 0.5em)
   width: 1em
   .fa
     font-size: 14px

data/app/assets/stylesheets/sass/form/input-textarea.sass

@@ -2,6 +2,8 @@ $textarea-padding: $control-padding-horizontal !default
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
+$textarea-colors: $form-colors !default
+
 %input-textarea
   @extend %input
   box-shadow: $input-shadow
@@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
   &[readonly]
     box-shadow: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       border-color: $color
@@ -18,7 +20,7 @@ $textarea-min-height: 8em !default
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small

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

@@ -1,3 +1,5 @@
+$select-colors: $form-colors !default
+
 .select
   display: inline-block
   max-width: 100%
@@ -9,12 +11,12 @@
     &::after
       @extend %arrow
       border-color: $input-arrow
-      right: 1.125em
+      +ltr-position(1.125em)
       z-index: 4
   &.is-rounded
     select
       border-radius: $radius-rounded
-      padding-left: 1em
+      +ltr-property("padding", 1em, false)
   select
     @extend %input
     cursor: pointer
@@ -28,7 +30,7 @@
     fieldset[disabled] &:hover
       border-color: $input-disabled-border-color
     &:not([multiple])
-      padding-right: 2.5em
+      +ltr-property("padding", 2.5em)
     &[multiple]
       height: auto
       padding: 0
@@ -39,7 +41,7 @@
     &::after
       border-color: $input-hover-color
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &:not(:hover)::after
@@ -48,12 +50,12 @@
         border-color: $color
         &:hover,
         &.is-hovered
-          border-color: darken($color, 5%)
+          border-color: bulmaDarken($color, 5%)
         &:focus,
         &.is-focused,
         &:active,
         &.is-active
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small
@@ -74,7 +76,7 @@
       @extend %loader
       margin-top: 0
       position: absolute
-      right: 0.625em
+      +ltr-position(0.625em)
       top: 0.625em
       transform: none
     &.is-small:after

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

@@ -1,9 +1,14 @@
+@import "../utilities/controls"
+@import "../utilities/mixins"
+
+$form-colors: $colors !default
+
 $input-color: $text-strong !default
 $input-background-color: $scheme-main !default
 $input-border-color: $border !default
 $input-height: $control-height !default
 $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
 
 $input-hover-color: $text-strong !default
 $input-hover-border-color: $border-hover !default
@@ -11,12 +16,12 @@ $input-hover-border-color: $border-hover !default
 $input-focus-color: $text-strong !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-focus-box-shadow-color: bulmaRgba($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-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
 
 $input-arrow: $link !default
 

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

@@ -3,6 +3,8 @@ $label-weight: $weight-bold !default
 
 $help-size: $size-small !default
 
+$label-colors: $form-colors !default
+
 .label
   color: $label-color
   display: block
@@ -22,7 +24,7 @@ $help-size: $size-small !default
   display: block
   font-size: $help-size
   margin-top: 0.25rem
-  @each $name, $pair in $colors
+  @each $name, $pair in $label-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       color: $color
@@ -38,7 +40,7 @@ $help-size: $size-small !default
     justify-content: flex-start
     .control
       &:not(:last-child)
-        margin-right: -1px
+        +ltr-property("margin", -1px)
       &:not(:first-child):not(:last-child)
         .button,
         .input,
@@ -48,14 +50,22 @@ $help-size: $size-small !default
         .button,
         .input,
         .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
+          +ltr
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
+          +rtl
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
       &:last-child:not(:only-child)
         .button,
         .input,
         .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
+          +ltr
+            border-bottom-left-radius: 0
+            border-top-left-radius: 0
+          +rtl
+            border-bottom-right-radius: 0
+            border-top-right-radius: 0
       .button,
       .input,
       .select select
@@ -88,7 +98,7 @@ $help-size: $size-small !default
       flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 0.75rem
+        +ltr-property("margin", 0.75rem)
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1
@@ -119,7 +129,7 @@ $help-size: $size-small !default
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 1.5rem
+    +ltr-property("margin", 1.5rem)
     text-align: right
     &.is-small
       font-size: $size-small
@@ -148,14 +158,14 @@ $help-size: $size-small !default
       &:not(.is-narrow)
         flex-grow: 1
       &:not(:last-child)
-        margin-right: 0.75rem
+        +ltr-property("margin", 0.75rem)
 
 .control
   box-sizing: border-box
   clear: both
   font-size: $size-normal
   position: relative
-  text-align: left
+  text-align: inherit
   // Modifiers
   &.has-icons-left,
   &.has-icons-right
@@ -194,7 +204,7 @@ $help-size: $size-small !default
     &::after
       @extend %loader
       position: absolute !important
-      right: 0.625em
+      +ltr-position(0.625em)
       top: 0.625em
       z-index: 4
     &.is-small:after

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

@@ -1,4 +1,5 @@
+/* Bulma Grid */
 @charset "utf-8"
 
-@import "columns.sass"
-@import "tiles.sass"
+@import "columns"
+@import "tiles"