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

PhloxUI Ng2+ Framework

phx-date-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;
		}
	}
}


/* Date picker */
.phx-date-picker {
  position: relative;
  display: inline-block;

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

  >.date-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;
    width: 250px;
    z-index: 2;
    background-color: extract(@CLR_1, 9);

    .icon-arrow-left {
      padding-top: 4pt;
      font-family: "PhloxGlyphicons";
      &:before {
        content: "B";
      }
    }

    .icon-arrow-right {
      padding-top: 4pt;
      font-family: "PhloxGlyphicons";
      &:before {
        content: "C";
      }
    }

    &.show {
      display: inline-block;
    }

    >.date-picker-header {
        padding-left: 0;
        padding-right: 0;
        display: table;
        width: 100%;
        height: 30px;

        >.date-picker-center{
          min-width: 200px;
          position: relative;
          text-align: center;
          display: table-cell;
          vertical-align: bottom;

          > div:first-child {
            position: absolute;
            width: 25%;
            left: 0;
            cursor:pointer;
          }

          > div:nth-child(2) {
            position: absolute;
            width: 25%;
            right: 0;
            cursor:pointer;
          }

          > div:last-child {
            text-align: center;
            line-height: 2.15em;
            cursor:pointer;
          }
      }
      .left-angle, .right-angle{
      	color: @CLR_FIXED_FONT;
      }
    }

    >.date-picker-body{
      padding-left: 0;
      padding-right: 0;

  		>.month-view{

        >.day-header{
  				position: relative;
  			}

        >.day-body{
          cursor:pointer;
        }

        .col-md-1{
          padding: 0;
          line-height: @DATE_PICKER_LINE_HEIGHT;

          > .day-label {
            text-align: center;

            &.header-text{
              font-weight: bold;
            }

            &.day-bg-color{
            }
          }

          &.day {
            color: extract(@CLR_0, 1);

            &.disable{
              color: extract(@CLR_0, 9);
            }

            &.today{
              color: extract(@CLR_1, 9);
              background-color: extract(@CLR_BRAND_HUE, 3);
              border-radius: @DATE_PICKER_BORDER_RADIUS;
            }

            &.selected{
              color: extract(@CLR_1, 9);
              background-color: @CLR_BRAND;
              border-radius: @DATE_PICKER_BORDER_RADIUS;
            }

            &.minmax-date{
              cursor: default;
              color: extract(@CLR_1, 7);
              border-radius: @DATE_PICKER_BORDER_RADIUS;
            }
          }
        }
      }
    }
  }
}