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

PhloxUI Ng2+ Framework

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

    div.box {
        & + div.label {
          color: @CLR_DISABLED_FONT;
        }
    }

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

.phx-color-dropdown {
    width: @PHLOX_DROPDOWN_MIN_WIDTH;
    height: @PHLOX_DROPDOWN_MIN_HEIGHT;
    position: relative;

    .box{
			width: @COLOR_DROPDOWN_BOX_SIZE;
			padding-bottom: @COLOR_DROPDOWN_BOX_SIZE;
			background-color: extract(@CLR_1, 9);
		}

    >.label {
    	color: extract(@CLR_0, 1);
    	float: left;
    	font-weight: normal;
    	font-size: 100%;
    	width: 30%;
      height: 100%;
    	padding: 0;
    	overflow: hidden;
    }

    div.box {
        display: inline-block;

        & + div.label {
          color: extract(@CLR_0, 1);
          font-size: 100%;
          font-weight: normal;
        }
    }

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

    	&.fluid {
    		width: 100%;
    	}

    	>.dropdown{
	    	height: 100%;

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

		        &.label {
		            color: extract(@CLR_1, 4);
		            font-size: 100%;
		            font-weight: normal;
		            padding: 0;
		        }
		        // end div
		    }

        >button {
          background-color: extract(@CLR_1, 9);
          border: @PHLOX_DROPDOWN_FOCUS_BORDER_THICKNESS solid transparent;
          padding-left: 0;
          padding-right: 0;
          width: 100%;
          height: 100%;
          position: relative;

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

          >div{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;

            &.label-side {
              padding-left: @PHLOX_DROPDOWN_LABEL_PADDING_LEFT;
              padding-right: @PHLOX_DROPDOWN_LABEL_PADDING_RIGHT;
              display: flex;
              align-items: center;
            }

            &.arrow-side {
              text-align: right;
              padding-right: @PHLOX_DROPDOWN_ARROW_PADDING_RIGHT;

              >.flex-center {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
              }
            }
          }
        }
	    }

	    >.menu{
	    	background-color: extract(@CLR_1, 9);
	    	.phlox-box-shadow(@PHLOX_DROPDOWN_LIST_SHADOW_HLEN, @PHLOX_DROPDOWN_LIST_SHADOW_VLEN, @PHLOX_DROPDOWN_LIST_SHADOW_BLUR, @PHLOX_DROPDOWN_LIST_SHADOW_SPREAD);
	    	position: absolute;
	    	list-style-type: none;
	    	z-index: 1;
	    	width: 100%;
	    	margin : 0;
	    	padding: 0;
	    	color: extract(@CLR_0, 6);
	    	font-size: @CONTEXT_MENU_FONT_SIZE;
	    	display: none;

	    	&show{
				display: block;
			}

	    	>li{
	    		border-bottom: @PHLOX_DROPDOWN_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
	    		padding: @PHLOX_DROPDOWN_LIST_LABEL_PADDING_TOP @PHLOX_DROPDOWN_LABEL_PADDING_LEFT;
	    		cursor:pointer;

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

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