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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/FloatingLabelInput/DSFloatingLabelInput.scss

@@ -9,8 +9,8 @@ $required-mark: #{$prefix}-form-required-mark;
 // ********************************************
 // input controllers definition
 $input-group: #{$prefix}-input-addon-group;
-$input-controller: #{$prefix}-input;
-$button-controller: #{$prefix}-button;
+$input-controller:  #{$prefix}-input;
+$button-controller:  #{$prefix}-button;
 $textarea-wrapper: #{$prefix}-form-element-textarea-wrapper;
 $datepicker-wrapper: #{$prefix}-datepicker;
 
@@ -28,36 +28,29 @@ $el-outline-idle: #{$el-container}__idle;
 $el-label: #{$el-container}__label;
 
 @mixin opened_outline {
-  .#{$el-outline} {
-    opacity: 1;
-  }
-  .#{$el-outline-idle} {
-    opacity: 0;
-  }
-  .#{$el-label} {
-    transform: translateY(#{space(s) * -1}) translateX(0px) scale($label-scale);
-  }
+  .#{$el-outline} { opacity: 1 }
+  .#{$el-outline-idle} { opacity: 0 }
+  .#{$el-label} { transform: translateY(#{space(s) * -1}) translateX(0px) scale($label-scale); }
   .floating-label-input-controller {
     opacity: 1;
     z-index: 3;
     &:not(.#{$input-group}) {
       opacity: 1;
     }
-    &.#{$input-group} > *:not(.#{$input-group}__addon) {
+    &.#{$input-group} > *:not(.#{$input-group}__addon){
       opacity: 1;
     }
     .#{$input-controller} {
       background: transparent;
     }
 
-    &.#{$datepicker-wrapper} {
+    &.#{$datepicker-wrapper}{
       .#{$input-controller} {
-        border: none;
+        border:none;
       }
-      .#{$button-controller},
-      .#{$button-controller}:hover {
+      .#{$button-controller}, .#{$button-controller}:hover{
         background: none;
-        border: none;
+        border:none;
         position: relative;
         &:before {
           content: '';
@@ -75,6 +68,7 @@ $el-label: #{$el-container}__label;
   }
 }
 
+
 .#{$el-container} {
   position: relative;
   color: color(neutral, 500);
@@ -86,29 +80,27 @@ $el-label: #{$el-container}__label;
   &:focus-within,
   &:hover {
     @include opened_outline;
-    .#{$el-outline} svg,
-    svg:not([fill]) {
+    .#{$el-outline} svg, svg:not([fill]) {
       .#{$el-outline}__path {
         stroke: color(brand-primary, 600);
       }
     }
   }
 
-  .input-date-input > .em-ds-input {
+  .input-date-input > .em-ds-input{
     box-shadow: none;
     border: none;
   }
 
-  .#{$textarea-wrapper} {
+  .#{$textarea-wrapper}{
     padding-top: space(xxs);
   }
-  .#{$input-group} {
+  .#{$input-group}{
     width: 100%;
   }
 
   &:focus-within {
-    .#{$el-outline} svg,
-    svg:not([fill]) {
+    .#{$el-outline} svg, svg:not([fill]) {
       filter: drop-shadow(0px 0px 2px color(brand-primary, 600));
 
       .#{$el-outline}__path {
@@ -125,12 +117,12 @@ $el-label: #{$el-container}__label;
     transition: duration(base) easing(base);
 
     &:not(.#{$input-group}),
-    &.#{$input-group} > *:not(.#{$input-group}__addon) {
+    &.#{$input-group} > *:not(.#{$input-group}__addon)
+    {
       opacity: 0;
     }
 
-    > input,
-    textarea {
+    > input, textarea {
       background: transparent;
     }
 
@@ -146,15 +138,14 @@ $el-label: #{$el-container}__label;
       border: none;
     }
 
-    &:focus-within,
-    * {
+    &:focus-within, * {
       box-shadow: none;
     }
   }
 
   &--has-value {
     @include opened_outline;
-    .#{$required-mark} {
+    .#{$required-mark}{
       bottom: space(xxs);
     }
   }
@@ -169,8 +160,7 @@ $el-label: #{$el-container}__label;
   opacity: 0;
   transition: opacity duration(fast) easing(base), border-color duration(fast) easing(base);
   background-color: color(neutral, 000);
-  svg,
-  svg:not([fill]) {
+  svg, svg:not([fill]) {
     width: 100%;
     height: 100%;
   }
@@ -189,6 +179,7 @@ $el-label: #{$el-container}__label;
   border: $border-type color(neutral, 200);
 }
 
+
 .#{$el-outline}__path {
   stroke-width: 1px;
   transition: stroke duration(fast) easing(base), stroke-width duration(fast) easing(base);
@@ -215,7 +206,7 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(neutral, 100);
   }
-  .#{$el-label} {
+  .#{$el-label}{
     color: color(neutral, 500);
   }
 }
