@leaflink/stash 43.5.2 → 44.0.0-beta.10

package/styles/elements/_tooltips.scss

@@ -1,110 +0,0 @@
-// The tooltips position relative to the toggle element
-$tooltip-position: calc(100% + #{space(2)});
-// Centers arrow horizontally or vertically along tooltip on arrow's center
-$arrow-position-centered: calc(50% - #{space(1)});
-// Background color of tooltip
-$tooltip-bg-color: rgba($ice-900, 0.95);
-
-.tooltip {
-  --offset: 0;
-
-  background: $tooltip-bg-color;
-  border-radius: $border-radius;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
-  color: var(--color-white);
-  font-size: typo('small', 'size');
-  line-height: typo('small', 'line-height');
-  opacity: 0;
-  padding: space(2);
-  pointer-events: none; // Tooltips should disappear once the user hovers away
-  position: absolute;
-  text-align: center;
-  transition: opacity $primary-transition, visibility $primary-transition;
-  visibility: hidden;
-  white-space: normal;
-  width: 148px;
-
-  &::after {
-    background-color:  $tooltip-bg-color;
-    border-radius: 0 2px 0 0;
-    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
-    content: '';
-    display: inline-block;
-    height: 12px;
-    position: absolute;
-    top: -#{space(1)};
-    transform: rotate(135deg);
-    z-index: z-index('behind');
-    width: 12px;
-  }
-
-  &--bottom,
-  &--top {
-    left: calc(50% + calc(var(--offset) * 1px));
-    transform: translateX(-50%);
-
-    &::after {
-      left: calc(#{$arrow-position-centered} + calc(var(--offset) * -1px));
-    }
-  }
-
-  &--bottom {
-    top: $tooltip-position;
-
-    &::after {
-      transform: rotate(-45deg);
-    }
-  }
-
-  &--top {
-    bottom: $tooltip-position;
-
-    &::after {
-      top: calc(100% - space(1));
-    }
-  }
-
-  &--left,
-  &--right {
-    top: 50%;
-    transform: translateY(-50%);
-
-    &::after {
-      top: $arrow-position-centered;
-    }
-  }
-
-  &--left {
-    right: $tooltip-position;
-
-    &::after {
-      left: calc(100% - space(1));
-      transform: rotate(45deg);
-    }
-  }
-
-  &--right {
-    left: $tooltip-position;
-
-    &::after {
-      left: -#{space(1)};
-      transform: rotate(-135deg);
-    }
-  }
-}
-
-.tooltip-toggle {
-  display: inline-block;
-  position: relative;
-  z-index: 0;
-
-  &:hover {
-    outline: none;
-    z-index: z-index('modal');
-
-    .tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}

package/styles/main.scss

@@ -1,38 +0,0 @@
-@charset "UTF-8";
-
-/*!
-                 `/sdNMMMMNdo:          :sdNMMMMNms/`
-               `yNMMMMMNs-  `.`      `oNMMMMMMy:. `.`
-              :NMMMMMMh`.sdMMMNdo`  .dMMMMMMm-`+dNMMMms-
-             .NMMMMMMM`.ydMMMMMMMm``dMMMMMMM/`sdNMMMMMMM-
-             sMMMMMMMM    .mMMMMMM+/MMMMMMMM:   .dMMMMMMh
-             hMMMMMMMM    `mMMMMMM+/MMMMMMMM:   `hMMMMMMh
-             hMMMMMMMM   /NMMMMMMM:/MMMMMMMM:  -mMMMMMMMs
-             hMMMMMMMM `yMMMMMMMMy /MMMMMMMM: oMMMMMMMMd`
-             hMMMMMMMM:mMMMMMMMMo  /MMMMMMMM+dMMMMMMMMy`
-             hMMMMMMMMMMMMMMMMm-   /MMMMMMMMMMMMMMMMN/
-             hMMMMMMMMMMMMMMMs`    /MMMMMMMMMMMMMMMh.
-             hMMMMMMMMMMMMMN:      /MMMMMMMMMMMMMN+
-             hMMMMMMMMMMMMh`       /MMMMMMMMMMMMm-
-             hMMMMMMMMMMM+         /MMMMMMMMMMMs`
-             hMMMMMMMMMd.          /MMMMMMMMMN:
-             hMMMMMMMMs            /MMMMMMMMh`
-          `` hMMMMMMMM           ` /MMMMMMMM:
-         -d: hMMMMMMMM         .d: /MMMMMMMM:
-        +NM: hMMMMMMMM        +NM: /MMMMMMMM:
-      .hMMM: hMMMMMMMM`     .hMMMs /MMMMMMMMy`
-     /NMMMM+ oMMMMMMMMd:.`.sNMMMMm``NMMMMMMMMNhyyyyyyy+
-   `yMMMMMMN.`mMMMMMMMMMMMMMMMMMMMy /MMMMMMMMMMMMMMMMMh
-  :NMMMMMMMMo -mMMMMMMMMMMMMMMMMMMh` :mMMMMMMMMMMMMMMMh
-`sMMMMMMMMN:   `oNMMMMMMMMMMMMMMy-     /mMMMMMMMMMMMMMh
-shhhhhhhhy`      `:sdMMMMMMMmy/`         `/oshhhhhhhhho
-
-*/
-
-@import 'core';
-@import 'base';
-@import 'elements/all';
-@import 'utility/all';
-
-// NOTE: at present, not included:
-// @import 'components/all';

package/styles/utility/_all.scss

@@ -1,12 +0,0 @@
-/**
-
-  Helper and utility classes, these form the core
-  of the Stash Design system styles
-
-*/
-
-@import 'grid';
-@import 'animations';
-@import 'display';
-@import 'icons';
-@import 'transitions';

package/styles/utility/_animations.scss

@@ -1,103 +0,0 @@
-/**
-
-  Animations
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Attention
-    • Loading
-
-*/
-
-/* ---------------------------------------
-  Attention
----------------------------------------- */
-
-@keyframes shake {
-  from,
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-.fx-shake {
-  animation: 2s shake 1;
-}
-
-
-@keyframes pulse {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.25, 1.25, 1.25);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.fx-pulse {
-  animation: 1s pulse;
-}
-
-
-/* ---------------------------------------
-  Loading
----------------------------------------- */
-
-@keyframes spin-loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  65% {
-    transform: rotate(720deg);
-  }
-  100% {
-    transform: rotate(720deg);
-  }
-}
-
-.fx-spin {
-  animation-duration: 1.5s;
-  animation-iteration-count: infinite;
-  animation-name: spin-loading;
-  animation-timing-function: ease-in-out;
-}
-
-@keyframes flash {
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.fx-flash {
-  animation: 0.5s flash;
-}

package/styles/utility/_display.scss

@@ -1,167 +0,0 @@
-/**
-
-  All the things that will affect the _display_ of your content. This
-  includes breakpoint helpers (ie toggle display according to viewport),
-  overflow helpers, actual `display` classes (including hiding things),
-  z-index helpers, elevation, and borders.
-
-
-      ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Overflow
-    • Hidden
-    • Display
-    • Height
-    • Width
-    • Borders
-    • Rotate
-
-*/
-
-/* ---------------------------------------
-  Overflow
----------------------------------------- */
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-
-.sr-only {
-  border-width: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-/* ---------------------------------------
-  Display
----------------------------------------- */
-
-.block {
-  display: block !important;
-}
-
-.inline-block {
-  display: inline-block !important;
-}
-
-/* ---------------------------------------
-  Hidden
----------------------------------------- */
-
-.hidden {
-  display: none !important;
-}
-
-@each $size, $media_query in $display-breakpoints {
-  .hidden {
-    &-#{$size} { // NOTE: `#{$size}:hidden` prob better for consistency
-      @media #{$media_query} {
-        display: none !important;
-      }
-    }
-  }
-}
-
-/* ---------------------------------------
-  Height
----------------------------------------- */
-
-.h-full {
-  height: 100%;
-}
-
-
-/* ---------------------------------------
-  Width
----------------------------------------- */
-
-.w-full {
-  width: 100%;
-}
-
-.w-1\/2 {
-  width: 50%;
-}
-
-.w-64 {
-  width: 16rem;
-}
-
-.w-screen {
-  width: 100vw;
-}
-
-.w-min-auto {
-  min-width: auto;
-}
-
-
-/* ---------------------------------------
-  Borders
----------------------------------------- */
-
-.border {
-  border-width: get($borders, 'thin');
-}
-
-.no-border {
-  border-width: 0 !important;
-}
-
-.no-outline {
-  outline: 0;
-}
-
-.rounded {
-  border-radius: $border-radius;
-}
-
-.border-t {
-  border-top-width: get($borders, 'thin');
-}
-
-.border-r {
-  border-right-width: get($borders, 'thin');
-}
-
-.border-b {
-  border-bottom-width: get($borders, 'thin');
-}
-
-.border-l {
-  border-left-width: get($borders, 'thin');
-}
-
-
-/* ---------------------------------------
-  Rotate
----------------------------------------- */
-
-.rotate-270 {
-  transform: rotate(270deg);
-}
-
-.rotate-180 {
-  transform: rotate(180deg);
-}
-
-.rotate-90 {
-  transform: rotate(90deg);
-}

package/styles/utility/_grid.scss

@@ -1,200 +0,0 @@
-/**
-
-  Grid and layout stuffs: CSS grids and flex helpers, grid
-  gutters, spacing.
-
-  ***
-
-  IMPORTANT NOTE: The original grid classes have been *Deprecated* in favor
-  of their `ll-` prefixed versions. Please don't use any of the grid utilities
-  anymore without prefixing with `ll-`.
-
-  Changes:
-
-    - `grid`              --> `ll-grid`
-    - `.grid-cols-{n}`    --> `.ll-grid-cols-{n}`
-    - `.grid--2cols`      --> REMOVED
-    - `.grid--4cols`      --> REMOVED
-    - `.md:grid-cols-{n}` --> `.md:ll-grid-cols-{n}`
-    - `.lg:grid-cols-{n}` --> `.lg:ll-grid-cols-{n}`
-
-  Things that stay the same (Tailwind implementation is the same):
-
-    - `col-span-N`
-
-  ***
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • CSS Grid
-    • Flex
-
-*/
-
-/* ---------------------------------------
-  CSS Grid
----------------------------------------- */
-
-.ll-grid,
-.grid {
-  column-gap: var(--grid-gutter);
-  display: grid;
-  grid-column-gap: var(--grid-gutter); // iOS fix
-  grid-row-gap: space(3); // iOS fix
-  grid-template-columns: repeat(1, 1fr);
-  row-gap: space(3);
-
-  > * { min-width: 0; } // Fix for CSS grid, https://daverupert.com/2017/09/breaking-the-grid/
-
-  // DEPRECATED
-  // #######################################
-  @include breakpoint('md') {
-    grid-template-columns: repeat(12, 1fr);
-  }
-
-  @for $i from 1 through 12 {
-    .span-#{$i} {
-      @include span($i);
-    }
-  }
-  // END DEPRECATED
-  // #######################################
-}
-
-
-$start: 1;
-$end: 12;
-
-// TODO roll in to loop, below
-@each $i in $grid-columns {
-  .ll-grid-cols-#{$i},
-  .grid-cols-#{$i} {
-    grid-template-columns: repeat(#{$i}, 1fr);
-  }
-}
-
-// make the grid span at full width
-.col-span-full {
-  grid-column: 1 / -1;
-}
-
-// Note: new syntax to not conflict w/ existing span-xx classes
-// Same implementation in tailwind, no need to duplicate
-@for $i from $start through $end {
-  .col-span-#{$i} {
-    @include span($i);
-  }
-}
-
-@each $size in ('md', 'lg') {
-  @include breakpoint($size) {
-    .#{$size}\: {
-      @for $i from $start through $end {
-        // column spans
-        &col-span-#{$i} {
-          @include span($i);
-        }
-
-        // column order
-        &order-#{$i} {
-          order: $i;
-        }
-      }
-
-      // grid columns
-      // different from tailwinds' `repeat(i, minmax(0, 1fr));`
-      @each $i in $grid-columns {
-        &ll-grid-cols-#{$i},
-        &grid-cols-#{$i} {
-          grid-template-columns: repeat(#{$i}, 1fr);
-        }
-      }
-    }
-  }
-}
-
-@for $i from $start through $end {
-  .col-start-#{$i} {
-    grid-column-start: $i;
-  }
-}
-
-@each $size in ('md', 'lg') {
-  @include breakpoint($size) {
-    .#{$size}\: {
-      @for $i from $start through $end {
-        // column offsets
-        &col-start-#{$i} {
-          grid-column-start: $i;
-        }
-      }
-    }
-  }
-}
-
-
-@for $i from $start through $end {
-  .col-end-#{$i} {
-    grid-column-end: $i;
-  }
-}
-
-@each $size in ('md', 'lg') {
-  @include breakpoint($size) {
-    .#{$size}\: {
-      @for $i from $start through $end {
-        &col-end-#{$i} {
-          grid-column-end: $i;
-        }
-      }
-    }
-  }
-}
-
-/* ---------------------------------------
-  Flex
----------------------------------------- */
-
-// Opinionated flex utility classes.
-// Assumes horizontal flex only (ie `flex-direction: row` is implicit)
-.flex { display: flex; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-initial { flex: 0 1 auto; }
-.flex-1 { flex: 1 1 0%; }
-.flex-auto { flex: 1 1 auto; }
-.flex-none { flex: none; }
-.flex-col { flex-direction: column; }
-
-//horizontal
-.align-center { justify-content: center; }
-.align-right { justify-content: flex-end; }
-.align-spaced { justify-content: space-around; }
-.align-justify { justify-content: space-between; }
-
-// vertical
-.align-top { align-items: flex-start; }
-.align-bottom { align-items: flex-end; }
-.align-middle { align-items: center; }
-
-// align self
-.align-self-start { align-self: flex-start; }
-.align-self-end { align-self: flex-end; }
-.align-self-center { align-self: center; }
-.align-self-baseline { align-self: baseline; }
-.align-self-auto { align-self: auto; }
-.align-self-stretch { align-self: stretch; }
-
-
-/* ---------------------------------------
-  Container
----------------------------------------- */
-
-.container {
-  margin: 0 auto;
-  max-width: $container-width;
-  padding: 0 var(--grid-gutter);
-  position: relative;
-  width: 100%;
-}

package/styles/utility/_icons.scss

@@ -1,31 +0,0 @@
-/**
-
-  Base icon styles.
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • General
-
-*/
-
-
-/* ---------------------------------------
-  General
----------------------------------------- */
-
-// DEPRECATED
-// Always use the `Icon` component, where the styles are built in.
-.icon {
-  display: inline-block;
-  fill: currentColor;
-  height: icon('default', 'height');
-  vertical-align: middle;
-  width: icon('default', 'height');
-
-  &--small {
-    height: icon('small', 'height');
-    width: icon('small', 'height');
-  }
-}