bulma-rails 0.1.2 → 0.2.3

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

@@ -1,5 +1,6 @@
 .content
-  @extend .block
+  +block
+  color: $text
   // Inline
   a:not(.button)
     border-bottom: 1px solid $border

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

@@ -5,7 +5,8 @@
     &.is-#{$name}
       border-color: $color
 
-.input
+.input,
+.textarea
   +form-control
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
@@ -28,7 +29,6 @@
     width: auto
 
 .textarea
-  @extend .input
   display: block
   line-height: 1.2
   max-height: 600px
@@ -38,7 +38,8 @@
   padding: 10px
   resize: vertical
 
-%control-with-element
+.checkbox,
+.radio
   cursor: pointer
   display: inline-block
   line-height: 16px
@@ -49,16 +50,12 @@
   &:hover
     color: $control-hover
   &.is-disabled
-    color: $text-light
+    color: $control-disabled
     pointer-events: none
     input
       pointer-events: none
 
-.checkbox
-  @extend %control-with-element
-
 .radio
-  @extend %control-with-element
   & + .radio
     margin-left: 10px
 
@@ -82,13 +79,13 @@
     select
       width: 100%
   &:after
-    +arrow($link)
+    +arrow($control-active)
     margin-top: -6px
     right: 16px
     top: 50%
   &:hover
     &:after
-      border-color: $link-hover
+      border-color: $control-hover
   &.is-small
     height: 24px
     select
@@ -106,7 +103,7 @@
       padding-right: 52px
 
 .label
-  color: $text-strong
+  color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
@@ -114,7 +111,7 @@
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $control-size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -127,7 +124,9 @@
   +mobile
     margin-bottom: 5px
   +tablet
+    flex-basis: 0
     flex-grow: 1
+    flex-shrink: 0
     margin-right: 20px
     padding-top: 7px
     text-align: right
@@ -153,15 +152,16 @@
       &:focus
         z-index: 3
       &:first-child
-        border-radius: $radius 0 0 $radius
+        border-radius: $control-radius 0 0 $control-radius
         select
-          border-radius: $radius 0 0 $radius
+          border-radius: $control-radius 0 0 $control-radius
       &:last-child
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $control-radius $control-radius 0
         select
-          border-radius: 0 $radius $radius 0
+          border-radius: 0 $control-radius $control-radius 0
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 0
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -171,17 +171,18 @@
       .input,
       .select
         flex-grow: 1
+        flex-shrink: 0
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $text-light
+      color: $control-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $text-strong
+        color: $control-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0
@@ -234,6 +235,7 @@
         margin-right: 10px
       &.is-expanded
         flex-grow: 1
+        flex-shrink: 1
     &.is-grouped-centered
       justify-content: center
     &.is-grouped-right
@@ -243,10 +245,12 @@
       display: flex
       & > .control
         display: flex
+        flex-basis: 0
         flex-grow: 5
+        flex-shrink: 1
   &.is-loading
     &:after
-      @extend .loader
+      +loader
       position: absolute !important
       right: 8px
       top: 8px

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

@@ -1,5 +1,5 @@
 .notification
-  @extend .block
+  +block
   +clearfix
   background-color: $background
   border-radius: $radius
@@ -9,8 +9,9 @@
     border-radius: 0 $radius
     float: right
     margin: -16px -20px 0 20px
+  .title,
   .subtitle,
-  .title
+  .content
     color: inherit
   // Colors
   @each $name, $pair in $colors

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

@@ -1,44 +1,25 @@
-.delete
-  @extend .unselectable
-  -moz-appearance: none
-  -webkit-appearance: none
-  background-color: rgba($black, 0.2)
-  border: none
-  border-radius: 290486px
-  cursor: pointer
-  display: inline-block
-  height: 24px
+.block
+  +block
+
+.container
   position: relative
+  +desktop
+    margin: 0 auto
+    max-width: 960px
+    // Modifiers
+    &.is-fluid
+      margin: 0 20px
+      max-width: none
+  +widescreen
+    max-width: 1200px
+
+.delete
+  +delete
+
+.fa
+  font-size: 21px
+  text-align: center
   vertical-align: top
-  width: 24px
-  &:before,
-  &:after
-    background-color: $white
-    content: ""
-    display: block
-    height: 2px
-    left: 50%
-    margin-left: -25%
-    margin-top: -1px
-    position: absolute
-    top: 50%
-    width: 50%
-  &:before
-    transform: rotate(45deg)
-  &:after
-    transform: rotate(-45deg)
-  &:hover
-    background-color: rgba($black, 0.5)
-  // Sizes
-  &.is-small
-    height: 16px
-    width: 16px
-  &.is-medium
-    height: 32px
-    width: 32px
-  &.is-large
-    height: 40px
-    width: 40px
 
 .icon
   +fa(21px, 24px)
@@ -53,46 +34,6 @@
   &.is-large
     +fa(42px, 48px)
 
