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

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

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

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

@@ -0,0 +1,187 @@
+// ********************************************
+// 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-mobile/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal/v1/ModalFeedBack/ModalFeedBack.scss

@@ -0,0 +1,42 @@
+$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-mobile/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal/v2/DSModal.scss

@@ -0,0 +1,286 @@
+$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-mobile/node_modules/@elliemae/ds-basic/styles/components/packages/ds-modal-slide/DSModalSlide.scss

@@ -0,0 +1,170 @@
+$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-mobile/node_modules/@elliemae/ds-basic/styles/components/packages/ds-number-range-field/DSNumberRangeField.scss

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

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

@@ -0,0 +1,20 @@
+$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);
+}