sass-zero 0.0.41 → 0.0.46

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7535d89224d6749bc77287fa7b66b68e6e1fe7d14e418187dacc923461ee184
-  data.tar.gz: a29e525d141f3d99e1740f60f07820c7af8e41b2bc1965ada826b6bc979c7456
+  metadata.gz: a70d79a12adc6f8ce1f1e8cb6010376853a05f3811220d802bdba66807af5f73
+  data.tar.gz: 468f771702b25513dd37bfb8fc80e3ebbc61816db3680b3bc3839976676eaafb
 SHA512:
-  metadata.gz: 7f6ee090a317a9a289339d88312e2655923745196ede0d1e1704de70b5ec0ea61f4136e1630d9112284204e32ab4c3d97b60c9ad31925f24c2c3c4b020adc7a3
-  data.tar.gz: 82a8ced5aa112b734f511f212beab343b5aafa29f1a77cb8ece989fe6f8a6384418d3692027dfa8d9c18567f71ae2de56a9e99004b5fa693817a6eacff2f3a8a
+  metadata.gz: d1b54a51fe3aff5ca9203f97ac299afbef75c7fc823d6809ef33c8157856d253126d215bf635eb34ffd53e70387b682cc4b4f9db942ca7a21d8450302127d199
+  data.tar.gz: dc64fedbee094996ad563e765e3edbd70e53a659d653437e26baea00abe691b925e564929c1932c22e0d3411d0e7855b5e6806103a13b302eb4213b592a490e7

data/Example.html

@@ -1,6 +1,6 @@
-<main>
+<main class="container">
   <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
-  <a href="#">Anchor</a>
+  <a href="#" class="txt--underline">Anchor</a>
   <em>Emphasis</em>
   <small>Small</small>
   <strong>Strong</strong>
@@ -24,9 +24,9 @@
 
   <form class="push-lg--bottom">
     <div class="push-md--bottom">
-      <label for="nameField">Name</label>
+      <label for="nameField" class="u-display-b txt--bold">Name</label>
       <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
-      <label for="ageRangeField">Age Range</label>
+      <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
 
       <select id="ageRangeField" class="input input--select">
         <option value="0-13">0-13</option>
@@ -35,36 +35,36 @@
         <option value="24+">24+</option>
       </select>
 
-      <label for="commentField">Comment</label>
+      <label for="commentField" class="u-display-b txt--bold">Comment</label>
       <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
 
       <div class="push-md--bottom">
         <div>
           <input type="checkbox" name="option1" value="1" class="checkbox" checked>
-          <label for="option1">Option 1</label>
+          <label for="option1" class="u-display-ib">Option 1</label>
         </div>
         <div>
           <input type="checkbox" name="option2" value="2" class="checkbox">
-          <label for="option2">Option 2</label>
+          <label for="option2" class="u-display-ib">Option 2</label>
         </div>
         <div>
           <input type="checkbox" name="option3" value="3" class="checkbox">
-          <label for="option3">Option 3</label>
+          <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">Option 1</label>
+          <label for="radio" class="u-display-ib">Option 1</label>
         </div>
         <div>
           <input type="radio" name="radio" value="2" class="radio">
-          <label for="radio">Option 2</label>
+          <label for="radio" class="u-display-ib">Option 2</label>
         </div>
         <div>
           <input type="radio" name="radio" value="3" class="radio">
-          <label for="radio">Option 3</label>
+          <label for="radio" class="u-display-ib">Option 3</label>
         </div>
       </div>
     </div>
@@ -113,13 +113,13 @@
 
   <hr>
 
-  <ul>
+  <ul class="list--unindented ">
     <li>Unordered list item 1</li>
     <li>Unordered list item 2</li>
     <li>Unordered list item 3</li>
   </ul>
 
-  <ol>
+  <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

@@ -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,9 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 
 ### Utilities
 
+- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/align.scss)
+- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/animation.scss)
+- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/container.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 +80,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,5 @@
-@import "sass-zero/base/variables";
+@import "sass-zero/variables/colors";
+@import "sass-zero/variables/typography";
 
 /**
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
@@ -29,7 +30,6 @@ pre {
 button {
   background-color: transparent;
   background-image: none;
-  padding: 0;
 }
 
 /**
@@ -70,6 +70,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 +113,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 +144,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  color: $breadboard-placeholder;
+  color: $gray-400;
 }
 
 button,

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

@@ -0,0 +1,213 @@
+@import "sass-zero/variables";
+@import "sass-zero/mixins";
+
+$font-family: $font-sans;
+
+$radius-input:  $rounded;
+$radius-button: $rounded;
+
+:root {
+  --color-bg--main:    #{$white};
+  --color-bg--surface: #{$gray-100};
+  --color-primary:     #{$gray-900};
+  --color-txt:         #{$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 {
+  background: var(--color-bg--main);
+  color: var(--color-txt);
+  font-family: $font-family;
+  font-size: 16px;
+}
+
+.btn {
+  border-radius: $radius-button;
+  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;
+  }
+}
+
+.input {
+  appearance: none;
+  background-color: $transparent;
+  border-radius: $radius-input;
+  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;
+  }
+}
+
+blockquote {
+  border-left-width: $border-4;
+  padding: $size-3 $size-4;
+}
+
+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);
+  overflow-y: hidden;
+
+  & > code {
+    display: block;
+    padding: $size-2 $size-3;
+    white-space: pre;
+  }
+}
+
+hr {
+  margin: $size-6 $size-0;
+}
+
+a {
+  font-weight: $font-bold;
+}
+
+ul, ol {
+  padding-left: $size-10;
+}
+
+ul {
+  list-style: disc outside;
+}
+
+ol {
+  list-style: decimal outside;
+}
+
+label, legend, dt {
+  margin-bottom: $size-1;
+}
+
+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: inherit;
+}
+
+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;
+}

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

@@ -1,12 +1,7 @@
 @import "sass-zero/variables/border";
 @import "sass-zero/variables/effects";
 @import "sass-zero/variables/spacing";
-
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+@import "sass-zero/variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -26,10 +21,19 @@
   }
 }
 
-@mixin focus {
-  border-color: #a4cafe;
-  box-shadow: $shadow-outline;
-  outline: 0;
+@mixin ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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 {
@@ -39,8 +43,39 @@
   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 divider($color) {
+  position: relative;
+  z-index: $z-10;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: $size-0;
+    right: $size-0;
+    height: $size-px;
+    background-color: $color;
+    z-index: -1;
+  }
+}
+
 @mixin space-x($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-right: $space;
     } @else {
@@ -50,7 +85,7 @@
 }
 
 @mixin space-y($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-bottom: $space;
     } @else {
@@ -59,20 +94,10 @@
   }
 }
 
-@mixin make-container($padding-x, $max-width) {
+@mixin make-container($padding-x: $size-4) {
   width: 100%;
   padding-right: $padding-x;
   padding-left: $padding-x;
   margin-right: $size-auto;
   margin-left:  $size-auto;
-  max-width: $max-width;
-}
-
-@mixin input-selection($color) {
-  appearance: none;
-  border-width: $border;
-  color: $color;
-  margin-bottom: -0.1rem;
-  height: $size-4;
-  width: $size-4;
 }