sass-zero 0.0.38 → 0.0.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: da0529f23db61de5fdb0dfd396b024df435f1e40be84c0339b2af5f58b73e4b3
-  data.tar.gz: 456fbcc46813198e3003bdbb457362d5b5e380e57f2777a4dbd5082a02cc9d32
+  metadata.gz: 06e133db6d4914987dbc2d77f08bcdd1671ad91fd57debe8c720330bfb708cb0
+  data.tar.gz: def1eda7c32c8f426ebb2b0bd43608e3b15ff917e88abb5056c67e07d8633004
 SHA512:
-  metadata.gz: 65ca85e6ee52aec6517a5bb64a72cdad1896e12365e016dd9cbce57c4ef550f7d89924772ff1a2d06dfafda8a8b880549249fdfe9fe8e21c240079672ee80f0f
-  data.tar.gz: a7c5336637313ae0d8df9cf30b462850af502e83584f4f79f9f9d4d67b689dcad35d5e34e63f5bbf73ac1fcfb20154d4e2934c54c567416a62a43d2ff3f146c1
+  metadata.gz: 4ad3cb7aad00280da0c4777c1fb10308c77dee3b58855c17aaa193215c320768cfec6906bbd1eb988dd5c498431eb29b46f0223cc4902f643803d9b0470b6861
+  data.tar.gz: 8544b5ce046ca7f5742c1e1212fb41d1c65d58829341f741f2d3db3305313f9644df84403299dc59aafcae3240c7f3764136f4eb2bf2a4ca47145b1f399f0e1f

data/Example.html

@@ -22,7 +22,7 @@
 
   <hr>
 
-  <form>
+  <form class="push-lg--bottom">
     <div class="push-md--bottom">
       <label for="nameField">Name</label>
       <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
@@ -41,30 +41,30 @@
       <div class="push-md--bottom">
         <div>
           <input type="checkbox" name="option1" value="1" class="checkbox" checked>
-          <label for="option1" class="u-display-ib">Option 1</label>
+          <label for="option1">Option 1</label>
         </div>
         <div>
           <input type="checkbox" name="option2" value="2" class="checkbox">
-          <label for="option2" class="u-display-ib">Option 2</label>
+          <label for="option2">Option 2</label>
         </div>
         <div>
           <input type="checkbox" name="option3" value="3" class="checkbox">
-          <label for="option3" class="u-display-ib">Option 3</label>
+          <label for="option3">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>
+          <label for="radio">Option 1</label>
         </div>
         <div>
           <input type="radio" name="radio" value="2" class="radio">
-          <label for="radio" class="u-display-ib">Option 2</label>
+          <label for="radio">Option 2</label>
         </div>
         <div>
           <input type="radio" name="radio" value="3" class="radio">
-          <label for="radio" class="u-display-ib">Option 3</label>
+          <label for="radio">Option 3</label>
         </div>
       </div>
     </div>

data/README.md

@@ -31,7 +31,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 ### Breadboard Theme
 
 - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
+- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
 
 ### Variables
 
@@ -40,6 +40,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
 - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
 - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
+- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
 - [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
 - [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transform.scss)
 - [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/transition.scss)
@@ -50,6 +51,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 
 ### Utilities
 
+- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
 - [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/push.scss)
 - [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/pull.scss)
 - [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/flush.scss)
@@ -76,6 +78,7 @@ Add this line to your application.css:
 ```css
  *= require sass-zero/base
  *= require sass-zero/utilities
+ *= require sass-zero/breadboard
 ```
 
 Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):

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

@@ -1,3 +1,2 @@
 @import "base/normalize";
 @import "base/preflight";
-@import "base/breadboard";

data/app/assets/stylesheets/sass-zero/base/preflight.scss

@@ -1,4 +1,4 @@
-@import "sass-zero/base/variables";
+@import "sass-zero/variables";
 
 /**
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
@@ -29,7 +29,6 @@ pre {
 button {
   background-color: transparent;
   background-image: none;
-  padding: 0;
 }
 
 /**
@@ -70,6 +69,17 @@ html {
   line-height: 1.5; /* 2 */
 }
 
