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

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

@@ -1,179 +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-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));
-    }
-  }
-}

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

@@ -1,291 +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: calc(100% - 48px);
-}
-
-// ********************************************
-// 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/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-number-range-field/DSNumberRangeField.scss

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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-number-range-field/impl/NumberRangeFieldImpl.scss

@@ -1,19 +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);
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-overlay/DSOverlay.scss

@@ -1,27 +0,0 @@
-// ********************************************
-// container definition
-$overlay-container: #{$prefix}-overlay;
-
-// ********************************************
-// elements definition
-
-@mixin position-all($position, $value) {
-  position: $position;
-  top: $value;
-  right: $value;
-  bottom: $value;
-  left: $value;
-}
-
-.#{$overlay-container} {
-  @include position-all(static, 0);
-
-  &--with-scroll {
-    position: fixed;
-  }
-
-  &--inline {
-    display: inline;
-    overflow: visible;
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-page-number/DSPageNumber.scss

@@ -1,56 +0,0 @@
-// ********************************************
-// container definition
-$page-number: #{$prefix}-page-number;
-$separator: #{$prefix}-selectbox__indicator-separator;
-$input-container: #{$prefix}-selectbox__input;
-.#{$page-number} {
-  position: relative;
-  display: inline-flex;
-  border: border-size(xs) solid color(neutral, 200);
-  margin: space(xs) 0;
-  @include border-radius($border-radius);
-  .#{$picker-panel} {
-    &:not(:last-child) {
-      border-right: border-size(xs) solid color(neutral, 200);
-    }
-  }
-
-  &__pages {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  &__ref {
-    width: space(l);
-    position: absolute;
-    top: 0;
-    pointer-events: none;
-  }
-  &__input {
-    border: none;
-    box-shadow: none;
-    width: space(l);
-    background: none;
-    text-align: center;
-    padding-right: space(xxs);
-    &:focus {
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  &__separator {
-    width: space(xs);
-  }
-  &__total {
-    padding: space(xs) 14px;
-  }
-
-  &__limiter {
-    width: 1px;
-    background: color(neutral, 200);
-    height: calc(#{space(l)} - #{space(s)});
-    margin-top: calc(#{space(xxs)} * 1.5);
-    margin-left: space(xs);
-  }
-}