@elliemae/ds-basic 3.22.0-rc.7 → 3.22.0-rc.8

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

@@ -7,6 +7,7 @@ $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;
@@ -15,6 +16,7 @@ $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;
@@ -29,9 +31,11 @@ $el-center: #{$el-container}--center;
 // ********************************************
 // Vars
 $modal-body-min-height: 96px; // from Spec
-$border-style: solid 1px; // from Spec
+$border-style:solid 1px;  // from Spec
 $modal-margin: space(m) auto;
 
+
+
 // ********************************************
 // Basic
 body.ReactModal__Body--open {
@@ -63,7 +67,7 @@ body.ReactModal__Body--open {
   }
 }
 
-.#{$el-container} {
+.#{$el-container}{
   //@include transition(duration(slower) easing(out));
   position: relative;
   display: flex;
@@ -73,39 +77,40 @@ body.ReactModal__Body--open {
   background-color: color(neutral, 000);
   background-clip: padding-box;
   min-width: space(xxl) * 2;
-  &:focus {
+  &:focus{
     outline: none;
   }
 }
 
-.#{$el-size-xsmall} {
+
+.#{$el-size-xsmall}{
   max-width: space(xxl) * 5;
   margin: $modal-margin;
 }
 
-.#{$el-size-small} {
+.#{$el-size-small}{
   max-width: space(xxl) * 7.5;
   margin: $modal-margin;
 }
 
-.#{$el-size-medium} {
+.#{$el-size-medium}{
   max-width: space(xxl) * 9;
   margin: $modal-margin;
 }
 
-.#{$el-size-large} {
+.#{$el-size-large}{
   max-width: space(xxl) * 12;
   margin: $modal-margin;
 }
 
-.#{$el-size-xlarge} {
+.#{$el-size-xlarge}{
   max-width: space(xxl) * 16;
   margin: $modal-margin;
 }
 
 // ********************************************
 // HEADER
-.#{$el-header} {
+.#{$el-header}{
   background: color(neutral, 050);
   display: flex;
   align-items: flex-start;
@@ -113,7 +118,7 @@ body.ReactModal__Body--open {
   padding: space(s);
   flex: 0 0 auto;
 }
-.#{$el-header-title} {
+.#{$el-header-title}{
   @include h3-text-style();
   color: color(neutral, 700);
   word-break: break-word;
@@ -139,6 +144,7 @@ body.ReactModal__Body--open {
   word-break: break-word;
 }
 
+
 // ********************************************
 // FOOTER
 .#{$el-footer} {
@@ -158,9 +164,10 @@ body.ReactModal__Body--open {
   margin-left: space(s);
 }
 .#{$el-fluid-actions} {
+
   .#{$el-actions} {
     flex-direction: column;
-    flex: 1;
+    flex:1;
   }
 
   .#{$el-footer-btn} {
@@ -176,4 +183,5 @@ body.ReactModal__Body--open {
 //   }
 // }
 
+
 @import './ModalFeedBack/ModalFeedBack';

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

@@ -1,42 +1,42 @@
-$icon-selector: #{$prefix}-icon;
+$icon-selector :#{$prefix}-icon;
 
-.#{$prefix}-modal-feedback {
+.#{$prefix}-modal-feedback{
   display: flex;
   justify-content: center;
   padding-bottom: space(s);
 
-  .#{$icon-selector} {
+  .#{$icon-selector}{
     height: space(xxl);
     width: space(xxl);
   }
 
-  &--modal-type-warning {
-    .#{$icon-selector} {
+  &--modal-type-warning{
+    .#{$icon-selector}{
       @include icon-color(color(warning, 700));
     }
   }
 
-  &--modal-type-error {
-    .#{$icon-selector} {
+  &--modal-type-error{
+    .#{$icon-selector}{
       @include icon-color(color(danger, 900));
     }
   }
 
-  &--modal-type-success {
-    .#{$icon-selector} {
+  &--modal-type-success{
+    .#{$icon-selector}{
       @include icon-color(color(success, 900));
     }
   }
 
