@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/field/field.component.scss

@@ -0,0 +1,538 @@
+@use "../../theme/variables" as *;
+
+.mat-mdc-form-field {
+  &.keyboard-focused {
+    position: relative;
+    .mat-mdc-text-field-wrapper {
+      &:after {
+        content: '';
+        position: absolute;
+        top: -0;
+        border-radius: 10px;
+        left: -0;
+        width: 100%;
+        height: 100%;
+        outline: 2px solid $tgo-white;
+        z-index: -1;
+      }
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+      z-index: -1;
+    }
+  }
+
+  &.has-label {
+    .mdc-notched-outline__notch {
+      position: relative;
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: white;
+        width: 100%;
+        height: 5px;
+        z-index: -1;
+      }
+    }
+  }
+}
+
+.active-field {
+  .mdc-notched-outline__leading {
+    border-left-width: 2px;
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__notch {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+  }
+
+  .mdc-notched-outline__trailing {
+    border-top-width: 2px;
+    border-bottom-width: 2px;
+    border-right-width: 2px;
+  }
+}
+
+.ui-field {
+
+  display: block;
+  width: 320px;
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &[field-class="collapsed-search"] {
+    width: 56px !important;
+    display: block;
+
+    mat-form-field {
+      width: 56px !important;
+    }
+
+    .mat-mdc-floating-label {
+      display: none !important;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper {
+      position: relative;
+      width: 100vw !important;
+    }
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    margin: 0 !important;
+  }
+
+  &[field-class="search"] {
+    &[theme="classic"] {
+      .mat-mdc-form-field {
+        &:hover, {
+          &.mat-form-field-appearance-outline {
+            .mdc-notched-outline__notch {
+              border-top: 2px solid $tgo-petrol-default !important;
+            }
+          }
+        }
+
+        &.mat-form-field-appearance-outline {
+          &.mat-focused {
+            .mdc-notched-outline__notch {
+              border-top: 2px solid $tgo-petrol-default !important;
+            }
+          }
+
+          .mdc-notched-outline__notch {
+            border-top: 1px solid var(--mdc-outlined-text-field-outline-color) !important;
+          }
+        }
+      }
+    }
+
+    &[theme="dark"], &[theme="light"] {
+      .mat-mdc-form-field {
+        &.mat-form-field-appearance-outline {
+
+          .mat-mdc-text-field-wrapper {
+
+            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+              top: 28px !important;
+            }
+
+            &:hover {
+              .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+                top: 21px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  .mat-mdc-form-field {
+    margin-top: 0;
+    width: 100%;
+
+    &.hide-bottom-content {
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+
+    &.multi-line {
+      .mat-mdc-text-field-wrapper {
+        height: auto !important;
+      }
+
+      .mat-mdc-form-field-infix {
+        min-height: 48px !important;
+      }
+
+
+      textarea {
+        margin-top: 8px;
+        min-height: 32px !important;
+      }
+    }
+
+
+    &.textarea {
+      .mat-mdc-text-field-wrapper {
+        height: var(--textarea-height-container) !important;
+      }
+
+      textarea {
+        max-height: var(--textarea-height) !important;
+        min-height: var(--textarea-height) !important;
+      }
+    }
+
+
+    &.mat-form-field-appearance-outline {
+      &:not(.mat-warn) {
+        .mat-mdc-text-field-wrapper {
+
+          &:hover {
+            .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+              top: 21px !important;
+            }
+
+            @extend .active-field;
+
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $tgo-petrol-default !important;
+            }
+
+          }
+        }
+      }
+
+      &.mat-warn {
+        .mat-mdc-text-field-wrapper {
+          &:hover {
+            .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+              top: 21px !important;
+            }
+
+            @extend .active-field;
+
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $tgo-error-default !important;
+            }
+          }
+        }
+      }
+
+      .mat-mdc-text-field-wrapper {
+        height: 48px;
+
+        .mat-mdc-form-field-flex .mat-mdc-floating-label {
+          background: white!important;
+          top: 22px;
+        }
+      }
+
+      .mdc-notched-outline {
+        color: $tgo-dark;
+
+        .mdc-floating-label--float-above {
+          transform: translateY(-30px) scale(0.75);
+        }
+      }
+
+      .mat-mdc-form-field-infix {
+        min-height: 48px;
+        padding: 4px 0;
+        line-height: 22px;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .mat-mdc-form-field-subscript-wrapper {
+        padding: 0;
+        margin-top: 4px;
+        font-size: 12px;
+        line-height: 16px;
+        position: relative;
+        padding-bottom: 12px;
+
+        .mat-form-field-hint-spacer {
+          display: none;
+        }
+      }
+
+      .mat-mdc-form-field-hint.info {
+        color: $tgo-dark;
+        width: 100%;
+        text-align: right;
+      }
+
+      .mat-mdc-form-field-bottom-align::before {
+        height: 0;
+      }
+
+      .mat-mdc-form-field-hint-wrapper {
+        position: relative;
+        padding: 0;
+      }
+
+      .mat-mdc-form-field-hint.error,
+      .mat-mdc-form-field-hint.error svg {
+        color: $tgo-error-default;
+      }
+
+      .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix {
+        padding: 0;
+      }
+
+      .search-icon {
+        padding: 12px 8px 12px 16px;
+        color: $tgo-dark;
+      }
+
+      .mat-mdc-form-field-hint.error {
+        display: flex;
+      }
+    }
+
+    &.mat-warn {
+
+      &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,
+      &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,
+      &.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch {
+        border-color: $tgo-error-default;
+      }
+
+      &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,
+      &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,
+      &.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch {
+        border-color: $tgo-error-default;
+      }
+
+      &.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label {
+        mat-label {
+          color: $tgo-error-default;
+        }
+      }
+    }
+
+    &.mat-accent {
+
+      &.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover {
+        .mdc-notched-outline {
+          color: $tgo-petrol-default;
+        }
+
+        .options .options-container ui-button {
+          &.search svg,
+          &.password svg {
+            color: $tgo-petrol-default;
+          }
+        }
+      }
+
+      &.mat-focused {
+        .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label {
+          mat-label {
+            color: $tgo-petrol-default;
+          }
+        }
+
+        .options .options-container {
+          ui-button,
+          ui-icon {
+
+            svg {
+              color: $tgo-petrol-default;
+            }
+          }
+
+          ui-button.close svg {
+            color: $tgo-dark;
+          }
+
+        }
+      }
+    }
+
+    .options {
+      .options-container {
+        display: flex;
+        column-gap: 8px;
+        padding-left: 8px;
+
+        ui-button.password {
+          width: 24px !important;
+          .button-wrapper .button-container {
+            button, span {
+              width: 24px!important;
+              height: 24px!important;
+            }
+          }
+        }
+
+        ui-icon.valid {
+          mat-icon {
+            background: $success-50;
+            border-radius: 100%;
+
+            svg {
+              color: $tgo-white !important;
+            }
+          }
+        }
+
+        ui-button.validation {
+          svg {
+            circle {
+              stroke: $brand-50;
+            }
+          }
+
+          * {
+            color: $brand-50;
+          }
+        }
+
+        ui-button,
+        ui-icon {
+          display: flex;
+
+          svg {
+            color: $tgo-dark;
+          }
+        }
+      }
+
+      ui-button {
+
+        button.secondary.only-icon {
+          padding: 0;
+          height: auto;
+          background: transparent;
+
+          &:hover,
+          &:focus {
+            background: transparent;
+            color: inherit;
+            border: none;
+            outline: none;
+          }
+        }
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-mdc-input-element, .mdc-floating-label {
+        pointer-events: none;
+      }
+
+      &.mat-form-field-appearance-outline .mdc-notched-outline {
+        color: $tgo-medium;
+      }
+
+      .options .options-container {
+        ui-button,
+        ui-icon {
+
+          svg {
+            color: $tgo-medium;
+          }
+        }
+      }
+    }
+  }
+
+  &[theme="dark"], &[theme="light"] {
+
+    .mat-mdc-form-field {
+      &.mat-form-field-appearance-outline {
+
+        .mat-mdc-text-field-wrapper {
+          height: 48px;
+
+          &.mdc-text-field--disabled {
+            .mdc-notched-outline__notch {
+              label {
+                color: $grayscale-20 !important;
+              }
+            }
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $black !important;
+          }
+
+          .mdc-notched-outline__leading {
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+          }
+
+          .mdc-notched-outline__trailing {
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+          }
+
+          &:hover {
+            .mat-mdc-form-field-icon-prefix svg {
+              color: $black !important;
+            }
+
+            .password .icon-only-wrapper svg {
+              color: $black !important;
+            }
+
+            .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
+              top: 21px !important;
+            }
+          }
+
+          &:hover, &.mdc-text-field--focused {
+            .mat-mdc-form-field-icon-prefix svg {
+              color: $black !important;
+            }
+
+            @extend .active-field;
+
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $black !important;
+            }
+
+            .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+              color: $black !important;
+            }
+          }
+        }
+
+        &.mat-warn {
+          .mat-mdc-form-field-hint.error {
+            color: $error-50 !important;
+
+            svg {
+              color: $error-50 !important;
+            }
+          }
+
+          .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+            color: $error-50 !important;
+          }
+
+          .mat-mdc-text-field-wrapper {
+            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+              border-color: $error-50 !important;
+            }
+
+            &:hover, &.mdc-text-field--focused {
+              .mat-mdc-form-field-icon-prefix svg {
+                color: $error-50 !important;
+              }
+
+              @extend .active-field;
+
+              .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+                border-color: $error-50 !important;
+              }
+
+              .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above {
+                color: $error-50 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}