@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-next.0

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator.scss

@@ -1,237 +0,0 @@
-// ********************************************
-// container definition
-$indeterminate-progress-indicator: #{$prefix}-indeterminate-progress-indicator;
-$complete: #{$indeterminate-progress-indicator}-complete;
-$failed: #{$indeterminate-progress-indicator}-failed;
-$bar: #{$indeterminate-progress-indicator}__bar;
-$indicator: #{$indeterminate-progress-indicator}__bar-indicator;
-$tooltip-text: #{$indeterminate-progress-indicator}-tooltip-text;
-.#{$bar} {
-  background-color: color(neutral, 100);
-  overflow: hidden;
-}
-.#{$indicator} {
-  height: space(xxs);
-}
-
-@keyframes indeterminateAnimation {
-  0% {
-    transform: scaleX(0.015);
-    transform-origin: 0% 0%;
-    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
-  }
-
-  25% {
-    transform: scaleX(0.4);
-  }
-
-  50% {
-    transform: scaleX(0.015);
-    transform-origin: 100% 0%;
-    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
-  }
-
-  50.1% {
-    transform: scaleX(0.015);
-    transform-origin: 100% 0%;
-    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
-  }
-
-  75% {
-    transform: scaleX(0.4);
-  }
-
-  100% {
-    transform: scaleX(0.015);
-    transform-origin: 0% 0%;
-    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8) 10%, color(brand-primary, 500));
-  }
-}
-
-@keyframes processingSuccess {
-  0%,
-  30% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  15% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  0%,
-  60% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  45% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  0%,
-  90% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  75% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-@keyframes processingSuccessEnd {
-  0% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  45% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  100% {
-    transform: translateX(0%);
-    background-color: color(success, 900);
-  }
-}
-
-@keyframes processingFail {
-  0%,
-  30% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  15% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  0%,
-  60% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  45% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  0%,
-  90% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  75% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-@keyframes processingFailEnd {
-  0% {
-    transform: translateX(-50%);
-    width: 50%;
-  }
-  45% {
-    transform: translateX(150%);
-    width: 50%;
-  }
-  100% {
-    transform: translateX(0%);
-    background-color: #e34256;
-  }
-}
-@keyframes labelAnimation {
-  0% {
-    opacity: 1;
-  }
-  92% {
-    opacity: 1;
-  }
-  95% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.#{$indeterminate-progress-indicator} {
-  width: 100%;
-  padding: space(xs) space(m);
-
-  &-default {
-    .#{$indicator} {
-      background-color: color(neutral, 500);
-      width: 50%;
-    }
-  }
-  &-complete {
-    .#{$indicator} {
-      background-color: color(success, 900);
-    }
-  }
-  &-failed {
-    .#{$indicator} {
-      background-color: #e34256;
-    }
-  }
-  &-processing {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-    }
-    &.animated {
-      .#{$indicator} {
-        width: 100%;
-        animation: indeterminateAnimation 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
-      }
-    }
-    &.#{$complete} {
-      .#{$indicator} {
-        animation: processingSuccessEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text} {
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &-processing-complete {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-      animation: processingSuccess 4s infinite;
-      animation-fill-mode: forwards;
-    }
-    &.#{$complete} {
-      .#{$indicator} {
-        animation: processingSuccessEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text} {
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &-processing-fail {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-      animation: processingFail 4s infinite;
-      animation-fill-mode: forwards;
-    }
-    &.#{$failed} {
-      .#{$indicator} {
-        animation: processingFailEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text} {
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &.line-only {
-    padding: 0;
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-label-value/DSLabelValue.scss

@@ -1,132 +0,0 @@
-// ********************************************
-// container definition
-$el-label-value: #{$prefix}-labelValue;
-$el-label-value-group: #{$prefix}-labelValueGroup;
-
-// ********************************************
-// elements definition
-$el-wrapper: #{$el-label-value}__wrapper;
-$el-label-value-group-wrapper: #{$el-label-value-group}__wrapper;
-$el-label-value-wrapper: #{$el-label-value}__label-value-wrapper;
-$el-label-value-label: #{$el-label-value}__label;
-$el-label-value-value: #{$el-label-value}__value;
-
-.#{$el-label-value-group-wrapper} {
-  display: flex;
-  flex-direction: column;
-  width: fit-content; 
-  max-width: 100%;
-}
-
-.#{$el-label-value-group-wrapper}--horizontal {
-  flex-direction: row;
-
-  &.#{$el-label-value-group-wrapper}--inline {
-    .#{$el-wrapper} {
-      .#{$el-label-value-wrapper} {
-        flex-direction: row;
-  
-        .#{$el-label-value-label} {
-          margin-right: space(xs)
-        }
-      }
-    }
-  }  
-}
-
-.#{$el-label-value-group-wrapper}--vertical {
-  align-items: flex-end;
-
-  &.#{$el-label-value-group-wrapper}--inline {
-    align-items: unset;
-    .#{$el-wrapper} {
-      margin: space(xs);
-
-      .#{$el-label-value-wrapper} {
-        flex-direction: row;
-  
-        .#{$el-label-value-label} {
-          margin-right: space(xs)
-        }
-      }
-    }
-  }  
-}
-
-.#{$el-wrapper} {
-  display: flex;
-  flex-direction: row;
-  width: auto; 
-  max-width: 100%;
-  margin: space(s);
-
-  .em-ds-icon {
-    margin-top: 1rem;
-    fill: color(neutral, 500);
-    height: auto;
-    margin-right: space(xxs);
-    
-    svg {
-      height: auto;
-    }
-  }
-
-  &.#{$el-wrapper}--inverted {
-    .em-ds-icon {
-      margin-bottom: 1rem;
-      margin-top: unset;
-    }
-  }
-
-  .#{$el-label-value-wrapper} {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    flex-direction: column;
-
-    .#{$el-label-value-value} {
-      display: inline-flex;
-    }
-  
-    .#{$el-label-value-label}--neutral500,
-    .#{$el-label-value-value}--neutral500 {
-      color: color(neutral, 500);
-    }
-  
-    .#{$el-label-value-label}--left,
-    .#{$el-label-value-value}--left {
-      text-align: left;
-    }
-  
-    .#{$el-label-value-label}--right,
-    .#{$el-label-value-value}--right {
-      text-align: right;
-    }
-  
-    .#{$el-label-value-label}--center,
-    .#{$el-label-value-value}--center {
-      text-align: center;
-    } 
-  
-    .#{$el-label-value-label}--neutral700,
-    .#{$el-label-value-value}--neutral700 {
-      color: color(neutral, 700);
-    } 
-    
-    .#{$el-label-value-value}--s {
-      font-size: 1rem;
-    }   
-  
-    .#{$el-label-value-value}--m {
-      font-size: 1.0769rem;
-    }  
-    
-    .#{$el-label-value-value}--l {    
-      font-size: space(s);
-    }
-  
-    .#{$el-label-value-value}--semibold {    
-      font-weight: 600;
-    }     
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-loading-indicator/DSLoadingIndicator.scss

