This commit is contained in:
CHEVALLIER Abel
2025-11-13 16:23:22 +01:00
parent de9c515a47
commit cb235644dc
34924 changed files with 3811102 additions and 0 deletions

View File

@@ -0,0 +1,408 @@
.calendarLeftArrow() {
height: 100%;
&::before,
&::after {
position: relative;
top: -1px;
display: inline-block;
width: 8px;
height: 8px;
vertical-align: middle;
border: 0 solid #aaa;
border-width: 1.5px 0 0 1.5px;
border-radius: 1px;
transform: rotate(-45deg) scale(0.8);
transition: all 0.3s;
content: '';
}
&:hover::before,
&:hover::after {
border-color: @text-color;
}
&::after {
display: none;
}
}
.calendarLeftDoubleArrow() {
.calendarLeftArrow;
&::after {
position: relative;
left: -3px;
display: inline-block;
}
}
.calendarRightArrow() {
.calendarLeftArrow;
&::before,
&::after {
transform: rotate(135deg) scale(0.8);
}
}
.calendarRightDoubleArrow() {
.calendarRightArrow;
&::before {
position: relative;
left: 3px;
}
&::after {
display: inline-block;
}
}
.calendarPanelHeader(@calendar-prefix-cls) {
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: @border-width-base @border-style-base @border-color-split;
user-select: none;
a:hover {
color: @link-hover-color;
}
.@{calendar-prefix-cls}-century-select,
.@{calendar-prefix-cls}-decade-select,
.@{calendar-prefix-cls}-year-select,
.@{calendar-prefix-cls}-month-select {
display: inline-block;
padding: 0 2px;
color: @heading-color;
font-weight: 500;
line-height: 40px;
}
.@{calendar-prefix-cls}-century-select-arrow,
.@{calendar-prefix-cls}-decade-select-arrow,
.@{calendar-prefix-cls}-year-select-arrow,
.@{calendar-prefix-cls}-month-select-arrow {
display: none;
}
.@{calendar-prefix-cls}-prev-century-btn,
.@{calendar-prefix-cls}-next-century-btn,
.@{calendar-prefix-cls}-prev-decade-btn,
.@{calendar-prefix-cls}-next-decade-btn,
.@{calendar-prefix-cls}-prev-month-btn,
.@{calendar-prefix-cls}-next-month-btn,
.@{calendar-prefix-cls}-prev-year-btn,
.@{calendar-prefix-cls}-next-year-btn {
position: absolute;
top: 0;
display: inline-block;
padding: 0 5px;
color: @text-color-secondary;
font-size: 16px;
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
line-height: 40px;
}
.@{calendar-prefix-cls}-prev-century-btn,
.@{calendar-prefix-cls}-prev-decade-btn,
.@{calendar-prefix-cls}-prev-year-btn {
left: 7px;
.calendarLeftDoubleArrow;
}
.@{calendar-prefix-cls}-next-century-btn,
.@{calendar-prefix-cls}-next-decade-btn,
.@{calendar-prefix-cls}-next-year-btn {
right: 7px;
.calendarRightDoubleArrow;
}
.@{calendar-prefix-cls}-prev-month-btn {
left: 29px;
.calendarLeftArrow;
}
.@{calendar-prefix-cls}-next-month-btn {
right: 29px;
.calendarRightArrow;
}
}
.calendar-selected-cell() {
.@{calendar-prefix-cls}-date {
color: @text-color-inverse;
background: @primary-color;
border: @border-width-base @border-style-base transparent;
&:hover {
background: @primary-color;
}
}
}
.@{calendar-prefix-cls} {
position: relative;
width: 280px;
font-size: @font-size-base;
line-height: @line-height-base;
text-align: left;
list-style: none;
background-color: @component-background;
background-clip: padding-box;
border: @border-width-base @border-style-base @border-color-inverse;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&-input-wrap {
height: 34px;
padding: 6px @control-padding-horizontal - 2px;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
&-input {
width: 100%;
height: 22px;
color: @input-color;
background: @input-bg;
border: 0;
outline: 0;
cursor: auto;
.placeholder;
}
&-week-number {
width: 286px;
&-cell {
text-align: center;
}
}
&-header {
.calendarPanelHeader(@calendar-prefix-cls);
}
&-body {
padding: 8px 12px;
}
table {
width: 100%;
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
}
table,
th,
td {
text-align: center;
border: 0;
}
&-calendar-table {
margin-bottom: 0;
border-spacing: 0;
}
&-column-header {
width: 33px;
padding: 6px 0;
line-height: 18px;
text-align: center;
.@{calendar-prefix-cls}-column-header-inner {
display: block;
font-weight: normal;
}
}
&-week-number-header {
.@{calendar-prefix-cls}-column-header-inner {
display: none;
}
}
&-cell {
height: 30px;
padding: 3px 0;
}
&-date {
display: block;
width: 24px;
height: 24px;
margin: 0 auto;
padding: 0;
color: @text-color;
line-height: 22px;
text-align: center;
background: transparent;
border: @border-width-base @border-style-base transparent;
border-radius: @border-radius-sm;
transition: background 0.3s ease;
&-panel {
position: relative;
outline: none;
}
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
&:active {
color: @text-color-inverse;
background: @primary-5;
}
}
&-today &-date {
color: @primary-color;
font-weight: bold;
border-color: @primary-color;
}
&-selected-day &-date {
background: @primary-2;
}
&-last-month-cell &-date,
&-next-month-btn-day &-date {
&,
&:hover {
color: @disabled-color;
background: transparent;
border-color: transparent;
}
}
&-disabled-cell &-date {
position: relative;
width: auto;
color: @disabled-color;
background: @disabled-bg;
border: @border-width-base @border-style-base transparent;
border-radius: 0;
cursor: not-allowed;
&:hover {
background: @disabled-bg;
}
}
&-disabled-cell&-selected-day &-date::before {
position: absolute;
top: -1px;
left: 5px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.1);
border-radius: @border-radius-sm;
content: '';
}
&-disabled-cell&-today &-date {
position: relative;
padding-right: 5px;
padding-left: 5px;
&::before {
position: absolute;
top: -1px;
left: 5px;
width: 24px;
height: 24px;
border: @border-width-base @border-style-base @disabled-color;
border-radius: @border-radius-sm;
content: ' ';
}
}
&-disabled-cell-first-of-row &-date {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&-disabled-cell-last-of-row &-date {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&-footer {
padding: 0 12px;
line-height: 38px;
border-top: @border-width-base @border-style-base @border-color-split;
&:empty {
border-top: 0;
}
&-btn {
display: block;
text-align: center;
}
&-extra {
text-align: left;
}
}
.@{calendar-prefix-cls}-today-btn,
.@{calendar-prefix-cls}-clear-btn {
display: inline-block;
margin: 0 0 0 8px;
text-align: center;
&-disabled {
color: @disabled-color;
cursor: not-allowed;
}
&:only-child {
margin: 0;
}
}
.@{calendar-prefix-cls}-clear-btn {
position: absolute;
top: 7px;
right: 5px;
display: none;
width: 20px;
height: 20px;
margin: 0;
overflow: hidden;
line-height: 20px;
text-align: center;
text-indent: -76px;
}
.@{calendar-prefix-cls}-clear-btn::after {
display: inline-block;
width: 20px;
color: @disabled-color;
font-size: @font-size-base;
line-height: 1;
text-indent: 43px;
transition: color 0.3s ease;
}
.@{calendar-prefix-cls}-clear-btn:hover::after {
color: @text-color-secondary;
}
.@{calendar-prefix-cls}-ok-btn {
.btn;
.btn-primary;
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
line-height: @btn-height-sm - 2px;
.button-disabled();
}
}

View File

@@ -0,0 +1,80 @@
.@{calendar-prefix-cls}-decade-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
display: flex;
flex-direction: column;
background: @calendar-bg;
border-radius: @border-radius-base;
outline: none;
}
.@{calendar-prefix-cls}-decade-panel-hidden {
display: none;
}
.@{calendar-prefix-cls}-decade-panel-header {
position: relative;
}
.@{calendar-prefix-cls}-decade-panel-body {
flex: 1;
}
.@{calendar-prefix-cls}-decade-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
}
.@{calendar-prefix-cls}-decade-panel-table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
.@{calendar-prefix-cls}-decade-panel-cell {
white-space: nowrap;
text-align: center;
}
.@{calendar-prefix-cls}-decade-panel-decade {
display: inline-block;
height: 24px;
margin: 0 auto;
padding: 0 6px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-base;
transition: background 0.3s ease;
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
}
.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
color: @text-color-inverse;
background: @primary-color;
&:hover {
color: @text-color-inverse;
background: @primary-color;
}
}
.@{calendar-prefix-cls}-decade-panel-last-century-cell,
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
.@{calendar-prefix-cls}-decade-panel-decade {
color: @disabled-color;
user-select: none;
}
}

