bulma-rails 0.5.1 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 48dad017d7592d692af1c1ee8930beabd11f3705
-  data.tar.gz: c6a979b9db08188e07cdb176a8f7eb4cb471f444
+  metadata.gz: aa0743886a9f181e45610b5065950907987367a8
+  data.tar.gz: 6cfc96a0a5ca644aab42bf43091ace47ce8af40a
 SHA512:
-  metadata.gz: 5aeacefcf06fefc3c240f614d17a37e5358019a62c5a5512ede8571de06e102e998635cebb8c6b82db2179f6cdcae525043d6e865fa723f7f4147858f1a50b13
-  data.tar.gz: f4e4a1dab089774f17c6607e27bd1d263ed0acbeb4d364f8952bb05cee529ba72479c9e8f275fa72b9d7425f2addbb7e60e6364bee299a3971f170d9ebb49cf6
+  metadata.gz: 900e690166a3bd0e4939e9e29543cf2fcc925edb353a40d57ac22e52bd4496aaef5ef547b5aad858632c91d5b1f7aafb7cbc3f05d1f7d993188815f753cbf88c
+  data.tar.gz: 3595bc00b758420a31818909867ec7c02d30d3af50e0ced078308d0b68c98b408f31f4d762cc4f90a461b480bb1a9751b3fba8f277a5b98d2f6e7cd248063217

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.5.1"
+    gem "bulma-rails", "~> 0.5.2"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.5.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.5.2 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"

data/app/assets/stylesheets/sass/base/generic.sass

@@ -1,12 +1,12 @@
 $body-background-color: #fff !default
 $body-size: 16px !default
 $body-rendering: optimizeLegibility !default
-$body-family: $family-sans-serif !default
+$body-family: $family-primary !default
 $body-color: $text !default
 $body-weight: $weight-normal !default
 $body-line-height: 1.5 !default
 
-$code-family: $family-monospace !default
+$code-family: $family-code !default
 $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
@@ -27,6 +27,7 @@ html
   overflow-x: hidden
   overflow-y: scroll
   text-rendering: $body-rendering
+  text-size-adjust: 100%
 
 article,
 aside,

data/app/assets/stylesheets/sass/base/helpers.sass

@@ -21,29 +21,32 @@
 
 // Typography
 
-@each $size in $sizes
-  $i: index($sizes, $size)
-  .is-size-#{$i}
-    font-size: $size !important
-  +mobile
-    .is-size-#{$i}-mobile
-      font-size: $size !important
-  +tablet
-    .is-size-#{$i}-tablet
-      font-size: $size !important
-  +touch
-    .is-size-#{$i}-touch
-      font-size: $size !important
-  +desktop
-    .is-size-#{$i}-desktop
-      font-size: $size !important
-  +widescreen
-    .is-size-#{$i}-widescreen
-      font-size: $size !important
-  +fullhd
-    .is-size-#{$i}-fullhd
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
       font-size: $size !important
 
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
 $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
 
 @each $alignment, $text-align in $alignments
@@ -99,6 +102,15 @@ $alignments: ('centered': 'center', 'left': 'left', 'right': 'right')
   .has-text-#{$name}
     color: $shade !important
 
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
 // Visibility
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

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

@@ -48,11 +48,13 @@
   flex-grow: 0
   flex-shrink: 0
   .level-item
-    &:not(:last-child)
-      margin-right: 0.75rem
     // Modifiers
     &.is-flexible
       flex-grow: 1
+    // Responsiveness
+    +tablet
+      &:not(:last-child)
+        margin-right: 0.75rem
 
 .level-left
   align-items: center

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

@@ -37,6 +37,49 @@ $navbar-divider-background-color: $border !default
   background-color: $navbar-background-color
   min-height: $navbar-height
   position: relative
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      .navbar-brand
+        & > .navbar-item,
+        .navbar-link
+          color: $color-invert
+        & > a.navbar-item,
+        .navbar-link
+          &:hover,
+          &.is-active
+            background-color: darken($color, 5%)
+            color: $color-invert
+        .navbar-link
+          &::after
+            border-color: $color-invert
+      +desktop
+        .navbar-start,
+        .navbar-end
+          & > .navbar-item,
+          .navbar-link
+            color: $color-invert
+          & > a.navbar-item,
+          .navbar-link
+            &:hover,
+            &.is-active
+              background-color: darken($color, 5%)
+              color: $color-invert
+          .navbar-link
+            &::after
+              border-color: $color-invert
+        .navbar-item.has-dropdown:hover .navbar-link,
+        .navbar-item.has-dropdown.is-active .navbar-link
+          background-color: darken($color, 5%)
+          color: $color-invert
+        .navbar-dropdown
+          a.navbar-item
+            &.is-active
+              background-color: $color
+              color: $color-invert
   & > .container
     align-items: stretch
     display: flex
@@ -45,13 +88,16 @@ $navbar-divider-background-color: $border !default
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
 
