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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Checkbox/DSCheckbox.scss

@@ -12,19 +12,20 @@ $el-button: #{$el-container}__input-button;
 $el-text: #{$el-container}__label-text;
 $el-children: #{$el-container}__checkbox-children;
 
-
 // ********************************************
 // local
 $border-type: solid 1px;
 $checkbox-size: space(s);
 
-
 .#{$el-text} {
   position: relative;
   margin-left: space(xs);
-  bottom: space(xxs) * (-0.25);// todo: fix - extra pixel below the text. The font itself has some misalignment
+  bottom: space(xxs) * (-0.25); // todo: fix - extra pixel below the text. The font itself has some misalignment
 }
-*::-ms-backdrop, .#{$el-text} { bottom: 0; } /* IE11 */
+*::-ms-backdrop,
+.#{$el-text} {
+  bottom: 0;
+} /* IE11 */
 
 .#{$el-label} {
   @include body-text-style();
@@ -41,13 +42,13 @@ $checkbox-size: space(s);
   &:first-child:not(:last-child) {
     margin-right: space(xs);
   }
-  
+
   & > span:first-child {
     height: 16px;
   }
 }
 
-.#{$el-children}{
+.#{$el-children} {
   padding-left: space(m);
 }
 
@@ -60,13 +61,11 @@ $checkbox-size: space(s);
 // ********************************************
 // Error container & elements             *****
 .#{$el-container-error} {
-
 }
 
 // ********************************************
 // Disabled container & elements          *****
 .#{$el-container-disabled} {
-
   .#{$el-label} {
     cursor: not-allowed;
   }
@@ -74,16 +73,13 @@ $checkbox-size: space(s);
   .#{$el-text} {
     color: color(neutral, 500);
   }
-
 }
 
 // ********************************************
 // Read only container & elements         *****
 .#{$el-container-read-only} {
-
 }
 
-
 @import './elements/CheckMark';
 
 // Mobile
@@ -95,4 +91,4 @@ $checkbox-size: space(s);
   .#{$el-container} {
     padding-bottom: toMobile(space(s));
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Checkbox/elements/CheckMark.scss

@@ -25,7 +25,7 @@ $el-label: #{$el-container}__label;
     .#{$el-button} {
       @include withActive();
     }
-  } 
+  }
 }
 
 .#{$el-button} {
@@ -42,7 +42,6 @@ $el-label: #{$el-container}__label;
   cursor: pointer;
 
   &.checkbox-true {
-    
     &:after {
       width: space(xxs);
       height: space(xs);
@@ -140,7 +139,7 @@ $el-label: #{$el-container}__label;
     .#{$el-button} {
       background: color(neutral, 080);
     }
-  }  
+  }
 }
 
 .#{$el-button} {
@@ -181,16 +180,15 @@ $el-label: #{$el-container}__label;
         @include withHoverM();
       }
     }
-  
+
     &:active {
       .#{$el-button} {
         outline: none;
         border: 2px solid color(brand-primary, 600);
       }
-    } 
+    }
   }
 
-
   .#{$el-button} {
     -webkit-tap-highlight-color: transparent;
     width: toMobile(space(m));
@@ -221,4 +219,4 @@ $el-label: #{$el-container}__label;
       }
     }
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/DSComboBox.scss

@@ -1,2 +1,2 @@
 @import './v1/DSComboBox.scss';
-@import './v2/DSComboBox.scss';
+@import './v2/DSComboBox.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v1/DSComboBox.scss