View File

@@ -0,0 +1,86 @@
.@{calendar-prefix-cls}-month-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
background: @component-background;
border-radius: @border-radius-base;
outline: none;
> div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
.@{calendar-prefix-cls}-month-panel-hidden {
display: none;
}
.@{calendar-prefix-cls}-month-panel-header {
.calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
position: relative;
}
.@{calendar-prefix-cls}-month-panel-body {
flex: 1;
}
.@{calendar-prefix-cls}-month-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
}
.@{calendar-prefix-cls}-month-panel-table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
color: @text-color-inverse;
background: @primary-color;
&:hover {
color: @text-color-inverse;
background: @primary-color;
}
}
.@{calendar-prefix-cls}-month-panel-cell {
text-align: center;
&-disabled .@{calendar-prefix-cls}-month-panel-month {
&,
&:hover {
color: @disabled-color;
background: @disabled-bg;
cursor: not-allowed;
}
}
}
.@{calendar-prefix-cls}-month-panel-month {
display: inline-block;
height: 24px;
margin: 0 auto;
padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-sm;
transition: background 0.3s ease;
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
}

View File

@@ -0,0 +1,11 @@
.@{calendar-prefix-cls}-month {
.@{calendar-prefix-cls}-month-header-wrap {
position: relative;
height: 288px;
}
.@{calendar-prefix-cls}-month-panel,
.@{calendar-prefix-cls}-year-panel {
top: 0;
height: 100%;
}
}

