@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-shuttle/DSShuttle.scss

@@ -0,0 +1,352 @@
+// ********************************************
+// 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/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-spinner/DSSpinner.scss

@@ -0,0 +1,103 @@
+// ********************************************
+// 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/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-text-wrapper/DSTextWrapper.scss

@@ -0,0 +1,51 @@
+// ********************************************
+// 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/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-time-picker/DSTimePicker.scss

@@ -0,0 +1,217 @@
+// ********************************************
+// 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;
+    }
+  }
+}