sass-zero 0.0.55 → 0.0.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87bd9449a35b1aaf5635f44d910ee5993e650750413f46f77a2759e19d823cbe
-  data.tar.gz: 10bd5bb77d0cb2e23d2c1823c007f3c14888ef0fc35636e55fe567732cd9e24b
+  metadata.gz: 681331b510c60fd1ab5c3b9b308a7818164ce3eef6ed19851c436e5a533b694f
+  data.tar.gz: 1122523fea09214ded53cd922fe7fd0bf3ed0ed24cfa9d27538631ce98040a27
 SHA512:
-  metadata.gz: 21067c7675af269ca3e554ac823f9df8adfc44887b9280839a9b21e1d0deda985fb9e1da3e190268b97c292a5be4867d3d3952675157787b75aed1149fc1e20a
-  data.tar.gz: 6ef7f228182ba5ade57acb7fdaa37427f6ddec3467682addc489c4067f5481b2f940b2e1933b2a3057bd5d74847dfdf5ea2466de3a2c4ee8ded001c31efe08f8
+  metadata.gz: 04da4bfeea03866a3c10fb8ffd1bb0f691d0d192faf483e433f9c5f0a867b50b42c0595076b34c83fae46748b26b926bac8b2cd4899e59e6670a560480b16622
+  data.tar.gz: 93ec7018d346d113aaafdfa32645e6d9f9539a5bf1046dbe644e1a80a0022e3042a281f766c6d3f5e449876295f310a1dc91e67403a6d623fe3c772352de0a42

data/Example.html

@@ -40,30 +40,30 @@
 
       <div class="push-md--bottom">
         <div>
-          <input type="checkbox" id="option1" 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" id="option2" 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" id="option3" 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" id="radio1" name="radio" value="1" class="radio" checked>
+          <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" id="radio2" name="radio" value="2" class="radio">
+          <input type="radio" id="radio2" name="radio" value="2">
           <label for="radio2" class="u-display-ib">Option 2</label>
         </div>
         <div>
-          <input type="radio" id="radio3" name="radio" value="3" class="radio">
+          <input type="radio" id="radio3" name="radio" value="3">
           <label for="radio3" class="u-display-ib">Option 3</label>
         </div>
       </div>

data/README.md

@@ -91,11 +91,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

@@ -12,13 +12,10 @@ $radius-button: $rounded;
   --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>');
 }
 
 html {
+  accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
@@ -71,26 +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-primary) 51%), linear-gradient(135deg, var(--color-primary) 51%, transparent 49%);
+    background-position: calc(100% - 20px), calc(100% - 15px);
     background-repeat: no-repeat;
-    background-size: auto $size-5;
-    padding-right: $size-8;
-  }
-
-  &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
-    @include outline-none;
-  }
-}
-
-.checkbox {
-  border-radius: $rounded;
-  @include input-selection(var(--color-primary));
-
-  &:checked {
-    background-image: var(--image-checked-checkbox);
-    @include checked;
+    background-size: 5px 5px, 5px 5px;
   }
 
   &:focus {
@@ -99,17 +80,11 @@ html {
   }
 }
 
-.radio {
-  border-radius: $rounded-full;
-  @include input-selection(var(--color-primary));
-
-  &:checked {
-    background-image: var(--image-checked-radio);
-    @include checked;
-  }
+input[type="checkbox"], input[type="radio"] {
+  transform: scale(1.2, 1.2);
 
   &:focus {
-    box-shadow: ring($color: var(--color-focus-ring));
+    box-shadow: ring($width: 1.5px, $color: var(--color-focus-ring));
     @include outline-none;
   }
 }

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/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.55"
+    VERSION = "0.0.56"
   end
 end

data/package.json

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