Skip to content

Commit

Permalink
fix(date-picker, time-picker): fix color and use less token (#1897)
Browse files Browse the repository at this point in the history 
Co-authored-by: maxin <maxin@growingio.com>
  • Loading branch information
@nnmax
nnmax and maxin authored Mar 10, 2022
1 parent 5bf67ca commit ae3f606
Show file tree
Hide file tree
Showing 10 changed files with 420 additions and 372 deletions.
649 changes: 363 additions & 286 deletions src/card/demo/Card.stories.tsx
View file

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions src/date-range-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';

@date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker';

Expand Down
4 changes: 1 addition & 3 deletions src/past-time-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';

@past-time-picker-prefix-cls: ~'@{component-prefix}-past-time-picker';

Expand Down
46 changes: 19 additions & 27 deletions src/static-date-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';

@new-date-picker-prefix-cls: ~'@{component-prefix}-picker';
@icon-prefix-cls: ~'@{component-prefix}-icon';
@static-date-picker-prefix-cls: ~'@{component-prefix}-picker';

.@{new-date-picker-prefix-cls} {
.@{static-date-picker-prefix-cls} {
&-decade-btn,
&-year-btn,
&-month-btn {
height: 24px;
.font(@weight: 500);

color: @gray-5;
line-height: 22px;
.text-h4();
background: @gray-0;
border: none;
border-radius: 4px;
Expand All @@ -22,12 +17,12 @@
&-decade-btn:hover,
&-year-btn:hover,
&-month-btn:hover {
background: @palette-gray-2;
background: @gray-1;
}
&-decade-btn:active,
&-year-btn:active,
&-month-btn:active {
background: @palette-gray-3;
background: @gray-2;
}

&-panel {
Expand All @@ -36,7 +31,7 @@
background: @gray-0;
border-radius: 4px;
outline: 0;
filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1));
.elevation(1);
}

&-header {
Expand All @@ -45,7 +40,7 @@
box-sizing: content-box;
height: 24px;
padding: 12px 8px 11px;
border-bottom: 1px solid @palette-gray-3;
border-bottom: 1px solid @gray-2;
border-radius: 4px 4px 0 0;

&-super-prev-btn,
Expand All @@ -61,7 +56,7 @@
border-radius: 4px;
cursor: pointer;

.@{icon-prefix-cls} {
.@{component-prefix}-icon {
color: @gray-5;
}
}
Expand All @@ -75,21 +70,20 @@
&-super-next-btn:hover,
&-prev-btn:hover,
&-next-btn:hover {
background: @palette-gray-2;
background: @gray-1;
}
&-super-prev-btn:active,
&-super-next-btn:active,
&-prev-btn:active,
&-next-btn:active {
background: @palette-gray-3;
background: @gray-2;
}

&-view {
flex-grow: 1;
color: @gray-5;
line-height: 24px;
text-align: center;
.font(@weight: 500);
.text-h4();
}
}

Expand All @@ -114,11 +108,9 @@
}

tr > th {
.font();
.text-body1();
margin: 5px;
color: @gray-5;

line-height: 22px;
text-align: center;
}
}
Expand All @@ -131,7 +123,7 @@
cursor: pointer;
}

&:not(&-disabled)::before {
&::before {
position: absolute;
right: 0;
left: 0;
Expand All @@ -146,14 +138,15 @@
display: inline-block;
min-width: 24px;
height: 30px;
font-weight: 400;
font-size: 14px;
line-height: 30px;
text-align: center;
border-radius: 4px;
.font(@weight: normal);
}
&-in-view:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover):not(&-range-hover-start):not(&-range-hover-end)
&-inner:hover {
background-color: @palette-gray-2;
background-color: @gray-1;
}

&-in-view {
Expand All @@ -175,8 +168,7 @@
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid @blue-3;
border-radius: 4px;
.border(2, @blue-3);
content: '';
}

Expand All @@ -192,7 +184,7 @@
cursor: not-allowed;

&::before {
background: @palette-gray-1;
background: @gray-1;
}
}
}
Expand Down
27 changes: 12 additions & 15 deletions src/static-date-range-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';

@date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker';
@static-date-range-picker-prefix-cls: ~'@{component-prefix}-picker';
@import (reference) '../../stylesheet/variables/index.less';
@import (reference) '../../static-date-picker/style/index.less';
@import (reference) '../../date-range-picker/style/index.less';

.@{date-range-picker-prefix-cls} {
display: flex;
Expand All @@ -16,26 +13,26 @@
}

&__left {
.@{static-date-range-picker-prefix-cls}-body {
border-right: 1px solid @palette-gray-3;
.@{static-date-picker-prefix-cls}-body {
border-right: 1px solid @gray-2;
}
}
}