View File

@@ -0,0 +1,110 @@
@import '../../button/style/mixin';
.@{calendar-prefix-cls}-picker-container {
.reset-component;
position: absolute;
z-index: @zindex-picker;
font-family: @font-family;
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
&.slide-up-enter.slide-up-enter-active&-placement-topRight,
&.slide-up-appear.slide-up-appear-active&-placement-topLeft,
&.slide-up-appear.slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
&.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
&.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.slide-up-leave.slide-up-leave-active&-placement-topLeft,
&.slide-up-leave.slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
&.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
}
.@{calendar-prefix-cls}-picker {
.reset-component;
position: relative;
display: inline-block;
outline: none;
cursor: text;
transition: opacity 0.3s;
&-input {
outline: none;
&.@{ant-prefix}-input {
line-height: @line-height-base;
}
}
&-input.@{ant-prefix}-input-sm {
padding-top: 0;
padding-bottom: 0;
}
&:hover &-input:not(.@{ant-prefix}-input-disabled) {
border-color: @input-hover-border-color;
}
&:focus &-input:not(.@{ant-prefix}-input-disabled) {
.active();
}
&-clear,
&-icon {
position: absolute;
top: 50%;
right: @control-padding-horizontal;
z-index: 1;
width: 14px;
height: 14px;
margin-top: -7px;
font-size: @font-size-sm;
line-height: 14px;
transition: all 0.3s;
user-select: none;
}
&-clear {
z-index: 2;
color: @disabled-color;
font-size: @font-size-base;
background: @input-bg;
cursor: pointer;
opacity: 0;
pointer-events: none;
&:hover {
color: @text-color-secondary;
}
}
&:hover &-clear {
opacity: 1;
pointer-events: auto;
}
&-icon {
display: inline-block;
color: @disabled-color;
font-size: @font-size-base;
line-height: 1;
}
&-small &-clear,
&-small &-icon {
right: @control-padding-horizontal-sm;
}
}

View File

