sass-zero 0.0.38 → 0.0.43

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

@@ -3,7 +3,6 @@
 // Variables for controlling the box shadow of an element.
 // box-shadow: $shadow;
 // *******************************************************************
-$shadow-xs:      0 0 0 1px rgba(0, 0, 0, 0.05);
 $shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
 $shadow:         0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 $shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -11,8 +10,6 @@ $shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
 $shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 $shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
 $shadow-inner:   inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-$shadow-outline: 0 0 0 3px rgba(164, 202, 254, .45);
-$shadow-solid:   0 0 0 2px currentColor;
 $shadow-none:    none;
 
 // *******************************************************************
@@ -21,7 +18,34 @@ $shadow-none:    none;
 // opacity: $opacity-25;
 // *******************************************************************
 $opacity-0:   0;
+$opacity-5:   0.05;
+$opacity-10:  0.1;
+$opacity-20:  0.2;
 $opacity-25:  0.25;
-$opacity-50:  0.50;
+$opacity-30:  0.3;
+$opacity-40:  0.4;
+$opacity-50:  0.5;
+$opacity-60:  0.6;
+$opacity-70:  0.7;
 $opacity-75:  0.75;
+$opacity-80:  0.8;
+$opacity-90:  0.9;
+$opacity-95:  0.95;
 $opacity-100: 1;
+
+// *******************************************************************
+// Ring
+// Utilities for creating outline rings with box-shadows.
+// box-shadow: ring($width: 4px);
+// *******************************************************************
+@function ring($width: 3px, $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/flex.scss

@@ -1,9 +1,25 @@
 // *******************************************************************
 // Flex
 // Variables for controlling how flex items both grow and shrink.
-// flex: $$flex-1;
+// flex: $flex-1;
 // *******************************************************************
 $flex-1:       1 1 0%;
 $flex-auto:    1 1 auto;
 $flex-initial: 0 1 auto;
 $flex-none:    none;
+
+// *******************************************************************
+// Flex Grow
+// Utilities for controlling how flex items grow.
+// flex-grow: $flex-grow-0;
+// *******************************************************************
+$flex-grow-0: 0;
+$flex-grow:   1;
+
+// *******************************************************************
+// Flex Shrink
+// Utilities for controlling how flex items shrink.
+// flex-shrink: $flex-shrink-0;
+// *******************************************************************
+$flex-shrink-0: 0;
+$flex-shrink:   1;

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

@@ -0,0 +1,85 @@
+// *******************************************************************
+// Grid Template Columns
+// Utilities for specifying the columns in a grid layout.
+// grid-template-columns: $grid-cols-1;
+// *******************************************************************
+$grid-cols-1:    repeat(1, minmax(0, 1fr));
+$grid-cols-2:    repeat(2, minmax(0, 1fr));
+$grid-cols-3:    repeat(3, minmax(0, 1fr));
+$grid-cols-4:    repeat(4, minmax(0, 1fr));
+$grid-cols-5:    repeat(5, minmax(0, 1fr));
+$grid-cols-6:    repeat(6, minmax(0, 1fr));
+$grid-cols-7:    repeat(7, minmax(0, 1fr));
+$grid-cols-8:    repeat(8, minmax(0, 1fr));
+$grid-cols-9:    repeat(9, minmax(0, 1fr));
+$grid-cols-10:   repeat(10, minmax(0, 1fr));
+$grid-cols-11:   repeat(11, minmax(0, 1fr));
+$grid-cols-12:   repeat(12, minmax(0, 1fr));
+$grid-cols-none: none;
+
+// *******************************************************************
+// Grid Column Start / End
+// Utilities for controlling how elements are sized and placed across grid columns.
+// grid-column: $col-span-1;
+// *******************************************************************
+$col-auto:      auto;
+$col-span-1:    span 1 / span 1;
+$col-span-2:    span 2 / span 2;
+$col-span-3:    span 3 / span 3;
+$col-span-4:    span 4 / span 4;
+$col-span-5:    span 5 / span 5;
+$col-span-6:    span 6 / span 6;
+$col-span-7:    span 7 / span 7;
+$col-span-8:    span 8 / span 8;
+$col-span-9:    span 9 / span 9;
+$col-span-10:   span 10 / span 10;
+$col-span-11:   span 11 / span 11;
+$col-span-12:   span 12 / span 12;
+$col-span-full:	1 / -1;
+
+// *******************************************************************
+// Grid Template Rows
+// Utilities for specifying the rows in a grid layout.
+// grid-template-rows: $grid-rows-1;
+// *******************************************************************
+$grid-rows-1:    repeat(1, minmax(0, 1fr));
+$grid-rows-2:    repeat(2, minmax(0, 1fr));
+$grid-rows-3:    repeat(3, minmax(0, 1fr));
+$grid-rows-4:    repeat(4, minmax(0, 1fr));
+$grid-rows-5:    repeat(5, minmax(0, 1fr));
+$grid-rows-6:    repeat(6, minmax(0, 1fr));
+$grid-rows-none: none;
+
+// *******************************************************************
+// Grid Row Start / End
+// Utilities for controlling how elements are sized and placed across grid rows.
+// grid-row: $row-span-1;
+// *******************************************************************
+$row-auto:      auto;
+$row-span-1:    span 1 / span 1;
+$row-span-2:    span 2 / span 2;
+$row-span-3:    span 3 / span 3;
+$row-span-4:    span 4 / span 4;
+$row-span-5:    span 5 / span 5;
+$row-span-6:    span 6 / span 6;
+$row-span-full: 1 / -1;
+
+// *******************************************************************
+// Grid Auto Columns
+// Utilities for controlling the size of implicitly-created grid columns.
+// grid-auto-columns: $auto-cols-auto;
+// *******************************************************************
+$auto-cols-auto: auto;
+$auto-cols-min:  min-content;
+$auto-cols-max:  max-content;
+$auto-cols-fr:   minmax(0, 1fr);
+
+// *******************************************************************
+// Grid Auto Rows
+// Utilities for controlling the size of implicitly-created grid rows.
+// grid-auto-rows: $auto-rows-auto;
+// *******************************************************************
+$auto-rows-auto: auto;
+$auto-rows-min:  min-content;
+$auto-rows-max:  max-content;
+$auto-rows-fr:   minmax(0, 1fr);

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

@@ -3,28 +3,42 @@
 // By default, Tailwind includes a generous and comprehensive numeric spacing scale.
 // Use as padding, margin, width, height, transform
 // *******************************************************************
-$size-0:  0;
+$size-px: 1px;
+$size-0:  0px;
 $size-1:  0.25rem;
 $size-2:  0.5rem;
 $size-3:  0.75rem;
 $size-4:  1rem;
 $size-5:  1.25rem;
 $size-6:  1.5rem;
+$size-7:  1.75rem;
 $size-8:  2rem;
+$size-9:  2.25rem;
 $size-10: 2.5rem;
+$size-11: 2.75rem;
 $size-12: 3rem;
+$size-14: 3.5rem;
 $size-16: 4rem;
 $size-20: 5rem;
 $size-24: 6rem;
+$size-28: 7rem;
 $size-32: 8rem;
+$size-36: 9rem;
 $size-40: 10rem;
+$size-44: 11rem;
 $size-48: 12rem;
+$size-52: 13rem;
 $size-56: 14rem;
+$size-60: 15rem;
 $size-64: 16rem;
-$size-px: 1px;
+$size-72: 18rem;
+$size-80: 20rem;
+$size-96: 24rem;
 
 $size-auto:   auto;
 $size-full:   100%;
 $size-screen: 100vw;
+$size-min:    min-content;
+$size-max:    max-content;
 
 $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);

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