-.hamburger
-  cursor: pointer
-  display: block
-  height: $nav-height
-  position: relative
-  width: $nav-height
-  span
-    background-color: $text
-    display: block
-    height: 1px
-    left: 50%
-    margin-left: -7px
-    position: absolute
-    top: 50%
-    transition: none $speed $easing
-    transition-property: background, left, opacity, transform
-    width: 15px
-    &:nth-child(1)
-      margin-top: -6px
-    &:nth-child(2)
-      margin-top: -1px
-    &:nth-child(3)
-      margin-top: 4px
-  &:hover
-    background-color: $background
-  // Modifers
-  &.is-active
-    span
-      background-color: $link
-      &:nth-child(1)
-        margin-left: -5px
-        transform: rotate(45deg)
-        transform-origin: left top
-      &:nth-child(2)
-        opacity: 0
-      &:nth-child(3)
-        margin-left: -5px
-        transform: rotate(-45deg)
-        transform-origin: left bottom
-
 .heading
   display: block
   font-size: 11px
@@ -101,7 +42,7 @@
   text-transform: uppercase
 
 .highlight
-  @extend .block
+  +block
   font-size: 12px
   font-weight: normal
   max-width: 100%
@@ -112,16 +53,7 @@
     max-width: 100%
 
 .loader
-  animation: spin-around 500ms infinite linear
-  border: 2px solid $border
-  border-radius: 290486px
-  border-right-color: transparent
-  border-top-color: transparent
-  content: ""
-  display: block
-  height: 16px
-  position: relative
-  width: 16px
+  +loader
 
 .number
   background-color: $background
@@ -147,9 +79,6 @@
   .delete
     margin-left: 4px
     margin-right: -6px
-  &:not(.is-large)
-    .delete
-      @extend .delete.is-small
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -177,11 +106,3 @@
     .delete
       margin-left: 4px
       margin-right: -8px
-
-.unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-

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

@@ -1,5 +1,5 @@
 .progress
-  @extend .block
+  +block
   -moz-appearance: none
   -webkit-appearance: none
   border: none

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

@@ -1,11 +1,20 @@
+$table: $text-strong !default
+$table-background: $white !default
+$table-border: $border !default
+
+$table-head: $text-light !default
+
+$table-row-hover-background: $white-ter !default
+$table-row-even-background: $white-bis !default
+
 .table
-  background-color: $white
-  color: $text-strong
+  background-color: $table-background
+  color: $table
   margin-bottom: 20px
   width: 100%
   td,
   th
-    border: 1px solid $border
+    border: 1px solid $table-border
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
@@ -37,13 +46,12 @@
     text-align: left
   tr
     &:hover
-      background-color: $background
-      color: $text-strong
+      background-color: $table-row-hover-background
   thead
     td,
     th
       border-width: 0 0 2px
-      color: $text-light
+      color: $table-head
   tbody
     tr
       &:last-child
@@ -54,7 +62,7 @@
     td,
     th
       border-width: 2px 0 0
-      color: $text-light
+      color: $table-head
   // Modifiers
   &.is-bordered
     td,
@@ -83,9 +91,7 @@
   &.is-striped
     tbody
       tr
-        &:hover
-          background-color: darken($background, 2%)
-        &:nth-child(2n)
-          background-color: $background
+        &:nth-child(even)
+          background-color: $table-row-even-background
           &:hover
-            background-color: darken($background, 2%)
+            background-color: $table-row-hover-background

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

@@ -1,6 +1,6 @@
 .title,
 .subtitle
-  @extend .block
+  +block
   font-weight: $weight-title-normal
   word-break: break-word
   em,

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

@@ -0,0 +1,4 @@
+@charset "utf-8"
+
+@import "columns.sass"
+@import "tiles.sass"

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

