@leaflink/stash 52.0.3 → 53.0.0

package/styles/base.css

@@ -1,902 +0,0 @@
-@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;
-*/
-
-@layer components {
-  /**
-   * ll-grid is a legacy grid class that conflicts with tailwinds out of the box grid class.
-   * It's quite hard to replace it with a 1-1 swap, because there's so many default styles included in ll-grid, but it's
-   * also used in conjunction with other grid classes. For example:
-   *      <div class="ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12">
-   *
-   * In this example, ll-grid has default grid-cols styles, but the dev is overriding those defaults. If we were to
-   * replace ll-grid with tw-grid in a simple find/replace, we would HAVE to include
-   * `tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12` as well, and then in examples like the one above,
-   * you'd have weird conflicts and specificity issues.
-   *
-   * Conclusion: So, for now,
-   * - `.ll-grid` & `.grid` will continue to exist in backwards-compat.css as is.
-   * - `.tw-grid` will behave as expected and is a simple utility with no baked in defaults.
-   * - We're creating a custom .tw-ll-grid class that will have the same styles but won't cause weird issues downstream.
-   *   In the future we can remove this class OR keep it around if we decide we want to keep a grid utility with
-   *   some baked in defaults.
-   */
-  .tw-ll-grid {
-    @apply tw-grid tw-grid-cols-1 tw-gap-x-gutter tw-gap-y-6 md:tw-grid-cols-12;
-
-    --deprecated: "WARNING: Use `tw-grid` instead";
-  }
-}
-
-/**
- * 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
- * always included in the output css.
- */
-.container {
-  @apply tw-max-w-container tw-px-gutter;
-
-  margin: 0 auto;
-  position: relative;
-  width: 100%;
-}
-
-/**
- * Variables
- */
-
-:root {
-  --height-topbar: 56px;
-  --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;
-  }
-
-  /* Stash colors */
-  --color-purple-900: #06040F;
-  --color-purple-800: #0C091E;
-  --color-purple-700: #120D2D;
-  --color-purple-600: #18123C;
-  --color-purple-500: #1E164B;
-  --color-purple-400: #4B456F;
-  --color-purple-300: #787393;
-  --color-purple-200: #A5A2B7;
-  --color-purple-100: #D2D0DB;
-
-  --color-royal-900: #0A0C24;
-  --color-royal-800: #131747;
-  --color-royal-700: #1D236B;
-  --color-royal-600: #262E8E;
-  --color-royal-500: #303AB2;
-  --color-royal-400: #5961C1;
-  --color-royal-300: #8389D1;
-  --color-royal-200: #ACB0E0;
-  --color-royal-100: #D6D8F0;
-
-  --color-blue-900: #001730;
-  --color-blue-800: #002E60;
-  --color-blue-700: #004490;
-  --color-blue-600: #005BC0;
-  --color-blue-500: #0072F0;
-  --color-blue-400: #338EF3;
-  --color-blue-300: #66AAF6;
-  --color-blue-200: #99C7F9;
-  --color-blue-100: #CCE3FC;
-
-  --color-teal-900: #002528;
-  --color-teal-800: #004B50;
-  --color-teal-700: #017078;
-  --color-teal-600: #0196A0;
-  --color-teal-500: #01BBC8;
-  --color-teal-400: #34C9D3;
-  --color-teal-300: #67D6DE;
-  --color-teal-200: #99E4E9;
-  --color-teal-100: #CCF1F4;
-
-  --color-green-900: #062313;
-  --color-green-800: #0C4627;
-  --color-green-700: #11683A;
-  --color-green-600: #178B4E;
-  --color-green-500: #1DAE61;
-  --color-green-400: #4ABE81;
-  --color-green-300: #77CEA0;
-  --color-green-200: #A5DFC0;
-  --color-green-100: #D2EFDF;
-
-  --color-seafoam-900: #0C2C26;
-  --color-seafoam-800: #18584D;
-  --color-seafoam-700: #248373;
-  --color-seafoam-600: #30AF9A;
-  --color-seafoam-500: #3CDBC0;
-  --color-seafoam-400: #63E2CD;
-  --color-seafoam-300: #8AE9D9;
-  --color-seafoam-200: #B1F1E6;
-  --color-seafoam-100: #D8F8F2;
-
-  --color-yellow-900: #332A00;
-  --color-yellow-800: #650;
-  --color-yellow-700: #997F00;
-  --color-yellow-600: #CA0;
-  --color-yellow-500: #FFD400;
-  --color-yellow-400: #FD3;
-  --color-yellow-300: #FFE566;
-  --color-yellow-200: #FE9;
-  --color-yellow-100: #FFF6CC;
-
-  --color-orange-900: #331E07;
-  --color-orange-800: #663B0F;
-  --color-orange-700: #995916;
-  --color-orange-600: #CC761E;
-  --color-orange-500: #FF9425;
-  --color-orange-400: #FFA951;
-  --color-orange-300: #FFBF7C;
-  --color-orange-200: #FFD4A8;
-  --color-orange-100: #FFEAD3;
-
-  --color-red-900: #2E0009;
-  --color-red-800: #5B0011;
-  --color-red-700: #89001A;
-  --color-red-600: #B60022;
-  --color-red-500: #E4002B;
-  --color-red-400: #E93355;
-  --color-red-300: #EF6680;
-  --color-red-200: #F499AA;
-  --color-red-100: #FACCD5;
-
-  --color-ice-900: #27282A;
-  --color-ice-800: #4F5055;
-  --color-ice-700: #76797F;
-  --color-ice-600: #9EA1AA;
-  --color-ice-500: #C5C9D4;
-  --color-ice-400: #D1D4DD;
-  --color-ice-300: #DCDFE5;
-  --color-ice-200: #E8E9EE;
-  --color-ice-100: #F3F4F6;
-  --color-white: #fff;
-  --color-black: #000;
-
-  /* Deprecated colors */
-  --color-blue-hover: rgb(0 114 240 / 74.9%);
-  --color-red-hover: rgb(228 0 43 / 74.9%);
-  --color-ice-700-hover: rgb(118 121 127 / 11.8%);
-  --color-white-hover: rgb(255 255 255 / 11.8%);
-  --button-secondary-blue-hover: rgb(0 114 240 / 11.8%);
-  --button-secondary-red-hover: rgb(228 0 43 / 11.8%);
-}
-
-/**
- * General styles and/or reset css could go here.
- */
-
-@layer base {
-  html {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    overflow-x: hidden;
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-    text-rendering: optimizelegibility;
-  }
-
-  body {
-    @apply tw-leading-normal tw-text-ice-700 tw-bg-ice-100 tw-font-normal tw-text-sm tw-font-sans;
-
-    min-height: 100vh;
-    position: relative;
-  }
-
-  *,
-  ::before,
-  ::after {
-    @apply tw-border-0 tw-border-solid tw-border-ice-500;
-
-    background-repeat: no-repeat;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  ::-ms-clear,
-  ::-ms-reveal {
-    display: none;
-  }
-
-  h1 {
-    @apply tw-text-2xl tw-font-medium tw-text-ice-900;
-    margin: 0.67em 0;
-  }
-
-  h2 {
-    @apply tw-text-xl tw-font-medium tw-text-ice-900;
-  }
-
-  h3 {
-    @apply tw-text-base tw-font-medium tw-text-ice-900;
-  }
-
-  h4 {
-    @apply tw-text-sm tw-font-medium tw-text-ice-900;
-  }
-
-  h5,
-  h6 {
-    @apply tw-text-ice-900;
-  }
-
-  .heading-jumbo {
-    @apply tw-text-2xl tw-font-medium tw-text-ice-900;
-  }
-
-  @media screen('md') {
-    .heading-jumbo {
-      font-size: theme('fontSize.5xl');
-    }
-  }
-
-  p {
-    margin-bottom: 0.875rem;
-  }
-
-  small {
-    @apply tw-text-xs tw-font-normal;
-  }
-
-  address {
-    font-style: normal;
-    line-height: theme('spacing.6');
-    white-space: pre-line;
-  }
-
-  /**
-   * 1. Add the correct box sizing in Firefox.
-   * 2. Show the overflow in Edge and IE.
-   */
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
-   * Remove the gray background on active links in IE 10.
-   *
-   * Add LeafLink's base styles to fix issues on localhost
-   */
-  a, .link {
-    @apply tw-text-blue-500;
-
-    background-color: transparent;
-    font-weight: 500;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    /* When users right click on a link to view it in a new tab, a noticeable focus state helps them
-    see which link they were interacting with so that they can continue where they left off. */
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-  /**
-   * 1. Remove the bottom border in Chrome 57-
-   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-   */
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
-   * Add the correct font weight in Chrome, Edge, and Safari.
-   */
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
-   * Prevent `sub` and `sup` elements from affecting the line height in
-   * all browsers.
-   */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /**
-   * 1. Undo the `border-style: none` from above so that our `border-{width}`
-   *    utilities have the expected effect. It is unnecessary since border-width
-   *    is 0 on all elements.
-   *
-   * 2. This helps to avoid unexpected alignment issues that you often run into
-   *    using the browser default of `display: inline`.
-   */
-  img {
-    border-style: solid; /* 1 */
-    display: block; /* 2 */
-  }
-
-  /**
-   * 1. Change the font styles in all browsers.
-   * 2. Remove the margin in Firefox and Safari.
-   */
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    background-color: transparent;
-    color: inherit;
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    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.
-   */
-  button,
-  input { /* 1 */
-    overflow: visible;
-  }
-
-  /**
-   * Remove the inheritance of text transform in Edge, Firefox, and IE.
-   * 1. Remove the inheritance of text transform in Firefox.
-   */
-  button,
-  select { /* 1 */
-    text-transform: none;
-  }
-
-  /**
-   * Correct the inability to style clickable types in iOS and Safari.
-   */
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    appearance: button;
-    cursor: pointer;
-  }
-
-  /**
-   * Remove the inner border and padding in Firefox.
-   */
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  /**
-   * Restore the focus styles unset by the previous rule.
-   */
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
-   * Correct the padding in Firefox.
-   */
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
-   * 1. Correct the text wrapping in Edge and IE.
-   * 2. Correct the color inheritance from `fieldset` elements in IE.
-   * 3. Remove the padding so developers are not caught out when they zero out
-   *    `fieldset` elements in all browsers.
-   */
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
-   * 1. Add the correct box sizing in IE 10.
-   * 2. Remove the padding in IE 10.
-   */
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
-   * Correct the cursor style of increment and decrement buttons in Chrome.
-   */
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
-   * 1. Correct the odd appearance in Chrome and Safari.
-   * 2. Correct the outline style in Safari.
-   */
-  [type="search"] {
-    appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-  [type="search"]::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  /**
-   * 1. Correct the inability to style clickable types in iOS and Safari.
-   * 2. Change font properties to `inherit` in Safari.
-   */
-  ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /**
-   * Add the correct display in all browsers.
-   */
-
-  details {
-    display: block;
-  }
-
-  summary {
-    display: list-item;
-  }
-
-  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: "—";
-}
-
-/**
- * Legacy button-grid class.
- *
- * Todo: Create ButtonGrid component with styles below and remove button grid styles from Button.vue
- * https://leaflink.atlassian.net/browse/STASH-230
- */
-.button-grid {
-  display: flex;
-  grid-column-end: -1 !important;
-
-  > .button {
-    width: 50%;
-  }
-
-  > .button + .button {
-    margin-left: theme('spacing.6')
-  }
-
-  @media screen('md') {
-    display: inline-flex;
-
-    > .button {
-      width: auto;
-    }
-  }
-}
-
-/**
- * Stash's v-tooltip styles.
- */
-
-.tooltip {
-  --offset: 0;
-
-  background: var(--color-ice-900);
-  border-radius: theme('borderRadius.DEFAULT');
-  box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 2px 0 rgba(38, 38, 38, 0.05), 0 2px 6px 0 rgba(38, 38, 38, 0.10);
-  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;
-  }
-}
-
-.tooltip--bottom,
-.tooltip--top {
-  left: calc(50% + calc(var(--offset) * 1px));
-  transform: translateX(-50%);
-
-  &::after {
-    left: calc(var(--arrow-position-centered) + calc(var(--offset) * -1px));
-  }
-}
-
-.tooltip--bottom {
-  top: var(--tooltip-position);
-
-  &::after {
-    transform: rotate(-45deg);
-  }
-}
-
-.tooltip--top {
-  bottom: var(--tooltip-position);
-
-  &::after {
-    top: calc(100% - theme('spacing[1.5]'));
-  }
-}
-
-.tooltip--left,
-.tooltip--right {
-  top: 50%;
-  transform: translateY(-50%);
-
-  &::after {
-    top: var(--arrow-position-centered);
-  }
-}
-
-.tooltip--left {
-  right: var(--tooltip-position);
-
-  &::after {
-    left: calc(100% - theme('spacing[1.5]'));
-    transform: rotate(45deg);
-  }
-}
-
-.tooltip--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: 0.95;
-      visibility: visible;
-    }
-  }
-}
-
-/**
- * Animations
- *
- * Todo: These should be moved to tailwind as custom animations.
- */
-
-@keyframes shake {
-  0%,
-  100% {
-    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 {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.25, 1.25, 1.25);
-  }
-
-  100% {
-    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 {
-  0% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    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,
-.scale-leave-active {
-  transition: theme('transitionDuration.300') theme('transitionTimingFunction.ease-in-out');
-}
-
-.scale-enter-from,
-.scale-leave-from,
-.scale-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-
-.slide-y-enter-active,
-.slide-y-leave-active {
-  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-}
-
-.slide-y-enter-from,
-.slide-y-leave-to {
-  opacity: 0;
-  transform: translateY(-0.875rem);
-}
-
-.slide-x-enter-active,
-.slide-x-leave-active {
-  transition: theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-}
-
-.slide-x-enter-from,
-.slide-x-leave-to {
-  opacity: 0;
-  transform: translateX(-0.875rem);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-to {
-  opacity: 1;
-}
-
-.expand-enter-active,
-.expand-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');
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  height: 0;
-  opacity: 0;
-  transform: translateY(-0.875rem);
-  transition-delay: 0s;
-}
-
-.expand-leave-from,
-.expand-enter-to {
-  height: auto;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.move-move {
-  transition: transform theme('transitionDuration.150') theme('transitionTimingFunction.swing');
-}
-
-#launcher {
-  filter: drop-shadow(4px 18px 18px rgb(38 38 38 / 5%)) drop-shadow(4px 18px 18px rgb(38 38 38 / 10%))
-    drop-shadow(4px 18px 30px rgb(38 38 38 / 15%));
-}