sass-zero 0.0.40 → 0.0.45

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

@@ -1,3 +1,13 @@
+$color-txt:                  #18181b;
+$color-txt--subtle:          #3f3f46;
+$color-txt--subtle-reversed: #fff;
+$color-txt--decorated:       #3b82f6;
+
+$color-bg--highlight: #f4f4f5;
+
+@import "sass-zero/utilities/align";
+@import "sass-zero/utilities/animation";
+@import "sass-zero/utilities/container";
 @import "sass-zero/utilities/flex";
 @import "sass-zero/utilities/flush";
 @import "sass-zero/utilities/layout";

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/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/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

@@ -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/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

@@ -2,23 +2,40 @@
 @import "sass-zero/mixins";
 
 .list--unindented {
-  padding-left: $size-8;
+  padding-left: $size-4;
+}
+
+.list--flush {
+  padding-left: $size-0;
 }
 
 .list--unbulleted {
- list-style: none;
+  padding-left: $size-0;
+  list-style: none;
 }
 
 .list--spaced {
   @include space-y($size-2);
 }
 
-.list--ruled > li {
-  padding: $size-3 $size-4;
+.list--inside-bulleted {
+  padding-left: $size-0;
+  list-style-position: inside;
+}
+
+.list--ruled-top {
   border-top-width: $border;
 }
 
+.list--inline {
+  @include space-x($size-2);
+}
+
 .list--inline > li {
-  margin-right: $size-2;
   display: inline-block;
 }
+
+.list--ruled > li {
+  padding: $size-4 $size-2;
+  border-top-width: $border;
+}

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

@@ -1,8 +1,8 @@
-.position-context {
+.u-position-context {
   position: relative;
 }
 
-.position {
+.u-position {
   position: absolute;
 
   &--right { right: 0; }

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

@@ -1,46 +1,38 @@
 @import "sass-zero/variables/typography";
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/colors";
 @import "sass-zero/mixins";
 
-.txt--xs {
-  font-size: $text-xs;
-}
-
-.txt--sm {
-  font-size: $text-sm;
-}
-
-.txt--md {
-  font-size: $text-base;
+.txt--normal {
+  font-weight: $font-normal !important;
 }
 
-.txt--lg {
-  font-size: $text-lg;
+.txt--bold {
+  font-weight: $font-bold;
 }
 
-.txt--xl {
-  font-size: $text-xl;
+.txt--underline {
+  text-decoration: underline;
 }
 
-.txt--2xl {
-  font-size: $text-2xl;
+.txt--uppercase {
+  text-transform: uppercase;
 }
 
-.txt--3xl {
-  font-size: $text-3xl;
+.txt--subtle {
+  color: $color-txt--subtle;
 }
 
-.txt--4xl {
-  font-size: $text-4xl;
+.txt--subtle-reversed {
+  color: $color-txt--subtle-reversed;
 }
 
-.txt--5xl {
-  font-size: $text-5xl;
+.txt--full-contrast {
+  color: $color-txt;
 }
 
-.txt--6xl {
-  font-size: $text-6xl;
+.txt--meta {
+  font-size: $text-sm;
+  color: $color-txt--subtle;
 }
 
 .txt--nowrap {
@@ -51,6 +43,10 @@
   word-wrap: break-word;
 }
 
+.txt--break-words-alt {
+  word-break: break-word;
+}
+
 .txt--break-all {
   word-break: break-all;
 }
@@ -59,61 +55,100 @@
   @include ellipsis;
 }
 
-.txt--normal {
-  font-weight: $font-normal;
+.txt--dimmed {
+  opacity: $opacity-75;
 }
 
-.txt--bold {
-  font-weight: $font-bold;
+.txt--very-dimmed {
+  opacity: $opacity-50;
 }
 
-.txt--subtle {
-  color: $gray-700;
+.txt--highlight {
+  background-color: $color-bg--highlight;
+  border-radius: $rounded-full;
+  padding: $size-0 $size-1;
 }
 
-.txt--very-subtle {
-  color: $gray-600;
+.txt--overflow-hidden {
+  overflow: hidden;
 }
 
-.txt--underline {
-  text-decoration: underline;
+.txt--xs {
+  font-size: $text-xs;
+  line-height: $leading-4;
 }
 
-.txt--uppercase {
-  text-transform: uppercase;
+.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;
 }
 
-.align--top {
-  vertical-align: top;
+.txt--2xl {
+  font-size: $text-2xl;
+  line-height: $leading-8;
 }
 
-.align--middle {
-  vertical-align: middle;
+.txt--3xl {
+  font-size: $text-3xl;
+  line-height: $leading-9;
 }
 
-.align--bottom {
-  vertical-align: bottom;
+.txt--4xl {
+  font-size: $text-4xl;
+  line-height: $leading-10;
 }
 
-.align--left {
-  text-align: left;
+.txt--5xl {
+  font-size: $text-5xl;
+  line-height: $leading-none;
 }
 
-.align--center {
-  text-align: center;
+.txt--6xl {
+  font-size: $text-6xl;
+  line-height: $leading-none;
 }
 
-.align--right {
-  text-align: right;
+.txt--7xl {
+  font-size: $text-7xl;
+  line-height: $leading-none;
+}
+
+.txt--8xl {
+  font-size: $text-8xl;
+  line-height: $leading-none;
+}
+
+.txt--9xl {
+  font-size: $text-9xl;
+  line-height: $leading-none;
 }
 
 .decorated {
-  color: $blue-800;
+  color: $color-txt--decorated;
   text-decoration: underline;
 }
 
 .decorated--subtle {
-  color: $gray-700;
-  font-weight: $font-normal;
-  &:hover { text-decoration: underline; }
+  color: $color-txt--subtle;
+  text-decoration: underline;
+}
+
+.undecorated {
+  color: inherit;
+  text-decoration: none;
 }