sass-zero 1.1.4 → 1.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ad4305b5b3ca3d7faf90c57c9a04e49bcb8e41d30462cd2462e74344595a826
-  data.tar.gz: 0da9bcc60be60b23b01626e6b0cd3eb9f2461a7a1e6191528d22429c6cc8fdd2
+  metadata.gz: 4fe9da1ccaf5fbc04d1681efbe93e41526f727adc32be83ebb1682f8fd4df961
+  data.tar.gz: d7aded8f5516caa5ae57c307f755630d591d4c5f33a85308710d382a9848e376
 SHA512:
-  metadata.gz: f7171112ea81f1b4f2c84a5138a86cd599c73d4204b2df79402cc4efe727ddb6935f03bb0b25a864745d758326e49b6f440fc12088a8f9fd4695b31aa950ecb9
-  data.tar.gz: 64f542e05eaa2c1291d7ab1e859da3312eb767295911312b5a78b0d7c67777e8d7f4f0e2f5ddc24f284609fc21b69ea4abc4a51571be94faa7206602e76213e8
+  metadata.gz: a6ecefd8d3c7ac214b0afe5ef25171a703e704fe8480c3be010ec681cde5003d43c7fe4e7e849ee5650b389307dbb381e7d8e2225f2cbf89f4865aa8c66063a6
+  data.tar.gz: a79e1322722d6bfe2fe3b91b16e24c500f4a00297e42607011f2257250b0e07c55b04abc2851ce443d2b2a6f95862e48300e180ae386553ed222ba6f26ad0b6a

data/.sass-zero-references.scss

@@ -309,8 +309,6 @@ $opacity-90:  0.9;
 $opacity-95:  0.95;
 $opacity-100: 1;
 
-@function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {}
-
 // *******************************************************************
 // filters.scss
 // *******************************************************************
@@ -378,10 +376,10 @@ $sepia:   sepia(100%);
 // flex.scss
 // *******************************************************************
 
-$flex-1:       1 1 0%;
-$flex-auto:    1 1 auto;
-$flex-initial: 0 1 auto;
-$flex-none:    none;
+$flex-1:       1 1 0%;   // Allow grow and shrink, ignoring its initial size.
+$flex-auto:    1 1 auto; // Allow grow and shrink, considering its initial size.
+$flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size.
+$flex-none:    none;     // Prevent grow or shrink.
 
 $flex-grow-0: 0;
 $flex-grow:   1;
@@ -736,3 +734,4 @@ $z-50:   50;
 @mixin outline-none {}
 @mixin progress-bar {}
 @mixin make-container($padding-x: $size-4) {}
+@mixin gradient($direction, $from, $to: transparent, $via: null) {}

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.1.4)
+    sass-zero (1.1.6)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -1,6 +1,6 @@
 # SASS-ZERO
 