@@ -94,7 +94,8 @@ $input-height: 28px;
   &--is-selected {
     background-color: color(brand-primary, 600);
     color: color(neutral, 000);
-    svg, svg:not([fill]) {
+    svg,
+    svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
@@ -115,7 +116,8 @@ $input-height: 28px;
   .#{$indicators-el} {
     position: relative;
     .clear-indicator {
-      svg, svg:not([fill]) {
+      svg,
+      svg:not([fill]) {
         padding: 0;
         margin-top: calc(#{space(xxs)} * (-0.5));
       }
@@ -211,7 +213,8 @@ VARIANTS
     &--is-selected {
       background-color: color(brand-primary, 600);
       color: color(neutral, 000);
-      svg, svg:not([fill]) {
+      svg,
+      svg:not([fill]) {
         fill: color(neutral, 000);
       }
     }
@@ -228,7 +231,7 @@ VARIANTS
 .combobox-multi-select-header {
   padding: space(s);
 }
-.#{$el-container}__value-container{
+.#{$el-container}__value-container {
   &:focus-within {
     @include dsFakeActive();
   }
@@ -255,11 +258,10 @@ VARIANTS
   }
 }
 
-
 // ValueContainer
-.combobox-value-container{
+.combobox-value-container {
   width: 100%;
   &:focus {
     @include dsFocus();
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/container.scss

@@ -1,9 +1,9 @@
 $container: #{$combo}-container;
 .#{$container} {
   width: 100%;
-  input[type="text"] {
-    background: color(neutral, 000)!important; // accessibility
-    color: color(neutral, 800)!important; // accessibility
+  input[type='text'] {
+    background: color(neutral, 000) !important; // accessibility
+    color: color(neutral, 800) !important; // accessibility
   }
   height: $height;
   background: color(neutral, 000);

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/customOptions.scss

@@ -11,29 +11,29 @@ $menu-option: #{$combo}__option;
   overflow: hidden; // avoid overflow inside option
   display: flex;
   flex-direction: column;
-  &--is-focused, &:hover {
+  &--is-focused,
+  &:hover {
     @include dsHover();
   }
   &:active {
     background-color: color(brand-primary, 200);
-  }  
+  }
   &--is-selected {
     background-color: color(brand-primary, 200);
     color: color(neutral, 800);
-    svg, svg:not([fill]) {
+    svg,
+    svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
 }
 
-
 $menu-list-multi: combobox-menu-list-is-multi;
 
-.#{$menu-list-multi}{
+.#{$menu-list-multi} {
   .#{$menu-option} {
     &--is-selected {
       background-color: color(brand-primary, 200);
     }
   }
-  
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/dropdownIndicator.scss

@@ -1,8 +1,6 @@
 $btn: #{$prefix}-button;
 $btn-dropdown: dropdown-indicator;
 
-
-
 .#{$btn}.#{$btn-dropdown} {
   &.active {
     border: none;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/menu.scss

@@ -1,26 +1,25 @@
-
 $menu: #{$combo}__menu;
 $combo-trigger: #{$combo}-trigger;
 
 .#{$menu} {
-    margin: 0;
-    top: 100%;
-    background: color(neutral, 0);
-    @include border-radius($radius);
-    border: solid 1px color(neutral, 400);
-    @include box-shadow(depth(300));
-    margin-bottom: 8px;
-    margin-top: space(xs);
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-  }
+  margin: 0;
+  top: 100%;
+  background: color(neutral, 0);
+  @include border-radius($radius);
+  border: solid 1px color(neutral, 400);
+  @include box-shadow(depth(300));
+  margin-bottom: 8px;
+  margin-top: space(xs);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
 
 .#{$combo-trigger} {
-    position: relative;
-    top: -2.5rem;
-    height: $height;
-  }
+  position: relative;
+  top: -2.5rem;
+  height: $height;
+}
 
 .em-ds-layout__header {
   z-index: 1;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/optionMultiple.scss

@@ -1,16 +1,16 @@
 .combobox-v2-option-multiple-container {
-    pointer-events: none;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    .#{$prefix}-form-element-checkbox {
-        padding-bottom: 0;
-    }
+  pointer-events: none;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .#{$prefix}-form-element-checkbox {
+    padding-bottom: 0;
+  }
 }
 
 .combobox-v2-option-multiple-truncated-label {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Input/InputAddonWrapper.scss

@@ -35,9 +35,8 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 
   > * {
     height: 100%;
-
   }
-// PUI-3948
+  // PUI-3948
   & .#{$el-addon}--error {
     border: 1px solid color(danger, 900);
     border-radius: 2px;
@@ -48,7 +47,7 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
       border: inherit;
     }
   }
-// PUI-3948
+  // PUI-3948
   &:focus-within .#{$el-addon}--error {
     border: inherit;
   }
@@ -73,8 +72,9 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   }
 }
 
-
-.#{$input-addon-wrapper}:hover, .#{$input-addon-wrapper}:focus, .#{$input-addon-wrapper}:active {
+.#{$input-addon-wrapper}:hover,
+.#{$input-addon-wrapper}:focus,
+.#{$input-addon-wrapper}:active {
   & .#{$el-addon}--error {
     border: none;
   }
@@ -98,8 +98,8 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   &:hover {
     @include dsHover();
   }
-  
-  &.#{$el-addon-right}>.#{$el-clearable-button}:not(.em-ds-input__clearable) {   
+
+  &.#{$el-addon-right} > .#{$el-clearable-button}:not(.em-ds-input__clearable) {
     position: relative;
     &:before {
       content: '';
@@ -113,8 +113,8 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
     }
     &:focus-within {
       &:before {
-        display:  none;
-      }  
+        display: none;
+      }
     }
   }
 }
@@ -124,4 +124,4 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   .#{$input-addon-wrapper} {
     height: toMobile(space(l));
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Menu/Menu.scss

