bulma-rails 0.7.4 → 0.7.5

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

@@ -1,5 +1,6 @@
 $progress-bar-background-color: $border !default
 $progress-value-background-color: $text !default
+$progress-border-radius: $radius-rounded !default
 
 $progress-indeterminate-duration: 1.5s !default
 
@@ -8,7 +9,7 @@ $progress-indeterminate-duration: 1.5s !default
   -moz-appearance: none
   -webkit-appearance: none
   border: none
-  border-radius: $radius-rounded
+  border-radius: $progress-border-radius
   display: block
   height: $size-normal
   overflow: hidden
@@ -23,6 +24,19 @@ $progress-indeterminate-duration: 1.5s !default
   &::-ms-fill
     background-color: $progress-value-background-color
     border: none
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background-color: $color
+      &::-moz-progress-bar
+        background-color: $color
+      &::-ms-fill
+        background-color: $color
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+
   &:indeterminate
     animation-duration: $progress-indeterminate-duration
     animation-iteration-count: infinite
@@ -37,18 +51,6 @@ $progress-indeterminate-duration: 1.5s !default
       background-color: transparent
     &::-moz-progress-bar
       background-color: transparent
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      &::-webkit-progress-value
-        background-color: $color
-      &::-moz-progress-bar
-        background-color: $color
-      &::-ms-fill
-        background-color: $color
-      &:indeterminate
-        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
 
   // Sizes
   &.is-small

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

@@ -53,7 +53,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
         color: currentColor
   th
     color: $table-cell-heading-color
-    text-align: left
+    &:not([align])
+      text-align: left
   tr
     &.is-selected
       background-color: $table-row-active-background-color

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

@@ -23,15 +23,6 @@ $tag-delete-margin: 1px !default
   &.are-large
     .tag:not(.is-normal):not(.is-medium)
       font-size: $size-medium
-  &.has-addons
-    .tag
-      margin-right: 0
-      &:not(:first-child)
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
-      &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
   &.is-centered
     justify-content: center
     .tag

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

@@ -1,4 +1,5 @@
 $title-color: $grey-darker !default
+$title-family: false !default
 $title-size: $size-3 !default
 $title-weight: $weight-semibold !default
 $title-line-height: 1.125 !default
@@ -8,6 +9,7 @@ $title-sub-size: 0.75em !default
 $title-sup-size: 0.75em !default
 
 $subtitle-color: $grey-dark !default
+$subtitle-family: false !default
 $subtitle-size: $size-5 !default
 $subtitle-weight: $weight-normal !default
 $subtitle-line-height: 1.25 !default
@@ -31,6 +33,8 @@ $subtitle-negative-margin: -1.25rem !default
 
 .title
   color: $title-color
+  @if $title-family
+    font-family: $title-family
   font-size: $title-size
   font-weight: $title-weight
   line-height: $title-line-height
@@ -49,6 +53,8 @@ $subtitle-negative-margin: -1.25rem !default
 
 .subtitle
   color: $subtitle-color
+  @if $subtitle-family
+    font-family: $subtitle-family
   font-size: $subtitle-size
   font-weight: $subtitle-weight
   line-height: $subtitle-line-height

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
+    margin-left: 0.5em

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: $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
+
+.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

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

@@ -0,0 +1,60 @@
+%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 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
+  @extend %input-textarea
+  &.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
+  @extend %input-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

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
+      right: 1.125em
+      z-index: 4
+  &.is-rounded
+    select
+      border-radius: $radius-rounded
+      padding-left: 1em
+  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])
+      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