@alifd/next/lib/date-picker/index.css

A configurable component library for web built on React.

.next-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  top: 0;
  margin: -1px; }

.next-range-picker-trigger-separator, .next-range-picker-panel-input-separator {
  cursor: default;
  display: inline-block;
  text-align: center;
  color: #CCCCCC;
  color: var(--color-text1-1, #CCCCCC);
  width: 16px;
  width: var(--date-picker-input-separator-width, 16px);
  font-size: 12px;
  font-size: var(--font-size-caption, 12px);
  vertical-align: middle; }

.next-date-picker,
.next-month-picker,
.next-year-picker,
.next-week-picker {
  display: inline-block;
  width: 200px;
  width: var(--s-50, 200px); }
  .next-date-picker-input,
  .next-month-picker-input,
  .next-year-picker-input,
  .next-week-picker-input {
    width: 100%; }
  .next-date-picker-body,
  .next-month-picker-body,
  .next-year-picker-body,
  .next-week-picker-body {
    width: 288px;
    width: calc(var(--s-18, 72px)*4); }
  .next-date-picker-panel-input.next-input,
  .next-month-picker-panel-input.next-input,
  .next-year-picker-panel-input.next-input,
  .next-week-picker-panel-input.next-input {
    width: 100%;
    background: transparent; }

.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input {
  width: 49%; }
  .next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child {
    margin-right: 2%; }

.next-range-picker {
  display: inline-block;
  width: 336px;
  width: calc(var(--s-28, 112px)*3); }
  .next-range-picker-input {
    width: 100%; }
  .next-range-picker-trigger {
    border: 1px solid #C4C6CF;
    border: var(--input-border-width, 1px) solid var(--input-border-color, #C4C6CF);
    background-color: #FFFFFF;
    background-color: var(--input-bg-color, #FFFFFF); }
    .next-range-picker-trigger:hover {
      border-color: #A0A2AD;
      border-color: var(--input-hover-border-color, #A0A2AD);
      background-color: #FFFFFF;
      background-color: var(--input-hover-bg-color, #FFFFFF); }
    .next-range-picker-trigger.next-error {
      border-color: #FF3000;
      border-color: var(--input-feedback-error-border-color, #FF3000); }
    .next-range-picker-trigger-input.next-input {
      height: auto;
      width: calc(50% - 8px);
      width: calc(50% - var(--date-picker-input-separator-width, 16px)/2); }
  .next-range-picker.next-disabled .next-range-picker-trigger {
    color: #CCCCCC;
    color: var(--input-disabled-color, #CCCCCC);
    border-color: #E6E7EB;
    border-color: var(--input-disabled-border-color, #E6E7EB);
    background-color: #F7F8FA;
    background-color: var(--input-disabled-bg-color, #F7F8FA);
    cursor: not-allowed; }
    .next-range-picker.next-disabled .next-range-picker-trigger:hover {
      border-color: #E6E7EB;
      border-color: var(--input-disabled-border-color, #E6E7EB);
      background-color: #F7F8FA;
      background-color: var(--input-disabled-bg-color, #F7F8FA); }
  .next-range-picker.next-large .next-range-picker-trigger, .next-range-picker.next-large .next-range-picker-panel-input {
    border-radius: 3px;
    border-radius: var(--form-element-large-corner, 3px); }
  .next-range-picker.next-medium .next-range-picker-trigger, .next-range-picker.next-medium .next-range-picker-panel-input {
    border-radius: 3px;
    border-radius: var(--form-element-medium-corner, 3px); }
  .next-range-picker.next-small .next-range-picker-trigger, .next-range-picker.next-small .next-range-picker-panel-input {
    border-radius: 3px;
    border-radius: var(--form-element-small-corner, 3px); }
  .next-range-picker-body {
    width: 600px;
    width: calc(var(--s-30, 120px)*5); }
  .next-range-picker-panel-input-start-date.next-input, .next-range-picker-panel-input-end-date.next-input {
    width: calc(50% - 8px);
    width: calc(50% - var(--date-picker-input-separator-width, 16px)/2); }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time {
  width: calc(25% - 8px);
  width: calc(25% - var(--date-picker-input-separator-width, 16px)/4 - var(--s-4, 16px)/4); }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date {
  margin-right: 8px;
  margin-right: var(--s-2, 8px); }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time {
  margin-left: 8px;
  margin-left: var(--s-2, 8px); }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after {
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: '\0020';
  clear: both; }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end {
  width: 50%;
  float: left; }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start {
  border-right: 1px solid #DCDEE3;
  border-right: var(--line-1, 1px) var(--line-solid, solid) var(--date-picker-panel-time-panel-separator-color, #DCDEE3); }

.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end {
  border-left: 1px solid #DCDEE3;
  border-left: var(--line-1, 1px) var(--line-solid, solid) var(--date-picker-panel-time-panel-separator-color, #DCDEE3); }

.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer {
  text-align: left; }

.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) {
  margin-right: 0;
  margin-left: 16px;
  margin-left: var(--s-4, 16px); }

.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child {
  margin-left: 2%;
  margin-right: 0; }

.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu {
  float: right; }
  .next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child) {
    border-right: none;
    border-left: 1px solid #C4C6CF;
    border-left: var(--time-picker-menu-border-width, 1px) var(--line-solid, solid) var(--time-picker-menu-border-color, #C4C6CF); }

.next-range-picker-body[dir="rtl"] .next-range-picker-panel-input {
  text-align: right; }

.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer {
  text-align: left; }

.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) {
  margin-right: 0;
  margin-left: 16px;
  margin-left: var(--s-4, 16px); }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-start-date {
  margin-right: 0;
  margin-left: 8px;
  margin-left: var(--s-2, 8px); }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-end-time {
  margin-left: 0;
  margin-right: 8px;
  margin-right: var(--s-2, 8px); }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end {
  float: right; }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start {
  border-right: none;
  border-left: 1px solid #DCDEE3;
  border-left: var(--line-1, 1px) var(--line-solid, solid) var(--date-picker-panel-time-panel-separator-color, #DCDEE3); }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end {
  border-left: none;
  border-right: 1px solid #DCDEE3;
  border-right: var(--line-1, 1px) var(--line-solid, solid) var(--date-picker-panel-time-panel-separator-color, #DCDEE3); }

.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu {
  float: right; }
  .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child) {
    border-right: none;
    border-left: 1px solid #C4C6CF;
    border-left: var(--time-picker-menu-border-width, 1px) var(--line-solid, solid) var(--time-picker-menu-border-color, #C4C6CF); }

.next-date-picker,
.next-range-picker,
.next-month-picker,
.next-year-picker,
.next-week-picker {
  box-sizing: border-box; }
  .next-date-picker *,
  .next-date-picker *:before,
  .next-date-picker *:after,
  .next-range-picker *,
  .next-range-picker *:before,
  .next-range-picker *:after,
  .next-month-picker *,
  .next-month-picker *:before,
  .next-month-picker *:after,
  .next-year-picker *,
  .next-year-picker *:before,
  .next-year-picker *:after,
  .next-week-picker *,
  .next-week-picker *:before,
  .next-week-picker *:after {
    box-sizing: border-box; }
  .next-date-picker-body,
  .next-range-picker-body,
  .next-month-picker-body,
  .next-year-picker-body,
  .next-week-picker-body {
    border: 1px solid #DCDEE3;
    border: var(--popup-local-border-width, 1px) var(--popup-local-border-style, solid) var(--popup-local-border-color, #DCDEE3);
    border-radius: 3px;
    border-radius: var(--popup-local-corner, 3px);
    box-shadow: none;
    box-shadow: var(--popup-local-shadow, none);
    background: #FFFFFF;
    background: var(--date-picker-panel-background, #FFFFFF); }
  .next-date-picker-panel-header,
  .next-range-picker-panel-header,
  .next-month-picker-panel-header,
  .next-year-picker-panel-header,
  .next-week-picker-panel-header {
    padding: 6px;
    text-align: center; }
  .next-date-picker-panel-time,
  .next-range-picker-panel-time,
  .next-month-picker-panel-time,
  .next-year-picker-panel-time,
  .next-week-picker-panel-time {
    border-top: 1px solid #DCDEE3;
    border-top: var(--popup-local-border-width, 1px) var(--popup-local-border-style, solid) var(--popup-local-border-color, #DCDEE3); }
  .next-date-picker-panel-footer,
  .next-range-picker-panel-footer,
  .next-month-picker-panel-footer,
  .next-year-picker-panel-footer,
  .next-week-picker-panel-footer {
    text-align: right;
    padding: 8px 20px;
    padding: var(--date-picker-panel-footer-padding-tb, 8px) var(--date-picker-panel-footer-padding-lr, 20px);
    border-top: 1px solid #DCDEE3;
    border-top: var(--popup-local-border-width, 1px) var(--popup-local-border-style, solid) var(--popup-local-border-color, #DCDEE3); }
  .next-date-picker-panel-footer > .next-btn:not(:last-child),
  .next-date-picker-panel-tools > .next-btn:not(:last-child),
  .next-range-picker-panel-footer > .next-btn:not(:last-child),
  .next-range-picker-panel-tools > .next-btn:not(:last-child),
  .next-month-picker-panel-footer > .next-btn:not(:last-child),
  .next-month-picker-panel-tools > .next-btn:not(:last-child),
  .next-year-picker-panel-footer > .next-btn:not(:last-child),
  .next-year-picker-panel-tools > .next-btn:not(:last-child),
  .next-week-picker-panel-footer > .next-btn:not(:last-child),
  .next-week-picker-panel-tools > .next-btn:not(:last-child) {
    margin-right: 16px;
    margin-right: var(--s-4, 16px); }
  .next-date-picker-panel-tools,
  .next-range-picker-panel-tools,
  .next-month-picker-panel-tools,
  .next-year-picker-panel-tools,
  .next-week-picker-panel-tools {
    float: left; }
  .next-date-picker .next-calendar-panel-header,
  .next-range-picker .next-calendar-panel-header,
  .next-month-picker .next-calendar-panel-header,
  .next-year-picker .next-calendar-panel-header,
  .next-week-picker .next-calendar-panel-header {
    margin-left: -1px;
    margin-left: calc(0px - var(--popup-local-border-width, 1px));
    margin-right: -1px;
    margin-right: calc(0px - var(--popup-local-border-width, 1px)); }
  .next-date-picker .next-input input,
  .next-range-picker .next-input input,
  .next-month-picker .next-input input,
  .next-year-picker .next-input input,
  .next-week-picker .next-input input {
    vertical-align: baseline; }
  .next-date-picker-symbol-calendar-icon::before,
  .next-range-picker-symbol-calendar-icon::before,
  .next-month-picker-symbol-calendar-icon::before,
  .next-year-picker-symbol-calendar-icon::before,
  .next-week-picker-symbol-calendar-icon::before {
    content: "";
    content: var(--date-picker-calendar-icon, ""); }

.next-range-picker-panel-body .next-calendar {
  display: inline-block;
  width: 50%; }