npm - @elliemae/ds-basic - Versions diffs - 3.50.1-next.9 → 3.51.0-next.1 - Mend

@@ -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;
     }
   }
 }

@@ -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;
   }
-}
+}

@@ -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;
       }
     }
   }
-}
+}

@@ -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;
     }
   }
-}
+}

@@ -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;
-}
+}

@@ -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;
+}

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

@@ -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,16 +152,15 @@ $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;
@@ -170,7 +169,7 @@ $primary200: color(brand-primary, 200);
     }
     &:after {
-      content: "";
+      content: '';
       border-top: $border-range;
       border-bottom: $border-range;
       @include target-ie {
@@ -217,7 +216,7 @@ $primary200: color(brand-primary, 200);
   .CalendarDay__hovered_span {
     background: $primary200;
     &:after {
-      content: "";
+      content: '';
       border-top: $border-range;
       border-bottom: $border-range;
       position: absolute;
@@ -231,7 +230,7 @@ $primary200: color(brand-primary, 200);
   .CalendarDay__hovered_span:hover {
     &:before {
-      content: "";
+      content: '';
       position: absolute;
       right: 0;
       top: 0;
@@ -287,13 +286,11 @@ $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);
   }
-}
+}

@@ -1,17 +1,16 @@
 $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;
@@ -23,11 +22,10 @@ $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);
-}
+}

@@ -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);
-}
+}

@@ -1,11 +1,10 @@
 $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';

@@ -1,6 +1,5 @@
 $wrapper: #{$prefix}-date-time-predefined-range-selector;
 // component overrides
 $wrapper-datepicker-sp: SingleDatePickerInput;
 $wrapper-input-group: #{$prefix}-input-addon-group;
@@ -9,7 +8,7 @@ $wrapper-datepicker-picker: #{$prefix}-datepicker__picker;
 $wrapper-datepicker-input: DateInput_input;
 $wrapper-select: #{$prefix}-selectbox__control;
-.#{$wrapper}{
+.#{$wrapper} {
   hr {
     margin: space(s) 0;
     border: solid border-size() * 0.5 color(neutral, 100);
@@ -19,16 +18,14 @@ $wrapper-select: #{$prefix}-selectbox__control;
   .#{$wrapper-datepicker},
   .#{$wrapper-datepicker-picker},
   .#{$wrapper-datepicker-input},
-  .#{$wrapper-select}{
+  .#{$wrapper-select} {
     height: $input-height;
   }
-  .#{$wrapper-datepicker-sp}{
+  .#{$wrapper-datepicker-sp} {
     flex: 1;
   }
-  .#{$wrapper-datepicker-input}{
+  .#{$wrapper-datepicker-input} {
     width: 100%;
   }
 }

@@ -1,10 +1,10 @@
-$wrapper:#{$prefix}-month-days-picker;
+$wrapper: #{$prefix}-month-days-picker;
-.#{$wrapper}{
+.#{$wrapper} {
   padding: space(s) 0;
   margin: space(xs) 0;
 }
-.#{$prefix}-month-days-picker__label{
+.#{$prefix}-month-days-picker__label {
   @include labelStyle();
-}
+}

@@ -1,4 +1,4 @@
-$wrapper:#{$prefix}-week-days-week-days-picker;
+$wrapper: #{$prefix}-week-days-week-days-picker;
 $radio-group: #{$prefix}-radio-group;
 $checkbox-group: #{$prefix}-checkbox-group;
 // elements
@@ -16,12 +16,12 @@ $cb-text: #{$cb-container}__label-text;
 $week-radio-size: space(l) * 1.2;
-.#{$wrapper}{
+.#{$wrapper} {
   padding-top: space(xs);
   padding-bottom: space(xxs);
   .#{$el-text},
-  .#{$cb-text}{
+  .#{$cb-text} {
     position: absolute;
     top: 0;
     left: 0;
@@ -32,7 +32,7 @@ $week-radio-size: space(l) * 1.2;
   }
   .#{$radio-group},
-  .#{$checkbox-group}{
+  .#{$checkbox-group} {
     flex: 1;
     height: $week-radio-size;
     display: flex;
@@ -40,19 +40,19 @@ $week-radio-size: space(l) * 1.2;
     justify-content: space-between;
     .#{$el-container},
-    .#{$cb-container}{
+    .#{$cb-container} {
       margin-right: space(xxs);
-      .#{$cb-text}{
-        margin:0;
+      .#{$cb-text} {
+        margin: 0;
       }
-      .#{$cb-button}{
-        &[aria-checked="true"]{
+      .#{$cb-button} {
+        &[aria-checked='true'] {
           color: color(neutral, 000);
           background-color: color(brand-primary, 600);
           border: $border-type color(brand-primary, 700);
           & + .#{$el-text},
-          & + .#{$cb-text}{
+          & + .#{$cb-text} {
             color: color(neutral, 000);
           }
         }
@@ -64,14 +64,14 @@ $week-radio-size: space(l) * 1.2;
       }
       .#{$el-input},
