bulma-sass 0.8.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7607e4ea8a28663644f2f83709604e508fff528fac2c9b7aaf222300cef98dba
-  data.tar.gz: 2b27ba139610a582a10c6d4eadd8e56edd1dcba551a5f4a82cba3ccc89c50395
+  metadata.gz: d64e33e0e5f616611a2e9f2ee78e7ebff89e863ffa5b5823bf3ee0b8025517b4
+  data.tar.gz: cd29b8eaf8a834aed0bbd1059b4fe400ad1c8e0a13cf3ee51ee47c9394c542e7
 SHA512:
-  metadata.gz: c91065d2e679c8d444a86cf92b9268ff2235d7e24e58e28794ef738e90f75b44b3fca3f150073e6fd9e49afe9ac7210c9dba879e17ff8877f5fcf500b533a379
-  data.tar.gz: 2ecaddb676cd589f889c451e912096a75d03e7383460372214af3aa020cb4bdca0a6f17939d966b788001532992e9fd2bdf293c548da38e7ea01d7f840d26df6
+  metadata.gz: 36118f0a66d7f8acbb98671b01d8610179ec1bb9c8404e693cbb1961fec55ac54f18ad6c2a622bd6d2750dee31525a8e2e7608633e0f9e7e6fde71bad16eb3aa
+  data.tar.gz: 41774b9eb395fccca2ed7b0b3d4f33e63915d6ef20ce876ee1eae66f2036faf47d3d0a6b2fb830a2595e3498579799bfce6926602c88efcdf78b336f1019fcc4

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.1 | 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,
@@ -331,7 +330,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 +357,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 +408,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/components/panel.sass

@@ -26,6 +26,7 @@ $panel-block-active-color: $link-active !default
 $panel-block-active-icon-color: $link !default
 
 $panel-icon-color: $text-light !default
+$panel-colors: $colors !default
 
 .panel
   border-radius: $panel-radius
@@ -34,7 +35,7 @@ $panel-icon-color: $text-light !default
   &:not(:last-child)
     margin-bottom: $panel-margin
   // Colors
-  @each $name, $components in $message-colors
+  @each $name, $components in $panel-colors
     $color: nth($components, 1)
     $color-invert: nth($components, 2)
     &.is-#{$name}

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

@@ -1,9 +1,9 @@
-$input-color: $text-strong !default
+$input-color: inherit !default
 $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/lib/bulma/sass/version.rb

@@ -1,5 +1,5 @@
 module Bulma
   module Sass
-	  VERSION = "0.8.0"
+	  VERSION = "0.8.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bulma-sass
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.8.1
 platform: ruby
 authors:
 - bananaappletw