less-plugin-dls/test/specs/date-picker/date-picker.css

Less plugin for Baidu Light DLS.

div {
  -dls-date-picker-width: 160px;
  -dls-date-picker-width-range: 248px;
  -dls-date-picker-font-size-s: 12px;
  -dls-date-picker-font-size-m: 14px;
  -dls-date-picker-dropdown-background-color: #fff;
  -dls-date-picker-dropdown-border-radius-s: 4px;
  -dls-date-picker-dropdown-border-radius-m: 4px;
  -dls-date-picker-dropdown-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04);
  -dls-date-picker-icon-color: rgba(80, 90, 107, 0.8);
  -dls-date-picker-icon-color-disabled: rgba(83, 98, 128, 0.5);
  -dls-date-picker-range-connector-padding-x: 12px;
  -dls-date-picker-range-panel-spacing: 8px;
  -dls-date-picker-panel-separator-color: #e2e6f0;
  -dls-date-picker-panel-padding-x: 16px;
  -dls-date-picker-header-pagination-icon-size: calc(1em + 2px);
  -dls-date-picker-header-icon-size-aux: calc(1em + 2px);
  -dls-date-picker-header-padding-y: 8px;
  -dls-date-picker-header-pagination-spacing: 12px;
  -dls-date-picker-header-icon-aux-spacing: 8px;
  -dls-date-picker-day-body-padding-top: 4px;
  -dls-date-picker-day-body-padding-bottom: 12px;
  -dls-date-picker-weekdays-spacing-after: 12px;
  -dls-date-picker-month-body-padding-top: 24px;
  -dls-date-picker-year-body-padding-top: 24px;
  -dls-date-picker-cell-height-s: 28px;
  -dls-date-picker-cell-height-m: 32px;
  -dls-date-picker-cell-width-s: 28px;
  -dls-date-picker-cell-width-m: 32px;
  -dls-date-picker-cell-border-radius-s: 4px;
  -dls-date-picker-cell-border-radius-m: 4px;
  -dls-date-picker-cell-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2);
  -dls-date-picker-cell-font-color: rgba(13, 15, 18, 0.95);
  -dls-date-picker-cell-font-color-current: #0054e6;
  -dls-date-picker-cell-font-color-aux: rgba(80, 90, 107, 0.8);
  -dls-date-picker-cell-font-color-disabled: rgba(83, 98, 128, 0.5);
  -dls-date-picker-cell-font-color-selected: #fff;
  -dls-date-picker-cell-font-weight: 400;
  -dls-date-picker-cell-font-weight-selected: 500;
  -dls-date-picker-day-cell-spacing-y: 4px;
  -dls-date-picker-day-cell-spacing-x: 8px;
  -dls-date-picker-month-cell-spacing-y: 20px;
  -dls-date-picker-month-cell-padding-x: 8px;
  -dls-date-picker-year-cell-spacing-y: 20px;
  -dls-date-picker-year-cell-padding-x: 8px;
  -dls-date-picker-cell-background-color: transparent;
  -dls-date-picker-cell-background-color-hover: #f6f7fa;
  -dls-date-picker-cell-background-color-focus: #f6f7fa;
  -dls-date-picker-cell-background-color-active: #e2e6f0;
  -dls-date-picker-cell-background-color-disabled: #f6f7fa;
  -dls-date-picker-cell-background-color-selected: #0054e6;
  -dls-date-picker-cell-background-color-selected-hover: #1a6eff;
  -dls-date-picker-cell-background-color-selected-focus: #1a6eff;
  -dls-date-picker-cell-background-color-selected-active: #0047c4;
  -dls-date-picker-cell-background-color-aux: transparent;
  -dls-date-picker-cell-background-color-aux-hover: #f6f7fa;
  -dls-date-picker-cell-background-color-aux-focus: #f6f7fa;
  -dls-date-picker-cell-background-color-aux-active: #e2e6f0;
  -dls-date-picker-cell-background-color-range-end-hover: #dce9ff;
  -dls-date-picker-cell-background-color-range-end-active: #bfd7ff;
  -dls-date-picker-cell-background-color-range-end-focus: #dce9ff;
  -dls-date-picker-cell-border-color: transparent;
  -dls-date-picker-cell-border-color-focus: #0054e6;
  -dls-date-picker-cell-border-color-range-end-hover: transparent;
  -dls-date-picker-cell-border-color-range-end-active: transparent;
  -dls-date-picker-list-item-height-m: 32px;
  -dls-date-picker-list-item-height-s: 28px;
  -dls-date-picker-list-padding-y: 8px;
  -dls-date-picker-list-item-spacing: 4px;
  -dls-date-picker-list-item-padding-x: 16px;
  -dls-date-picker-list-background-color: transparent;
  -dls-date-picker-list-background-color-hover: #f6f7fa;
  -dls-date-picker-list-background-color-focus: #f6f7fa;
  -dls-date-picker-list-background-color-active: #e2e6f0;
  -dls-date-picker-list-background-color-selected: #ebf2ff;
  -dls-date-picker-list-background-color-selected-hover: #dce9ff;
  -dls-date-picker-list-background-color-selected-focus: #dce9ff;
  -dls-date-picker-list-background-color-selected-active: #bfd7ff;
  -dls-date-picker-list-font-color: rgba(13, 15, 18, 0.95);
  -dls-date-picker-list-font-color-hover: rgba(13, 15, 18, 0.95);
  -dls-date-picker-list-font-color-focus: rgba(13, 15, 18, 0.95);
  -dls-date-picker-list-font-color-active: rgba(13, 15, 18, 0.95);
  -dls-date-picker-list-font-color-selected: #0054e6;
  -dls-date-picker-list-font-color-selected-hover: #0054e6;
  -dls-date-picker-list-font-color-selected-focus: #0054e6;
  -dls-date-picker-list-font-color-selected-active: #0054e6;
  -dls-date-picker-list-font-weight: 400;
  -dls-date-picker-list-font-weight-selected: 500;
  -dls-date-picker-year-scroller-width: 80px;
}