bulma-rails 0.8.0 → 0.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc4426115a7001ee1b6b870535ba81ce465969a56c623951e95eb8ffd2a6984e
-  data.tar.gz: dc03ed54bfb0078a801906a4f84f685727a87a28c1c8016020cce4e7473b9a6b
+  metadata.gz: f556ecc1be1a37dce2aa5761a72c40ede9d3e004137015ccc9956af54cb7ca75
+  data.tar.gz: 9cc6eb1fdc51ddd8118ee9c177532029025ca585fa3eb90e02e2811927297f34
 SHA512:
-  metadata.gz: e6d500ad28ced49cde648967b681219c8a731dbc20d099d06fdefe41dad44434278c3fb7e2c92e7e92386e94eb5cf4f03da06e34102581fd64ccdef0fcc8d483
-  data.tar.gz: cddec987c0d603bda62e35110f2c713e8be29c8296e0d3f50a907b20a3f5a1c482fa7cfdfede09fe11cf129c3e1fb5ced7ad46039ed0c1a3ed44e5de6d42977e
+  metadata.gz: ddd75b27c093dd61e61954e119e8c674302d06fba8b5d69c2e478c4785a9e6ef9b68b7acd985ae48c41beb98e4e251249728a5c6350b28b00917e71dc96619ca
+  data.tar.gz: e96bac4158e21504ceed8095ce5a6d7b6029c61a55a85ca2af1ed60937d449a307bf72e7ef7801add14e7586847a04924453f16ff713e1c55a2642f32b592903

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

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.8.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/helpers.sass

@@ -101,7 +101,7 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
   a.has-text-#{$name}
     &:hover,
     &:focus
-      color: darken($color, 10%) !important
+      color: bulmaDarken($color, 10%) !important
   .has-background-#{$name}
     background-color: $color !important
 

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

@@ -1,4 +1,4 @@
-$media-border-color: rgba($border, 0.5) !default
+$media-border-color: bulmaRgba($border, 0.5) !default
 
 .media
   align-items: flex-start

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

@@ -1,6 +1,6 @@
 $modal-z: 40 !default
 
-$modal-background-background-color: rgba($scheme-invert, 0.86) !default
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default

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

@@ -32,7 +32,7 @@ $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
 
 $navbar-dropdown-item-hover-color: $scheme-invert !default
 $navbar-dropdown-item-hover-background-color: $background !default
@@ -72,7 +72,7 @@ $navbar-breakpoint: $desktop !default
           &:focus,
           &:hover,
           &.is-active
-            background-color: darken($color, 5%)
+            background-color: bulmaDarken($color, 5%)
             color: $color-invert
         .navbar-link
           &::after
@@ -90,7 +90,7 @@ $navbar-breakpoint: $desktop !default
             &:focus,
             &:hover,
             &.is-active
-              background-color: darken($color, 5%)
+              background-color: bulmaDarken($color, 5%)
               color: $color-invert
           .navbar-link
             &::after
@@ -98,7 +98,7 @@ $navbar-breakpoint: $desktop !default
         .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
         .navbar-dropdown
           a.navbar-item
@@ -179,7 +179,6 @@ a.navbar-item,
     color: $navbar-item-hover-color
 
 .navbar-item
-  display: block
   flex-grow: 0
   flex-shrink: 0
   img
@@ -245,7 +244,7 @@ a.navbar-item,
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -257,7 +256,7 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -320,7 +319,6 @@ a.navbar-item,
     align-items: center
     display: flex
   .navbar-item
-    display: flex
     &.has-dropdown
       align-items: stretch
     &.has-dropdown-up
@@ -331,7 +329,7 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -358,7 +356,7 @@ a.navbar-item,
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
     left: 0
@@ -409,7 +407,7 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,

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

@@ -14,12 +14,13 @@ $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-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
 $button-active-color: $link-active !default
 $button-active-border-color: $link-active-border !default
 
 $button-text-color: $text !default
+$button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
@@ -98,7 +99,7 @@ $button-static-border-color: $border !default
     background-color: transparent
     border-color: transparent
     color: $button-text-color
