sass-zero 1.1.5 → 1.1.7

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

@@ -1 +1,363 @@
-@import "base/preflight";
+@import "variables/colors";
+@import "variables/typography";
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: $gray-200; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: $font-sans; /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: $font-mono; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: $gray-400; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}

data/app/assets/stylesheets/sass-zero/variables/{border.scss → _border.scss}

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Border Style
-// Variables for controlling the style of an element's borders.
+// Variables for controlling the border radius of an element.
 // border-radius: $rounded-none;
 // *******************************************************************
 $rounded-none: 0;

data/app/assets/stylesheets/sass-zero/variables/{breakpoints.scss → _breakpoints.scss}

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Breakpoints
-// Customizing the default breakpoints for your project.
+// Five breakpoints inspired by common device resolutions.
 // @media (min-width: $breakpoint-md) {   }
 // *******************************************************************
 $breakpoint-sm:  640px;

data/app/assets/stylesheets/sass-zero/variables/{colors.scss → _colors.scss}

@@ -1,6 +1,8 @@
 // *******************************************************************
 // Default color palette
-// 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.
+// Sass-zero includes an expertly-crafted default color palette
+// out-of-the-box that is a great starting point if you don’t
+// have your own specific branding in mind.
 // *******************************************************************
 $transparent: transparent;
 $current: currentColor;

data/app/assets/stylesheets/sass-zero/variables/{effects.scss → _effects.scss}

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Box Shadow
-// Variables for controlling the box shadow of an element.
+// Variables for controlling the color of a box shadow.
 // box-shadow: $shadow;
 // *******************************************************************
 $shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -32,20 +32,3 @@ $opacity-80:  0.8;
 $opacity-90:  0.9;
 $opacity-95:  0.95;
 $opacity-100: 1;
