sass-zero 0.0.5 → 0.0.7

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

@@ -0,0 +1,231 @@
+@import "sass-zero/variables";
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+button {
+  background-color: transparent;
+  background-image: none;
+  padding: 0;
+}
+
+/**
+ * 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;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ *    to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+  font-family: $font-sans; /* 1 */
+  line-height: 1.5; /* 2 */
+}
+
+/**
+ * 1. Prevent padding and border from affecting element width.
+ *
+ *    We used to set this in the html element and inherit from
+ *    the parent element for everything else. This caused issues
+ *    in shadow-dom-enhanced elements like <details> where the content
+ *    is wrapped by a div with box-sizing set to `content-box`.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ *    By default, the way the browser specifies that an element should have no
+ *    border is by setting it's border-style to `none` in the user-agent
+ *    stylesheet.
+ *
+ *    In order to easily add borders to elements by just setting the `border-width`
+ *    property, we change the default border-style for all elements to `solid`, and
+ *    use border-width to hide them instead. This way our `border` utilities only
+ *    need to set the `border-width` property instead of the entire `border`
+ *    shorthand, making our border utilities much more straightforward to compose.
+ *
+ *    https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: $gray-300; /* 2 */
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+hr {
+  border-top-width: 1px;
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+img {
+  border-style: solid;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #a0aec0;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-mono;
+}
+
+/**
+ * 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
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their instrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}

data/vendor/assets/stylesheets/sass-zero/base.scss

@@ -0,0 +1,3 @@
+@import "base/normalize";
+@import "base/preflight";
+@import "base/breadboard";

data/vendor/assets/stylesheets/sass-zero/mixins.scss

@@ -0,0 +1,49 @@
+// ************************************************
+// Float
+// ************************************************
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+// ************************************************
+// Word Break
+// ************************************************
+@mixin break-normal {
+  word-break: normal;
+  overflow-wrap: normal
+}
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ************************************************
+// Font Smoothing
+// ************************************************
+@mixin antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+// ************************************************
+// Container
+// ************************************************
+@mixin make-container($padding, $max-width) {
+  width: 100%;
+  padding-right: $padding;
+  padding-left: $padding;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: $max-width;
+}

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

@@ -0,0 +1,22 @@
+// *******************************************************************
+// Border Style
+// Variables for controlling the style of an element's borders.
+// border-radius: $rounded-none;
+// *******************************************************************
+$rounded-none: 0;
+$rounded-sm:   0.125rem;
+$rounded:      0.25rem;
+$rounded-md:   0.375rem;
+$rounded-lg:   0.5rem;
+$rounded-full: 9999px;
+
+// *******************************************************************
+// Border Width
+// 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;

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

@@ -0,0 +1,9 @@
+// *******************************************************************
+// Breakpoints
+// Customizing the default breakpoints for your project.
+// @media (min-width: $breakpoint-md) {   }
+// *******************************************************************
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;

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

@@ -0,0 +1,108 @@
+// *******************************************************************
+// 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';
+
+$black: #000;
+$white: #fff;
+
+$gray-100: #f7fafc;
+$gray-200: #edf2f7;
+$gray-300: #e2e8f0;
+$gray-400: #cbd5e0;
+$gray-500: #a0aec0;
+$gray-600: #718096;
+$gray-700: #4a5568;
+$gray-800: #2d3748;
+$gray-900: #1a202c;
+
+$red-100: #fff5f5;
+$red-200: #fed7d7;
+$red-300: #feb2b2;
+$red-400: #fc8181;
+$red-500: #f56565;
+$red-600: #e53e3e;
+$red-700: #c53030;
+$red-800: #9b2c2c;
+$red-900: #742a2a;
+
+$orange-100: #fffaf0;
+$orange-200: #feebc8;
+$orange-300: #fbd38d;
+$orange-400: #f6ad55;
+$orange-500: #ed8936;
+$orange-600: #dd6b20;
+$orange-700: #c05621;
+$orange-800: #9c4221;
+$orange-900: #7b341e;
+
+$yellow-100: #fffff0;
+$yellow-200: #fefcbf;
+$yellow-300: #faf089;
+$yellow-400: #f6e05e;
+$yellow-500: #ecc94b;
+$yellow-600: #d69e2e;
+$yellow-700: #b7791f;
+$yellow-800: #975a16;
+$yellow-900: #744210;
+
+$green-100: #f0fff4;
+$green-200: #c6f6d5;
+$green-300: #9ae6b4;
+$green-400: #68d391;
+$green-500: #48bb78;
+$green-600: #38a169;
+$green-700: #2f855a;
+$green-800: #276749;
+$green-900: #22543d;
+
+$teal-100: #e6fffa;
+$teal-200: #b2f5ea;
+$teal-300: #81e6d9;
+$teal-400: #4fd1c5;
+$teal-500: #38b2ac;
+$teal-600: #319795;
+$teal-700: #2c7a7b;
+$teal-800: #285e61;
+$teal-900: #234e52;
+
+$blue-100: #ebf8ff;
+$blue-200: #bee3f8;
+$blue-300: #90cdf4;
+$blue-400: #63b3ed;
+$blue-500: #4299e1;
+$blue-600: #3182ce;
+$blue-700: #2b6cb0;
+$blue-800: #2c5282;
+$blue-900: #2a4365;
+
+$indigo-100: #ebf4ff;
+$indigo-200: #c3dafe;
+$indigo-300: #a3bffa;
+$indigo-400: #7f9cf5;
+$indigo-500: #667eea;
+$indigo-600: #5a67d8;
+$indigo-700: #4c51bf;
+$indigo-800: #434190;
+$indigo-900: #3c366b;
+
+$purple-100: #faf5ff;
+$purple-200: #e9d8fd;
+$purple-300: #d6bcfa;
+$purple-400: #b794f4;
+$purple-500: #9f7aea;
+$purple-600: #805ad5;
+$purple-700: #6b46c1;
+$purple-800: #553c9a;
+$purple-900: #44337a;
+
+$pink-100: #fff5f7;
+$pink-200: #fed7e2;
+$pink-300: #fbb6ce;
+$pink-400: #f687b3;
+$pink-500: #ed64a6;
+$pink-600: #d53f8c;
+$pink-700: #b83280;
+$pink-800: #97266d;
+$pink-900: #702459;

data/vendor/assets/stylesheets/sass-zero/variables/effects.scss

@@ -0,0 +1,26 @@
+// *******************************************************************
+// Box Shadow
+// Variables for controlling the box shadow of an element.
+// box-shadow: $shadow;
+// *******************************************************************
+$shadow-xs:      0 0 0 1px rgba(0, 0, 0, 0.05);
+$shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow:         0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$shadow-inner:   inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+$shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
+$shadow-none:    none;
+
+// *******************************************************************
+// Opacity
+// Utilities for controlling the opacity of an element.
+// opacity: $opacity-25;
+// *******************************************************************
+$opacity-0:   0;
+$opacity-25:  0.25;
+$opacity-50:  0.50;
+$opacity-75:  0.75;
+$opacity-100: 1;

data/vendor/assets/stylesheets/sass-zero/variables/flex.scss

@@ -0,0 +1,9 @@
+// *******************************************************************
+// Flex
+// Variables for controlling how flex items both grow and shrink.
+// flex: $$flex-1;
+// *******************************************************************
+$flex-1:       1 1 0%;
+$flex-auto:    1 1 auto;
+$flex-initial: 0 1 auto;
+$flex-none:    none;

data/vendor/assets/stylesheets/sass-zero/variables/spacing.scss

@@ -0,0 +1,28 @@
+// *******************************************************************
+// Default spacing scale
+// By default, Tailwind includes a generous and comprehensive numeric spacing scale.
+// Use as gap, padding, margin, width, height, transform
+// *******************************************************************
+$size-0:  0;
+$size-1:  0.25rem;
+$size-2:  0.5rem;
+$size-3:  0.75rem;
+$size-4:  1rem;
+$size-5:  1.25rem;
+$size-6:  1.5rem;
+$size-8:  2rem;
+$size-10: 2.5rem;
+$size-12: 3rem;
+$size-16: 4rem;
+$size-20: 5rem;
+$size-24: 6rem;
+$size-32: 8rem;
+$size-40: 10rem;
+$size-48: 12rem;
+$size-56: 14rem;
+$size-64: 16rem;
+$size-px: 1px;
+
+$size-auto:   auto;
+$size-full:   100%;
+$size-screen: 100vw;

data/vendor/assets/stylesheets/sass-zero/variables/transform.scss

@@ -0,0 +1,35 @@
+// *******************************************************************
+// Scale
+// Variables for scaling elements with transform.
+// transform: scale($scale-0);
+// *******************************************************************
+$scale-0:   0;
+$scale-50:  0.50;
+$scale-75:  0.75;
+$scale-90:  0.90;
+$scale-95:  95;
+$scale-100: 1;
+$scale-105: 1.05;
+$scale-110: 1.10;
+$scale-125: 1.25;
+$scale-150: 1.50;
+
+// *******************************************************************
+// Rotate
+// Variables for rotating elements with transform.
+// transform: rotate($rotate-45);
+// *******************************************************************
+$rotate-0:   0;
+$rotate-45:  45deg;
+$rotate-90:  90deg;
+$rotate-180: 180deg;
+
+// *******************************************************************
+// Skew
+// Variables for skewing elements with transform.
+// transform: skew($skew-3);
+// *******************************************************************
+$skew-0:  0;
+$skew-3:  3deg;
+$skew-6:  6deg;
+$skew-12: 12deg;

data/vendor/assets/stylesheets/sass-zero/variables/transition.scss

@@ -0,0 +1,36 @@
+// *******************************************************************
+// Transition Property
+// Variables for controlling which CSS properties transition.
+// transition-property: $transition;
+// *******************************************************************
+$transition-none:      none;
+$transition-all:       all;
+$transition:           background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+$transition-colors:    background-color, border-color, color, fill, stroke;
+$transition-opacity:   opacity;
+$transition-shadow:    box-shadow;
+$transition-transform: transform;
+
+// *******************************************************************
+// Transition Duration
+// Variables for controlling the duration of CSS transitions.
+// transition-duration: $duration-75;
+// *******************************************************************
+$duration-75:   75ms;
+$duration-100:  100ms;
+$duration-150:  150ms;
+$duration-200:  200ms;
+$duration-300:  300ms;
+$duration-500:  500ms;
+$duration-700:  700ms;
+$duration-1000: 1000ms;
+
+// *******************************************************************
+// Transition Timing Function
+// Variables for controlling the easing of CSS transitions.
+// transition-timing-function: $ease-linear;
+// *******************************************************************
+$ease-linear: linear;
+$ease-in:     cubic-bezier(0.4, 0, 1, 1);
+$ease-out:    cubic-bezier(0, 0, 0.2, 1);
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

data/vendor/assets/stylesheets/sass-zero/variables/typography.scss

@@ -0,0 +1,72 @@
+// *******************************************************************
+// Font Family
+// Variables for controlling the font family of an element.
+// font-family: $font-sans;
+// *******************************************************************
+
+$font-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+$font-mono:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+// *******************************************************************
+// Font Size
+// Variables for controlling the font size of an element.
+// font-size: $text-xs;
+// *******************************************************************
+$text-xs:   0.75rem;
+$text-sm:   0.875rem;
+$text-base: 1rem;
+$text-lg:   1.125rem;
+$text-xl:   1.25rem;
+$text-2xl:  1.5rem;
+$text-3xl:  1.875rem;
+$text-4xl:  2.25rem;
+$text-5xl:  3rem;
+$text-6xl:  4rem;
+
+// *******************************************************************
+// Font Weight
+// Variables for controlling the font weight of an element.
+// font-weight: $font-hairline;
+// *******************************************************************
+$font-hairline:  100;
+$font-thin:      200;
+$font-light:     200;
+$font-normal:    400;
+$font-medium:    500;
+$font-semibold:  600;
+$font-bold:      700;
+$font-extrabold: 800;
+$font-black:     900;
+
+// *******************************************************************
+// Line Height
+// Variables for controlling the leading (line height) of an element.
+// line-height: $leading-tight;
+// *******************************************************************
+$leading-none:    1;
+$leading-tight:   1.25;
+$leading-snug:    1.375;
+$leading-normal:  1.5;
+$leading-relaxed: 1.625;
+$leading-loose:   1.2;
+$leading-3:       .75rem;
+$leading-4:       1rem;
+$leading-5:       1.25rem;
+$leading-6:       1.5rem;
+$leading-7:       1.75rem;
+$leading-8:       2rem;
+$leading-9:       2.25rem;
+$leading-10:      2.5rem;
+
+// *******************************************************************
+// Letter Spacing
+// Variables for controlling the tracking (letter spacing) of an element.
+// letter-spacing: $tracking-tighter;
+// *******************************************************************
+$tracking-tighter: -0.05em;
+$tracking-tight:   -0.025em;
+$tracking-normal:  0;
+$tracking-wide:    0.025em;
+$tracking-wider:   0.05em;
+$tracking-widest:  0.1em;