-.navbar-brand
-  +overflow-touch
+.navbar-brand,
+.navbar-tabs
   align-items: stretch
   display: flex
   flex-shrink: 0
-  max-width: 100vw
   min-height: $navbar-height
+
+.navbar-tabs
+  +overflow-touch
+  max-width: 100vw
   overflow-x: auto
   overflow-y: hidden
 
@@ -124,11 +170,13 @@ a.navbar-item,
 +touch
   .navbar > .container
     display: block
-  .navbar-brand
+  .navbar-brand,
+  .navbar-tabs
     .navbar-item
       align-items: center
       display: flex
   .navbar-menu
+    background-color: $white
     box-shadow: 0 8px 16px rgba($black, 0.1)
     padding: 0.5rem 0
     &.is-active
@@ -235,8 +283,10 @@ a.navbar-item,
   .navbar-divider
     display: block
   .container > .navbar
-    margin-left: -1rem
-    margin-right: -1rem
+    .navbar-brand
+      margin-left: -1rem
+    .navbar-menu
+      margin-right: -1rem
   // Hover/Active states
   a.navbar-item,
   .navbar-link

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

@@ -7,6 +7,8 @@ $button-hover-border-color: $link-hover-border !default
 
 $button-focus-color: $link-focus !default
 $button-focus-border-color: $link-focus-border !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: rgba($link, 0.25) !default
 
 $button-active-color: $link-active !default
 $button-active-border-color: $link-active-border !default
@@ -24,8 +26,6 @@ $button-static-color: $grey !default
 $button-static-background-color: $white-ter !default
 $button-static-border-color: $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
 =button-small
   border-radius: $radius-small
@@ -73,12 +73,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   &:focus,
   &.is-focused
     border-color: $button-focus-border-color
-    // box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
     color: $button-focus-color
+    &:not(:active)
+      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
   &:active,
   &.is-active
     border-color: $button-active-border-color
-    box-shadow: $button-shadow-inset
     color: $button-active-color
   // Colors
   &.is-link
@@ -89,10 +89,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &:hover,
     &.is-hovered,
     &:focus,
-    &.is-focused,
+    &.is-focused
+      background-color: $button-link-hover-background-color
+      color: $button-link-hover-color
     &:active,
     &.is-active
-      background-color: $button-link-hover-background-color
+      background-color: darken($button-link-hover-background-color, 5%)
       color: $button-link-hover-color
     &[disabled]
       background-color: transparent
@@ -113,13 +115,13 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       &:focus,
       &.is-focused
         border-color: transparent
-        box-shadow: 0 0 0.5em rgba($color, 0.25)
         color: $color-invert
+        &:not(:active)
+          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
       &:active,
       &.is-active
         background-color: darken($color, 5%)
         border-color: transparent
-        box-shadow: $button-shadow-inset
         color: $color-invert
       &[disabled]
         background-color: $color

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

@@ -1,9 +1,7 @@
-$container-offset: 60px !default
-
 .container
   margin: 0 auto
   position: relative
-  +from($desktop + $container-offset)
+  +from($desktop)
     max-width: $desktop - (2 * $gap)
     width: $desktop - (2 * $gap)
     &.is-fluid
@@ -11,17 +9,17 @@ $container-offset: 60px !default
       margin-right: $gap
       max-width: none
       width: auto
-  +until($widescreen + $container-offset)
+  +until($widescreen)
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)
       width: auto
-  +until($fullhd + $container-offset)
+  +until($fullhd)
     &.is-fullhd
       max-width: $fullhd - (2 * $gap)
       width: auto
-  +from($widescreen + $container-offset)
+  +from($widescreen)
     max-width: $widescreen - (2 * $gap)
     width: $widescreen - (2 * $gap)
-  +from($fullhd + $container-offset)
+  +from($fullhd)
     max-width: $fullhd - (2 * $gap)
     width: $fullhd - (2 * $gap)

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

@@ -86,8 +86,13 @@ $content-table-foot-cell-color: $text-strong !default
   dd
     margin-left: 2em
   figure
-    margin: 2em
+    margin-left: 2em
+    margin-right: 2em
     text-align: center
+    &:not(:first-child)
+      margin-top: 2em
+    &:not(:last-child)
+      margin-bottom: 2em
     img
       display: inline-block
     figcaption

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

@@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
 
 $input-focus-color: $grey-darker !default
 $input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
 
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
@@ -51,6 +53,7 @@ $help-size: $size-small !default
   &:active,
   &.is-active
     border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
   &[disabled]
     background-color: $input-disabled-background-color
     border-color: $input-disabled-border-color
@@ -72,6 +75,11 @@ $help-size: $size-small !default
     $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
@@ -98,6 +106,9 @@ $help-size: $size-small !default
     min-height: 120px
   &[rows]
     height: unset
+  // Modifiers
+  &.has-fixed-size
+    resize: none
 
 .checkbox,
 .radio
@@ -137,13 +148,6 @@ $help-size: $size-small !default
     font-size: 1em
     max-width: 100%
     outline: none
