bulma-rails 0.4.1.pre → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ac2a0fd37b8b5607dfe82c3e119e6e6c920c16c9
-  data.tar.gz: 2af6f24eeea3ada82488adc55ec2bdf26f8b1c5c
+  metadata.gz: 63031c5b67fe906b4ece2c285933cd1896574586
+  data.tar.gz: cc9d9dda4cfcd250481fafdc4e9d50c5f1a157c6
 SHA512:
-  metadata.gz: 7fc1711e6934940216eeb70137a66849d4ed94c6d0a7351ce24e9a1ed888b34dc0e9290411fea5d45efb60ea2c3a1e56991067ec94468ec28be3534c9903489d
-  data.tar.gz: 3c7437bbb24dc8f8c51de120e7683ec99fbae99a7640b194587d02a8f1d353e79c73a5076e0ea611c2ce4d1525bf68e9fefdac3dae87c06124397abcc4460598
+  metadata.gz: 19b09662db1036c41b1bd6c76fad8ee951c2e40684f49ca7a8c60d60c01d540fce5967c20628cecb6da997db5fb717d92d34339b2e5ea24968918f13f9e07d43
+  data.tar.gz: 10682b3ed37bb55e4fe1715287055695811481cea6a55cc8066ded953bf5f4e9b118263bd5c0dd06b944aaa6a46e25106b3d30eb59ed844e82cb3130c8201284

data/README.md

@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
 
 Add this line to your application's Gemfile:
 
