sass-zero 0.0.38 → 0.0.43

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/layout.scss

@@ -1,10 +1,20 @@
 @import "sass-zero/variables/breakpoints";
+@import "sass-zero/variables/effects";
 @import "sass-zero/mixins";
 
 .u-full-width {
   width: 100%;
 }
 
+.u-min-width {
+  min-width: 0;
+}
+
+.u-disabled {
+  pointer-events: none;
+  opacity: $opacity-50;
+}
+
 .u-unscrollable {
   overflow: hidden;
 }
@@ -27,7 +37,7 @@
 
 .u-centered {
   margin-right: auto;
-  margin-left: auto;
+  margin-left:  auto;
 }
 
 .u-clearfix {

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

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

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

@@ -1,34 +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 {
@@ -39,6 +77,10 @@
   word-wrap: break-word;
 }
 
+.txt--break-words-alt {
+  word-break: break-word;
+}
+
 .txt--break-all {
   word-break: break-all;
 }
@@ -48,7 +90,7 @@
 }
 
 .txt--normal {
-  font-weight: $font-normal;
+  font-weight: $font-normal !important;
 }
 
 .txt--bold {
@@ -59,10 +101,6 @@
   color: $gray-700;
 }
 
-.txt--very-subtle {
-  color: $gray-600;
-}
-
 .txt--underline {
   text-decoration: underline;
 }
@@ -71,6 +109,12 @@
   text-transform: uppercase;
 }
 
+.txt--highlight {
+  background-color: $gray-200;
+  border-radius: $rounded-full;
+  padding: $size-0 $size-1;
+}
+
 .align--top {
   vertical-align: top;
 }
@@ -94,3 +138,13 @@
 .align--right {
   text-align: right;
 }
+
+.decorated {
+  color: $blue-500;
+  text-decoration: underline;
+}
+
+.decorated--subtle {
+  color: $gray-700;
+  text-decoration: underline;
+}

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

@@ -3,6 +3,7 @@
 @import "variables/colors";
 @import "variables/effects";
 @import "variables/flex";
+@import "variables/grid";
 @import "variables/spacing";
 @import "variables/transition";
 @import "variables/transform";

data/app/assets/stylesheets/sass-zero/variables/border.scss

@@ -8,6 +8,9 @@ $rounded-sm:   0.125rem;
 $rounded:      0.25rem;
 $rounded-md:   0.375rem;
 $rounded-lg:   0.5rem;
+$rounded-xl:   0.75rem;
+$rounded-2xl:  1rem;
+$rounded-3xl:  1.5rem;
 $rounded-full: 9999px;
 
 // *******************************************************************
@@ -15,8 +18,8 @@ $rounded-full: 9999px;
 // Utilities for controlling the width of an element's borders.
 // border-width: $border;
 // *******************************************************************
-$border:   1px;
 $border-0: 0;
 $border-2: 2px;
 $border-4: 4px;
 $border-8: 8px;
+$border:   1px;

data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss

@@ -3,7 +3,8 @@
 // Customizing the default breakpoints for your project.
 // @media (min-width: $breakpoint-md) {   }
 // *******************************************************************
-$breakpoint-sm: 640px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-sm:  640px;
+$breakpoint-md:  768px;
+$breakpoint-lg:  1024px;
+$breakpoint-xl:  1280px;
+$breakpoint-2xl: 1536px;

data/app/assets/stylesheets/sass-zero/variables/colors.scss

@@ -2,128 +2,249 @@
 // Default color palette
 // sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
 // *******************************************************************
-$transparent: 'transparent';
+$transparent: transparent;
 
 $black: #000;
 $white: #fff;
 