@@ -19,7 +19,12 @@ $scale-150: 1.50;
 // Variables for rotating elements with transform.
 // transform: rotate($rotate-45);
 // *******************************************************************
-$rotate-0:   0;
+$rotate-0:   0deg;
+$rotate-1:   1deg;
+$rotate-2:   2deg;
+$rotate-3:   3deg;
+$rotate-6:   6deg;
+$rotate-12:  12deg;
 $rotate-45:  45deg;
 $rotate-90:  90deg;
 $rotate-180: 180deg;
@@ -29,7 +34,9 @@ $rotate-180: 180deg;
 // Variables for skewing elements with transform.
 // transform: skew($skew-3);
 // *******************************************************************
-$skew-0:  0;
+$skew-0:  0deg;
+$skew-1:  1deg;
+$skew-2:  2deg;
 $skew-3:  3deg;
 $skew-6:  6deg;
 $skew-12: 12deg;

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

@@ -3,9 +3,9 @@
 // Variables for controlling the font family of an element.
 // font-family: $font-sans;
 // *******************************************************************
-$font-sans:  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";
-$font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-$font-mono:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$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";
+$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
 // *******************************************************************
 // Font Size
@@ -21,22 +21,25 @@ $text-2xl:  1.5rem;
 $text-3xl:  1.875rem;
 $text-4xl:  2.25rem;
 $text-5xl:  3rem;
-$text-6xl:  4rem;
+$text-6xl:  3.75rem;
+$text-7xl:  4.5rem;
+$text-8xl:  6rem;
+$text-9xl:  8rem;
 
 // *******************************************************************
 // Font Weight
 // Variables for controlling the font weight of an element.
 // font-weight: $font-hairline;
 // *******************************************************************
