mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-18 14:50:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(date-picker): use cssr, wip

Browse Source
This commit is contained in:
07akioni 2020-08-19 01:43:44 +08:00
parent bfcc78642d
commit 36340d8e11
7 changed files with 149 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/_styles/DatePicker.scss
View File

@ -2,6 +2,12 @@
@include themes-mixin {
$calendar-width: 288px;
$weekdays-padding: 10px 0;
$input-padding: 8px 14px;
$dates-padding: 2px 0 4px 0;
$header-padding: 6px 14px 0 14px;
$divider-margin: 0 14px;
$action-height: 38px;
@include once {
@include b(date-picker) {
position: relative;
@ -35,12 +41,16 @@
margin-top: 4px;
margin-bottom: 4px;
width: 288px;
display: grid;
grid-template-columns: 1fr;
border-radius: $--n-date-picker-border-radius;
@include b(time-picker) {
z-index: 1;
}
@include b(date-panel-calendar) {
width: $calendar-width;
display: grid;
grid-template-columns: 1fr;
}
}
background: $--date-picker-background-color;
@ -93,7 +103,7 @@
}
@include b(date-panel-input-wrapper) {
@include once {
padding: 8px 14px;
padding: $input-padding;
display: flex;
justify-content: space-between;
@include b(input) {
@ -120,9 +130,7 @@
box-sizing: border-box;
height: 30px;
align-items: center;
padding-top: 8px;
padding-left: 14px;
padding-right: 14px;
padding: $header-padding;
@include e(prev, next, fast-prev, fast-next) {
cursor: pointer;
width: 14px;
@ -148,9 +156,13 @@
}
@include b(date-panel-weekdays) {
@include once {
padding: 9px 18px 10px 18px;
display: flex;
justify-content: space-between;
padding: $weekdays-padding;
display: grid;
margin: auto;
grid-template-columns: repeat(7, 38px);
grid-template-rows: repeat(1, 15px);
align-items: center;
justify-items: center;
}
@include e(day) {
@include once {
@ -164,9 +176,13 @@
}
@include b(date-panel-dates) {
@include once {
padding: 2px 11px 3px 11px;
display: flex;
justify-content: space-between;
padding: $dates-padding;
margin: auto;
display: grid;
grid-template-columns: repeat(7, 38px);
grid-template-rows: repeat(6, 32px);
align-items: center;
justify-items: center;
flex-wrap: wrap;
}
@include b(date-panel-date) {
@ -177,7 +193,6 @@
line-height: 24px;
text-align: center;
font-size: 13px;
margin: 4px 7px;
border-radius: 3px;
z-index: 0;
cursor: pointer;
@ -225,11 +240,6 @@
}
}
@include m(selected) {
@include once {
border-radius: 3px;
width: 24px;
margin: 4px 7px;
}
color: map-get($--date-picker-item-text-color, 'active');
background-color: map-get($--date-picker-item-background-color, 'active');
&::after {
@ -251,7 +261,7 @@
}
@include e(divider) {
@include once {
margin: 0 14px;
margin: $divider-margin;
height: 1px;
}
background-color: $--date-picker-divider-color;
@ -259,7 +269,7 @@
@include b(date-panel-actions) {
@include once {
flex: 1;
height: 38px;
height: $action-height;
display: flex;
align-items: center;
justify-content: flex-end;

6
src/_styles/themes/common.scss
View File

@ -36,7 +36,11 @@ $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);
$--n-popmenu-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18) !global;
$--n-popmenu-box-shadow: (
0 3px 6px -4px rgba(0, 0, 0, .16),
0 6px 12px 0 rgba(0, 0, 0, .08),
0 9px 18px 8px rgba(0, 0, 0, .04)
) !global;
/** alert */
$--n-alert-border-radius: $--n-border-radius;

67
src/date-picker/src/styles/themed-base.cssr.js
View File

@ -1,6 +1,71 @@
import { c } from '../../../_utils/cssr'
import { c, cTB, cB, cM } from '../../../_utils/cssr'
import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
import pxfy from '../../../_utils/css/pxfy'
export default c([
({ props }) => {
const panelWidth = 288
const {
transformDebounceScale
} = props.$base
const {
itemTextColor,
itemTextColorDisabled,
itemTextColorMatched,
itemTextColorCurrent,
itemSupColor,
itemSupColorMatch,
itemColorHover,
itemColorActive,
panelColor,
panelTextColor,
panelIconColor,
panelHeaderTextColor,
panelDividerColor,
panelBoxShadow,
panelBorderRadius,
pickerTextDecorationColor
} = props.$local
return cTB('date-picker', {
position: 'relative'
}, [
cM('invalid', [
c('input', {
textDecoration: 'line-through',
textDecorationColor: pickerTextDecorationColor
})
]),
cM('start-invalid', [
c('input:nth-of-type(1)', {
textDecoration: 'line-through',
textDecorationColor: pickerTextDecorationColor
})
]),
cM('end-invalid', [
c('input:nth-of-type(2)', {
textDecoration: 'line-through',
textDecorationColor: pickerTextDecorationColor
})
]),
cB('data-panel', {
outline: 'none',
transform: transformDebounceScale,
marginTop: '4px',
marginBottom: '4px',
width: pxfy(panelWidth),
borderRadius: panelBorderRadius,
backgroundColor: panelColor,
boxShadow: panelBoxShadow,
color: panelTextColor
}, [
fadeInScaleUpTransition(),
cB('time-picker', {
zIndex: 1
}),
cB('date-panel-calendar', {
width: '288px'
})
])
])
}
])

20
src/date-picker/styles/dark.js
View File

@ -1,9 +1,27 @@
import create from '../../styles/_utils/create-component-base'
import { changeColor } from '../../_utils/color/index'
export default create({
theme: 'dark',
name: 'DatePicker',
getDerivedVariables ({ base, derived }) {
return {}
return {
itemTextColor: derived.secondaryTextOverlayColor,
itemTextColorDisabled: derived.disabledTextOverlayColor,
itemTextColorMatched: derived.popoverBackgroundColor,
itemTextColorCurrent: derived.primaryColor,
itemSupColor: derived.primaryColor,
itemSupColorMatch: derived.popoverBackgroundColor,
itemColorHover: changeColor(derived.primaryColor, { alpha: 0.5 }),
itemColorActive: derived.primaryColor,
panelColor: derived.popoverBackgroundColor,
panelTextColor: derived.secondaryTextOverlayColor,
panelIconColor: derived.iconOverlayColor,
panelHeaderTextColor: derived.primaryTextOverlayColor,
panelDividerColor: derived.dividerOverlayColor,
panelBorderRadius: base.borderRadius,
panelBoxShadow: derived.popoverBoxShadow,
pickerTextDecorationColor: derived.secondaryTextOverlayColor
}
}
})

20
src/date-picker/styles/light.js
View File

@ -1,9 +1,27 @@
import create from '../../styles/_utils/create-component-base'
import { changeColor } from '../../_utils/color/index'
export default create({
theme: 'light',
name: 'DatePicker',
getDerivedVariables ({ base, derived }) {
return {}
return {
itemTextColor: derived.secondaryTextColor,
itemTextColorDisabled: derived.disabledTextColor,
itemTextColorMatched: derived.popoverBackgroundColor,
itemTextColorCurrent: derived.primaryColor,
itemSupColor: derived.primaryColor,
itemSupColorMatch: derived.popoverBackgroundColor,
itemColorHover: changeColor(derived.primaryColor, { alpha: 0.1 }),
itemColorActive: derived.primaryColor,
panelColor: derived.popoverBackgroundColor,
panelTextColor: derived.secondaryTextColor,
panelIconColor: derived.iconColor,
panelHeaderTextColor: derived.primaryTextColor,
panelDividerColor: derived.dividerColor,
panelBoxShadow: derived.popoverBoxShadow,
panelBorderRadius: base.borderRadius,
pickerTextDecorationColor: derived.secondaryTextColor
}
}
})

8
src/styles/base/dark.js
View File

@ -70,7 +70,9 @@ export default create({
successHover: '#7fe7c4',
successDefault: '#63e2b7',
successActive: '#5acea7',
successHs: 'rgb(42, 148, 125)'
successHs: 'rgb(42, 148, 125)',
boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
}, commonVariables)
},
getDerivedVariables (base) {
@ -197,7 +199,9 @@ export default create({
disabledOpacity: base.alphaDisabled,
disabledInputBackgroundColor: neutral(base.alphaDisabledInput),
disabledInputBackgroundOverlayColor: overlay(base.alphaDisabledInput),
messageColoredBoxShadow: null
messageColoredBoxShadow: null,
popoverBoxShadow: base.boxShadow2
}
return derived
}

8
src/styles/base/light.js
View File

@ -70,7 +70,9 @@ export default create({
successHover: '#36ad6a',
successDefault: '#18a058',
successActive: '#0c7a43',
successHs: '#36ad6a'
successHs: '#36ad6a',
boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
}, commonVariables)
},
getDerivedVariables (base) {
@ -197,7 +199,9 @@ export default create({
disabledOpacity: base.alphaDisabled,
disabledInputBackgroundColor: neutral(base.alphaDisabledInput),
disabledInputBackgroundOverlayColor: overlay(base.alphaDisabledInput),
messageColoredBoxShadow: '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
messageColoredBoxShadow: '0px 2px 18px 0px rgba(0, 0, 0, 0.27)',
popoverBoxShadow: base.boxShadow2
}
return derived
}