-SASS-ZERO is a css framework that mixes concepts from [Tailwindcss](https://tailwindcss.com), [Milligram](https://milligram.io), [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
+SASS-ZERO is a css framework that mixes concepts from [Tailwind CSS](https://tailwindcss.com), [Milligram](https://milligram.io), [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book), and [Shape UP](https://basecamp.com/shapeup).
 
 ## Installation
 
@@ -21,21 +21,25 @@ Add these lines to your application.css:
 
 ### Variables
 
+#### Essential
+
 - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.scss)
-- [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
 - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
 - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
-- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
 - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
 - [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
+- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
 - [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/sizing.scss)
-- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
-- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
 - [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/typography.scss)
 - [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
-- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
-- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
 
+#### Others
+
+- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
+- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
+- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
+- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
+- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
 
 ### Utility classes
 
@@ -43,16 +47,16 @@ Add these lines to your application.css:
 - [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
 - [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/border.scss)
 - [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.scss)
-- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
+- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
+- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
+- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
 - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
+- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
 - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
 - [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pad.scss)
 - [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
-- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
-- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
-- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
 - [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
-- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
+- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
 
 ### Breadboard
 
@@ -95,12 +99,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 
 ### Visual Studio Code
 
-1. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
-2. Just copy `.sass-zero-references.scss` to the root of your application.
+1. Copy `.sass-zero-references.scss` to the root of your application.
+2. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
 
 ### Atom/TextMate
 
-1. Just copy `.sass-zero-references.scss` to the root of your application.
+1. Copy `.sass-zero-references.scss` to the root of your application.
 
 ## Development
 

data/app/assets/stylesheets/sass-zero/mixins.scss

@@ -41,3 +41,11 @@
   margin-right: auto;
   margin-left:  auto;
 }
+
+@mixin gradient($direction, $from, $to: transparent, $via: null) {
+  @if $via {
+    background-image: linear-gradient($direction, $from, $via, $to);
+  } @else {
+    background-image: linear-gradient($direction, $from, $to);
+  }
+}

data/app/assets/stylesheets/sass-zero/utilities/border.scss

@@ -1,21 +1,19 @@
-@import "../variables/border";
-
 .border--top {
-  border-top-width: $border;
+  border-top-width: 1px;
 }
 
 .border--bottom {
-  border-bottom-width: $border;
+  border-bottom-width: 1px;
 }
 
 .border--left {
-  border-left-width: $border !important;
+  border-left-width: 1px !important;
 }
 
 .border--all {
-  border-width: $border !important;
+  border-width: 1px !important;
 }
 
 .border--round {
-  border-radius: $rounded-full !important;
+  border-radius: 9999px !important;
 }

data/app/assets/stylesheets/sass-zero/utilities/layout.scss

@@ -1,5 +1,4 @@
 @import "../variables/breakpoints";
-@import "../variables/effects";
 
 .debug * {
   outline: 1px #f00 solid !important;
@@ -63,7 +62,7 @@
 
 .u-disabled {
   pointer-events: none;
-  opacity: $opacity-50;
+  opacity: 0.5;
 }
 
 .u-off-screen {

data/app/assets/stylesheets/sass-zero/utilities/list.scss

@@ -1,16 +1,13 @@
-@import "../variables/sizing";
-@import "../variables/border";
-
 .list--unindented {
   padding-left: 1.2em;
 }
 
 .list--flush {
-  padding-left: $size-0;
+  padding-left: 0;
 }
 
 .list--unbulleted {
-  padding-left: $size-0;
+  padding-left: 0;
   list-style: none;
 }
 
@@ -20,5 +17,5 @@
 }
 
 .list--dividers li:not(:last-child) {
-  border-bottom-width: $border;
+  border-bottom-width: 1px;
 }

data/app/assets/stylesheets/sass-zero/utilities/pad.scss

@@ -1,5 +1,3 @@
-@import "../variables/sizing";
-
 // *******************************************************************
 // Pad Utilities
 // .pad-[xs|sm|md|lg|xl]--top
@@ -7,6 +5,9 @@
 // .pad-[xs|sm|md|lg|xl]--bottom
 // .pad-[xs|sm|md|lg|xl]--left
 // *******************************************************************
+
+@import "../variables/sizing";
+
 @each $scale, $size in $size-map {
   .pad-#{$scale}--top {
     padding-top: $size !important;

data/app/assets/stylesheets/sass-zero/utilities/pull.scss

@@ -1,5 +1,3 @@
-@import "../variables/sizing";
-
 // *******************************************************************
 // Pull Utilities
 // .pull-[xs|sm|md|lg|xl]--top
@@ -7,6 +5,9 @@
 // .pull-[xs|sm|md|lg|xl]--bottom
 // .pull-[xs|sm|md|lg|xl]--left
 // *******************************************************************
+
+@import "../variables/sizing";
+
 @each $scale, $size in $size-map {
   .pull-#{$scale}--top {
     margin-top: $size * -1 !important;

data/app/assets/stylesheets/sass-zero/utilities/push.scss

@@ -1,5 +1,3 @@
-@import "../variables/sizing";
-
 // *******************************************************************
 // Push Utilities
 // .push-[xs|sm|md|lg|xl]
@@ -10,6 +8,9 @@
 // .push-[xs|sm|md|lg|xl]--ends
 // .push-[xs|sm|md|lg|xl]--sides
 // *******************************************************************
+
+@import "../variables/sizing";
+
 @each $scale, $size in $size-map {
   .push-#{$scale} {
     margin: $size !important;

data/app/assets/stylesheets/sass-zero/utilities/text.scss

@@ -1,5 +1,4 @@
 @import "../variables/typography";
-@import "../variables/sizing";
 @import "../mixins";
 
 .txt--normal {
@@ -48,11 +47,11 @@
 }
 
 .txt--dimmed {
-  opacity: $opacity-75;
+  opacity: 0.75;
 }
 
 .txt--very-dimmed {
-  opacity: $opacity-50;
+  opacity: 0.5;
 }
 
 .txt--tight-lines {

data/app/assets/stylesheets/sass-zero/variables/border.scss

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Border Style
-// Variables for controlling the style of an element's borders.
+// Variables for controlling the border radius of an element.
 // border-radius: $rounded-none;
 // *******************************************************************
 $rounded-none: 0;

data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Breakpoints
-// Customizing the default breakpoints for your project.
+// Five breakpoints inspired by common device resolutions.
 // @media (min-width: $breakpoint-md) {   }
 // *******************************************************************
 $breakpoint-sm:  640px;

data/app/assets/stylesheets/sass-zero/variables/colors.scss

@@ -1,6 +1,8 @@
 // *******************************************************************
 // Default color palette
-// sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
+// Sass-zero includes an expertly-crafted default color palette
+// out-of-the-box that is a great starting point if you don’t
+// have your own specific branding in mind.
 // *******************************************************************
 $transparent: transparent;
 $current: currentColor;

data/app/assets/stylesheets/sass-zero/variables/effects.scss

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Box Shadow
-// Variables for controlling the box shadow of an element.
+// Variables for controlling the color of a box shadow.
 // box-shadow: $shadow;
 // *******************************************************************
 $shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -32,20 +32,3 @@ $opacity-80:  0.8;
 $opacity-90:  0.9;
 $opacity-95:  0.95;
 $opacity-100: 1;
-
-// *******************************************************************
-// Ring
-// Function for creating outline rings with box-shadows.
-// box-shadow: ring($width: 4px);
-// *******************************************************************
-@function ring($width: 2px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
-  @if $inset {
-    $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
-    $ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
-    @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
-  } @else {
-    $ring-offset-shadow: 0 0 0 $offset-width $offset-color;
-    $ring-shadow: 0 0 0 ($width + $offset-width) $color;
-    @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
-  }
-}

data/app/assets/stylesheets/sass-zero/variables/filters.scss

@@ -1,7 +1,7 @@
 // *******************************************************************
 // Blur
 // Variables for applying blur filters to an element.
-// filter: $blur; backdrop-filter: $blur;
+// filter|backdrop-filter: $blur;
 // *******************************************************************
 $blur-none: blur(0);
 $blur-sm:   blur(4px);
@@ -15,7 +15,7 @@ $blur-3xl:  blur(64px);
 // *******************************************************************
 // Brightness
 // Variables for applying brightness filters to an element.
-// filter: $brightness-50; backdrop-filter: $brightness-50;
+// filter|backdrop-filter: $brightness-50;
 // *******************************************************************
 $brightness-0:   brightness(0);
 $brightness-50:  brightness(0.5);
@@ -32,7 +32,7 @@ $brightness-200: brightness(2);
 // *******************************************************************
 // Contrast
 // Variables for applying brightness filters to an element.
-// filter: $contrast-50; backdrop-filter: $contrast-50;
+// filter|backdrop-filter: $contrast-50;
 // *******************************************************************
 $contrast-0:   contrast(0);
 $contrast-50:  contrast(0.5);
@@ -45,7 +45,7 @@ $contrast-200: contrast(2);
 // *******************************************************************
 // Drop Shadow
 // Variables for applying drop-shadow filters to an element.
-// filter: $drop-shadow; backdrop-filter: $drop-shadow;
+// filter|backdrop-filter: $drop-shadow;
 // *******************************************************************
 $drop-shadow-none: drop-shadow(0 0 #0000);
 $drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
@@ -58,7 +58,7 @@ $drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
 // *******************************************************************
 // Grayscale
 // Variables for applying grayscale filters to an element.
-// filter: $grayscale; backdrop-filter: $grayscale;
+// filter|backdrop-filter: $grayscale;
 // *******************************************************************
 $grayscale-0: grayscale(0);
 $grayscale:   grayscale(100%);
@@ -66,7 +66,7 @@ $grayscale:   grayscale(100%);
 // *******************************************************************
 // Hue Rotate
 // Variables for applying hue-rotate filters to an element.
-// filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
+// filter|backdrop-filter: $hue-rotate-30;
 // *******************************************************************
 $hue-rotate-0:   hue-rotate(0deg);
 $hue-rotate-15:  hue-rotate(15deg);
@@ -78,7 +78,7 @@ $hue-rotate-180: hue-rotate(180deg);
 // *******************************************************************
 // Invert
 // Variables for applying invert filters to an element.
-// filter: $invert; backdrop-filter: $invert;
+// filter|backdrop-filter: $invert;
 // *******************************************************************
 $invert-0: invert(0);
 $invert:   invert(100%);
@@ -86,7 +86,7 @@ $invert:   invert(100%);
 // *******************************************************************
 // Saturate
 // Variables for applying saturation filters to an element.
-// filter: $saturate-50; backdrop-filter: $saturate-50;
+// filter|backdrop-filter: $saturate-50;
 // *******************************************************************
 $saturate-0:   saturate(0);
 $saturate-50:  saturate(0.5);
@@ -97,7 +97,7 @@ $saturate-200: saturate(2);
 // *******************************************************************
 // Sepia
 // Variables for applying sepia filters to an element.
-// filter: $sepia; backdrop-filter: $sepia;
+// filter|backdrop-filter: $sepia;
 // *******************************************************************
 $sepia-0: sepia(0);
 $sepia:   sepia(100%);

data/app/assets/stylesheets/sass-zero/variables/flex.scss

@@ -3,10 +3,10 @@
 // Variables for controlling how flex items both grow and shrink.
 // flex: $flex-1;
 // *******************************************************************
-$flex-1:       1 1 0%;
-$flex-auto:    1 1 auto;
-$flex-initial: 0 1 auto;
-$flex-none:    none;
+$flex-1:       1 1 0%;   // Allow grow and shrink, ignoring its initial size.
+$flex-auto:    1 1 auto; // Allow grow and shrink, considering its initial size.
+$flex-initial: 0 1 auto; // Allow shrink but not grow, considering its initial size.
+$flex-none:    none;     // Prevent grow or shrink.
 
 // *******************************************************************
 // Flex Grow

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.1.4"
+    VERSION = "1.1.6"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.1.4
+  version: 1.1.6
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-30 00:00:00.000000000 Z
+date: 2023-07-04 00:00:00.000000000 Z
 dependencies: []
 description:
 email: