sass-zero 1.0.0 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1132f3e4eec921fea2db2c5e8405be3724d83a3e4cd32c2a54fe2d2fd46814e
-  data.tar.gz: 158760a4003250e1c6c8cb36aa0855dbcaef83e80591a202d83eb64c372370e2
+  metadata.gz: 639d2237bb436847c5d444782c9711f2d7a1266c9298dab7b00cdd4858bb86ce
+  data.tar.gz: dc62528f5f7360aa95de46fe05d1e1e57262295128b22dd3609468a7cf02c9d0
 SHA512:
-  metadata.gz: 39e0679ebf21130f74f7331b43876a222a0c988598ba7de4098a01960398d2a56cceec4c846f90fd18747a71cb51028953dc76aadbd566879cf0c1a6bc456441
-  data.tar.gz: 1c7d3c75eac5095c3c70128748ca642ac98b002b0395723a5c2315f97f7c86d973046691eaba950dc53f3678163ecf3add06b6d5659159e7ae287b38926011fa
+  metadata.gz: fbb3e1d5d494a8f74d0e5d6a9c8746325204468aad8b55359e0b4481ab0519b5c385697902736f07240e68a797c356c53e7a0cfa3436ca402ba2782ca3abc950
+  data.tar.gz: efee3e53a12963984a7d437663e90cd98409bd3bdfd68c0179e13bd54a30b1f98af02f8a44d16eb0af5933f76d2b003c6a9f0ef49954170aa2f877f81a246900

data/README.md

