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

PhloxUI Ng2+ Framework

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

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

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

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

    .box{
			width: @COLOR_SWATCH_BOX_SIZE;
			padding-bottom: @COLOR_SWATCH_BOX_PADDTING_BOTTOM;
			background-color: extract(@CLR_1, 9);
      border: @COLOR_SWATCH_BOX_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
		}

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

    div.box {
        display: inline-block;

        & + div.label {
          color: @CLR_FIXED_FONT;
          font-size: 100%;
          font-weight: normal;
        }
    }

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

    	>.swatch{
	    	height: 100%;

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

          &: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-container {
          .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;
          display: none;
          z-index: 1;
          width: 100%;
          margin : 0;
          padding-left: 9pt;
          padding-right: 5pt;
          padding-top: 10pt;
          padding-bottom: 5pt;

          &.show{
            display: block;
          }

          >.label {
            color: @CLR_FIXED_FONT;
            font-size: 100%;
            font-weight: normal;
            text-align: left;
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            display:block;
          }

          >.menu{
    	    	list-style-type: none;
    	    	z-index: 1;
    	    	width: 100%;
    	    	margin : 0;
    	    	color: @CLR_BORDER_COLOR;
    	    	font-size: @CONTEXT_MENU_FONT_SIZE;
            padding-top: 5pt;
            padding-left: 0;

    	    	>li{
              display: inline;
    	    		cursor:pointer;

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