-    &:hover
-      border-color: $input-hover-border-color
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active
-      border-color: $input-focus-border-color
     &::-ms-expand
       display: none
     &[disabled]:hover
@@ -164,6 +168,11 @@ $help-size: $size-small !default
     $color: nth($pair, 1)
     &.is-#{$name} select
       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

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

@@ -9,21 +9,13 @@ $icon-dimensions-large: 3rem !default
   justify-content: center
   height: $icon-dimensions
   width: $icon-dimensions
-  .fa
-    font-size: 21px
   // Sizes
   &.is-small
     height: $icon-dimensions-small
     width: $icon-dimensions-small
-    .fa
-      font-size: 14px
   &.is-medium
     height: $icon-dimensions-medium
     width: $icon-dimensions-medium
-    .fa
-      font-size: 28px
   &.is-large
     height: $icon-dimensions-large
     width: $icon-dimensions-large
-    .fa
-      font-size: 42px

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

@@ -4,11 +4,6 @@
 .delete
   +delete
 
-.fa
-  font-size: 21px
-  text-align: center
-  vertical-align: top
-
 .heading
   display: block
   font-size: 11px

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

@@ -1,6 +1,7 @@
 $tag-background-color: $background !default
 $tag-color: $text !default
 $tag-radius: $radius !default
+$tag-delete-margin: 1px !default
 
 .tags
   align-items: center
@@ -25,7 +26,7 @@ $tag-radius: $radius !default
         border-bottom-right-radius: 0
         border-top-right-radius: 0
 
-.tag
+.tag:not(body)
   align-items: center
   background-color: $tag-background-color
   border-radius: $tag-radius
@@ -55,7 +56,7 @@ $tag-radius: $radius !default
     font-size: $size-medium
   // Modifiers
   &.is-delete
-    margin-left: 1px
+    margin-left: $tag-delete-margin
     padding: 0
     position: relative
     width: 2em

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

@@ -1,9 +1,11 @@
+$column-gap: 0.75rem !default
+
 .column
   display: block
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding: 0.75rem
+  padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
@@ -278,13 +280,13 @@
         margin-left: ($i / 12) * 100%
 
 .columns
-  margin-left: -0.75rem
-  margin-right: -0.75rem
-  margin-top: -0.75rem
+  margin-left: (-$column-gap)
+  margin-right: (-$column-gap)
+  margin-top: (-$column-gap)
   &:last-child
-    margin-bottom: -0.75rem
+    margin-bottom: (-$column-gap)
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: calc(1.5rem - #{$column-gap})
   // Modifiers
   &.is-centered
     justify-content: center
@@ -292,23 +294,13 @@
     margin-left: 0
     margin-right: 0
     margin-top: 0
-    &:last-child
-      margin-bottom: 0
-    &:not(:last-child)
-      margin-bottom: 1.5rem
     & > .column
       margin: 0
-      padding: 0
-  &.is-grid
-    // Responsiveness
-    +tablet
-      flex-wrap: wrap
-      & > .column
-        max-width: 33.3333%
-        padding: 0.75rem
-        width: 33.3333%
-        & + .column
-          margin-left: 0
+      padding: 0 !important
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+    &:last-child
+      margin-bottom: 0
   &.is-mobile
     display: flex
   &.is-multiline
@@ -323,3 +315,14 @@
     // Modifiers
     &.is-desktop
       display: flex
+
+.columns.is-variable
+  --columnGap: 0.75rem
+  margin-left: calc(-1 * var(--columnGap))
+  margin-right: calc(-1 * var(--columnGap))
+  .column
+    padding-left: var(--columnGap)
+    padding-right: var(--columnGap)
+  @for $i from 0 through 8
+    &.is-#{$i}
+      --columnGap: $i * 0.25rem

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -82,6 +82,10 @@
           .nav-item
             border-top-color: rgba($color-invert, 0.2)
   // Sizes
+  &.is-small
+    .hero-body
+      padding-bottom: 1.5rem
+      padding-top: 1.5rem
   &.is-medium
     +tablet
       .hero-body

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

@@ -44,8 +44,8 @@ $weight-bold: 700 !default
 
 // Responsiveness
 
-// The container gap, which acts as the offset for breakpoints
-$gap: 24px !default
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 3rem

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

@@ -110,7 +110,7 @@
   position: relative
   width: $dimensions
   span
-    background-color: $text
+    background-color: currentColor
     display: block
     height: 1px
     left: 50%
@@ -127,11 +127,10 @@
     &:nth-child(3)
       margin-top: 4px
   &:hover
-    background-color: $background
+    background-color: rgba(black, 0.05)
   // Modifers
   &.is-active
     span
-      background-color: $link
       &:nth-child(1)
         margin-left: -5px
         transform: rotate(45deg)

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.5.1'
+  gem.version       = '0.5.2'
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.2
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-18 00:00:00.000000000 Z
+date: 2017-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass