RubyGems - bulma-rails - Versions diffs - 0.1.2 → 0.2.3 - Mend

bulma-rails 0.1.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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

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

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