.@{static-date-range-picker-prefix-cls} {
.@{static-date-picker-prefix-cls} {
&-cell {
&-in-view&-range-start,
&-in-view&-range-end {
color: @gray-0;
}
&-in-view&-range-start &-inner,
&-in-view&-range-end &-inner {
background: @palette-blue-4;
background: @blue-3;
}
&-in-view&-range-start:not(&-range-start-single)::before,
&-in-view&-range-end:not(&-range-end-single)::before,
&-in-view&-in-range::before {
background-color: @palette-blue-1;
background-color: @blue-1;
}
&-in-view&-range-start::before {
left: 50%;
Expand All @@ -57,8 +54,8 @@
z-index: 0;
box-sizing: content-box;
height: 22px;
border-top: 1px dashed @palette-blue-4;
border-bottom: 1px dashed @palette-blue-4;
border-top: 1px dashed @blue-3;
border-bottom: 1px dashed @blue-3;
content: '';
}
}
Expand All @@ -70,7 +67,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: 1px dashed @palette-blue-4;
border-left: 1px dashed @blue-3;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Expand All @@ -82,7 +79,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: 1px dashed @palette-blue-4;
border-right: 1px dashed @blue-3;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
Expand Down
20 changes: 6 additions & 14 deletions src/static-past-time-picker/style/RangePanel.less
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';
@import (reference) '../../date-range-picker/style/index.less';

@range-panel-prefix-cls: ~'@{component-prefix}-range-panel';
@date-picker-prefix-cls: ~'@{component-prefix}-picker-panel';
@date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker';
@range-input-trigger-prefix-cls: ~'@{component-prefix}-range-input-trigger';

.@{range-panel-prefix-cls} {
Expand All @@ -15,11 +13,8 @@
border: none;

&__text {
.font();

/* $palette/black/6 */
color: #313e75;

.text-body2();
color: @gray-5;
line-height: 30px;
}

Expand All @@ -37,18 +32,15 @@
&__divider {
height: 0;
margin: 0;

/* Border/Border-1 */
border-bottom: 1px solid #e7eaf9;
border-bottom: 1px solid @gray-2;
}

&__body {
padding: 16px;

& > .@{date-picker-prefix-cls},
.@{date-range-picker-prefix-cls} {
border: 1px solid #ebedf5;
border-radius: 4px;
.border(2, @gray-2);
box-shadow: none;
filter: none;
}
Expand Down
2 changes: 1 addition & 1 deletion src/static-time-picker/StaticTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import defaultLocale from './locales/zh-CN';
import { StaticTimePickerProps } from './interfaces';

export function StaticTimePicker({ className, showSecond = false, renderFooter, ...restProps }: StaticTimePickerProps) {
const prefixCls = usePrefixCls('new-time-picker');
const prefixCls = usePrefixCls('time-picker');
const locale = useLocale<Locale>('StaticTimePicker') || defaultLocale;

return (
Expand Down
34 changes: 15 additions & 19 deletions src/static-time-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';

@new-time-picker-prefix-cls: ~'@{component-prefix}-new-time-picker';
@static-time-picker-prefix-cls: ~'@{component-prefix}-time-picker';

.@{new-time-picker-prefix-cls} {
.@{static-time-picker-prefix-cls} {
&-panel {
display: flex;
flex-direction: column;
width: fit-content;
height: fit-content;
padding-top: 4px;
background-color: @gray-0;
filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1));
.elevation(1);
}
&--three-columns {
.@{new-time-picker-prefix-cls}-time-panel-column {
padding-right: 10px;
padding-left: 10px;
.@{static-time-picker-prefix-cls}-time-panel-column {
padding-right: 8px;
padding-left: 8px;
}
}

Expand All @@ -29,14 +27,14 @@

&-time-panel {
&-column {
width: 40px;
box-sizing: border-box;
width: 80px;
height: 240px;
margin: 0;
padding: 8px 20px;
padding: 8px;
overflow: hidden scroll;
list-style-type: none;
border-right: 1px solid @palette-gray-3;

border-right: 1px solid @gray-2;
.scrollbar();
}
&-column:last-child {
Expand All @@ -47,22 +45,20 @@
margin-top: 4px;
padding: 4px 12px;
color: @gray-5;
.font();
line-height: 22px;
.text-body1();
list-style-type: none;
background-color: @gray-0;
border-radius: 4px;
cursor: pointer;

&:hover {
background-color: @palette-gray-3;
background-color: @gray-1;
}

&-selected,
&:active {
color: @blue-3;
font-weight: 500;
background-color: @palette-gray-1;
background-color: @gray-1;
}

&-inner {
Expand All @@ -72,7 +68,7 @@
}

&-footer {
border-top: 1px solid @palette-gray-3;
border-top: 1px solid @gray-2;

&-extra {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion src/time-picker/TimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export const TimePicker: React.FC<TimePickerProps> = (props: TimePickerProps) =>
<Popover
data-testid={DEFAULT_DATA_TESTID}
content={overlay}
trigger={['click', 'focus']}
trigger="click"
visible={visible}
placement="bottomLeft"
overlayClassName={overlayCls}
Expand Down
4 changes: 1 addition & 3 deletions src/time-picker/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../stylesheet/index.less';
@import '../../stylesheet/mixin/index.less';
@import '../../stylesheet/variables/index.less';
@import (reference) '../../stylesheet/variables/index.less';

@time-picker-prefix-cls: ~'@{component-prefix}-time-picker';

Expand Down

1 comment on commit ae3f606

@vercel
Copy link

@vercel vercel bot commented on ae3f606 Mar 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.