-  &--modal-type-help {
-    .#{$icon-selector} {
+  &--modal-type-help{
+    .#{$icon-selector}{
       @include icon-color(color(brand-primary, 400));
     }
   }
 
-  &--modal-type-info {
-    .#{$icon-selector} {
+  &--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-number-range-field/DSNumberRangeField.scss

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

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

@@ -1,19 +1,20 @@
 $wrapper: #{$prefix}-query-builder-addon-number-range-field;
-$fields-box: #{$wrapper}-wrapper;
+$fields-box:#{$wrapper}-wrapper;
 $fields-separator: #{$wrapper}__separator;
 
-.#{$fields-box} {
+.#{$fields-box}{
   display: flex;
-  flex-direction: row;
-  .#{$prefix}-input {
+  flex-direction: row;  
+  .#{$prefix}-input{
     width: 100%;
+
   }
 }
 
-.#{$fields-separator} {
+.#{$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

@@ -25,3 +25,6 @@ $overlay-container: #{$prefix}-overlay;
     overflow: visible;
   }
 }
+
+
+

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

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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-pills/DSPills.scss

@@ -15,7 +15,7 @@ $radius: space(s);
   position: relative;
 
   &:after {
-    content: '';
+    content: "";
     z-index: 10;
     position: absolute;
     top: 0;
@@ -43,21 +43,21 @@ $radius: space(s);
   }
 }
 @mixin withFirstChildFocus() {
-  @include withFocus(first);
+  @include withFocus(first)
 }
 
 @mixin withLastChildFocus() {
-  @include withFocus(last);
+  @include withFocus(last)
 }
 
 @mixin interactivePillWithActiveState() {
   .#{$pill}__label {
-    color: color(brand-primary, 800);
+    color: color(brand-primary, 800)
   }
 
   .#{$pill-icon} {
     svg path {
-      fill: color(brand-primary, 800);
+      fill: color(brand-primary, 800)
     }
   }
 }
@@ -96,23 +96,17 @@ $radius: space(s);
   }
 }
 
-.#{$pill}.removable-pill,
-.#{$pill}.dropdown-pill,
-.#{$pill}.input-pill {
-  &:active,
-  &:focus-within {
-    @include withFocus(only);
+.#{$pill}.removable-pill, .#{$pill}.dropdown-pill, .#{$pill}.input-pill {
+  &:active, &:focus-within {
+    @include withFocus(only)
   }
 }
 
 .#{$pill}.dropdown-pill {
   cursor: pointer;
 
-  &:hover,
-  &:active,
-  &:focus-within,
-  &[aria-expanded='true'] {
-    @include interactivePillWithActiveState();
+  &:hover, &:active, &:focus-within, &[aria-expanded="true"] {
+    @include interactivePillWithActiveState()
   }
 
   .dropdown-pill-menu {
@@ -124,7 +118,7 @@ $radius: space(s);
     justify-content: center;
     margin-right: space(xxs);
     svg {
-      width: space(xs) * 1.5;
+      width: space(xs) * 1.5
     }
   }
 }
@@ -145,11 +139,9 @@ $radius: space(s);
 
     .em-ds-input {
       background-color: color(brand-primary, 200);
-    }
+    }  
 
-    &:active,
-    &:focus-within,
-    &[aria-expanded='true'] {
+    &:active, &:focus-within, &[aria-expanded="true"] {
       background-color: color(neutral, 000);
 
       .em-ds-input {
@@ -157,7 +149,7 @@ $radius: space(s);
       }
     }
   }
-
+  
   .em-ds-input {
     color: color(brand-primary, 800);
     padding: unset;
@@ -166,7 +158,7 @@ $radius: space(s);
 
     &:focus {
       box-shadow: unset;
-    }
+    }    
   }
 }
 
@@ -181,32 +173,26 @@ $radius: space(s);
 }
 
 // interactive pills
