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

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

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>

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,

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>

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', {
pointerEvents: 'none'
raw: `
pointer-events: none;
`
}),
c('&:hover', {
raw: `
box-shadow: ${boxShadowHover};
fill: ${colorHover};
`
}),
}, [
cB('icon', {
fill: iconColorHover,
stroke: iconColorHover
})
]),
c('&:active', {
raw: `
box-shadow: ${boxShadowPressed};
fill: ${colorActive};
`
}, [
cB('icon', {
fill: iconColorPressed,
stroke: iconColorPressed
})
])
])

View File

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

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)'
}
}
})

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)'

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'

View File

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

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
}
}

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
}
}

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', {

View File

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

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
}
}
})

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
}
}
})

View File

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

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;
`
}, [
cB('icon', {
raw: `
cursor: pointer;
fill: ${closeColor};
stroke: ${closeColor};
`
}, [
c('&:hover', {
raw: `
fill: ${closeColorHover};
stroke: ${closeColorHover};
justify-content: center;
height: ${closeSize};
width: ${closeSize};
border-radius: 100px;
font-size: ${closeSize};
margin: ${closeMargin};
`
}),
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))

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'
}

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)'

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

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

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'
}

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

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

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