@@ -231,7 +222,7 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(neutral, 100);
   }
-  .#{$el-label} {
+  .#{$el-label}{
     color: color(neutral, 500);
   }
 }
@@ -239,7 +230,7 @@ $el-label: #{$el-container}__label;
 .#{$el-container}--error {
   input {
     &:focus {
-      ~ .#{$el-outline} svg {
+      ~ .#{$el-outline} svg{
         filter: drop-shadow(0px 0px 2px color(danger, 900));
       }
     }
@@ -250,4 +241,4 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(danger, 900);
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/FormItem/Error/DSError.scss

@@ -2,4 +2,4 @@
 .#{$prefix}-error {
   padding: space(xs) 0;
   color: darken($color: red, $amount: 10%);
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/FormItem/Label/DSLabel.scss

@@ -1,5 +1,5 @@
 .#{$prefix}-label {
-  padding: 0;
+  padding:0;
   display: inline-flex;
   max-width: 100%;
 }
@@ -19,5 +19,5 @@ legend.#{$prefix}-label--group {
       font-size: toMobile(font-size(600));
       font-weight: font-weight(semibold);
     }
-  }
-}
+  } 
+}

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

@@ -1 +1 @@
-@import '../../../ds-common/src/Input/InputAddonWrapper.scss';
+@import '../../../ds-common/src/Input/InputAddonWrapper.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/InputGroup/DSInputGroup.scss

@@ -5,20 +5,20 @@ $input-addon-group: #{$prefix}-input-addon-group;
 // ********************************************
 // input control types
 $input-control: #{$prefix}-input;
-$input-combox: #{$prefix}-selectbox-wrapper;
+$input-combox:  #{$prefix}-selectbox-wrapper;
 $floating-label-input: #{$prefix}-labeled-outline;
 $button-control: #{$prefix}-button;
 $icon-button-control: #{$prefix}-icon-button;
 $combobox-control: #{$prefix}-selectbox__control;
 $form-item: #{$prefix}-form-item;
 
-$component-selectors: '
+$component-selectors:"
   .#{$floating-label-input}__idle,
   .#{$input-control},
   .#{$button-control},
   .#{$icon-button-control},
   .#{$combobox-control},
-';
+";
 
 .#{$input-addon-group} {
   display: flex;
@@ -37,7 +37,7 @@ $component-selectors: '
       margin-right: -1px;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      #{$component-selectors} {
+      #{$component-selectors}{
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
@@ -46,7 +46,7 @@ $component-selectors: '
     &:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      #{$component-selectors} {
+      #{$component-selectors}{
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/InputMask/DSInputMask.scss

@@ -36,7 +36,7 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 
   // FOCUS TO BE DEFINED
   &:focus-within {
-    @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500), 0.7));
+    @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500),0.7));
   }
 
   &:focus-within,
@@ -110,11 +110,11 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 // ********************************************
 // Error container & elements             *****
 .#{$input-error} {
-  border-color: color(danger, 900);
+  border-color:color(danger, 900);
   &:focus,
   &:hover,
   &:active {
-    border-color: color(danger, 900);
+    border-color:color(danger, 900);
   }
 
   .#{$el-input} {
@@ -130,4 +130,4 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   .#{$el-input} {
     color: color(neutral, 500);
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/LargeInputText/DSLargeInputText.scss

@@ -19,7 +19,7 @@ $border-type: solid 1px;
 $radius: $theme-base-border-radius;
 $min-height: space(m) * 1.17;
 