-    text-decoration: underline
+    text-decoration: $button-text-decoration
     &:hover,
     &.is-hovered,
     &:focus,
@@ -107,7 +108,7 @@ $button-static-border-color: $border !default
       color: $button-text-hover-color
     &:active,
     &.is-active
-      background-color: darken($button-text-hover-background-color, 5%)
+      background-color: bulmaDarken($button-text-hover-background-color, 5%)
       color: $button-text-hover-color
     &[disabled],
     fieldset[disabled] &
@@ -123,7 +124,7 @@ $button-static-border-color: $border !default
       color: $color-invert
       &:hover,
       &.is-hovered
-        background-color: darken($color, 2.5%)
+        background-color: bulmaDarken($color, 2.5%)
         border-color: transparent
         color: $color-invert
       &:focus,
@@ -131,10 +132,10 @@ $button-static-border-color: $border !default
         border-color: transparent
         color: $color-invert
         &:not(:active)
-          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
       &:active,
       &.is-active
-        background-color: darken($color, 5%)
+        background-color: bulmaDarken($color, 5%)
         border-color: transparent
         color: $color-invert
       &[disabled],
@@ -147,7 +148,7 @@ $button-static-border-color: $border !default
         color: $color
         &:hover,
         &.is-hovered
-          background-color: darken($color-invert, 5%)
+          background-color: bulmaDarken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
           background-color: $color-invert
@@ -215,12 +216,12 @@ $button-static-border-color: $border !default
           color: $color-dark
           &:hover,
           &.is-hovered
-            background-color: darken($color-light, 2.5%)
+            background-color: bulmaDarken($color-light, 2.5%)
             border-color: transparent
             color: $color-dark
           &:active,
           &.is-active
-            background-color: darken($color-light, 5%)
+            background-color: bulmaDarken($color-light, 5%)
             border-color: transparent
             color: $color-dark
   // Sizes

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

@@ -34,3 +34,10 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     &.is-#{$name}
       background-color: $color
       color: $color-invert
+      // If light and dark colors are provided
+      @if length($pair) >= 4
+        $color-light: nth($pair, 3)
+        $color-dark: nth($pair, 4)
+        &.is-light
+          background-color: $color-light
+          color: $color-dark

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

@@ -29,19 +29,19 @@ $file-name-max-width: 16em !default
       &:hover,
       &.is-hovered
         .file-cta
-          background-color: darken($color, 2.5%)
+          background-color: bulmaDarken($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)
+          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
           color: $color-invert
       &:active,
       &.is-active
         .file-cta
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           border-color: transparent
           color: $color-invert
   // Sizes
@@ -125,16 +125,16 @@ $file-name-max-width: 16em !default
   position: relative
   &:hover
     .file-cta
-      background-color: darken($file-cta-background-color, 2.5%)
+      background-color: bulmaDarken($file-cta-background-color, 2.5%)
       color: $file-cta-hover-color
     .file-name
-      border-color: darken($file-name-border-color, 2.5%)
+      border-color: bulmaDarken($file-name-border-color, 2.5%)
   &:active
     .file-cta
-      background-color: darken($file-cta-background-color, 5%)
+      background-color: bulmaDarken($file-cta-background-color, 5%)
       color: $file-cta-active-color
     .file-name
-      border-color: darken($file-name-border-color, 5%)
+      border-color: bulmaDarken($file-name-border-color, 5%)
 
 .file-input
   height: 100%

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

@@ -18,7 +18,7 @@ $textarea-min-height: 8em !default
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small

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

@@ -48,12 +48,12 @@
         border-color: $color
         &:hover,
         &.is-hovered
-          border-color: darken($color, 5%)
+          border-color: bulmaDarken($color, 5%)
         &:focus,
         &.is-focused,
         &:active,
         &.is-active
-          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small

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

@@ -3,7 +3,7 @@ $input-background-color: $scheme-main !default
 $input-border-color: $border !default
 $input-height: $control-height !default
 $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: rgba($input-color, 0.3) !default
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
 
 $input-hover-color: $text-strong !default
 $input-hover-border-color: $border-hover !default