-      .#{$cb-input}{
+      .#{$cb-input} {
         &:checked + .#{$el-button},
         &:checked + .#{$cb-button} {
           color: color(neutral, 000);
           background-color: color(brand-primary, 600);
           border: $border-type color(brand-primary, 700);
           & + .#{$el-text},
-          & + .#{$cb-text}{
+          & + .#{$cb-text} {
             color: color(neutral, 000);
           }
         }
@@ -81,11 +81,10 @@ $week-radio-size: space(l) * 1.2;
         }
       }
     }
   }
   .#{$el-label},
-  .#{$cb-label}{
+  .#{$cb-label} {
     position: relative;
     width: $week-radio-size;
     height: $week-radio-size;
@@ -115,20 +114,18 @@ $week-radio-size: space(l) * 1.2;
       border: $border-type color(brand-primary, 600);
     }
-    &:focus{
+    &:focus {
       @include dsFocus();
     }
   }
 }
-.#{$prefix}-week-days-week-days-picker__label{
+.#{$prefix}-week-days-week-days-picker__label {
   @include labelStyle();
 }
 .#{$prefix}-form-element-radio__input,
-.#{$el-button}{
-  &:focus{
+.#{$el-button} {
+  &:focus {
     @include dsFocus();
   }
 }

@@ -1,33 +1,32 @@
 $wrapper: #{$prefix}-end-date-time-picker;
 $inputs: #{$prefix}-end-date-time-picker-inputs;
 $label: #{$wrapper}__label;
 $input-time-outline: #{$prefix}-labeled-outline;
-.#{$wrapper}{
+.#{$wrapper} {
   padding: space(s) 0;
   margin: space(xs) 0;
   // border-bottom: $border-row-separator;
-  .#{$input-group}{
+  .#{$input-group} {
     flex: 1;
-    & > div{
+    & > div {
       width: 50%;
-      .#{$input-time-outline}{
+      .#{$input-time-outline} {
         margin-top: 0;
       }
     }
   }
 }
-.#{$inputs}{
+.#{$inputs} {
   display: flex;
   flex-direction: row;
   margin-bottom: 300px;
 }
-.#{$label}{
+.#{$label} {
   @include labelStyle();
-}
+}

@@ -1,33 +1,33 @@
-.#{$prefix}-field-wrapper{
+.#{$prefix}-field-wrapper {
   display: flex;
   flex-direction: row;
-  .#{$prefix}-field-wrapper{
+  .#{$prefix}-field-wrapper {
     padding-right: space(xs);
     flex: 1;
   }
-  .#{$prefix}-field-wrapper:last-child{
+  .#{$prefix}-field-wrapper:last-child {
     padding-right: 0;
   }
 }
-.#{$prefix}-field-wrapper{
+.#{$prefix}-field-wrapper {
   .#{$prefix}-input,
   .#{$prefix}-selectbox-wrapper,
   .#{$prefix}-datepicker,
-  .#{$prefix}-time-picker .#{$prefix}-input-addon-wrapper{
+  .#{$prefix}-time-picker .#{$prefix}-input-addon-wrapper {
     width: 100%;
   }
-  .#{$prefix}-selectbox__control{
+  .#{$prefix}-selectbox__control {
     padding-right: 0;
   }
-  .#{$prefix}-input-addon-group *:not(:last-child){
+  .#{$prefix}-input-addon-group *:not(:last-child) {
     margin-right: 0;
   }
-  .#{$prefix}-input-addon-wrapper__addon .#{$prefix}-input-addon-wrapper__addon--default .#{$prefix}-input-addon-wrapper__addon--right{
-    &:before{
+  .#{$prefix}-input-addon-wrapper__addon
+    .#{$prefix}-input-addon-wrapper__addon--default
+    .#{$prefix}-input-addon-wrapper__addon--right {
+    &:before {
       display: none;
     }
   }
-}
+}

@@ -12,33 +12,31 @@ $dsinput: #{$prefix}-input;
   align-items: center;
   margin-bottom: space(s);
-   .#{$dsinput} {
-     width: 100%;
-   }
-   .#{$form-label} {
-     @include labelStyle();
-     text-align: right;
-     padding-right: space(m);
-     min-width: space(xxl) * 2;
-   }
-   .#{$form-field-group} {
-     flex: 1;
-     display: flex;
-     justify-content: space-between;
-     > div {
-       flex: 1;
-     }
-     .#{$form-field} {
-       flex: 1;
-       &:first-child {
-         margin-right: space(xs);
-       }
-     }
-   }
+  .#{$dsinput} {
+    width: 100%;
+  }
+  .#{$form-label} {
+    @include labelStyle();
+    text-align: right;
+    padding-right: space(m);
+    min-width: space(xxl) * 2;
+  }
+  .#{$form-field-group} {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    > div {
+      flex: 1;
+    }
+    .#{$form-field} {
+      flex: 1;
+      &:first-child {
+        margin-right: space(xs);
+      }
+    }
+  }
 }

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