@elliemae/ds-basic 2.3.0-next.2 → 2.3.0-next.6

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-shuttle/DSShuttle.scss

@@ -1,352 +0,0 @@
-// ********************************************
-// container definition
-$shuttle: #{$prefix}-shuttle;
-
-$shuttle-wrapper: #{$shuttle}-wrapper;
-$shuttle-header: #{$shuttle}-header;
-$shuttle-list: #{$shuttle}-list;
-$shuttle-list-item: #{$shuttle}-list-item;
-$shuttle-footer: #{$shuttle}-footer;
-
-$shuttle-searchbox: #{$shuttle}-search-box;
-$shuttle-infinte-scroll-indicator: #{$shuttle}-infinite-scroll-indicator;
-
-// ********************************************
-// dimsum component classes
-$DSBreadcrumb: #{$prefix}-breadcrumb;
-$DSInputAddonWrapper: #{$prefix}-input-addon-wrapper;
-$DSButton: #{$prefix}-button;
-$DSInput: #{$prefix}-input;
-
-// ********************************************
-// shuttle variables
-$shuttle-wrapper-width: space(xxl) * 4.6875;
-$shuttle-wrapper-height: space(xxl) * 4.65;
-$shuttle-list-item-height: space(l) * 1.125;
-$shuttle-list-item-hover-color: color(brand-primary, 100);
-$shuttle-searchbox-height: space(m) * 1.2;
-
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600);
-  }
-  50% {
-    box-shadow: 0 0 5px 0 color(brand-primary, 600);
-  }
-  100% {
-    box-shadow: 0 0 0 0 color(brand-primary, 600);
-  }
-}
-
-@mixin link-button {
-  color: color(brand-primary, 600);
-  background-color: transparent;
-  border: $theme-base-border-style transparent;
-  cursor: pointer;
-}
-
-@mixin truncate-text($size) {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: $size;
-}
-
-// ********************************************
-// elements definition
-$move-all-panel-el: #{$shuttle}__move-all-panel;
-
-$list-width: space(xxl) * 4.6875;
-$list-height: space(xxl) * 4.65;
-$searchbox-height: space(m) * 1.2;
-$item-list-height: space(l) * 1.125;
-$hover-color: color(brand-primary, 100);
-$border-style: $theme-base-border-style color(neutral, 100);
-
-.#{$shuttle} {
-  @include center();
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 4em 0;
-  height: 100%;
-}
-
-.#{$shuttle}__empty-container {
-  height: 100%;
-  @include center();
-  span {
-    color: color(neutral, 300);
-  }
-}
-
-.#{$shuttle-wrapper} {
-  position: relative;
-  min-width: space(xxl) * 3;
-  width: 100%;
-  height: 100%;
-  max-width: $shuttle-wrapper-width;
-
-  .#{$shuttle-header} {
-    height: space(m) * 1.25;
-    display: flex;
-
-    &__breadcrumb {
-      overflow: hidden;
-      align-self: center;
-      flex: 1;
-      padding: 4px 0;
-
-      .#{$DSBreadcrumb} {
-        width: 100%;
-        ol {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  .#{$shuttle-list} {
-    flex: 1 1 50%;
-    position: relative;
-    border: $theme-base-border-style color(neutral, 200);
-    padding: 0;
-    min-height: $list-height;
-    height: 100%;
-    overflow: hidden;
-    width: 100%;
-    margin: 0 0 space(xxs) 0;
-
-    &__overflow {
-      top: 0;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      transition: top duration(base) easing(base), height duration(base) easing(base);
-      &--searching {
-        top: $searchbox-height;
-        height: calc(100% - #{$searchbox-height});
-      }
-
-      &--empty {
-        top: 0;
-      }
-    }
-
-    &__panel {
-      width: space(xxl) * 0.8; // 50px
-      background-color: color(neutral, 000);
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 1px;
-      transition: transform duration(fast) easing(base);
-      transform: translateX(space(xxl));
-      z-index: 1;
-      box-shadow: depth(100);
-
-      .#{$DSButton} {
-        width: 100%;
-        height: 100%;
-      }
-
-      &--open {
-        transform: translateX(0px);
-      }
-    }
-    &__loading-list,
-    &__empty-message {
-      animation: fadeIn ease 1s;
-      -webkit-animation: fadeIn ease 1s;
-      -moz-animation: fadeIn ease 1s;
-      -o-animation: fadeIn ease 1s;
-      -ms-animation: fadeIn ease 1s;
-    }
-    &__loading-list {
-      top: 0;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-    }
-    &__empty-message {
-      height: 100%;
-      @include center();
-      color: color(neutral, 500);
-    }
-
-    &--show-pulse {
-      animation: pulse 0.5s infinite;
-      animation-iteration-count: 1;
-    }
-
-    @keyframes fadeIn {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  }
-
-  .#{$shuttle-footer} {
-    display: flex;
-    height: space(m) * 0.833;
-    align-items: center;
-
-    &__actions {
-      flex: 1;
-    }
-
-    &__counter {
-      flex: 1;
-      text-align: right;
-    }
-  }
-
-  &:first-child {
-    margin-right: 16px;
-  }
-}
-
-.#{$shuttle-list-item} {
-  display: grid;
-  grid-template-columns: auto min-content;
-  align-items: center;
-  overflow: hidden;
-  position: relative;
-  border-bottom: $border-style;
-  background-color: color(neutral, 000);
-  z-index: 999;
-
-  &.drag-helper {
-    border: $border-style;
-  }
-
-  &__parent-helper-text {
-    margin-left: space(xs);
-    color: color(brand-primary, 700);
-  }
-
-  &__content {
-    display: grid;
-    align-items: center;
-    grid-template-columns: min-content minmax(0px, min-content) auto;
-    height: space(l) * 1.125;
-    padding-left: space(xs);
-    padding-right: space(xs);
-    border-left: 4px solid color(neutral, 100);
-    cursor: default;
-    pointer-events: none;
-    span.shuttle-tooltip-text {
-      cursor: pointer;
-      pointer-events: all;
-    }
-
-    .gripper {
-      pointer-events: all;
-      margin-right: space(xs);
-    }
-
-    &--checked {
-      border-left-color: color(brand-primary, 600);
-    }
-
-    &--can-hover {
-      cursor: pointer;
-      pointer-events: all;
-      &:hover {
-        background-color: $hover-color;
-      }
-    }
-  }
-
-  &__icon-wrapper > span {
-    margin-right: space(xs);
-  }
-
-  &__actions {
-    display: flex;
-
-    .#{$DSButton} {
-      @include link-button;
-      height: $item-list-height;
-      width: $item-list-height;
-      border-left: $border-style;
-
-      svg,
-      svg:not([fill]) {
-        fill: color(brand-primary, 600);
-      }
-
-      &:hover:not(:disabled) {
-        background-color: $hover-color;
-      }
-
-      &:disabled {
-        cursor: auto;
-        svg {
-          opacity: 0.3;
-        }
-      }
-    }
-  }
-
-  //span {
-  //  margin-top: space(xxs);
-  //  @include truncate-text(315px)
-  //}
-}
-
-.#{$shuttle-searchbox} {
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-  background-color: color(neutral, 000);
-  height: $searchbox-height;
-  top: ($searchbox-height * -1);
-  border-bottom: $border-style;
-  align-items: center;
-  transition: duration(base) easing(base);
-
-  .#{$DSInputAddonWrapper} {
-    border: none;
-    width: 100%;
-
-    &__addon {
-      &::before {
-        content: none;
-      }
-    }
-  }
-
-  .#{$DSInput} {
-    border: none;
-  }
-
-  input {
-    flex: 1;
-    border: none;
-  }
-  &--opened {
-    //transform: translateY(0px);
-    top: 0;
-  }
-}
-
-.#{$shuttle-infinte-scroll-indicator} {
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-  background-color: color(neutral, 000);
-  height: space(m) * 1.5;
-  bottom: -43px;
-  border-top: $border-style;
-  align-items: center;
-  transition: duration(slower) easing(out);
-  &--opened {
-    transition: duration(slower) easing(in);
-    bottom: 0;
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-spinner/DSSpinner.scss

@@ -1,104 +0,0 @@
-// ********************************************
-// container definition
-$spinner-container: #{$prefix}-spinner;
-
-
-// ********************************************
-// element definition
-$spinner-el: #{$spinner-container}__spinner;
-$message-el: #{$spinner-container}__message;
-
-@mixin spinner-container-size($size) {
-  width: icon-size($size) * 2;
-  height: icon-size($size) * 2;
-  margin: space($size) / 2;
-  svg {
-    display:block;
-    float:left;
-    @include icon($size);
-  }
-}
-
-.#{$spinner-container} {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.#{$spinner-el} {
-  transform-origin: 50% 50%;
-  animation-name: scale;
-  animation-duration: 1.3s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-
-  &--xxs {
-    @include spinner-container-size(xxs);
-  }
-  &--xs {
-    @include spinner-container-size(xs);
-  }
-  &--s {
-    @include spinner-container-size(s);
-  }
-  &--m {
-    @include spinner-container-size(m);
-  }
-  &--l {
-    @include spinner-container-size(l);
-  }
-  &--xl {
-    @include spinner-container-size(xl);
-  }
-  &--xxl {
-    @include spinner-container-size(xxl);
-  }
-
-  .spinner-tl,.spinner-tr,.spinner-bl,.spinner-br {
-    transform-origin: 50% 50%;
-    animation-name: spin;
-    // todo: add ease from dimsum
-    animation-duration: 1.3s;
-    animation-timing-function: ease-in-out;
-    animation-iteration-count: infinite;
-  }
-}
-
-
-
-@keyframes spin {
-  0%{
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(90deg);
-  }
-  50% {
-    transform: rotate(90deg);
-  }
-  75% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(180deg);
-
-  }
-}
-
-@keyframes scale {
-  0%{
-    transform: scale(1.2,1.2);
-  }
-  25% {
-    transform: scale(1.2,1.2);
-  }
-  50% {
-    transform: scale(1,1);
-  }
-  75% {
-    transform: scale(1,1);
-  }
-  100% {
-    transform: scale(1.2,1.2);
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-text-wrapper/DSTextWrapper.scss

@@ -1,51 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-text-wrapperRef;
-$el-container-ellipsis: #{$el-container}--text-overflow-ellipsis;
-$el-container-left: #{$el-container}--text-align-left; // Can be moved to high level inside the scss structure
-$el-container-right: #{$el-container}--text-align-right;  // Can be moved to high level inside the scss structure
-$el-container-center: #{$el-container}--text-align-center;  // Can be moved to high level inside the scss structure
-$el-container-justify: #{$el-container}--text-align-justify;  // Can be moved to high level inside the scss structure
-$el-container-word-break: #{$el-container}--text-overflow-word-break;  // Can be moved to high level inside the scss structure
-
-// ********************************************
-// elements
-$el-line: #{$el-container}__line;
-$el-container-ellipsis-wrapper: #{$el-container}__ellipsis-wrapperRef;
-
-.#{$el-container} {
-  display: inline-flex;
-  flex-direction: column;  
-
-  &.#{$el-container-ellipsis} {
-    flex-direction: row;
-  
-    .#{$el-container-ellipsis-wrapper}{
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    &:after {
-      content: "...";
-      display: inline;
-    }
-  }
-  &.#{$el-container-word-break}{
-    word-break: break-all;
-  }
-  &.#{$el-container-left} {
-    text-align: left;
-  }
-
-  &.#{$el-container-right} {
-    text-align: right
-  }
-
-  &.#{$el-container-justify} {
-    text-align: justify;    
-  }
-  
-  &.#{$el-container-center} {
-    text-align: center;
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-time-picker/DSTimePicker.scss

