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

PhloxUI Ng2+ Framework

phx-time-picker{
	//overide bs style
	.form-control{

	}

	&.disabled {
		.form-control[disabled], fieldset[disabled] .form-control {
			cursor: default;
		}

		.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
			opacity: 1;
			color: @CLR_DISABLED_FONT;
			background-color: @CLR_DISABLED_BG;
		}
	}
}

/* Time picker */
.phx-time-picker {
  position: relative;
  display: inline-block;

  >.time-picker-textbox {
    display: inline-block;
  }

  >.time-picker-view {
		.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;
    display: none;
    z-index: 2;
		margin-top: 1.25pt;
    padding: 0 10pt;
    background-color: extract(@CLR_1, 9);
    cursor:pointer;

    .icon-arrow-up {
      font-family: "PhloxGlyphicons";
      padding-top: 5px;
      &:before {
        content: "A";
      }
    }

    .icon-arrow-down {
      font-family: "PhloxGlyphicons";
      padding-bottom: 5px;
      &:before {
        content: "k";
      }
    }

    .time-view {
      text-align: center;
      display: inline-block;
      vertical-align: middle;
    }

    .not-open-sec {
      display: none;
    }

    .time-number {
      border-radius: 5px;
      width: 25pt;
      margin: 5px 0;
      padding: 5px 0;
      color: @CLR_FIXED_FONT;

      &.selected {
        background-color: @CLR_BRAND;
        color: @CLR_BRAND_FONT;
      }
    }

    &.show {
      display: inline-block;
    }

    .separator-time {
      display: inline-block;
    }
  }
}