com.phloxui/styles/theme/material/component/dataview/input/MaterialSimpleDropdownList.less

PhloxUI Ng2+ Framework

material-simple-dropdown {
  display: inline-block;

  .material-simple-dropdown {
    position: relative;
    width: @DEFAULT_MATERIAL_DROPDOWN_WIDTH;
    margin-top: -@MATERIAL_DROPDOWN_LABEL_TOP_MARGIN_ACTIVE;

    .label {
      .FC1L();
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-overflow: clip;
      overflow: hidden;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      // Padding right with size of down-triangle + border thickness.
      padding-right: @FONT_SIZE_L0 + @MATERIAL_DROPDOWN_FOCUS_BORDER_THICKNESS;
    }

    .dropdown-container {
      .phlox-transition();
      width: 100%;
      border-radius: 0;
      border: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH solid @MATERIAL_BORDER_COLOR;
      border-right: 0;
      border-left: 0;
      border-top: 0;

      > .dropdown {
        .phlox-transition();
        position: relative;
        background: none;
        width: 100%;
        height: 100%;
        padding: 0;
        min-height: @DEFAULT_MATERIAL_DROPDOWN_HEIGHT;
        border-radius: 0;
        border: @MATERIAL_DROPDOWN_FOCUS_BORDER_THICKNESS solid transparent;

        > .down-triangle {
          .phlox-transition();
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: @MATERIAL_FIXED_FONT;

          &.disabled {
            color: @CLR_DISABLED_FONT;
          }
        }

        &:focus {
          border-color: @MATERIAL_BORDER_COLOR;
        }
      }

      .menu {
        .phlox-box-shadow(0, 3, 3, 3);
        position: absolute;
        overflow: auto;
        background-color: extract(@CLR_1, 9);
        list-style-type: none;
        z-index: 1;
        width: 100%;
        margin: 0;
        padding: 0;
        color: @CLR_FIXED_FONT;
        font-size: @MATERIAL_CONTEXT_MENU_FONT_SIZE;
        display: none;
        transition: @MATERIAL_DROPDOWN_POPUP_TRANSITION;

        &.show {
          display: block;
        }

        > li {
          border-bottom: @PHLOX_DROPDOWN_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
          padding: @MATERIAL_DROPDOWN_ITEM_PADDING_V @MATERIAL_DROPDOWN_ITEM_PADDING_H;
          cursor: pointer;
          white-space: pre-wrap;

          &:focus,
          &:hover {
            background-color: extract(@CLR_1, 7);
          }
        }
      }

      &.success {
        border-color: @MATERIAL_BORDER_COLOR_SUCCESS;
      }

      &.warning {
        border-color: @MATERIAL_BORDER_COLOR_WARNING;
      }

      &.error {
        border-color: @MATERIAL_BORDER_COLOR_ERROR;
      }
    }

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

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

    &.readonly {
      .dropdown-container {
        border-style: dotted;

        > .dropdown {
          cursor: default;
          border-style: dotted;
          background-color: @MATERIAL_DISABLED_BG_COLOR;
        }
      }
    }

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

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

  &.warning {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }
  }

  &.error {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }
  }

  &.success {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }
  }

  &.disabled {
    .label {
      color: @MATERIAL_DISABLED_FONT;
    }

    .dropdown-container {
      border-style: dotted;

      > .dropdown {
        cursor: default;
        background-color: @MATERIAL_DISABLED_BG_COLOR;
      }
    }
  }
}