com.phloxui/styles/lib/theme/material/component/dataview/input/MaterialComponentDropdownList.less

PhloxUI Ng2+ Framework

material-component-dropdown-list {
    display: inline-block;

    .material-component-dropdown-list {
        position: relative;
        width: @DEFAULT_MATERIAL_DROPDOWN_WIDTH;

        .mat-form-field.mat-focused .mat-select-arrow {
          color: extract(@CLR_0, 1);
        }

        .readonly-panel {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .description,
        .validation {
            width: 100%;
            padding-top: @MATERIAL_DROPDOWN_DESC_PADDING;
        }

        .help {
            width: 100%;
            padding-top: @MATERIAL_DROPDOWN_HELP_PADDING;
        }

        .mat-form-field {
            width: 100%;
        }

        .mat-form-field-appearance-legacy {
            .mat-form-field-wrapper {
                padding-bottom: unset;
            }

            .mat-form-field-underline {
                bottom: 0;
            }

            .mat-form-field-subscript-wrapper {
                margin-top: unset;
                top: unset;
            }
        }

        .mat-form-field.mat-focused .mat-form-field-ripple {
            background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
        }

        .mat-button-wrapper .mat-icon {
            color: @MATERIAL_DROPDOWN_LABEL_COLOR;
        }

        .mat-form-field-label-wrapper {
            > .mat-form-field-label {
                color: @MATERIAL_DROPDOWN_LABEL_COLOR;
            }
        }

        &.readonly {
            .dropdown-container {
                border-style: dotted;
                    background: #fff;
            > .dropdown {
                    cursor: default;
                    border-style: dotted;
                    background-color: @MATERIAL_DISABLED_BG_COLOR;
                }
            }
        }

        &.dirty {
            .label {
                font-style: italic;
            }
        }
    }

    .material-component-dropdown-list.label-center, .material-component-dropdown-list.label-left, .material-component-dropdown-list.label-right {
      .mat-form-field-label-wrapper .mat-form-field-label {
        text-align: left;
      }
    }

    .material-component-dropdown-list.label-center {
      .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
        text-align: center;
      }
    }

    .material-component-dropdown-list.label-left {
      .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
        text-align: left;
      }
    }

    .material-component-dropdown-list.label-right {
      .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
        text-align: right;
      }
    }

    &.normal {
      .label {
        color: @MATERIAL_DROPDOWN_LABEL_COLOR;
      }

      .mat-form-field.mat-focused .mat-form-field-ripple {
        background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
      }

    //   .mat-form-field-appearance-legacy .mat-form-field-underline {
    //     background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    //   }

      .mat-button-wrapper .mat-icon {
        color: @MATERIAL_DROPDOWN_LABEL_COLOR;
      }

      .mat-form-field-label-wrapper {
        > .mat-form-field-label {
          color: @MATERIAL_DROPDOWN_LABEL_COLOR;
        }
      }
    }

    &.warning {
        .mat-form-field-appearance-legacy .mat-form-field-label {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }

        .mat-form-field.mat-focused .mat-form-field-ripple {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }

        .mat-form-field-appearance-legacy .mat-form-field-underline {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }

        .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }

        .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }
    }

    &.error {
        .mat-form-field-appearance-legacy .mat-form-field-label {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }

        .mat-form-field.mat-focused .mat-form-field-ripple {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }

        .mat-form-field-appearance-legacy .mat-form-field-underline {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }

        .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }

        .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }
    }

    &.success {

        .mat-form-field-appearance-legacy .mat-form-field-label {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }

        .mat-form-field.mat-focused .mat-form-field-ripple {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }

        .mat-form-field-appearance-legacy .mat-form-field-underline {
            background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }

        .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }

        .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
            color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }
    }

    &.disabled {
        .mat-form-field-appearance-legacy .mat-form-field-label {
            color: @MATERIAL_DISABLED_FONT;
        }

        .mat-form-field.mat-focused .mat-form-field-ripple {
            background-color: @MATERIAL_DISABLED_FONT;
        }

        .mat-form-field-appearance-legacy .mat-form-field-underline {
            background-color: @MATERIAL_DISABLED_FONT;
        }

        .mat-select-arrow {
            color: @MATERIAL_DISABLED_FONT;
        }

        .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
            color: @MATERIAL_DISABLED_FONT;
        }

        mat-option {
            border-style: dotted;
            cursor: default;
            background-color: @MATERIAL_DISABLED_BG_COLOR;
        }
    }
}

.cdk-overlay-container {
    .mat-option-multiple {
        mat-pseudo-checkbox.mat-pseudo-checkbox-checked, mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
            background: @CLR_BRAND;
        }
        mat-pseudo-checkbox.mat-pseudo-checkbox-checked::after {
            top: 4px;
            left: 2px;
        }
    }

    .mat-option-ripple.mat-ripple {
        .mat-ripple-element {
            background-color: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), 0.1);
        }
    }

    .mat-select-content {
        .mat-option:focus:not(.mat-option-disabled), .mat-option:hover:not(.mat-option-disabled) {
            background-color: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), 0.1);
        }

        .mat-option.mat-selected:not(.mat-option-disabled) {
            color: @CLR_BRAND;
        }

        .mat-option.mat-active {
            background: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), 0.1);
        }
    }
}