@leaflink/stash 43.5.1 → 44.0.0-beta.2

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');
-  }
-}

package/styles/utility/_transitions.scss

@@ -1,110 +0,0 @@
-/**
-
-  Transitions: scale, slides, fades
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Global
-    • Vue
-
-*/
-
-/* ---------------------------------------
-  Global
----------------------------------------- */
-// ...
-
-/* ---------------------------------------
-  Vue-specific
----------------------------------------- */
-
-.scale {
-  &-enter-active,
-  &-leave-active {
-    transition: $secondary-transition;
-  }
-
-  &-enter-from,
-  &-leave-from,
-  &-leave-to {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-.slide-y {
-  &-enter-active,
-  &-leave-active {
-    transition: $primary-transition;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(-0.875rem);
-  }
-}
-
-.slide-x {
-  &-enter-active,
-  &-leave-active {
-    transition: $primary-transition;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(-0.875rem);
-  }
-}
-
-.fade {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity $primary-transition;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-to {
-    opacity: 1;
-  }
-}
-
-.expand {
-  $delay: map-get($transition-durations, 'fast');
-
-  &-enter-active,
-  &-leave-active {
-    transition:
-      height $secondary-transition,
-      opacity map-get($transition-durations, 'slow') $delay,
-      transform map-get($transition-durations, 'slow') $delay;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    height: 0;
-    opacity: 0;
-    transform: translateY(-0.875rem);
-    transition-delay: 0s;
-  }
-
-  &-leave-from,
-  &-enter-to {
-    height: auto;
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.move {
-  &-move {
-    transition: transform $primary-transition;
-  }
-}