@elliemae/ds-basic 2.3.0-next.3 → 3.0.0-alpha.0

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal/DSModal.scss

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

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/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/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/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));
-    }
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal/v2/DSModal.scss

@@ -1,286 +0,0 @@
-$base: #{$prefix}-modal-v2;
-$header: #{$base}__modal-header;
-$header-decision: #{$header}--decision;
-$header-selection: #{$header}--selection;
-$header-right: #{$base}__modal-header-close;
-$header-right-form: #{$base}__modal-header-close--form;
-$overlay: #{$base}-overlay;
-$overlay-center: #{$base}--center;
-$overlay-top: #{$base}--top;
-
-.#{$base} {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: auto;
-  pointer-events: auto;
-  background-color: color(neutral, 000);
-  background-clip: padding-box;
-  min-width: 300px;
-  box-shadow: 0 10px 20px 0 #697489;
-  margin: 24px;
-  left: calc(50% - 24px);
-  transform: translateX(-50%);
-
-  &:focus {
-    outline: none;
-  }
-  max-width: space(xxl) * 9;
-
-  &.#{$base}-type-information,
-  &.#{$base}-type-decision,
-  &.#{$base}-type-form {
-    max-width: space(xxl) * 6.1;
-  }
-}
-
-// header
-.#{$header-decision} {
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  padding-right: space(s);
-}
-
-.#{$header} {
-  height: space(m);
-  &--with-close {
-    height: space(xl);
-  }
-}
-
-.#{$header-selection} {
-  height: space(xl);
-  // background: color(neutral, 050);
-  display: flex;
-  align-items: flex-start;
-  border-bottom: $border-style color(neutral, 080);
-  padding-top: 10px;
-  padding-left: space(s);
-  padding-right: space(s);
-  flex: 0 0 auto;
-  width: calc(100% - 1px);
-  .#{$header-right}{
-      background: color(neutral, 0);
-      margin-left: auto;
-  }
-  .#{$header-right-form}{
-      background: none;
-      height: calc(#{space(m)} * 1.16);
-      align-items: center;
-      display: flex;
-  }
-}
-
-body.ReactModal__Body--open {
-  overflow: hidden;
-}
-
-.#{$overlay} {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  outline: 0;
-  background-color: rgba(37, 41, 47, 0.5);
-  overflow: auto;
-  @include transition(duration(slower) easing(out));
-
-  &[class*='after-open'] {
-    opacity: 1;
-  }
-
-  &[class*='before-close'] {
-    opacity: 0;
-  }
-
-  &.#{$overlay-top} {
-    .#{$base} {
-      margin-top: 20vh;
-    }
-  }
-
-  &.#{$overlay-center} {
-    display: flex;
-    align-items: center;
-  }
-}
-
-// ********************************************
-// modifiers
-$el-size-xsmall: #{$base}--x-small;
-$el-size-small: #{$base}--small;
-$el-size-medium: #{$base}--medium;
-$el-size-large: #{$base}--large;
-$el-size-xlarge: #{$base}--x-large;
-$el-size-xxlarge: #{$base}--xx-large;
-$el-fluid-actions: #{$base}--fluid-actions;
-$el-loading-actions: #{$base}--loading;
-$el-center: #{$base}--center;
-
-.#{$base}.#{$el-size-small} {
-  max-width: 320px;
-  width: 100%;
-}
-
-.#{$base}.#{$el-size-medium} {
-  max-width: 656px;
-  width: 100%;
-}
-
-.#{$base}.#{$el-size-large} {
-  max-width: 848px;
-  width: 100%;
-}
-
-.#{$base}.#{$el-size-xlarge} {
-  max-width: 1024px;
-  width: 100%;
-}
-
-.#{$base}.#{$el-size-xxlarge} {
-  max-width: 1600px;
-  width: 100%;
-}
-
-// ********************************************
-// feedback
-$feedback: #{$base}__modal-feedback;
-$feedback-icon: #{$prefix}-icon;
-
-.#{$feedback} {
-  text-align: center;
-  padding-bottom: space(s);
-
-  .#{$feedback-icon} {
-    height: space(xxl);
-    width: space(xxl);
-  }
-
-  &--information {
-    .#{$icon-selector} {
-      svg, svg:not([fill]) {
-        @include icon-color(color(brand-primary, 700));
-      }
-    }
-  }
-
-  &--warning {
-    .#{$icon-selector} {
-      svg, svg:not([fill]) {
-        @include icon-color(color(warning, 600));
-      }
-    }
-  }
-
-  &--error {
-    .#{$icon-selector} {
-      svg, svg:not([fill]) {
-        @include icon-color(color(danger, 900));
-      }
-    }
-  }
-
-  &--success {
-    .#{$icon-selector} {
-      svg, svg:not([fill]) {
-        @include icon-color(color(success, 900));
-      }
-    }
-  }
-}
-
-// types
-$type-information: #{$base}-type-information;
-$type-decision: #{$base}-type-decision;
-$type-selection: #{$base}-type-selection;
-$type-form: #{$base}-type-form;
-
-.#{$type-information},
-.#{$type-decision} {
-  text-align: center;
-}
-
-// title
-$title: #{$base}__modal-title;
-.#{$title} {
-  @include h3-text-style();
-  color: color(neutral, 700);
-  word-break: break-word;
-  padding-bottom: space(s);
-  padding-right: space(s);
-  margin: 0;
-
-  &--information, &--decision {
-    padding: 0 space(s) space(s) space(s);
-  }
-
-  &--selection {
-    padding-bottom: 0;
-    line-height: calc(#{space(m)} * 1.16);
-  }
-
-  &--form {
-    padding-bottom: 0;
-    line-height: calc(#{space(m)} * 1.16);
-  }
-}
-
-// content
-$content: #{$base}__modal-content;
-.#{$content} {
-  overflow-y: auto;
-  // 100vh minus 20vh from margin top and minus
-  // bottom margin, footer and header
-  max-height: calc(80vh - 133px);
-  font-size: font-size(300);
-  color: color(neutral, 700);
-  @include body-text-style();
-  &--information {
-    padding-left: space(xl);
-    padding-right: space(xl);
-    padding-bottom: space(l);
-  }
-  &--decision {
-    padding-left: space(m);
-    padding-right: space(m);
-    padding-bottom: space(s);
-  }
-
-  &--selection,
-  &--form {
-    padding-left: space(s);
-    padding-right: space(s);
-  }
-  &--form {
-    padding-top: space(s);   
-  }
-  &--remove-padding {
-    padding: 0;
-  }
-  .em-ds-data-grid-body__row:last-child{
-      margin-bottom: 0;
-  }
-}
-
-// footer
-$footer: #{$base}__modal-footer;
-
-.#{$footer} {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: $border-style color(neutral, 080);
-  padding: space(s);
-  flex: 0 0 auto;
-
-  &-actions {
-    display: flex;
-
-    .action-reject,
-    .action-confirm {
-      margin-left: space(xs);
-    }
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal-slide/DSModalSlide.scss

@@ -1,170 +0,0 @@
-$mslide: #{$prefix}-modal-slide;
-$mslide-wrapper: #{$mslide}__wrapper;
-$mslide-overlay: #{$mslide}__overlay;
-$mslide-overlay-showing: #{$mslide-overlay}--showing;
-$mslide-overlay-disappearing: #{$mslide-overlay}--disappearing;
-$mslide-content: #{$mslide}__content;
-$mslide-actual-content: #{$mslide}__actual-content;
-$mslide-header: #{$mslide}__header;
-$mslide-footer: #{$mslide}__footer;
-$mslide-title: #{$mslide}__title;
-$mslide-header-left-side: #{$mslide}__header-left-side;
-$mslide-header-wrapper: #{$mslide}__header-wrapper;
-$mslide-footer-wrapper: #{$mslide}__footer-wrapper;
-
-$modalContent: #{$prefix}-modal-v2;
-$modalContentWrapper: #{$modalContent}__modal-wrapper;
-$modal-title: #{$modalContent}__modal-title;
-
-$opacity: 0.25;
-
-@keyframes overlayAnimation {
-  0% {
-    background: rgba(37, 41, 47, 0);
-  }
-  100% {
-    background: rgba(37, 41, 47, $opacity);
-  }
-}
-@keyframes overlayAnimationOut {
-  0% {
-    background: rgba(37, 41, 47, $opacity);
-  }
-  100% {
-    background: rgba(37, 41, 47, 0);
-  }
-}
-
-@keyframes contentAnimationOut {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-@keyframes contentAnimationIn {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.#{$mslide-wrapper} {
-  position: absolute;
-  display: flex;
-  height: calc(var(--height, 100%) * 1px);
-  width: 100%;
-  overflow: hidden;
-  top: 0;
-  z-index: 10;
-}
-.#{$mslide-overlay} {
-  height: 100%;
-  width: 100%;
-  background: rgba(37, 41, 47, $opacity);
-  display: flex;
-  animation: overlayAnimation calc(var(--fade-in, 500) * 1ms) linear;
-  &--disappearing {
-    animation: overlayAnimationOut calc(var(--fade-out, 500) * 1ms) linear;
-  }
-}
-.#{$mslide-overlay-showing} {
-  display: flex;
-  height: 100%;
-}
-
-.#{$mslide-content} {
-  height: calc(var(--height, 100%) * 1px);
-  background: color(neutral, 0);
-  @include box-shadow(depth(200));
-  width: calc(var(--width, 50) * 1%);
-  margin-left: auto;
-  align-items: center;
-  flex-direction: column;
-  display: flex;
-  overflow-y:auto;
-  border: 1px solid color(neutral, 300);
-  border-left: 2px solid color(neutral, 300);
-  animation: contentAnimationIn calc(var(--fade-in, 500) * 0.5ms) linear;
-  &--disappearing {
-    animation: contentAnimationOut calc(var(--fade-out, 500) * 1ms) linear;
-  }
-  .#{$prefix}-separator-wrapper {
-    margin-top: unset;
-  }  
-}
-
-.#{$mslide-actual-content} {
-  display: flex;
-  flex-direction: column;
-}
-
-.#{$mslide-header-left-side} {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  text-align: left;
-  padding: space(xs) space(s) space(xs) 0;
-  height: space(xl);
-
-  .em-ds-button {
-    .em-ds-icon {
-      fill: color(brand-primary, 600);
-    }
-  }
-  .close-button {
-    padding-left: 18px;
-  }
-}
-
-.#{$mslide-footer-wrapper} {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  text-align: left;
-  align-items: center;
-  justify-content: flex-end;
-  padding: space(xs) space(s) space(xs) 0;
-  height: space(xl);
-  .em-ds-button {
-    margin-left: space(s);
-  }
-}
-
-.#{$mslide-header} { 
-  padding: 0 space(s);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  
-  .#{$mslide-title} {
-    font-size: font-size(700);
-    color: color(neutral, 700);
-  }
-}
-
-.#{$mslide-wrapper} {
-  .#{$modalContentWrapper} {
-    flex: 1;
-    padding: space(m) 0;
-  }
-  .#{$modal-title}{
-    max-width: 80%;
-    margin: 0 auto;
-  }
-}
-
-.#{$prefix}-modal-v2{
-  .#{$mslide-content}{
-    .em-ds-modal-v2__modal-wrapper {
-      display: flex;
-      flex-direction: column;      
-    }
-    .em-ds-modal-v2__modal-footer{
-      border-top: none;
-    }
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-number-range-field/DSNumberRangeField.scss

@@ -1,2 +0,0 @@
-$basic-row-height: space(l);
-@import './impl/NumberRangeFieldImpl';

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-number-range-field/impl/NumberRangeFieldImpl.scss

@@ -1,20 +0,0 @@
-$wrapper: #{$prefix}-query-builder-addon-number-range-field;
-$fields-box:#{$wrapper}-wrapper;
-$fields-separator: #{$wrapper}__separator;
-
-.#{$fields-box}{
-  display: flex;
-  flex-direction: row;  
-  .#{$prefix}-input{
-    width: 100%;
-
-  }
-}
-
-.#{$fields-separator}{
-  height: $basic-row-height;
-  line-height: $basic-row-height;
-  padding-left: space(xxs);
-  padding-right: space(xxs);
-  color: color(neutral, 200);
-}