sass-zero 1.0.8 → 1.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41f5961f2e4121bcc2bf748c61346efa6936d44f5111d51262ecaf45b174d17f
-  data.tar.gz: 759ced164e039dfdfb0f6291a5ec05aa31afce6af6ae1c4fef8b48dc159d6ddd
+  metadata.gz: 5914b5992e27b9c98c9de6c6afe6a6de7c047b6df96781340a2888cff814374d
+  data.tar.gz: 97519510d807536d8706d0a7168f3a356801728ccb7a76ec3c6a059fd516b3da
 SHA512:
-  metadata.gz: 265d6df80f8ceb1aa0527427d833a09f9605cabb668bc8fb851f435201f671db52fafc1e5e35ad02b9ab69185f06cb605e28ce7026a33e8d4c21eaed6fa71021
-  data.tar.gz: 71a935136ad83536ee5f4f782f27fb70456183221c5f6386572a0f61cbff4f11dc29068da86824447179261f3f010b32ec81b9f0609172f7b9ccc2347547517d
+  metadata.gz: 25f2a6869a2e9e6ad06b26d3e1688c170f1fa25f26b32c2595114c44810b2efe6e4f18c7d9b68b3b695e82000842edb734fe3d103e20705815d87ec5f6ddc564
+  data.tar.gz: 0b6157c85bd2b3ad3ac1821f4a4d2a16b50e7ccba7a96488a79d8e76b0f9cf62c7993cc8cbf5d2058f1c0f18a8e05f6b395cefadaa285123899b6a68132e8a6e

data/Example.html

@@ -19,9 +19,21 @@
   <button class="btn btn--tertiary">Button Tertiary</button>
 
   <a href="#" class="btn btn--secondary">Link Button</a>
+
   <input type="submit" value="Submit Button" class="btn btn--secondary" />
 
-  <button class="btn btn--secondary"><i class="bx bx-plus"></i> Icon Button</button>
+  <details>
+    <summary class="btn btn--secondary">Popup Button</summary>
+    <div class="popup-menu push-xs--top u-position--right">
+      <ul class="list--unindented u-nowrap flush">
+        <li>Unordered list item 1</li>
+        <li>Unordered list item 2</li>
+        <li>Unordered list item 3</li>
+      </ul>
+    </div>
+  </details>
+
+  <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
   <button class="btn btn--secondary btn--small">Small Button</button>
 
   <hr>
@@ -52,7 +64,7 @@
     <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
 
     <fieldset>
-      <legend>Choose your options</legend>
+      <legend class="txt--bold">Choose your options</legend>
 
       <div>
         <input type="checkbox" id="option1" name="option1" value="1" checked>
@@ -69,7 +81,7 @@
     </fieldset>
 
     <fieldset>
-      <legend>Choose your option</legend>
+      <legend class="txt--bold">Choose your option</legend>
 
       <div>
         <input type="radio" id="radio1" name="radio" value="1" checked>
@@ -115,11 +127,6 @@
     </tbody>
   </table>
 
-  <details>
-    <summary>Some details</summary>
-    <p>More info about the details.</p>
-  </details>
-
   <blockquote>
     <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
     <cite class="txt--sm">– Stephen King</cite>
@@ -137,29 +144,29 @@
     </code>
   </div>
 
-  <div class="push-md--bottom">
-    <label for="progres" class="u-display-b txt--bold">Progress</label>
-    <progress id="progres" max="100" value="70">70%</progress>
-  </div>
-
   <div class="push-3xl--bottom">
     <dialog open>
-      User was successfully created.
-      <form method="dialog" class="u-display-ib push-md--left txt--lg">
-        <button type="submit" value="dismiss">&times;</button>
+      <form method="dialog">
+        <span>User was successfully created.</span>
+        <button type="submit" value="dismiss" class="push-xs--left txt--lg">&times;</button>
       </form>
     </dialog>
   </div>
 
+  <div class="push-md--bottom">
+    <label for="progres" class="u-display-b txt--bold">Progress</label>
+    <progress id="progres" max="100" value="70">70%</progress>
+  </div>
+
   <hr>
 
-  <ul class="list--unindented ">
+  <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 ">
+  <ol class="list--unindented">
     <li>Ordered list item 1</li>
     <li>Ordered list item 2</li>
     <li>Ordered list item 3</li>

data/README.md