@@ -11,12 +11,12 @@ $input-hover-border-color: $border-hover !default
 $input-focus-color: $text-strong !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-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
 $input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
 
 $input-arrow: $link !default
 

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

@@ -1,5 +1,9 @@
-// Main container
+$hero-body-padding: 3rem 1.5rem !default
+$hero-body-padding-small: 1.5rem !default
+$hero-body-padding-medium: 9rem 1.5rem !default
+$hero-body-padding-large: 18rem 1.5rem !default
 
+// Main container
 .hero
   align-items: stretch
   display: flex
@@ -23,7 +27,7 @@
       .title
         color: $color-invert
       .subtitle
-        color: rgba($color-invert, 0.9)
+        color: bulmaRgba($color-invert, 0.9)
         a:not(.button),
         strong
           color: $color-invert
@@ -32,12 +36,12 @@
           background-color: $color
       .navbar-item,
       .navbar-link
-        color: rgba($color-invert, 0.7)
+        color: bulmaRgba($color-invert, 0.7)
       a.navbar-item,
       .navbar-link
         &:hover,
         &.is-active
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
       .tabs
         a
@@ -53,7 +57,7 @@
           a
             color: $color-invert
             &:hover
-              background-color: rgba($scheme-invert, 0.1)
+              background-color: bulmaRgba($scheme-invert, 0.1)
           li.is-active a
             &,
             &:hover
@@ -61,28 +65,26 @@
               border-color: $color-invert
               color: $color
       // Modifiers
-      &.is-bold
-        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
-        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
-        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-        +mobile
-          .navbar-menu
-            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+      @if type-of($color) == 'color'
+        &.is-bold
+          $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+          $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+          background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+          +mobile
+            .navbar-menu
+              background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
   // Sizes
   &.is-small
     .hero-body
-      padding-bottom: 1.5rem
-      padding-top: 1.5rem
+      padding: $hero-body-padding-small
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 9rem
-        padding-top: 9rem
+        padding: $hero-body-padding-medium
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 18rem
-        padding-top: 18rem
+        padding: $hero-body-padding-large
   &.is-halfheight,
   &.is-fullheight,
   &.is-fullheight-with-navbar
@@ -140,4 +142,4 @@
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 3rem 1.5rem
+  padding: $hero-body-padding

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

@@ -62,6 +62,8 @@
   @return $value
 
 @function colorLuminance($color)
+  @if type-of($color) != 'color'
+    @return 0.55
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
@@ -96,3 +98,13 @@
     $target-l: round($base-l + ($luminance-delta * 53))
     @return change-color($color, $lightness: max($base-l, $target-l))
   @return $text-strong
+
+@function bulmaRgba($color, $alpha)
+  @if type-of($color) != 'color'
+    @return $color
+  @return rgba($color, $alpha)
+
+@function bulmaDarken($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return darken($color, $amount)

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

@@ -48,7 +48,7 @@
     &:nth-child(3)
       top: calc(50% + 4px)
   &:hover
-    background-color: rgba(black, 0.05)
+    background-color: bulmaRgba(black, 0.05)
   // Modifers
   &.is-active
     span
@@ -170,7 +170,7 @@
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: rgba($scheme-invert, 0.2)
+  background-color: bulmaRgba($scheme-invert, 0.2)
   border: none
   border-radius: $radius-rounded
   cursor: pointer
@@ -206,9 +206,9 @@
     width: 2px
   &:hover,
   &:focus
-    background-color: rgba($scheme-invert, 0.3)
+    background-color: bulmaRgba($scheme-invert, 0.3)
   &:active
-    background-color: rgba($scheme-invert, 0.4)
+    background-color: bulmaRgba($scheme-invert, 0.4)
   // Sizes
   &.is-small
     height: 16px

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.8.0'
+  gem.version       = '0.8.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.8.0
+  version: 0.8.2
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-04 00:00:00.000000000 Z
+date: 2020-05-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -108,7 +108,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import