sass-zero 1.3.3 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6209a9fda20fd0d3480f03bd3f3d65c7ee5dae1831d47e98c353eca33f8a8e6c
-  data.tar.gz: 2d1232cd4718b65ecc43d11e02020373270e6d7848e2074fc1553d31150c308d
+  metadata.gz: 43fba23c8010823b3278387a11cfc2db218044e4cc61cf6219beeaaf060a6940
+  data.tar.gz: 03e0c3a1c4fbc02616943b771985c7ed27c56fcceaa80fdd83d1e970304477b7
 SHA512:
-  metadata.gz: e56ccc926b0cdb2df8924603749be00ab25e58dfd01a2f6d2a0848827dc4b80212c5cad8b596e611a4fbf8dfca898432f18eb12d7703cd0118eb8845c3dff953
-  data.tar.gz: a5e7aec47acc1620e460b96d561938845eaf0db7c8231a1e093e75685914ecc328061cacda7885a7c3c89534af128918c9bfd02de83e90f69874140555e89b1f
+  metadata.gz: a586b446208ff8e53a49b7672d5b4200307e62bbd535de22f4ea420c76232f8b958f17f177c923fa616cfd1d4319528951cbc936bced755e414c35668f5d4884
+  data.tar.gz: cbaadf48fc3f0d2a2dd1044c58d57da8304faf0662c435aa9cc356ecaf9776b6086455fee9b486c1d779d8466eb25a44249614d8e856a74be2b698fd6f2e5e42

data/Gemfile.lock

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

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

@@ -4,12 +4,9 @@
 // General
 // *******************************************************************
 
