sass-zero 0.0.40 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c1618f19a592e556e232f98069655ba71d5627c3b9a329412eec047515fb0ce
-  data.tar.gz: '085a4f0596a1b83213ebb14faf1575574ffcc985a497002f1d753b9e1ee556c1'
+  metadata.gz: 90335efa16cb09716e4c31bd9cb7df2469d9e586ce409ac5db752ef195f367a5
+  data.tar.gz: 867fd4aec244f7886f26d438734e92d3e7511d9be443983632d673a12a4296b3
 SHA512:
-  metadata.gz: 422213f88a6e53076c21fab195d233b1ac131d02235e7229d01fd04804195bfc3cc45299c5ed178c24c5a6cce914d475264c75cd4ab919c3e2b5238ac9cc31a2
-  data.tar.gz: 28a3d5da494a2dd64a5ae588a397ee3cd21303ca5600267b774140009ea02f58fac16a9f868a53aed07d84e8678ff22f5f19a6cd90650c1b9c35a27b6f99c542
+  metadata.gz: 14ac230bce5200038c588cbca45e565931061251a1e401ccf3699a1c326ef55eb0caf3806b6c29124a6641847567891d69e3d43c0b0280cf8ba26f4d7ac66ee3
+  data.tar.gz: b525273b68b1538a8102dbeb0ccd9abeaa9bcb5f60e1fea95829613fdcdfcdb354b991e228e22c6fd915fb4c515374cedac40d775c233ac8b5289ef3735948d9

data/Example.html

@@ -1,4 +1,4 @@
-<main>
+<main class="container">
   <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
   <a href="#">Anchor</a>
   <em>Emphasis</em>
@@ -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,215 @@
+@import "sass-zero/variables";
+@import "sass-zero/mixins";
+
+$font-family: $font-sans;
+
+$radius-input:  $rounded;
+$radius-button: $rounded;
+
+$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-black:        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-white: 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-white:    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: $color-bg--main;
+  color: $color-txt;
+  font-family: $font-family;
+  font-size: 16px;
+}
+
+blockquote {
+  border-color: $color-primary;
+  border-left-width: $border-4;
+  padding: $size-3 $size-4;
+}
+
+.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 $color-primary;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: $opacity-50;
+  }
+
+  &--primary {
+    background-color: $color-primary;
+    border-color: $color-primary;
+    color: $color-bg--main;
+  }
+
+  &--secondary {
+    background-color: $color-bg--main;
+    border-color: $color-primary;
+  }
+
+  &--tertiary {
+    background-color: $transparent;
+    border-color: $transparent;
+  }
+}
+
+code {
+  background-color: $color-bg--surface;
+  border-radius: $rounded-xl;
+  font-size: $text-sm;
+  margin: $size-0 $size-1;
+  padding: $size-1 $size-2;
+  white-space: nowrap;
+}
+
+pre {
+  background-color: $color-bg--surface;
+  border-color: $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: $radius-input;
+  border-width: $border;
+  padding: $size-2 $size-3;
+  width: $size-full;
+
+  &--select {
+    background-image: $image-bg-select-black;
+    background-position: right $size-2 center;
+    background-repeat: no-repeat;
+    background-size: auto $size-5;
+    padding-right: $size-8;
+  }
+
+  &:focus {
+    box-shadow: ring($color: $color-focus-ring);
+    @include outline-none;
+  }
+}
+
+.checkbox {
+  border-radius: $rounded;
+  @include input-selection($color-primary);
+
+  &:checked {
+    background-image: $image-checked-checkbox-white;
+    @include checked;
+  }
+
+  &:focus {
+    box-shadow: ring($color: $color-focus-ring);
+    @include outline-none;
+  }
+}
+
+.radio {
+  border-radius: $rounded-full;
+  @include input-selection($color-primary);
+
+  &:checked {
+    background-image: $image-checked-radio-white;
+    @include checked;
+  }
+
+  &:focus {
+    box-shadow: ring($color: $color-focus-ring);
+    @include outline-none;
+  }
+}
+
+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: 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;
+}

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,17 +21,17 @@
   }
 }
 
-@mixin focus {
-  border-color: #a4cafe;
-  box-shadow: $shadow-outline;
-  outline: 0;
+@mixin ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-@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;
 }
@@ -48,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 {
@@ -59,7 +85,7 @@
 }
 
 @mixin space-y($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-bottom: $space;
     } @else {
@@ -68,11 +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;
 }