@@ -17,7 +17,7 @@ $dsseparator: #{$prefix}-separator;
     color: color(neutral, 500);
   }
   &:after {
-    content: "";
+    content: '';
     display: block;
     height: 1px;
     width: 100%;
@@ -28,12 +28,12 @@ $dsseparator: #{$prefix}-separator;
   }
 }
 .#{$menu-container} {
-  .#{$prefix}-separator-wrapper{
+  .#{$prefix}-separator-wrapper {
     margin: 0;
   }
 }
 
-.menu-component-internal-wrapper{
+.menu-component-internal-wrapper {
   min-width: space(l) * 5;
   max-width: space(l) * 14;
 }
@@ -53,7 +53,7 @@ $dsseparator: #{$prefix}-separator;
   .#{$dsseparator} {
     border-color: color(neutral, 300);
   }
-  &--type-phone{
+  &--type-phone {
     margin-top: space(xxs);
   }
 }
@@ -70,6 +70,6 @@ $dsseparator: #{$prefix}-separator;
   }
 }
 
-@import "MenuItems/MenuItem";
-@import "MenuItems/SearchableGroup";
-@import "./MenuCombobox.scss";
+@import 'MenuItems/MenuItem';
+@import 'MenuItems/SearchableGroup';
+@import './MenuCombobox.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Menu/MenuCombobox.scss

@@ -1,20 +1,20 @@
 $menu-combo: #{$menu-container}--menu-combo-box;
 
-.#{$menu-combo}{
+.#{$menu-combo} {
   padding: 0;
   padding-top: space(xs);
   border: $theme-base-border-style color(neutral, 200);
-  .#{$prefix}-combobox-container{
+  .#{$prefix}-combobox-container {
     height: auto;
   }
-  .#{$prefix}-combobox__menu{
+  .#{$prefix}-combobox__menu {
     margin-bottom: 0;
     position: initial;
     border: none;
     box-shadow: none;
   }
-  .#{$prefix}-combobox__control{
+  .#{$prefix}-combobox__control {
     margin-left: space(xs);
     margin-right: space(xs);
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Menu/MenuItems/MenuItem.scss

@@ -7,7 +7,7 @@ $dsicon: #{$prefix}-icon;
 
 $addon: #{$prefix}-menu-item__addon;
 
-.#{$menu-item}{      
+.#{$menu-item} {
   display: flex;
   transition: background-color duration(fast) easing(base);
   align-items: center;
@@ -16,7 +16,8 @@ $addon: #{$prefix}-menu-item__addon;
   min-width: space(l) * 4.2;
   max-width: space(l) * 12;
   border: 1px solid transparent;
-  &:hover, &[aria-expanded="true"] {
+  &:hover,
+  &[aria-expanded='true'] {
     border-color: color(brand-primary, 600);
     .#{$menu-item}__addon--fixedItem {
       span {
@@ -47,8 +48,8 @@ $addon: #{$prefix}-menu-item__addon;
     pointer-events: none;
     opacity: 0.5;
   }
-  
-  .#{$menu-item-custom-render}{
+
+  .#{$menu-item-custom-render} {
     &:not(:hover) .#{$addon}:last-child {
       opacity: 1;
     }
@@ -78,16 +79,17 @@ $addon: #{$prefix}-menu-item__addon;
 
     .#{$addon}:last-child {
       opacity: 1;
-    }    
+    }
   }
 
-  &[role='menuitemcheckbox'], &[role='menuitemradio'] {
+  &[role='menuitemcheckbox'],
+  &[role='menuitemradio'] {
     .checkable-mark {
       svg {
         stroke: color(brand-primary, 600);
       }
     }
-    .#{$menu-item}__addon:last-child {      
+    .#{$menu-item}__addon:last-child {
       margin-left: space(xxs);
     }
     .#{$menu-item}__addon--fixedItem {
@@ -96,14 +98,12 @@ $addon: #{$prefix}-menu-item__addon;
       }
     }
   }
-  &.no-options{
+  &.no-options {
     pointer-events: none;
     color: color(neutral, 500);
   }
-  
 
-
-  &__addon {    
+  &__addon {
     min-width: space(s);
   }
 
@@ -111,17 +111,17 @@ $addon: #{$prefix}-menu-item__addon;
     margin-left: space(xs);
   }
 
- // todo: maybe we don't need this if we use addon-block
-  >.#{$dsicon}:first-child {
+  // todo: maybe we don't need this if we use addon-block
+  > .#{$dsicon}:first-child {
     margin-right: space(xs);
   }
 
-  >.#{$dsicon}:last-child {
+  > .#{$dsicon}:last-child {
     margin-left: space(xs);
   }
 
   // Phone
