Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
2.2 kB
6
Indexable
Never
// CUSTOM APPEARANCE FORM FIELD
.mat-mdc-form-field {
  @include mat.all-component-densities(-3);
  .mdc-text-field--filled {
    padding: 0;

    &:not(.mdc-text-field--disabled) {
      background-color: transparent;
    }
  }

  .mdc-text-field--focused {
    background-color: transparent;
  }

  > div {
    .mat-mdc-form-field-focus-overlay {
      background-color: transparent;
    }
  }

  .mat-mdc-form-field-infix {
    padding-bottom: 0 !important;
    min-height: 40px !important;
  }

  .mdc-text-field__input {
    margin-top: 5px !important;
    font-size: 14px !important;
  }

  .mat-mdc-select-value {
    margin-top: 6px;
  }

  .mat-mdc-select-arrow {
    margin-top: 16px;
  }

  .mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper {
    padding: 0;
  }

  .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
    display: inline;
  }

  .mat-mdc-form-field-icon-suffix > .mat-icon {
    padding: 5px;
    box-sizing: content-box;
    transform: scale(.8);
    color: #7a7676;
  }


  // CUSTOM APPEARANCE INPUT COLOR

  .mdc-text-field--disabled.mdc-text-field--filled {
    background-color: #fafafa;
  }

  // MAT LABEL
  .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: $primary-color-sec;
  }

  .mdc-floating-label {
    color: $primary-color-sec !important;
    font-size: 13px !important;
  }

  .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-error, #f44336) !important;
  }

  .mdc-text-field--disabled .mdc-floating-label {
    color: rgba(0, 0, 0, 0.38) !important;
  }

  // LINE RIPPLE
  .mdc-text-field--filled .mdc-line-ripple::after {
    border-bottom-color: $primary-color-sec;
  }

  .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
    border-bottom-color: red;
  }

  // MARKER REQUIRED ICON
  .mat-mdc-form-field-required-marker {
    //color: red;
  }

  //INPUT ICON
  .mat-mdc-icon-button svg {
    color: $secondary-color;
    transform: scale(.8);
    margin-top: 5px;
  }

}