-.#{$pill-group} .#{$pill}.dropdown-pill,
-.#{$pill-group} .#{$pill}.removable-pill,
-.#{$pill}.input-pill {
-  &:active,
-  &:focus-within {
+.#{$pill-group} .#{$pill}.dropdown-pill, .#{$pill-group} .#{$pill}.removable-pill, .#{$pill}.input-pill {
+  &:active, &:focus-within {
     @include withFocus(null);
   }
 
   &:first-child:not(:only-child) {
-    &:active,
-    &:focus-within {
+    &:active, &:focus-within {
       @include withFirstChildFocus();
     }
   }
 
   &:last-child:not(:only-child) {
-    &:active,
-    &:focus-within {
+    &:active, &:focus-within {
       @include withLastChildFocus();
     }
   }
 
   &:only-child {
-    &:active,
-    &:focus-within {
-      @include withFocus(only);
+    &:active, &:focus-within {
+      @include withFocus(only)
     }
   }
 }
@@ -261,33 +247,33 @@ $radius: space(s);
 // ********************************************
 // Mobile
 @include md {
-  .#{$pill} {
-    &--m {
-      height: toMobile(space(m));
-    }
+.#{$pill} {
+  &--m {
+    height: toMobile(space(m));
+  }
 
-    &--l {
-      height: toMobile(space(l));
-    }
+  &--l {
+    height: toMobile(space(l));
+  }
 
-    & {
-      min-width: calc(#{toMobile(space(l))} * 1.75);
-      justify-content: center;
-    }
+  & {
+    min-width: calc(#{toMobile(space(l))} * 1.75);
+    justify-content: center;
+  }
 
-    &__label {
-      font-size: toMobile(font-size(500));
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
+  &__label {
+    font-size: toMobile(font-size(500));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 
-    &.removable-pill {
-      justify-content: space-between;
-    }
+  &.removable-pill {
+    justify-content: space-between;
+  }
 
-    &.dropdown-pill {
-      justify-content: space-between;
-    }
+  &.dropdown-pill {
+    justify-content: space-between;
   }
 }
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-popover/DSPopover.scss

@@ -48,17 +48,18 @@ $max-width: space(xxl) * 3.9;
 
   & .stroke {
     fill: color(neutral, 500);
-    fill-opacity: 0.4;
+    fill-opacity: .4;
   }
   & .fill {
     fill: color(neutral, 000);
   }
 
   // popper overrides top property, we have to define it here
-  &[data-placement^='top'] {
+  &[data-placement^="top"] {
     top: 100%;
   }
-  &[data-placement^='bottom'] {
+  &[data-placement^="bottom"] {
     margin-bottom: -0.5px;
   }
+
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-portal/DSPortal.scss

@@ -7,4 +7,4 @@ $el-container: #{$prefix}-portal;
   top: 0;
   left: 0;
   right: 0;
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-search-field/DSSearchField.scss

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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-search-field/impl/DSSeachFieldImpl.scss

@@ -1,18 +1,19 @@
 $wrapper-btn: #{$prefix}-query-builder-addon-search-field;
 $btn: #{$wrapper-btn}__btn-selector;
 $btn-empty: #{$btn}--btn-placeholder;
-$dropdown-selector: #{$wrapper-btn}__dropdown-field-selector;
+$dropdown-selector:#{$wrapper-btn}__dropdown-field-selector;
 $dropdown-container: #{$wrapper-btn}-container-selector;
-$advance-search-option-btn: advance-search-option-btn;
+$advance-search-option-btn:advance-search-option-btn;
 
-.#{$dropdown-container} {
+
+.#{$dropdown-container}{
   display: flex;
   width: 100%;
 }
 
-.#{$btn} {
+.#{$btn}{
   height: $basic-row-height;
-  padding: 0 space(xxs);
+  padding:0 space(xxs);
   overflow: hidden;
   text-align: left;
   justify-content: left;
@@ -20,15 +21,15 @@ $advance-search-option-btn: advance-search-option-btn;
   border: none;
   background: none;
 }
-.#{$btn-empty} {
+.#{$btn-empty}{
   color: color(neutral, 100);
   font-style: italic;
 }
-.#{$dropdown-selector} {
+.#{$dropdown-selector}{
   width: 100%;
 }
 
-.#{$advance-search-option-btn} {
+.#{$advance-search-option-btn}{
   height: $basic-row-height;
   width: 100%;
 }