mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 06:09:34 +08:00
676de29eb4
* rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
696 lines
17 KiB
Plaintext
696 lines
17 KiB
Plaintext
@import './index';
|
|
|
|
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
|
|
@picker-legacy-cell-cls: ~'@{ant-prefix}-calendar-date';
|
|
|
|
.@{picker-prefix-cls} {
|
|
@picker-arrow-size: 7px;
|
|
@picker-panel-width: 280px;
|
|
@picker-year-month-cell-width: 60px;
|
|
|
|
&-panel {
|
|
display: inline-block;
|
|
text-align: center;
|
|
background: @calendar-bg;
|
|
border: @border-width-base @border-style-base @picker-border-color;
|
|
border-radius: @border-radius-base;
|
|
outline: none;
|
|
|
|
&-rtl {
|
|
direction: rtl;
|
|
}
|
|
|
|
&-focused {
|
|
border-color: @primary-color;
|
|
}
|
|
}
|
|
|
|
// ========================================================
|
|
// = Shared Panel =
|
|
// ========================================================
|
|
&-decade-panel,
|
|
&-year-panel,
|
|
&-month-panel,
|
|
&-week-panel,
|
|
&-date-panel,
|
|
&-time-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: @picker-panel-width;
|
|
}
|
|
|
|
// ======================= Header =======================
|
|
&-header {
|
|
display: flex;
|
|
padding: 0 @padding-xs;
|
|
color: @heading-color;
|
|
border-bottom: @border-width-base @border-style-base @picker-border-color;
|
|
|
|
> * {
|
|
flex: none;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
color: @disabled-color;
|
|
line-height: @picker-text-height;
|
|
background: transparent;
|
|
border: 0;
|
|
cursor: pointer;
|
|
transition: color @animation-duration-slow;
|
|
}
|
|
|
|
> button {
|
|
min-width: 1.6em;
|
|
font-size: @font-size-base;
|
|
|
|
&:hover {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
|
|
&-view {
|
|
flex: auto;
|
|
font-weight: 500;
|
|
line-height: @picker-text-height;
|
|
|
|
button {
|
|
color: inherit;
|
|
font-weight: inherit;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: @padding-xs;
|
|
}
|
|
|
|
&:hover {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Arrow button
|
|
&-prev-icon,
|
|
&-next-icon,
|
|
&-super-prev-icon,
|
|
&-super-next-icon {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: @picker-arrow-size;
|
|
height: @picker-arrow-size;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: inline-block;
|
|
width: @picker-arrow-size;
|
|
height: @picker-arrow-size;
|
|
border: 0 solid currentColor;
|
|
border-width: 1.5px 0 0 1.5px;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&-super-prev-icon,
|
|
&-super-next-icon {
|
|
&::after {
|
|
position: absolute;
|
|
top: ceil(@picker-arrow-size / 2);
|
|
left: ceil(@picker-arrow-size / 2);
|
|
display: inline-block;
|
|
width: @picker-arrow-size;
|
|
height: @picker-arrow-size;
|
|
border: 0 solid currentColor;
|
|
border-width: 1.5px 0 0 1.5px;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&-prev-icon,
|
|
&-super-prev-icon {
|
|
transform: rotate(-45deg);
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
|
|
&-next-icon,
|
|
&-super-next-icon {
|
|
transform: rotate(135deg);
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
// ======================== Body ========================
|
|
&-content {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
|
|
th,
|
|
td {
|
|
position: relative;
|
|
min-width: 24px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
th {
|
|
height: 30px;
|
|
color: @text-color;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
.picker-cell-inner(@cellClassName) {
|
|
&::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
height: 24px;
|
|
transform: translateY(-50%);
|
|
content: '';
|
|
}
|
|
|
|
// >>> Default
|
|
.@{cellClassName} {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
min-width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
border-radius: @border-radius-base;
|
|
transition: background @animation-duration-slow, border @animation-duration-slow;
|
|
}
|
|
|
|
// >>> Hover
|
|
&:hover:not(&-in-view),
|
|
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
|
|
.@{cellClassName} {
|
|
background: @picker-basic-cell-hover-color;
|
|
}
|
|
}
|
|
|
|
// >>> Today
|
|
&-in-view&-today .@{cellClassName} {
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
border: @border-width-base @border-style-base @primary-color;
|
|
border-radius: @border-radius-base;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
// >>> In Range
|
|
&-in-view&-in-range {
|
|
position: relative;
|
|
|
|
&::before {
|
|
background: @picker-basic-cell-hover-color;
|
|
}
|
|
}
|
|
|
|
// >>> Selected
|
|
&-in-view&-selected .@{cellClassName},
|
|
&-in-view&-range-start .@{cellClassName},
|
|
&-in-view&-range-end .@{cellClassName} {
|
|
color: @text-color-inverse;
|
|
background: @primary-color;
|
|
}
|
|
|
|
&-in-view&-range-start:not(&-range-start-single),
|
|
&-in-view&-range-end:not(&-range-end-single) {
|
|
&::before {
|
|
background: @picker-basic-cell-hover-color;
|
|
}
|
|
}
|
|
|
|
&-in-view&-range-start::before {
|
|
left: 50%;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 50%;
|
|
left: 0;
|
|
}
|
|
}
|
|
&-in-view&-range-end::before {
|
|
right: 50%;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
// >>> Range Hover
|
|
&-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
|
|
&-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
|
|
&-in-view&-range-hover-start&-range-start-single,
|
|
&-in-view&-range-hover-end&-range-end-single,
|
|
&-in-view&-range-hover:not(&-in-range) {
|
|
&::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 0;
|
|
height: 24px;
|
|
border-top: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
transform: translateY(-50%);
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
// Add space for stash
|
|
&-range-hover-start::after,
|
|
&-range-hover-end::after,
|
|
&-range-hover::after {
|
|
right: 0;
|
|
left: 2px;
|
|
}
|
|
|
|
// Hover with in range
|
|
&-in-view&-in-range&-range-hover::before,
|
|
&-in-view&-range-start&-range-hover::before,
|
|
&-in-view&-range-end&-range-hover::before,
|
|
&-in-view&-range-start:not(&-range-start-single)&-range-hover-start::before,
|
|
&-in-view&-range-end:not(&-range-end-single)&-range-hover-end::before,
|
|
.@{picker-prefix-cls}-panel
|
|
> :not(.@{picker-prefix-cls}-date-panel)
|
|
&-in-view&-in-range&-range-hover-start::before,
|
|
.@{picker-prefix-cls}-panel
|
|
> :not(.@{picker-prefix-cls}-date-panel)
|
|
&-in-view&-in-range&-range-hover-end::before {
|
|
background: @picker-basic-cell-hover-with-range-color;
|
|
}
|
|
|
|
// DatePanel only
|
|
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
|
|
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
background: @picker-basic-cell-hover-with-range-color;
|
|
content: '';
|
|
}
|
|
}
|
|
.@{picker-prefix-cls}-date-panel
|
|
&-in-view&-in-range&-range-hover-start
|
|
.@{cellClassName}::after {
|
|
right: -6px - @border-width-base;
|
|
left: 0;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: -6px - @border-width-base;
|
|
}
|
|
}
|
|
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
|
right: 0;
|
|
left: -6px - @border-width-base;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: -6px - @border-width-base;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// Hover with range start & end
|
|
&-range-hover&-range-start::after {
|
|
right: 50%;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 50%;
|
|
}
|
|
}
|
|
&-range-hover&-range-end::after {
|
|
left: 50%;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 50%;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// Edge start
|
|
tr > &-in-view&-range-hover:first-child::after,
|
|
tr > &-in-view&-range-hover-end:first-child::after,
|
|
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
|
|
&-in-view&-range-hover-start::after {
|
|
left: 6px;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-top-left-radius: @border-radius-base;
|
|
border-bottom-left-radius: @border-radius-base;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 6px;
|
|
left: 0;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-left: none;
|
|
border-top-right-radius: @border-radius-base;
|
|
border-bottom-right-radius: @border-radius-base;
|
|
}
|
|
}
|
|
|
|
// Edge end
|
|
tr > &-in-view&-range-hover:last-child::after,
|
|
tr > &-in-view&-range-hover-start:last-child::after,
|
|
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
|
|
&-in-view&-range-hover-end::after {
|
|
right: 6px;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-top-right-radius: @border-radius-base;
|
|
border-bottom-right-radius: @border-radius-base;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: 0;
|
|
left: 6px;
|
|
border-right: none;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-top-left-radius: @border-radius-base;
|
|
border-bottom-left-radius: @border-radius-base;
|
|
}
|
|
}
|
|
|
|
// >>> Disabled
|
|
&-disabled {
|
|
pointer-events: none;
|
|
|
|
.@{cellClassName} {
|
|
color: @disabled-color;
|
|
background: transparent;
|
|
}
|
|
|
|
&::before {
|
|
background: @picker-basic-cell-disabled-bg;
|
|
}
|
|
}
|
|
&-disabled&-today .@{cellClassName}::before {
|
|
border-color: @disabled-color;
|
|
}
|
|
}
|
|
|
|
&-cell {
|
|
padding: 3px 0;
|
|
color: @disabled-color;
|
|
cursor: pointer;
|
|
|
|
// In view
|
|
&-in-view {
|
|
color: @text-color;
|
|
}
|
|
|
|
// Disabled
|
|
&-disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.picker-cell-inner(~'@{picker-cell-inner-cls}');
|
|
.picker-cell-inner(~'@{picker-legacy-cell-cls}');
|
|
}
|
|
|
|
&-decade-panel,
|
|
&-year-panel,
|
|
&-month-panel {
|
|
.@{picker-prefix-cls}-content {
|
|
height: 265px;
|
|
}
|
|
|
|
.@{picker-cell-inner-cls} {
|
|
padding: 0 @padding-xs;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-cell {
|
|
&-disabled .@{picker-cell-inner-cls} {
|
|
background: @picker-basic-cell-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ======================== Footer ========================
|
|
&-footer {
|
|
line-height: @picker-text-height - 2 * @border-width-base;
|
|
text-align: center;
|
|
border-bottom: @border-width-base @border-style-base transparent;
|
|
|
|
.@{picker-prefix-cls}-panel & {
|
|
border-top: @border-width-base @border-style-base @picker-border-color;
|
|
}
|
|
|
|
&-extra {
|
|
padding: 0 @padding-sm;
|
|
line-height: @picker-text-height - 2 * @border-width-base;
|
|
text-align: left;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: @border-width-base @border-style-base @picker-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-now {
|
|
text-align: left;
|
|
}
|
|
|
|
&-today-btn {
|
|
color: @link-color;
|
|
|
|
&:hover {
|
|
color: @link-hover-color;
|
|
}
|
|
|
|
&:active {
|
|
color: @link-active-color;
|
|
}
|
|
}
|
|
|
|
// ========================================================
|
|
// = Special =
|
|
// ========================================================
|
|
|
|
// ===================== Decade Panel =====================
|
|
&-decade-panel {
|
|
.@{picker-cell-inner-cls} {
|
|
padding: 0 (@padding-xs / 2);
|
|
}
|
|
|
|
.@{picker-prefix-cls}-cell::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// ================== Year & Month Panel ==================
|
|
&-year-panel,
|
|
&-month-panel {
|
|
@hover-cell-fixed-distance: (
|
|
(@picker-panel-width - @padding-xs * 2) / 3 - @picker-year-month-cell-width
|
|
) / 2;
|
|
|
|
.@{picker-prefix-cls}-body {
|
|
padding: 0 @padding-xs;
|
|
}
|
|
|
|
.@{picker-cell-inner-cls} {
|
|
width: @picker-year-month-cell-width;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-cell-range-hover-start::after {
|
|
left: @hover-cell-fixed-distance;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
right: @hover-cell-fixed-distance;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
|
}
|
|
}
|
|
.@{picker-prefix-cls}-cell-range-hover-end::after {
|
|
right: @hover-cell-fixed-distance;
|
|
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
left: @hover-cell-fixed-distance;
|
|
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
|
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================== Week Panel ======================
|
|
&-week-panel {
|
|
.@{picker-prefix-cls}-body {
|
|
padding: @padding-xs @padding-sm;
|
|
}
|
|
|
|
// Clear cell style
|
|
.@{picker-prefix-cls}-cell {
|
|
&:hover .@{picker-cell-inner-cls},
|
|
&-selected .@{picker-cell-inner-cls},
|
|
.@{picker-cell-inner-cls} {
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
&-row {
|
|
td {
|
|
transition: background @animation-duration-slow;
|
|
}
|
|
|
|
&:hover td {
|
|
background: @picker-basic-cell-hover-color;
|
|
}
|
|
|
|
&-selected td,
|
|
&-selected:hover td {
|
|
background: @primary-color;
|
|
|
|
&.@{picker-prefix-cls}-cell-week {
|
|
color: fade(@text-color-inverse, 50%);
|
|
}
|
|
|
|
&.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
|
|
border-color: @text-color-inverse;
|
|
}
|
|
|
|
.@{picker-cell-inner-cls} {
|
|
color: @text-color-inverse;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================== Date Panel ======================
|
|
&-date-panel {
|
|
.@{picker-prefix-cls}-body {
|
|
padding: @padding-xs @padding-sm;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-content {
|
|
width: 36px * 7;
|
|
|
|
th {
|
|
width: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==================== Datetime Panel ====================
|
|
&-datetime-panel {
|
|
display: flex;
|
|
|
|
.@{picker-prefix-cls}-time-panel {
|
|
border-left: @border-width-base @border-style-base @picker-border-color;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-date-panel,
|
|
.@{picker-prefix-cls}-time-panel {
|
|
transition: opacity @animation-duration-slow;
|
|
}
|
|
|
|
// Keyboard
|
|
&-active {
|
|
.@{picker-prefix-cls}-date-panel,
|
|
.@{picker-prefix-cls}-time-panel {
|
|
opacity: 0.3;
|
|
|
|
&-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================== Time Panel ======================
|
|
&-time-panel {
|
|
width: auto;
|
|
min-width: auto;
|
|
|
|
.@{picker-prefix-cls}-panel-rtl & {
|
|
direction: ltr;
|
|
}
|
|
|
|
.@{picker-prefix-cls}-content {
|
|
display: flex;
|
|
flex: auto;
|
|
height: 224px;
|
|
}
|
|
|
|
&-column {
|
|
flex: 1 0 auto;
|
|
width: 56px;
|
|
margin: 0;
|
|
padding: 0 0 194px 0;
|
|
overflow-y: hidden;
|
|
text-align: left;
|
|
list-style: none;
|
|
transition: background @animation-duration-slow;
|
|
|
|
&:not(:first-child) {
|
|
border-left: @border-width-base @border-style-base @picker-border-color;
|
|
}
|
|
|
|
&-active {
|
|
background: fade(@calendar-item-active-bg, 20%);
|
|
}
|
|
|
|
&:hover {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
> li {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
&.@{picker-prefix-cls}-time-panel-cell {
|
|
.@{picker-prefix-cls}-time-panel-cell-inner {
|
|
display: block;
|
|
width: 100%;
|
|
height: 32px;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: @text-color;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
transition: background @animation-duration-slow;
|
|
|
|
&:hover {
|
|
background: @item-hover-bg;
|
|
}
|
|
}
|
|
|
|
&-selected {
|
|
.@{picker-prefix-cls}-time-panel-cell-inner {
|
|
background: @calendar-item-active-bg;
|
|
}
|
|
}
|
|
|
|
&-disabled {
|
|
.@{picker-prefix-cls}-time-panel-cell-inner {
|
|
color: @disabled-color;
|
|
background: transparent;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|