@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/styles/components/_sidebar.scss

@@ -1,404 +0,0 @@
-/**
-
-  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
----------------------------------------- */
-// [TODO] BEMify this, ie sidebar vs subnav vs nav
-// [TODO] update / lint this file + remove following line
-/* stylelint-disable no-descending-specificity */
-
-$sidenav-colors: (
-  background: var(--color-purple),
-  link: var(--color-ice),
-  active: var(--color-seafoam),
-  highlight: #140e35,
-  toggle: #263256
-);
-$sidebar-light-border: rgba(255, 255, 255, 0.1);
-
-$item-padding: 18px;
-// Hardcode for consistency across all nav items
-// TODO: Remove with sidenav rebuild in Vue
-$line-height: 1.5;
-
-.sidebar {
-  background: map-get($sidenav-colors, 'background');
-  bottom: 0;
-  -webkit-overflow-scrolling: touch;
-  position: fixed;
-  top: 0;
-  transform: translate3d(-100%, 0, 0);
-  transition: transform $primary-transition;
-  width: $sidebar-width;
-  z-index: z-index('page');
-
-  &-wrapper {
-    border-top: border('thin', $sidebar-light-border);
-    height: calc(100% - #{$top-nav-height});
-    margin-top: $top-nav-height;
-    overflow-y: auto;
-  }
-
-  // TODO move to overlay class
-  &-overlay {
-    @include cover();
-
-    background-color: rgba(0, 0, 0, 0.38);
-    opacity: 0;
-    transition: opacity $secondary-transition;
-    visibility: hidden;
-    z-index: z-index('behind');
-  }
-
-  .environment-drawer {
-    background-color: #150e35;
-    bottom: 0;
-    position: fixed;
-    width: 100%;
-
-    .header {
-      background-color: var(--color-orange);
-      border-radius: 3px 3px 0 0;
-      color: map-get($sidenav-colors, 'highlight');
-      cursor: pointer;
-      font-size: 14px;
-      height: 25px;
-      padding: 3px 3px 3px 20px;
-      text-transform: uppercase;
-
-      .pull-left {
-        float: left !important;
-      }
-
-      .pull-right {
-        float: right !important;
-      }
-    }
-
-    .content {
-      background-color: map-get($sidenav-colors, 'highlight');
-      display: none;
-      min-height: 100px;
-      padding: 10px 0 0 10px;
-
-      &.open {
-        display: block !important;
-      }
-
-      p {
-        color: var(--color-white);
-        line-height: 16px;
-      }
-    }
-  }
-}
-
-.company-picker {
-  padding: space(3) space(2);
-
-  .dropdown__button + .dropdown__content {
-    background: map-get($sidenav-colors, 'highlight');
-    border: border(thin, $sidebar-light-border);
-    border-radius: $border-radius;
-    border-top: none;
-    display: none;
-    margin: 0;
-    max-width: 360px; // TODO magic var
-    min-width: 200px; // TODO magic var
-    position: absolute;
-    transform: translateX(calc(var(--offset) * 1px));
-    width: 100%;
-    z-index: z-index(control);
-
-    a {
-      border-radius: $border-radius;
-      color: map-get($sidenav-colors, 'link');
-      font-size: typo('small', 'size');
-      padding: 8px 6px 0 6px;
-
-      &:hover {
-        background-color: $sidebar-light-border;
-        color: var(--color-ice);
-      }
-    }
-
-    .is-active > a {
-      color: var(--color-seafoam);
-    }
-
-    &.is-active {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      display: block;
-    }
-
-    // no top arrow-anchor on this instance
-    &::after {
-      display: none;
-    }
-  }
-
-  .dropdown {
-    width: 100%;
-
-    &__toggle {
-      button {
-        background-color: map-get($sidenav-colors, 'highlight');
-        border: border('thin', $sidebar-light-border);
-        color: var(--color-ice);
-        font-size: typo('small', 'size');
-        font-weight: font-weight('medium');
-        overflow: hidden;
-        padding-left: 12px;
-        padding-right: 30px;
-        text-align: left;
-        text-overflow: ellipsis;
-        white-space: normal;
-        width: 100%;
-
-        &:focus {
-          box-shadow: none;
-        }
-      }
-
-      .icon {
-        margin-top: -(calc(icon('default', 'height') / 2));
-        position: absolute;
-        right: 9px;
-        top: 50%;
-      }
-
-      &.is-active > button {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:not(.dropdown__button) button {
-        cursor: auto;
-      }
-    }
-  }
-
-  .description,
-  .name {
-    line-height: typo('body', 'line-height');
-  }
-
-  .description {
-    opacity: 0.5;
-  }
-
-  .name {
-    opacity: 1;
-  }
-
-  .badge {
-    text-transform: uppercase;
-    width: 36px;
-  }
-
-  &__nav {
-    padding-left: 0;
-  }
-}
-
-.sidenav {
-  opacity: 0;
-  overflow: auto;
-  padding: 0 0 #{calc($top-nav-height / 2)};
-  transition: opacity $primary-transition;
-  transition-delay: 0.2s;
-
-  > ul { padding: 0; }
-
-  .icon {
-    margin-right: 6px;
-    vertical-align: bottom;
-  }
-
-  .icon--chevron-left {
-    position: absolute;
-    right: 12px;
-    top: calc(50% - 7px);
-    transition: transform $secondary-transition;
-  }
-
-  a,
-  button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    display: block;
-    font-weight: font-weight('medium');
-    line-height: $line-height;
-    outline: none;
-    padding: 8px $item-padding;
-    position: relative;
-    text-align: left;
-    width: 100%;
-
-    &,
-    &:hover,
-    &:focus {
-      color: map-get($sidenav-colors, 'link');
-      text-decoration: none;
-    }
-
-    &.is-open {
-      color: inherit;
-    }
-  }
-
-  a:hover,
-  a:focus,
-  button:hover,
-  button:focus,
-  .is-active > a {
-    background-color: map-get($sidenav-colors, 'highlight');
-  }
-
-  .is-open > button {
-    background-color: map-get($sidenav-colors, 'toggle');
-
-    > .icon--chevron-left {
-      transform: rotate(-90deg);
-    }
-  }
-
-  .is-active > a {
-    color: map-get($sidenav-colors, 'active');
-  }
-
-  .is-open {
-    .subnav {
-      a,
-      button {
-        padding-left: 40px;
-      }
-    }
-  }
-}
-
-.nav__item {
-  display: block;
-  list-style: none;
-  position: relative;
-
-  &--toggle {
-    &::before {
-      background-color: map-get($sidenav-colors, 'seafoam');
-      content: '';
-      display: block;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      transition: width $secondary-transition;
-      width: 0;
-      z-index: 100;
-    }
-
-    &.is-open::before {
-      width: 6px;
-    }
-  }
-
-  .badge,
-  .icon--warning {
-    float: right;
-  }
-
-  &.is-active {
-    &::before {
-      background-color: var(--color-seafoam);
-      content: '';
-      display: block;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: space(1);
-      z-index: z-index('content');
-    }
-  }
-}
-
-.subnav {
-  list-style: none;
-  margin-bottom: 0;
-  padding-left: 0;
-
-  &.collapse {
-    display: none;
-  }
-
-  .is-open {
-    border-left: none;
-
-    .subnav {
-      a,
-      button {
-        padding-left: 55px;
-      }
-    }
-  }
-}
-
-
-/* ---------------------------------------
-  2. Active
----------------------------------------- */
-
-.sidebar-is-showing {
-  overflow: hidden;
-  overscroll-behavior-y: contain;
-  touch-action: none; /* prevent scrolling */
-
-  .sidenav {
-    opacity: 1;
-  }
-
-  .sidebar {
-    @include elevation('high');
-
-    transform: translate3d(0, 0, 0);
-
-    &-overlay {
-      opacity: 1;
-      visibility: visible;
-      z-index: z-index('page');
-    }
-  }
-}
-
-
-/* ---------------------------------------
-  3. Persistent
----------------------------------------- */
-
-@include breakpoint(xl) {
-  .sidebar {
-    transform: translate3d(0, 0, 0);
-  }
-
-  .sidenav {
-    opacity: 1;
-  }
-}

package/styles/components/_top-header.scss

@@ -1,219 +0,0 @@
-.logo {
-  display: block;
-  height: $logo-height;
-
-  // TODO: Temporary, throwaway with theming refactor
-  .env-ocs & {
-    height: 46px;
-  }
-
-  &__leaflink {
-    @include breakpoint(sm-only) {
-      opacity: 0;
-      transition: opacity 0.1s;
-      transition-delay: 0s;
-    }
-
-    .sidebar-is-showing & {
-      opacity: 1;
-      transition-delay: 0.2s;
-    }
-  }
-}
-
-.logo-burger {
-  align-items: center;
-  display: flex;
-  height: $top-nav-height;
-  padding-left: 14px;
-  position: fixed;
-  z-index: z-index('screen');
-}
-
-.button--burger {
-  background: none;
-  cursor: pointer;
-  margin-left: -7px;
-  padding: 0;
-  transition: color $secondary-transition;
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  .sidebar-is-showing & {
-    color: var(--color-white);
-  }
-
-  // TODO: Temporary, throwaway with theming refactor
-  .env-ocs.sidebar-is-showing & {
-    color: var(--color-ice-700);
-  }
-
-  @include breakpoint('xl') {
-    display: none;
-  }
-}
-
-.top-header {
-  @include elevation('high');
-
-  align-items: center;
-  background-color: var(--color-white);
-  border: none;
-  display: flex;
-  height: $top-nav-height;
-  justify-content: flex-end;
-  padding: 7px 14px;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: z-index(page);
-
-  &__message {
-    display: none;
-    margin-left: $sidebar-width;
-
-    @include breakpoint('xl') {
-      display: block;
-    }
-  }
-
-  &__item {
-    display: flex;
-
-    svg {
-      height: 20px;
-      vertical-align: bottom;
-      width: 20px;
-    }
-  }
-
-  &__navbar {
-    align-items: center;
-    display: flex;
-    margin-left: auto;
-  }
-
-  &__nav {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    &-button {
-      background-color: transparent;
-      border: none;
-      color: var(--color-ice-700);
-      display: block;
-      margin: 0 space(2);
-
-      &:focus,
-      &:hover {
-        background-color: transparent;
-        text-decoration: none;
-      }
-    }
-
-    img {
-      vertical-align: middle;
-    }
-  }
-
-  .icon {
-    vertical-align: middle;
-
-    &--hamburger-menu {
-      fill: var(--color-white);
-    }
-  }
-
-  .dropdown__content::after {
-    background: var(--color-ice-200);
-    right: space(2);
-  }
-}
-
-.account {
-  margin-left: 0.875rem;
-  margin-right: 0.875rem;
-
-  &__avatar {
-    border: border(thin, var(--color-white));
-    border-radius: 50%;
-    cursor: pointer;
-    max-height: 36px;
-    max-width: 36px;
-
-    img {
-      border: border(medium, var(--color-white));
-      border-radius: 50%;
-      max-width: 100%;
-      vertical-align: middle;
-    }
-
-    &:hover {
-      border: border('thin', var(--color-blue));
-    }
-  }
-
-  &__nav {
-    border-top: border('thin');
-    padding: 0.4375rem;
-
-    a:hover {
-      background: var(--color-blue);
-      color: var(--color-white);
-    }
-  }
-
-  &__user-info {
-    background-color: var(--color-ice-200);
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    padding: 0.875rem;
-
-    div:first-child {
-      color: var(--color-ice-900);
-      font-size: typo('h4', 'size');
-      font-weight: typo('h4', 'weight');
-    }
-  }
-
-  .dropdown__content {
-    margin-right: 0;
-    min-width: 185px;
-    top: 48px;
-
-    &::after {
-      background: var(--color-ice-200);
-      right: space(2);
-    }
-  }
-}
-
-.language-picker {
-  .dropdown__content {
-    margin-right: space(2);
-    top: 43px;
-
-    &::after {
-      background: var(--color-white);
-    }
-  }
-
-  &__toggle {
-    outline: 0;
-
-    // TODO: Clean up icon specificity in top-header
-    & &-icon {
-      height: icon('default', 'height');
-      width: icon('default', 'width');
-    }
-
-    &:hover &-icon,
-    &:focus &-icon,
-    &.is-active &-icon {
-      color: var(--color-blue);
-    }
-  }
-}

package/styles/elements/_all.scss

@@ -1,15 +0,0 @@
-/**
-
-  Elements: styles for bare HTML elements (like h1, a, etc.) which,
-            normally, come with default browser styles. Things in
-            here will be inherited throughout.
-
-*/
-
-@import 'buttons';
-@import 'forms';
-@import 'lists';
-@import 'links';
-@import 'misc';
-@import 'tables';
-@import 'tooltips';