-$font-hairline:  100;
-$font-thin:      200;
-$font-light:     300;
-$font-normal:    400;
-$font-medium:    500;
-$font-semibold:  600;
-$font-bold:      700;
-$font-extrabold: 800;
-$font-black:     900;
+$font-thin:       100;
+$font-extralight: 200;
+$font-light:      300;
+$font-normal:     400;
+$font-medium:     500;
+$font-semibold:   600;
+$font-bold:       700;
+$font-extrabold:  800;
+$font-black:      900;
 
 // *******************************************************************
 // Line Height
@@ -48,7 +51,7 @@ $leading-tight:   1.25;
 $leading-snug:    1.375;
 $leading-normal:  1.5;
 $leading-relaxed: 1.625;
-$leading-loose:   1.2;
+$leading-loose:   2;
 $leading-3:       .75rem;
 $leading-4:       1rem;
 $leading-5:       1.25rem;
@@ -65,7 +68,7 @@ $leading-10:      2.5rem;
 // *******************************************************************
 $tracking-tighter: -0.05em;
 $tracking-tight:   -0.025em;
-$tracking-normal:  0;
+$tracking-normal:  0em;
 $tracking-wide:    0.025em;
 $tracking-wider:   0.05em;
 $tracking-widest:  0.1em;

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

@@ -35,14 +35,18 @@ $w-11-12: 91.666667%;
 // Variables for setting the minimum width of an element
 // min-width: $min-w-0;
 // *******************************************************************
-$min-w-0:    0;
+$min-w-0:    0px;
 $min-w-full: 100%;
+$min-w-min:  min-content;
+$min-w-max:  max-content;
 
 // *******************************************************************
 // Max-Width
 // Variables for setting the maximum width of an element
 // max-width: $max-w-xs;
 // *******************************************************************
+$max-w-none: none;
+$max-w-0:    0rem;
 $max-w-xs:   20rem;
 $max-w-sm:   24rem;
 $max-w-md:   28rem;
@@ -55,14 +59,15 @@ $max-w-5xl:  64rem;
 $max-w-6xl:  72rem;
 $max-w-7xl:  80rem;
 $max-w-full: 100%;
-$max-w-none: none;
+$max-w-min:  min-content;
+$max-w-max:  max-content;
 
 // *******************************************************************
 // Min-Height
 // Variables for setting the minimum height of an element
 // min-height: $min-h-0;
 // *******************************************************************
-$min-h-0:      0;
+$min-h-0:      0px;
 $min-h-full:   100%;
 $min-h-screen: 100vh;
 

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

@@ -3,10 +3,10 @@
 // Variables for controlling the stack order of an element.
 // z-index: $z-0;
 // *******************************************************************
+$z-auto: auto;
 $z-0:    0;
 $z-10:   10;
 $z-20:   20;
 $z-30:   30;
 $z-40:   40;
 $z-50:   50;
-$z-auto: auto;

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.38"
+    VERSION = "0.0.43"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.38",
+	"version": "0.0.43",
 	"description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
 	"homepage": "https://github.com/lazaronixon/sass-zero",
 	"repository": "lazaronixon/sass-zero",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.38
+  version: 0.0.43
 platform: ruby
 authors:
 - lazaronixon
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-05-17 00:00:00.000000000 Z
+date: 2020-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -24,7 +24,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 9.7.4
-description: 
+description:
 email:
 - lazaronixon@hotmail.com
 executables: []
@@ -37,12 +37,12 @@ files:
 - Gemfile
 - README.md
 - app/assets/stylesheets/sass-zero/base.scss
-- app/assets/stylesheets/sass-zero/base/breadboard.scss
 - app/assets/stylesheets/sass-zero/base/normalize.css
 - app/assets/stylesheets/sass-zero/base/preflight.scss
-- app/assets/stylesheets/sass-zero/base/variables.scss
+- app/assets/stylesheets/sass-zero/breadboard.scss
 - app/assets/stylesheets/sass-zero/mixins.scss
 - app/assets/stylesheets/sass-zero/utilities.scss
+- app/assets/stylesheets/sass-zero/utilities/animation.scss
 - app/assets/stylesheets/sass-zero/utilities/flex.scss
 - app/assets/stylesheets/sass-zero/utilities/flush.scss
 - app/assets/stylesheets/sass-zero/utilities/layout.scss
@@ -58,6 +58,7 @@ files:
 - app/assets/stylesheets/sass-zero/variables/colors.scss
 - app/assets/stylesheets/sass-zero/variables/effects.scss
 - app/assets/stylesheets/sass-zero/variables/flex.scss