@@ -2,7 +2,7 @@
 
 SASS-ZERO is a css framework that brings concepts from [tailwindcss](https://tailwindcss.com) and [milligram](https://milligram.io) but with ideas from [BEM](http://getbem.com/naming), [Refactoring UI](https://refactoringui.com/book) and [Shape UP](https://basecamp.com/shapeup).
 
-![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-2.png)
+![screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
 
 ### Milligram
 

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

@@ -3,8 +3,8 @@
 
 $font-family: $font-sans;
 
-$radius-input:   $rounded;
-$radius-default: $rounded;
+$radius-primary:   $rounded;
+$radius-secondary: $rounded;
 
 :root {
   --color-bg--main:      #{$white};
@@ -12,7 +12,6 @@ $radius-default: $rounded;
   --color-bg--highlight: #{$gray-200};
   --color-primary:       #{$gray-900};
   --color-text:          #{$gray-900};
-  --color-focus-ring:    #{rgba($black, $opacity-50)};
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,7 +21,6 @@ $radius-default: $rounded;
     --color-bg--highlight: #{$gray-700};
     --color-primary:       #{$white};
     --color-text:          #{$white};
-    --color-focus-ring:    #{rgba($white, $opacity-50)};
   }
 }
 
@@ -34,7 +32,7 @@ html {
 }
 
 .btn {
-  border-radius: $radius-default;
+  border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
@@ -61,16 +59,11 @@ html {
     font-size: $text-sm;
   }
 
-  & > i {
+  &__icon {
     vertical-align: sub;
     font-size: 1.25em;
   }
 
-  &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
-    @include outline-none;
-  }
-
   &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
@@ -78,12 +71,10 @@ html {
 }
 
 .input {
-  -webkit-appearance: none;
-
+  @include appearance-none;
   resize: none;
-  appearance: none;
   background-color: var(--color-bg--main);
-  border-radius: $radius-input;
+  border-radius: $radius-secondary;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $w-full;
@@ -97,25 +88,24 @@ html {
     background-size: 5px 5px, 5px 5px;
   }
 
-  &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
-    @include outline-none;
-  }
-
   &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
   }
 }
 
+.popup-menu {
+  background-color: var(--color-bg--surface);
+  border-radius: $radius-secondary;
+  padding: $size-2 $size-3;
+  box-shadow: $shadow-md;
+  position: absolute;
+  z-index: $z-10;
+}
+
 input[type="checkbox"], input[type="radio"] {
   transform: scale(1.2, 1.2);
   margin: $size-1;
-
-  &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
-    @include outline-none;
-  }
 }
 
 blockquote {
@@ -167,11 +157,11 @@ a {
   font-weight: $font-bold;
 }
 
-ul, ol {
+menu, ul, ol {
   padding-left: $size-10;
 }
 
-ul {
+menu, ul {
   list-style: disc outside;
 }
 
@@ -179,11 +169,11 @@ ol {
   list-style: decimal outside;
 }
 
-legend, dt {
+dt {
   font-weight: $font-bold;
 }
 
-label, legend, dt {
+label, legend, dt, dd, li {
   margin-bottom: $size-1;
 }
 
@@ -195,15 +185,15 @@ fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
+table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
-  border-radius: $radius-default;
+  border-radius: $radius-primary;
   padding: $size-3 $size-4;
-  box-shadow: $shadow-md;
+  box-shadow: $shadow-lg;
   color: inherit;
 }
 
@@ -220,15 +210,16 @@ progress {
 }
 
 details {
-  background-color: var(--color-bg--surface);
-  border-left-width: $border-4;
-  padding: $size-2 $size-3;
+  position: relative;
+  display: inline-block;
 }
 
 summary {
-  padding: $size-1 $size-0;
-  font-weight: $font-bold;
-  cursor: pointer;
+  list-style: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
 }
 
 table, progress {
@@ -238,7 +229,7 @@ table, progress {
 td, th {
   border-bottom-width: $border;
   padding: $size-3 $size-4;
-  text-align: inherit;
+  text-align: left;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {

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

@@ -24,14 +24,9 @@
   outline-offset: 2px;
 }
 
-@mixin outline-white {
-  outline: 2px dotted white;
-  outline-offset: 2px;
-}
-
-@mixin outline-black {
-  outline: 2px dotted black;
-  outline-offset: 2px;
+@mixin appearance-none {
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 @mixin progress-bar {

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

@@ -56,7 +56,7 @@
 
 .u-disabled {
   pointer-events: none;
-  opacity: $opacity-30;
+  opacity: $opacity-50;
 }
 
 .u-off-screen {

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

@@ -2,7 +2,7 @@
 @import "sass-zero/mixins";
 
 .list--unindented {
-  padding-left: $size-4;
+  padding-left: 1.2em;
 }
 
 .list--flush {

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.0.8"
+    VERSION = "1.0.12"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "1.0.8",
+	"version": "1.0.12",
 	"description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
 	"homepage": "https://github.com/lazaronixon/sass-zero",
 	"repository": "lazaronixon/sass-zero",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.0.8
+  version: 1.0.12
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-08 00:00:00.000000000 Z
+date: 2022-02-10 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: