test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: picker dark theme

Browse Source
This commit is contained in:
ycjcl868 2019-12-21 16:38:51 +08:00
parent d60b736762
commit d316190e41
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/date-picker/style/MonthPanel.less
View File

@ -61,7 +61,7 @@
&,
&:hover {
color: @disabled-color;
background: @disabled-bg;
background: @picker-basic-cell-disabled-bg;
cursor: not-allowed;
}
}

32
components/date-picker/style/panel.less
View File

@ -4,11 +4,7 @@
@picker-legacy-cell-cls: ~'@{ant-prefix}-calendar-date';
.@{picker-prefix-cls} {
@picker-basic-cell-hover-color: lighten(@primary-color, 40%);
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-border: @border-width-base @border-style-base @border-color-split;
@picker-arrow-size: 7px;
@picker-date-hover-range-border: @border-width-base dashed lighten(@primary-color, 20%);
@picker-panel-width: 280px;
@picker-year-month-cell-width: 60px;
@ -16,7 +12,7 @@
display: inline-block;
text-align: center;
background: @calendar-bg;
border: @picker-border;
border: @border-width-base @border-style-base @picker-border-color;
border-radius: @border-radius-base;
outline: none;
@ -44,7 +40,7 @@
display: flex;
padding: 0 @padding-xs;
color: @heading-color;
border-bottom: @picker-border;
border-bottom: @border-width-base @border-style-base @picker-border-color;
> * {
flex: none;
@ -246,8 +242,8 @@
top: 50%;
z-index: 0;
height: 24px;
border-top: @picker-date-hover-range-border;
border-bottom: @picker-date-hover-range-border;
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: '';
}
@ -313,7 +309,7 @@
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
left: 6px;
border-left: @picker-date-hover-range-border;
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;
}
@ -324,7 +320,7 @@
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
right: 6px;
border-right: @picker-date-hover-range-border;
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;
}
@ -339,7 +335,7 @@
}
&::before {
background: @disabled-bg;
background: @picker-basic-cell-disabled-bg;
}
}
&-disabled&-today .@{cellClassName}::before {
@ -379,7 +375,7 @@
.@{picker-prefix-cls}-cell {
&-disabled .@{picker-cell-inner-cls} {
background: @disabled-bg;
background: @picker-basic-cell-disabled-bg;
}
}
}
@ -399,7 +395,7 @@
border-bottom: @border-width-base @border-style-base transparent;
.@{picker-prefix-cls}-panel & {
border-top: @picker-border;
border-top: @border-width-base @border-style-base @picker-border-color;
}
&-extra {
@ -408,7 +404,7 @@
text-align: left;
&:not(:last-child) {
border-bottom: @picker-border;
border-bottom: @border-width-base @border-style-base @picker-border-color;
}
}
}
@ -457,12 +453,12 @@
.@{picker-prefix-cls}-cell-range-hover-start::after {
left: @hover-cell-fixed-distance;
border-left: @picker-date-hover-range-border;
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}-cell-range-hover-end::after {
right: @hover-cell-fixed-distance;
border-right: @picker-date-hover-range-border;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
@ -530,7 +526,7 @@
display: flex;
.@{picker-prefix-cls}-time-panel {
border-left: @picker-border;
border-left: @border-width-base @border-style-base @picker-border-color;
}
.@{picker-prefix-cls}-date-panel,
@ -573,7 +569,7 @@
transition: background @animation-duration-slow;
&:not(:first-child) {
border-left: @picker-border;
border-left: @border-width-base @border-style-base @picker-border-color;
}
&-active {

8
components/style/themes/dark.less
View File

@ -264,7 +264,7 @@
@select-dropdown-bg: @popover-background;
@select-clear-background: @component-background;
@select-selection-item-bg: fade(@white, 8);
@select-selection-item-border-color: #303030;
@select-selection-item-border-color: @border-color-split-popover;
// Cascader
// ---
@ -316,6 +316,10 @@
@time-picker-panel-inner-bg: @popover-background;
@month-panel-bg: @popover-background;
@year-panel-bg: @popover-background;
@picker-basic-cell-hover-color: @background-color-light;
@picker-basic-cell-hover-with-range-color: #303030;
@picker-basic-cell-disabled-bg: #303030;
@picker-border-color: @border-color-split-popover;
// Dropdown
// ---
@ -383,7 +387,7 @@
// ---
@slider-rail-background-color: #262626;
@slider-rail-background-color-hover: @border-color-base;
@slider-dot-border-color: #303030;
@slider-dot-border-color: @border-color-split-popover;
@slider-dot-border-color-active: @primary-4;
// Skeleton

5
components/style/themes/default.less
View File

@ -510,6 +510,11 @@
@time-picker-panel-inner-bg: @component-background;
@month-panel-bg: @component-background;
@year-panel-bg: @component-background;
@picker-basic-cell-hover-color: lighten(@primary-color, 40%);
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-basic-cell-disabled-bg: @disabled-bg;
@picker-border-color: @border-color-split;
@picker-date-hover-range-border-color: lighten(@primary-color, 20%);
// Calendar
// ---