sass-zero 0.0.44 → 0.0.48

data/app/assets/stylesheets/sass-zero/base/preflight.scss

@@ -1,4 +1,5 @@
-@import "sass-zero/variables";
+@import "sass-zero/variables/colors";
+@import "sass-zero/variables/typography";
 
 /**
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
@@ -31,16 +32,6 @@ button {
   background-image: none;
 }
 
-/**
- * Work around a Firefox/IE bug where the transparent `button` background
- * results in a loss of the default `button` focus styles.
- */
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
 fieldset {
   margin: 0;
   padding: 0;
@@ -143,6 +134,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
+  opacity: 1;
   color: $gray-400;
 }
 
@@ -151,6 +143,18 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+:-moz-focusring {
+	outline: auto;
+}
+
 table {
   border-collapse: collapse;
 }
@@ -208,11 +212,20 @@ samp {
 }
 
 /**
- * Make replaced elements `display: block` by default as that's
- * the behavior you want almost all of the time. Inspired by
- * CSS Remedy, with `svg` added as well.
+ * 1. Make replaced elements `display: block` by default as that's
+ *    the behavior you want almost all of the time. Inspired by
+ *    CSS Remedy, with `svg` added as well.
  *
- * https://github.com/mozdevs/cssremedy/issues/14
+ *    https://github.com/mozdevs/cssremedy/issues/14
+ *
+ * 2. Add `vertical-align: middle` to align replaced elements more
+ *    sensibly by default when overriding `display` by adding a
+ *    utility like `inline`.
+ *
+ *    This can trigger a poorly considered linting error in some
+ *    tools but is included by design.
+ *
+ *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
  */
 
 img,
@@ -223,13 +236,13 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  vertical-align: middle;
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
 }
 
 /**
  * Constrain images and videos to the parent width and preserve
- * their instrinsic aspect ratio.
+ * their intrinsic aspect ratio.
  *
  * https://github.com/mozdevs/cssremedy/issues/14
  */
@@ -239,3 +252,11 @@ video {
   max-width: 100%;
   height: auto;
 }
+
+/**
+ * Ensure the default browser behavior of the `hidden` attribute.
+ */
+
+[hidden] {
+  display: none;
+}

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

@@ -1,60 +1,53 @@
 @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);
+$font-family: $font-sans;
 
-$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>');
+$radius-input:  $rounded;
+$radius-button: $rounded;
 
