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

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,8 +35,9 @@ $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;
@@ -47,7 +48,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;
   }
@@ -72,9 +73,8 @@ $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,8 +16,7 @@ $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 {
@@ -48,8 +47,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;
     }
@@ -79,17 +78,16 @@ $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 {
@@ -98,12 +96,14 @@ $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,9 +142,10 @@ $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,13 +12,15 @@
   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);
@@ -27,9 +29,12 @@
   }
 }
 
-.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;
-}
+}

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

@@ -2,7 +2,7 @@ $el-container: #{$prefix}-datepicker;
 
 .#{$el-container},
 .#{$picker-classname},
-.#{$day-picker-classname} {
+.#{$day-picker-classname}{
   .DayPickerNavigation {
     display: flex;
     justify-content: space-between;
@@ -15,12 +15,12 @@ $el-container: #{$prefix}-datepicker;
 
   .CalendarMonth_caption {
     padding-top: calc(#{space(xs)} * 1.25);
-    padding-bottom: calc(#{space(l)} * 1.187);
+    padding-bottom:  calc(#{space(l)} * 1.187);
     font-size: font-size(500);
     line-height: 1;
     strong {
       position: relative;
-      top: 1px;
+      top: 1px;      
     }
   }
 }

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

@@ -1,12 +1,12 @@
 $date-range: #{$prefix}-date-range;
 
-.#{$date-range} {
+.#{$date-range}{
   &__wrapper {
     display: flex;
     flex-direction: column;
     border: none;
     box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.24);
-
+    
     & > * > .DayPicker {
       box-shadow: none !important;
     }
@@ -15,4 +15,4 @@ $date-range: #{$prefix}-date-range;
   &__header {
     display: flex;
   }
-}
+}

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

@@ -1,7 +1,7 @@
 $date-range-picker: #{$prefix}-date-range-picker;
 $input-addon-group: #{$prefix}-input-addon-group;
 
-.#{$date-range-picker} {
+.#{$date-range-picker}{
   &__header {
     display: flex;
     justify-content: center;
@@ -13,7 +13,7 @@ $input-addon-group: #{$prefix}-input-addon-group;
     .#{$input-addon-group} {
       width: 100%;
     }
-    &--invalidDate {
+    &--invalidDate{
       .#{$input-addon-group} {
         .#{$prefix}-input {
           border: solid 1px color(danger, 900);
@@ -21,4 +21,4 @@ $input-addon-group: #{$prefix}-input-addon-group;
       }
     }
   }
-}
+}

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

@@ -1,6 +1,6 @@
 $single-date: #{$prefix}-single-date;
 
-.#{$single-date} {
+.#{$single-date}{
   &__wrapper {
     display: flex;
     flex-direction: column;
@@ -12,4 +12,4 @@ $single-date: #{$prefix}-single-date;
       box-shadow: none !important;
     }
   }
-}
+}

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

@@ -1,6 +1,6 @@
 $date-switcher: #{$prefix}-date-switcher;
 $date-header: #{$prefix}-date-picker-header;
-.#{$date-switcher} {
+.#{$date-switcher}{
   &__header {
     display: flex;
     justify-content: space-between;
@@ -12,10 +12,10 @@ $date-header: #{$prefix}-date-picker-header;
   &__header > .#{$date-header} {
     display: flex;
     justify-content: flex-end;
-  }
+  } 
 }
 
 .switch-header__checkbox {
   padding: 0px;
   margin-left: space(s) * 0.4;
-}
+}

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

@@ -35,12 +35,12 @@
 }
 
 .DayPicker_weekHeader {
-  padding: 0 !important;
+  padding: 0 !important;  
 }
 
 .DayPicker_weekHeader_ul {
   list-style: none;
   margin: 0;
   padding-left: 0;
-  padding-right: 0;
-}
+  padding-right: 0; 
+}

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

@@ -2,3 +2,4 @@ $date-range-selector-container: #{$prefix}-date-range-selector-wrap-day-picker;
 
 @import './components/DSDateRangePickerImpl';
 @import './components/DatePickerLabel/DatePickerLabel';
+

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

