@leaflink/stash 43.5.1 → 44.0.0-beta.1

package/styles/base.css

@@ -1,7 +1,14 @@
 @tailwind base;
-
 @tailwind components;
 
+/*
+  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
+  lot of duplication and order issues with downstream applications. You need to configure your
+  application downstream to analyze stash files to ensure they are included in your build.
+
+  @tailwind utilities;
+*/
+
 /**
  * This is a custom .container class that conflicts with tailwinds out of the box container class.
  * Placed here before tw utilities, and specifically not within @layer components, so that it is
@@ -15,19 +22,6 @@
   width: 100%;
 }
 
-/* helpful class to show an emdash when an element like a table cell is empty */
-.show-empty:empty::before {
-  content: "—";
-}
-
-/*
-  NOTE: Commenting this out cause packaging tw classes inside of stash's build causes a
-  lot of duplication and order issues with downstream applications. You need to configure your
-  application downstream to analyze stash files to ensure they are included in your build.
-
-  @tailwind utilities;
-*/
-
 /**
  * General styles and/or reset css could go here.
  */
@@ -35,6 +29,12 @@
 :root {
   --grid-gutter: 12px;
 
+  /* The tooltips position relative to the toggle element */
+  --tooltip-position: calc(100% + theme('spacing.3'));
+
+  /* Centers arrow horizontally or vertically along tooltip on arrow's center */
+  --arrow-position-centered: calc(50% - theme('spacing[1.5]'));
+
   @media screen(lg) {
     --grid-gutter: 24px;
   }
@@ -42,7 +42,7 @@
 
 @layer base {
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 400;
     src:
@@ -51,7 +51,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 500;
     src:
@@ -60,7 +60,7 @@
   }
 
   @font-face {
-    font-family: 'Sofia';
+    font-family: Sofia;
     font-style: normal;
     font-weight: 600;
     src:
@@ -79,7 +79,7 @@
   body {
     @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm;
 
-    font-family: 'Sofia', sans-serif;
+    font-family: Sofia, sans-serif;
     min-height: 100vh;
     position: relative;
   }
@@ -128,7 +128,7 @@
 
   @media screen(md) {
     .heading-jumbo {
-      font-size: theme(fontSize.5xl);
+      font-size: theme('fontSize.5xl');
     }
   }
 
@@ -142,6 +142,8 @@
 
   address {
     font-style: normal;
+    line-height: theme('spacing.6');
+    white-space: pre-line;
   }
 
   /**
@@ -258,6 +260,12 @@
     margin: 0; /* 2 */
   }
 
+  button {
+    display: inline-block;
+    font-size: 0.875rem;
+    vertical-align: middle;
+  }
+
   /**
    * Show the overflow in IE.
    * 1. Show the overflow in Edge.
@@ -395,4 +403,365 @@
   template {
     display: none;
   }
+
+  ul,
+  ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &.bullets {
+      list-style-type: disc;
+      padding-left: theme('spacing.9');
+
+      li {
+        margin-bottom: theme('spacing.3');
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    max-width: 100%;
+    width: 100%;
+
+    td,
+    th {
+      border-top: 1px solid var(--color-ice-500);
+      padding: 0.766rem;
+    }
+
+    thead {
+      td,
+      th {
+        background-color: var(--color-ice-200);
+        border-bottom: 2px solid var(--color-ice-500);
+        border-top: none;
+        color: var(--color-ice-900);
+        font-weight: 500;
+        text-align: left;
+        user-select: none;
+        white-space: nowrap;
+      }
+    }
+
+    tbody {
+      td {
+        font-weight: 400;
+      }
+    }
+
+    tfoot {
+      tr {
+        td {
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Custom global classes.
+ *
+ * These are global classes that are not part of the tailwindcss framework. These should be created & used sparingly
+ * and only when using a global class is the best solution.
+ */
+
+/* helpful class to show an emdash when an element like a table cell is empty */
+.show-empty:empty::before {
+  content: "—";
+}
+
+/**
+ * Stash's v-tooltip styles.
+ */
+
+.tooltip {
+  --offset: 0;
+
+  background: var(--color-ice-900);
+  border-radius: theme('borderRadius.DEFAULT');
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+  color: var(--color-white);
+  font-size: 0.75rem;
+  line-height: calc(16 / 12);
+  opacity: 0;
+  padding: theme('spacing.3');
+  pointer-events: none; /* Tooltips should disappear once the user hovers away */
+  position: absolute;
+  text-align: center;
+  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing'), visibility theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  visibility: hidden;
+  white-space: normal;
+  width: 148px;
+
+  &::after {
+    background-color: var(--color-ice-900);
+    border-radius: 0 2px 0 0;
+    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
+    content: '';
+    display: inline-block;
+    height: 12px;
+    position: absolute;
+    top: calc(-1 * theme('spacing[1.5]'));
+    transform: rotate(135deg);
+    z-index: theme('zIndex.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: var(--tooltip-position);
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &--top {
+    bottom: var(--tooltip-position);
+
+    &::after {
+      top: calc(100% - theme('spacing[1.5]'));
+    }
+  }
+
+  &--left,
+  &--right {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      top: var(--arrow-position-centered);
+    }
+  }
+
+  &--left {
+    right: var(--tooltip-position);
+
+    &::after {
+      left: calc(100% - theme('spacing[1.5]'));
+      transform: rotate(45deg);
+    }
+  }
+
+  &--right {
+    left: var(--tooltip-position);
+
+    &::after {
+      left: calc(-1 * theme('spacing[1.5]'));
+      transform: rotate(-135deg);
+    }
+  }
+}
+
+.tooltip-toggle {
+  display: inline-block;
+  position: relative;
+  z-index: 0;
+
+  &:hover {
+    outline: none;
+    z-index: theme('zIndex.modal');
+
+    .tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+/**
+ * Animations
+ *
+ * Todo: These should be moved to tailwind as custom animations.
+ */
+
+@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;
+}
+
+@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;
+}
+
+/**
+ * Transitions
+ *
+ * Todo: These should be moved to tailwind as custom transitions.
+ * See: https://tailwindcss.com/docs/transition-property
+ */
+
+.scale {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
+  }
+
+  &-enter-from,
+  &-leave-from,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.slide-y {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-0.875rem);
+  }
+}
+
+.slide-x {
+  &-enter-active,
+  &-leave-active {
+    transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-0.875rem);
+  }
+}
+
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to {
+    opacity: 1;
+  }
+}
+
+.expand {
+  &-enter-active,
+  &-leave-active {
+    transition:
+    height theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out'),
+    opacity theme('transitionDuration.500') theme('transitionDuration.150'),
+    transform theme('transitionDuration.500') theme('transitionDuration.150');
+  }
+
+  &-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 theme('transitionDuration.150') theme('transitionTimingFunction.swing');
+  }
 }

