@ngx-stoui/core 15.0.1 → 16.0.0

package/style/form/sto-form.scss

@@ -1,342 +1,348 @@
-@import "../theme/theme";
-@import "../theme/typography";
-
-@mixin sto-form-theme($theme, $variables) {
-  $color: map_get($variables, color);
-  $secondary-color: map_get($variables, secondary);
-  $disabled-color: map_get($variables, disabled);
-  $border-hover: map_get($variables, hover-bg-color);
-  $border: map_get($variables, border-color);
-  $selected-color: map_get($variables, selected-color);
-
-  .sto-form {
-    &__field {
-      .mat-form-field-wrapper .mat-form-field-underline {
-        background-color: $border;
-      }
-    }
-
-    &__field--disabled {
-      color: $disabled-color;
-
-      .mat-form-field-flex {
-        color: $disabled-color;
-      }
-
-      .mat-select.mat-select-disabled {
-        .mat-select-arrow {
-          color: $disabled-color;
-        }
-      }
-    }
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-form-theme($sto-theme, $variables);
-}
-
-$form-field-bg: var(--bg-light);
-$border-radius: 4px;
-$height: 72px;
-
-%sto-form__field {
-  width: 100%;
-  min-height: $height;
-  outline: none;
-
-  .mat-input-element {
-    cursor: pointer;
-    overflow: hidden;
-  }
-}
-
-%sto-card {
-  width: 100%;
-  padding: 16px 8px 0 8px;
-  margin-bottom: 8px;
-  border-radius: $border-radius;
-}
-
-
-%sto-form__field--focused {
-  .mat-form-field-underline {
-    //bottom: 16px;
-    height: 2px;
-    background-color: transparent;
-    -webkit-transition-property: background-color, width, left;
-    -webkit-transition-delay: 0.2s;
-    width: calc(100% - 2px);
-    left: 1px;
-
-    .mat-form-field-ripple {
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-      top: 0;
-
-    }
-  }
-}
-
-%sto-form__select {
-  .mat-select-arrow {
-    margin-top:-10px;
-  }
-}
-
-.mat-card.sto-card {
-  @extend %sto-card;
-
-
-  .mat-card-title.sto-card__title {
-    width: 100%;
-    padding-left: 8px;
-    display: flex;
-    justify-content: space-between;
-    h1, h2, h3 {
-      display: inline-block;
-      margin-bottom: 0;
-      white-space: nowrap;
-    }
-  }
-
-  .mat-card-subtitle.sto-card__subtitle {
-    padding-left: 8px;
-  }
-
-  .sto-card__button-row {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-
-    .mat-button {
-      margin-top: -8px;
-    }
-
-  }
-
-  .sto-card__content {
-    padding-left: 8px;
-  }
-
-}
-
-.sto-form {
-  &__field {
-    cursor: pointer;
-    @extend %sto-form__field;
-
-    &.mat-focused {
-      @extend %sto-form__field--focused;
-      &.sto-form__field--disabled{
-        .mat-form-field-underline{
-          .mat-form-field-ripple {
-            display:none;
-          }
-        }
-      }
-    }
-
-    &.sto-form__field--readonly{
-      cursor: default;
-    }
-    &.sto-form__field--disabled{
-      cursor: default;
-      .mat-input-element{
-        cursor: default;
-      }
-    }
-
-    .mat-form-field-flex {
-      padding: 6px;
-      border-radius: 4px;
-      background-color: $form-field-bg;
-      align-items: center;
-      .mat-icon-button {
-        .mat-icon, .mat-datepicker-toggle-default-icon {
-        }
-        .mat-datepicker-toggle-default-icon{
-          margin-top: -2px;
-        }
-      }
-
-
-    }
-
-    .mat-form-field-subscript-wrapper {
-      font-size: 11px;
-      margin: 6px;
-    }
-    .mat-form-field-wrapper {
-      margin: 0 2px;
-    }
-    .mat-form-field-flex .mat-form-field-infix {
-      padding: 6px 0 0 0;
-    }
-    .mat-form-field-suffix {
-
-      height: 18px;
-      > span {
-        display: inline-block;
-        margin-top: 0.8em;
-      }
-    }
-
-    .mat-form-field-invalid .mat-form-field-ripple {
-      height: 2px;
-    }
-
-    .mat-slide-toggle {
-      position: absolute;
-      top: 0;
-      right: 4px;
-    }
-
-    .mat-radio-button{
-      margin-right: 16px;
-      &:last-child{
-        margin-right: 0;
-      }
-    }
-
-    .mat-select {
-      @extend %sto-form__select;
-    }
-  }
-
-  .mat-form-field-wrapper .mat-form-field-underline {
-    //bottom: 16px;
-    height: 2px;
-    width: calc(100% - 2px);
-    left: 1px;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-
-    .mat-form-field-ripple {
-      height: 2px;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-      top: 0;
-    }
-  }
-
-  &__color {
-    position: absolute;
-    top: -8px;
-    right: 4px;
-    height: 30px;
-    width: 30px;
-    border: 0;
-    padding: 0;
-    background-color: transparent;
-  }
-
-
-}
-
-//Readonly
-.sto-form__field--readonly {
-
-  .mat-input-element {
-    cursor: default;
-  }
-
-  .mat-form-field-flex {
-    border: 1px solid var(--divider);
-    background-color: transparent;
-  }
-
-  :hover {
-    .mat-form-field-flex {
-      background-color: transparent;
-    }
-    .mat-form-field-underline{
-      background-color: transparent;
-    }
-  }
-
-  .mat-form-field-underline {
-    display: none;
-    visibility: hidden;
-  }
-  &.ng-invalid.ng-dirty {
-    .mat-form-field-subscript-wrapper {
-      margin-top: -1px;
-    }
-  }
-}
-
-.sto-form__field--disabled {
-
-  .mat-select.mat-select-disabled{
-    .mat-select-trigger{
-      user-select: all;
-    }
-  }
-
-  .mat-form-field-underline{
-    display: block;
-    visibility: hidden;
-  }
-
-  .mat-form-field-flex {
-    cursor: default;
-    border: 1px solid var(--divider);
-    background-color: transparent;
-  }
-}
-
-.sto-form__field.sto-form__field--without-placeholder{
-  height: 0;
-  min-height: 32px;
-  .mat-form-field-flex {
-    height: 30px;
-  }
-  .mat-form-field-infix {
-    border-top-width: 0;
-    padding: 0;
-
-  }
-  .mat-select{
-    .mat-select-arrow{
-      margin-top: 0px;
-    }
-  }
-
-  .mat-form-field-placeholder, .mat-form-field-label {
-    top: 0;
-  }
-  .mat-form-field-placeholder-wrapper, .mat-form-field-label-wrapper {
-    top: 0;
-    padding: 0;
-  }
-
-}
-
-.sto-form{
-  &__input{
-    &--color{
-      cursor: pointer;
-      margin-top: -5px;
-      padding: 0;
-      background-color: transparent;
-      border-color: transparent;
-      width: 28px;
-      height: 30px;
-
-      &::-webkit-color-swatch {
-        border-radius: 4px;
-      }
-    }
-  }
-}
-
-.sto-field--display {
-  border-width: 0;
-  border-style: none;
-}
-
-.mat-form-field .mat-form-field-underline {
-  height: 2px;
-}
+@import '../theme/theme';
+@import '../theme/typography';
+
+@mixin sto-form-theme($theme, $variables) {
+  $color: map_get($variables, color);
+  $secondary-color: map_get($variables, secondary);
+  $disabled-color: map_get($variables, disabled);
+  $border-hover: map_get($variables, hover-bg-color);
+  $border: map_get($variables, border-color);
+  $selected-color: map_get($variables, selected-color);
+
+  .sto-form {
+    &__field {
+      --mdc-filled-text-field-active-indicator-color: var(--divider);
+      --mdc-filled-text-field-hover-active-indicator-color: var(
+        --primary-resting
+      );
+      --mdc-filled-text-field-focus-active-indicator-color: var(
+        --primary-resting
+      );
+      --mdc-filled-text-field-label-text-color: #{$color};
+      --mdc-filled-text-field-focus-label-text-color: #{$color};
+      input {
+        color: var(--mdc-filled-text-field-label-text-color);
+      }
+    }
+
+    &__field--disabled {
+      color: $disabled-color;
+
+      .mat-mdc-form-field-flex {
+        color: $disabled-color;
+      }
+
+      .mat-select.mat-select-disabled {
+        .mat-select-arrow {
+          color: $disabled-color;
+        }
+      }
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-form-theme($sto-theme, $variables);
+}
+
+$form-field-bg: var(--bg-light);
+$border-radius: 4px;
+$height: 72px;
+
+%sto-form__field {
+  width: 100%;
+  min-height: $height;
+  outline: none;
+
+  .mat-input-element {
+    cursor: pointer;
+    overflow: hidden;
+  }
+}
+
+%sto-card {
+  width: 100%;
+  padding: 16px 8px 0 8px;
+  margin-bottom: 8px;
+  border-radius: $border-radius;
+}
+
+%sto-form__field--focused {
+  .mat-form-field-underline {
+    //bottom: 16px;
+    height: 2px;
+    background-color: transparent;
+    -webkit-transition-property: background-color, width, left;
+    -webkit-transition-delay: 0.2s;
+    width: calc(100% - 2px);
+    left: 1px;
+
+    .mat-form-field-ripple {
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      top: 0;
+    }
+  }
+}
+
+%sto-form__select {
+  .mat-select-arrow {
+    margin-top: -10px;
+  }
+}
+
+.mat-card.sto-card {
+  @extend %sto-card;
+
+  .mat-card-title.sto-card__title {
+    width: 100%;
+    padding-left: 8px;
+    display: flex;
+    justify-content: space-between;
+    h1,
+    h2,
+    h3 {
+      display: inline-block;
+      margin-bottom: 0;
+      white-space: nowrap;
+    }
+  }
+
+  .mat-card-subtitle.sto-card__subtitle {
+    padding-left: 8px;
+  }
+
+  .sto-card__button-row {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    .mat-button {
+      margin-top: -8px;
+    }
+  }
+
+  .sto-card__content {
+    padding-left: 8px;
+  }
+}
+
+.sto-form {
+  &__field {
+    cursor: pointer;
+    @extend %sto-form__field;
+    --mdc-filled-text-field-container-color: #{$form-field-bg};
+
+    &.mat-focused {
+      @extend %sto-form__field--focused;
+      &.sto-form__field--disabled {
+        .mat-form-field-underline {
+          .mat-form-field-ripple {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &.sto-form__field--readonly {
+      cursor: default;
+    }
+    &.sto-form__field--disabled {
+      cursor: default;
+      .mat-input-element {
+        cursor: default;
+      }
+    }
+
+    .mat-mdc-form-field-flex {
+      padding: 6px;
+      border-radius: 4px;
+      // background-color: $form-field-bg;
+      align-items: center;
+      .mat-mdc-floating-label {
+        top: 5px;
+      }
+      .mat-icon-button {
+        .mat-icon,
+        .mat-datepicker-toggle-default-icon {
+        }
+        .mat-datepicker-toggle-default-icon {
+          margin-top: -2px;
+        }
+      }
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+      font-size: 11px;
+      margin: 6px;
+    }
+    .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea),
+    .mat-mdc-form-field-flex {
+      .mat-mdc-form-field-infix {
+        padding: 6px 0 0 0;
+      }
+    }
+    .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+      min-height: auto;
+      border-top: 0.99975em solid transparent;
+    }
+    .mat-mdc-form-field-icon-suffix {
+      height: 18px;
+      color: var(--text);
+      display: flex;
+      .mat-mdc-icon-button {
+        --mdc-icon-button-state-layer-size: 23px;
+        padding: 2px;
+      }
+      > span {
+        display: inline-block;
+        margin-top: 0.8em;
+      }
+      > .mat-icon {
+        padding: 2px;
+      }
+    }
+    &:has(.mdc-floating-label) .mat-mdc-form-field-icon-suffix {
+      place-self: center;
+    }
+    .mat-mdc-select-arrow-wrapper {
+      height: 20px;
+    }
+
+    .mat-form-field-invalid .mat-form-field-ripple {
+      height: 2px;
+    }
+
+    .mat-mdc-slide-toggle {
+      position: absolute;
+      top: 0;
+      right: 4px;
+    }
+
+    .mat-radio-button {
+      margin-right: 16px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .mat-select {
+      @extend %sto-form__select;
+    }
+  }
+
+  &__color {
+    position: absolute;
+    top: -8px;
+    right: 4px;
+    height: 30px;
+    width: 30px;
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+}
+
+//Readonly
+.sto-form__field--readonly {
+  .mat-input-element {
+    cursor: default;
+  }
+
+  .mat-mdc-form-field-flex {
+    background-color: transparent;
+  }
+
+  :hover {
+    .mat-mdc-form-field-flex {
+      background-color: transparent;
+    }
+    .mat-form-field-underline {
+      background-color: transparent;
+    }
+  }
+
+  .mat-form-field-underline {
+    display: none;
+    visibility: hidden;
+  }
+  &.ng-invalid.ng-dirty {
+    .mat-mdc-form-field-subscript-wrapper {
+      margin-top: -1px;
+    }
+  }
+}
+
+.sto-form__field--disabled {
+  .mat-select.mat-select-disabled {
+    .mat-select-trigger {
+      user-select: all;
+    }
+  }
+
+  .mat-form-field-underline {
+    display: block;
+    visibility: hidden;
+  }
+
+  .mat-mdc-form-field-flex {
+    cursor: default;
+    border: 1px solid var(--divider);
+    background-color: transparent;
+  }
+}
+
+.sto-form__field.sto-form__field--without-placeholder {
+  height: 0;
+  min-height: 32px;
+  .mat-mdc-form-field-flex {
+    height: 30px;
+  }
+  .mat-mdc-form-field-infix {
+    border-top-width: 0;
+    padding: 0;
+  }
+  .mat-select {
+    .mat-select-arrow {
+      margin-top: 0px;
+    }
+  }
+
+  .mat-form-field-placeholder,
+  .mat-mdc-floating-label {
+    top: 0;
+  }
+  .mat-form-field-placeholder-wrapper,
+  .mat-mdc-floating-label-wrapper {
+    top: 0;
+    padding: 0;
+  }
+}
+
+.sto-form {
+  &__input {
+    &--color {
+      cursor: pointer;
+      margin-top: -5px;
+      padding: 0;
+      background-color: transparent;
+      border-color: transparent;
+      width: 28px;
+      height: 30px;
+
+      &::-webkit-color-swatch {
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+.sto-field--display {
+  border-width: 0;
+  border-style: none;
+}
+
+.mat-form-field .mat-form-field-underline {
+  height: 2px;
+}