bulma-sass 0.7.5.1 → 0.9.1

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

@@ -1,27 +1,29 @@
-$input-color: $grey-darker !default
-$input-background-color: $white !default
-$input-border-color: $grey-lighter !default
+$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 1px 2px rgba($black, 0.1) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
 
-$input-hover-color: $grey-darker !default
-$input-hover-border-color: $grey-light !default
+$input-hover-color: $text-strong !default
+$input-hover-border-color: $border-hover !default
 
-$input-focus-color: $grey-darker !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
 
-$input-icon-color: $grey-lighter !default
-$input-icon-active-color: $grey !default
+$input-icon-color: $border !default
+$input-icon-active-color: $text !default
 
 $input-radius: $radius !default
 

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

@@ -1,8 +1,10 @@
-$label-color: $grey-darker !default
+$label-color: $text-strong !default
 $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,3 +1,4 @@
+/* Bulma Grid */
 @charset "utf-8"
 
 @import "columns.sass"

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

@@ -0,0 +1,12 @@
+/* Bulma Helpers */
+@charset "utf-8"
+
+@import "color.sass"
+@import "flexbox.sass"
+@import "float.sass"
+@import "other.sass"
+@import "overflow.sass"
+@import "position.sass"
+@import "spacing.sass"
+@import "typography.sass"
+@import "visibility.sass"

data/app/assets/stylesheets/sass/helpers/color.sass

@@ -0,0 +1,37 @@
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color !important
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: bulmaDarken($color, 10%) !important
+  .has-background-#{$name}
+    background-color: $color !important
+  @if length($pair) >= 4
+    $color-light: nth($pair, 3)
+    $color-dark: nth($pair, 4)
+    // Light
+    .has-text-#{$name}-light
+      color: $color-light !important
+    a.has-text-#{$name}-light
+      &:hover,
+      &:focus
+        color: bulmaDarken($color-light, 10%) !important
+    .has-background-#{$name}-light
+      background-color: $color-light !important
+    // Dark
+    .has-text-#{$name}-dark
+      color: $color-dark !important
+    a.has-text-#{$name}-dark
+      &:hover,
+      &:focus
+        color: bulmaLighten($color-dark, 10%) !important
+    .has-background-#{$name}-dark
+      background-color: $color-dark !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
+  .has-background-#{$name}
+    background-color: $shade !important

data/app/assets/stylesheets/sass/helpers/flexbox.sass

@@ -0,0 +1,35 @@
+$flex-direction-values: row, row-reverse, column, column-reverse
+@each $value in $flex-direction-values
+  .is-flex-direction-#{$value}
+    flex-direction: $value !important
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse
+@each $value in $flex-wrap-values
+  .is-flex-wrap-#{$value}
+    flex-wrap: $value !important
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
+@each $value in $justify-content-values
+  .is-justify-content-#{$value}
+    justify-content: $value !important
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
+@each $value in $align-content-values
+  .is-align-content-#{$value}
+    align-content: $value !important
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
+@each $value in $align-items-values
+  .is-align-items-#{$value}
+    align-items: $value !important
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
+@each $value in $align-self-values
+  .is-align-self-#{$value}
+    align-self: $value !important
+
+$flex-operators: grow, shrink
+@each $operator in $flex-operators
+  @for $i from 0 through 5
+    .is-flex-#{$operator}-#{$i}
+      flex-#{$operator}: $i !important

data/app/assets/stylesheets/sass/helpers/float.sass

@@ -0,0 +1,8 @@
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left !important
+
+.is-pulled-right
+  float: right !important

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

@@ -0,0 +1,11 @@
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-clickable
+  cursor: pointer !important
+
+.is-unselectable
+  @extend %unselectable

data/app/assets/stylesheets/sass/helpers/overflow.sass

@@ -0,0 +1,2 @@
+.is-clipped
+  overflow: hidden !important

data/app/assets/stylesheets/sass/helpers/position.sass

@@ -0,0 +1,5 @@
+.is-overlay
+  @extend %overlay
+
+.is-relative
+  position: relative !important

data/app/assets/stylesheets/sass/helpers/spacing.sass

@@ -0,0 +1,31 @@
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
+$spacing-horizontal: "x" !default
+$spacing-vertical: "y" !default
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
+
+@each $property, $shortcut in $spacing-shortcuts
+  @each $name, $value in $spacing-values
+    // All directions
+    .#{$shortcut}-#{$name}
+      #{$property}: $value !important
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions
+      .#{$shortcut}#{$suffix}-#{$name}
+        #{$property}-#{$direction}: $value !important
+    // Horizontal axis
+    @if $spacing-horizontal != null
+      .#{$shortcut}#{$spacing-horizontal}-#{$name}
+        #{$property}-left: $value !important
+        #{$property}-right: $value !important
+    // Vertical axis
+    @if $spacing-vertical != null
+      .#{$shortcut}#{$spacing-vertical}-#{$name}
+        #{$property}-top: $value !important
+        #{$property}-bottom: $value !important

data/app/assets/stylesheets/sass/helpers/typography.sass

@@ -0,0 +1,98 @@
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+.is-italic
+  font-style: italic !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important

data/app/assets/stylesheets/sass/helpers/visibility.sass

@@ -0,0 +1,122 @@
+
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+.is-invisible
+  visibility: hidden !important
+
++mobile
+  .is-invisible-mobile
+    visibility: hidden !important
+
++tablet
+  .is-invisible-tablet
+    visibility: hidden !important
+
++tablet-only
+  .is-invisible-tablet-only
+    visibility: hidden !important
+
++touch
+  .is-invisible-touch
+    visibility: hidden !important
+
++desktop
+  .is-invisible-desktop
+    visibility: hidden !important
+
++desktop-only
+  .is-invisible-desktop-only
+    visibility: hidden !important
+
++widescreen
+  .is-invisible-widescreen
+    visibility: hidden !important
+
++widescreen-only
+  .is-invisible-widescreen-only
+    visibility: hidden !important
+
++fullhd
+  .is-invisible-fullhd
+    visibility: hidden !important