ecabs-components 1.1.80 → 1.1.82

package/src/assets/styles/scss/modules/_form.scss

@@ -1,312 +1,383 @@
-$form-input-icon-size: 18px;
-
-.form,
-form {
-  &-field {
-    margin-bottom: 1rem;
-    position: relative;
-    // #Label
-    @include e(label) {
-      @include fontSize($font-size-xs);
-
-      display: inline-block;
-      margin-bottom: 0.25rem;
-      color: var(--color-gray-500);
-      cursor: pointer;
-
-
-      .icon {
-        @include fontSize($font-size-base);
-
-        display: inline;
-        vertical-align: middle;
-        margin-left: calc-rem(6px);
-      }
-    }
-
-    // #Label Note
-    @include e(label-note) {
-      @include fontSize($font-size-md);
-
-      display: inline-block;
-      margin-bottom: 0.25rem;
-      color: var(--color-gray-400);
-      cursor: pointer;
-    }
-
-    // #Input
-    @include e(input) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8px 16px);
-      border-radius: $border-radius-medium;
-      border: 1px solid var(--color-gray-300);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      &:focus-visible {
-        outline: none;
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-300);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-
-      @include m(invalid) {
-        // invalid
-        border-color: var(--color-error);
-        color: var(--color-error);
-      }
-    }
-
-    // #Textarea
-    @include e(textarea) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(16px);
-      border-radius: $border-radius-medium;
-      border: 1px solid var(--color-gray-300);
-      color: var(--color-black);
-      line-height: $base-line-height;
-
-      &:focus {
-        border-color: var(--color-brand-dark);
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: flex;
-        position: relative;
-        line-height: 1;
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-100);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__input--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-    }
-
-    // #Range
-    @include e(range) {
-      @include fontSize($font-size-base);
-      display: block;
-      width: 100%;
-      padding: calc-rem(8px 16px);
-      color: var(--color-black);
-      line-height: $base-line-height;
-      border: none;
-
-      &:focus-visible {
-        outline: none;
-      }
-
-      @include m(wrapper) {
-        // wrapper
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        border-radius: calc-rem($border-radius-large);
-        border: 1px solid var(--color-gray-300);
-        align-items: center;
-        line-height: 1;
-        background-color: var(--color-white);
-
-        &:focus-within {
-          border-color: var(--color-brand-dark);
-        }
-      }
-
-      @include m(suffix) {
-        // suffix
-        position: absolute !important;
-        top: 50%;
-        right: calc-rem(16px);
-        color: var(--color-gray-100);
-        transform: translateY(-50%);
-
-        &,
-        i,
-        .mat-icon {
-          @include fontSize($form-input-icon-size);
-          width: calc-rem($form-input-icon-size);
-          height: calc-rem($form-input-icon-size);
-        }
-      }
-
-      @include m(prefix) {
-        // prefix
-        @extend .form-field__range--suffix;
-
-        right: unset;
-        left: calc-rem(16px);
-      }
-
-      @include m(disabled) {
-        // disabled
-        background-color: var(--color-gray-100);
-        opacity: .5;
-        pointer-events: none;
-      }
-
-      @include m(invalid) {
-        // invalid
-        border-color: var(--color-error) !important;
-        color: var(--color-error) !important;
-      }
-    }
-
-    // #Invalid
-    @include m(invalid) {
-      &,
-      .form-field__input,
-      .form-field__textarea,
-      .form-field__range {
-        color: var(--color-error);
-        border-color: var(--color-error);
-      }
-
-      &,
-      .form-field__range--wrapper {
-        border-color: var(--color-error);
-      }
-    }
-
-    // #Required
-    @include m(required) {
-      .form-field__label {
-        &:after {
-          @extend %required;
-        }
-      }
-    }
-
-    // #Validation
-    @include e(validation) {
-      @include fontSize($font-size-xs);
-
-      padding-top: 0.5rem;
-      color: var(--color-error);
-
-      @include m(item) {
-        padding-bottom: 0.6rem;
-
-        &:last-of-type {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    // #Subscript
-    @include e(subscript) {
-      @include m(wrapper) {
-        @extend %pseudos;
-
-        margin-top: 1.2rem;
-      }
-    }
-
-    .spinner {
-      position: absolute;
-      right: 0.25rem;
-      top: 1.85rem;
-    }
-
-    .hint {
-      font-size: 10px;
-      text-align: right;
-      margin-right: calc-rem(17px);
-      transform: translateY(-1rem);
-      margin-bottom: -1rem;
-    }
-  }
-
-  // ==========================================================================
-  // #OVERRIDES
-  // ==========================================================================
-  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-
-  .mat-mdc-form-field-infix {
-    border-top: 0;
-  }
-
-  .mat-mdc-form-field .mat-mdc-form-field-flex {
-    padding-top: 0;
-  }
-}
-
-.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
-  width: auto;
-}
-
-.mat-mdc-text-field-wrapper {
-  padding-bottom: 0;
-}
+$form-input-icon-size: 18px;
+
+.form,
+form {
+  &-field {
+    margin-bottom: 1rem;
+    position: relative;
+    // #Label
+    @include e(label) {
+      @include fontSize($font-size-xs);
+
+      display: inline-block;
+      margin-bottom: 0.25rem;
+      color: var(--color-gray-500);
+      cursor: pointer;
+
+
+      .icon {
+        @include fontSize($font-size-base);
+
+        display: inline;
+        vertical-align: middle;
+        margin-left: calc-rem(6px);
+      }
+    }
+
+    // #Label Note
+    @include e(label-note) {
+      @include fontSize($font-size-md);
+
+      display: inline-block;
+      margin-bottom: 0.25rem;
+      color: var(--color-gray-400);
+      cursor: pointer;
+    }
+
+    // #Input
+    @include e(input) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8px 16px);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-300);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+
+        @include m(fluid) {
+          width: fit-content;
+          max-width: 100%;
+          margin-left: auto; // pin the right edge, grow leftward
+          align-items: stretch;
+          overflow: hidden;
+          border: 1px solid var(--color-gray-300);
+          border-radius: $border-radius-medium;
+          background-color: var(--color-white, #fff);
+
+          &:focus-within {
+            border-color: var(--color-brand-dark);
+          }
+
+          .form-field__input {
+            width: auto;
+            min-width: 0;
+            flex: 0 0 auto;
+            box-sizing: border-box;
+            border: 0;
+            border-radius: 0;
+            padding-right: 0;
+            text-align: right;
+            background-color: transparent;
+
+            &:focus {
+              border-color: transparent;
+            }
+          }
+
+          .form-field__input--suffix {
+            position: static !important;
+            top: auto;
+            right: auto;
+            flex: 0 0 auto;
+            display: inline-flex;
+            align-items: center;
+            transform: none;
+            margin-left: calc-rem(4px); // gap between the value and the symbol
+            padding-right: calc-rem(16px);
+            white-space: nowrap;
+            pointer-events: none;
+
+            &,
+            i,
+            .mat-icon {
+              @include fontSize($font-size-base);
+
+              width: auto;
+              height: auto;
+            }
+          }
+        }
+      }
+
+      @include m(sizer) {
+        @include fontSize($font-size-base);
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 0;
+        padding: 0 0 0 calc-rem(16px);
+        border: 0;
+        box-sizing: border-box;
+        overflow: hidden;
+        visibility: hidden;
+        pointer-events: none;
+        white-space: pre;
+        line-height: $base-line-height;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-300);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error);
+        color: var(--color-error);
+      }
+    }
+
+    // #Textarea
+    @include e(textarea) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(16px);
+      border-radius: $border-radius-medium;
+      border: 1px solid var(--color-gray-300);
+      color: var(--color-black);
+      line-height: $base-line-height;
+
+      &:focus {
+        border-color: var(--color-brand-dark);
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: flex;
+        position: relative;
+        line-height: 1;
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__input--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    // #Range
+    @include e(range) {
+      @include fontSize($font-size-base);
+      display: block;
+      width: 100%;
+      padding: calc-rem(8px 16px);
+      color: var(--color-black);
+      line-height: $base-line-height;
+      border: none;
+
+      &:focus-visible {
+        outline: none;
+      }
+
+      @include m(wrapper) {
+        // wrapper
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        border-radius: calc-rem($border-radius-large);
+        border: 1px solid var(--color-gray-300);
+        align-items: center;
+        line-height: 1;
+        background-color: var(--color-white);
+
+        &:focus-within {
+          border-color: var(--color-brand-dark);
+        }
+      }
+
+      @include m(suffix) {
+        // suffix
+        position: absolute !important;
+        top: 50%;
+        right: calc-rem(16px);
+        color: var(--color-gray-100);
+        transform: translateY(-50%);
+
+        &,
+        i,
+        .mat-icon {
+          @include fontSize($form-input-icon-size);
+          width: calc-rem($form-input-icon-size);
+          height: calc-rem($form-input-icon-size);
+        }
+      }
+
+      @include m(prefix) {
+        // prefix
+        @extend .form-field__range--suffix;
+
+        right: unset;
+        left: calc-rem(16px);
+      }
+
+      @include m(disabled) {
+        // disabled
+        background-color: var(--color-gray-100);
+        opacity: .5;
+        pointer-events: none;
+      }
+
+      @include m(invalid) {
+        // invalid
+        border-color: var(--color-error) !important;
+        color: var(--color-error) !important;
+      }
+    }
+
+    // #Invalid
+    @include m(invalid) {
+      &,
+      .form-field__input,
+      .form-field__textarea,
+      .form-field__range {
+        color: var(--color-error);
+        border-color: var(--color-error);
+      }
+
+      &,
+      .form-field__range--wrapper {
+        border-color: var(--color-error);
+      }
+    }
+
+    // #Required
+    @include m(required) {
+      .form-field__label {
+        &:after {
+          @extend %required;
+        }
+      }
+    }
+
+    // #Validation
+    @include e(validation) {
+      @include fontSize($font-size-xs);
+
+      padding-top: 0.5rem;
+      color: var(--color-error);
+
+      @include m(item) {
+        padding-bottom: 0.6rem;
+
+        &:last-of-type {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    // #Subscript
+    @include e(subscript) {
+      @include m(wrapper) {
+        @extend %pseudos;
+
+        margin-top: 1.2rem;
+      }
+    }
+
+    .spinner {
+      position: absolute;
+      right: 0.25rem;
+      top: 1.85rem;
+    }
+
+    .hint {
+      font-size: 10px;
+      text-align: right;
+      margin-right: calc-rem(17px);
+      transform: translateY(-1rem);
+      margin-bottom: -1rem;
+    }
+  }
+
+  // ==========================================================================
+  // #OVERRIDES
+  // ==========================================================================
+  .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex {
+    padding-top: 0;
+  }
+
+  .mat-mdc-form-field-infix {
+    border-top: 0;
+  }
+
+  .mat-mdc-form-field .mat-mdc-form-field-flex {
+    padding-top: 0;
+  }
+}
+
+.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.mat-mdc-text-field-wrapper {
+  padding-bottom: 0;
+}