@@ -129,7 +129,7 @@ $primary200: color(brand-primary, 200);
 
   .CalendarDay__selected_span {
     &:after {
-      content: '';
+      content: "";
       border-top: $border-range;
       border-bottom: $border-range;
       @include target-ie {
@@ -152,15 +152,16 @@ $primary200: color(brand-primary, 200);
   .CalendarDay.CalendarDay__blocked_calendar:focus,
   .CalendarDay.CalendarDay__blocked_calendar:hover {
     .#{$el-day-contents} {
-      box-shadow: none;
+      box-shadow: none ;
       border: none;
     }
   }
 
+
   .CalendarDay__selected_start,
   .CalendarDay__selected_end {
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       background-color: color(neutral, 000);
       top: 0;
@@ -169,7 +170,7 @@ $primary200: color(brand-primary, 200);
     }
 
     &:after {
-      content: '';
+      content: "";
       border-top: $border-range;
       border-bottom: $border-range;
       @include target-ie {
@@ -216,7 +217,7 @@ $primary200: color(brand-primary, 200);
   .CalendarDay__hovered_span {
     background: $primary200;
     &:after {
-      content: '';
+      content: "";
       border-top: $border-range;
       border-bottom: $border-range;
       position: absolute;
@@ -230,7 +231,7 @@ $primary200: color(brand-primary, 200);
 
   .CalendarDay__hovered_span:hover {
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       right: 0;
       top: 0;
@@ -286,11 +287,13 @@ $primary200: color(brand-primary, 200);
   }
 }
 
-.#{$el-container}.#{$prefix}-datepicker--error {
-  .em-ds-form-item__feedback {
+
+
+.#{$el-container}.#{$prefix}-datepicker--error{
+  .em-ds-form-item__feedback{
     margin-right: -36px;
   }
-  .#{$prefix}-datepicker__picker {
+  .#{$prefix}-datepicker__picker{
     border: solid 1px color(danger, 900);
   }
-}
+}

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

@@ -1,16 +1,17 @@
 $el-label-from: #{$prefix}-datepicker__label-from;
 $el-label-to: #{$prefix}-datepicker__label-to;
 
+
 .#{$el-label-from},
-.#{$el-label-to} {
+.#{$el-label-to}{
   position: absolute;
   margin-top: 0;
   z-index: 1;
   color: color(neutral, 200);
   background: color(neutral, 000);
-  padding: 0px calc(#{space(xxs)} * 1.5);
+  padding: 0px calc(#{space(xxs)} * 1.5);  
   max-height: #{space(xxs)};
-
+  
   span {
     position: relative;
     display: block;
@@ -22,10 +23,11 @@ $el-label-to: #{$prefix}-datepicker__label-to;
   }
 }
 
-.#{$el-label-from} {
+
+.#{$el-label-from} {  
   margin-left: calc(#{space(xs)} * 1.125);
 }
 
-.#{$el-label-to} {
+.#{$el-label-to} {  
   margin-left: calc(#{space(xxl)} * 2.5);
-}
+}

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

@@ -1,10 +1,10 @@
 $date-range-picker: #{$prefix}-date-range-picker;
 
-.#{$date-range-picker} {
+.#{$date-range-picker}{
   &__header {
     display: flex;
     justify-content: center;
     width: 100%;
     padding: space(xs);
   }
-}
+}

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

@@ -16,15 +16,15 @@ $date-input: #{$date-time-picker}__date-input;
   flex-direction: row;
   margin-top: space(xs);
   box-shadow: depth(200);
-  background-color: color(neutral, 000);
+  background-color: color(neutral, 000); 
 
   .#{$time-picker-wrapper} {
-    background-color: color(neutral, 050);
+    background-color: color(neutral, 050);  
     display: flex;
-    flex-direction: column;
+    flex-direction: column;      
 
     .#{$time-picker} {
-      border: unset;
+      border: unset;    
       box-shadow: unset;
     }
   }
@@ -40,4 +40,4 @@ $date-input: #{$date-time-picker}__date-input;
 
 .#{$date-input} {
   padding-right: space(xs);
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/DSDateTimeRecurrenceSelector.scss

@@ -1,10 +1,11 @@
 $input-height: space(m) * 1.17; // TODO: define global input sizes
 
-@mixin labelStyle() {
+@mixin labelStyle(){
   line-height: $input-height;
-  color: color(neutral, 500);
+  color:color(neutral, 500);
+
 }
-$border-row-separator: dotted calc(#{space(xxs) * 0.5}) color(neutral, 080);
+$border-row-separator: dotted calc(#{space(xxs) * 0.5})  color(neutral, 080);
 
 @import './components/Forms/Forms';
 @import './components/DateTimeRecurrenceSelectorImpl';