sass-zero 1.4.0 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
-  data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
+  metadata.gz: 43fba23c8010823b3278387a11cfc2db218044e4cc61cf6219beeaaf060a6940
+  data.tar.gz: 03e0c3a1c4fbc02616943b771985c7ed27c56fcceaa80fdd83d1e970304477b7
 SHA512:
-  metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
-  data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9
+  metadata.gz: a586b446208ff8e53a49b7672d5b4200307e62bbd535de22f4ea420c76232f8b958f17f177c923fa616cfd1d4319528951cbc936bced755e414c35668f5d4884
+  data.tar.gz: cbaadf48fc3f0d2a2dd1044c58d57da8304faf0662c435aa9cc356ecaf9776b6086455fee9b486c1d779d8466eb25a44249614d8e856a74be2b698fd6f2e5e42

data/Gemfile.lock

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

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

@@ -30,22 +30,22 @@ $radius-secondary: $rounded;
   border-color: var(--color-border);
 }
 
-body {
+html {
   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; }
+@media (min-width: $breakpoint-md) {
+  html { font-size: $text-xl; }
 }
 
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-1-5 $size-4;
+  padding: $size-1 $size-3;
   font-weight: $font-medium;
   cursor: pointer;
 
@@ -86,7 +86,7 @@ body {
   background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
-  padding: $size-2-5;
+  padding: $size-2;
   width: $w-full;
 
   &--select {
@@ -107,19 +107,18 @@ body {
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-6;
-  box-shadow: $shadow-lg;
+  padding: $size-4;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.7); margin: $size-1;
+  transform: scale(1.35); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3;
+  padding: $size-2-5;
 }
 
 code {
@@ -138,7 +137,7 @@ pre {
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-3;
+    padding: $size-2-5;
     white-space: pre;
   }
 }
@@ -159,11 +158,12 @@ mark {
 }
 
 hr {
-  margin: $size-6 $size-0;
+  border-color: var(--color-primary);
+  margin: $size-5 $size-0;
 }
 
 menu, ul, ol {
-  padding-left: $size-8;
+  padding-left: $size-10;
 }
 
 menu, ul {
@@ -179,21 +179,21 @@ dt {
 }
 
 fieldset, .input {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 table, progress, blockquote, pre, menu, ul, ol, dl, p {
-  margin-bottom: $size-6;
+  margin-bottom: $size-5;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-6;
+  padding: $size-4;
   box-shadow: $shadow-lg;
   color: inherit;
 }
@@ -220,35 +220,34 @@ table {
 
 td, th {
   border-bottom-width: $border;
-  padding: $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--xx-large {
-  font-size: $text-5xl;
+  font-size: $text-4xl;
 }
 
 h2, .hdg--x-large {
-  font-size: $text-4xl;
+  font-size: $text-3xl;
 }
 
 h3, .hdg--large {
-  font-size: $text-3xl;
+  font-size: $text-2xl;
 }
 
 h4, .hdg--medium {
-  font-size: $text-2xl;
+  font-size: $text-xl;
 }
 
 h5, .hdg--small {
-  font-size: $text-xl;
+  font-size: $text-lg;
 }
 
 h6, .hdg--x-small {
-  font-size: $text-lg;
+  font-size: $text-base;
 }

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

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

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

@@ -39,9 +39,9 @@ $size-80:  20rem;
 $size-96:  24rem;
 
 $size-map: (
-  "xs":  $size-1-5,
-  "sm":  $size-3,
-  "md":  $size-6,
+  "xs":  $size-1,
+  "sm":  $size-2-5,
+  "md":  $size-5,
   "lg":  $size-9,
-  "xl":  $size-12
+  "xl":  $size-10
 );

data/example.html

@@ -1,7 +1,7 @@
 <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>
@@ -73,34 +73,34 @@
     <fieldset>
       <legend class="txt--bold push-xs--bottom">Choose your options</legend>
 
-      <div class="push-xs--bottom">
+      <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 class="push-xs--bottom">
+      <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 push-xs--bottom">Choose your option</legend>
 
-      <div class="push-xs--bottom">
+      <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 class="push-xs--bottom">
+      <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>
 

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.4.0"
+    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.4.0
+  version: 1.4.1
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-13 00:00:00.000000000 Z
+date: 2023-07-14 00:00:00.000000000 Z
 dependencies: []
 description:
 email: