sass-zero 0.0.37 → 0.0.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd5b6776b53040e01a89fc9b525fab7e7aca4255e8da1cf4bdfa5f5cbb14dc14
-  data.tar.gz: cfe605b1284380d9a1accc30d01441d0893aaf17459029c2850e2ed945d702ab
+  metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
+  data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
 SHA512:
-  metadata.gz: c5bc018555c7c22d707fcc1338e33001a1faa51c21fabb88d655fd2160a0aab8d536d27bdb1c45fd866644000d3e0f63d941089b378f6526efdf7f5e1cddf3b5
-  data.tar.gz: fa56978fcf7b39e19f551e5fa21500991a9120e6dd2aad8885a1f0ec987a9f14ba3123f464c854c2a96a1afb8cfca5eea1cb688a8d1f742e991ef2640615106a
+  metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
+  data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51

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

@@ -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/{base/breadboard.scss → breadboard.scss}

@@ -1,8 +1,10 @@
-@import "sass-zero/base/variables";
+@import "sass-zero/variables";
 @import "sass-zero/mixins";
 
+$breadboard-primary:    $gray-900;
+$breadboard-background: $gray-100;
+
 html {
-  color: $breadboard-color;
   font-size: 14px;
 }
 
@@ -12,6 +14,7 @@ main {
 }
 
 blockquote {
+  border-color: $breadboard-primary;
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 }
@@ -20,13 +23,17 @@ blockquote {
   background-color: $white;
   border-radius: $rounded;
   border-width: $border;
-  color: $breadboard-color;
+  color: $breadboard-primary;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-4;
   cursor: pointer;
 
-  &:disabled, &.disabled {
+  &:focus {
+    @include outline-black;
+  }
+
+  &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
   }
@@ -43,8 +50,8 @@ blockquote {
   }
 
   &--tertiary {
-    background-color: transparent;
-    border-color: transparent;
+    background-color: $transparent;
+    border-color: $transparent;
   }
 }
 
@@ -65,14 +72,14 @@ pre {
 
   & > code {
     border-radius: $rounded-none;
-  	display: block;
-  	padding: $size-2 $size-3;
+    display: block;
+    padding: $size-2 $size-3;
     white-space: pre;
   }
 }
 
 hr {
-  margin: $size-10 $size-0;
+  margin: $size-6 $size-0;
 }
 
 .input {
@@ -83,41 +90,50 @@ hr {
   width: $size-full;
 
   &--select {
-  	background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="silver" xmlns="http://www.w3.org/2000/svg"><path d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"></path></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
     background-position: right $size-2 center;
     background-repeat: no-repeat;
     background-size: auto $size-5;
     padding-right: $size-8;
   }
 
-  &:focus { @include focus; }
+  &:focus {
+    box-shadow: ring($color: $breadboard-primary);
+    @include outline-none;
+  }
 }
 
 .checkbox {
   border-radius: $rounded;
-  @include selection;
+  @include input-selection($breadboard-primary);
 
   &:checked {
-    background-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="white" strokeWidth="2" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>');
+    background-image: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>');
     @include checked;
   }
 
-  &:focus { @include focus; }
+  &:focus {
+    box-shadow: ring($color: $breadboard-primary);
+    @include outline-none;
+  }
 }
 
 .radio {
   border-radius: $rounded-full;
-  @include selection;
+  @include input-selection($breadboard-primary);
 
   &:checked {
     background-image: 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>');
     @include checked;
   }
 
-  &:focus { @include focus; }  
+  &:focus {
+    box-shadow: ring($color: $breadboard-primary);
+    @include outline-none;
+  }
 }
 
-label, legend {
+label, legend, dt {
   display: inline-block;
   margin-bottom: $size-1;
 }
@@ -134,25 +150,12 @@ ol {
   list-style: decimal inside;
 }
 
-td, th {
-  &:first-child { padding-left:  $size-0; }
-  &:last-child  { padding-right: $size-0; }
-}
-
-dt, dd, li {
-  &:last-child { margin-bottom: $size-0; }
-}
-
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-2;
-}
-
-dt, dd, li, .btn {
-  margin-bottom: $size-2;
+  margin-bottom: $size-4;
 }
 
 fieldset, .input {
-  margin-bottom: $size-4;
+  margin-bottom: $size-6;
 }
 
 blockquote, figure, p, pre, table, ul, ol, dl {
@@ -200,5 +203,5 @@ h6, .hdg--base {
 
 @media (min-width: $breakpoint-md) {
   html { font-size: 16px; }
-  main { @include make-container($size-10, $breakpoint-lg); }
+  main { @include make-container($size-10, $breakpoint-xl); }
 }

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

@@ -1,7 +1,11 @@
+@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;
+  overflow: hidden;
 }
 
 @mixin antialiased {
@@ -22,30 +26,39 @@
   }
 }
 
-@mixin focus {
-  border-color: $breadboard-color;
-  box-shadow: $shadow-outline;
-  outline: 0;
+@mixin checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-@mixin selection {
+@mixin input-selection($color) {
   appearance: none;
   border-width: $border;
-  color: $breadboard-primary;
-  margin-bottom: -0.2rem;
+  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;
+}
+
+@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 {
@@ -55,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";

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

@@ -0,0 +1,59 @@
+.animate-none {
+  animation: none;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+  }
+}

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

@@ -1,31 +1,43 @@
 .flex {
   display: flex;
+}
 
-  &--column {
-    flex-direction: column;
-  }
+.i-flex {
+  display: inline-flex;
+}
 
-  &--justify-center {
-    justify-content: center;
-  }
+.flex--column {
+  flex-direction: column;
+}
 
-  &--justify-between {
-    justify-content: space-between;
-  }
+.flex--justify-center {
+  justify-content: center;
+}
 
-  &--items-center {
-    align-items: center;
-  }
+.flex--justify-between {
+  justify-content: space-between;
+}
 
-  &--wrap {
-    flex-wrap: wrap;
-  }
+.flex--items-center {
+  align-items: center;
+}
 
-  &--grow {
-    flex-grow: 1;
-  }
+.flex--wrap {
+  flex-wrap: wrap;
+}
+
+.flex-item--grow {
+  flex-grow: 1;
+}
+
+.flex-item--no-shrink {
+  flex-shrink: 0;
+}
+
+.flex-item--fill {
+  flex: 1;
+}
 
-  &--shrink-0 {
-    flex-shrink: 0;
-  }
+.flex-item--align-center {
+  align-self: center;
 }