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

PhloxUI Ng2+ Framework

material-search-multi-dropdown {
  &.disabled {
    > .material-search-multi-dropdown {
      > .label {
        color: @CLR_DISABLED_FONT;
      }

      > .dropdown-container > .dropdown {
        .label {
          color: @CLR_DISABLED_FONT;
        }
      }

      .down-triangle {
        color: @CLR_DISABLED_FONT;
      }
    }
  }
}

.material-search-multi-dropdown {
  width: @PHLOX_DROPDOWN_MIN_WIDTH;
  height: @PHLOX_DROPDOWN_MIN_HEIGHT;
  min-height: @PHLOX_DROPDOWN_MIN_HEIGHT;
  position: relative;

  > .label {
    color: @CLR_FIXED_FONT;
    float: left;
    font-weight: normal;
    font-size: 100%;
    width: 30%;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }

  > .dropdown-container {
    float: left;
    width: 70%;
    height: 100%;

    &.fluid {
      width: 100%;
    }

    > .dropdown {
      height: 100%;

      > div {
        height: 100%;
        width: 100%;
        text-align: left;

        &.label {
          color: @CLR_FIXED_FONT;
          font-size: 120%;
          font-weight: normal;
          padding: 0;

          > button {
            background-color: extract(@CLR_1, 9);
            border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid transparent;
            width: 100%;
            height: 100%;

            &:focus {
              border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
            }

            > div {
              float: left;

              &:first-child {
                width: 80%;
                height: 100%;
              }

              &:last-child {
                width: 20%;
                height: 100%;
                text-align: right;
              }
            }
          }
        }
        // end div
      }
    }

    > .menu {
      .phlox-box-shadow(@PHLOX_DROPDOWN_LIST_SHADOW_HLEN, @PHLOX_DROPDOWN_LIST_SHADOW_VLEN, @PHLOX_DROPDOWN_LIST_SHADOW_BLUR, @PHLOX_DROPDOWN_LIST_SHADOW_SPREAD);
      background-color: extract(@CLR_1, 9);
      position: absolute;
      z-index: 1;
      color: @CLR_FIXED_FONT;
      font-size: @CONTEXT_MENU_FONT_SIZE;
      display: none;
      min-width: @MATERIAL_SEARCH_MULTI_DROPDOWN_MIN_WIDTH;
      overflow: hidden;

      > div.group-search {
        display: flex;
        align-items: center;

        & > div:first-child {
          padding-right: 0;

          & > material-text-box {
            width: 100%;
          }
        }

        & > div:last-child {
          padding-left: 0;
          height: 20pt;
          margin-bottom: 11px;

          simple-ripple-btn > .simple-ripple-btn {
            position: relative;
            border: none;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            .FC1();
            background-color: @CLR_BRAND;
            color: @CLR_BRAND_FONT;
            cursor: pointer;
            height: @DEFAULT_SEARCH_MULTI_DROPDOWN_HEIGHT;
            font-family: "PhloxGlyphicons";
            font-size: @PHLOX_TABLE_ICON_FONT_SIZE + 5pt;

            &:before {
              cursor: pointer;
              content: "s";
            }
          }
        }
      }

      > .menu-item {
        margin: 0;
        padding: 0;
        list-style-type: none;
        overflow-x: hidden;
        max-height: 150pt;

        > li {
          border-bottom: @PHLOX_DROPDOWN_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
          padding: 5pt 10pt;
          cursor: pointer;

          > div {
            display: flex;
            align-items: center;

            & > checkbox .checkbox {
              margin-top: 0;
              margin-bottom: 0;

              & label {
                display: flex;
                align-items: center;
                padding-left: 0;
              }

              & label:before {
                margin-bottom: 0;
              }
            }

            & > div.label-item {
              width: 100%;
            }
          }
        }
      }

      material-text-box .material-input.material-text-box {
        width: 100%;

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

    .down-triangle {
      color: @CLR_FIXED_FONT;
    }
  }
}