sass-zero 1.0.10 → 1.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68f7330dbd9cb3e845544d409b180a4e49f0e5c61138b85e209140385f95a12f
-  data.tar.gz: 185299448e7e080b8bd0e950ad4b0e4cd332d5e9865783998f9df01146e3b529
+  metadata.gz: 434617b953cb4c1b51ac562df8b612995eac6531e07bd07a4a0adb1f32e64a07
+  data.tar.gz: 5b50f9c8733265c4a6c81bfcb5c4bafa21174fddf667e4038fe81b498d2b8543
 SHA512:
-  metadata.gz: 5bd9b50752c33876ae9d403145f40905c75cade64315423a9fa4adee0ea07f35f3245192f0fb805633c55ae4fd3c453534316c74c0de8f4babf796f2b2c30ef6
-  data.tar.gz: d78d0d6e1e7e695b264f8ce8c2fead3d90c259c0013f6d163ff891fc0ec7379214e4201c649ed1a445632ec83070b15e59d871d84ea048daefb73fb7444c7b30
+  metadata.gz: 5ac370cd59f72392d1dd2979ddf2b0a1937ce21305d5968c492b456972fc3cdf0a74f30ac88af0f9c158794b059867c866f53b57bbfa3340a745518eb4d914f0
+  data.tar.gz: 17c4474dd4640aded41b8fa7a5d0db428c5597b5e03e46eb9eb9d8464b1ce633e7ed9d459a3b6d76e0f5d09551b6a60a72efc263c469ae30927d28e9a9a0367c

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>
@@ -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,11 +144,6 @@
     </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>
       <form method="dialog">
@@ -151,6 +153,11 @@
     </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">

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};
@@ -32,7 +32,7 @@ html {
 }
 
 .btn {
-  border-radius: $radius-default;
+  border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
@@ -59,7 +59,7 @@ html {
     font-size: $text-sm;
   }
 
-  & > i {
+  &__icon {
     vertical-align: sub;
     font-size: 1.25em;
   }
@@ -74,7 +74,7 @@ html {
   @include appearance-none;
   resize: 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;
@@ -94,6 +94,14 @@ html {
   }
 }
 
+.popup-menu {
+  background-color: var(--color-bg--surface);
+  border-radius: $radius-secondary;
+  padding: $size-2 $size-3;
+  box-shadow: $shadow-md;
+  position: absolute;
+}
+
 input[type="checkbox"], input[type="radio"] {
   transform: scale(1.2, 1.2);
   margin: $size-1;
@@ -176,15 +184,15 @@ fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, details, blockquote, figure, pre, menu, 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;
 }
 
@@ -201,15 +209,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 {

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.0.10"
+    VERSION = "1.0.11"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "1.0.10",
+	"version": "1.0.11",
 	"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.10
+  version: 1.0.11
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-09 00:00:00.000000000 Z
+date: 2022-02-10 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: