@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/styles/elements/_buttons.scss

@@ -1,235 +0,0 @@
-/**
-
-  Site button styles and variations.
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Composables
-    • Base
-    • Types
-      - Primary
-      - Secondary
-      - Tertiary
-      - Icon
-      - Inline
-    • Colors
-    • Button Grid helper
-
-
-*/
-
-@function hexToRGB($hexColor) {
-  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
-}
-
-/* ---------------------------------------
-  Composables
----------------------------------------- */
-
-@mixin solid {
-  background-color: rgba(var(--button-color-rgb), var(--button-opacity, 1));
-  border-color: transparent;
-  color: rgba(var(--text-color-rgb), 1);
-
-  &:hover,
-  &:active {
-    --button-opacity: 0.75;
-  }
-
-  &[disabled] {
-    --button-color-rgb: #{ hexToRGB($ice) } !important;
-  }
-}
-
-@mixin ghost {
-  background-color: rgba(0, 0, 0, 0);
-  border-color: rgba(var(--button-color-rgb), 1);
-  color: rgba(var(--text-color-rgb), 1);
-
-  &:hover,
-  &:active {
-    background-color: rgba(var(--button-hover-color-rgb, var(--button-color-rgb)), .12);
-  }
-
-  &[disabled] {
-    --button-color-rgb: #{ hexToRGB($ice) } !important;
-    --text-color-rgb: #{ hexToRGB($ice) } !important;
-  }
-}
-
-
-/* ---------------------------------------
-  Base
----------------------------------------- */
-
-button {
-  display: inline-block;
-  font-size: typo('button', 'size');
-  vertical-align: middle;
-}
-
-.button {
-  border-radius: $border-radius;
-  border-width: get($borders, 'thin');
-  display: inline-block;
-  font-size: typo('button', 'size');
-  font-weight: typo('button', 'weight');
-  line-height: (input('height') - (get($borders, 'thin') * 2));
-  margin: 0;
-  min-width: input('min-width');
-  padding: 0 space(2);
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.14);
-    outline: none;
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &[disabled] {
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
-
-/* ---------------------------------------
-  Types
----------------------------------------- */
-
-.button {
-  &--primary {
-    @include solid;
-    --button-color-rgb: #{ hexToRGB($blue) };
-    --text-color-rgb: #{ hexToRGB($white) };
-  }
-
-  &--secondary {
-    @include ghost;
-    --button-color-rgb: #{ hexToRGB($ice) };
-    --button-hover-color-rgb: #{ hexToRGB($ice-700) };
-    --text-color-rgb: #{ hexToRGB($ice-700) };
-  }
-
-  &--tertiary {
-    @include ghost;
-    --button-color-rgb: #{ hexToRGB($white) };
-    --text-color-rgb: #{ hexToRGB($white) };
-  }
-
-  &--icon {
-    // https://developers.google.com/web/fundamentals/accessibility/accessible-styles
-    border: 0;
-    border-radius: 50%;
-    height: space(5);
-    min-width: 0;
-    padding: space(2);
-    width: space(5);
-
-    svg {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    &[disabled] svg {
-      color: $ice;
-    }
-  }
-
-  &--inline {
-    border: 0;
-    color: $blue;
-    font-weight: font-weight('medium');
-    line-height: $line-height;
-    min-width: 0;
-    padding: 0;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &[disabled] {
-      color: $ice-700;
-    }
-  }
-}
-
-
-/* ---------------------------------------
-  Colors
----------------------------------------- */
-
-@mixin color-overrides($hex-color) {
-  &.button--primary,
-  &.button--secondary {
-    --button-color-rgb: #{ hexToRGB($hex-color) };
-  }
-
-  &.button--secondary {
-    --text-color-rgb: #{ hexToRGB($hex-color) };
-    --button-hover-color-rgb: #{ hexToRGB($hex-color) };
-  }
-}
-
-.button {
-  &--blue {
-    @include color-overrides($blue);
-  }
-
-  &--red {
-    @include color-overrides($red);
-  }
-}
-
-
-/* ---------------------------------------
-  Button Grid
-  TODO: Create ButtonGrid component with styles below and remove button grid styles from LLButton.vue
-  https://leaflink.atlassian.net/browse/STASH-230
----------------------------------------- */
-
-.button-grid {
-  display: flex;
-  grid-column-end: -1 !important;
-
-  > .button {
-    width: 50%;
-  }
-
-  > .button + .button {
-    margin-left: space(3);
-  }
-
-  @include breakpoint('md') {
-    display: inline-flex;
-
-    > .button {
-      width: auto;
-    }
-  }
-}
-
-.header-button-grid {
-  display: flex;
-  grid-column-end: -1 !important;
-
-  > .button {
-    width: 50%;
-
-    @include breakpoint('lg') {
-      width: auto;
-    }
-  }
-
-  > .button + .button {
-    margin-left: space(3);
-  }
-}

package/styles/elements/_forms.scss

@@ -1,300 +0,0 @@
-/**
-
-  Forms
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Form
-    • Base
-    • Input
-    • Checkbox & Radio
-
-*/
-
-
-/* ---------------------------------------
-  Form
----------------------------------------- */
-
-.form {
-  &__errors {
-    border: border(thin) var(--color-red);
-    color: var(--color-red);
-    display: inline-block;
-    font-size: typo('body', 'size');
-    min-width: 300px;
-    padding: space(2);
-    text-align: center;
-  }
-}
-
-
-/* ---------------------------------------
-  Base
----------------------------------------- */
-
-input {
-  &[disabled],
-  &[readonly] {
-    @include input-disabled;
-  }
-
-  &::placeholder {
-    text-transform: none;
-  }
-}
-
-input,
-select,
-textarea {
-  &::placeholder {
-    color: var(--color-ice);
-    opacity: 1;
-  }
-}
-
-select {
-  border: border(thin);
-  color: var(--color-ice-900);
-}
-
-textarea {
-  min-height: 100px;
-  resize: none;
-}
-
-/* ---------------------------------------
-  Input
----------------------------------------- */
-
-.input {
-  position: relative;
-
-  input,
-  select {
-    height: input(height);
-  }
-
-  // TODO remove:
-  input,
-  select,
-  textarea {
-    @extend .input-field;
-  }
-
-  &.has-error {
-    color: var(--color-red);
-
-    .input-field,
-    &.input--radio label::before,
-    &.input--checkbox label::before,
-    input,
-    select,
-    textarea {
-      border-color: var(--color-red);
-    }
-  }
-}
-
-.input-field {
-  background: var(--color-white);
-  border: border(thin);
-  border-radius: $border-radius;
-  color: var(--color-ice-700);
-  display: block;
-  font-family: $font-family-primary;
-  font-size: typo('button', 'size');
-  font-weight: font-weight('regular');
-  outline: none;
-  padding: 0 input('padding-x');
-  width: 100%;
-
-  &:hover {
-    border-color: var(--color-ice);
-  }
-
-  &:active,
-  &:focus {
-    border-color: var(--color-blue);
-  }
-}
-
-// deprecated; use .label.block.truncate instead
-.input-label {
-  color: var(--color-ice-900);
-  display: block;
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: space(3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-
-/* ---------------------------------------
-  Checkbox & Radio
----------------------------------------- */
-
-/* stylelint-disable no-descending-specificity */
-.input--checkbox,
-.input--radio {
-  display: block;
-  margin: space(1) 0;
-
-  @include breakpoint('lg') {
-    margin: 0;
-  }
-
-  input {
-    @include screenreader-only;
-  }
-
-  .input-label,
-  label {
-    cursor: pointer;
-    display: inline-block;
-    line-height: input('inner-height');
-    min-height: input('height');
-    overflow: visible;
-    padding:
-      input('padding-y')
-      0
-      input('padding-y')
-      (input('selection-control-size') + input('padding-x'));
-
-    position: relative;
-    vertical-align: top;
-
-    &::before {
-      background: var(--color-white);
-      border: border('thin');
-      content: '';
-      display: inline-block;
-      vertical-align: top;
-    }
-
-    &::before,
-    &::after {
-      height: input('selection-control-size');
-      left: 0;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: input('selection-control-size');
-    }
-
-    span {
-      color: var(--color-ice-900);
-    }
-  }
-
-  input:focus + label::before {
-    // TODO: create function that generates these focus styles; the Button component shares this already
-    outline: none;
-  }
-
-  input:focus:not(:disabled) + label::before {
-    border-color: var(--color-blue);
-  }
-
-  input:disabled,
-  input:disabled + label {
-    cursor: auto;
-  }
-
-  input:disabled + label::before {
-    background: var(--color-ice-200);
-  }
-
-  input:not(:disabled):not(:checked) + label:hover::before {
-    border-color: var(--color-blue);
-  }
-}
-
-.input--checkbox {
-  label::before {
-    border-radius: $border-radius;
-  }
-
-  input:checked + label::before,
-  input:indeterminate + label::before {
-    background: var(--color-blue);
-    border: none;
-  }
-
-  input:checked + label::after {
-    content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.89 8.281a.723.723 0 0 1 .22.531.723.723 0 0 1-.22.532l-6.718 6.719a.723.723 0 0 1-.531.218.723.723 0 0 1-.532-.218l-3.89-3.891A.723.723 0 0 1 6 11.64c0-.209.073-.386.219-.532l1.062-1.062a.723.723 0 0 1 .532-.219.72.72 0 0 1 .53.219l2.298 2.305 5.125-5.133a.723.723 0 0 1 .53-.219c.21 0 .386.073.532.219l1.063 1.062z" fill="white"/></svg>');
-  }
-
-  input:indeterminate + label::after {
-    content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.4C6 10.1791 6.17909 10 6.4 10H17.6C17.8209 10 18 10.1791 18 10.4V12.6C18 12.8209 17.8209 13 17.6 13H6.4C6.17909 13 6 12.8209 6 12.6V10.4Z" fill="white"/></svg>');
-  }
-
-  input:disabled:checked + label::before,
-  input:disabled:indeterminate + label::before {
-    background: var(--color-ice);
-  }
-}
-
-.input--radio {
-  label::before,
-  label::after {
-    border-radius: 50%;
-  }
-
-  input:checked + label::after {
-    background: var(--color-blue);
-    content: '';
-    height: 14px;
-    left: 3px;
-    width: 14px;
-  }
-
-  input:checked:disabled + label::after {
-    background: var(--color-ice);
-  }
-}
-/* stylelint-enable */
-
-.input__icon {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  height: input(height);
-  justify-content: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: input(height);
-}
-
-.input__symbol {
-  align-items: center;
-  display: flex;
-  height: input(height);
-  justify-content: center;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  width: input(height);
-
-  &--prepend {
-    border-bottom-left-radius: $border-radius;
-    border-top-left-radius: $border-radius;
-    left: 0;
-  }
-
-  &--append {
-    border-bottom-right-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    right: 0;
-  }
-}
-
-.hint {
-  display: inline-block;
-  margin-top: 4px;
-}

package/styles/elements/_tables.scss

@@ -1,80 +0,0 @@
-/**
-
-  Table
-
-       ◡◠ ✥ ◠◡
-
-  Table of Contents:
-
-    • Table
-
-*/
-
-/* ---------------------------------------
-  Table
----------------------------------------- */
-/* stylelint-disable no-descending-specificity */
-
-.table {
-  &--bordered {
-    border: border(thin);
-    border-collapse: separate;
-    border-radius: $border-radius;
-    border-spacing: 0;
-
-    td,
-    th {
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    thead {
-      td,
-      th {
-        border-bottom: none;
-      }
-    }
-  }
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  max-width: 100%;
-  width: 100%;
-
-  td,
-  th {
-    border-top: border(thin);
-    padding: 0.766rem;
-  }
-
-  thead {
-    td,
-    th {
-      background-color: var(--color-ice-200);
-      border-bottom: border(medium);
-      border-top: none;
-      color: var(--color-ice-900);
-      font-weight: font-weight(medium);
-      text-align: left;
-      user-select: none;
-      white-space: nowrap;
-    }
-  }
-
-  tbody {
-    td {
-      font-weight: font-weight(regular);
-    }
-  }
-
-  tfoot {
-    tr {
-      td {
-        border: none;
-      }
-    }
-  }
-}

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/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';