-
-// *******************************************************************
-// Ring
-// Function for creating outline rings with box-shadows.
-// box-shadow: ring($width: 4px);
-// *******************************************************************
-@function ring($width: 2px, $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/{filters.scss → _filters.scss}

@@ -1,7 +1,7 @@
 // *******************************************************************
 // Blur
 // Variables for applying blur filters to an element.
-// filter: $blur; backdrop-filter: $blur;
+// filter|backdrop-filter: $blur;
 // *******************************************************************
 $blur-none: blur(0);
 $blur-sm:   blur(4px);
@@ -15,7 +15,7 @@ $blur-3xl:  blur(64px);
 // *******************************************************************
 // Brightness
 // Variables for applying brightness filters to an element.
-// filter: $brightness-50; backdrop-filter: $brightness-50;
+// filter|backdrop-filter: $brightness-50;
 // *******************************************************************
 $brightness-0:   brightness(0);
 $brightness-50:  brightness(0.5);
@@ -32,7 +32,7 @@ $brightness-200: brightness(2);
 // *******************************************************************
 // Contrast
 // Variables for applying brightness filters to an element.
-// filter: $contrast-50; backdrop-filter: $contrast-50;
+// filter|backdrop-filter: $contrast-50;
 // *******************************************************************
 $contrast-0:   contrast(0);
 $contrast-50:  contrast(0.5);
@@ -45,7 +45,7 @@ $contrast-200: contrast(2);
 // *******************************************************************
 // Drop Shadow
 // Variables for applying drop-shadow filters to an element.
-// filter: $drop-shadow; backdrop-filter: $drop-shadow;
+// filter|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));
@@ -58,7 +58,7 @@ $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;
+// filter|backdrop-filter: $grayscale;
 // *******************************************************************
 $grayscale-0: grayscale(0);
 $grayscale:   grayscale(100%);
@@ -66,7 +66,7 @@ $grayscale:   grayscale(100%);
 // *******************************************************************
 // Hue Rotate
 // Variables for applying hue-rotate filters to an element.
-// filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
+// filter|backdrop-filter: $hue-rotate-30;
 // *******************************************************************
 $hue-rotate-0:   hue-rotate(0deg);
 $hue-rotate-15:  hue-rotate(15deg);
@@ -78,7 +78,7 @@ $hue-rotate-180: hue-rotate(180deg);
 // *******************************************************************
 // Invert
 // Variables for applying invert filters to an element.
-// filter: $invert; backdrop-filter: $invert;
+// filter|backdrop-filter: $invert;
 // *******************************************************************
 $invert-0: invert(0);
 $invert:   invert(100%);
@@ -86,7 +86,7 @@ $invert:   invert(100%);
 // *******************************************************************
 // Saturate
 // Variables for applying saturation filters to an element.
-// filter: $saturate-50; backdrop-filter: $saturate-50;
+// filter|backdrop-filter: $saturate-50;
 // *******************************************************************
 $saturate-0:   saturate(0);
 $saturate-50:  saturate(0.5);
@@ -97,7 +97,7 @@ $saturate-200: saturate(2);
 // *******************************************************************
 // Sepia
 // Variables for applying sepia filters to an element.
-// filter: $sepia; backdrop-filter: $sepia;
+// filter|backdrop-filter: $sepia;
 // *******************************************************************
 $sepia-0: sepia(0);
 $sepia:   sepia(100%);

data/app/assets/stylesheets/sass-zero/variables/{flex.scss → _flex.scss}

@@ -3,10 +3,10 @@
 // Variables for controlling how flex items both grow and shrink.
 // flex: $flex-1;
 // *******************************************************************
-$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

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.1.5"
+    VERSION = "1.1.7"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.1.5
+  version: 1.1.7
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-30 00:00:00.000000000 Z
+date: 2023-07-05 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -25,40 +25,39 @@ files:
 - Gemfile.lock
 - README.md
 - Rakefile
+- app/assets/stylesheets/sass-zero/_mixins.scss
+- app/assets/stylesheets/sass-zero/_variables.scss
 - app/assets/stylesheets/sass-zero/base.scss
-- app/assets/stylesheets/sass-zero/base/preflight.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/border.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
-- app/assets/stylesheets/sass-zero/utilities/list.scss
-- app/assets/stylesheets/sass-zero/utilities/pad.scss
-- app/assets/stylesheets/sass-zero/utilities/position.scss
-- app/assets/stylesheets/sass-zero/utilities/pull.scss
-- app/assets/stylesheets/sass-zero/utilities/push.scss
-- app/assets/stylesheets/sass-zero/utilities/text.scss
-- app/assets/stylesheets/sass-zero/utilities/unpad.scss
-- app/assets/stylesheets/sass-zero/variables.scss
-- app/assets/stylesheets/sass-zero/variables/border.scss
-- 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
-- app/assets/stylesheets/sass-zero/variables/sizing.scss
-- app/assets/stylesheets/sass-zero/variables/transform.scss
-- app/assets/stylesheets/sass-zero/variables/transition.scss
-- app/assets/stylesheets/sass-zero/variables/typography.scss
-- app/assets/stylesheets/sass-zero/variables/width.scss
-- app/assets/stylesheets/sass-zero/variables/zindex.scss
+- app/assets/stylesheets/sass-zero/utilities/_align.scss
+- app/assets/stylesheets/sass-zero/utilities/_animation.scss
+- app/assets/stylesheets/sass-zero/utilities/_border.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
+- app/assets/stylesheets/sass-zero/utilities/_list.scss
+- app/assets/stylesheets/sass-zero/utilities/_pad.scss
+- app/assets/stylesheets/sass-zero/utilities/_position.scss
+- app/assets/stylesheets/sass-zero/utilities/_pull.scss
+- app/assets/stylesheets/sass-zero/utilities/_push.scss
+- app/assets/stylesheets/sass-zero/utilities/_text.scss
+- app/assets/stylesheets/sass-zero/utilities/_unpad.scss
+- app/assets/stylesheets/sass-zero/variables/_border.scss
+- 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
+- app/assets/stylesheets/sass-zero/variables/_sizing.scss
+- app/assets/stylesheets/sass-zero/variables/_transform.scss
+- app/assets/stylesheets/sass-zero/variables/_transition.scss
+- app/assets/stylesheets/sass-zero/variables/_typography.scss
+- app/assets/stylesheets/sass-zero/variables/_width.scss
+- app/assets/stylesheets/sass-zero/variables/_zindex.scss
 - example.html
 - lib/sass-zero.rb
 - lib/sass_zero.rb