sass-zero 0.0.53 → 0.0.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef1878766268af479d4f32219b7c7ba331ab129d10f6b2f96952be33ec0e8ce9
-  data.tar.gz: b5bdbde5022b4d28ba7d0f3f1f2a2458f9dfc3cf9ac57d0eccc16061992c2280
+  metadata.gz: 1d59dcac8d72f42763e08239e15c235964dac127c94acf45f09964919f01cfa9
+  data.tar.gz: ce884ee7a8cf2612e37852f294be33be241d62c3a7c3f77e250a4aec47ec3e0b
 SHA512:
-  metadata.gz: fdbaaae3bfc261ebaa88aa9f093c23cfdbfbb4555f9973b45cb74b2b2978cc642404170c5d3bb7e0d0adbdf972e66e3c079181bed723e05215a8249fd07c2671
-  data.tar.gz: e8baebd379c732110fce7c439bfdd7d4bb830c6b3e283b4967b575cfd61c50299e8bb9c8c43e19b9e1bdcd3da68f9298de2865883cf63fe7295389a797acfc79
+  metadata.gz: d632a79c4cf523755d8e7059887c9f16074261de72c9bddec8dbec10bd2054c9cd72e86b52eaa1592806be40e9cad5b74acdb751b13ca738460a8a0b50092009
+  data.tar.gz: 441fe39c8be344a7cf6e433ec5f8cb410eca2fb03d70e2372df8b792e513974ffce9209cfca94ee85fce8d76cd66b82b75b5e7dee8911c9a07620401b5f656ff

data/Example.html

@@ -5,6 +5,8 @@
   <small>Small</small>
   <strong>Strong</strong>
   <u>Underline</u>
+  <kbd>CTRL+C</kbd>
+  <mark>Highlighted text</mark>
   <h1>Heading</h1>
   <h2>Heading</h2>
   <h3>Heading</h3>
@@ -40,31 +42,31 @@
 
       <div class="push-md--bottom">
         <div>
-          <input type="checkbox" name="option1" value="1" class="checkbox" checked>
+          <input type="checkbox" id="option1" name="option1" value="1" checked>
           <label for="option1" class="u-display-ib">Option 1</label>
         </div>
         <div>
-          <input type="checkbox" name="option2" value="2" class="checkbox">
+          <input type="checkbox" id="option2" name="option2" value="2">
           <label for="option2" class="u-display-ib">Option 2</label>
         </div>
         <div>
-          <input type="checkbox" name="option3" value="3" class="checkbox">
+          <input type="checkbox" id="option3" name="option3" value="3">
           <label for="option3" class="u-display-ib">Option 3</label>
         </div>
       </div>
 
       <div class="push-md--bottom">
         <div>
-          <input type="radio" name="radio" value="1" class="radio" checked>
-          <label for="radio" class="u-display-ib">Option 1</label>
+          <input type="radio" id="radio1" name="radio" value="1" checked>
+          <label for="radio1" class="u-display-ib">Option 1</label>
         </div>
         <div>
-          <input type="radio" name="radio" value="2" class="radio">
-          <label for="radio" class="u-display-ib">Option 2</label>
+          <input type="radio" id="radio2" name="radio" value="2">
+          <label for="radio2" class="u-display-ib">Option 2</label>
         </div>
         <div>
-          <input type="radio" name="radio" value="3" class="radio">
-          <label for="radio" class="u-display-ib">Option 3</label>
+          <input type="radio" id="radio3" name="radio" value="3">
+          <label for="radio3" class="u-display-ib">Option 3</label>
         </div>
       </div>
     </div>
@@ -97,19 +99,27 @@
     </tbody>
   </table>
 
+  <details>
+    <summary class="txt--bold">Some details</summary>
+    <p>More info about the details.</p>
+  </details>
+
   <blockquote>
-    <p class="flush"><em>Yeah!! Milligram is amazing.</em></p>
+    <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
+    <cite>– Stephen King</cite>
   </blockquote>
 
   <pre><code>.milligram {
   color: #9b4dca;
 }</code></pre>
 
-  <code>
-  .milligram {
-    color: #9b4dca;
-  }
-  </code>
+  <div class="push-md--bottom">
+    <code>
+    .milligram {
+      color: #9b4dca;
+    }
+    </code>
+  </div>
 
   <hr>
 

data/README.md

@@ -70,7 +70,8 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 Add this to your application's Gemfile:
 
 ```ruby
-gem 'sass-zero'
+gem "sass-zero"
+gem "autoprefixer-rails"
 ```
 
 ## Usage
