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

refactor: use global line-height

Browse Source
This commit is contained in:
07akioni 2020-12-15 17:48:10 +08:00
parent ea367204dc
commit 82f8036f1e
34 changed files with 202 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_styles/base/_common.js
View File

@ -13,7 +13,7 @@ export default {
borderRadius: '3px',
borderRadiusSmall: '2px',
lineHeight: '1.75',
lineHeight: '1.5',
transformDebounceScale: 'scale(1)'
}

4
src/alert/src/styles/themed-base.cssr.js
View File

@ -4,9 +4,9 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
export default c([
({ props }) => {
const { cubicBezierEaseInOut } = props.$global
const { borderRadius, titleFontWeight } = props.$local
const { borderRadius, titleFontWeight, lineHeight } = props.$local
return cTB('alert', {
lineHeight: 1.75,
lineHeight,
borderRadius,
position: 'relative',
transition: `background-color .3s ${cubicBezierEaseInOut}`

2
src/alert/styles/dark.js
View File

@ -9,6 +9,7 @@ export default create({
peer: [baseDark, iconDark],
getLocalVars (vars) {
const {
lineHeight,
borderRadius,
fontWeightStrong,
dividerColorOverlay,
@ -24,6 +25,7 @@ export default create({
errorColorSuppl
} = vars
return {
lineHeight,
titleFontWeight: fontWeightStrong,
borderRadius,
border: `1px solid ${dividerColorOverlay}`,

2
src/alert/styles/light.js
View File

@ -9,6 +9,7 @@ export default create({
peer: [baseLight, iconLight],
getLocalVars (vars) {
const {
lineHeight,
borderRadius,
fontWeightStrong,
baseColor,
@ -25,6 +26,7 @@ export default create({
errorColor
} = vars
return {
lineHeight,
titleFontWeight: fontWeightStrong,
borderRadius,
border: `1px solid ${dividerColorOverlay}`,

29
src/anchor/src/styles/themed-base.cssr.js
View File

@ -3,17 +3,20 @@ import { c, cE, cB, cM, cTB } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
railColor,
linkColor,
railColorActive,
linkTextColor,
linkTextColorHover,
linkTextColorPressed,
linkTextColorActive
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
$local: {
railColor,
linkColor,
railColorActive,
linkTextColor,
linkTextColorHover,
linkTextColorPressed,
linkTextColorActive,
linkFontSize
},
$global: {
cubicBezierEaseInOut
}
} = props
return cTB('anchor', {
raw: `
padding-left: 4px;
@ -77,8 +80,8 @@ export default c([
margin-top: .5em;
padding-left: 16px;
position: relative;
line-height: 1.5em;
font-size: 13px;
line-height: 1.5;
font-size: ${linkFontSize};
min-height: 1.5em;
display: flex;
flex-direction: column;

3
src/anchor/styles/_common.js Normal file
View File

@ -0,0 +1,3 @@
export default {
linkFontSize: '13px'
}

2
src/anchor/styles/dark.js
View File

@ -1,4 +1,5 @@
import create from '../../_styles/utils/create-component-base'
import commonVars from './_common'
import { baseDark } from '../../_styles/base'
import { affixDark } from '../../affix/styles'
import { changeColor } from 'seemly'
@ -17,6 +18,7 @@ export default create({
textColor2Overlay
} = vars
return {
...commonVars,
borderRadius,
railColor: railColorOverlay,
railColorActive: primaryColor,

2
src/anchor/styles/light.js
View File

@ -1,4 +1,5 @@
import create from '../../_styles/utils/create-component-base'
import commonVars from './_common'
import { baseLight } from '../../_styles/base'
import { affixLight } from '../../affix/styles'
import { changeColor } from 'seemly'
@ -17,6 +18,7 @@ export default create({
textColor2Overlay
} = vars
return {
...commonVars,
borderRadius,
railColor: railColorOverlay,
railColorActive: primaryColor,

51
src/data-table/src/styles/themed-base.cssr.js
View File

@ -2,23 +2,26 @@ import { c, cTB, cB, cE, cM, cNotM, insideModal, createKey } from '../../../_uti
export default c([
({ props }) => {
const { cubicBezierEaseInOut } = props.$global
const { borderRadius } = props.$local
const {
borderColor,
tdColorHover,
thColor,
thColorHover,
tdColor,
tdTextColor,
thTextColor,
thFontWeight,
thButtonColorHover,
thButtonIconColor,
thButtonIconColorActive,
fixedColumnBoxShadowColor,
filterSize
} = props.$local
$global: { cubicBezierEaseInOut },
$local: {
borderColor,
tdColorHover,
thColor,
thColorHover,
tdColor,
tdTextColor,
thTextColor,
thFontWeight,
thButtonColorHover,
thButtonIconColor,
thButtonIconColorActive,
fixedColumnBoxShadowColor,
filterSize,
borderRadius,
lineHeight
}
} = props
const fixedColumnStyle = createFixedColumnStyle({ cubicBezierEaseInOut, fixedColumnBoxShadowColor })
return [
cTB('data-table', {
@ -57,7 +60,7 @@ export default c([
border-top-left-radius: ${borderRadius};
border-top-right-radius: ${borderRadius};
overflow: hidden;
line-height: 1.5;
line-height: ${lineHeight};
`
}),
cM('single-column', [
@ -345,12 +348,14 @@ export default c([
function createStyleInsideModal (props) {
const {
tdColorModal,
thColorModal,
borderColorModal,
thColorHoverModal,
tdColorHoverModal
} = props.$local
$local: {
tdColorModal,
thColorModal,
borderColorModal,
thColorHoverModal,
tdColorHoverModal
}
} = props
return insideModal(cTB('data-table', [
cB('data-table-table', {
backgroundColor: tdColorModal

4
src/data-table/styles/dark.js
View File

@ -35,11 +35,13 @@ export default create({
iconColorOverlay,
primaryColor,
fontWeightStrong,
borderRadius
borderRadius,
lineHeight
} = vars
return {
...commonVariables,
borderRadius,
lineHeight,
borderColor: composite(cardColor, dividerColorOverlay),
tdColorHover: composite(cardColor, tableColorHoverOverlay),
thColor: composite(cardColor, tableHeaderColorOverlay),

4
src/data-table/styles/light.js
View File

@ -35,10 +35,12 @@ export default create({
iconColorOverlay,
primaryColor,
fontWeightStrong,
borderRadius
borderRadius,
lineHeight
} = vars
return {
...commonVariables,
lineHeight,
borderRadius,
borderColor: composite(cardColor, dividerColorOverlay),
tdColorHover: composite(cardColor, tableColorHoverOverlay),

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

@ -28,13 +28,14 @@ export default c([
closeColor,
closeColorHover,
closeColorPressed,
fontSize
fontSize,
lineHeight
} = $local
const dialogStyle = cTB(
'dialog',
{
raw: `
line-height: 1.5;
line-height: ${lineHeight};
position: relative;
background: ${color};
color: ${textColor};

4
src/dialog/styles/dark.js
View File

@ -22,10 +22,12 @@ export default create({
errorColor,
dividerColorOverlay,
borderRadius,
fontWeightStrong
fontWeightStrong,
lineHeight
} = vars
return {
...commonVars,
lineHeight,
border: `1px solid ${dividerColorOverlay}`,
headerTextColor: textColor1Overlay,
textColor: textColor2Overlay,

4
src/dialog/styles/light.js
View File

@ -22,10 +22,12 @@ export default create({
errorColor,
dividerColor,
borderRadius,
fontWeightStrong
fontWeightStrong,
lineHeight
} = vars
return {
...commonVars,
lineHeight,
border: `1px solid ${dividerColor}`,
headerTextColor: textColor1,
textColor: textColor2,

27
src/form/src/styles/themed-base.cssr.js
View File

@ -4,22 +4,25 @@ import fadeDownTranstion from '../../../_styles/transitions/fade-down'
export default c([
({ props }) => {
const {
labelTextColor,
asteriskColor,
feedbackTextColorError,
feedbackTextColorWarning,
labelPaddingHorizontal,
labelPaddingVertical,
labelTextAlignHorizontal
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
$local: {
labelTextColor,
asteriskColor,
feedbackTextColorError,
feedbackTextColorWarning,
labelPaddingHorizontal,
labelPaddingVertical,
labelTextAlignHorizontal,
lineHeight
},
$global: {
cubicBezierEaseInOut
}
} = props
return [
cB('form', {
width: '100%',
fontSize: '14px',
lineHeight: '1.5'
lineHeight
}, [
cM('inline', {
width: '100%',

3
src/form/styles/dark.js
View File

@ -8,9 +8,10 @@ export default create({
theme: 'dark',
peer: [baseDark, gridDark],
getLocalVars (vars) {
const { textColor1Overlay, errorColor, warningColor } = vars
const { textColor1Overlay, errorColor, warningColor, lineHeight } = vars
return {
...commonVariables,
lineHeight,
labelTextColor: textColor1Overlay,
asteriskColor: errorColor,
feedbackTextColorError: errorColor,

3
src/form/styles/light.js
View File

@ -8,9 +8,10 @@ export default create({
theme: 'light',
peer: [baseLight, gridLight],
getLocalVars (vars) {
const { textColor1, errorColor, warningColor } = vars
const { textColor1, errorColor, warningColor, lineHeight } = vars
return {
...commonVariables,
lineHeight,
labelTextColor: textColor1,
asteriskColor: errorColor,
feedbackTextColorError: errorColor,

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

@ -4,30 +4,31 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
export default c([
({ props }) => {
const {
borderRadius,
iconSize
} = props.$local
const {
placeholderColor,
color,
border,
borderHover,
colorFocus,
borderFocus,
boxShadowFocus,
iconColor,
iconOpacity,
textColor,
caretColor,
borderDisabled,
colorDisabled,
textColorDisabled,
placeholderColorDisabled,
textDecorationColor
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
$local: {
placeholderColor,
color,
border,
borderHover,
colorFocus,
borderFocus,
boxShadowFocus,
iconColor,
iconOpacity,
textColor,
caretColor,
borderDisabled,
colorDisabled,
textColorDisabled,
placeholderColorDisabled,
textDecorationColor,
lineHeightTextarea,
borderRadius,
iconSize
},
$global: {
cubicBezierEaseInOut
}
} = props
return cTB('input', {
raw: `
z-index: auto;
@ -156,7 +157,7 @@ export default c([
cE('suffix, prefix', {
raw: `
position: absolute;
line-height: 1.75;
line-height: 1;
height: 0;
white-space: nowrap;
display: flex;
@ -193,7 +194,7 @@ export default c([
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
line-height: 1.75;
line-height: ${lineHeightTextarea};
margin: 0;
resize: vertical;
padding-left: 14px;

8
src/input/src/styles/themed-size.cssr.js
View File

@ -8,7 +8,7 @@ export default c([
const fontSize = props.$local[createKey('fontSize', size)]
const lineHeight = pxfy(Math.round(depx(fontSize) * 1.5))
const paddingTop = pxfy((depx(height) - depx(lineHeight)) / 2)
const roundBorderRadius = pxfy(depx(height) / 2)
const borderRadiusRound = pxfy(depx(height) / 2)
const {
paddingLeft,
paddingRight,
@ -16,7 +16,7 @@ export default c([
} = props.$local
return cTB('input', [
cM(size + '-size', {
lineHeight: lineHeight,
lineHeight,
fontSize
}, [
cE('input', {
@ -87,7 +87,7 @@ export default c([
}),
cM('round', [
cNotM('textarea', {
borderRadius: roundBorderRadius
borderRadius: borderRadiusRound
}, [
cE('input', {
paddingLeft: paddingLeft,
@ -98,7 +98,7 @@ export default c([
right: paddingRight
}),
cE('box-shadow, border, state-border', {
borderRadius: roundBorderRadius
borderRadius: borderRadiusRound
})
])
])

4
src/input/styles/dark.js
View File

@ -21,10 +21,12 @@ export default create({
warningColorHover,
errorColor,
errorColorHover,
borderRadius
borderRadius,
lineHeight
} = vars
return {
...commonVariables,
lineHeightTextarea: lineHeight,
borderRadius,
iconSize: '16px',
textColor: textColor2Overlay,

4
src/input/styles/light.js
View File

@ -22,10 +22,12 @@ export default create({
warningColorHover,
errorColor,
errorColorHover,
borderRadius
borderRadius,
lineHeight
} = vars
return {
...commonVariables,
lineHeightTextarea: lineHeight,
borderRadius,
iconSize: '16px',
textColor: textColor2,

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

@ -70,7 +70,8 @@ export default c([
actionTextColor,
borderRadius,
headerFontWeight,
boxShadow
boxShadow,
lineHeight
},
$global: {
cubicBezierEaseOut,
@ -239,7 +240,7 @@ export default c([
}),
cE('content', {
raw: `
line-height: 1.5;
line-height: ${lineHeight};
margin: 12px 0 0 0;
font-family: inherit;
white-space: pre-wrap;

4
src/notification/styles/dark.js
View File

@ -22,10 +22,12 @@ export default create({
textColor3Overlay,
borderRadius,
fontWeightStrong,
boxShadow2
boxShadow2,
lineHeight
} = vars
return {
borderRadius,
lineHeight,
headerFontWeight: fontWeightStrong,
iconColorSuccess: successColor,
iconColorInfo: infoColor,

4
src/notification/styles/light.js
View File

@ -22,10 +22,12 @@ export default create({
textColor3Overlay,
borderRadius,
fontWeightStrong,
boxShadow2
boxShadow2,
lineHeight
} = vars
return {
borderRadius,
lineHeight,
headerFontWeight: fontWeightStrong,
iconColorSuccess: successColor,
iconColorInfo: infoColor,

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

@ -24,7 +24,8 @@ export default c([
headerTextColor,
bodyTextColor,
borderRadius,
headFontWeight
headFontWeight,
lineHeight
},
$global: {
cubicBezierEaseInOut
@ -34,7 +35,7 @@ export default c([
cTB('table', {
raw: `
font-variant-numeric: tabular-nums;
line-height: 1.5;
line-height: ${lineHeight};
font-size: 14px;
width: 100%;
border-radius: ${borderRadius} ${borderRadius} 0 0;

4
src/table/styles/dark.js
View File

@ -15,10 +15,12 @@ export default create({
textColor1Overlay,
textColor2Overlay,
fontWeightStrong,
borderRadius
borderRadius,
lineHeight
} = vars
return {
...sizeVariables,
lineHeight,
borderColor: dividerColorOverlay,
bodyColor: cardColor,
bodyColorModal: modalColor,

4
src/table/styles/light.js
View File

@ -15,10 +15,12 @@ export default create({
textColor1,
textColor2,
borderRadius,
fontWeightStrong
fontWeightStrong,
lineHeight
} = vars
return {
...sizeVariables,
lineHeight,
borderColor: dividerColorOverlay,
bodyColor: cardColor,
bodyColorModal: modalColor,

6
src/tabs/src/styles/index.js
View File

@ -1,15 +1,9 @@
import baseStyle from './themed-base.cssr.js'
import sizeStyle from './themed-size.cssr.js'
export default [
{
key: 'mergedTheme',
watch: ['mergedTheme'],
CNode: baseStyle
},
{
key: 'labelSize',
watch: ['labelSize', 'mergedTheme'],
CNode: sizeStyle
}
]

27
src/tabs/src/styles/themed-base.cssr.js
View File

@ -1,7 +1,13 @@
import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
import { c, cM, cTB, cB, cE, createKey } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
$local,
$global: {
cubicBezierEaseInOut
}
} = props
const {
labelTextColor,
labelTextColorActive,
@ -19,10 +25,7 @@ export default c([
paneTextColor,
tabFontWeight,
tabBorderRadius
} = props.$local
const {
cubicBezierEaseInOut
} = props.$global
} = $local
return cTB('tabs', {
raw: `
width: 100%;
@ -31,6 +34,20 @@ export default c([
border-color .3s ${cubicBezierEaseInOut};
`
}, [
['small', 'medium', 'large', 'huge'].map(size => {
const {
[createKey('labelFontSize', size)]: fontSize
} = $local
return cM(`${size}-size`, [
cM('line-type', [
cB('tabs-label', [
cE('label', {
fontSize
})
])
])
])
}),
cM('flex', [
cB('tabs-nav', [
cB('tabs-nav-scroll', {

19
src/tabs/src/styles/themed-size.cssr.js
View File

@ -1,19 +0,0 @@
import { c, cTB, cM, cB, cE, createKey } from '../../../_utils/cssr'
export default c([
({ props }) => {
const { labelSize } = props.$vm
const { $local } = props
return cTB('tabs', [
cM(`${labelSize}-size`, [
cM('line-type', [
cB('tabs-label', [
cE('label', {
fontSize: $local[createKey('fontSize', labelSize)]
})
])
])
])
])
}
])

8
src/tabs/styles/_common.js
View File

@ -1,6 +1,6 @@
export default {
fontSizeSmall: '13px',
fontSizeMedium: '14px',
fontSizeLarge: '16px',
fontSizeHuge: '18px'
labelFontSizeSmall: '13px',
labelFontSizeMedium: '14px',
labelFontSizeLarge: '16px',
labelFontSizeHuge: '18px'
}

36
src/upload/src/styles/themed-base.cssr.js
View File

@ -5,23 +5,25 @@ import createIconSwitchTransition from '../../../_styles/transitions/icon-switch
export default c([
({ props }) => {
const {
cubicBezierEaseInOut,
borderRadius
} = props.$global
const {
draggerColor,
draggerBorder,
draggerBorderHover,
itemColorHover,
itemColorHoverError,
itemTextColorError,
itemTextColorSuccess,
itemTextColor,
itemIconColor,
itemDisabledOpacity
} = props.$local
$global: {
cubicBezierEaseInOut
},
$local: {
draggerColor,
draggerBorder,
draggerBorderHover,
itemColorHover,
itemColorHoverError,
itemTextColorError,
itemTextColorSuccess,
itemTextColor,
itemIconColor,
itemDisabledOpacity,
lineHeight,
borderRadius
}
} = props
const iconSwitchTransition = createIconSwitchTransition()
return cTB('upload', [
cE('file-input', {
raw: `
@ -65,7 +67,7 @@ export default c([
cB('upload-file-list', {
raw: `
margin-top: 8px;
line-height: 1.75;
line-height: ${lineHeight};
`
}, [
cB('upload-file', {

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

@ -19,9 +19,13 @@ export default create({
opacityDisabled,
actionColorOverlay,
borderColor,
hoverColorOverlay
hoverColorOverlay,
lineHeight,
borderRadius
} = vars
return {
lineHeight,
borderRadius,
draggerColor: actionColorOverlay,
draggerBorder: `1px dashed ${borderColor}`,
draggerBorderHover: `1px dashed ${primaryColor}`,

7
src/upload/styles/light.js
View File

@ -19,10 +19,13 @@ export default create({
opacityDisabled,
actionColorOverlay,
borderColor,
hoverColorOverlay
hoverColorOverlay,
lineHeight,
borderRadius
} = vars
return {
lineHeight,
borderRadius,
draggerColor: actionColorOverlay,
draggerBorder: `1px dashed ${borderColor}`,
draggerBorderHover: `1px dashed ${primaryColor}`,