-.#{$el-wrapper} {
+.#{$el-wrapper}{
   width: 100%;
   display: flex;
 }
@@ -39,10 +39,10 @@ $min-height: space(m) * 1.17;
   &:focus-within {
     padding: 0;
   }
-  &:hover {
+  &:hover{
     @include dsFakeActive();
   }
-  &--error {
+  &--error{
     box-shadow: inset 0 0 0 1px color(danger, 900);
   }
 }
@@ -59,6 +59,8 @@ $min-height: space(m) * 1.17;
     @include dsFocus();
   }
 
+
+
   &:active {
     color: color(neutral, 800);
   }
@@ -90,11 +92,11 @@ $min-height: space(m) * 1.17;
 // ********************************************
 // Error container & elements             *****
 .#{$input-error} {
-  border-color: color(danger, 900);
+  border-color:color(danger, 900);
   &:focus,
   &:hover,
   &:active {
-    border-color: color(danger, 900);
+    border-color:color(danger, 900);
   }
 
   .#{$el-input} {
@@ -112,13 +114,13 @@ $min-height: space(m) * 1.17;
   }
 }
 
-.#{$el-counter} {
+.#{$el-counter}{
   text-align: right;
   padding: space(xxs);
   span {
     margin: 0 space(xxs) * 0.3;
   }
-  &--limit-error {
+  &--limit-error{
     color: color(danger, 900);
   }
 }
@@ -130,4 +132,4 @@ $min-height: space(m) * 1.17;
     font-weight: 400;
     min-height: toMobile(space(xxl));
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/Radio/DSRadio.scss

@@ -91,7 +91,7 @@ $border-type-focus-mobile: solid 3px;
       }
 
       &:active {
-        background-color: color(neutral, 000);
+          background-color: color(neutral, 000);
         circle.unchecked {
           fill: color(neutral, 000);
         }
@@ -123,7 +123,7 @@ $border-type-focus-mobile: solid 3px;
     }
     &:active {
       .#{$el-button} {
-        border-color: color(danger, 900);
+        border-color: color(danger, 900);;
       }
       circle.unchecked {
         fill: color(neutral, 080);
@@ -196,7 +196,7 @@ $border-type-focus-mobile: solid 3px;
   .#{$el-label} {
     &:hover {
       .#{$el-button} {
-        border-color: color(neutral, 400);
+        border-color:  color(neutral, 400);
       }
     }
   }
@@ -228,7 +228,7 @@ $border-type-focus-mobile: solid 3px;
       }
     }
   }
-
+  
   .#{$el-button} {
     width: calc(#{space(s)} * 1.22);
     min-width: calc(#{space(s)} * 1.22);
@@ -238,8 +238,7 @@ $border-type-focus-mobile: solid 3px;
   }
 
   .#{$el-container-error} {
-    .#{$el-label} {
-      // added this specificity so it correctly overwrites the error state
+    .#{$el-label} { // added this specificity so it correctly overwrites the error state
       .#{$el-button} {
         border: $border-type-mobile color(danger, 900);
       }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/RadioGroup/DSRadioGroup.scss

@@ -1,7 +1,8 @@
 $cmp-prefix: #{$prefix}-radio-group;
 $el-container: #{$prefix}-form-element-radio;
 
-.#{$cmp-prefix}-form-item-layout-wrapper {
+
+.#{$cmp-prefix}-form-item-layout-wrapper{
   display: inline-flex;
   .#{$cmp-prefix} {
     padding-top: space(xs);
@@ -24,7 +25,7 @@ $el-container: #{$prefix}-form-element-radio;
 }
 
 @include md {
-  .#{$cmp-prefix}-form-item-layout-wrapper {
+  .#{$cmp-prefix}-form-item-layout-wrapper{
     .#{$cmp-prefix} {
       padding-top: calc(#{space(xxs)} * 0.81);
     }
@@ -41,4 +42,4 @@ $el-container: #{$prefix}-form-element-radio;
       }
     }
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-form/RequiredMark/RequiredMark.scss

@@ -16,4 +16,4 @@ $el: #{$prefix}-form-required-mark;
 // PUI-5311 legend tag doesn't support flex on FF & safari
 legend.#{$prefix}-label--group .#{$el} {
   bottom: 6px;
-}
+}