sass-zero 0.0.41 → 0.0.42

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f7535d89224d6749bc77287fa7b66b68e6e1fe7d14e418187dacc923461ee184
-  data.tar.gz: a29e525d141f3d99e1740f60f07820c7af8e41b2bc1965ada826b6bc979c7456
+  metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
+  data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
 SHA512:
-  metadata.gz: 7f6ee090a317a9a289339d88312e2655923745196ede0d1e1704de70b5ec0ea61f4136e1630d9112284204e32ab4c3d97b60c9ad31925f24c2c3c4b020adc7a3
-  data.tar.gz: 82a8ced5aa112b734f511f212beab343b5aafa29f1a77cb8ece989fe6f8a6384418d3692027dfa8d9c18567f71ae2de56a9e99004b5fa693817a6eacff2f3a8a
+  metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
+  data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51

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,12 +23,16 @@ 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;
 
+  &:focus {
+    @include outline-black;
+  }
+
   &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
@@ -83,14 +90,17 @@ 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 {
@@ -98,11 +108,14 @@ hr {
   @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 {
@@ -114,7 +127,10 @@ hr {
     @include checked;
   }
 
-  &:focus { @include focus; }
+  &:focus {
+    box-shadow: ring($color: $breadboard-primary);
+    @include outline-none;
+  }
 }
 
 label, legend, dt {
@@ -187,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

@@ -3,9 +3,9 @@
 @import "sass-zero/variables/spacing";
 
 @mixin ellipsis {
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 @mixin antialiased {
@@ -26,12 +26,6 @@
   }
 }
 
-@mixin focus {
-  border-color: #a4cafe;
-  box-shadow: $shadow-outline;
-  outline: 0;
-}
-
 @mixin checked {
   border-color: transparent;
   background-color: currentColor;
@@ -39,8 +33,32 @@
   background-repeat: no-repeat;
 }
 
+@mixin input-selection($color) {
+  appearance: none;
+  border-width: $border;
+  color: $color;
+  margin-bottom: -0.1rem;
+  height: $size-4;
+  width: $size-4;
+}
+
+@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 {
@@ -50,7 +68,7 @@
 }
 
 @mixin space-y($space, $reverse: false) {
-  & > :not(template) ~ :not(template) {
+  & > :not([hidden]) ~ :not([hidden]) {
     @if $reverse {
       margin-bottom: $space;
     } @else {
@@ -67,12 +85,3 @@
   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;
-}

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

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

@@ -7,7 +7,7 @@
 }
 
 .list--unbulleted {
- list-style: none;
+  list-style: none;
 }
 
 .list--spaced {

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

@@ -1,46 +1,72 @@
 @import "sass-zero/variables/typography";
 @import "sass-zero/variables/spacing";
 @import "sass-zero/variables/colors";
+@import "sass-zero/variables/border";
 @import "sass-zero/mixins";
 
 .txt--xs {
   font-size: $text-xs;
+  line-height: $leading-4;
 }
 
 .txt--sm {
   font-size: $text-sm;
+  line-height: $leading-5;
 }
 
 .txt--md {
   font-size: $text-base;
+  line-height: $leading-6;
 }
 
 .txt--lg {
   font-size: $text-lg;
+  line-height: $leading-7;
 }
 
 .txt--xl {
   font-size: $text-xl;
+  line-height: $leading-7;
 }
 
 .txt--2xl {
   font-size: $text-2xl;
+  line-height: $leading-8;
 }
 
 .txt--3xl {
   font-size: $text-3xl;
+  line-height: $leading-9;
 }
 
 .txt--4xl {
   font-size: $text-4xl;
+  line-height: $leading-10;
 }
 
 .txt--5xl {
   font-size: $text-5xl;
+  line-height: $leading-4;
 }
 
 .txt--6xl {
   font-size: $text-6xl;
+  line-height: $leading-4;
+}
+
+.txt--7xl {
+  font-size: $text-7xl;
+  line-height: $leading-4;
+}
+
+.txt--8xl {
+  font-size: $text-8xl;
+  line-height: $leading-4;
+}
+
+.txt--9xl {
+  font-size: $text-9xl;
+  line-height: $leading-4;
 }
 
 .txt--nowrap {
@@ -51,6 +77,10 @@
   word-wrap: break-word;
 }
 
+.txt--break-words-alt {
+  word-break: break-word;
+}
+
 .txt--break-all {
   word-break: break-all;
 }
@@ -60,7 +90,7 @@
 }
 
 .txt--normal {
-  font-weight: $font-normal;
+  font-weight: $font-normal !important;
 }
 
 .txt--bold {
@@ -83,6 +113,12 @@
   text-transform: uppercase;
 }
 
+.txt--highlight {
+  background-color: $gray-200;
+  border-radius: $rounded-full;
+  padding: $size-0 $size-1;
+}
+
 .align--top {
   vertical-align: top;
 }
@@ -114,6 +150,5 @@
 
 .decorated--subtle {
   color: $gray-700;
-  font-weight: $font-normal;
-  &:hover { text-decoration: underline; }
+  text-decoration: underline;
 }