@@ -39,6 +39,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 - [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)
 - [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
@@ -101,6 +102,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 }
 ```
 
+```html
+<div class="block block--modifier">
+  <div class="block__element" />
+</div>
+```
+
 ## References
 
 - [SASS](https://sass-lang.com)

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

@@ -260,3 +260,12 @@ video {
 [hidden] {
   display: none;
 }
+
+/**
+ * Unfortunate hack until https://bugs.webkit.org/show_bug.cgi?id=198959 is fixed.
+ * This sucks because users can't change line-height with a utility on date inputs now.
+ * Reference: https://github.com/twbs/bootstrap/pull/31993
+ */
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}

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

@@ -38,7 +38,7 @@ html {
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
-  padding: $size-2 $size-4;
+  padding: $size-2 $size-3;
   cursor: pointer;
 
   &--primary {
@@ -110,10 +110,6 @@ blockquote {
   padding: $size-3 $size-4;
 }
 
-cite {
-  font-size: $text-sm;
-}
-
 code {
   background-color: var(--color-bg--surface);
   border-radius: $rounded;
@@ -182,7 +178,7 @@ fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, details, blockquote, p, pre, ul, ol, dl {
+table, details, blockquote, figure, p, pre, ul, ol, dl {
   margin-bottom: $size-6;
 }
 
@@ -192,6 +188,10 @@ details {
   border-left-width: $border-4;
 }
 
+details[open] > summary {
+  margin-bottom: $size-1;
+}
+
 summary {
   cursor: pointer;
 }
@@ -234,3 +234,7 @@ h5, .hdg--lg {
 h6, .hdg--base {
   font-size: $text-base;
 }
+
+figcaption, cite {
+  font-size: $text-sm;
+}

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

@@ -7,11 +7,11 @@
 }
 
 .animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 
 .animate-pulse {
-  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .animate-bounce {
@@ -43,7 +43,7 @@
     opacity: 1;
   }
   50% {
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 

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

@@ -2,7 +2,11 @@
 
 // *******************************************************************
 // Pull Utilities
-// $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
+// .pull-[xs|md|lg|xl|2xl|3xl]--top
+// .pull-[xs|md|lg|xl|2xl|3xl]--right
+// .pull-[xs|md|lg|xl|2xl|3xl]--bottom
+// .pull-[xs|md|lg|xl|2xl|3xl]--left
+// .pull-[xs|md|lg|xl|2xl|3xl]--sides
 // *******************************************************************
 @each $scale, $size in $size-map {
   .pull-#{$scale}--top {

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

@@ -2,7 +2,13 @@
 
 // *******************************************************************
 // Push Utilities
-// $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
+// .push-[xs|md|lg|xl|2xl|3xl]
+// .push-[xs|md|lg|xl|2xl|3xl]--top
+// .push-[xs|md|lg|xl|2xl|3xl]--right
+// .push-[xs|md|lg|xl|2xl|3xl]--bottom
+// .push-[xs|md|lg|xl|2xl|3xl]--left
+// .push-[xs|md|lg|xl|2xl|3xl]--ends
+// .push-[xs|md|lg|xl|2xl|3xl]--sides
 // *******************************************************************
 @each $scale, $size in $size-map {
   .push-#{$scale} {

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

@@ -15,7 +15,7 @@ $rounded-full: 9999px;
 
 // *******************************************************************
 // Border Width
-// Utilities for controlling the width of an element's borders.
+// Variables for controlling the width of an element's borders.
 // border-width: $border;
 // *******************************************************************
 $border-0: 0;

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

@@ -3,18 +3,18 @@
 // Variables for controlling the box shadow of an element.
 // box-shadow: $shadow;
 // *******************************************************************
-$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);
-$shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$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-none:    none;
+$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);
+$shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$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-none:  none;
 
 // *******************************************************************
 // Opacity
-// Utilities for controlling the opacity of an element.
+// Variables for controlling the opacity of an element.
 // opacity: $opacity-25;
 // *******************************************************************
 $opacity-0:   0;
@@ -35,7 +35,7 @@ $opacity-100: 1;
 
 // *******************************************************************
 // Ring
-// Utilities for creating outline rings with box-shadows.
+// Function 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)  {

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

@@ -0,0 +1,103 @@
+// *******************************************************************
+// Blur
+// Variables for applying blur filters to an element.
+// filter: $blur; backdrop-filter: $blur;
+// *******************************************************************
+$blur-none: blur(0);
+$blur-sm:   blur(4px);
+$blur:      blur(8px);
+$blur-md:   blur(12px);
+$blur-lg:   blur(16px);
+$blur-xl:   blur(24px);
+$blur-2xl:  blur(40px);
+$blur-3xl:  blur(64px);
+
+// *******************************************************************
+// Brightness
+// Variables for applying brightness filters to an element.
+// filter: $brightness-50; backdrop-filter: $brightness-50;
+// *******************************************************************
+$brightness-0:   brightness(0);
+$brightness-50:  brightness(0.5);
+$brightness-75:  brightness(0.75);
+$brightness-90:  brightness(0.9);
+$brightness-95:  brightness(0.95);
+$brightness-100: brightness(1);
+$brightness-105: brightness(1.05);
+$brightness-110: brightness(1.1);
+$brightness-125: brightness(1.25);
+$brightness-150: brightness(1.5);
+$brightness-200: brightness(2);
+
+// *******************************************************************
+// Contrast
+// Variables for applying brightness filters to an element.
+// filter: $contrast-50; backdrop-filter: $contrast-50;
+// *******************************************************************
+$contrast-0:   contrast(0);
+$contrast-50:  contrast(0.5);
+$contrast-75:  contrast(0.75);
+$contrast-100: contrast(1);
+$contrast-125: contrast(1.25);
+$contrast-150: contrast(1.5);
+$contrast-200: contrast(2);
+
+// *******************************************************************
+// Drop Shadow
+// Variables for applying drop-shadow filters to an element.
+// filter: $drop-shadow; 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));
+$drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+$drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+$drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+$drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+$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;
+// *******************************************************************
+$grayscale-0: grayscale(0);
+$grayscale:   grayscale(100%);
+
+// *******************************************************************
+// Hue Rotate
+// Variables for applying hue-rotate filters to an element.
+// filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
+// *******************************************************************
+$hue-rotate-0:   hue-rotate(0deg);
+$hue-rotate-15:  hue-rotate(15deg);
+$hue-rotate-30:  hue-rotate(30deg);
+$hue-rotate-60:  hue-rotate(60deg);
+$hue-rotate-90:  hue-rotate(90deg);
+$hue-rotate-180: hue-rotate(180deg);
+
+// *******************************************************************
+// Invert
+// Variables for applying invert filters to an element.
+// filter: $invert; backdrop-filter: $invert;
+// *******************************************************************
+$invert-0: invert(0);
+$invert:   invert(100%);
+
+// *******************************************************************
+// Saturate
+// Variables for applying saturation filters to an element.
+// filter: $saturate-50; backdrop-filter: $saturate-50;
+// *******************************************************************
+$saturate-0:   saturate(0);
+$saturate-50:  saturate(0.5);
+$saturate-100: saturate(1);
+$saturate-150: saturate(1.5);
+$saturate-200: saturate(2);
+
+// *******************************************************************
+// Sepia
+// Variables for applying sepia filters to an element.
+// filter: $sepia; backdrop-filter: $sepia;
+// *******************************************************************
+$sepia-0: sepia(0);
+$sepia:   sepia(100%);

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

@@ -10,7 +10,7 @@ $flex-none:    none;
 
 // *******************************************************************
 // Flex Grow
-// Utilities for controlling how flex items grow.
+// Variables for controlling how flex items grow.
 // flex-grow: $flex-grow-0;
 // *******************************************************************
 $flex-grow-0: 0;
@@ -18,7 +18,7 @@ $flex-grow:   1;
 
 // *******************************************************************
 // Flex Shrink
-// Utilities for controlling how flex items shrink.
+// Variables for controlling how flex items shrink.
 // flex-shrink: $flex-shrink-0;
 // *******************************************************************
 $flex-shrink-0: 0;

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

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Grid Template Columns
-// Utilities for specifying the columns in a grid layout.
+// Variables for specifying the columns in a grid layout.
 // grid-template-columns: $grid-cols-1;
 // *******************************************************************
 $grid-cols-1:    repeat(1, minmax(0, 1fr));
@@ -19,7 +19,7 @@ $grid-cols-none: none;
 
 // *******************************************************************
 // Grid Column Start / End
-// Utilities for controlling how elements are sized and placed across grid columns.
+// Variables for controlling how elements are sized and placed across grid columns.
 // grid-column: $col-span-1;
 // *******************************************************************
 $col-auto:      auto;
@@ -39,7 +39,7 @@ $col-span-full:	1 / -1;
 
 // *******************************************************************
 // Grid Template Rows
-// Utilities for specifying the rows in a grid layout.
+// Variables for specifying the rows in a grid layout.
 // grid-template-rows: $grid-rows-1;
 // *******************************************************************
 $grid-rows-1:    repeat(1, minmax(0, 1fr));
@@ -52,7 +52,7 @@ $grid-rows-none: none;
 
 // *******************************************************************
 // Grid Row Start / End
-// Utilities for controlling how elements are sized and placed across grid rows.
+// Variables for controlling how elements are sized and placed across grid rows.
 // grid-row: $row-span-1;
 // *******************************************************************
 $row-auto:      auto;
@@ -66,7 +66,7 @@ $row-span-full: 1 / -1;
 
 // *******************************************************************
 // Grid Auto Columns
-// Utilities for controlling the size of implicitly-created grid columns.
+// Variables for controlling the size of implicitly-created grid columns.
 // grid-auto-columns: $auto-cols-auto;
 // *******************************************************************
 $auto-cols-auto: auto;
@@ -76,7 +76,7 @@ $auto-cols-fr:   minmax(0, 1fr);
 
 // *******************************************************************
 // Grid Auto Rows
-// Utilities for controlling the size of implicitly-created grid rows.
+// Variables for controlling the size of implicitly-created grid rows.
 // grid-auto-rows: $auto-rows-auto;
 // *******************************************************************
 $auto-rows-auto: auto;

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

@@ -35,4 +35,12 @@ $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);
+$size-map: (
+  "xs":  $size-2,
+  "sm":  $size-4,
+  "md":  $size-6,
+  "lg":  $size-12,
+  "xl":  $size-16,
+  "2xl": $size-24,
+  "3xl": $size-32
+);

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

@@ -2,6 +2,7 @@
 @import "variables/breakpoints";
 @import "variables/colors";
 @import "variables/effects";
+@import "variables/filters";
 @import "variables/flex";
 @import "variables/grid";
 @import "variables/spacing";

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.0.0"
+    VERSION = "1.0.4"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "1.0.0",
+	"version": "1.0.4",
 	"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: 1.0.0
+  version: 1.0.4
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-20 00:00:00.000000000 Z
+date: 2022-02-04 00:00:00.000000000 Z
 dependencies: []
 description: 
 email:
@@ -45,6 +45,7 @@ files:
 - app/assets/stylesheets/sass-zero/variables/breakpoints.scss
 - app/assets/stylesheets/sass-zero/variables/colors.scss
 - app/assets/stylesheets/sass-zero/variables/effects.scss
+- app/assets/stylesheets/sass-zero/variables/filters.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