@@ -0,0 +1,255 @@
@input-box-height: 34px;
.@{calendar-prefix-cls}-range-picker-input {
width: 44%;
height: 99%;
text-align: center;
background-color: transparent;
border: 0;
outline: 0;
.placeholder();
&[disabled] {
cursor: not-allowed;
}
}
.@{calendar-prefix-cls}-range-picker-separator {
display: inline-block;
min-width: 10px;
height: 100%;
color: @text-color-secondary;
white-space: nowrap;
text-align: center;
vertical-align: top;
pointer-events: none;
}
.@{calendar-prefix-cls}-range {
width: 552px;
overflow: hidden;
.@{calendar-prefix-cls}-date-panel {
&::after {
display: block;
clear: both;
height: 0;
visibility: hidden;
content: '.';
}
}
&-part {
position: relative;
width: 50%;
}
&-left {
float: left;
.@{calendar-prefix-cls} {
&-time-picker-inner {
border-right: 1px solid @border-color-split;
}
}
}
&-right {
float: right;
.@{calendar-prefix-cls} {
&-time-picker-inner {
border-left: 1px solid @border-color-split;
}
}
}
&-middle {
position: absolute;
left: 50%;
z-index: 1;
height: @input-box-height;
margin: 1px 0 0;
padding: 0 200px 0 0;
color: @text-color-secondary;
line-height: @input-box-height;
text-align: center;
transform: translateX(-50%);
pointer-events: none;
}
&-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -90px;
}
&.@{calendar-prefix-cls}-time &-middle {
padding: 0 10px 0 0;
transform: translateX(-50%);
}
.@{calendar-prefix-cls}-today
:not(.@{calendar-prefix-cls}-disabled-cell)
:not(.@{calendar-prefix-cls}-last-month-cell)
:not(.@{calendar-prefix-cls}-next-month-btn-day) {
.@{calendar-prefix-cls}-date {
color: @primary-color;
background: @primary-2;
border-color: @primary-color;
}
}
.@{calendar-prefix-cls}-selected-start-date,
.@{calendar-prefix-cls}-selected-end-date {
.calendar-selected-cell;
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: 0;
}
.@{calendar-prefix-cls}-input-wrap {
position: relative;
height: @input-box-height;
}
.@{calendar-prefix-cls}-input,
.@{calendar-timepicker-prefix-cls}-input {
.input;
height: @input-height-sm;
padding-right: 0;
padding-left: 0;
line-height: @input-height-sm;
border: 0;
box-shadow: none;
&:focus {
box-shadow: none;
}
}
.@{calendar-timepicker-prefix-cls}-icon {
display: none;
}
&.@{calendar-prefix-cls}-week-number {
width: 574px;
.@{calendar-prefix-cls}-range-part {
width: 286px;
}
}
.@{calendar-prefix-cls}-year-panel,
.@{calendar-prefix-cls}-month-panel,
.@{calendar-prefix-cls}-decade-panel {
top: @input-box-height;
}
.@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
top: 0;
}
.@{calendar-prefix-cls}-decade-panel-table,
.@{calendar-prefix-cls}-year-panel-table,
.@{calendar-prefix-cls}-month-panel-table {
height: 208px;
}
.@{calendar-prefix-cls}-in-range-cell {
position: relative;
border-radius: 0;
> div {
position: relative;
z-index: 1;
}
&::before {
position: absolute;
top: 4px;
right: 0;
bottom: 4px;
left: 0;
display: block;
background: @item-active-bg;
border: 0;
border-radius: 0;
content: '';
}
}
.@{calendar-prefix-cls}-footer-extra {
float: left;
}
// `div` for selector specificity
div&-quick-selector {
text-align: left;
> a {
margin-right: 8px;
}
}
.@{calendar-prefix-cls},
.@{calendar-prefix-cls}-month-panel,
.@{calendar-prefix-cls}-year-panel,
.@{calendar-prefix-cls}-decade-panel {
&-header {
border-bottom: 0;
}
&-body {
border-top: @border-width-base @border-style-base @border-color-split;
}
}
&.@{calendar-prefix-cls}-time {
.@{calendar-timepicker-prefix-cls} {
top: 68px;
z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
width: 100%;
height: 207px;
&-panel {
height: 267px;
margin-top: -34px;
}
&-inner {
height: 100%;
padding-top: 40px;
background: none;
}
&-combobox {
display: inline-block;
height: 100%;
background-color: @component-background;
border-top: @border-width-base @border-style-base @border-color-split;
}
&-select {
height: 100%;
ul {
max-height: 100%;
}
}
}
.@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
margin-right: 8px;
}
.@{calendar-prefix-cls}-today-btn {
height: 22px;
margin: 8px 12px;
line-height: 22px;
}
}
&-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
height: 233px;
}
}
.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
.@{calendar-prefix-cls}-body {
border-top-color: transparent;
}
}

View File

@@ -0,0 +1,156 @@
.@{calendar-timepicker-prefix-cls} {
position: absolute;
top: 40px;
width: 100%;
background-color: @component-background;
&-panel {
position: absolute;
z-index: @zindex-picker;
width: 100%;
}
&-inner {
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
font-size: @font-size-base;
line-height: 1.5;
text-align: left;
list-style: none;
background-color: @component-background;
background-clip: padding-box;
outline: none;
}
&-combobox {
width: 100%;
}
&-column-1,
&-column-1 &-select {
width: 100%;
}
&-column-2 &-select {
width: 50%;
}
&-column-3 &-select {
width: 33.33%;
}
&-column-4 &-select {
width: 25%;
}
&-input-wrap {
display: none;
}
&-select {
position: relative; // Fix chrome weird render bug
float: left;
height: 226px;
overflow: hidden;
font-size: @font-size-base;
border-right: @border-width-base @border-style-base @border-color-split;
&:hover {
overflow-y: auto;
}
&:first-child {
margin-left: 0;
border-left: 0;
}
&:last-child {
border-right: 0;
}
ul {
width: 100%;
max-height: 206px;
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100%;
height: 24px;
margin: 0;
line-height: 24px;
text-align: center;
list-style: none;
cursor: pointer;
transition: all .3s;
user-select: none;
&:last-child::after {
display: block;
height: 202px;
content: '';
}
&:hover {
background: @item-hover-bg;
}
&:focus {
color: @primary-color;
font-weight: 600;
outline: none;
}
}
li&-option-selected {
font-weight: 600;
background: @time-picker-selected-bg;
}
li&-option-disabled {
color: @btn-disable-color;
&:hover {
background: transparent;
cursor: not-allowed;
}
}
}
}
.@{calendar-prefix-cls}-time {
.@{calendar-prefix-cls}-day-select {
display: inline-block;
padding: 0 2px;
color: @heading-color;
font-weight: 500;
line-height: 34px;
}
.@{calendar-prefix-cls}-footer {
position: relative;
height: auto;
&-btn {
text-align: right;
}
.@{calendar-prefix-cls}-today-btn {
float: left;
margin: 0;
}
.@{calendar-prefix-cls}-time-picker-btn {
display: inline-block;
margin-right: 8px;
&-disabled {
color: @disabled-color;
}
}
}
}

