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

Files changed (497) hide show

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

@@ -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,29 +28,36 @@ $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: '';
@@ -68,7 +75,6 @@ $el-label: #{$el-container}__label;
   }
 }
 .#{$el-container} {
   position: relative;
   color: color(neutral, 500);
@@ -80,27 +86,29 @@ $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 {
@@ -117,12 +125,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;
     }
@@ -138,14 +146,15 @@ $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);
     }
   }
@@ -160,7 +169,8 @@ $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%;
   }
@@ -179,7 +189,6 @@ $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);
@@ -206,7 +215,7 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(neutral, 100);
   }
-  .#{$el-label}{
+  .#{$el-label} {
     color: color(neutral, 500);
   }
 }
@@ -222,7 +231,7 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(neutral, 100);
   }
-  .#{$el-label}{
+  .#{$el-label} {
     color: color(neutral, 500);
   }
 }
@@ -230,7 +239,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));
       }
     }
@@ -241,4 +250,4 @@ $el-label: #{$el-container}__label;
   .#{$el-outline-idle} {
     border-color: color(danger, 900);
   }
-}
+}

@@ -1,47 +1,46 @@
 $wrapper: #{$prefix}-start-date-time-picker;
 $inputs: #{$prefix}-start-date-time-picker-inputs;
 $label: #{$wrapper}__label;
 $input-time-outline: #{$prefix}-labeled-outline;
-$icon-btn:  #{$prefix}-icon-button;
+$icon-btn: #{$prefix}-icon-button;
-.#{$wrapper}{
+.#{$wrapper} {
   padding: space(s) 0;
   margin: space(xs) 0;
   // border-top: $border-row-separator;
   // border-bottom: $border-row-separator;
-  .#{$input-group}{
+  .#{$input-group} {
     flex: 1;
-    & > div{
+    & > div {
       width: 50%;
-      .#{$input-time-outline}{
+      .#{$input-time-outline} {
         margin-top: 0;
       }
     }
-    .#{$icon-btn}{
+    .#{$icon-btn} {
       outline: none;
     }
   }
 }
-.#{$label}{
+.#{$label} {
   @include labelStyle();
 }
-.#{$prefix}-datepicker-range-inputs{
+.#{$prefix}-datepicker-range-inputs {
   display: flex;
-  .SingleDatePicker{
+  .SingleDatePicker {
     flex: 1;
     .SingleDatePickerInput,
-    .DateInput{
+    .DateInput {
       width: 100%;
     }
   }
 }
-.#{$prefix}-modal.datetime-alert-modal{
+.#{$prefix}-modal.datetime-alert-modal {
   z-index: 112;
 }

@@ -2,18 +2,17 @@ $wrapper: #{$prefix}-timezone-picker-input-range-selector;
 $label: #{$wrapper}__label;
 $input-group: #{$prefix}-input-addon-group;
-.#{$wrapper}{
+.#{$wrapper} {
   padding: 0 0 space(s) 0;
   margin: 0 0 space(xs) 0;
-  .#{$input-group}{
+  .#{$input-group} {
     flex: 1;
-    & > div{
+    & > div {
       width: 50%;
     }
   }
 }
-.#{$label}{
+.#{$label} {
   @include labelStyle();
 }

@@ -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,7 +24,8 @@ $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;
   }
@@ -50,7 +51,6 @@ $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();
-          }
+          }
         }
       }
     }

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

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

	@@ -1 +1 @@
1	- @import '../../../ds-common/src/Input/InputAddonWrapper.scss';
1	+ @import '../../../ds-common/src/Input/InputAddonWrapper.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;
       }

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

@@ -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,8 +59,6 @@ $min-height: space(m) * 1.17;
     @include dsFocus();
   }
   &:active {
     color: color(neutral, 800);
   }
@@ -92,11 +90,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} {
@@ -114,13 +112,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);
   }
 }
@@ -132,4 +130,4 @@ $min-height: space(m) * 1.17;
     font-weight: 400;
     min-height: toMobile(space(xxl));
   }
-}
+}

@@ -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,7 +238,8 @@ $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);
       }

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

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