-html {
-  background: $color-bg--main;
-  color: $color-txt;
-  font-size: 14px;
-}
+:root {
+  --color-bg--main:    #{$white};
+  --color-bg--surface: #{$gray-100};
+  --color-primary:     #{$gray-900};
+  --color-text:        #{$gray-900};
+  --color-focus-ring:  #{rgba($gray-900, $opacity-50)};
 
-main {
-  padding-right: $size-2;
-  padding-left:  $size-2;
+  --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>');
 }
 
-blockquote {
-  border-color: $color-primary;
-  border-left-width: $border-4;
-  padding: $size-3 $size-4;
+html {
+  background: var(--color-bg--main);
+  color: var(--color-text);
+  font-family: $font-family;
+  font-size: 16px;
 }
 
 .btn {
-  border-radius: $rounded;
+  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;
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-bg--main);
   }
 
   &--secondary {
-    background-color: $color-bg--main;
-    border-color: $color-primary;
+    background-color: var(--color-bg--main);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
   }
 
   &--tertiary {
@@ -63,43 +56,17 @@ blockquote {
   }
 }
 
-code {
-  background-color: $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: $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 {
+  resize: none;
   appearance: none;
   background-color: $transparent;
-  border-radius: $rounded;
+  border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
-  width: $size-full;
+  width: $w-full;
 
   &--select {
-    background-image: $image-bg-select-black;
+    background-image: var(--image-bg-select);
     background-position: right $size-2 center;
     background-repeat: no-repeat;
     background-size: auto $size-5;
@@ -107,56 +74,90 @@ hr {
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .checkbox {
   border-radius: $rounded;
-  @include input-selection($color-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: $image-checked-checkbox-white;
+    background-image: var(--image-checked-checkbox);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .radio {
   border-radius: $rounded-full;
-  @include input-selection($color-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: $image-checked-radio-white;
+    background-image: var(--image-checked-radio);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
-label, legend, dt {
-  display: inline-block;
-  margin-bottom: $size-1;
+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);
+  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;
 }
 
 a {
   font-weight: $font-bold;
 }
 
+ul, ol {
+  padding-left: $size-10;
+}
+
 ul {
-  list-style: disc inside;
+  list-style: disc outside;
 }
 
 ol {
-  list-style: decimal inside;
+  list-style: decimal outside;
+}
+
+label, legend, dt {
+  margin-bottom: $size-1;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
@@ -172,13 +173,13 @@ blockquote, figure, p, pre, table, ul, ol, dl {
 }
 
 table {
-  width: $size-full;
+  width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
   padding: $size-3 $size-4;
-  text-align: left;
+  text-align: inherit;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
@@ -209,8 +210,3 @@ h5, .hdg--lg {
 h6, .hdg--base {
   font-size: $text-base;
 }
-
-@media (min-width: $breakpoint-md) {
-  html { font-size: 16px; }
-  main { @include make-container($size-10, $breakpoint-xl); }
-}

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 {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+@import "sass-zero/variables/zindex";
 
 @mixin antialiased {
   -webkit-font-smoothing: antialiased;
@@ -26,11 +21,10 @@
   }
 }
 
-@mixin checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-position: center;
-  background-repeat: no-repeat;
+@mixin ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 @mixin input-selection($color) {
@@ -42,6 +36,13 @@
   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;
@@ -57,31 +58,10 @@
   outline-offset: 2px;
 }
 
-@mixin space-x($space, $reverse: false) {
-  & > :not([hidden]) ~ :not([hidden]) {
-    @if $reverse {
-      margin-right: $space;
-    } @else {
-      margin-left: $space;
-    }
-  }
-}
-
-@mixin space-y($space, $reverse: false) {
-  & > :not([hidden]) ~ :not([hidden]) {
-    @if $reverse {
-      margin-bottom: $space;
-    } @else {
-      margin-top: $space;
-    }
-  }
-}
-
-@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;
 }

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

@@ -0,0 +1,28 @@
+.align--top {
+  vertical-align: top;
+}
+
+.align--middle {
+  vertical-align: middle;
+}
+
+.align--bottom {
+  vertical-align: bottom;
+}
+
+.align--left {
+  text-align: left;
+}
+
+.align--center {
+  text-align: center;
+}
+
+.align--right {
+  text-align: right;
+}
+
+.centered {
+  margin-left:  auto;
+  margin-right: auto
+}

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

@@ -0,0 +1,36 @@
+@import "sass-zero/variables/breakpoints";
+@import "sass-zero/mixins";
+
+.container {
+  @include make-container;
+}
+
+@media (min-width: $breakpoint-sm) {
+  .container {
+    max-width: $breakpoint-sm;
+  }
+}
+
+@media (min-width: $breakpoint-md) {
+  .container {
+    max-width: $breakpoint-md;
+  }
+}
+
+@media (min-width: $breakpoint-lg) {
+  .container {
+    max-width: $breakpoint-lg;
+  }
+}
+
+@media (min-width: $breakpoint-xl) {
+  .container {
+    max-width: $breakpoint-xl;
+  }
+}
+
+@media (min-width: $breakpoint-2xl) {
+  .container {
+    max-width: $breakpoint-2xl;
+  }
+}

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

@@ -10,15 +10,15 @@
   flex-direction: column;
 }
 
-.flex--justify-center {
+.flex--centered {
   justify-content: center;
 }
 
-.flex--justify-between {
+.flex--space-items {
   justify-content: space-between;
 }
 
-.flex--items-center {
+.flex--align-center {
   align-items: center;
 }
 

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

@@ -6,13 +6,26 @@
   width: 100%;
 }
 
+.u-full-height {
+  height:100%
+}
+
 .u-min-width {
   min-width: 0;
 }
 
 .u-disabled {
   pointer-events: none;
-  opacity: $opacity-50;
+  opacity: $opacity-30;
+}
+
+.u-off-screen {
+  position: absolute;
+  left: -9999em;
+}
+
+.u-overflow-auto {
+  overflow: auto;
 }
 
 .u-unscrollable {
@@ -35,9 +48,25 @@
   display: none !important;
 }
 
-.u-centered {
-  margin-right: auto;
+.u-visibility-hidden {
+  visibility: hidden;
+}
+
+.u-pointer-events-n {
+  pointer-events: none;
+}
+
+.u-margin-centered {
   margin-left:  auto;
+  margin-right: auto;
+}
+
+.u-wrap {
+  display: block;
+}
+
+.u-nowrap {
+  white-space: nowrap;
 }
 
 .u-clearfix {
@@ -68,6 +97,14 @@
   clear: right;
 }
 
+.u-hide {
+  display: none;
+}
+
+.u-hide-focus {
+  outline: none !important;
+}
+
 @media (max-width: $breakpoint-md - 1) {
   .u-hide\@small {
     display: none;

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

@@ -1,31 +1,41 @@
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/colors";
 @import "sass-zero/mixins";
 
 .list--unindented {
-  padding-left: $size-8;
+  padding-left: $size-4;
+}
+
+.list--flush {
+  padding-left: $size-0;
 }
 
 .list--unbulleted {
+  padding-left: $size-0;
   list-style: none;
 }
 
-.list--spaced {
-  @include space-y($size-2);
+.list--spaced > li + li {
+  margin-top: $size-2;
 }
 
-.list--boxed {
-  background-color: $gray-200;
-  padding: $size-4;
-  border-radius: $rounded;
+.list--inside-bulleted {
+  padding-left: $size-0;
+  list-style-position: inside;
 }
 
-.list--ruled > li {
-  padding: $size-3 $size-4;
+.list--ruled-top {
   border-top-width: $border;
 }
 
 .list--inline > li {
-  margin-right: $size-2;
   display: inline-block;
 }
+
+.list--inline > li + li {
+  margin-left: $size-2;
+}
+
+.list--ruled > li {
+  padding: $size-4 $size-2;
+  border-top-width: $border;
+}

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

@@ -1,15 +1,23 @@
-.position-context {
+.u-position-context {
   position: relative;
 }
 
-.position {
+.u-position {
   position: absolute;
+}
 
-  &--right { right: 0; }
+.u-position--right {
+  right: 0;
+}
 
-  &--left { left: 0; }
+.u-position--left {
+  left: 0;
+}
 
-  &--top { top: 0; }
+.u-position--top {
+  top: 0;
+}
 
-  &--bottom { bottom: 0; }
+.u-position--bottom {
+  bottom: 0;
 }