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

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

@@ -0,0 +1,291 @@
+$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-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/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-number-range-field/DSNumberRangeField.scss

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

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

@@ -0,0 +1,19 @@
+$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-overlay/DSOverlay.scss

@@ -0,0 +1,27 @@
+// ********************************************
+// 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-page-header/DSPageHeader.scss

@@ -0,0 +1 @@
+@import './v1/DSPageHeader.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-page-header/v1/DSPageHeader.scss

@@ -0,0 +1,120 @@
+// ********************************************
+// container definition
+$page-header: #{$prefix}-page-header;
+$page-header-title: #{$page-header}-title;
+$page-header-title-wrapper: #{$page-header}-title-wrapper;
+$page-header-main-section: #{$page-header}-main-section;
+$page-header-title-section: #{$page-header}-title-section;
+$page-header-toolbar: #{$page-header}-toolbar;
+$page-header-breadcrumb: #{$page-header}-breadcrumb;
+$page-header-backarrow: #{$page-header}-backarrow;
+
+// DIMSUM components
+$btn-component: #{$prefix}-button;
+$toolbar-component: #{$prefix}-toolbar;
+$breadcrumb-component: #{$prefix}-breadcrumb;
+
+$border-style: border-size() solid;
+
+.#{$page-header-main-section} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.#{$page-header-title-section} {
+  display: flex;
+  width: 100%;
+}
+
+.#{$page-header-backarrow} {
+  fill: color(brand-primary, 600);
+  padding-right: 5px;
+  cursor: pointer;
+}
+
+.#{$page-header-toolbar} {
+  flex: 1 1 0%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+_:-ms-fullscreen,
+:root .#{$page-header-toolbar}--ie-flex-basis-auto {
+  flex-basis: auto;
+}
+
+.#{$page-header-breadcrumb} {
+  grid-area: breadcrumb;
+
+  ol {
+    margin: 0;
+  }
+
+  @include body-small-text-style();
+}
+
+.#{$page-header-title-wrapper} {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  width: 100%;
+}
+
+.#{$page-header-title} {
+  position: relative;
+  display: flex;
+  flex: 3;
+  min-width: 0;
+  align-items: center;
+
+  &__editable-title {
+    position: absolute;
+    top: border-size() * -1;
+    left: space(xs) * -1.1;
+    width: 100%;
+    height: fit-content;
+    @include h2-text-style();
+  }
+
+  &__title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    @include h2-text-style();
+  }
+
+  &__subtitle {
+    margin: space(xxs) 0;
+    color: color(neutral, 500);
+  }
+}
+
+.#{$page-header} {
+  margin: 0 0 space(xs);
+  display: flex;
+  align-items: center;
+  &--with-subtitle {
+    .#{$page-header-title} {
+      flex-direction: column;
+      align-items: flex-start;
+      padding-right: space(xs);
+    }
+    .#{$page-header-title}__toolbar {
+      align-items: flex-end;
+      justify-content: flex-end;
+    }
+  }
+
+  &--with-bottom-separator {
+    border-bottom: border-size(s) solid color(neutral, 400);
+  }
+
+  .#{$page-header-breadcrumb} {
+    & a:first-child {
+      padding-left: 1px;
+    }
+  }
+}

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

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