-$gray-50:  #f9fafb;
-$gray-100: #f4f5f7;
-$gray-200: #e5e7eb;
-$gray-300: #d2d6dc;
-$gray-400: #9fa6b2;
-$gray-500: #6b7280;
-$gray-600: #4b5563;
-$gray-700: #374151;
-$gray-800: #252f3f;
-$gray-900: #161e2e;
-
-$cool-gray-50:  #fbfdfe;
-$cool-gray-100: #f1f5f9;
-$cool-gray-200: #e2e8f0;
-$cool-gray-300: #cfd8e3;
-$cool-gray-400: #97a6ba;
-$cool-gray-500: #64748b;
-$cool-gray-600: #475569;
-$cool-gray-700: #364152;
-$cool-gray-800: #27303f;
-$cool-gray-900: #1a202e;
-
-$red-50:  #fdf2f2;
-$red-100: #fde8e8;
-$red-200: #fbd5d5;
-$red-300: #f8b4b4;
-$red-400: #f98080;
-$red-500: #f05252;
-$red-600: #e02424;
-$red-700: #c81e1e;
-$red-800: #9b1c1c;
-$red-900: #771d1d;
-
-$orange-50:  #fff8f1;
-$orange-100: #feecdc;
-$orange-200: #fcd9bd;
-$orange-300: #fdba8c;
-$orange-400: #ff8a4c;
-$orange-500: #ff5a1f;
-$orange-600: #d03801;
-$orange-700: #b43403;
-$orange-800: #8a2c0d;
-$orange-900: #771d1d;
-
-$yellow-50:  #fdfdea;
-$yellow-100: #fdf6b2;
-$yellow-200: #fce96a;
-$yellow-300: #faca15;
-$yellow-400: #e3a008;
-$yellow-500: #c27803;
-$yellow-600: #9f580a;
-$yellow-700: #8e4b10;
-$yellow-800: #723b13;
-$yellow-900: #633112;
-
-$green-50:  #f3faf7;
-$green-100: #def7ec;
-$green-200: #bcf0da;
-$green-300: #84e1bc;
-$green-400: #31c48d;
-$green-500: #0e9f6e;
-$green-600: #057a55;
-$green-700: #046c4e;
-$green-800: #03543f;
-$green-900: #014737;
-
-$teal-50:  #edfafa;
-$teal-100: #d5f5f6;
-$teal-200: #afecef;
-$teal-300: #7edce2;
-$teal-400: #16bdca;
-$teal-500: #0694a2;
-$teal-600: #047481;
-$teal-700: #036672;
-$teal-800: #05505c;
-$teal-900: #014451;
-
-$blue-50:  #ebf5ff;
-$blue-100: #e1effe;
-$blue-200: #c3ddfd;
-$blue-300: #a4cafe;
-$blue-400: #76a9fa;
-$blue-500: #3f83f8;
-$blue-600: #1c64f2;
-$blue-700: #1a56db;
-$blue-800: #1e429f;
-$blue-900: #233876;
-
-$indigo-50:  #f0f5ff;
-$indigo-100: #e5edff;
-$indigo-200: #cddbfe;
-$indigo-300: #b4c6fc;
-$indigo-400: #8da2fb;
-$indigo-500: #6875f5;
-$indigo-600: #5850ec;
-$indigo-700: #5145cd;
-$indigo-800: #42389d;
-$indigo-900: #362f78;
-
-$purple-50:  #f6f5ff;
-$purple-100: #edebfe;
-$purple-200: #dcd7fe;
-$purple-300: #cabffd;
-$purple-400: #ac94fa;
-$purple-500: #9061f9;
-$purple-600: #7e3af2;
-$purple-700: #6c2bd9;
-$purple-800: #5521b5;
-$purple-900: #4a1d96;
+$rose-50:  #fff1f2;
+$rose-100: #ffe4e6;
+$rose-200: #fecdd3;
+$rose-300: #fda4af;
+$rose-400: #fb7185;
+$rose-500: #f43f5e;
+$rose-600: #e11d48;
+$rose-700: #be123c;
+$rose-800: #9f1239;
+$rose-900: #881337;
 
 $pink-50:  #fdf2f8;