-@mixin make-container($padding-x: $size-4) {
-  width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
-  margin-right: auto;
-  margin-left: auto;
+@mixin make-container($padding: $size-4) {
+  width: 100%; margin: 0 auto;
+  padding: $padding;
 }
 
 @mixin ellipsis {
@@ -28,16 +25,6 @@
   -moz-osx-font-smoothing: auto;
 }
 
-@mixin progress-bar {
-  ::-webkit-progress-value {
-    @content;
-  }
-
-  ::-moz-progress-bar {
-    @content;
-  }
-}
-
 // *******************************************************************
 // Animations
 // *******************************************************************

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

@@ -37,11 +37,16 @@ html {
   font-family: $font-family;
 }
 
+@media (min-width: $breakpoint-md) {
+  html { font-size: $text-xl; }
+}
+
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-2 $size-3;
+  padding: $size-1 $size-3;
+  font-weight: $font-medium;
   cursor: pointer;
 
   &--primary {
@@ -81,7 +86,7 @@ html {
   background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
-  padding: $size-2 $size-3;
+  padding: $size-2;
   width: $w-full;
 
   &--select {
@@ -102,19 +107,18 @@ html {
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
-  box-shadow: $shadow-lg;
+  padding: $size-4;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.2); margin: $size-1;
+  transform: scale(1.35); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3 $size-4;
+  padding: $size-2-5;
 }
 
 code {
@@ -133,7 +137,7 @@ pre {
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-2 $size-3;
+    padding: $size-2-5;
     white-space: pre;
   }
 }
@@ -154,7 +158,8 @@ mark {
 }
 
 hr {
-  margin: $size-6 $size-0;
+  border-color: var(--color-primary);
+  margin: $size-5 $size-0;
 }
 
 menu, ul, ol {
@@ -173,26 +178,22 @@ dt {
   font-weight: $font-bold;
 }
 
-label, legend, dt, dd, li {
-  margin-bottom: $size-1;
+fieldset, .input {
+  margin-bottom: $size-5;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-4;
-}
-
-fieldset, .input {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
-table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
-  margin-bottom: $size-6;
+table, progress, blockquote, pre, menu, ul, ol, dl, p {
+  margin-bottom: $size-5;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-4;
   box-shadow: $shadow-lg;
   color: inherit;
 }
@@ -201,14 +202,6 @@ dialog::backdrop {
   background-color: rgba($gray-500, $opacity-75);
 }
 
-progress {
-  background-color: var(--color-bg--main);
-}
-
-@include progress-bar {
-  background-color: var(--color-primary);
-}
-
 details {
   display: inline-block;
 }
@@ -221,41 +214,40 @@ summary::-webkit-details-marker {
   display: none;
 }
 
-table, progress {
+table {
   width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
-  padding: $size-3 $size-4;
+  padding: $size-2-5;
   text-align: left;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  font-weight: $font-bold;
-  line-height: $leading-tight;
+  font-weight: $font-bold; line-height: $leading-none;
 }
 
-h1, .hdg--4xl {
+h1, .hdg--xx-large {
   font-size: $text-4xl;
 }
 
-h2, .hdg--3xl {
+h2, .hdg--x-large {
   font-size: $text-3xl;
 }
 
-h3, .hdg--2xl {
+h3, .hdg--large {
   font-size: $text-2xl;
 }
 
-h4, .hdg--xl {
+h4, .hdg--medium {
   font-size: $text-xl;
 }
 
-h5, .hdg--lg {
+h5, .hdg--small {
   font-size: $text-lg;
 }
 
-h6, .hdg--base {
+h6, .hdg--x-small {
   font-size: $text-base;
 }

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

@@ -94,26 +94,6 @@
   font-size: $text-4xl;
 }
 
-.txt--5xl {
-  font-size: $text-5xl;
-}
-
-.txt--6xl {
-  font-size: $text-6xl;
-}
-
-.txt--7xl {
-  font-size: $text-7xl;
-}
-
-.txt--8xl {
-  font-size: $text-8xl;
-}
-
-.txt--9xl {
-  font-size: $text-9xl;
-}
-
 .undecorated {
   color: inherit;
   text-decoration: none;

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

@@ -2,42 +2,46 @@
 // Default sizing scale
 // By default, SASS-ZERO includes a generous and comprehensive numeric sizing scale.
 // *******************************************************************
-$size-px: 1px;
-$size-0:  0;
-$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-px:  1px;
+$size-0:   0;
+$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-2,
-  "sm": $size-4,
-  "md": $size-8,
-  "lg": $size-16,
-  "xl": $size-32
+  "xs":  $size-1,
+  "sm":  $size-2-5,
+  "md":  $size-5,
+  "lg":  $size-9,
+  "xl":  $size-10
 );

data/example.html

@@ -1,7 +1,7 @@
-<main class="container container--lg" style="background-color: var(--color-bg--surface);">
+<main class="container container--lg" style="background: var(--color-bg--surface);">
   <div class="push-md--bottom">
     <div class="push-sm--bottom">
-      <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
+      <p>The base type is 1rem (16px) over 1.5 line height (24px)</p>
       <a href="#" class="txt--underline">Anchor</a>
       <em>Emphasis</em>
       <small>Small</small>
@@ -33,7 +33,7 @@
     <details class="u-position-context">
       <summary class="btn btn--secondary">Dropdown Button</summary>
       <div class="dropdown push-xs--top u-position--right">
-        <ul class="list--unindented u-nowrap flush">
+        <ul class="list--unbulleted u-nowrap flush">
           <li>Unordered list item 1</li>
           <li>Unordered list item 2</li>
           <li>Unordered list item 3</li>
@@ -46,10 +46,10 @@
   </div>
 
   <form class="push-md--bottom">
-    <label for="nameField" class="u-display-b txt--bold">Name</label>
-    <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
+    <label for="nameField" class="u-display-b txt--bold push-xs--bottom">Name</label>
+    <input type="text" placeholder="Lázaro Nixon" id="nameField" class="input">
 
-    <label for="iceCreamField" class="u-display-b txt--bold">Choose a flavor:</label>
+    <label for="iceCreamField" class="u-display-b txt--bold push-xs--bottom">Choose a flavor:</label>
     <input list="iceCreamFlavors" id="iceCreamField" class="input" />
     <datalist id="iceCreamFlavors">
         <option value="Chocolate">
@@ -59,7 +59,7 @@
         <option value="Vanilla">
     </datalist>
 
-    <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
+    <label for="ageRangeField" class="u-display-b txt--bold push-xs--bottom">Age Range</label>
     <select id="ageRangeField" class="input input--select">
       <option value="0-13">0-13</option>
       <option value="14-17">14-17</option>
@@ -67,47 +67,47 @@
       <option value="24+">24+</option>
     </select>
 
-    <label for="commentField" class="u-display-b txt--bold">Comment</label>
-    <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
+    <label for="commentField" class="u-display-b txt--bold  push-xs--bottom">Comment</label>
+    <textarea placeholder="Hi Nixon …" id="commentField" rows="3" class="input"></textarea>
 
     <fieldset>
-      <legend class="txt--bold">Choose your options</legend>
+      <legend class="txt--bold push-xs--bottom">Choose your options</legend>
 
-      <div>
+      <div class="flex flex--align-center push-xs--bottom">
         <input type="checkbox" id="option1" name="option1" value="1" checked>
-        <label for="option1" class="u-display-ib">Option 1</label>
+        <label for="option1" class="flush push-xs--left">Option 1</label>
       </div>
-      <div>
+      <div class="flex flex--align-center push-xs--bottom">
         <input type="checkbox" id="option2" name="option2" value="2">
-        <label for="option2" class="u-display-ib">Option 2</label>
+        <label for="option2" class="flush push-xs--left">Option 2</label>
       </div>
-      <div>
+      <div class="flex flex--align-center">
         <input type="checkbox" id="option3" name="option3" value="3">
-        <label for="option3" class="u-display-ib">Option 3</label>
+        <label for="option3" class="flush push-xs--left">Option 3</label>
       </div>
     </fieldset>
 
     <fieldset>
-      <legend class="txt--bold">Choose your option</legend>
+      <legend class="txt--bold push-xs--bottom">Choose your option</legend>
 
-      <div>
+      <div class="flex flex--align-center push-xs--bottom">
         <input type="radio" id="radio1" name="radio" value="1" checked>
-        <label for="radio1" class="u-display-ib">Option 1</label>
+        <label for="radio1" class="flush push-xs--left">Option 1</label>
       </div>
-      <div>
+      <div class="flex flex--align-center push-xs--bottom">
         <input type="radio" id="radio2" name="radio" value="2">
-        <label for="radio2" class="u-display-ib">Option 2</label>
+        <label for="radio2" class="flush push-xs--left">Option 2</label>
       </div>
-      <div>
+      <div class="flex flex--align-center">
         <input type="radio" id="radio3" name="radio" value="3">
-        <label for="radio3" class="u-display-ib">Option 3</label>
+        <label for="radio3" class="flush push-xs--left">Option 3</label>
       </div>
     </fieldset>
 
     <input type="submit" value="Send" class="btn btn--primary">
   </form>
 
-  <table class="push-md--bottom">
+  <table>
     <thead>
       <tr>
         <th>Name</th>
@@ -132,24 +132,23 @@
     </tbody>
   </table>
 
-  <div class="push-md--bottom">
-    <ul class="list--unindented">
-      <li>Unordered list item 1</li>
-      <li>Unordered list item 2</li>
-      <li>Unordered list item 3</li>
-    </ul>
-
-    <ol class="list--unindented">
-      <li>Ordered list item 1</li>
-      <li>Ordered list item 2</li>
-      <li>Ordered list item 3</li>
-    </ol>
-
-    <dl>
-      <dd>A description list is perfect for defining terms.</dd>
-      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
-    </dl>
-  </div>
+  <ul class="list--unindented">
+    <li>Unordered list item 1</li>
+    <li>Unordered list item 2</li>
+    <li>Unordered list item 3</li>
+  </ul>
+
+  <ol class="list--unindented">
+    <li>Ordered list item 1</li>
+    <li>Ordered list item 2</li>
+    <li>Ordered list item 3</li>
+  </ol>
+
+  <dl>
+    <dt>Description lists</dt>
+    <dd>A description list is perfect for defining terms.</dd>
+    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+  </dl>
 
   <div class="push-md--bottom">
     <code>.block { color: #9b4dca; }</code>
@@ -158,16 +157,13 @@
   <pre><code>.block { color: #9b4dca; }</code></pre>
 
   <blockquote>
-    <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
+    <p class="flush">Friends don’t spy; true friendship is about privacy, too.</p>
     <cite class="txt--sm">– Stephen King</cite>
   </blockquote>
 
-  <div>
-    <label for="progress" class="u-display-b txt--bold">Progress</label>
-    <progress id="progress" max="100" value="70">70%</progress>
-  </div>
+  <hr>
 
-  <div style="height: 55px;">
+  <div style="height: 85px;">
     <dialog open>
       <form method="dialog">
         <span>This is a native dialog with a close button.</span>

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.3.3"
+    VERSION = "1.4.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.3.3
+  version: 1.4.1
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-11 00:00:00.000000000 Z
+date: 2023-07-14 00:00:00.000000000 Z
 dependencies: []
 description:
 email: