@leaflink/stash 43.5.0 → 44.0.0-beta.1

package/styles/backwards-compat.css

@@ -1,7 +1,9 @@
 /**
  * This file contains the following css migrated from main.scss and it's children:
  *  ✅ All CSS Variables
+ *  ✅ Contents of `styles/components/*`
  *  ✅ Contents of `styles/overrides/*`
+ *  ✅ Contents of `styles/elements/*`
  *  ✅ Contents of `styles/utility/_grid`
  *  ✅ Contents of `styles/utility/_misc`
  *
@@ -9,8 +11,6 @@
  *
  * Todo:
  *
- *  ⬜️ Contents of `styles/components/*`
- *  ⬜️ Contents of `styles/elements/*`
  *  ⬜️ Remaining contents of `styles/utility/*`
  */
 
@@ -3627,3 +3627,1408 @@
   background-color: var(--color-blue-100);
   color: var(--color-ice-700);
 }
+
+/** Components **/
+.box {
+  -webkit-box-shadow: 0 2px 4px rgba(0, 15, 35, 0.06) !important;
+  box-shadow: 0 2px 4px rgba(0, 15, 35, 0.06) !important;
+}
+.box {
+  background: #ffffff;
+  background: var(--color-white);
+  border-radius: 4px;
+  padding: 24px calc(24px / 2);
+  padding: 24px var(--grid-gutter);
+}
+/**
+
+  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
+---------------------------------------- */
+.item-list {
+  border-bottom: 1px solid #C5C9D4;
+  border-bottom: 1px solid var(--color-ice-500);
+  border-top: 1px solid #C5C9D4;
+  border-top: 1px solid var(--color-ice-500);
+  margin-left: calc((24px / 2) * -1);
+  margin-left: calc(calc(24px / 2) * -1);
+  margin-left: calc(var(--grid-gutter) * -1);
+  margin-right: calc((24px / 2) * -1);
+  margin-right: calc(calc(24px / 2) * -1);
+  margin-right: calc(var(--grid-gutter) * -1);
+  min-width: 100%;
+}
+.item-list__header {
+  background: #E8E9EE;
+  background: var(--color-ice-200);
+  border-bottom: 1px solid #C5C9D4;
+  border-bottom: 1px solid var(--color-ice-500);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #27282A;
+  color: var(--color-ice-900);
+  font-weight: 500;
+  overflow: hidden;
+  padding: 12px;
+}
+.item-list__content {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.item-list__row {
+  background: #ffffff;
+  background: var(--color-white);
+  border-bottom: 1px solid #C5C9D4;
+  border-bottom: 1px solid var(--color-ice-500);
+  padding: 12px;
+}
+.item-list__row:last-child {
+  border-bottom: 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+@media screen and (min-width: 641px) {
+  .item-list {
+    border: 1px solid #C5C9D4;
+    border: 1px solid var(--color-ice-500);
+    border-radius: 4px;
+    margin: 0;
+  }
+  .item-list__header, .item-list__row {
+    padding: 6px 12px;
+  }
+}
+/**
+
+  Sidebar.
+
+  Note: The SCSS herein is used on _both_ the legacy and the modern CSS bundles.
+        This can be a bit confusing if you are working on a page using the
+        legacy bundle (ie base_new.html) as the watcher will not be triggered
+        when this file is updated.
+
+       ◡◠ ✥ ◠◡
+
+  Table of Contents:
+
+    1. Sidebar
+    2. Active styles
+    3. Persistent styles
+
+*/
+/* ---------------------------------------
+  1. Sidebar
+---------------------------------------- */
+/* stylelint-disable no-descending-specificity */
+.sidebar {
+  background: #1E164B;
+  background: var(--color-purple-500);
+  bottom: 0;
+  -webkit-overflow-scrolling: touch;
+  position: fixed;
+  top: 0;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: -webkit-transform 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: transform 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: transform 0.165s cubic-bezier(0.25, 0.8, 0.5, 1), -webkit-transform 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  width: 280px;
+  z-index: 300;
+}
+.sidebar-wrapper {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  height: calc(100% - 56px);
+  margin-top: 56px;
+  overflow-y: auto;
+}
+.sidebar-overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.38);
+  opacity: 0;
+  -webkit-transition: opacity 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: opacity 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  visibility: hidden;
+  z-index: -1;
+}
+.sidebar .environment-drawer {
+  background-color: #150e35;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+}
+.sidebar .environment-drawer .header {
+  background-color: #FF9425;
+  background-color: var(--color-orange-500);
+  border-radius: 3px 3px 0 0;
+  color: #140e35;
+  cursor: pointer;
+  font-size: 14px;
+  height: 25px;
+  padding: 3px 3px 3px 20px;
+  text-transform: uppercase;
+}
+.sidebar .environment-drawer .header .pull-left {
+  float: left !important;
+}
+.sidebar .environment-drawer .header .pull-right {
+  float: right !important;
+}
+.sidebar .environment-drawer .content {
+  background-color: #140e35;
+  display: none;
+  min-height: 100px;
+  padding: 10px 0 0 10px;
+}
+.sidebar .environment-drawer .content.open {
+  display: block !important;
+}
+.sidebar .environment-drawer .content p {
+  color: #ffffff;
+  color: var(--color-white);
+  line-height: 16px;
+}
+.company-picker {
+  padding: 24px 12px;
+}
+.company-picker .dropdown__button + .dropdown__content {
+  background: #140e35;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  border-top: none;
+  display: none;
+  margin: 0;
+  max-width: 360px;
+  min-width: 200px;
+  position: absolute;
+  -webkit-transform: translateX(calc(var(--offset) * 1px));
+  transform: translateX(calc(var(--offset) * 1px));
+  width: 100%;
+  z-index: 200;
+}
+.company-picker .dropdown__button + .dropdown__content a {
+  border-radius: 4px;
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  font-size: 0.75rem;
+  padding: 8px 6px 0 6px;
+}
+.company-picker .dropdown__button + .dropdown__content a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+}
+.company-picker .dropdown__button + .dropdown__content .is-active > a {
+  color: #3CDBC0;
+  color: var(--color-seafoam-500);
+}
+.company-picker .dropdown__button + .dropdown__content.is-active {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  display: block;
+}
+.company-picker .dropdown__button + .dropdown__content::after {
+  display: none;
+}
+.company-picker .dropdown {
+  width: 100%;
+}
+.company-picker .dropdown__toggle button {
+  background-color: #140e35;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  font-size: 0.75rem;
+  font-weight: 500;
+  overflow: hidden;
+  padding-left: 12px;
+  padding-right: 30px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: normal;
+  width: 100%;
+}
+.company-picker .dropdown__toggle button:focus {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.company-picker .dropdown__toggle .icon {
+  margin-top: -12px;
+  position: absolute;
+  right: 9px;
+  top: 50%;
+}
+.company-picker .dropdown__toggle.is-active > button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.company-picker .dropdown__toggle:not(.dropdown__button) button {
+  cursor: auto;
+}
+.company-picker .description,
+.company-picker .name {
+  line-height: 1.4285714286;
+}
+.company-picker .description {
+  opacity: 0.5;
+}
+.company-picker .name {
+  opacity: 1;
+}
+.company-picker .badge {
+  text-transform: uppercase;
+  width: 36px;
+}
+.company-picker__nav {
+  padding-left: 0;
+}
+.sidenav {
+  opacity: 0;
+  overflow: auto;
+  padding: 0 0 28px;
+  -webkit-transition: opacity 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: opacity 0.165s cubic-bezier(0.25, 0.8, 0.5, 1);
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+.sidenav > ul {
+  padding: 0;
+}
+.sidenav .icon {
+  margin-right: 6px;
+  vertical-align: bottom;
+}
+.sidenav .icon--chevron-left {
+  position: absolute;
+  right: 12px;
+  top: calc(50% - 7px);
+  -webkit-transition: -webkit-transform 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform 0.333s cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+}
+.sidenav a,
+.sidenav button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: block;
+  font-weight: 500;
+  line-height: 1.5;
+  outline: none;
+  padding: 8px 18px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+.sidenav a, .sidenav a:hover, .sidenav a:focus,
+.sidenav button,
+.sidenav button:hover,
+.sidenav button:focus {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.sidenav a.is-open,
+.sidenav button.is-open {
+  color: inherit;
+}
+.sidenav a:hover,
+.sidenav a:focus,
+.sidenav button:hover,
+.sidenav button:focus,
+.sidenav .is-active > a {
+  background-color: #140e35;
+}
+.sidenav .is-open > button {
+  background-color: #263256;
+}
+.sidenav .is-open > button > .icon--chevron-left {
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+.sidenav .is-active > a {
+  color: #3CDBC0;
+  color: var(--color-seafoam-500);
+}
+.sidenav .is-open .subnav a,
+.sidenav .is-open .subnav button {
+  padding-left: 40px;
+}
+.nav__item {
+  display: block;
+  list-style: none;
+  position: relative;
+}
+.nav__item--toggle::before {
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  -webkit-transition: width 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: width 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  width: 0;
+  z-index: 100;
+}
+.nav__item--toggle.is-open::before {
+  width: 6px;
+}
+.nav__item .badge,
+.nav__item .icon--warning {
+  float: right;
+}
+.nav__item.is-active::before {
+  background-color: #3CDBC0;
+  background-color: var(--color-seafoam-500);
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 6px;
+  z-index: 100;
+}
+.subnav {
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+.subnav.collapse {
+  display: none;
+}
+.subnav .is-open {
+  border-left: none;
+}
+.subnav .is-open .subnav a,
+.subnav .is-open .subnav button {
+  padding-left: 55px;
+}
+/* ---------------------------------------
+  2. Active
+---------------------------------------- */
+.sidebar-is-showing {
+  overflow: hidden;
+  overscroll-behavior-y: contain;
+  -ms-touch-action: none;
+  touch-action: none; /* prevent scrolling */
+}
+.sidebar-is-showing .sidenav {
+  opacity: 1;
+}
+.sidebar-is-showing .sidebar {
+  -webkit-box-shadow: 0 4px 8px rgba(0, 15, 35, 0.06) !important;
+  box-shadow: 0 4px 8px rgba(0, 15, 35, 0.06) !important;
+}
+.sidebar-is-showing .sidebar {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.sidebar-is-showing .sidebar-overlay {
+  opacity: 1;
+  visibility: visible;
+  z-index: 300;
+}
+/* ---------------------------------------
+  3. Persistent
+---------------------------------------- */
+@media screen and (min-width: 1321px) {
+  .sidebar {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  .sidenav {
+    opacity: 1;
+  }
+}
+.logo {
+  display: block;
+  height: 22px;
+}
+.env-ocs .logo {
+  height: 46px;
+}
+@media screen and (max-width: 640px) {
+  .logo__leaflink {
+    opacity: 0;
+    -webkit-transition: opacity 0.1s;
+    transition: opacity 0.1s;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+  }
+}
+.sidebar-is-showing .logo__leaflink {
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+.logo-burger {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 56px;
+  padding-left: 14px;
+  position: fixed;
+  z-index: 400;
+}
+.button--burger {
+  background: none;
+  cursor: pointer;
+  margin-left: -7px;
+  padding: 0;
+  -webkit-transition: color 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: color 0.333s cubic-bezier(0.4, 0, 0.6, 1);
+}
+.button--burger:focus {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.sidebar-is-showing .button--burger {
+  color: #ffffff;
+  color: var(--color-white);
+}
+.env-ocs.sidebar-is-showing .button--burger {
+  color: #76797F;
+  color: var(--color-ice-700);
+}
+@media screen and (min-width: 1321px) {
+  .button--burger {
+    display: none;
+  }
+}
+.top-header {
+  -webkit-box-shadow: 0 4px 8px rgba(0, 15, 35, 0.06) !important;
+  box-shadow: 0 4px 8px rgba(0, 15, 35, 0.06) !important;
+}
+.top-header {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #ffffff;
+  background-color: var(--color-white);
+  border: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 56px;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  padding: 7px 14px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 300;
+}
+.top-header__message {
+  display: none;
+  margin-left: 280px;
+}
+@media screen and (min-width: 1321px) {
+  .top-header__message {
+    display: block;
+  }
+}
+.top-header__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.top-header__item svg {
+  height: 20px;
+  vertical-align: bottom;
+  width: 20px;
+}
+.top-header__navbar {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: auto;
+}
+.top-header__nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.top-header__nav-button {
+  background-color: transparent;
+  border: none;
+  color: #76797F;
+  color: var(--color-ice-700);
+  display: block;
+  margin: 0 12px;
+}
+.top-header__nav-button:focus, .top-header__nav-button:hover {
+  background-color: transparent;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.top-header__nav img {
+  vertical-align: middle;
+}
+.top-header .icon {
+  vertical-align: middle;
+}
+.top-header .icon--hamburger-menu {
+  fill: #ffffff;
+  fill: var(--color-white);
+}
+.top-header .dropdown__content::after {
+  background: #E8E9EE;
+  background: var(--color-ice-200);
+  right: 12px;
+}
+.account {
+  margin-left: 0.875rem;
+  margin-right: 0.875rem;
+}
+.account__avatar {
+  border: 1px solid #ffffff;
+  border: 1px solid var(--color-white);
+  border-radius: 50%;
+  cursor: pointer;
+  max-height: 36px;
+  max-width: 36px;
+}
+.account__avatar img {
+  border: 2px solid #ffffff;
+  border: 2px solid var(--color-white);
+  border-radius: 50%;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.account__avatar:hover {
+  border: 1px solid #0072F0;
+  border: 1px solid var(--color-blue-500);
+}
+.account__nav {
+  border-top: 1px solid #C5C9D4;
+  padding: 0.4375rem;
+}
+.account__nav a:hover {
+  background: #0072F0;
+  background: var(--color-blue-500);
+  color: #ffffff;
+  color: var(--color-white);
+}
+.account__user-info {
+  background-color: #E8E9EE;
+  background-color: var(--color-ice-200);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 0.875rem;
+}
+.account__user-info div:first-child {
+  color: #27282A;
+  color: var(--color-ice-900);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.account .dropdown__content {
+  margin-right: 0;
+  min-width: 185px;
+  top: 48px;
+}
+.account .dropdown__content::after {
+  background: #E8E9EE;
+  background: var(--color-ice-200);
+  right: 12px;
+}
+.language-picker .dropdown__content {
+  margin-right: 12px;
+  top: 43px;
+}
+.language-picker .dropdown__content::after {
+  background: #ffffff;
+  background: var(--color-white);
+}
+.language-picker__toggle {
+  outline: 0;
+}
+.language-picker__toggle .language-picker__toggle-icon {
+  height: 24px;
+  width: 24px;
+}
+.language-picker__toggle:hover .language-picker__toggle-icon, .language-picker__toggle:focus .language-picker__toggle-icon, .language-picker__toggle.is-active .language-picker__toggle-icon {
+  color: #0072F0;
+  color: var(--color-blue-500);
+}
+.button {
+  border-radius: 4px;
+  border-width: 1px;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 34px;
+  margin: 0;
+  min-width: 144px;
+  padding: 0 12px;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.button:focus {
+  -webkit-box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.14);
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.14);
+  outline: none;
+}
+.button:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.button[disabled] {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ---------------------------------------
+  Types
+---------------------------------------- */
+.button--primary {
+  background-color: rgba(0,114,240, 1);
+  background-color: rgba(var(--button-color-rgb), var(--button-opacity, 1));
+  border-color: transparent;
+  color: rgba(255,255,255, 1);
+  color: rgba(var(--text-color-rgb), 1);
+  --button-color-rgb: 0,114,240;
+  --text-color-rgb: 255,255,255;
+}
+.button--primary:hover, .button--primary:active {
+  --button-opacity: 0.75;
+}
+.button--primary[disabled] {
+  --button-color-rgb: 197,201,212 !important;
+}
+.button--secondary {
+  background-color: rgba(0, 0, 0, 0);
+  border-color: rgba(197,201,212, 1);
+  border-color: rgba(var(--button-color-rgb), 1);
+  color: rgba(118,121,127, 1);
+  color: rgba(var(--text-color-rgb), 1);
+  --button-color-rgb: 197,201,212;
+  --button-hover-color-rgb: 118,121,127;
+  --text-color-rgb: 118,121,127;
+}
+.button--secondary:hover, .button--secondary:active {
+  background-color: rgba(var(--button-hover-color-rgb, var(--button-color-rgb)), 0.12);
+}
+.button--secondary[disabled] {
+  --button-color-rgb: 197,201,212 !important;
+  --text-color-rgb: 197,201,212 !important;
+}
+.button--tertiary {
+  background-color: rgba(0, 0, 0, 0);
+  border-color: rgba(255,255,255, 1);
+  border-color: rgba(var(--button-color-rgb), 1);
+  color: rgba(255,255,255, 1);
+  color: rgba(var(--text-color-rgb), 1);
+  --button-color-rgb: 255,255,255;
+  --text-color-rgb: 255,255,255;
+}
+.button--tertiary:hover, .button--tertiary:active {
+  background-color: rgba(var(--button-hover-color-rgb, var(--button-color-rgb)), 0.12);
+}
+.button--tertiary[disabled] {
+  --button-color-rgb: 197,201,212 !important;
+  --text-color-rgb: 197,201,212 !important;
+}
+.button--icon {
+  border: 0;
+  border-radius: 50%;
+  height: 48px;
+  min-width: 0;
+  padding: 12px;
+  width: 48px;
+}
+.button--icon svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.button--icon[disabled] svg {
+  color: #C5C9D4;
+}
+.button--inline {
+  border: 0;
+  color: #0072F0;
+  font-weight: 500;
+  line-height: 1.5;
+  min-width: 0;
+  padding: 0;
+}
+.button--inline:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.button--inline[disabled] {
+  color: #76797F;
+}
+
+/* ---------------------------------------
+  Colors
+---------------------------------------- */
+.button--blue.button--primary, .button--blue.button--secondary {
+  --button-color-rgb: 0,114,240;
+}
+.button--blue.button--secondary {
+  --text-color-rgb: 0,114,240;
+  --button-hover-color-rgb: 0,114,240;
+}
+.button--red.button--primary, .button--red.button--secondary {
+  --button-color-rgb: 228,0,43;
+}
+.button--red.button--secondary {
+  --text-color-rgb: 228,0,43;
+  --button-hover-color-rgb: 228,0,43;
+}
+
+/* ---------------------------------------
+  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 {
+  grid-column-end: -1 !important;
+}
+.button-grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.button-grid > .button {
+  width: 50%;
+}
+.button-grid > .button + .button {
+  margin-left: 24px;
+}
+@media screen and (min-width: 641px) {
+  .button-grid {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  }
+  .button-grid > .button {
+    width: auto;
+  }
+}
+
+.header-button-grid {
+  grid-column-end: -1 !important;
+}
+
+.header-button-grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.header-button-grid > .button {
+  width: 50%;
+}
+@media screen and (min-width: 961px) {
+  .header-button-grid > .button {
+    width: auto;
+  }
+}
+.header-button-grid > .button + .button {
+  margin-left: 24px;
+}
+/**
+
+  Forms
+
+       ◡◠ ✥ ◠◡
+
+  Table of Contents:
+
+    • Form
+    • Base
+    • Input
+    • Checkbox & Radio
+
+*/
+.form__errors {
+  border: 1px solid #C5C9D4 #E4002B;
+  border: 1px solid #C5C9D4 var(--color-red-500);
+  color: #E4002B;
+  color: var(--color-red-500);
+  display: inline-block;
+  font-size: 0.875rem;
+  min-width: 300px;
+  padding: 12px;
+  text-align: center;
+}
+
+/* ---------------------------------------
+  Base
+---------------------------------------- */
+input[disabled], input[readonly] {
+  background-color: #E8E9EE !important;
+  background-color: var(--color-ice-200) !important;
+  border-color: #C5C9D4 !important;
+  border-color: var(--color-ice-500) !important;
+  color: #76797F !important;
+  color: var(--color-ice-700) !important;
+}
+input[disabled], input[readonly] {
+  pointer-events: none;
+}
+input[disabled]:active, input[disabled]:focus, input[readonly]:active, input[readonly]:focus {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+input::-webkit-input-placeholder {
+  text-transform: none;
+}
+input::-moz-placeholder {
+  text-transform: none;
+}
+input:-ms-input-placeholder {
+  text-transform: none;
+}
+input::-ms-input-placeholder {
+  text-transform: none;
+}
+input::placeholder {
+  text-transform: none;
+}
+
+input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  opacity: 1;
+}
+
+input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  opacity: 1;
+}
+
+input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  opacity: 1;
+}
+
+input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  opacity: 1;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: #C5C9D4;
+  color: var(--color-ice-500);
+  opacity: 1;
+}
+
+select {
+  border: 1px solid #C5C9D4;
+  color: #27282A;
+  color: var(--color-ice-900);
+}
+
+textarea {
+  min-height: 100px;
+  resize: none;
+}
+
+/* ---------------------------------------
+  Input
+---------------------------------------- */
+.input {
+  position: relative;
+}
+.input input,
+.input select {
+  height: 36px;
+}
+.input.has-error {
+  color: #E4002B;
+  color: var(--color-red-500);
+}
+.input.has-error .input-field, .input.has-error.input--radio label::before, .input.has-error.input--checkbox label::before,
+.input.has-error input,
+.input.has-error select,
+.input.has-error textarea {
+  border-color: #E4002B;
+  border-color: var(--color-red-500);
+}
+
+.input-field, .input input,
+.input select,
+.input textarea {
+  background: #ffffff;
+  background: var(--color-white);
+  border: 1px solid #C5C9D4;
+  border-radius: 4px;
+  color: #76797F;
+  color: var(--color-ice-700);
+  display: block;
+  font-family: "Sofia", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  outline: none;
+  padding: 0 12px;
+  width: 100%;
+}
+.input-field:hover, .input input:hover,
+.input select:hover,
+.input textarea:hover {
+  border-color: #C5C9D4;
+  border-color: var(--color-ice-500);
+}
+.input-field:active, .input input:active,
+.input select:active,
+.input textarea:active, .input-field:focus, .input input:focus,
+.input select:focus,
+.input textarea:focus {
+  border-color: #0072F0;
+  border-color: var(--color-blue-500);
+}
+
+.input-label {
+  color: #27282A;
+  color: var(--color-ice-900);
+  display: block;
+  font-size: 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---------------------------------------
+  Checkbox & Radio
+---------------------------------------- */
+/* stylelint-disable no-descending-specificity */
+.input--checkbox,
+.input--radio {
+  display: block;
+  margin: 6px 0;
+}
+@media screen and (min-width: 961px) {
+  .input--checkbox,
+  .input--radio {
+    margin: 0;
+  }
+}
+.input--checkbox input,
+.input--radio input {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.input--checkbox .input-label,
+.input--checkbox label,
+.input--radio .input-label,
+.input--radio label {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 24px;
+  min-height: 36px;
+  overflow: visible;
+  padding: 6px 0 6px 32px;
+  position: relative;
+  vertical-align: top;
+}
+.input--checkbox .input-label::before,
+.input--checkbox label::before,
+.input--radio .input-label::before,
+.input--radio label::before {
+  background: #ffffff;
+  background: var(--color-white);
+  border: 1px solid #C5C9D4;
+  content: "";
+  display: inline-block;
+  vertical-align: top;
+}
+.input--checkbox .input-label::before, .input--checkbox .input-label::after,
+.input--checkbox label::before,
+.input--checkbox label::after,
+.input--radio .input-label::before,
+.input--radio .input-label::after,
+.input--radio label::before,
+.input--radio label::after {
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 20px;
+}
+.input--checkbox .input-label span,
+.input--checkbox label span,
+.input--radio .input-label span,
+.input--radio label span {
+  color: #27282A;
+  color: var(--color-ice-900);
+}
+.input--checkbox input:focus + label::before,
+.input--radio input:focus + label::before {
+  outline: none;
+}
+.input--checkbox input:focus:not(:disabled) + label::before,
+.input--radio input:focus:not(:disabled) + label::before {
+  border-color: #0072F0;
+  border-color: var(--color-blue-500);
+}
+.input--checkbox input:disabled,
+.input--checkbox input:disabled + label,
+.input--radio input:disabled,
+.input--radio input:disabled + label {
+  cursor: auto;
+}
+.input--checkbox input:disabled + label::before,
+.input--radio input:disabled + label::before {
+  background: #E8E9EE;
+  background: var(--color-ice-200);
+}
+.input--checkbox input:not(:disabled):not(:checked) + label:hover::before,
+.input--radio input:not(:disabled):not(:checked) + label:hover::before {
+  border-color: #0072F0;
+  border-color: var(--color-blue-500);
+}
+
+.input--checkbox label::before {
+  border-radius: 4px;
+}
+.input--checkbox input:checked + label::before,
+.input--checkbox input:indeterminate + label::before {
+  background: #0072F0;
+  background: var(--color-blue-500);
+  border: none;
+}
+.input--checkbox 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--checkbox 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--checkbox input:disabled:checked + label::before,
+.input--checkbox input:disabled:indeterminate + label::before {
+  background: #C5C9D4;
+  background: var(--color-ice-500);
+}
+
+.input--radio label::before,
+.input--radio label::after {
+  border-radius: 50%;
+}
+.input--radio input:checked + label::after {
+  background: #0072F0;
+  background: var(--color-blue-500);
+  content: "";
+  height: 14px;
+  left: 3px;
+  width: 14px;
+}
+.input--radio input:checked:disabled + label::after {
+  background: #C5C9D4;
+  background: var(--color-ice-500);
+}
+
+/* stylelint-enable */
+.input__icon {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 36px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 36px;
+}
+
+.input__symbol {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 36px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 36px;
+}
+.input__symbol--prepend {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  left: 0;
+}
+.input__symbol--append {
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+  right: 0;
+}
+
+.hint {
+  display: inline-block;
+  margin-top: 4px;
+}
+/* ---------------------------------------
+  Table
+---------------------------------------- */
+/* stylelint-disable no-descending-specificity */
+.table--bordered {
+  border: 1px solid #C5C9D4;
+  border-collapse: separate;
+  border-radius: 4px;
+  border-spacing: 0;
+}
+.table--bordered td:last-child,
+.table--bordered th:last-child {
+  border-right: none;
+}
+.table--bordered thead td,
+.table--bordered thead th {
+  border-bottom: none;
+}
+
+/* ---------------------------------------
+  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;
+}
+
+@media screen and (max-width: 640px) {
+  .hidden-sm-only {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 641px) and (max-width: 960px) {
+  .hidden-md-only {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 961px) and (max-width: 1320px) {
+  .hidden-lg-only {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 641px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 961px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1321px) {
+  .hidden-xl {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .hidden-md-and-down {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1320px) {
+  .hidden-lg-and-down {
+    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: 1px;
+}
+
+.no-border {
+  border-width: 0 !important;
+}
+
+.no-outline {
+  outline: 0;
+}
+
+.rounded {
+  border-radius: 4px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+/* ---------------------------------------
+  Rotate
+---------------------------------------- */
+.rotate-270 {
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.rotate-180 {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.rotate-90 {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.icon {
+  display: inline-block;
+  fill: currentColor;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+}
+.icon--small {
+  height: 16px;
+  width: 16px;
+}