+
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+
 /**
  * 1. Prevent padding and border from affecting element width.
  *
@@ -102,7 +112,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: $breadboard-border; /* 2 */
+  border-color: $gray-200; /* 2 */
 }
 
 /*
@@ -133,7 +143,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: $breadboard-placeholder;
+  color: $gray-400;
 }
 
 button,

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

@@ -0,0 +1,230 @@
+@import "sass-zero/variables";
+@import "sass-zero/mixins";
+
+:root {
+  --color-bg--main:         #{$white};
+  --color-bg--surface:      #{$gray-100};
+  --color-primary:          #{$gray-900};
+  --color-txt:              #{$gray-900};
+  --color-focus-ring:       #{rgba($gray-900, 0.5)};
+  --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 {
+  background: var(--color-bg--main);
+  color: var(--color-txt);
+  font-size: 14px;
+}
+
+main {
+  padding-right: $size-2;
+  padding-left:  $size-2;
+}
+
+blockquote {
+  border-color: var(--color-primary);
+  border-left-width: $border-4;
+  padding: $size-3 $size-4;
+}
+
+.btn {
+  border-radius: $rounded;
+  border-width: $border;
+  display: inline-block;
+  font-weight: $font-bold;
+  padding: $size-2 $size-4;
+  cursor: pointer;
+
+  &:focus {
+    outline: 2px dotted var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: $opacity-50;
+  }
+
+  &--primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-bg--main);
+  }
+
+  &--secondary {
+    background-color: var(--color-bg--main);
+    border-color: var(--color-primary);
+  }
+
+  &--tertiary {
+    background-color: $transparent;
+    border-color: $transparent;
+  }
+}
+
+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;
+}
+
+pre {
+  background-color: var(--color-bg--surface);
+  border-color: var(--color-primary);
+  border-left-width: $border-4;
+  overflow-y: hidden;
+
+  & > code {
+    border-radius: $rounded-none;
+    display: block;
+    padding: $size-2 $size-3;
+    white-space: pre;
+  }
+}
+
+hr {
+  margin: $size-6 $size-0;
+}
+
+.input {
+  appearance: none;
+  background-color: $transparent;
+  border-radius: $rounded;
+  border-width: $border;
+  padding: $size-2 $size-3;
+  width: $size-full;
+
+  &--select {
+    background-image: var(--image-bg-select);
+    background-position: right $size-2 center;
+    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;
+  }
+
+  &: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));
+    @include outline-none;
+  }
+}
+
+label, legend, dt {
+  display: inline-block;
+  margin-bottom: $size-1;
+}
+
+a {
+  font-weight: $font-bold;
+}
+
+ul {
+  list-style: disc inside;
+}
+
+ol {
+  list-style: decimal inside;
+}
+
+h1, h2, h3, h4, h5, h6, .hdg {
+  margin-bottom: $size-4;
+}
+
+fieldset, .input {
+  margin-bottom: $size-6;
+}
+
+blockquote, figure, p, pre, table, ul, ol, dl {
+  margin-bottom: $size-6;
+}
+
+table {
+  width: $size-full;
+}
+
+td, th {
+  border-bottom-width: $border;
+  padding: $size-3 $size-4;
+  text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6, .hdg {
+  font-weight: $font-bold;
+  line-height: $leading-tight;
+}
+
+h1, .hdg--4xl {
+  font-size: $text-4xl;
+}
+
+h2, .hdg--3xl {
+  font-size: $text-3xl;
+}
+
+h3, .hdg--2xl {
+  font-size: $text-2xl;
+}
+
+h4, .hdg--xl {
+  font-size: $text-xl;
+}
+
+h5, .hdg--lg {
+  font-size: $text-lg;
+}
+
+h6, .hdg--base {
+  font-size: $text-base;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg--main:         #{$gray-900};
+    --color-bg--surface:      #{$gray-800};
+    --color-primary:          #{$white};
+    --color-txt:              #{$white};
+    --color-focus-ring:       #{rgba($gray-100, 0.5)};
+    --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="white" 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="black" 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="black" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+  }
+}
+
+@media (min-width: $breakpoint-md) {
+  html { font-size: 16px; }
+  main { @include make-container($size-10, $breakpoint-xl); }
+}

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

@@ -3,9 +3,9 @@
 @import "sass-zero/variables/spacing";
 
 @mixin ellipsis {
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 @mixin antialiased {
@@ -26,30 +26,39 @@
   }
 }
 
-@mixin focus {
-  border-color: #a4cafe;
-  box-shadow: $shadow-outline;
-  outline: 0;
+@mixin checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-@mixin selection($color) {
+@mixin input-selection($color) {
   appearance: none;
   border-width: $border;
   color: $color;
-  margin-bottom: -0.2rem;
+  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;
+}
+
+@mixin outline-white {
+  outline: 2px dotted white;
+  outline-offset: 2px;
+}
+
+@mixin outline-black {
+  outline: 2px dotted black;
+  outline-offset: 2px;
 }
 
 @mixin space-x($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-right: $space;
     } @else {
@@ -59,7 +68,7 @@
 }
 
 @mixin space-y($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-bottom: $space;
     } @else {

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

@@ -1,3 +1,4 @@
+@import "sass-zero/utilities/animation";
 @import "sass-zero/utilities/flex";
 @import "sass-zero/utilities/flush";
 @import "sass-zero/utilities/layout";