sass-zero 0.0.39 → 0.0.44

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fad3bc286fc20abe0b9cdc927e140aeb64783dcc4a63821d2aa7a639b5aee25
-  data.tar.gz: 9331bd31086517f71e6b608422fd13de0895e7a93d8b6c7b8f1c63c227cbfdee
+  metadata.gz: 1bedb80a3b82ff395f4fcb62ace52fa617d6dfbf57071c0ccfbe896cf07927e8
+  data.tar.gz: 0af153c127e2f31ebcf72b198b6524599d5a3a1e0346568ff175c20c51ebb398
 SHA512:
-  metadata.gz: 92abdda324b6fc82bff7be29bb6d9496bec0e77ce31d66faa8ae88e58a546bc6f58fbc5f79c3afa8c48888055dd9d33d8d28d6e8154cdc18f6bf91b7b7a5d9e3
-  data.tar.gz: f2af2f664a855e868d9b10dce45eb0fd9402859b3c361d30711a0f5f96ef62f876c2ee7db1ad24b3d1920f975c3daea2308937de0b5ffe72a862bf61c9f0cf0a
+  metadata.gz: 8c9d00ad068770c7f76c458ffd0111c96f6a673a6397a8999df4394275a648451dc93f977f67dace21a1a7ce5451c7b4caab1080220301f073d7aae06c227e04
+  data.tar.gz: 72a68175415ff39c9e565a851af374bbd3ab1587d3d72bca6ea7f151e8af0958618cd434aaaf2d889be141ca91c97a8a4b6a5cb28273b60c4917d1e99632e307

data/Example.html

@@ -22,7 +22,7 @@
 
   <hr>
 
-  <form class="push-md--bottom">
+  <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">

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

@@ -1,8 +1,19 @@
-@import "sass-zero/base/variables";
+@import "sass-zero/variables";
 @import "sass-zero/mixins";
 
+$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 {
-  color: $breadboard-color;
+  background: $color-bg--main;
+  color: $color-txt;
   font-size: 14px;
 }
 
@@ -12,34 +23,38 @@ main {
 }
 
 blockquote {
+  border-color: $color-primary;
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 }
 
 .btn {
-  background-color: $white;
   border-radius: $rounded;
   border-width: $border;
-  color: $breadboard-color;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-4;
   cursor: pointer;
 
-  &:disabled, &.disabled {
+  &:focus {
+    outline: 2px dotted $color-primary;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
   }
 
   &--primary {
-    background-color: $breadboard-primary;
-    border-color: $breadboard-primary;
-    color: $white;
+    background-color: $color-primary;
+    border-color: $color-primary;
+    color: $color-bg--main;
   }
 
   &--secondary {
-    border-color: $breadboard-primary;
-    background-color: $white;
+    background-color: $color-bg--main;
+    border-color: $color-primary;
   }
 
   &--tertiary {
@@ -49,7 +64,7 @@ blockquote {
 }
 
 code {
-  background-color: $breadboard-background;
+  background-color: $color-bg--surface;
   border-radius: $rounded;
   font-size: $text-sm;
   margin: $size-0 $size-1;
@@ -58,15 +73,15 @@ code {
 }
 
 pre {
-  background-color: $breadboard-background;
-  border-color: $breadboard-primary;
+  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;
+    display: block;
+    padding: $size-2 $size-3;
     white-space: pre;
   }
 }
@@ -77,47 +92,57 @@ hr {
 
 .input {
   appearance: none;
+  background-color: $transparent;
   border-radius: $rounded;
   border-width: $border;
   padding: $size-2 $size-3;
   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: $image-bg-select-black;
     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: $color-focus-ring);
+    @include outline-none;
+  }
 }
 
 .checkbox {
   border-radius: $rounded;
-  @include selection($breadboard-primary);
+  @include input-selection($color-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: $image-checked-checkbox-white;
     @include checked;
   }
 
-  &:focus { @include focus; }
+  &:focus {
+    box-shadow: ring($color: $color-focus-ring);
+    @include outline-none;
+  }
 }
 
 .radio {
   border-radius: $rounded-full;
-  @include selection($breadboard-primary);
+  @include input-selection($color-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>');
+    background-image: $image-checked-radio-white;
     @include checked;
   }
 
-  &:focus { @include focus; }
+  &:focus {
+    box-shadow: ring($color: $color-focus-ring);
+    @include outline-none;
+  }
 }
 
-label, legend {
+label, legend, dt {
   display: inline-block;
   margin-bottom: $size-1;
 }
@@ -135,19 +160,15 @@ ol {
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-2;
-}
-
-dd {
-  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 {
-  margin-bottom: $size-4;
+  margin-bottom: $size-6;
 }
 
 table {
@@ -191,5 +212,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

@@ -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";

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;
 }