Add multiple Sass tests

jgthms · Mar 16, 2020 · f75ae3d · f75ae3d
1 parent 4b2bc00
commit f75ae3d
Show file tree

Hide file tree

Showing 17 changed files with 18,757 additions and 71 deletions.
diff --git a/sass/base/helpers.sass b/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
 

diff --git a/sass/components/navbar.sass b/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,15 +90,15 @@ $navbar-breakpoint: $desktop !default
             &:focus,
             &:hover,
             &.is-active
-              background-color: darken($color, 5%)
+              background-color: bulmaDarken($color, 5%)
               color: $color-invert
           .navbar-link
             &::after
               border-color: $color-invert
         .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
@@ -245,7 +245,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 +257,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 +331,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 +358,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 +409,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,

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
@@ -108,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] &
@@ -124,18 +124,18 @@ $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,
       &.is-focused
         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],
@@ -148,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
@@ -216,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

diff --git a/sass/form/file.sass b/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%

diff --git a/sass/form/input-textarea.sass b/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

diff --git a/sass/form/select.sass b/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

diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
@@ -41,7 +41,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
       .navbar-link
         &:hover,
         &.is-active
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
       .tabs
         a
@@ -65,13 +65,14 @@ $hero-body-padding-large: 18rem 1.5rem !default
               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

diff --git a/sass/utilities/functions.sass b/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
@@ -98,6 +100,11 @@
   @return $text-strong
 
 @function bulmaRgba($color, $alpha)
-  @if type-of($color) == 'color'
-    @return rgba($color, $alpha)
-  @return $color
+  @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)