@@ -91,11 +92,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 .block {
   color: $red-300;
 
-  &__elem {
+  &__element {
     color: $red-400;
   }
 
-  &--mod {
+  &--modifier {
     color: $red-500;
   }
 }

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

@@ -7,22 +7,19 @@ $radius-input:  $rounded;
 $radius-button: $rounded;
 
 :root {
-  --color-bg--main:    #{$white};
-  --color-bg--surface: #{$gray-100};
-  --color-primary:     #{$gray-900};
-  --color-text:        #{$gray-900};
-  --color-focus-ring:  #{rgba($gray-900, $opacity-50)};
-
-  --image-bg-select:        url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none"  xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
-  --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
-  --image-checked-radio:    url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+  --color-bg--main:      #{$white};
+  --color-bg--surface:   #{$gray-100};
+  --color-bg--highlight: #{$gray-200};
+  --color-primary:       #{$gray-900};
+  --color-text:          #{$gray-900};
+  --color-focus-ring:    #{rgba($gray-900, $opacity-50)};
 }
 
 html {
+  accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
-  font-size: 16px;
 }
 
 .btn {
@@ -33,11 +30,6 @@ html {
   padding: $size-2 $size-4;
   cursor: pointer;
 
-  &:disabled {
-    pointer-events: none;
-    opacity: $opacity-50;
-  }
-
   &--primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
@@ -54,6 +46,16 @@ html {
     background-color: $transparent;
     border-color: $transparent;
   }
+
+  &:focus {
+    box-shadow: ring($color: var(--color-focus-ring));
+    @include outline-none;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: $opacity-50;
+  }
 }
 
 .input {
@@ -66,11 +68,10 @@ html {
   width: $w-full;
 
   &--select {
-    background-image: var(--image-bg-select);
-    background-position: right $size-2 center;
+    background-image: linear-gradient(45deg, transparent 49%, var(--color-text) 51%), linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
+    background-position: calc(100% - 20px), calc(100% - 15px);
     background-repeat: no-repeat;
-    background-size: auto $size-5;
-    padding-right: $size-8;
+    background-size: 5px 5px, 5px 5px;
   }
 
   &:focus {
@@ -79,32 +80,12 @@ html {
   }
 }
 
-.checkbox {
-  border-radius: $rounded;
-  @include input-selection(var(--color-primary));
-
-  &:checked {
-    background-image: var(--image-checked-checkbox);
-    @include checked;
-  }
+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;
-  }
-}
-
-.radio {
-  border-radius: $rounded-full;
-  @include input-selection(var(--color-primary));
-
-  &:checked {
-    background-image: var(--image-checked-radio);
-    @include checked;
-  }
-
-  &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
+    box-shadow: ring($width: 2px, $color: var(--color-focus-ring));
     @include outline-none;
   }
 }
@@ -114,11 +95,14 @@ blockquote {
   padding: $size-3 $size-4;
 }
 
+cite {
+  font-size: $text-sm;
+}
+
 code {
   background-color: var(--color-bg--surface);
   border-radius: $rounded;
   font-size: $text-sm;
-  margin: $size-0 $size-1;
   padding: $size-1 $size-2;
   white-space: nowrap;
 }
@@ -136,6 +120,20 @@ pre {
   }
 }
 
+kbd {
+  background-color: var(--color-primary);
+  border-radius: $rounded;
+  font-size: $text-sm;
+  padding: $size-1 $size-2;
+  color: var(--color-bg--main);
+}
+
+mark {
+  background-color: var(--color-bg--highlight);
+  border-radius: $rounded;
+  padding: $size-1 $size-2;
+}
+
 hr {
   margin: $size-6 $size-0;
 }
@@ -168,10 +166,20 @@ fieldset, .input {
   margin-bottom: $size-6;
 }
 
-blockquote, figure, p, pre, table, ul, ol, dl {
+table, details, blockquote, p, pre, ul, ol, dl {
   margin-bottom: $size-6;
 }
 
+details {
+  padding: $size-2 $size-3;
+  background-color: var(--color-bg--surface);
+  border-left-width: $border-4;
+}
+
+summary {
+  cursor: pointer;
+}
+
 table {
   width: $w-full;
 }

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

@@ -19,22 +19,6 @@
   overflow: hidden;
 }
 
-@mixin input-selection($color) {
-  appearance: none;
-  border-width: $border;
-  color: $color;
-  margin-bottom: -0.1rem;
-  height: $size-4;
-  width: $size-4;
-}
-
-@mixin checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
 @mixin outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;

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

@@ -14,28 +14,11 @@
   list-style: none;
 }
 
-.list--spaced > li + li {
-  margin-top: $size-2;
-}
-
-.list--inside-bulleted {
-  padding-left: $size-0;
-  list-style-position: inside;
-}
-
-.list--ruled-top {
-  border-top-width: $border;
-}
-
-.list--inline > li {
+.list--inline li {
   display: inline-block;
+  vertical-align: middle;
 }
 
-.list--inline > li + li {
-  margin-left: $size-2;
-}
-
-.list--ruled > li {
-  padding: $size-4 $size-2;
-  border-top-width: $border;
+.list--dividers li:not(:last-child) {
+  border-bottom-width: $border;
 }

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.53"
+    VERSION = "0.0.57"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.53",
+	"version": "0.0.57",
 	"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: 0.0.53
+  version: 0.0.57
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-11-20 00:00:00.000000000 Z
+date: 2022-01-12 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: