@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

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

@@ -1,538 +0,0 @@
-@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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}