View File

@@ -0,0 +1,22 @@
.@{calendar-prefix-cls}-week-number {
&-cell {
opacity: 0.5;
}
.@{calendar-prefix-cls}-body tr {
cursor: pointer;
transition: all 0.3s;
&:hover {
background: @primary-1;
}
&.@{calendar-prefix-cls}-active-week {
font-weight: bold;
background: @primary-2;
}
.@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
color: @text-color;
background: transparent;
}
}
}

View File

@@ -0,0 +1,85 @@
.@{calendar-prefix-cls}-year-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
background: @component-background;
border-radius: @border-radius-base;
outline: none;
> div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
.@{calendar-prefix-cls}-year-panel-hidden {
display: none;
}
.@{calendar-prefix-cls}-year-panel-header {
.calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
position: relative;
}
.@{calendar-prefix-cls}-year-panel-body {
flex: 1;
}
.@{calendar-prefix-cls}-year-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
}
.@{calendar-prefix-cls}-year-panel-table {
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
.@{calendar-prefix-cls}-year-panel-cell {
text-align: center;
}
.@{calendar-prefix-cls}-year-panel-year {
display: inline-block;
height: 24px;
margin: 0 auto;
padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-sm;
transition: background 0.3s ease;
&:hover {
background: @item-hover-bg;
cursor: pointer;
}
}
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
color: @text-color-inverse;
background: @primary-color;
&:hover {
color: @text-color-inverse;
background: @primary-color;
}
}
.@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
.@{calendar-prefix-cls}-year-panel-year {
color: @disabled-color;
user-select: none;
}
}

View File

@@ -0,0 +1,7 @@
@import './index.less';
@import './patch.less';
// style dependencies
// deps-lint-skip: input
@import '../../input/style/entry.less';
@import '../../time-picker/style/entry.less';
@import '../../tag/style/entry.less';

2649
node_modules/ng-zorro-antd/date-picker/style/index.css generated vendored Normal file

File diff suppressed because it is too large Load Diff

404
node_modules/ng-zorro-antd/date-picker/style/index.less generated vendored Normal file
View File

