npm - @elliemae/ds-basic - Versions diffs - 3.22.0-rc.1 → 3.22.0-rc.10 - Mend

@@ -1,5 +1,6 @@
 $wrapper: #{$prefix}-date-time-predefined-range-selector;
 // component overrides
 $wrapper-datepicker-sp: SingleDatePickerInput;
 $wrapper-input-group: #{$prefix}-input-addon-group;
@@ -8,7 +9,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);
@@ -18,14 +19,16 @@ $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,10 +1,10 @@
-$wrapper: #{$prefix}-year-days-picker;
+$wrapper:#{$prefix}-year-days-picker;
-.#{$wrapper} {
+.#{$wrapper}{
   padding: space(s) 0;
   margin: space(xs) 0;
 }
-.#{$prefix}-year-days-picker__label {
+.#{$prefix}-year-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,10 +81,11 @@ $week-radio-size: space(l) * 1.2;
         }
       }
     }
   }
   .#{$el-label},
-  .#{$cb-label} {
+  .#{$cb-label}{
     position: relative;
     width: $week-radio-size;
     height: $week-radio-size;
@@ -114,18 +115,20 @@ $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,32 +1,33 @@
 $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,31 +12,33 @@ $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);
+       }
+     }
+   }
 }

@@ -1,4 +1,4 @@
-.#{$prefix}-recurrence-selector-validation-message {
-  text-align: center;
-  padding: space(xs);
-}
+.#{$prefix}-recurrence-selector-validation-message{
+    text-align: center;
+    padding: space(xs);
+}

@@ -3,7 +3,7 @@
 $cmp-prefix: #{$prefix}-checkbox-group;
 $el-container: #{$prefix}-form-element-checkbox;
-.#{$cmp-prefix}-form-item-layout-wrapper {
+.#{$cmp-prefix}-form-item-layout-wrapper{
   display: inline-flex;
   .#{$cmp-prefix} {
     padding-top: space(xs);
@@ -38,9 +38,9 @@ $el-container: #{$prefix}-form-element-checkbox;
     }
   }
-  .#{$cmp-prefix}-form-item-layout-wrapper {
+  .#{$cmp-prefix}-form-item-layout-wrapper{
     .#{$cmp-prefix} {
       padding-top: toMobile(space(xs));
     }
   }
-}
+}

@@ -28,7 +28,7 @@ $inputs-group-divider: #{$inputs-group}__divider;
     @include placeholder {
       color: color(neutral, 500);
       font-style: italic;
-    }
+    }
     text-align: center;
     border: none;
     max-width: space(m) * 1.1;
@@ -36,13 +36,13 @@ $inputs-group-divider: #{$inputs-group}__divider;
     background: none;
     user-select: none;
-    &.input-year {
+    &.input-year{
       min-width: space(m) * 1.4;
       max-width: space(m) * 1.8;
     }
     &:focus {
-      background: color(brand-primary, 300);
+      background: color(brand-primary, 300)
     }
     &:active {

@@ -24,8 +24,7 @@ $btn-min-width-diff: space(m) * 1.3 - 0.3;
   width: $btn-min-width;
   @include border-radius($radius);
-  .#{$input-controller}:focus,
-  .#{$btn-controller}:focus {
+  .#{$input-controller}:focus, .#{$btn-controller}:focus {
     box-shadow: none;
   }
@@ -51,6 +50,7 @@ $btn-min-width-diff: space(m) * 1.3 - 0.3;
       position: absolute;
       right: 0;
     }
   }
   .#{$btn-controller} {
@@ -76,11 +76,11 @@ $btn-min-width-diff: space(m) * 1.3 - 0.3;
         &:focus-within {
           @include dsFocus();
         }
-        .expandable-input__input {
+        .expandable-input__input{
           &:focus,
           &:focus-within {
             @include dsClearFocus();
-          }
+          }
         }
       }
     }

@elliemae/ds-basic 3.22.0-rc.1 → 3.22.0-rc.10