-    gem "bulma-rails", "~> 0.4.0"
+    gem "bulma-rails", "~> 0.4.2"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,4 +1,4 @@
-/*! bulma.io v0.4.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.4.2 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
 
 @import "sass/utilities/_all"

data/app/assets/stylesheets/sass/components/modal.sass

@@ -75,7 +75,7 @@
   justify-content: center
   overflow: hidden
   position: fixed
-  z-index: 1986
+  z-index: 20
   // Modifiers
   &.is-active
     display: flex

data/app/assets/stylesheets/sass/components/nav.sass

@@ -62,11 +62,15 @@ a.nav-item
 
 .nav-left,
 .nav-right
+  +overflow-touch
   align-items: stretch
   display: flex
-  flex-basis: 0
   flex-grow: 1
   flex-shrink: 0
+  max-width: 100%
+  overflow: auto
+  +widescreen
+    flex-basis: 0
 
 .nav-left
   justify-content: flex-start
@@ -107,10 +111,10 @@ a.nav-item
   align-items: stretch
   background-color: $white
   display: flex
-  min-height: $nav-height
+  height: $nav-height
   position: relative
   text-align: center
-  z-index: 2
+  z-index: 10
   & > .container
     align-items: stretch
     display: flex

data/app/assets/stylesheets/sass/components/pagination.sass

@@ -25,6 +25,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination
   font-size: $size-normal
+  margin: -0.25rem
   // Sizes
   &.is-small
     font-size: $size-small
@@ -50,12 +51,13 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   padding-left: 0.5em
   padding-right: 0.5em
   justify-content: center
+  margin: 0.25rem
   text-align: center
 
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border: 1px solid $pagination-border
+  border-color: $pagination-border
   min-width: 2.25em
   &:hover
     border-color: $pagination-hover-border
@@ -75,6 +77,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-next
   padding-left: 0.75em
   padding-right: 0.75em
+  white-space: nowrap
 
 .pagination-link
   &.is-current
@@ -87,9 +90,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   pointer-events: none
 
 .pagination-list
-  li
-    &:not(:first-child)
-      margin-left: 0.375rem
+  flex-wrap: wrap
 
 +mobile
   .pagination
@@ -98,11 +99,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   .pagination-next
     flex-grow: 1
     flex-shrink: 1
-    width: calc(50% - 0.375rem)
-  .pagination-next
-    margin-left: 0.75rem
   .pagination-list
-    margin-top: 0.75rem
     li
       flex-grow: 1
       flex-shrink: 1
@@ -113,9 +110,6 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     flex-shrink: 1
     justify-content: flex-start
     order: 1
-  .pagination-previous,
-  .pagination-next
-    margin-left: 0.75rem
   .pagination-previous
     order: 2
   .pagination-next
@@ -124,7 +118,6 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
     justify-content: space-between
     &.is-centered
       .pagination-previous
-        margin-left: 0
         order: 1
       .pagination-list
         justify-content: center
@@ -133,11 +126,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
         order: 3
     &.is-right
       .pagination-previous
-        margin-left: 0
         order: 1
       .pagination-next
         order: 2
-        margin-right: 0.75rem
       .pagination-list
         justify-content: flex-end
         order: 3

data/app/assets/stylesheets/sass/components/tabs.sass

@@ -1,5 +1,6 @@
 .tabs
   +block
+  +overflow-touch
   +unselectable
   align-items: stretch
   display: flex

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

@@ -11,6 +11,10 @@ $button-focus-border: $link-focus-border !default
 $button-active: $link-active !default
 $button-active-border: $link-active-border !default
 
+$button-static: $grey !default
+$button-static-background: $white-ter !default
+$button-static-border: $grey-lighter !default
+
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 
 // The button sizes use mixins so they can be used at different breakpoints
@@ -26,7 +30,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   +control
   +unselectable
   background-color: $button-background
-  border: 1px solid $button-border
+  border-color: $button-border
   color: $button
   cursor: pointer
   justify-content: center
@@ -178,6 +182,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       +loader
       +center(1em)
       position: absolute !important
+  &.is-static
+    background-color: $button-static-background
+    border-color: $button-static-border
+    color: $button-static
+    box-shadow: none
+    pointer-events: none
 
 // Adjustment for vertical spacing
 button.button,

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

@@ -22,7 +22,7 @@ $input-radius:              $radius !default
 =input
   +control
   background-color: $input-background
-  border: 1px solid $input-border
+  border-color: $input-border
   color: $input
   &:hover,
   &.is-hovered
@@ -79,17 +79,12 @@ $input-radius:              $radius !default
 
 .checkbox,
 .radio
-  align-items: center
   cursor: pointer
-  display: inline-flex
-  flex-wrap: wrap
-  justify-content: flex-start
-  line-height: 1.5
+  display: inline-block
+  line-height: 1.25
   position: relative
-  vertical-align: top
   input
     cursor: pointer
-    margin-right: 0.5em
   &:hover
     color: $input-hover
   &[disabled]
@@ -103,6 +98,7 @@ $input-radius:              $radius !default
 .select
   display: inline-block
   height: 2.25em
+  max-width: 100%
   position: relative
   vertical-align: top
   &:after
@@ -116,12 +112,15 @@ $input-radius:              $radius !default
     cursor: pointer
     display: block
     font-size: 1em
+    max-width: 100%
     outline: none
     padding-right: 2.5em
     &:hover
       border-color: $input-hover-border
     &::-ms-expand
       display: none
+    &[disabled]:hover
+      border-color: $input-disabled-border
   // States
   &:hover
     &:after
@@ -139,10 +138,21 @@ $input-radius:              $radius !default
   &.is-large
     +control-large
   // Modifiers
+  &.is-disabled
+    &:after
+      border-color: $input-disabled
   &.is-fullwidth
     width: 100%
     select
       width: 100%
+  &.is-loading
+    &:after
+      +loader
+      margin-top: 0
+      position: absolute
+      right: 0.625em
+      top: 0.625em
+      transform: none
 
 .label
   color: $input
@@ -151,6 +161,13 @@ $input-radius:              $radius !default
   font-weight: $weight-bold
   &: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
@@ -161,9 +178,6 @@ $input-radius:              $radius !default
     &.is-#{$name}
       color: $color
 
-.select select
-  line-height: 1
-
 // Containers
 
 .field
@@ -203,7 +217,6 @@ $input-radius:              $radius !default
             z-index: 4
       &.is-expanded
         flex-grow: 1
-        flex-shrink: 0
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -216,7 +229,6 @@ $input-radius:              $radius !default
     display: flex
     justify-content: flex-start
     & > .control
-      flex-basis: 0
       flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
@@ -274,6 +286,7 @@ $input-radius:              $radius !default
   position: relative
   text-align: left
   // Modifiers
+  // DEPRECATED
   &.has-icon
     .icon
       color: $input-icon
@@ -306,6 +319,39 @@ $input-radius:              $radius !default
         right: 0
       .input
         padding-right: 2.25em
+  &.has-icons-left,
+  &.has-icons-right
+    .input,
+    .select select
+      &:focus
+        & ~ .icon
+          color: $input-icon-active
+      &.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
+      height: 2.25em
+      pointer-events: none
+      position: absolute
+      top: 0
+      width: 2.25em
+      z-index: 4
+  &.has-icons-left
+    .input,
+    .select select
+      padding-left: 2.25em
+    .icon.is-left
+      left: 0
+  &.has-icons-right
+    .input,
+    .select select
+      padding-right: 2.25em
+    .icon.is-right
+      right: 0
   &.is-loading
     &:after
       +loader

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

@@ -5,6 +5,10 @@ $table-border:                    $grey-lighter !default
 $table-head:                      $grey !default
 
 $table-row-hover-background:      $white-bis !default
+
+$table-row-active-background:     $primary !default
+$table-row-active:                $primary-invert !default
+
 $table-row-even-background:       $white-bis !default
 $table-row-even-hover-background: $white-ter !default
 
@@ -29,6 +33,16 @@ $table-row-even-hover-background: $white-ter !default
   tr
     &:hover
       background-color: $table-row-hover-background
+    &.is-selected
+      background-color: $table-row-active-background
+      color: $table-row-active
+      a,
+      strong
+        color: currentColor
+      td,
+      th
+        border-color: $table-row-active
+        color: currentColor
   thead
     td,
     th
@@ -61,7 +75,7 @@ $table-row-even-hover-background: $white-ter !default
       padding: 0.25em 0.5em
   &.is-striped
     tbody
-      tr
+      tr:not(.is-selected)
         &:nth-child(even)
           background-color: $table-row-even-background
           &:hover

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

@@ -10,7 +10,6 @@
   line-height: 1.5
   padding-left: 0.875em
   padding-right: 0.875em
-  vertical-align: top
   white-space: nowrap
   .delete
     margin-left: 0.25em

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

@@ -31,7 +31,7 @@ $subtitle-weight:   $weight-light !default
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle
     margin-top: -1.5rem
-  // Colors
+  // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
@@ -46,7 +46,7 @@ $subtitle-weight:   $weight-light !default
     color: $subtitle-strong
   &:not(.is-spaced) + .title
     margin-top: -1.5rem
-  // Colors
+  // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}

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

@@ -1,7 +1,8 @@
 @charset "utf-8"
 
+@import "initial-variables.sass"
 @import "functions.sass"
-@import "variables.sass"
+@import "derived-variables.sass"
 @import "animations.sass"
 @import "mixins.sass"
 @import "controls.sass"

data/app/assets/stylesheets/sass/utilities/controls.sass

@@ -1,11 +1,14 @@
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
+$control-padding-vertical: calc(0.375em - 1px) !default
+$control-padding-horizontal: calc(0.625em - 1px) !default
+
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: none
+  border: 1px solid transparent
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
@@ -13,10 +16,10 @@ $control-radius-small: $radius-small !default
   height: 2.25em
   justify-content: flex-start
   line-height: 1.5
-  padding-bottom: 0.375em
-  padding-left: 0.625em
-  padding-right: 0.625em
-  padding-top: 0.375em
+  padding-bottom: $control-padding-vertical
+  padding-left: $control-padding-horizontal
+  padding-right: $control-padding-horizontal
+  padding-top: $control-padding-vertical
   position: relative
   vertical-align: top
   // States

data/app/assets/stylesheets/sass/utilities/derived-variables.sass

@@ -0,0 +1,80 @@
+$primary: $turquoise !default
+
+$info: $blue !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $blue-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
+$light-invert: $dark !default
+$dark-invert: $light !default
+
+// General colors
+
+$background: $white-ter !default
+
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
+
+// Text colors
+
+$text: $grey-dark !default
+$text-invert: findColorInvert($text) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
+
+// Code colors
+
+$code: $red !default
+$code-background: $background !default
+
+$pre: $text !default
+$pre-background: $background !default
+
+// Link colors
+
+$link: $primary !default
+$link-invert: $primary-invert !default
+$link-visited: $purple !default
+
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
+
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
+
+// Typography
+
+$family-primary: $family-sans-serif !default
+$family-code: $family-monospace !default
+
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
+
+// Lists and maps
+
+$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default

data/app/assets/stylesheets/sass/utilities/initial-variables.sass

@@ -0,0 +1,66 @@
+// Colors
+
+$black:        hsl(0, 0%, 4%) !default
+$black-bis:    hsl(0, 0%, 7%) !default
+$black-ter:    hsl(0, 0%, 14%) !default
+
+$grey-darker:  hsl(0, 0%, 21%) !default
+$grey-dark:    hsl(0, 0%, 29%) !default
+$grey:         hsl(0, 0%, 48%) !default
+$grey-light:   hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter:    hsl(0, 0%, 96%) !default
+$white-bis:    hsl(0, 0%, 98%) !default
+$white:        hsl(0, 0%, 100%) !default
+
+$orange:       hsl(14,  100%, 53%) !default
+$yellow:       hsl(48,  100%, 67%) !default
+$green:        hsl(141, 71%,  48%) !default
+$turquoise:    hsl(171, 100%, 41%) !default
+$blue:         hsl(217, 71%,  53%) !default
+$purple:       hsl(271, 100%, 71%) !default
+$red:          hsl(348, 100%, 61%) !default
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
+
+$size-1: 3rem !default
+$size-2: 2.5rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 1rem !default
+$size-7: 0.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-semibold: 500 !default
+$weight-bold: 700 !default
+
+// Body
+
+$body-background: #fff !default
+$body-size: 16px !default
+
+// Responsiveness
+
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 40px
+$desktop: 1000px !default
+// 1152px container + 40
+$widescreen: 1192px !default
+// 1344px container + 40
+$fullhd: 1384px !default
+
+// Miscellaneous
+
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 3px !default
+$radius-large: 5px !default
+$speed: 86ms !default

data/app/assets/stylesheets/sass/utilities/mixins.sass

@@ -38,8 +38,14 @@
   border-radius: 290486px
   cursor: pointer
   display: inline-block
+  flex-grow: 0
+  flex-shrink: 0
   font-size: $size-normal
   height: 20px
+  max-height: 20px
+  max-width: 20px
+  min-height: 20px
+  min-width: 20px
   outline: none
   position: relative
   vertical-align: top

data/app/assets/stylesheets/sass/utilities/variables.sass

@@ -26,9 +26,9 @@ $purple:       hsl(271, 100%, 71%) !default
 $red:          hsl(348, 100%, 61%) !default
 
 // Typography
-$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: monospace !default
-$render-mode: optimizeLegibility !default
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
 
 $size-1: 3rem !default
 $size-2: 2.5rem !default
@@ -44,12 +44,11 @@ $weight-semibold: 500 !default
 $weight-bold: 700 !default
 
 // Body
-$body-background: $white !default
+$body-background: #fff !default
 $body-size: 16px !default
 
 // Responsiveness
-// 960, 1152, and 1344 have been chosen because
-// they are divisible by both 12 and 16
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 40px
 $desktop: 1000px !default
@@ -146,6 +145,6 @@ $size-large: $size-4 !default
 ////////////////////////////////////////////////
 // 4. Lists and maps
 
-$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
+$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.4.1.pre'
+  gem.version       = '0.4.2'
   gem.date          = Date.today
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.1.pre
+  version: 0.4.2
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-04-12 00:00:00.000000000 Z
+date: 2017-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -72,7 +72,9 @@ files:
 - app/assets/stylesheets/sass/utilities/_all.sass
 - app/assets/stylesheets/sass/utilities/animations.sass
 - app/assets/stylesheets/sass/utilities/controls.sass
+- app/assets/stylesheets/sass/utilities/derived-variables.sass
 - app/assets/stylesheets/sass/utilities/functions.sass
+- app/assets/stylesheets/sass/utilities/initial-variables.sass
 - app/assets/stylesheets/sass/utilities/mixins.sass
 - app/assets/stylesheets/sass/utilities/variables.sass
 - bulma-rails.gemspec
@@ -92,12 +94,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import