@@ -0,0 +1,404 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './status';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.picker-padding(@input-height, @font-size, @padding-horizontal) {
// font height probably 22.0001 So use floor better
@font-height: floor(@font-size * @line-height-base) + 2;
@padding-top: max(((@input-height - @font-height) / 2), 0);
@padding-bottom: max(@input-height - @font-height - @padding-top, 0);
padding: @padding-top @padding-horizontal @padding-bottom;
}
.@{picker-prefix-cls} {
@arrow-size: @popover-arrow-width;
.reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
position: relative;
display: inline-flex;
align-items: center;
background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @control-border-radius;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
&:hover,
&-focused {
.hover();
}
&-focused {
.active();
}
&&-disabled {
background: @input-disabled-bg;
border-color: @select-border-color;
cursor: not-allowed;
}
&&-disabled &-suffix {
color: @disabled-color;
}
&&-borderless {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
// filled style
&&-filled {
background-color: @input-variant-filled-bg;
border-color: transparent;
box-shadow: none;
}
&&-filled:hover {
background-color: @input-variant-filled-hover-bg;
border-color: transparent;
box-shadow: none;
}
&&-filled:focus,
&&-filled&-focused {
.active();
background-color: transparent;
box-shadow: none;
}
&&-filled&-disabled,
&&-filled&[disabled] {
.disabled();
}
// underlined style
&&-underlined,
&&-underlined:hover,
&&-underlined:focus,
&&-underlined&-focused,
&&-underlined&-disabled,
&&-underlined&[disabled] {
background-color: transparent;
border-width: 0 0 @border-width-base;
border-radius: 0;
box-shadow: none;
}
&&-underlined:hover:not(&-focused):not(:focus) {
border-color: @input-border-color;
}
// ======================== Input =========================
&-input {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
> input {
.input();
flex: auto;
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
min-width: 1px;
height: auto;
padding: 0;
background: transparent;
border: 0;
&:focus {
box-shadow: none;
}
&[disabled] {
background: transparent;
}
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
&-placeholder {
> input {
color: @input-placeholder-color;
}
}
}
// Size
&-large {
.picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);
.@{picker-prefix-cls}-input > input {
font-size: @font-size-lg;
}
}
&-small {
.picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
}
&-suffix {
display: flex;
flex: none;
align-self: center;
margin-left: (@padding-xs / 2);
color: @disabled-color;
line-height: 1;
pointer-events: none;
> * {
vertical-align: top;
&:not(:last-child) {
margin-right: 8px;
}
}
}
&-clear {
position: absolute;
top: 50%;
right: 0;
color: @disabled-color;
line-height: 1;
background: @component-background;
transform: translateY(-50%);
cursor: pointer;
opacity: 0;
transition: opacity @animation-duration-slow, color @animation-duration-slow;
> * {
vertical-align: top;
}
&:hover {
color: @text-color-secondary;
}
}
&-separator {
position: relative;
display: inline-block;
width: 1em;
height: @font-size-lg;
color: @disabled-color;
font-size: @font-size-lg;
vertical-align: top;
cursor: default;
.@{picker-prefix-cls}-focused & {
color: @text-color-secondary;
}
.@{picker-prefix-cls}-range-separator & {
.@{picker-prefix-cls}-disabled & {
cursor: not-allowed;
}
}
}
// ======================== Range =========================
&-range {
position: relative;
display: inline-flex;
// Clear
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-base;
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
// Active bar
.@{picker-prefix-cls}-active-bar {
bottom: -@border-width-base;
height: 2px;
margin-left: @input-padding-horizontal-base;
background: @primary-color;
opacity: 0;
transition: all @animation-duration-slow ease-out;
pointer-events: none;
}
&.@{picker-prefix-cls}-focused {
.@{picker-prefix-cls}-active-bar {
opacity: 1;
}
}
&-separator {
align-items: center;
padding: 0 @padding-xs;
line-height: 1;
}
&.@{picker-prefix-cls}-small {
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-sm;
}
.@{picker-prefix-cls}-active-bar {
margin-left: @input-padding-horizontal-sm;
}
}
}
// ======================= Dropdown =======================
&-dropdown {
.reset-component();
--antd-arrow-background-color: @calendar-bg;
position: absolute;
// Fix incorrect position of picker popup
// https://github.com/ant-design/ant-design/issues/35590
top: -9999px;
left: -9999px;
z-index: @zindex-picker;
&-hidden {
display: none;
}
&-placement-bottomLeft, &-placement-bottomRight {
.@{picker-prefix-cls}-range-arrow {
top: 0;
display: block;
transform: translateY(-100%);
}
}
&-placement-topLeft, &-placement-topRight {
.@{picker-prefix-cls}-range-arrow {
bottom: 0;
display: block;
transform: translateY(100%) rotate(180deg);
}
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
}
&-dropdown-range {
margin-block: (@arrow-size * 2 / 3);
&-hidden {
display: none;
}
}
// Time picker with additional style
&-dropdown &-panel > &-time-panel {
padding-top: (@padding-xs / 2);
}
// ======================== Ranges ========================
&-ranges {
margin-bottom: 0;
padding: (@padding-xs / 2) @padding-sm;
overflow: hidden;
line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2);
text-align: left;
list-style: none;
> li {
display: inline-block;
}
// https://github.com/ant-design/ant-design/issues/23687
.@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
color: @primary-color;
background: @primary-1;
border-color: @primary-3;
cursor: pointer;
}
.@{picker-prefix-cls}-ok {
float: right;
margin-left: @padding-xs;
}
}
&-range-wrapper {
display: flex;
}
&-range-arrow {
position: absolute;
z-index: 1;
box-sizing: content-box;
margin-left: @input-padding-horizontal-base * 1.5;
transition: left @animation-duration-slow ease-out;
.roundedArrow(@arrow-size, 4px, @arrow-border-radius, var(--antd-arrow-background-color), @popover-arrow-box-shadow);
}
&-panel-container {
overflow: hidden;
vertical-align: top;
background: @calendar-bg;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
transition: margin @animation-duration-slow;
.@{picker-prefix-cls}-panels {
display: inline-flex;
flex-wrap: nowrap;
direction: ltr;
}
.@{picker-prefix-cls}-panel {
vertical-align: top;
background: transparent;
border: none;
border-radius: 0;
.@{picker-prefix-cls}-content,
table {
text-align: center;
}
}
}
// ===================== Compact Item Styles =====================
.compact-item(@picker-prefix-cls, null, ~'@{picker-prefix-cls}-focused');
}
@import './panel';
@import './rtl';

File diff suppressed because one or more lines are too long

677
node_modules/ng-zorro-antd/date-picker/style/panel.less generated vendored Normal file
View File