@@ -0,0 +1,251 @@
+.column
+  display: block
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+  padding: 10px
+  .columns.is-mobile > &.is-narrow
+    flex: none
+  .columns.is-mobile > &.is-full
+    flex: none
+    width: 100%
+  .columns.is-mobile > &.is-three-quarters
+    flex: none
+    width: 75%
+  .columns.is-mobile > &.is-two-thirds
+    flex: none
+    width: 66.6666%
+  .columns.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .columns.is-mobile > &.is-one-third
+    flex: none
+    width: 33.3333%
+  .columns.is-mobile > &.is-one-quarter
+    flex: none
+    width: 25%
+  .columns.is-mobile > &.is-offset-three-quarters
+    margin-left: 75%
+  .columns.is-mobile > &.is-offset-two-thirds
+    margin-left: 66.6666%
+  .columns.is-mobile > &.is-offset-half
+    margin-left: 50%
+  .columns.is-mobile > &.is-offset-one-third
+    margin-left: 33.3333%
+  .columns.is-mobile > &.is-offset-one-quarter
+    margin-left: 25%
+  @for $i from 1 through 12
+    .columns.is-mobile > &.is-#{$i}
+      flex: none
+      width: ($i / 12) * 100%
+    .columns.is-mobile > &.is-offset-#{$i}
+      margin-left: ($i / 12) * 100%
+  +mobile
+    &.is-narrow-mobile
+      flex: none
+    &.is-full-mobile
+      flex: none
+      width: 100%
+    &.is-three-quarters-mobile
+      flex: none
+      width: 75%
+    &.is-two-thirds-mobile
+      flex: none
+      width: 66.6666%
+    &.is-half-mobile
+      flex: none
+      width: 50%
+    &.is-one-third-mobile
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-mobile
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-mobile
+      margin-left: 75%
+    &.is-offset-two-thirds-mobile
+      margin-left: 66.6666%
+    &.is-offset-half-mobile
+      margin-left: 50%
+    &.is-offset-one-third-mobile
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-mobile
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-mobile
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-mobile
+        margin-left: ($i / 12) * 100%
+  +tablet
+    &.is-narrow,
+    &.is-narrow-tablet
+      flex: none
+    &.is-full,
+    &.is-full-tablet
+      flex: none
+      width: 100%
+    &.is-three-quarters,
+    &.is-three-quarters-tablet
+      flex: none
+      width: 75%
+    &.is-two-thirds,
+    &.is-two-thirds-tablet
+      flex: none
+      width: 66.6666%
+    &.is-half,
+    &.is-half-tablet
+      flex: none
+      width: 50%
+    &.is-one-third,
+    &.is-one-third-tablet
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter,
+    &.is-one-quarter-tablet
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters,
+    &.is-offset-three-quarters-tablet
+      margin-left: 75%
+    &.is-offset-two-thirds,
+    &.is-offset-two-thirds-tablet
+      margin-left: 66.6666%
+    &.is-offset-half,
+    &.is-offset-half-tablet
+      margin-left: 50%
+    &.is-offset-one-third,
+    &.is-offset-one-third-tablet
+      margin-left: 33.3333%
+    &.is-offset-one-quarter,
+    &.is-offset-one-quarter-tablet
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i},
+      &.is-#{$i}-tablet
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i},
+      &.is-offset-#{$i}-tablet
+        margin-left: ($i / 12) * 100%
+  +desktop
+    &.is-narrow-desktop
+      flex: none
+    &.is-full-desktop
+      flex: none
+      width: 100%
+    &.is-three-quarters-desktop
+      flex: none
+      width: 75%
+    &.is-two-thirds-desktop
+      flex: none
+      width: 66.6666%
+    &.is-half-desktop
+      flex: none
+      width: 50%
+    &.is-one-third-desktop
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-desktop
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-desktop
+      margin-left: 75%
+    &.is-offset-two-thirds-desktop
+      margin-left: 66.6666%
+    &.is-offset-half-desktop
+      margin-left: 50%
+    &.is-offset-one-third-desktop
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-desktop
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-desktop
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-desktop
+        margin-left: ($i / 12) * 100%
+  +widescreen
+    &.is-narrow-widescreen
+      flex: none
+    &.is-full-widescreen
+      flex: none
+      width: 100%
+    &.is-three-quarters-widescreen
+      flex: none
+      width: 75%
+    &.is-two-thirds-widescreen
+      flex: none
+      width: 66.6666%
+    &.is-half-widescreen
+      flex: none
+      width: 50%
+    &.is-one-third-widescreen
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-widescreen
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-widescreen
+      margin-left: 75%
+    &.is-offset-two-thirds-widescreen
+      margin-left: 66.6666%
+    &.is-offset-half-widescreen
+      margin-left: 50%
+    &.is-offset-one-third-widescreen
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-widescreen
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-widescreen
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-widescreen
+        margin-left: ($i / 12) * 100%
+
+.columns
+  margin-left: -10px
+  margin-right: -10px
+  margin-top: -10px
+  &:last-child
+    margin-bottom: -10px
+  &:not(:last-child)
+    margin-bottom: 10px
+  // Modifiers
+  &.is-centered
+    justify-content: center
+  &.is-gapless
+    margin-left: 0
+    margin-right: 0
+    margin-top: 0
+    &:last-child
+      margin-bottom: 0
+    &:not(:last-child)
+      margin-bottom: 20px
+    & > .column
+      margin: 0
+      padding: 0
+  &.is-grid
+    // Responsiveness
+    +tablet
+      flex-wrap: wrap
+      & > .column
+        max-width: 33.3333%
+        padding: 10px
+        width: 33.3333%
+        & + .column
+          margin-left: 0
+  &.is-mobile
+    display: flex
+  &.is-multiline
+    flex-wrap: wrap
+  &.is-vcentered
+    align-items: center
+  // Responsiveness
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    // Modifiers
+    &.is-desktop
+      display: flex