@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-modal/v1/DSModal.scss

@@ -7,7 +7,6 @@ $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;
@@ -16,7 +15,6 @@ $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;
@@ -31,11 +29,9 @@ $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 {
@@ -67,7 +63,7 @@ body.ReactModal__Body--open {
   }
 }
 
-.#{$el-container}{
+.#{$el-container} {
   //@include transition(duration(slower) easing(out));
   position: relative;
   display: flex;
@@ -77,40 +73,39 @@ 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;
@@ -118,7 +113,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;
@@ -144,7 +139,6 @@ body.ReactModal__Body--open {
   word-break: break-word;
 }
 
-
 // ********************************************
 // FOOTER
 .#{$el-footer} {
@@ -164,10 +158,9 @@ body.ReactModal__Body--open {
   margin-left: space(s);
 }
 .#{$el-fluid-actions} {
-
   .#{$el-actions} {
     flex-direction: column;
-    flex:1;
+    flex: 1;
   }
 
   .#{$el-footer-btn} {
@@ -183,5 +176,4 @@ 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,20 +1,19 @@
 $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,6 +25,3 @@ $overlay-container: #{$prefix}-overlay;
     overflow: visible;
   }
 }
-
-
-

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,43 +15,42 @@ $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,17 +96,23 @@ $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 {
@@ -118,7 +124,7 @@ $radius: space(s);
     justify-content: center;
     margin-right: space(xxs);
     svg {
-      width: space(xs) * 1.5
+      width: space(xs) * 1.5;
     }
   }
 }
@@ -139,9 +145,11 @@ $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 {
@@ -149,7 +157,7 @@ $radius: space(s);
       }
     }
   }
-  
+
   .em-ds-input {
     color: color(brand-primary, 800);
     padding: unset;
@@ -158,7 +166,7 @@ $radius: space(s);
 
     &:focus {
       box-shadow: unset;
-    }    
+    }
   }
 }
 
@@ -173,26 +181,32 @@ $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);
     }
   }
 }
@@ -247,33 +261,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,18 +48,17 @@ $max-width: space(xxl) * 3.9;
 
   & .stroke {
     fill: color(neutral, 500);
-    fill-opacity: .4;
+    fill-opacity: 0.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,19 +1,18 @@
 $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;
@@ -21,15 +20,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%;
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-spinner/DSSpinner.scss

@@ -2,7 +2,6 @@
 // container definition
 $spinner-container: #{$prefix}-spinner;
 
-
 // ********************************************
 // element definition
 $spinner-el: #{$spinner-container}__spinner;
@@ -13,8 +12,8 @@ $message-el: #{$spinner-container}__message;
   height: icon-size($size) * 2;
   margin: space($size) / 2;
   svg {
-    display:block;
-    float:left;
+    display: block;
+    float: left;
     @include icon($size);
   }
 }
@@ -54,7 +53,10 @@ $message-el: #{$spinner-container}__message;
     @include spinner-container-size(xxl);
   }
 
-  .spinner-tl,.spinner-tr,.spinner-bl,.spinner-br {
+  .spinner-tl,
+  .spinner-tr,
+  .spinner-bl,
+  .spinner-br {
     transform-origin: 50% 50%;
     animation-name: spin;
     // todo: add ease from dimsum
@@ -64,10 +66,8 @@ $message-el: #{$spinner-container}__message;
   }
 }
 
-
-
 @keyframes spin {
-  0%{
+  0% {
     transform: rotate(0deg);
   }
   25% {
@@ -81,24 +81,23 @@ $message-el: #{$spinner-container}__message;
   }
   100% {
     transform: rotate(180deg);
-
   }
 }
 
 @keyframes scale {
-  0%{
-    transform: scale(1.2,1.2);
+  0% {
+    transform: scale(1.2, 1.2);
   }
   25% {
-    transform: scale(1.2,1.2);
+    transform: scale(1.2, 1.2);
   }
   50% {
-    transform: scale(1,1);
+    transform: scale(1, 1);
   }
   75% {
-    transform: scale(1,1);
+    transform: scale(1, 1);
   }
   100% {
-    transform: scale(1.2,1.2);
+    transform: scale(1.2, 1.2);
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-text-wrapper/DSTextWrapper.scss

@@ -3,10 +3,10 @@
 $el-container: #{$prefix}-text-wrapperRef;
 $el-container-ellipsis: #{$el-container}--text-overflow-ellipsis;
 $el-container-left: #{$el-container}--text-align-left; // Can be moved to high level inside the scss structure
-$el-container-right: #{$el-container}--text-align-right;  // Can be moved to high level inside the scss structure
-$el-container-center: #{$el-container}--text-align-center;  // Can be moved to high level inside the scss structure
-$el-container-justify: #{$el-container}--text-align-justify;  // Can be moved to high level inside the scss structure
-$el-container-word-break: #{$el-container}--text-overflow-word-break;  // Can be moved to high level inside the scss structure
+$el-container-right: #{$el-container}--text-align-right; // Can be moved to high level inside the scss structure
+$el-container-center: #{$el-container}--text-align-center; // Can be moved to high level inside the scss structure
+$el-container-justify: #{$el-container}--text-align-justify; // Can be moved to high level inside the scss structure
+$el-container-word-break: #{$el-container}--text-overflow-word-break; // Can be moved to high level inside the scss structure
 
 // ********************************************
 // elements
@@ -15,22 +15,22 @@ $el-container-ellipsis-wrapper: #{$el-container}__ellipsis-wrapperRef;
 
 .#{$el-container} {
   display: inline-flex;
-  flex-direction: column;  
+  flex-direction: column;
 
   &.#{$el-container-ellipsis} {
     flex-direction: row;
-  
-    .#{$el-container-ellipsis-wrapper}{
+
+    .#{$el-container-ellipsis-wrapper} {
       white-space: nowrap;
       overflow: hidden;
     }
 
     &:after {
-      content: "...";
+      content: '...';
       display: inline;
     }
   }
-  &.#{$el-container-word-break}{
+  &.#{$el-container-word-break} {
     word-break: break-all;
   }
   &.#{$el-container-left} {
@@ -38,14 +38,14 @@ $el-container-ellipsis-wrapper: #{$el-container}__ellipsis-wrapperRef;
   }
 
   &.#{$el-container-right} {
-    text-align: right
+    text-align: right;
   }
 
   &.#{$el-container-justify} {
-    text-align: justify;    
+    text-align: justify;
   }
-  
+
   &.#{$el-container-center} {
     text-align: center;
   }
-}
+}