package/styles/components/_all.scss

@@ -1,14 +0,0 @@
-/**
-
-  Components: specific UI components. This is where majority
-              of our work takes place.
-
-              Note: ideally (ie. eventually) this layer should
-              be auto-generated by code from each Vue component.
-
-*/
-
-@import 'box';
-@import 'item-list';
-@import 'sidebar';
-@import 'top-header';

package/styles/components/_box.scss

@@ -1,13 +0,0 @@
-/**
- * Box: Emulated "ibox" style, from olden days. DEPRECATED!
- *
- * @deprecated rather than using the global .box class, please use the Box` component instead.
- */
-
-.box {
-  @include elevation('low');
-
-  background: var(--color-white);
-  border-radius: $border-radius;
-  padding: space(3) var(--grid-gutter);
-}

package/styles/components/_item-list.scss

@@ -1,78 +0,0 @@
-/**
-
-  Item List. (Item List?? This name is temporary)
-
-  Styles to support lists of "items". These are generic items, the
-  only distinguishing feature -- what makes it distinct from <table> --
-  is that these "lists" are not tabular data. Tables, by contrast, are
-  more for displaying large amounts of _data_ (ie. what is more
-  prevalent on Reports pages, etc).
-
-
-  examples:
-  * Products in the Inventory,
-  * Customers List
-  * Items in an Order
-  * Service items (on Browse Services)
-  * Clients in the Contact List
-
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Item List
-
-*/
-
-/* ---------------------------------------
-  Item List
----------------------------------------- */
-$border: border(thin, var(--color-ice));
-
-.item-list {
-  border-bottom: $border;
-  border-top: $border;
-  margin-left: calc(var(--grid-gutter) * -1);
-  margin-right: calc(var(--grid-gutter) * -1);
-  min-width: 100%;
-
-  &__header {
-    background: var(--color-ice-200);
-    border-bottom: $border;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    color: var(--color-ice-900);
-    font-weight: 500;
-    overflow: hidden;
-    padding: space(2);
-  }
-
-  &__content {
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-  }
-
-  &__row {
-    background: var(--color-white);
-    border-bottom: $border;
-    padding: space(2);
-
-    &:last-child {
-      border-bottom: 0;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-    }
-  }
-
-  @include breakpoint('md') {
-    border: $border;
-    border-radius: $border-radius;
-    margin: 0;
-
-    &__header,
-    &__row {
-      padding: space(1) space(2);
-    }
-  }
-}