-$pink-100: #fce8f3;
-$pink-200: #fad1e8;
-$pink-300: #f8b4d9;
-$pink-400: #f17eb8;
-$pink-500: #e74694;
-$pink-600: #d61f69;
-$pink-700: #bf125d;
-$pink-800: #99154b;
-$pink-900: #751a3d;
+$pink-100: #fce7f3;
+$pink-200: #fbcfe8;
+$pink-300: #f9a8d4;
+$pink-400: #f472b6;
+$pink-500: #ec4899;
+$pink-600: #db2777;
+$pink-700: #be185d;
+$pink-800: #9d174d;
+$pink-900: #831843;
+
+$fuchsia-50:  #fdf4ff;
+$fuchsia-100: #fae8ff;
+$fuchsia-200: #f5d0fe;
+$fuchsia-300: #f0abfc;
+$fuchsia-400: #e879f9;
+$fuchsia-500: #d946ef;
+$fuchsia-600: #c026d3;
+$fuchsia-700: #a21caf;
+$fuchsia-800: #86198f;
+$fuchsia-900: #701a75;
+
+$purple-50:  #faf5ff;
+$purple-100: #f3e8ff;
+$purple-200: #e9d5ff;
+$purple-300: #d8b4fe;
+$purple-400: #c084fc;
+$purple-500: #a855f7;
+$purple-600: #9333ea;
+$purple-700: #7e22ce;
+$purple-800: #6b21a8;
+$purple-900: #581c87;
+
+$violet-50:  #f5f3ff;
+$violet-100: #ede9fe;
+$violet-200: #ddd6fe;
+$violet-300: #c4b5fd;
+$violet-400: #a78bfa;
+$violet-500: #8b5cf6;
+$violet-600: #7c3aed;
+$violet-700: #6d28d9;
+$violet-800: #5b21b6;
+$violet-900: #4c1d95;
+
+$indigo-50:  #eef2ff;
+$indigo-100: #e0e7ff;
+$indigo-200: #c7d2fe;
+$indigo-300: #a5b4fc;
+$indigo-400: #818cf8;
+$indigo-500: #6366f1;
+$indigo-600: #4f46e5;
+$indigo-700: #4338ca;
+$indigo-800: #3730a3;
+$indigo-900: #312e81;
+
+$blue-50:  #eff6ff;
+$blue-100: #dbeafe;
+$blue-200: #bfdbfe;
+$blue-300: #93c5fd;
+$blue-400: #60a5fa;
+$blue-500: #3b82f6;
+$blue-600: #2563eb;
+$blue-700: #1d4ed8;
+$blue-800: #1e40af;
+$blue-900: #1e3a8a;
+
+$light-blue-50:  #f0f9ff;
+$light-blue-100: #e0f2fe;
+$light-blue-200: #bae6fd;
+$light-blue-300: #7dd3fc;
+$light-blue-400: #38bdf8;
+$light-blue-500: #0ea5e9;
+$light-blue-600: #0284c7;
+$light-blue-700: #0369a1;
+$light-blue-800: #075985;
+$light-blue-900: #0c4a6e;
+
+$cyan-50:  #ecfeff;
+$cyan-100: #cffafe;
+$cyan-200: #a5f3fc;
+$cyan-300: #67e8f9;
+$cyan-400: #22d3ee;
+$cyan-500: #06b6d4;
+$cyan-600: #0891b2;
+$cyan-700: #0e7490;
+$cyan-800: #155e75;
+$cyan-900: #164e63;
+
+$teal-50:  #f0fdfa;
+$teal-100: #ccfbf1;
+$teal-200: #99f6e4;
+$teal-300: #5eead4;
+$teal-400: #2dd4bf;
+$teal-500: #14b8a6;
+$teal-600: #0d9488;
+$teal-700: #0f766e;
+$teal-800: #115e59;
+$teal-900: #134e4a;
+
+$emerald-50:  #ecfdf5;
+$emerald-100: #d1fae5;
+$emerald-200: #a7f3d0;
+$emerald-300: #6ee7b7;
+$emerald-400: #34d399;
+$emerald-500: #10b981;
+$emerald-600: #059669;
+$emerald-700: #047857;
+$emerald-800: #065f46;
+$emerald-900: #064e3b;
+
+$green-50:  #f0fdf4;
+$green-100: #dcfce7;
+$green-200: #bbf7d0;
+$green-300: #86efac;
+$green-400: #4ade80;
+$green-500: #22c55e;
+$green-600: #16a34a;
+$green-700: #15803d;
+$green-800: #166534;
+$green-900: #14532d;
+
+$lime-50:  #f7fee7;
+$lime-100: #ecfccb;
+$lime-200: #d9f99d;
+$lime-300: #bef264;
+$lime-400: #a3e635;
+$lime-500: #84cc16;
+$lime-600: #65a30d;
+$lime-700: #4d7c0f;
+$lime-800: #3f6212;
+$lime-900: #365314;
+
+$yellow-50:  #fefce8;
+$yellow-100: #fef9c3;
+$yellow-200: #fef08a;
+$yellow-300: #fde047;
+$yellow-400: #facc15;
+$yellow-500: #eab308;
+$yellow-600: #ca8a04;
+$yellow-700: #a16207;
+$yellow-800: #854d0e;
+$yellow-900: #713f12;
+
+$amber-50:  #fffbeb;
+$amber-100: #fef3c7;
+$amber-200: #fde68a;
+$amber-300: #fcd34d;
+$amber-400: #fbbf24;
+$amber-500: #f59e0b;
+$amber-600: #d97706;
+$amber-700: #b45309;
+$amber-800: #92400e;
+$amber-900: #78350f;
+
+$orange-50:  #fff7ed;
+$orange-100: #ffedd5;
+$orange-200: #fed7aa;
+$orange-300: #fdba74;
+$orange-400: #fb923c;
+$orange-500: #f97316;
+$orange-600: #ea580c;
+$orange-700: #c2410c;
+$orange-800: #9a3412;
+$orange-900: #7c2d12;
+
+$red-50:  #fef2f2;
+$red-100: #fee2e2;
+$red-200: #fecaca;
+$red-300: #fca5a5;
+$red-400: #f87171;
+$red-500: #ef4444;
+$red-600: #dc2626;
+$red-700: #b91c1c;
+$red-800: #991b1b;
+$red-900: #7f1d1d;
+
+$warm-gray-50:  #fafaf9;
+$warm-gray-100: #f5f5f4;
+$warm-gray-200: #e7e5e4;
+$warm-gray-300: #d6d3d1;
+$warm-gray-400: #a8a29e;
+$warm-gray-500: #78716c;
+$warm-gray-600: #57534e;
+$warm-gray-700: #44403c;
+$warm-gray-800: #292524;
+$warm-gray-900: #1c1917;
+
+$true-gray-50:  #fafafa;
+$true-gray-100: #f5f5f5;
+$true-gray-200: #e5e5e5;
+$true-gray-300: #d4d4d4;
+$true-gray-400: #a3a3a3;
+$true-gray-500: #737373;
+$true-gray-600: #525252;
+$true-gray-700: #404040;
+$true-gray-800: #262626;
+$true-gray-900: #171717;
+
+$gray-50:  #fafafa;
+$gray-100: #f4f4f5;
+$gray-200: #e4e4e7;
+$gray-300: #d4d4d8;
+$gray-400: #a1a1aa;
+$gray-500: #71717a;
+$gray-600: #52525b;
+$gray-700: #3f3f46;
+$gray-800: #27272a;
+$gray-900: #18181b;
+
+$cool-gray-50:  #f9fafb;
+$cool-gray-100: #f3f4f6;
+$cool-gray-200: #e5e7eb;
+$cool-gray-300: #d1d5db;
+$cool-gray-400: #9ca3af;
+$cool-gray-500: #6b7280;
+$cool-gray-600: #4b5563;
+$cool-gray-700: #374151;
+$cool-gray-800: #1f2937;
+$cool-gray-900: #111827;
+
+$blue-gray-50:  #f8fafc;
+$blue-gray-100: #f1f5f9;
+$blue-gray-200: #e2e8f0;
+$blue-gray-300: #cbd5e1;
+$blue-gray-400: #94a3b8;
+$blue-gray-500: #64748b;
+$blue-gray-600: #475569;
+$blue-gray-700: #334155;
+$blue-gray-800: #1e293b;
+$blue-gray-900: #0f172a;