com.phloxui/styles/component/dataview/input/SearchMultiDropdownList.less

PhloxUI Ng2+ Framework

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

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

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

.phx-search-multi-dropdown {
    width: @PHLOX_DROPDOWN_MIN_WIDTH;
    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;

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

          & > div:last-child{
            padding-left: 0;
            height: 20pt;

            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%;
              }
            }
          }
        }
      }

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