sass-zero 0.0.44 → 0.0.48

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

@@ -1,9 +1,55 @@
 @import "sass-zero/variables/typography";
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/colors";
-@import "sass-zero/variables/border";
 @import "sass-zero/mixins";
 
+.txt--normal {
+  font-weight: $font-normal !important;
+}
+
+.txt--bold {
+  font-weight: $font-bold;
+}
+
+.txt--underline {
+  text-decoration: underline;
+}
+
+.txt--uppercase {
+  text-transform: uppercase;
+}
+
+.txt--nowrap {
+  white-space: nowrap;
+}
+
+.txt--break-words {
+  word-wrap: break-word;
+}
+
+.txt--break-words-alt {
+  word-break: break-word;
+}
+
+.txt--break-all {
+  word-break: break-all;
+}
+
+.txt--ellipsis {
+  @include ellipsis;
+}
+
+.txt--dimmed {
+  opacity: $opacity-75;
+}
+
+.txt--very-dimmed {
+  opacity: $opacity-50;
+}
+
+.txt--overflow-hidden {
+  overflow: hidden;
+}
+
 .txt--xs {
   font-size: $text-xs;
   line-height: $leading-4;
@@ -46,105 +92,30 @@
 
 .txt--5xl {
   font-size: $text-5xl;
-  line-height: $leading-4;
+  line-height: $leading-none;
 }
 
 .txt--6xl {
   font-size: $text-6xl;
-  line-height: $leading-4;
+  line-height: $leading-none;
 }
 
 .txt--7xl {
   font-size: $text-7xl;
-  line-height: $leading-4;
+  line-height: $leading-none;
 }
 
 .txt--8xl {
   font-size: $text-8xl;
-  line-height: $leading-4;
+  line-height: $leading-none;
 }
 
 .txt--9xl {
   font-size: $text-9xl;
-  line-height: $leading-4;
-}
-
-.txt--nowrap {
-  white-space: nowrap;
+  line-height: $leading-none;
 }
 
-.txt--break-words {
-  word-wrap: break-word;
-}
-
-.txt--break-words-alt {
-  word-break: break-word;
-}
-
-.txt--break-all {
-  word-break: break-all;
-}
-
-.txt--ellipsis {
-  @include ellipsis;
-}
-
-.txt--normal {
-  font-weight: $font-normal !important;
-}
-
-.txt--bold {
-  font-weight: $font-bold;
-}
-
-.txt--subtle {
-  color: $gray-700;
-}
-
-.txt--underline {
-  text-decoration: underline;
-}
-
-.txt--uppercase {
-  text-transform: uppercase;
-}
-
-.txt--highlight {
-  background-color: $gray-200;
-  border-radius: $rounded-full;
-  padding: $size-0 $size-1;
-}
-
-.align--top {
-  vertical-align: top;
-}
-
-.align--middle {
-  vertical-align: middle;
-}
-
-.align--bottom {
-  vertical-align: bottom;
-}
-
-.align--left {
-  text-align: left;
-}
-
-.align--center {
-  text-align: center;
-}
-
-.align--right {
-  text-align: right;
-}
-
-.decorated {
-  color: $blue-500;
-  text-decoration: underline;
-}
-
-.decorated--subtle {
-  color: $gray-700;
-  text-decoration: underline;
+.undecorated {
+  color: inherit;
+  text-decoration: none;
 }

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

@@ -1,4 +1,6 @@
+@import "sass-zero/utilities/align";
 @import "sass-zero/utilities/animation";
+@import "sass-zero/utilities/container";
 @import "sass-zero/utilities/flex";
 @import "sass-zero/utilities/flush";
 @import "sass-zero/utilities/layout";

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

@@ -19,7 +19,7 @@ $rounded-full: 9999px;
 // border-width: $border;
 // *******************************************************************
 $border-0: 0;
+$border:   1px;
 $border-2: 2px;
 $border-4: 4px;
 $border-8: 8px;
-$border:   1px;

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

@@ -3,6 +3,7 @@
 // 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.
 // *******************************************************************
 $transparent: transparent;
+$current: currentColor;
 
 $black: #000;
 $white: #fff;
@@ -84,16 +85,16 @@ $blue-700: #1d4ed8;
 $blue-800: #1e40af;
 $blue-900: #1e3a8a;
 
-$light-blue-50:  #f0f9ff;
-$light-blue-100: #e0f2fe;
-$light-blue-200: #bae6fd;
-$light-blue-300: #7dd3fc;
-$light-blue-400: #38bdf8;
-$light-blue-500: #0ea5e9;
-$light-blue-600: #0284c7;
-$light-blue-700: #0369a1;
-$light-blue-800: #075985;
-$light-blue-900: #0c4a6e;
+$sky-50:  #f0f9ff;
+$sky-100: #e0f2fe;
+$sky-200: #bae6fd;
+$sky-300: #7dd3fc;
+$sky-400: #38bdf8;
+$sky-500: #0ea5e9;
+$sky-600: #0284c7;
+$sky-700: #0369a1;
+$sky-800: #075985;
+$sky-900: #0c4a6e;
 
 $cyan-50:  #ecfeff;
 $cyan-100: #cffafe;

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

@@ -0,0 +1,48 @@
+// *******************************************************************
+// Height
+// Variables for setting the height of an element
+// height: $h-p-1-2;
+// *******************************************************************
+$h-p-1-2:  50%;
+$h-p-1-3:  33.333333%;
+$h-p-2-3:  66.666667%;
+$h-p-1-4:  25%;
+$h-p-2-4:  50%;
+$h-p-3-4:  75%;
+$h-p-1-5:  20%;
+$h-p-2-5:  40%;
+$h-p-3-5:  60%;
+$h-p-4-5:  80%;
+$h-p-1-6:  16.666667%;
+$h-p-2-6:  33.333333%;
+$h-p-3-6:  50%;
+$h-p-4-6:  66.666667%;
+$h-p-5-6:  83.333333%;
+$h-full:   100%;
+$h-screen: 100vw;
+$h-min:    min-content;
+$h-max:    max-content;
+$h-fit:    fit-content;
+
+// *******************************************************************
+// Min-Height
+// Variables for setting the minimum height of an element
+// min-height: $min-h-0;
+// *******************************************************************
+$min-h-0:      0px;
+$min-h-full:   100%;
+$min-h-screen: 100vh;
+$min-h-min:    min-content;
+$min-h-max:    max-content;
+$min-h-fit:    fit-content;
+
+// *******************************************************************
+// Max-Height
+// Variables for setting the maximum height of an element
+// max-height: $max-h-full;
+// *******************************************************************
+$max-h-full:   100%;
+$max-h-screen: 100vh;
+$max-h-min:    min-content;
+$max-h-max:    max-content;
+$max-h-fit:    fit-content;

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

@@ -1,44 +1,44 @@
 // *******************************************************************
 // Default spacing scale
 // By default, Tailwind includes a generous and comprehensive numeric spacing scale.
-// Use as padding, margin, width, height, transform
+// Use as padding, margin, width, height, translate, etc...
 // *******************************************************************
-$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-72: 18rem;
-$size-80: 20rem;
-$size-96: 24rem;
+$size-auto: auto;
 
-$size-auto:   auto;
-$size-full:   100%;
-$size-screen: 100vw;
-$size-min:    min-content;
-$size-max:    max-content;
+$size-px:  1px;
+$size-0:   0px;
+$size-0-5: 0.125rem;
+$size-1:   0.25rem;
+$size-1-5: 0.375rem;
+$size-2:   0.5rem;
+$size-2-5: 0.625rem;
+$size-3:   0.75rem;
+$size-3-5: 0.875rem;
+$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-72:  18rem;
+$size-80:  20rem;
+$size-96:  24rem;
 
 $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/width.scss

@@ -1,34 +1,39 @@
 // *******************************************************************
 // Width
 // Variables for setting the width of an element
-// width: $w-1-2;
+// width: $w-p-1-2;
 // *******************************************************************
-$w-1-2:   50%;
-$w-1-3:   33.333333%;
-$w-2-3:   66.666667%;
-$w-1-4:   25%;
-$w-2-4:   50%;
-$w-3-4:   75%;
-$w-1-5:   20%;
-$w-2-5:   40%;
-$w-3-5:   60%;
-$w-4-5:   80%;
-$w-1-6:   16.666667%;
-$w-2-6:   33.333333%;
-$w-3-6:   50%;
-$w-4-6:   66.666667%;
-$w-5-6:   83.333333%;
-$w-1-12:  8.333333%;
-$w-2-12:  16.666667%;
-$w-3-12:  25%;
-$w-4-12:  33.333333%;
-$w-5-12:  41.666667%;
-$w-6-12:  50%;
-$w-7-12:  58.333333%;
-$w-8-12:  66.666667%;
-$w-9-12:  75%;
-$w-10-12: 83.333333%;
-$w-11-12: 91.666667%;
+$w-p-1-2:   50%;
+$w-p-1-3:   33.333333%;
+$w-p-2-3:   66.666667%;
+$w-p-1-4:   25%;
+$w-p-2-4:   50%;
+$w-p-3-4:   75%;
+$w-p-1-5:   20%;
+$w-p-2-5:   40%;
+$w-p-3-5:   60%;
+$w-p-4-5:   80%;
+$w-p-1-6:   16.666667%;
+$w-p-2-6:   33.333333%;
+$w-p-3-6:   50%;
+$w-p-4-6:   66.666667%;
+$w-p-5-6:   83.333333%;
+$w-p-1-12:  8.333333%;
+$w-p-2-12:  16.666667%;
+$w-p-3-12:  25%;
+$w-p-4-12:  33.333333%;
+$w-p-5-12:  41.666667%;
+$w-p-6-12:  50%;
+$w-p-7-12:  58.333333%;
+$w-p-8-12:  66.666667%;
+$w-p-9-12:  75%;
+$w-p-10-12: 83.333333%;
+$w-p-11-12: 91.666667%;
+$w-full:    100%;
+$w-screen:  100vw;
+$w-min:     min-content;
+$w-max:     max-content;
+$w-fit:     fit-content;
 
 // *******************************************************************
 // Min-Width
@@ -39,6 +44,7 @@ $min-w-0:    0px;
 $min-w-full: 100%;
 $min-w-min:  min-content;
 $min-w-max:  max-content;
+$min-w-fit:  fit-content;
 
 // *******************************************************************
 // Max-Width
@@ -61,20 +67,4 @@ $max-w-7xl:  80rem;
 $max-w-full: 100%;
 $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:      0px;
-$min-h-full:   100%;
-$min-h-screen: 100vh;
-
-// *******************************************************************
-// Max-Height
-// Variables for setting the maximum height of an element
-// max-height: $max-h-full;
-// *******************************************************************
-$max-h-full:   100%;
-$max-h-screen: 100vh;
+$max-w-fit:  fit-content;

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

@@ -9,4 +9,5 @@
 @import "variables/transform";
 @import "variables/typography";
 @import "variables/width";
+@import "variables/height";
 @import "variables/zindex";

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.44"
+    VERSION = "0.0.48"
   end
 end

data/package.json

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

data/sass-zero.gemspec

@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
   spec.homepage      = "http://github.com/lazaronixon/sass-zero"
   spec.license       = "MIT"
 
-  spec.add_runtime_dependency "autoprefixer-rails", ">= 9.7.4"
+  spec.add_runtime_dependency "autoprefixer-rails", "~> 10.3"
 
   spec.files = `git ls-files -z`.split("\x0")
 end

metadata

@@ -1,29 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.44
+  version: 0.0.48
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-15 00:00:00.000000000 Z
+date: 2021-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 9.7.4
+        version: '10.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 9.7.4
+        version: '10.3'
 description: 
 email:
 - lazaronixon@hotmail.com
@@ -42,7 +42,9 @@ files:
 - 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
@@ -59,6 +61,7 @@ files:
 - 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/height.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