@@ -0,0 +1,677 @@
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
.@{picker-prefix-cls} {
@picker-arrow-size: 7px;
@picker-year-month-cell-width: 60px;
@picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
&-panel {
display: inline-flex;
flex-direction: column;
text-align: center;
background: @calendar-bg;
border: @border-width-base @border-style-base @picker-border-color;
border-radius: @border-radius-base;
outline: none;
&-focused {
border-color: @primary-color;
}
}
// ========================================================
// = Shared Panel =
// ========================================================
&-decade-panel,
&-year-panel,
&-quarter-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);
}
&-next-icon,
&-super-next-icon {
transform: rotate(135deg);
}
// ======================== 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: @picker-panel-cell-height;
transform: translateY(-50%);
transition: all @animation-duration-slow;
content: '';
}
// >>> Default
.@{cellClassName} {
position: relative;
z-index: 2;
display: inline-block;
min-width: @picker-panel-cell-height;
height: @picker-panel-cell-height;
line-height: @picker-panel-cell-height;
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-active-with-range-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-active-with-range-color;
}
}
&-in-view&-range-start::before {
left: 50%;
}
&-in-view&-range-end::before {
right: 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-start&-range-start&-range-end&-range-end-near-hover,
&-in-view&-range-hover-end&-range-start&-range-end&-range-start-near-hover,
&-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%);
transition: all @animation-duration-slow;
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-date-hover-range-color;
}
// range start border-radius
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
// range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
// 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-date-hover-range-color;
transition: all @animation-duration-slow;
content: '';
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
right: -5px - @border-width-base;
left: 0;
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
right: 0;
left: -5px - @border-width-base;
}
// Hover with range start & end
&-range-hover&-range-start::after {
right: 50%;
}
&-range-hover&-range-end::after {
left: 50%;
}
// Edge start
tr > &-in-view&-range-hover:first-child::after,
tr > &-in-view&-range-hover-end:first-child::after,
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::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;
}
// Edge end
tr > &-in-view&-range-hover:last-child::after,
tr > &-in-view&-range-hover-start:last-child::after,
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::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;
}
// >>> Disabled
&-disabled {
color: @disabled-color;
pointer-events: none;
.@{cellClassName} {
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;
}
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
&-decade-panel,
&-year-panel,
&-quarter-panel,
&-month-panel {
.@{picker-prefix-cls}-content {
height: @picker-panel-without-time-cell-height * 4;
}
.@{picker-cell-inner-cls} {
padding: 0 @padding-xs;
}
}
&-quarter-panel {
.@{picker-prefix-cls}-content {
height: 56px;
}
}
// ======================== Footer ========================
&-footer {
width: min-content;
min-width: 100%;
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;
}
&&-disabled {
color: @disabled-color;
cursor: not-allowed;
}
}
// ========================================================
// = Special =
// ========================================================
// ===================== Decade Panel =====================
&-decade-panel {
.@{picker-cell-inner-cls} {
padding: 0 (@padding-xs / 2);
}
.@{picker-prefix-cls}-cell::before {
display: none;
}
}
// ============= Year & Quarter & Month Panel =============
&-year-panel,
&-quarter-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: @picker-panel-cell-width * 7;
th {
width: @picker-panel-cell-width;
}
}
}
// ==================== 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}-content {
display: flex;
flex: auto;
height: @picker-time-panel-column-height;
}
&-column {
flex: 1 0 auto;
width: @picker-time-panel-column-width;
margin: 0;
padding: 0;
overflow-y: hidden;
text-align: left;
list-style: none;
transition: background @animation-duration-slow;
&::after {
display: block;
height: @picker-time-panel-column-height - @picker-time-panel-cell-height;
content: '';
.@{picker-prefix-cls}-datetime-panel & {
height: @picker-time-panel-column-height - @picker-time-panel-cell-height + 2 *
@border-width-base;
}
}
&:not(:first-child) {
border-left: @border-width-base @border-style-base @picker-border-color;
}
&-active {
background: @calendar-column-active-bg;
}
&: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: @picker-time-panel-cell-height;
margin: 0;
padding: 0 0 0 ((@picker-time-panel-column-width - 28px) / 2);
color: @text-color;
line-height: @picker-time-panel-cell-height;
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;
}
}
}
}
}
}
}
// Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
/* stylelint-disable selector-type-no-unknown,selector-no-vendor-prefix */
_:-ms-fullscreen,
:root {
.@{picker-prefix-cls}-range-wrapper {
.@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
.@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
padding: 21px 0;
}
}
}

View File

