bulma-sass 0.8.1 → 0.9.2

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}
@@ -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

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
@@ -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,4 +1,9 @@
-$input-color: inherit !default
+@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

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"