sass-zero 1.1.5 → 1.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a3cf509aa64335b05e9a666f6c4cc3a6909c795541776e4be028add9358af573
-  data.tar.gz: a7e0ac1594a6b248903358290390a48f4398c80ba8e0b9fb8985a9cf2c45db12
+  metadata.gz: 114ed05332fe9df3860360aadec6045faaa8e260fe8f67e0c013683929577b01
+  data.tar.gz: 72b2ab1ad8d57e93762ff9e314c0fb3139dcbd7d2fcab8e206a8c48628eea8b4
 SHA512:
-  metadata.gz: b9fe32c3665d34d8682f58629850273501077bc08b8aa2c1f5037359291d5f9a80a64ab799afb15044912f7acb353bd65c5c94fde2d2969b55edcb6d6006e52a
-  data.tar.gz: f022e6d018d963b7e7352c7bc57a61960845b5af3f28965c1b2799d2261ce830e0dc25fc11ab3c39b8ffdb9bb713c080a250765c73f42781770f88c29dd683e9
+  metadata.gz: c1472582db52dba68bf6bde60c1cbe2146ada491d39d83271a3a24f8005e2a60b52e75d01a3bcd9066f89a13b40df228bf95219546173783e5cc1da5f6d96b89
+  data.tar.gz: bfd43f33caa510c7a675acb957c215dc74e3e95339f2da0a4937886bc5296004ae626bed236d428a6c007b5e32b3b0ad21879930b2e49da4a3a39065a16a18d1

data/.sass-zero-references.scss

@@ -1,5 +1,5 @@
 // *******************************************************************
-// borders.scss
+// Borders
 // *******************************************************************
 
 $rounded-none: 0;
@@ -19,7 +19,7 @@ $border-4: 4px;
 $border-8: 8px;
 
 // *******************************************************************
-// breakpoints.scss
+// Breakpoints
 // *******************************************************************
 
 $breakpoint-sm:  640px;
@@ -29,7 +29,7 @@ $breakpoint-xl:  1280px;
 $breakpoint-2xl: 1536px;
 
 // *******************************************************************
-// colors.scss
+// Colors
 // *******************************************************************
 
 $transparent: transparent;
@@ -281,7 +281,7 @@ $blue-gray-800: #1e293b;
 $blue-gray-900: #0f172a;
 
 // *******************************************************************
-// effects.scss
+// Effects
 // *******************************************************************
 
 $shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -309,10 +309,8 @@ $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
+// Filters
 // *******************************************************************
 
 $blur-none: blur(0);
@@ -375,13 +373,13 @@ $sepia-0: sepia(0);
 $sepia:   sepia(100%);
 
 // *******************************************************************
-// flex.scss
+// Flex
 // *******************************************************************
 
-$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;
@@ -390,7 +388,7 @@ $flex-shrink-0: 0;
 $flex-shrink:   1;
 
 // *******************************************************************
-// grid.scss
+// Grid
 // *******************************************************************
 
 $grid-cols-1:    repeat(1, minmax(0, 1fr));
@@ -450,7 +448,7 @@ $auto-rows-max:  max-content;
 $auto-rows-fr:   minmax(0, 1fr);
 
 // *******************************************************************
-// height.scss
+// Height
 // *******************************************************************
 
 $h-auto:   auto;
@@ -489,7 +487,7 @@ $max-h-max:    max-content;
 $max-h-fit:    fit-content;
 
 // *******************************************************************
-// sizing.scss
+// Sizing
 // *******************************************************************
 
 $size-px: 1px;
@@ -525,7 +523,7 @@ $size-80: 20rem;
 $size-96: 24rem;
 
 // *******************************************************************
-// transform.scss
+// Transform
 // *******************************************************************
 
 $scale-0:   0;
@@ -565,7 +563,7 @@ $skew-6:  6deg;
 $skew-12: 12deg;
 
 // *******************************************************************
-// transition.scss
+// Transition
 // *******************************************************************
 
 $transition-none:      none;
@@ -600,7 +598,7 @@ $ease-out:    cubic-bezier(0, 0, 0.2, 1);
 $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
 // *******************************************************************
-// typography.scss
+// Typography
 // *******************************************************************
 
 $font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -654,7 +652,7 @@ $tracking-wider:   0.05em;
 $tracking-widest:  0.1em;
 
 // *******************************************************************
-// width.scss
+// Width
 // *******************************************************************
 
 $w-auto:   auto;
@@ -715,7 +713,7 @@ $max-w-max:  max-content;
 $max-w-fit:  fit-content;
 
 // *******************************************************************
-// zindex.scss
+// Zindex
 // *******************************************************************
 
 $z-auto: auto;
@@ -727,7 +725,7 @@ $z-40:   40;
 $z-50:   50;
 
 // *******************************************************************
-// mixins.scss
+// Mixins
 // *******************************************************************
 
 @mixin antialiased {}
@@ -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.5)
+    sass-zero (1.1.7)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -21,73 +21,80 @@ Add these lines to your application.css:
 
 ### Variables
 
-- [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)
-- [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)
-
+#### Essential
+
+- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.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)
+- [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)
+- [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)
+
+#### 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)
+- [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
 
 ### Utility classes
 
-- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/align.scss)
-- [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)
-- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.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)
-
-### Breadboard
-
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
+- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
+- [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)
+- [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)
+- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
+- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
 
 ## Breadboard
 
 This is an optional black-and-white theme that you can use as design foundation.
 
-![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
+- [Screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
 
 ## Using variables
 
-Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
+Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/_variables.scss):
 
 ```scss
 @import "sass-zero/variables";
 
 .block {
-  color: $red-300;
+  color: $rose-500;
+
+  &__element_one {
+    color: $fuchsia-500;
+  }
 
-  &__element {
-    color: $red-400;
+  &__element_two {
+    color: $purple-500;
   }
 
   &--modifier {
-    color: $red-500;
+    color: $violet-500;
   }
 }
 ```
 
 ```html
 <div class="block block--modifier">
-  <div class="block__element" />
+  <div class="block__element_one" />
+  <div class="block__element_two" />
 </div>
 ```
 
@@ -98,10 +105,34 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 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
+### Pulsar/TextMate
 
 1. Copy `.sass-zero-references.scss` to the root of your application.
 
+## Customization
+
+### Breadboard
+
+When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
+
+You will need to remove the breadboard from application.css:
+
+```css
+*= require sass-zero/base
+*= require sass-zero/utilities
+```
+
+### Variables
+
+Instead of using the default variables you can add or change variables, I recommend you make a copy of `_variables.scss` to your application and change it as you want.
+
+```scss
+@import "sass-zero/variables/border";
+@import "sass-zero/variables/breakpoints";
+@import "design-system/colors";
+...
+```
+
 ## Development
 
 To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/app/assets/stylesheets/sass-zero/{mixins.scss → _mixins.scss}

@@ -1,7 +1,4 @@
-@import "variables/border";
-@import "variables/effects";
 @import "variables/sizing";
-@import "variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -39,5 +36,13 @@
   padding-right: $padding-x;
   padding-left: $padding-x;
   margin-right: auto;
-  margin-left:  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);
+  }
 }