bulma-rails 0.8.0 → 0.9.2

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

@@ -0,0 +1,122 @@
+@import "../utilities/mixins"
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+.is-invisible
+  visibility: hidden !important
+
++mobile
+  .is-invisible-mobile
+    visibility: hidden !important
+
++tablet
+  .is-invisible-tablet
+    visibility: hidden !important
+
++tablet-only
+  .is-invisible-tablet-only
+    visibility: hidden !important
+
++touch
+  .is-invisible-touch
+    visibility: hidden !important
+
++desktop
+  .is-invisible-desktop
+    visibility: hidden !important
+
++desktop-only
+  .is-invisible-desktop-only
+    visibility: hidden !important
+
++widescreen
+  .is-invisible-widescreen
+    visibility: hidden !important
+
++widescreen-only
+  .is-invisible-widescreen-only
+    visibility: hidden !important
+
++fullhd
+  .is-invisible-fullhd
+    visibility: hidden !important

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

@@ -1,5 +1,6 @@
+/* Bulma Layout */
 @charset "utf-8"
 
-@import "hero.sass"
-@import "section.sass"
-@import "footer.sass"
+@import "hero"
+@import "section"
+@import "footer"

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

@@ -1,3 +1,5 @@
+@import "../utilities/derived-variables"
+
 $footer-background-color: $scheme-main-bis !default
 $footer-color: false !default
 $footer-padding: 3rem 1.5rem 6rem !default

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

@@ -1,5 +1,13 @@
-// Main container
+@import "../utilities/mixins"
+
+$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
 
+$hero-colors: $colors !default
+
+// Main container
 .hero
   align-items: stretch
   display: flex
@@ -11,7 +19,7 @@
     ul
       border-bottom: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $hero-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -23,7 +31,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 +40,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 +61,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 +69,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
@@ -128,7 +134,7 @@
     display: flex
     justify-content: center
     .button:not(:last-child)
-      margin-right: 1.5rem
+      +ltr-property("margin", 1.5rem)
 
 // Containers
 
@@ -140,4 +146,4 @@
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 3rem 1.5rem
+  padding: $hero-body-padding

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

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $section-padding: 3rem 1.5rem !default
 $section-padding-medium: 9rem 1.5rem !default
 $section-padding-large: 18rem 1.5rem !default

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

@@ -1,8 +1,9 @@
+/* Bulma Utilities */
 @charset "utf-8"
 
-@import "initial-variables.sass"
-@import "functions.sass"
-@import "derived-variables.sass"
-@import "animations.sass"
-@import "mixins.sass"
-@import "controls.sass"
+@import "initial-variables"
+@import "functions"
+@import "derived-variables"
+@import "mixins"
+@import "controls"
+@import "extends"

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

@@ -1,5 +1 @@
-@keyframes spinAround
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)
+@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."

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

@@ -1,3 +1,5 @@
+@import "derived-variables"
+
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
@@ -37,9 +39,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   fieldset[disabled] &
     cursor: not-allowed
 
-%control
-  +control
-
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small

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

@@ -1,3 +1,6 @@
+@import "initial-variables"
+@import "functions"
+
 $primary: $turquoise !default
 
 $info: $cyan !default
@@ -62,7 +65,7 @@ $text-strong: $grey-darker !default
 
 // Code colors
 
-$code: $red !default
+$code: darken($red, 15%) !default
 $code-background: $background !default
 
 $pre: $text !default
@@ -101,6 +104,7 @@ $custom-colors: null !default
 $custom-shades: null !default
 
 $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
+
 $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

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

@@ -0,0 +1,22 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay

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,18 @@
     $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)
+
+@function bulmaLighten($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return lighten($color, $amount)

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

@@ -75,3 +75,4 @@ $speed: 86ms !default
 // Flags
 
 $variable-columns: true !default
+$rtl: false !default

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

@@ -1,4 +1,4 @@
-@import "initial-variables"
+@import "derived-variables"
 
 =clearfix
   &::after
@@ -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
@@ -128,6 +128,30 @@
     @media screen and (min-width: $fullhd)
       @content
 
+=ltr
+  @if not $rtl
+    @content
+
+=rtl
+  @if $rtl
+    @content
+
+=ltr-property($property, $spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$property}-#{$opposite}: $spacing
+  @else
+    #{$property}-#{$normal}: $spacing
+
+=ltr-position($spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$opposite}: $spacing
+  @else
+    #{$normal}: $spacing
+
 // Placeholders
 
 =unselectable
@@ -137,9 +161,6 @@
   -ms-user-select: none
   user-select: none
 
-%unselectable
-  +unselectable
-
 =arrow($color: transparent)
   border: 3px solid $color
   border-radius: 2px
@@ -156,21 +177,15 @@
   transform-origin: center
   width: 0.625em
 
-%arrow
-  +arrow
-
 =block($spacing: $block-spacing)
   &:not(:last-child)
     margin-bottom: $spacing
 
-%block
-  +block
-
 =delete
-  @extend %unselectable
+  +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 +221,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
@@ -232,9 +247,6 @@
     min-width: 32px
     width: 32px
 
-%delete
-  +delete
-
 =loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $grey-lighter
@@ -247,9 +259,6 @@
   position: relative
   width: 1em
 
-%loader
-  +loader
-
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -257,5 +266,3 @@
   right: $offset
   top: $offset
 
-%overlay
-  +overlay

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.9.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.9.2
 platform: ruby
 authors:
 - Joshua Jansen
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2019-11-04 00:00:00.000000000 Z
+date: 2021-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sassc
@@ -35,6 +35,7 @@ files:
 - README.md
 - app/assets/stylesheets/bulma.sass
 - app/assets/stylesheets/sass/base/_all.sass
+- app/assets/stylesheets/sass/base/animations.sass
 - app/assets/stylesheets/sass/base/generic.sass
 - app/assets/stylesheets/sass/base/helpers.sass
 - app/assets/stylesheets/sass/base/minireset.sass
@@ -43,7 +44,6 @@ files:
 - app/assets/stylesheets/sass/components/card.sass
 - app/assets/stylesheets/sass/components/dropdown.sass
 - app/assets/stylesheets/sass/components/level.sass
-- app/assets/stylesheets/sass/components/list.sass
 - app/assets/stylesheets/sass/components/media.sass
 - app/assets/stylesheets/sass/components/menu.sass
 - app/assets/stylesheets/sass/components/message.sass
@@ -76,6 +76,16 @@ files:
 - app/assets/stylesheets/sass/grid/_all.sass
 - app/assets/stylesheets/sass/grid/columns.sass
 - app/assets/stylesheets/sass/grid/tiles.sass
+- app/assets/stylesheets/sass/helpers/_all.sass
+- app/assets/stylesheets/sass/helpers/color.sass
+- app/assets/stylesheets/sass/helpers/flexbox.sass
+- app/assets/stylesheets/sass/helpers/float.sass
+- app/assets/stylesheets/sass/helpers/other.sass
+- app/assets/stylesheets/sass/helpers/overflow.sass
+- app/assets/stylesheets/sass/helpers/position.sass
+- app/assets/stylesheets/sass/helpers/spacing.sass
+- app/assets/stylesheets/sass/helpers/typography.sass
+- app/assets/stylesheets/sass/helpers/visibility.sass
 - app/assets/stylesheets/sass/layout/_all.sass
 - app/assets/stylesheets/sass/layout/footer.sass
 - app/assets/stylesheets/sass/layout/hero.sass
@@ -84,6 +94,7 @@ files:
 - 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/extends.sass
 - app/assets/stylesheets/sass/utilities/functions.sass
 - app/assets/stylesheets/sass/utilities/initial-variables.sass
 - app/assets/stylesheets/sass/utilities/mixins.sass
@@ -93,7 +104,7 @@ homepage: https://github.com/joshuajansen/bulma-rails
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -108,8 +119,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.2.22
+signing_key:
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import
   them in your Rails project.

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

@@ -1,39 +0,0 @@
-$list-background-color: $scheme-main !default
-$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
-$list-radius: $radius !default
-
-$list-item-border: 1px solid $border !default
-$list-item-color: $text !default
-$list-item-active-background-color: $link !default
-$list-item-active-color: $link-invert !default
-$list-item-hover-background-color: $background !default
-
-.list
-  @extend %block
-  background-color: $list-background-color
-  border-radius: $list-radius
-  box-shadow: $list-shadow
-  // &.is-hoverable > .list-item:hover:not(.is-active)
-  //   background-color: $list-item-hover-background-color
-  //   cursor: pointer
-
-.list-item
-  display: block
-  padding: 0.5em 1em
-  &:not(a)
-    color: $list-item-color
-  &:first-child
-    border-top-left-radius: $list-radius
-    border-top-right-radius: $list-radius
-  &:last-child
-    border-bottom-left-radius: $list-radius
-    border-bottom-right-radius: $list-radius
-  &:not(:last-child)
-    border-bottom: $list-item-border
-  &.is-active
-    background-color: $list-item-active-background-color
-    color: $list-item-active-color
-
-a.list-item
-  background-color: $list-item-hover-background-color
-  cursor: pointer