@@ -1,11 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-loading-indicator;
-
-.#{$el-container} {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 201; // loading indicator trumps all modals / overlays; https://jira.elliemae.io/browse/PUI-1712
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/Menu.scss

@@ -1 +0,0 @@
-@import '../../ds-common/src/Menu/Menu';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuCombobox.scss

@@ -1 +0,0 @@
-@import '../../ds-common/src/Menu/MenuCombobox';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuItems/MenuItem.scss

@@ -1 +0,0 @@
-@import '../../../ds-common/src/Menu/MenuItems/MenuItem';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuItems/SearchableGroup.scss

@@ -1 +0,0 @@
-@import '../../../ds-common/src/Menu/MenuItems/SearchableGroup';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-modal/DSModal.scss

@@ -1,2 +0,0 @@
-@import './v1/DSModal';
-@import './v2/DSModal';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-modal/v1/DSModal.scss

@@ -1,187 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-modal;
-$el-overlay: #{$el-container}-overlay;
-$el-content: #{$el-container}-content;
-$el-header: #{$el-container}-modal-header;
-$el-footer: #{$el-container}-modal-footer;
-$el-actions: #{$el-container}-modal-footer-actions;
-
-
-// ********************************************
-// elements
-$el-header-title: #{$el-header}__title;
-$el-header-icon: #{$el-header}__icon;
-$el-body: #{$el-container}__body;
-$el-body-wrapper: #{$el-container}__body-wrapper;
-$el-footer-btn: #{$el-container}__button-action;
-
-
-// ********************************************
-// modifiers
-$el-size-xsmall: #{$el-container}--x-small;
-$el-size-small: #{$el-container}--small;
-$el-size-medium: #{$el-container}--medium;
-$el-size-large: #{$el-container}--large;
-$el-size-xlarge: #{$el-container}--x-large;
-$el-fluid-actions: #{$el-footer}--fluid-actions;
-$el-loading-actions: #{$el-footer}--loading;
-$el-center: #{$el-container}--center;
-
-// ********************************************
-// Vars
-$modal-body-min-height: 96px; // from Spec
-$border-style:solid 1px;  // from Spec
-$modal-margin: space(m) auto;
-
-
-
-// ********************************************
-// Basic
-body.ReactModal__Body--open {
-  overflow: hidden;
-}
-
-.#{$el-overlay} {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  outline: 0;
-  background-color: rgba(color(neutral, 800), 0.5); // TO BE DEFINED
-  overflow: auto;
-  @include transition(duration(slower) easing(out));
-
-  &[class*='after-open'] {
-    opacity: 1;
-  }
-
-  &[class*='before-close'] {
-    opacity: 0;
-  }
-
-  &.#{$el-center} {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.#{$el-container}{
-  //@include transition(duration(slower) easing(out));
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  pointer-events: auto;
-  background-color: color(neutral, 000);
-  background-clip: padding-box;
-  min-width: space(xxl) * 2;
-  &:focus{
-    outline: none;
-  }
-}
-
-
-.#{$el-size-xsmall}{
-  max-width: space(xxl) * 5;
-  margin: $modal-margin;
-}
-
-.#{$el-size-small}{
-  max-width: space(xxl) * 7.5;
-  margin: $modal-margin;
-}
-
-.#{$el-size-medium}{
-  max-width: space(xxl) * 9;
-  margin: $modal-margin;
-}
-
-.#{$el-size-large}{
-  max-width: space(xxl) * 12;
-  margin: $modal-margin;
-}
-
-.#{$el-size-xlarge}{
-  max-width: space(xxl) * 16;
-  margin: $modal-margin;
-}
-
-// ********************************************
-// HEADER
-.#{$el-header}{
-  background: color(neutral, 050);
-  display: flex;
-  align-items: flex-start;
-  border-bottom: $border-style color(neutral, 080);
-  padding: space(s);
-  flex: 0 0 auto;
-}
-.#{$el-header-title}{
-  @include h3-text-style();
-  color: color(neutral, 700);
-  word-break: break-word;
-}
-
-.#{$el-header-icon} {
-  cursor: pointer;
-  margin-left: auto;
-  padding-left: space(s);
-}
-
-// ********************************************
-// BODY
-.#{$el-body} {
-  padding: space(m);
-  flex: 1 1 auto;
-}
-
-.#{$el-body-wrapper} {
-  padding-bottom: space(s);
-  overflow-y: hidden;
-  overflow-x: auto;
-  word-break: break-word;
-}
-
-
-// ********************************************
-// FOOTER
-.#{$el-footer} {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: $border-style color(neutral, 080);
-  padding: space(s);
-  flex: 0 0 auto;
-}
-
-.#{$el-actions} {
-  display: flex;
-}
-
-.#{$el-footer-btn} {
-  margin-left: space(s);
-}
-.#{$el-fluid-actions} {
-
-  .#{$el-actions} {
-    flex-direction: column;
-    flex:1;
-  }
-
-  .#{$el-footer-btn} {
-    margin-left: 0;
-    width: 100%;
-  }
-}
-
-// .#{$el-loading-actions} {
-
-//   .#{$el-footer-btn} {
-//     opacity: 0;
-//   }
-// }
-
-
-@import './ModalFeedBack/ModalFeedBack';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-modal/v1/ModalFeedBack/ModalFeedBack.scss

@@ -1,42 +0,0 @@
-$icon-selector :#{$prefix}-icon;
-
-.#{$prefix}-modal-feedback{
-  display: flex;
-  justify-content: center;
-  padding-bottom: space(s);
-
-  .#{$icon-selector}{
-    height: space(xxl);
-    width: space(xxl);
-  }
-
-  &--modal-type-warning{
-    .#{$icon-selector}{
-      @include icon-color(color(warning, 700));
-    }
-  }
-
-  &--modal-type-error{
-    .#{$icon-selector}{
-      @include icon-color(color(danger, 900));
-    }
-  }
-
-  &--modal-type-success{
-    .#{$icon-selector}{
-      @include icon-color(color(success, 900));
-    }
-  }
-
-  &--modal-type-help{
-    .#{$icon-selector}{
-      @include icon-color(color(brand-primary, 400));
-    }
-  }
-
-  &--modal-type-info{
-    .#{$icon-selector}{
-      @include icon-color(color(brand-primary, 400));
-    }
-  }
-}