sass-zero 1.1.6 → 1.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fe9da1ccaf5fbc04d1681efbe93e41526f727adc32be83ebb1682f8fd4df961
-  data.tar.gz: d7aded8f5516caa5ae57c307f755630d591d4c5f33a85308710d382a9848e376
+  metadata.gz: 114ed05332fe9df3860360aadec6045faaa8e260fe8f67e0c013683929577b01
+  data.tar.gz: 72b2ab1ad8d57e93762ff9e314c0fb3139dcbd7d2fcab8e206a8c48628eea8b4
 SHA512:
-  metadata.gz: a6ecefd8d3c7ac214b0afe5ef25171a703e704fe8480c3be010ec681cde5003d43c7fe4e7e849ee5650b389307dbb381e7d8e2225f2cbf89f4865aa8c66063a6
-  data.tar.gz: a79e1322722d6bfe2fe3b91b16e24c500f4a00297e42607011f2257250b0e07c55b04abc2851ce443d2b2a6f95862e48300e180ae386553ed222ba6f26ad0b6a
+  metadata.gz: c1472582db52dba68bf6bde60c1cbe2146ada491d39d83271a3a24f8005e2a60b52e75d01a3bcd9066f89a13b40df228bf95219546173783e5cc1da5f6d96b89
+  data.tar.gz: bfd43f33caa510c7a675acb957c215dc74e3e95339f2da0a4937886bc5296004ae626bed236d428a6c007b5e32b3b0ad21879930b2e49da4a3a39065a16a18d1

data/.sass-zero-references.scss

@@ -1,5 +1,5 @@
 // *******************************************************************
-// borders.scss
+// Borders
 // *******************************************************************
 
 $rounded-none: 0;
@@ -19,7 +19,7 @@ $border-4: 4px;
 $border-8: 8px;
 
 // *******************************************************************
-// breakpoints.scss
+// Breakpoints
 // *******************************************************************
 
 $breakpoint-sm:  640px;
@@ -29,7 +29,7 @@ $breakpoint-xl:  1280px;
 $breakpoint-2xl: 1536px;
 
 // *******************************************************************
-// colors.scss
+// Colors
 // *******************************************************************
 
 $transparent: transparent;
@@ -281,7 +281,7 @@ $blue-gray-800: #1e293b;
 $blue-gray-900: #0f172a;
 
 // *******************************************************************
-// effects.scss
+// Effects
 // *******************************************************************
 
 $shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -310,7 +310,7 @@ $opacity-95:  0.95;
 $opacity-100: 1;
 
 // *******************************************************************
-// filters.scss
+// Filters
 // *******************************************************************
 
 $blur-none: blur(0);
@@ -373,7 +373,7 @@ $sepia-0: sepia(0);
 $sepia:   sepia(100%);
 
 // *******************************************************************
-// flex.scss
+// Flex
 // *******************************************************************
 
 $flex-1:       1 1 0%;   // Allow grow and shrink, ignoring its initial size.
@@ -388,7 +388,7 @@ $flex-shrink-0: 0;
 $flex-shrink:   1;
 
 // *******************************************************************
-// grid.scss
+// Grid
 // *******************************************************************
 
 $grid-cols-1:    repeat(1, minmax(0, 1fr));
@@ -448,7 +448,7 @@ $auto-rows-max:  max-content;
 $auto-rows-fr:   minmax(0, 1fr);
 
 // *******************************************************************
-// height.scss
+// Height
 // *******************************************************************
 
 $h-auto:   auto;
@@ -487,7 +487,7 @@ $max-h-max:    max-content;
 $max-h-fit:    fit-content;
 
 // *******************************************************************
-// sizing.scss
+// Sizing
 // *******************************************************************
 
 $size-px: 1px;
@@ -523,7 +523,7 @@ $size-80: 20rem;
 $size-96: 24rem;
 
 // *******************************************************************
-// transform.scss
+// Transform
 // *******************************************************************
 
 $scale-0:   0;
@@ -563,7 +563,7 @@ $skew-6:  6deg;
 $skew-12: 12deg;
 
 // *******************************************************************
-// transition.scss
+// Transition
 // *******************************************************************
 
 $transition-none:      none;
@@ -598,7 +598,7 @@ $ease-out:    cubic-bezier(0, 0, 0.2, 1);
 $ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
 // *******************************************************************