@@ -0,0 +1,34 @@
// inline mode
.@{picker-prefix-cls}-inline {
padding: 0;
border: none;
.@{picker-prefix-cls} {
&-range-arrow {
display: none !important;
}
&-dropdown {
z-index: auto;
}
}
}
// overwrite css in index.less to make sure picker popup is in the right position
.@{picker-prefix-cls}-dropdown {
top: unset;
left: unset;
}
// ensure table is correct width to display week numbers in date mode
.@{picker-prefix-cls}-panel-container.@{picker-prefix-cls}-week-number .@{picker-prefix-cls}-date-panel .@{picker-prefix-cls}-content {
width: 100%;
th {
width: inherit;
}
}
// make arrow in the right position in right direction
.@{picker-prefix-cls}-range-arrow {
margin-right: @input-padding-horizontal-base * 1.5;
}

246
node_modules/ng-zorro-antd/date-picker/style/rtl.less generated vendored Normal file
View File

@@ -0,0 +1,246 @@
.@{picker-prefix-cls} {
&-rtl {
direction: rtl;
}
&-suffix {
.@{picker-prefix-cls}-rtl & {
margin-right: (@padding-xs / 2);
margin-left: 0;
}
}
&-clear {
.@{picker-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
&-separator {
.@{picker-prefix-cls}-rtl & {
transform: rotate(180deg);
}
}
&-header {
&-view {
button {
&:not(:first-child) {
.@{picker-prefix-cls}-panel-rtl & {
margin-right: @padding-xs;
margin-left: 0;
}
}
}
}
}
// ======================== Range =========================
&-range {
// Clear
.@{picker-prefix-cls}-clear {
.@{picker-prefix-cls}-rtl& {
right: auto;
left: @input-padding-horizontal-base;
}
}
// Active bar
.@{picker-prefix-cls}-active-bar {
.@{picker-prefix-cls}-rtl& {
margin-right: @input-padding-horizontal-base;
margin-left: 0;
}
}
&.@{picker-prefix-cls}-small {
.@{picker-prefix-cls}-active-bar {
.@{picker-prefix-cls}-rtl& {
margin-right: @input-padding-horizontal-sm;
}
}
}
}
// ======================== Ranges ========================
&-ranges {
.@{picker-prefix-cls}-dropdown-rtl & {
text-align: right;
}
.@{picker-prefix-cls}-ok {
.@{picker-prefix-cls}-dropdown-rtl & {
float: left;
margin-right: @padding-xs;
margin-left: 0;
}
}
}
// ======================== Panel ========================
&-panel {
&-rtl {
direction: rtl;
}
}
&-prev-icon,
&-super-prev-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(135deg);
}
}
&-next-icon,
&-super-next-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(-45deg);
}
}
&-cell {
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
// ======================== Body ==========================
.picker-cell-inner(@cellClassName) {
.@{cellClassName} {
position: relative;
z-index: 2;
display: inline-block;
min-width: @picker-panel-cell-height;
height: @picker-panel-cell-height;
line-height: @picker-panel-cell-height;
border-radius: @border-radius-base;
transition: background @animation-duration-slow, border @animation-duration-slow;
}
&-in-view&-range-start::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
&-in-view&-range-end::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-in-view&-range-start&-range-end::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 50%;
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: -5px - @border-width-base;
}
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: -5px - @border-width-base;
left: 0;
}
}
// Hover with range start & end
&-range-hover&-range-start::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-range-hover&-range-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
// range start border-radius
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
.@{picker-prefix-cls}-panel-rtl & {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
.@{picker-prefix-cls}-panel-rtl & {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
// Edge start
tr > &-in-view&-range-hover:not(&-selected):first-child::after,
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
.@{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-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// Edge end
tr > &-in-view&-range-hover:not(&-selected):last-child::after,
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
.@{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-radius: @border-radius-base 0 0 @border-radius-base;
}
}
tr > &-in-view&-range-hover-start:last-child::after,
tr > &-in-view&-range-hover-end:first-child::after,
&-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after,
&-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after,
&-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after,
tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after,
tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
left: 6px;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base;
}
}
}
// ======================== Footer ========================
&-footer {
&-extra {
.@{picker-prefix-cls}-dropdown-rtl & {
direction: rtl;
text-align: right;
}
}
}
// ====================== Time Panel ======================
&-time-panel {
.@{picker-prefix-cls}-panel-rtl & {
direction: ltr;
}
}
}

View File

@@ -0,0 +1,38 @@
@import '../../input/style/mixin';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.picker-status-color(
@text-color: @input-color;
@border-color: @input-border-color;
@background-color: @input-bg;
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
&.@{picker-prefix-cls} {
&,
&:not(.@{picker-prefix-cls}-disabled):hover {
background-color: @background-color;
border-color: @border-color;
}
&-focused,
&:focus {
.active(@text-color, @hoverBorderColor, @outlineColor);
}
.@{picker-prefix-cls}-active-bar {
background: @hoverBorderColor;
}
}
}
.@{picker-prefix-cls} {
&-status-error {
.picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
}
&-status-warning {
.picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
}
}