@@ -1,217 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-time-picker;
-$picker-menu: #{$prefix}-time-picker-menu;
-$picker-menu-header: #{$picker-menu}__header;
-$picker-panel-container: #{$picker-menu}__panel-container;
-$picker-panel: #{$prefix}-time-picker-panel;
-$picker-panel-wrapper: #{$picker-panel}__wrapper;
-$picker-panel-header: #{$picker-panel}__header;
-
-$addon-wrapper: #{$prefix}-input-addon-wrapper;
-$addon-group: #{$prefix}-input-addon-group__addon;
-
-$border-radius: $theme-base-border-radius;
-
-// ********************************************
-// vars
-$border-type: solid 1px;
-
-.#{$el-container} {
-  &--isMenuOpened {
-    .#{$addon-group} {
-      border-left: $border-type color(brand-primary, 700);
-      .em-ds-button {
-        border: $border-type color(brand-primary, 700);
-      }
-    }
-  }
-  .#{$addon-wrapper} {
-    &__addon--right {
-      ::before {
-        width: 0;
-      }
-    }
-    min-width: space(xxl) * 2;
-  }
-}
-
-.#{$picker-menu} {
-  background-color: color(neutral, 000);
-  position: relative;
-  flex-direction: column;
-  display: flex;
-  @include border-radius($border-radius);
-  @include box-shadow(depth(200));
-
-  .#{$picker-menu-header} {
-    background-color: color(neutral, 050);
-    color: color(neutral, 600);
-    font-weight: bold;
-    text-align: center;
-    padding: space(s) 0;
-    font-size: font-size(600);
-  }
-
-  .#{$picker-panel-container} {
-    flex-direction: row;
-    display: flex;
-  }
-}
-
-.#{$picker-panel-wrapper} {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  &:last-of-type {
-    .#{$picker-panel} {
-      border-right: unset;
-    }
-  }
-
-  .#{$picker-panel-header} {
-    height: 100%;
-    background-color: color(neutral, 050);
-    text-align: center;
-    color: color(neutral, 800);
-    padding: space(xs) * 0.9 0;
-    font-size: font-size(300);
-  }
-
-  .#{$picker-panel} {
-    outline: none;
-    position: relative;
-    background: color(neutral, 000);
-    border-right: border-size(xs) solid color(neutral, 300);
-
-    &:focus {
-      @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500), 0.7));
-      z-index: 10;
-    }
-
-    &__item-list-container {
-      overflow: hidden;
-      padding: 0 space(s);
-    }
-
-    &__item-list {
-      transition: transform duration(slow) easing(base);
-    }
-
-    &__item {
-      @include body-text-style();
-      @include center();
-      width: space(l);
-      height: space(l);
-      cursor: pointer;
-      color: color(neutral, 800);
-      vertical-align: center;
-      text-align: center;
-      border-radius: 50%;
-      user-select: none;
-      padding-top: space(xs) * 0.4;
-
-      &--disabled {
-        position: relative;
-        color: color(neutral, 500);
-        cursor: not-allowed;
-        &::after{ // this renders the cross-line in disabled times
-          content: '';
-          height: 1px;
-          width: 50%;
-          background: color(neutral, 500);
-          position: absolute;
-          top: 50%;
-        }
-        &:hover {
-          color: color(neutral, 500);
-        }
-      }
-
-      &:hover
-        :not(.em-ds-time-picker-panel__item--disabled)
-        :not(.em-ds-time-picker-panel__item--selected) {
-        border: 1px solid color(brand-primary, 600);
-        box-shadow: inset 0 0 0 1px color(brand-primary, 300);
-        font-weight: lighter;
-        color: color(brand-primary, 600);
-      }
-      &--disabled:hover {
-        color: color(neutral, 500);
-      }
-
-      &--selected {
-        font-weight: font-weight(semibold);
-        color: color(neutral, 000);
-
-        &:hover {
-          border: $border-type color(brand-primary, 600);
-          font-weight: bolder;
-          box-shadow: inset 0 0 0 1px color(brand-primary, 300);
-          color: color(neutral, 000);
-        }
-
-        &::after {
-          background: #fff;
-        }
-      }
-    }
-
-    &--scrolling {
-      .#{$picker-panel}__item-list {
-        transition: transform duration(fast) easing(base);
-      }
-      .#{$picker-panel}__item {
-        &:hover {
-          border: 1px solid rgba(0, 0, 0, 0);
-        }
-      }
-    }
-
-    &__selected-container {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      height: space(l);
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-    &__selected-circle {
-      background-color: color(brand-primary, 600);
-      border: 1px solid rgba(0, 0, 0, 0);
-      border-radius: 50%;
-      width: space(l);
-      height: space(l);
-    }
-
-    &__arrow-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: space(l) * 0.8;
-
-      button:not(.#{$prefix}-icon-button--disabled) {
-        outline: none;
-        svg, svg:not([fill]) {
-          @include icon-color(color(brand-primary, 600));
-        }
-      }
-    }
-  }
-}
-
-.#{$el-container} {
-  &.variant-disabled {
-    & > .em-ds-input {
-      background: color(neutral, 080);
-      border-color: color(neutral, 400);
-      input,
-      select {
-        color: #616b7f;
-      }
-      pointer-events: none;
-    }
-  }
-}