RubyGems - sass-zero - Versions diffs - 0.0.41 → 0.0.46 - Mend

sass-zero 0.0.41 → 0.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

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

@@ -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 ADDED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.41"
+    VERSION = "0.0.46"
   end
 end

data/package.json CHANGED

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.41",
+	"version": "0.0.46",
 	"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 CHANGED

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.41
+  version: 0.0.46
 platform: ruby
 authors:
 - lazaronixon
-autorequire:
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-05-19 00:00:00.000000000 Z
+date: 2020-12-19 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,14 @@ 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/align.scss
+- app/assets/stylesheets/sass-zero/utilities/animation.scss
+- app/assets/stylesheets/sass-zero/utilities/container.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 +60,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 +75,7 @@ homepage: http://github.com/lazaronixon/sass-zero
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -87,8 +90,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 DELETED

@@ -1,191 +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 {
-    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-6 $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 input-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 input-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, dt {
-  display: inline-block;
-  margin-bottom: $size-1;
-}
-a {
-  font-weight: $font-bold;
-}
-ul {
-  list-style: disc inside;
-}
-ol {
-  list-style: decimal inside;
-}
-h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-4;
-}
-fieldset, .input {
-  margin-bottom: $size-6;
-}
-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); }
-}