mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(dynamic-input, message, pagination, backtop, breadcrumb): update style (#336)

Browse Source
This commit is contained in:
07akioni 2020-11-23 00:59:06 +08:00
parent 5bc3fefe91
commit 523480a7aa
25 changed files with 448 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/_deprecated/icons/back-top.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<svg
viewBox="0 0 40 40"
>
<title>BackTop</title>
<g>
<path
d="M30,8A20,20,0,1,0,50,28,20,20,0,0,0,30,8Zm8,23.8a1.65,1.65,0,0,1-2.36,0l-4-3.94V36.4a1.67,1.67,0,0,1-3.34,0V28l-4,3.76a1.65,1.65,0,0,1-2.36,0,1.48,1.48,0,0,1,0-2.25l7-6.67a1.65,1.65,0,0,1,2.36,0L38,29.45A1.59,1.59,0,0,1,38,31.8Zm2.36-10.61H19.67a1.6,1.6,0,1,1,0-3.19H40.33a1.6,1.6,0,1,1,0,3.19Z"
transform="translate(-10 -8)"
/>
</g>
</svg>
</template>

20
src/back-top/src/BackTop.vue
View File

@ -30,19 +30,9 @@
@click="handleClick"
>
<slot>
<div class="n-back-top__default-button">
<svg
viewBox="0 0 40 40"
>
<title>BackTop</title>
<g>
<path
d="M30,8A20,20,0,1,0,50,28,20,20,0,0,0,30,8Zm8,23.8a1.65,1.65,0,0,1-2.36,0l-4-3.94V36.4a1.67,1.67,0,0,1-3.34,0V28l-4,3.76a1.65,1.65,0,0,1-2.36,0,1.48,1.48,0,0,1,0-2.25l7-6.67a1.65,1.65,0,0,1,2.36,0L38,29.45A1.59,1.59,0,0,1,38,31.8Zm2.36-10.61H19.67a1.6,1.6,0,1,1,0-3.19H40.33a1.6,1.6,0,1,1,0,3.19Z"
transform="translate(-10 -8)"
/>
</g>
</svg>
</div>
<n-icon>
<back-top-icon />
</n-icon>
</slot>
</div>
</transition>
@ -63,11 +53,13 @@ import { formatLength, warn } from '../../_utils'
import styles from './styles'
import getTarget from '../../_utils/dom/get-target'
import { NBaseLazyTeleport } from '../../_base'
import BackTopIcon from './BackTopIcon.vue'
export default {
name: 'BackTop',
components: {
NBaseLazyTeleport
NBaseLazyTeleport,
BackTopIcon
},
mixins: [
configurable,

18
src/back-top/src/BackTopIcon.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill-rule="evenodd">
<g transform="translate(-139.000000, -4423.000000)" fill-rule="nonzero">
<g transform="translate(120.000000, 4285.000000)">
<g transform="translate(7.000000, 126.000000)">
<g transform="translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)">
<g transform="translate(4.000000, 2.000000)">
<path d="M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" />
<path d="M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</template>

73
src/back-top/src/styles/themed-base.cssr.js
View File

@ -1,15 +1,20 @@
import { c, cE, cTB, cM } from '../../../_utils/cssr'
import fadeInScaleIpTransition from '../../../_styles/transitions/fade-in-scale-up'
import { c, cB, cTB, cM } from '../../../_utils/cssr'
import fadeInScaleIpTransition from '../../../styles/_transitions/fade-in-scale-up'
export default c([
({ props }) => {
const {
color,
colorHover,
colorActive,
boxShadow,
boxShadowHover,
boxShadowPressed
boxShadowPressed,
iconColor,
iconColorHover,
iconColorPressed,
width,
height,
iconSize,
borderRadius
} = props.$local
const {
cubicBezierEaseInOut
@ -20,42 +25,54 @@ export default c([
position: fixed;
right: 40px;
bottom: 40px;
min-width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut};
border-radius: ${borderRadius};
height: ${height};
min-width: ${width};
box-shadow: ${boxShadow};
background-color: ${color};
`
}, [
fadeInScaleIpTransition(),
cM('transition-disabled', {
transition: 'none !important'
}),
cE('default-button', {
cB('icon', {
raw: `
transition: box-shadow .3s ${cubicBezierEaseInOut}, fill .3s ${cubicBezierEaseInOut};
border-radius: 20px;
height: 40px;
width: 40px;
fill: ${color};
box-shadow: ${boxShadow};
font-size: ${iconSize};
fill: ${iconColor}
`
}),
c('svg', {
raw: `
pointer-events: none;
`
}),
c('&:hover', {
raw: `
box-shadow: ${boxShadowHover};
`
}, [
c('svg', {
pointerEvents: 'none'
}),
c('&:hover', {
raw: `
box-shadow: ${boxShadowHover};
fill: ${colorHover};
`
}),
c('&:active', {
raw: `
box-shadow: ${boxShadowPressed};
fill: ${colorActive};
`
cB('icon', {
fill: iconColorHover,
stroke: iconColorHover
})
]),
c('&:active', {
raw: `
box-shadow: ${boxShadowPressed};
`
}, [
cB('icon', {
fill: iconColorPressed,
stroke: iconColorPressed
})
])
])

6
src/back-top/styles/_common.js Normal file
View File

@ -0,0 +1,6 @@
export default {
width: '40px',
height: '40px',
borderRadius: '20px',
iconSize: '24px'
}

17
src/back-top/styles/dark.js
View File

@ -1,22 +1,25 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from '../../_utils/color/index'
import commonVariables from './_common.js'
export default create({
theme: 'dark',
name: 'BackTop',
getDerivedVariables ({ base, derived }) {
const {
primaryColor,
popoverColor,
textColorSecondaryOverlay,
primaryColorHover,
primaryColorPressed
} = derived
return {
color: 'rgba(255,255,255,0.3)',
colorHover: primaryColorHover,
colorPressed: primaryColorPressed,
...commonVariables,
color: popoverColor,
iconColor: textColorSecondaryOverlay,
iconColorHover: primaryColorHover,
iconColorPressed: primaryColorPressed,
boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
boxShadowHover: `0 2px 12px 0px ${changeColor(primaryColor, { alpha: 0.5 })}`,
boxShadowPressed: `0 2px 12px 0px ${changeColor(primaryColor, { alpha: 0.5 })}`
boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'
}
}
})

15
src/back-top/styles/light.js
View File

@ -1,13 +1,22 @@
import create from '../../_styles/utils/create-component-base'
import commonVariables from './_common.js'
export default create({
theme: 'light',
name: 'BackTop',
getDerivedVariables ({ base, derived }) {
const {
popoverColor,
textColorSecondary,
primaryColorHover,
primaryColorPressed
} = derived
return {
color: 'rgba(0, 0, 0, .6)',
colorHover: 'rgba(0, 0, 0, .5)',
colorActive: 'rgba(0, 0, 0, .7)',
...commonVariables,
color: popoverColor,
iconColor: textColorSecondary,
iconColorHover: primaryColorHover,
iconColorPressed: primaryColorPressed,
boxShadow: '0 2px 8px 0px rgba(0, 0, 0, .12)',
boxShadowHover: '0 2px 12px 0px rgba(0, 0, 0, .18)',
boxShadowPressed: '0 2px 12px 0px rgba(0, 0, 0, .18)'

18
src/breadcrumb/src/styles/themed-base.cssr.js
View File

@ -8,14 +8,17 @@ export default c([
separatorColor,
itemTextColor,
itemTextColorHover,
itemTextColorPressed,
itemTextColorActive,
itemTextColorMatch
fontSize,
fontWeightActive
} = props.$local
return cTB(
'breadcrumb', {
whiteSpace: 'nowrap'
}, [
cB('breadcrumb-item', {
fontSize: fontSize,
transition: `
color .3s ${cubicBezierEaseInOut}
`
@ -50,19 +53,22 @@ export default c([
]),
c('&:active', [
cB('icon', {
color: itemTextColorActive
color: itemTextColorPressed
}),
cE('link', {
color: itemTextColorActive
color: itemTextColorPressed
})
]),
c('&:last-child', [
cE('link', {
cursor: 'unset',
color: itemTextColorMatch
raw: `
font-weight: ${fontWeightActive};
cursor: unset;
`,
color: itemTextColorActive
}),
cB('icon', {
color: itemTextColorMatch
color: itemTextColorActive
}),
cE('separator', {
display: 'none'

4
src/breadcrumb/styles/_common.js Normal file
View File

@ -0,0 +1,4 @@
export default {
fontSize: '14px',
fontWeightActive: '400'
}

6
src/breadcrumb/styles/dark.js
View File

@ -1,14 +1,16 @@
import create from '../../_styles/utils/create-component-base'
import commonVariables from './_common'
export default create({
theme: 'dark',
name: 'Breadcrumb',
getDerivedVariables ({ base, derived }) {
return {
...commonVariables,
itemTextColor: derived.textColor3Overlay,
itemTextColorHover: derived.primaryColorHover,
itemTextColorActive: derived.primaryColorPressed,
itemTextColorMatch: derived.textColor2Overlay,
itemTextColorPressed: derived.primaryColorPressed,
itemTextColorActive: derived.textColor2Overlay,
separatorColor: derived.textColor3Overlay
}
}

6
src/breadcrumb/styles/light.js
View File

@ -1,14 +1,16 @@
import create from '../../_styles/utils/create-component-base'
import commonVariables from './_common'
export default create({
theme: 'light',
name: 'Breadcrumb',
getDerivedVariables ({ base, derived }) {
return {
...commonVariables,
itemTextColor: derived.textColor3,
itemTextColorHover: derived.primaryColorHover,
itemTextColorActive: derived.primaryColorPressed,
itemTextColorMatch: derived.textColor2,
itemTextColorPressed: derived.primaryColorPressed,
itemTextColorActive: derived.textColor2,
separatorColor: derived.textColor3
}
}

5
src/dynamic-input/src/styles/themed-base.cssr.js
View File

@ -2,6 +2,9 @@ import { c, cB, cM, cE } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
actionMargin
} = props.$local
return [
cB('dynamic-input', {
raw: `
@ -38,12 +41,12 @@ export default c([
]),
cE('action', {
raw: `
width: 80px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-shrink: 0;
flex-grow: 0;
margin: ${actionMargin}
`
}, [
cM('icon', {

3
src/dynamic-input/styles/_common.js Normal file
View File

@ -0,0 +1,3 @@
export default {
actionMargin: '0 0 0 20px'
}

3
src/dynamic-input/styles/dark.js
View File

@ -1,6 +1,7 @@
import create from '../../_styles/utils/create-component-base'
import inputStyle from '../../input/styles/light'
import buttonStyle from '../../button/styles/light'
import commonVariables from './_common'
export default create({
theme: 'dark',
@ -11,7 +12,7 @@ export default create({
],
getDerivedVariables ({ derived }) {
return {
...commonVariables
}
}
})

3
src/dynamic-input/styles/light.js
View File

@ -1,6 +1,7 @@
import create from '../../_styles/utils/create-component-base'
import inputStyle from '../../input/styles/light'
import buttonStyle from '../../button/styles/light'
import commonVariables from './_common'
export default create({
theme: 'light',
@ -11,7 +12,7 @@ export default create({
],
getDerivedVariables ({ derived }) {
return {
...commonVariables
}
}
})

2
src/message/src/Message.js
View File

@ -51,8 +51,6 @@ export default {
class: 'n-message__icon'
}, [
h(NIcon, {
size: 20
}, {
default: () => [
h(NIconSwitchTransition, null, {
default: () => [

112
src/message/src/styles/themed-base.cssr.js
View File

@ -14,11 +14,23 @@ function typeStyle (
}, [
cE('icon', [
cB('icon', {
raw: `
fill: ${pallete[createKey('iconColor', type)]};
stroke: ${pallete[createKey('iconColor', type)]};
`
color: pallete[createKey('iconColor', type)]
})
]),
cE('close', [
cB('icon', {
raw: `
cursor: pointer;
color: ${pallete[createKey('closeColor', type)]};
`
}, [
c('&:hover', {
color: pallete[createKey('closeColorHover', type)]
}),
c('&:active', {
color: pallete[createKey('closeColorPressed', type)]
})
])
])
])
}
@ -26,12 +38,14 @@ function typeStyle (
export default c([
({ props }) => {
const {
closeColor,
closeColorHover,
closeColorPressed,
closeColorLoading,
closeColorHoverLoading,
closeColorPressedLoading
height,
padding,
paddingClosable,
maxWidth,
iconMargin,
closeMargin,
closeSize,
iconSize
} = props.$local
const {
cubicBezierEaseInOut
@ -39,6 +53,7 @@ export default c([
return cTB('message', {
raw: `
display: flex;
align-items: center;
transition:
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
@ -47,37 +62,38 @@ export default c([
transform .3s ${cubicBezierEaseInOut},
max-height .3s ${cubicBezierEaseInOut},
margin-bottom .3s ${cubicBezierEaseInOut};
max-height: 40px;
opacity: 1;
margin-bottom: 12px;
padding: 0 40px;
height: 40px;
padding: ${padding};
height: ${height};
max-height: ${height};
border-radius: 20px;
flex-shrink: 0;
font-weight: 400;
overflow: hidden;
max-width: ${maxWidth};
`
}, [
cE('content', {
raw: `
display: inline-block;
height: 40px;
line-height: 40px;
height: ${height};
line-height: ${height};
font-size: 15px;
`
}),
cE('icon', {
raw: `
margin-right: 10px;
margin-right: ${iconMargin};
display: inline-flex;
height: 40px;
line-height: 40px;
height: ${height};
line-height: ${height};
align-items: center;
`
}, [
cB('icon', {
raw: `
font-size: 20px;
font-size: ${iconSize};
`
}, [
cB('base-loading', [
@ -90,60 +106,18 @@ export default c([
]),
cE('close', {
raw: `
height: 40px;
display: flex;
align-items: center;
font-size: 14px;
margin-left: 12px;
justify-content: center;
height: ${closeSize};
width: ${closeSize};
border-radius: 100px;
font-size: ${closeSize};
margin: ${closeMargin};
`
}, [
cB('icon', {
raw: `
cursor: pointer;
fill: ${closeColor};
stroke: ${closeColor};
`
}, [
c('&:hover', {
raw: `
fill: ${closeColorHover};
stroke: ${closeColorHover};
`
}),
c('&:active', {
raw: `
fill: ${closeColorPressed};
stroke: ${closeColorPressed};
`
})
])
]),
cM('loading-type', [
cB('icon', {
raw: `
cursor: pointer;
fill: ${closeColorLoading};
stroke: ${closeColorLoading};
`
}, [
c('&:hover', {
raw: `
fill: ${closeColorHoverLoading};
stroke: ${closeColorHoverLoading};
`
}),
c('&:active', {
raw: `
fill: ${closeColorPressedLoading};
stroke: ${closeColorPressedLoading};
`
})
])
]),
}),
cM('closable', {
raw: `
padding-right: 24px;
`
padding: paddingClosable
}),
['info', 'success', 'error', 'warning', 'loading']
.map(type => typeStyle(type, props.$local))

11
src/message/styles/_common.js Normal file
View File

@ -0,0 +1,11 @@
export default {
height: '40px',
padding: ' 0 40px',
paddingClosable: '0 24px 0 40px',
maxWidth: '720px',
minWidth: '420px',
iconMargin: '10px',
closeMargin: '0 0 0 12px',
closeSize: '24px',
iconSize: '19px'
}

17
src/message/styles/dark.js
View File

@ -1,5 +1,6 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from '../../_utils/color'
import commonVariables from './_common'
export default create({
name: 'Message',
@ -18,6 +19,7 @@ export default create({
boxShadow2
} = base
return {
...commonVariables,
textColorInfo: textColorBase,
textColorSuccess: textColorBase,
textColorError: textColorBase,
@ -38,9 +40,18 @@ export default create({
iconColorWarning: 'rgba(255, 255, 255, .5)',
iconColorError: 'rgba(255, 255, 255, .5)',
iconColorLoading: 'rgba(255, 255, 255, .5)',
closeColor: 'rgba(255, 255, 255, .5)',
closeColorHover: 'rgba(255, 255, 255, .6)',
closeColorPressed: 'rgba(255, 255, 255, .4)',
closeColorInfo: 'rgba(255, 255, 255, .5)',
closeColorHoverInfo: 'rgba(255, 255, 255, .6)',
closeColorPressedInfo: 'rgba(255, 255, 255, .4)',
closeColorSuccess: 'rgba(255, 255, 255, .5)',
closeColorHoverSuccess: 'rgba(255, 255, 255, .6)',
closeColorPressedSuccess: 'rgba(255, 255, 255, .4)',
closeColorError: 'rgba(255, 255, 255, .5)',
closeColorHoverError: 'rgba(255, 255, 255, .6)',
closeColorPressedError: 'rgba(255, 255, 255, .4)',
closeColorWarning: 'rgba(255, 255, 255, .5)',
closeColorHoverWarning: 'rgba(255, 255, 255, .6)',
closeColorPressedWarning: 'rgba(255, 255, 255, .4)',
closeColorLoading: 'rgba(255, 255, 255, .5)',
closeColorHoverLoading: 'rgba(255, 255, 255, .6)',
closeColorPressedLoading: 'rgba(255, 255, 255, .4)'

17
src/message/styles/light.js
View File

@ -1,4 +1,5 @@
import create from '../../_styles/utils/create-component-base'
import commonVariables from './_common'
export default create({
name: 'Message',
@ -20,6 +21,7 @@ export default create({
} = base
const coloredBoxShadow = '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
return {
...commonVariables,
textColorInfo: baseColor,
textColorSuccess: baseColor,
textColorError: baseColor,
@ -40,9 +42,18 @@ export default create({
iconColorWarning: 'rgba(255, 255, 255, .45)',
iconColorError: 'rgba(255, 255, 255, .45)',
iconColorLoading: 'rgba(255, 255, 255, .45)',
closeColor: 'rgba(255, 255, 255, .5)',
closeColorHover: 'rgba(255, 255, 255, .6)',
closeColorPressed: 'rgba(255, 255, 255, .4)',
closeColorInfo: 'rgba(255, 255, 255, .5)',
closeColorHoverInfo: 'rgba(255, 255, 255, .6)',
closeColorPressedInfo: 'rgba(255, 255, 255, .4)',
closeColorSuccess: 'rgba(255, 255, 255, .5)',
closeColorHoverSuccess: 'rgba(255, 255, 255, .6)',
closeColorPressedSuccess: 'rgba(255, 255, 255, .4)',
closeColorError: 'rgba(255, 255, 255, .5)',
closeColorHoverError: 'rgba(255, 255, 255, .6)',
closeColorPressedError: 'rgba(255, 255, 255, .4)',
closeColorWarning: 'rgba(255, 255, 255, .5)',
closeColorHoverWarning: 'rgba(255, 255, 255, .6)',
closeColorPressedWarning: 'rgba(255, 255, 255, .4)',
closeColorLoading: closeColor,
closeColorHoverLoading: closeColorHover,
closeColorPressedLoading: closeColor

117
src/pagination/src/styles/themed-base.cssr.js
View File

@ -3,18 +3,30 @@ import { cTB, c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
buttonBorder,
itemTextColor,
itemTextColorHover,
itemTextColorActive,
itemTextColorDisabled,
itemColor,
itemColorHover,
itemColorActive,
itemColorDisabled,
itemBorderColor,
itemBorderColorActive,
itemBorderColorDisabled,
itemBorder,
itemBorderActive,
itemBorderDisabled,
jumperTextColorDisabled,
itemBorderRadius
itemBorderRadius,
itemPadding,
buttonTextColor,
buttonTextColorHover,
itemSize,
buttonFontSize,
itemFontSize,
inputWidth,
selectWidth,
inputMargin,
itemMargin
} = props.$local
const {
cubicBezierEaseInOut
@ -23,33 +35,34 @@ export default c([
raw: `
display: flex;
vertical-align: middle;
font-size: ${itemFontSize}
`
}, [
c('> *:not(:last-child)', {
marginRight: '8px'
}),
cB('select', {
width: 'unset'
width: selectWidth
}),
cM('transition-disabled', [
cB('pagination-item', {
raw: `
transition: none;
`
transition: 'none'
})
]),
cB('pagination-quick-jumper', {
raw: `
white-space: nowrap;
display: flex;
width: 110px;
line-height: 28px;
line-height: ${itemSize};
color: ${itemTextColor};
transition: color .3s ${cubicBezierEaseInOut};
`,
color: itemTextColor
`
}, [
cB('input', {
marginLeft: '8px'
raw: `
margin: ${inputMargin};
width: ${inputWidth};
`
}, [
cE('placeholder', {
left: '6px',
@ -68,33 +81,36 @@ export default c([
position: relative;
cursor: pointer;
user-select: none;
min-width:28px;
height:28px;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
opacity: 1;
transition:
color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut},
opacity .3s ${cubicBezierEaseInOut},
fill .3s ${cubicBezierEaseInOut};
display: flex;
align-items: center;
justify-content: center;
border-radius: ${itemBorderRadius};
box-sizing: border-box;
line-height: 28px;
`,
color: itemTextColor,
fill: itemTextColor
min-width: ${itemSize};
height: ${itemSize};
padding: ${itemPadding};
background-color: ${itemColor};
color: ${itemTextColor};
border-radius: ${itemBorderRadius};
border: ${itemBorder};
fill: ${buttonTextColor};
transition:
color .3s ${cubicBezierEaseInOut},
border-color .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut},
fill .3s ${cubicBezierEaseInOut};
`
}, [
c('&:not(:last-child)', {
margin: itemMargin
}),
cE('more-icon, arrow-icon', {
raw: `
position: relative;
z-index: auto;
width: 16px;
height: 16px;
font-size: ${buttonFontSize};
width: 1em;
height: 1em;
`
}, [
cB('base-icon', {
@ -108,15 +124,14 @@ export default c([
})
]),
cM('fast-backward, fast-forward', [
c('&:hover', {
backgroundColor: itemColor
}),
cE('more-icon', {
raw: `
display: block;
`
display: 'block'
}),
cE('arrow-icon', {
raw: `
display: none;
`
display: 'none'
})
]),
cE('more-icon, arrow-icon', {
@ -125,15 +140,17 @@ export default c([
cM('active', {
background: itemColorActive,
color: itemTextColorActive,
boxShadow: `inset 0 0 0 1px ${itemBorderColorActive}`
border: itemBorderActive
}),
cM('backward, forward', {
backgroundColor: itemColor,
boxShadow: `inset 0 0 0 1px ${itemBorderColor}`
border: buttonBorder
}),
cNotM('disabled', [
c('&:hover', {
color: itemTextColorHover
color: itemTextColorHover,
backgroundColor: itemColorHover,
fill: buttonTextColorHover
}, [
cM('backward, forward', {
color: itemTextColor
@ -142,14 +159,10 @@ export default c([
color: itemTextColor
}, [
cE('more-icon', {
raw: `
display: none;
`
display: 'none'
}),
cE('arrow-icon', {
raw: `
display: block;
`
display: 'block'
})
])
])
@ -157,20 +170,18 @@ export default c([
cM('disabled', {
raw: `
cursor: not-allowed;
`,
fill: itemTextColorDisabled,
color: itemTextColorDisabled
fill: ${itemTextColorDisabled};
color: ${itemTextColorDisabled};
`
}, [
cM('active, backward, forward', {
backgroundColor: itemColorDisabled,
boxShadow: `inset 0 0 0 1px ${itemBorderColorDisabled}`
border: itemBorderDisabled
})
])
]),
cM('disabled', {
raw: `
cursor: not-allowed;
`
cursor: 'not-allowed'
}, [
cB('pagination-quick-jumper', {
color: jumperTextColorDisabled

10
src/pagination/styles/_common.js Normal file
View File

@ -0,0 +1,10 @@
export default {
itemSize: '28px',
itemPadding: '0 4px',
itemFontSize: '14px',
itemMargin: '0 8px 0 0',
buttonFontSize: '16px',
inputWidth: '60px',
selectWidth: 'unset',
inputMargin: '0 8px'
}

21
src/pagination/styles/dark.js
View File

@ -1,11 +1,17 @@
import create from '../../_styles/utils/create-component-base'
import { changeColor } from '../../_utils/color/index'
import { baseDark, baseSuffixDark } from '../../styles'
import { baseDark, selectDark, inputDark, iconDark } from '../../styles'
import commonVariables from './_common.js'
export default create({
name: 'Pagination',
theme: 'dark',
peer: [baseSuffixDark, baseDark],
peer: [
baseDark,
selectDark,
inputDark,
iconDark
],
getDerivedVariables ({ base, derived }) {
const {
textColor2Overlay,
@ -19,6 +25,10 @@ export default create({
borderRadius
} = base
return {
...commonVariables,
buttonBorder: `1px solid ${borderColorOverlay}`,
buttonTextColor: textColor2Overlay,
buttonTextColorHover: textColor2Overlay,
itemTextColor: textColor2Overlay,
itemTextColorHover: primaryColor,
itemTextColorActive: primaryColor,
@ -26,9 +36,10 @@ export default create({
itemColor: 'transparent',
itemColorActive: 'transparent',
itemColorDisabled: inputColorDisabledOverlay,
itemBorderColor: borderColorOverlay,
itemBorderColorActive: changeColor(primaryColor, { alpha: opacity3 }),
itemBorderColorDisabled: 'transparent',
itemBorder: '1px solid transparent',
itemBorderActive: `1px solid ${changeColor(primaryColor, { alpha: opacity3 })}`,
itemBorderDisabled: '1px solid transparent',
itemColorHover: 'transparent',
itemBorderRadius: borderRadius,
jumperTextColor: textColor2Overlay,
jumperTextColorDisabled: textColorDisabledOverlay

27
src/pagination/styles/light.js
View File

@ -1,34 +1,43 @@
import create from '../../_styles/utils/create-component-base'
import { baseLight, baseSuffixLight } from '../../styles'
import { baseLight, selectLight, inputLight, iconLight } from '../../styles'
import commonVariables from './_common.js'
export default create({
name: 'Pagination',
theme: 'light',
peer: [baseSuffixLight, baseLight],
peer: [
baseLight,
selectLight,
inputLight,
iconLight
],
getDerivedVariables ({ base, derived }) {
const {
textColor2,
primaryColor,
inputColorDisabled,
textColorDisabled,
cardColor,
baseColor,
borderColor
} = derived
const {
borderRadius
} = base
return {
...commonVariables,
buttonTextColor: textColor2,
buttonTextColorHover: textColor2,
buttonBorder: `1px solid ${borderColor}`,
itemTextColor: textColor2,
itemTextColorHover: primaryColor,
itemTextColorActive: primaryColor,
itemTextColorDisabled: textColorDisabled,
itemColor: cardColor,
itemColorActive: baseColor,
itemColor: 'transparent',
itemColorHover: 'transparent',
itemColorActive: 'transparent',
itemColorDisabled: inputColorDisabled,
itemBorderColor: borderColor,
itemBorderColorActive: primaryColor,
itemBorderColorDisabled: borderColor,
itemBorder: '1px solid transparent',
itemBorderActive: `1px solid ${primaryColor}`,
itemBorderDisabled: `1px solid ${borderColor}`,
itemBorderRadius: borderRadius,
jumperTextColor: textColor2,
jumperTextColorDisabled: textColorDisabled

115
themes/tusimple.js → themes/tusimple/index.js
View File

@ -1,8 +1,10 @@
// Unstable!
// Draft Code!
// Variable Names Will Be Refactored!
import { composite } from '../src/_utils/color'
import { cB, cE, c } from '../src/_utils/cssr'
import { composite, read } from '../../src/_utils/color'
import { cB, cE, c } from '../../src/_utils/cssr'
import typedColor from './color'
import cssMute from './const'
const unconfigurableStyle = c([
cB('tag', [
@ -16,6 +18,16 @@ const unconfigurableStyle = c([
backgroundColor: composite('#D7DAE0', 'rgba(255, 255, 255, .25)')
})
])
]),
cB('message', [
cE('close', [
c('&:hover', {
backgroundColor: composite('#D7DAE0', 'rgba(255, 255, 255, .5)')
}),
c('&:active', {
backgroundColor: composite('#D7DAE0', 'rgba(255, 255, 255, .25)')
})
])
])
])
@ -203,6 +215,105 @@ function tusimpleTheme (naive) {
fontSizeMedium: '16px',
fontSizeLarge: '16px'
})
naive.styles.light.DynamicTags.override({
addHeight: '24px',
addBorderStyle: 'dashed'
})
naive.styles.light.Form.override({
blankHeightSmall: cssMute.CONTENT_SPACE,
blankHeightMedium: cssMute.CONTENT_SPACE,
blankHeightLarge: cssMute.CONTENT_SPACE,
feedbackHeightSmall: cssMute.CONTENT_SPACE,
feedbackHeightMedium: cssMute.CONTENT_SPACE,
feedbackHeightLarge: cssMute.CONTENT_SPACE,
feedbackFontSizeSmall: cssMute.SMALL_FRONT_SIZE,
feedbackFontSizeMedium: cssMute.SMALL_FRONT_SIZE,
feedbackFontSizeLarge: cssMute.SMALL_FRONT_SIZE,
labelFontSizeLeftSmall: cssMute.SMALL_FRONT_SIZE,
labelFontSizeLeftMedium: cssMute.SMALL_FRONT_SIZE,
labelFontSizeLeftLarge: cssMute.NORMAL_FRONT_SIZE,
labelFontSizeTopSmall: cssMute.SMALL_FRONT_SIZE,
labelFontSizeTopMedium: cssMute.SMALL_FRONT_SIZE,
labelFontSizeTopLarge: cssMute.NORMAL_FRONT_SIZE,
labelHeightSmall: '22px',
labelHeightMedium: '22px',
labelHeightLarge: '22px',
labelTextAlignHorizontal: 'left'
})
naive.styles.light.Message.override({
height: '48px',
padding: '0 20px 0 12px',
paddingClosable: '0 12px',
maxWidth: '720px',
minWidth: '420px',
iconMargin: '20px',
closeMargin: '0 0 0 22px',
colorInfo: derived.warningColor,
colorWarning: derived.errorColor,
iconColorInfo: 'rgb(0, 0, 0)',
iconColorSuccess: 'rgb(255, 255, 255)',
iconColorWarning: 'rgb(255, 255, 255)',
iconColorError: 'rgb(255, 255, 255)',
iconColorLoading: 'rgb(255, 255, 255)',
closeColorInfo: 'rgb(0, 0, 0)',
closeColorHoverInfo: 'rgb(0, 0, 0)',
closeColorPressedInfo: 'rgb(0, 0, 0)',
closeColorSuccess: 'rgb(255, 255, 255)',
closeColorHoverSuccess: 'rgb(255, 255, 255)',
closeColorPressedSuccess: 'rgb(255, 255, 255)',
closeColorError: 'rgb(255, 255, 255)',
closeColorHoverError: 'rgb(255, 255, 255)',
closeColorPressedError: 'rgb(255, 255, 255)',
closeColorWarning: 'rgb(255, 255, 255)',
closeColorHoverWarning: 'rgb(255, 255, 255)',
closeColorPressedWarning: 'rgb(255, 255, 255)',
closeColorLoading: 'rgb(0, 0, 0)',
closeColorHoverLoading: 'rgb(0, 0, 0)',
closeColorActiveLoading: 'rgb(0, 0, 0)',
closeColor: 'transparent',
closeColorHover: composite('#D7DAE0', 'rgba(255, 255, 255, .5)'),
closeColorActive: composite('#D7DAE0', 'rgba(255, 255, 255, .25)'),
closeSize: '24px',
iconSize: '20px'
})
naive.styles.light.Pagination.override({
itemSize: '32px',
itemPadding: 0,
buttonFontSize: '24px',
itemFontSize: '16px',
inputWidth: '80px',
selectWidth: '100px',
inputMargin: '0 20px',
itemMargin: '0 20px 0 0',
itemBorder: 'none',
itemBorderActive: 'none',
itemBorderDisabled: 'none',
itemColor: 'transparent',
itemColorHover: composite(derived.primaryColor, 'rgba(255, 255, 255, 0.9)'),
itemColorActive: 'transparent',
itemColorDisabled: 'transparent',
itemBorderRadius: '100px',
itemTextColorHover: derived.textColorSecondary,
itemTextColorDisabled: '#D7DAE0',
buttonBorder: 'none',
buttonTextColorHover: derived.primaryColor
})
naive.styles.light.BackTop.override({
width: '48px',
height: '48px',
iconSize: '24px',
borderRadius: '24px',
iconColor: 'rgba(0, 0, 0, .8)',
iconColorHover: derived.primaryColor,
iconColorPressed: derived.primaryColorPressed,
boxShadow: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)',
boxShadowHover: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)',
boxShadowPressed: '0 40px 16px -24px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12), 0 16px 40px 16px rgba(0,0,0,0.04)'
})
naive.styles.light.Breadcrumb.override({
fontSize: '16px',
fontWeightActive: '500'
})
}
tusimpleTheme.install = tusimpleTheme