-// typography.scss
+// Typography
 // *******************************************************************
 
 $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";
@@ -652,7 +652,7 @@ $tracking-wider:   0.05em;
 $tracking-widest:  0.1em;
 
 // *******************************************************************
-// width.scss
+// Width
 // *******************************************************************
 
 $w-auto:   auto;
@@ -713,7 +713,7 @@ $max-w-max:  max-content;
 $max-w-fit:  fit-content;
 
 // *******************************************************************
-// zindex.scss
+// Zindex
 // *******************************************************************
 
 $z-auto: auto;
@@ -725,7 +725,7 @@ $z-40:   40;
 $z-50:   50;
 
 // *******************************************************************
-// mixins.scss
+// Mixins
 // *******************************************************************
 
 @mixin antialiased {}

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.1.6)
+    sass-zero (1.1.7)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -23,75 +23,78 @@ Add these lines to your application.css:
 
 #### Essential
 
-- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/border.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)
-- [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)
-- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/height.scss)
-- [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/sizing.scss)
-- [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/typography.scss)
-- [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/width.scss)
+- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.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)
+- [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)
+- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_height.scss)
+- [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_sizing.scss)
+- [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_typography.scss)
+- [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_width.scss)
 
 #### Others
 
-- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
-- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
-- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
-- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
-- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/zindex.scss)
+- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
+- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_filters.scss)
+- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transform.scss)
+- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transition.scss)
+- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
+- [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
 
 ### Utility classes
 
-- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/align.scss)
-- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
-- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/border.scss)
-- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.scss)
-- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flex.scss)
-- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/layout.scss)
-- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/list.scss)
-- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
-- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
-- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
-- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pad.scss)
-- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/unpad.scss)
-- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/position.scss)
-- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/text.scss)
-
-### Breadboard
-
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
+- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
+- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_animation.scss)
+- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_border.scss)
+- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_container.scss)
+- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flex.scss)
+- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_layout.scss)
+- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_list.scss)
+- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pull.scss)
+- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_push.scss)
+- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flush.scss)
+- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pad.scss)
+- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
+- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
+- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
 
 ## Breadboard
 
 This is an optional black-and-white theme that you can use as design foundation.
 
-![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
+- [Screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
 
 ## Using variables
 
-Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):
+Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/_variables.scss):
 
 ```scss
 @import "sass-zero/variables";
 
 .block {
-  color: $red-300;
+  color: $rose-500;
 
-  &__element {
-    color: $red-400;
+  &__element_one {
+    color: $fuchsia-500;
+  }
+
+  &__element_two {
+    color: $purple-500;
   }
 
   &--modifier {
-    color: $red-500;
+    color: $violet-500;
   }
 }
 ```
 
 ```html
 <div class="block block--modifier">
-  <div class="block__element" />
+  <div class="block__element_one" />
+  <div class="block__element_two" />
 </div>
 ```
 
@@ -102,10 +105,34 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 1. Copy `.sass-zero-references.scss` to the root of your application.
 2. Install [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss).
 
-### Atom/TextMate
+### Pulsar/TextMate
 
 1. Copy `.sass-zero-references.scss` to the root of your application.
 
+## Customization
+
+### Breadboard
+
+When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
+
+You will need to remove the breadboard from application.css:
+
+```css
+*= require sass-zero/base
+*= require sass-zero/utilities
+```
+
+### Variables
+
+Instead of using the default variables you can add or change variables, I recommend you make a copy of `_variables.scss` to your application and change it as you want.
+
+```scss
+@import "sass-zero/variables/border";
+@import "sass-zero/variables/breakpoints";
+@import "design-system/colors";
+...
+```
+
 ## Development
 
 To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/app/assets/stylesheets/sass-zero/{mixins.scss → _mixins.scss}

@@ -1,7 +1,4 @@
-@import "variables/border";
-@import "variables/effects";
 @import "variables/sizing";
-@import "variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -39,7 +36,7 @@
   padding-right: $padding-x;
   padding-left: $padding-x;
   margin-right: auto;
-  margin-left:  auto;
+  margin-left: auto;
 }
 
 @mixin gradient($direction, $from, $to: transparent, $via: null) {

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/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.1.6"
+    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.6
+  version: 1.1.7
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-04 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

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

@@ -1,363 +0,0 @@
-@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;
-}