-  &--menu-type-phone{
+  &--menu-type-phone {
     padding: 0 space(s);
     cursor: pointer;
     .#{$menu-item-content} {
@@ -131,7 +131,7 @@ $addon: #{$prefix}-menu-item__addon;
       font-weight: 600;
       font-size: font-size(300);
     }
-    .#{$menu-item-phone}{
+    .#{$menu-item-phone} {
       margin: 0;
       padding: 0;
       color: color(brand-primary, 700);
@@ -142,10 +142,9 @@ $addon: #{$prefix}-menu-item__addon;
       .#{$menu-item-content} {
         color: color(neutral, 000);
       }
-      .#{$menu-item-phone}{
+      .#{$menu-item-phone} {
         color: color(neutral, 000);
       }
     }
   }
-
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Menu/MenuItems/SearchableGroup.scss

@@ -1,6 +1,6 @@
 $search-group: #{$prefix}-menu-search-group;
 
-.#{$search-group}{
+.#{$search-group} {
   &__search-wrapper {
     padding: 0 space(xs) space(xs);
   }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-datagrids/plugins/grouping-grid/GroupingPlugin.scss

@@ -1,14 +1,14 @@
 $dg-group-header: #{$data-grid}-group-row-header;
 
-.#{$dg-group-header}{
-    min-height: 24px;
-    background-color: color(brand-primary, 200);
-    display: flex;
-    align-items: center;
-    padding: 0 $data-grid-cell-horizontal-padding;
-    border-top: solid 1px color(brand-primary, 500);
-    &__title{
-        font-weight: font-weight(semibold);
-        font-size: 12px;
-    }
-}
+.#{$dg-group-header} {
+  min-height: 24px;
+  background-color: color(brand-primary, 200);
+  display: flex;
+  align-items: center;
+  padding: 0 $data-grid-cell-horizontal-padding;
+  border-top: solid 1px color(brand-primary, 500);
+  &__title {
+    font-weight: font-weight(semibold);
+    font-size: 12px;
+  }
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-picker/components/DSDatePickerImpl.scss

@@ -1,8 +1,8 @@
-@import "./DatePickerHeader/DatePickerHeader";
-@import "./DatePickerRange/DatePickerRange";
-@import "./DatePickerSingleDate/DatePickerSingleDate";
-@import "./DatePickerRangeHeader/DatePickerRangeHeader";
-@import "./SingleRangeDateSwitcher/SingleRangeDateSwitcher";
+@import './DatePickerHeader/DatePickerHeader';
+@import './DatePickerRange/DatePickerRange';
+@import './DatePickerSingleDate/DatePickerSingleDate';
+@import './DatePickerRangeHeader/DatePickerRangeHeader';
+@import './SingleRangeDateSwitcher/SingleRangeDateSwitcher';
 
 // ********************************************
 // container definition
@@ -147,7 +147,7 @@ $input-height: calc(#{space(m)} * 1.16666);
       }
     }
   }
-  
+
   .CalendarDay__selected:hover {
     color: color(neutral, 000);
     .#{$el-day-contents},
@@ -167,7 +167,7 @@ $input-height: calc(#{space(m)} * 1.16666);
       position: relative;
       &::after {
         // this renders the cross-line in disabled dys
-        content: "";
+        content: '';
         height: space(xxs) * 0.25;
         width: 48%;
         background: color(neutral, 500);

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-picker/components/DatePickerDay/DatePickerDay.scss

@@ -12,15 +12,13 @@
   border: $border-type transparent;
 }
 
-
 .CalendarDay__outside {
   .#{$el-day-contents} {
-    color: color(neutral, 200);  
+    color: color(neutral, 200);
   }
 }
 .CalendarDay__default:hover,
-.CalendarDay__default:focus{
-
+.CalendarDay__default:focus {
   .#{$el-day-contents},
   .#{$prefix}-datepicker-range__day-contents {
     background: color(neutral, 000);
@@ -29,12 +27,9 @@
   }
 }
 
-
-
-
-.without-selected-date .CalendarDay__today{
-  .#{$prefix}-datepicker-range__day-contents {    
+.without-selected-date .CalendarDay__today {
+  .#{$prefix}-datepicker-range__day-contents {
     border: $border-type color(neutral, 500);
     color: color(neutral, 800);
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-picker/components/DatePickerHeader/DatePickerHeader.scss

@@ -1,9 +1,9 @@
 $date-picker-header: #{$prefix}-date-picker-header;
 
-.#{$date-picker-header}{
+.#{$date-picker-header} {
   display: flex;
   justify-content: flex-start;
   width: 100%;
   padding: 10px;
   background: #fff;
-}
+}