sass-zero 1.3.3 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6209a9fda20fd0d3480f03bd3f3d65c7ee5dae1831d47e98c353eca33f8a8e6c
-  data.tar.gz: 2d1232cd4718b65ecc43d11e02020373270e6d7848e2074fc1553d31150c308d
+  metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
+  data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
 SHA512:
-  metadata.gz: e56ccc926b0cdb2df8924603749be00ab25e58dfd01a2f6d2a0848827dc4b80212c5cad8b596e611a4fbf8dfca898432f18eb12d7703cd0118eb8845c3dff953
-  data.tar.gz: a5e7aec47acc1620e460b96d561938845eaf0db7c8231a1e093e75685914ecc328061cacda7885a7c3c89534af128918c9bfd02de83e90f69874140555e89b1f
+  metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
+  data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.3.3)
+    sass-zero (1.4.0)
 
 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

@@ -30,18 +30,23 @@ $radius-secondary: $rounded;
   border-color: var(--color-border);
 }
 
-html {
+body {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
 }
 
+@media (max-width: $breakpoint-md - 1) {
+  body { font-size: $text-sm; }
+}
+
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-2 $size-3;
+  padding: $size-1-5 $size-4;
+  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-5;
   width: $w-full;
 
   &--select {
@@ -102,19 +107,19 @@ html {
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   box-shadow: $shadow-lg;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.2); margin: $size-1;
+  transform: scale(1.7); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3 $size-4;
+  padding: $size-3;
 }
 
 code {
@@ -133,7 +138,7 @@ pre {
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-2 $size-3;
+    padding: $size-3;
     white-space: pre;
   }
 }
@@ -158,7 +163,7 @@ hr {
 }
 
 menu, ul, ol {
-  padding-left: $size-10;
+  padding-left: $size-8;
 }
 
 menu, ul {
@@ -173,26 +178,22 @@ dt {
   font-weight: $font-bold;
 }
 
-label, legend, dt, dd, li {
-  margin-bottom: $size-1;
+fieldset, .input {
+  margin-bottom: $size-6;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-4;
-}
-
-fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
+table, progress, blockquote, pre, menu, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   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,13 +214,13 @@ 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-4;
   text-align: left;
 }
 
@@ -236,26 +229,26 @@ h1, h2, h3, h4, h5, h6, .hdg {
   line-height: $leading-tight;
 }
 
-h1, .hdg--4xl {
+h1, .hdg--xx-large {
+  font-size: $text-5xl;
+}
+
+h2, .hdg--x-large {
   font-size: $text-4xl;
 }
 
-h2, .hdg--3xl {
+h3, .hdg--large {
   font-size: $text-3xl;
 }
 
-h3, .hdg--2xl {
+h4, .hdg--medium {
   font-size: $text-2xl;
 }
 
-h4, .hdg--xl {
+h5, .hdg--small {
   font-size: $text-xl;
 }
 
-h5, .hdg--lg {
+h6, .hdg--x-small {
   font-size: $text-lg;
 }
-
-h6, .hdg--base {
-  font-size: $text-base;
-}

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

@@ -98,22 +98,6 @@
   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-5,
+  "sm":  $size-3,
+  "md":  $size-6,
+  "lg":  $size-9,
+  "xl":  $size-12
 );

data/example.html

@@ -1,4 +1,4 @@
-<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>
@@ -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,17 +67,17 @@
       <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="push-xs--bottom">
         <input type="checkbox" id="option1" name="option1" value="1" checked>
         <label for="option1" class="u-display-ib">Option 1</label>
       </div>
-      <div>
+      <div class="push-xs--bottom">
         <input type="checkbox" id="option2" name="option2" value="2">
         <label for="option2" class="u-display-ib">Option 2</label>
       </div>
@@ -88,13 +88,13 @@
     </fieldset>
 
     <fieldset>
-      <legend class="txt--bold">Choose your option</legend>
+      <legend class="txt--bold push-xs--bottom">Choose your option</legend>
 
-      <div>
+      <div class="push-xs--bottom">
         <input type="radio" id="radio1" name="radio" value="1" checked>
         <label for="radio1" class="u-display-ib">Option 1</label>
       </div>
-      <div>
+      <div class="push-xs--bottom">
         <input type="radio" id="radio2" name="radio" value="2">
         <label for="radio2" class="u-display-ib">Option 2</label>
       </div>
@@ -107,7 +107,7 @@
     <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.0"
   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.0
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-11 00:00:00.000000000 Z
+date: 2023-07-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email: