bulma-sass 0.7.5 → 0.9.0

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

@@ -1,4 +1,4 @@
-$title-color: $grey-darker !default
+$title-color: $text-strong !default
 $title-family: false !default
 $title-size: $size-3 !default
 $title-weight: $weight-semibold !default
@@ -8,12 +8,12 @@ $title-strong-weight: inherit !default
 $title-sub-size: 0.75em !default
 $title-sup-size: 0.75em !default
 
-$subtitle-color: $grey-dark !default
+$subtitle-color: $text !default
 $subtitle-family: false !default
 $subtitle-size: $size-5 !default
 $subtitle-weight: $weight-normal !default
 $subtitle-line-height: 1.25 !default
-$subtitle-strong-color: $grey-darker !default
+$subtitle-strong-color: $text-strong !default
 $subtitle-strong-weight: $weight-semibold !default
 $subtitle-negative-margin: -1.25rem !default
 

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

@@ -0,0 +1,8 @@
+@charset "utf-8"
+
+@import "shared.sass"
+@import "input-textarea.sass"
+@import "checkbox-radio.sass"
+@import "select.sass"
+@import "file.sass"
+@import "tools.sass"

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

@@ -0,0 +1,21 @@
+%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
+
+.checkbox
+  @extend %checkbox-radio
+
+.radio
+  @extend %checkbox-radio
+  & + .radio
+    +ltr-property("margin", 0.5em, false)

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

@@ -0,0 +1,180 @@
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $scheme-main-ter !default
+$file-cta-color: $text !default
+$file-cta-hover-color: $text-strong !default
+$file-cta-active-color: $text-strong !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
+
+.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: bulmaDarken($color, 2.5%)
+          border-color: transparent
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          border-color: transparent
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: bulmaDarken($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: bulmaDarken($file-cta-background-color, 2.5%)
+      color: $file-cta-hover-color
+    .file-name
+      border-color: bulmaDarken($file-name-border-color, 2.5%)
+  &:active
+    .file-cta
+      background-color: bulmaDarken($file-cta-background-color, 5%)
+      color: $file-cta-active-color
+    .file-name
+      border-color: bulmaDarken($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: inherit
+  text-overflow: ellipsis
+
+.file-icon
+  align-items: center
+  display: flex
+  height: 1em
+  justify-content: center
+  +ltr-property("margin", 0.5em)
+  width: 1em
+  .fa
+    font-size: 14px

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

@@ -0,0 +1,64 @@
+$textarea-padding: $control-padding-horizontal !default
+$textarea-max-height: 40em !default
+$textarea-min-height: 8em !default
+
+%input-textarea
+  @extend %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 bulmaRgba($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
+  @extend %input-textarea
+  &.is-rounded
+    border-radius: $radius-rounded
+    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
+    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
+  &.is-static
+    background-color: transparent
+    border-color: transparent
+    box-shadow: none
+    padding-left: 0
+    padding-right: 0
+
+.textarea
+  @extend %input-textarea
+  display: block
+  max-width: 100%
+  min-width: 100%
+  padding: $textarea-padding
+  resize: vertical
+  &:not([rows])
+    max-height: $textarea-max-height
+    min-height: $textarea-min-height
+  &[rows]
+    height: initial
+  // Modifiers
+  &.has-fixed-size
+    resize: none

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

@@ -0,0 +1,85 @@
+.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
+      +ltr-position(1.125em)
+      z-index: 4
+  &.is-rounded
+    select
+      border-radius: $radius-rounded
+      +ltr-property("padding", 1em, false)
+  select
+    @extend %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])
+      +ltr-property("padding", 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: bulmaDarken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($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
+      +ltr-position(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

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

@@ -0,0 +1,55 @@
+$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: bulmaRgba($input-color, 0.3) !default
+
+$input-hover-color: $text-strong !default
+$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: 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: bulmaRgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $border !default
+$input-icon-active-color: $text !default
+
+$input-radius: $radius !default
+
+=input
+  @extend %control
+  background-color: $input-background-color
+  border-color: $input-border-color
+  border-radius: $input-radius
+  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
+  +input

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

@@ -0,0 +1,213 @@
+$label-color: $text-strong !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+.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)
+        +ltr-property("margin", -1px)
+      &:not(:first-child):not(:last-child)
+        .button,
+        .input,
+        .select select
+          border-radius: 0
+      &:first-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          +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
+          +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
+        &: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
+        flex-shrink: 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
+        +ltr-property("margin", 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
+    +ltr-property("margin", 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)
+        +ltr-property("margin", 0.75rem)
+
+.control
+  box-sizing: border-box
+  clear: both
+  font-size: $size-normal
+  position: relative
+  text-align: inherit
+  // 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
+      +ltr-position(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