+- app/assets/stylesheets/sass-zero/variables/grid.scss
 - app/assets/stylesheets/sass-zero/variables/spacing.scss
 - app/assets/stylesheets/sass-zero/variables/transform.scss
 - app/assets/stylesheets/sass-zero/variables/transition.scss
@@ -72,7 +73,7 @@ homepage: http://github.com/lazaronixon/sass-zero
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -87,8 +88,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.6
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
   BEM.

data/app/assets/stylesheets/sass-zero/base/breadboard.scss

@@ -1,204 +0,0 @@
-@import "sass-zero/base/variables";
-@import "sass-zero/mixins";
-
-html {
-  color: $breadboard-color;
-  font-size: 14px;
-}
-
-main {
-  padding-right: $size-2;
-  padding-left:  $size-2;
-}
-
-blockquote {
-  border-left-width: $border-4;
-  padding: $size-3 $size-4;
-}
-
-.btn {
-  background-color: $white;
-  border-radius: $rounded;
-  border-width: $border;
-  color: $breadboard-color;
-  display: inline-block;
-  font-weight: $font-bold;
-  padding: $size-2 $size-4;
-  cursor: pointer;
-
-  &:disabled, &.disabled {
-    pointer-events: none;
-    opacity: $opacity-50;
-  }
-
-  &--primary {
-    background-color: $breadboard-primary;
-    border-color: $breadboard-primary;
-    color: $white;
-  }
-
-  &--secondary {
-    border-color: $breadboard-primary;
-    background-color: $white;
-  }
-
-  &--tertiary {
-    background-color: $transparent;
-    border-color: $transparent;
-  }
-}
-
-code {
-  background-color: $breadboard-background;
-  border-radius: $rounded;
-  font-size: $text-sm;
-  margin: $size-0 $size-1;
-  padding: $size-1 $size-2;
-  white-space: nowrap;
-}
-
-pre {
-  background-color: $breadboard-background;
-  border-color: $breadboard-primary;
-  border-left-width: $border-4;
-  overflow-y: hidden;
-
-  & > code {
-    border-radius: $rounded-none;
-  	display: block;
-  	padding: $size-2 $size-3;
-    white-space: pre;
-  }
-}
-
-hr {
-  margin: $size-10 $size-0;
-}
-
-.input {
-  appearance: none;
-  border-radius: $rounded;
-  border-width: $border;
-  padding: $size-2 $size-3;
-  width: $size-full;
-
-  &--select {
-  	background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="silver" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"></path></svg>');
-    background-position: right $size-2 center;
-    background-repeat: no-repeat;
-    background-size: auto $size-5;
-    padding-right: $size-8;
-  }
-
-  &:focus { @include focus; }
-}
-
-.checkbox {
-  border-radius: $rounded;
-  @include selection($breadboard-primary);
-
-  &:checked {
-    background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="white" strokeWidth="2" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>');
-    @include checked;
-  }
-
-  &:focus { @include focus; }
-}
-
-.radio {
-  border-radius: $rounded-full;
-  @include selection($breadboard-primary);
-
-  &:checked {
-    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
-    @include checked;
-  }
-
-  &:focus { @include focus; }
-}
-
-label, legend {
-  display: inline-block;
-  margin-bottom: $size-1;
-}
-
-a {
-  font-weight: $font-bold;
-}
-
-ul {
-  list-style: disc inside;
-}
-
-ol {
-  list-style: decimal inside;
-}
-
-td, th {
-  &:first-child { padding-left:  $size-0; }
-  &:last-child  { padding-right: $size-0; }
-}
-
-dt, dd, li {
-  &:last-child { margin-bottom: $size-0; }
-}
-
-h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-2;
-}
-
-dt, dd, li, .btn {
-  margin-bottom: $size-2;
-}
-
-fieldset, .input {
-  margin-bottom: $size-4;
-}
-
-blockquote, figure, p, pre, table, ul, ol, dl {
-  margin-bottom: $size-6;
-}
-
-table {
-  width: $size-full;
-}
-
-td, th {
-  border-bottom-width: $border;
-  padding: $size-3 $size-4;
-  text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6, .hdg {
-  font-weight: $font-bold;
-  line-height: $leading-tight;
-}
-
-h1, .hdg--4xl {
-  font-size: $text-4xl;
-}
-
-h2, .hdg--3xl {
-  font-size: $text-3xl;
-}
-
-h3, .hdg--2xl {
-  font-size: $text-2xl;
-}
-
-h4, .hdg--xl {
-  font-size: $text-xl;
-}
-
-h5, .hdg--lg {
-  font-size: $text-lg;
-}
-
-h6, .hdg--base {
-  font-size: $text-base;
-}
-
-@media (min-width: $breakpoint-md) {
-  html { font-size: 16px; }
-  main { @include make-container($size-10, $breakpoint-lg); }
-}