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

refactor(slider): new style

Browse Source
This commit is contained in:
07akioni 2020-11-15 23:32:53 +08:00
parent c5f0853220
commit 8c160224a5
6 changed files with 53 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_styles/base/dark.js
View File

@ -172,7 +172,6 @@ export default create({
progressRailColorOverlay: overlay(base.alphaProgressRail), progressRailColorOverlay: overlay(base.alphaProgressRail),
railColor: neutral(base.alphaRail), railColor: neutral(base.alphaRail),
railColorOverlay: overlay(base.alphaRail), railColorOverlay: overlay(base.alphaRail),
railColorHoverOverlay: overlay(base.alphaRail * 1.5),
popoverColor: base.neutralPopover, popoverColor: base.neutralPopover,
tableColor: base.neutralCard, tableColor: base.neutralCard,

1
src/_styles/base/light.js
View File

@ -172,7 +172,6 @@ export default create({
progressRailColorOverlay: overlay(base.alphaProgressRail), progressRailColorOverlay: overlay(base.alphaProgressRail),
railColor: neutral(base.alphaRail), railColor: neutral(base.alphaRail),
railColorOverlay: overlay(base.alphaRail), railColorOverlay: overlay(base.alphaRail),
railColorHoverOverlay: overlay(base.alphaRail * 0.75),
popoverColor: base.neutralPopover, popoverColor: base.neutralPopover,
tableColor: base.neutralCard, tableColor: base.neutralCard,

44
src/slider/src/styles/themed-base.cssr.js
View File

@ -10,7 +10,8 @@ export default c([
railFillColor, railFillColor,
railFillColorHover, railFillColorHover,
handleColor, handleColor,
handleColorModal, dotColor,
dotColorModal,
handleBoxShadow, handleBoxShadow,
handleBoxShadowHover, handleBoxShadowHover,
handleBoxShadowActive, handleBoxShadowActive,
@ -18,11 +19,13 @@ export default c([
indicatorColor, indicatorColor,
indicatorBoxShadow, indicatorBoxShadow,
indicatorTextColor, indicatorTextColor,
dotBorder,
dotBoxShadow, dotBoxShadow,
dotBoxShadowActive,
railHeight, railHeight,
handleSize, handleSize,
dotSize, dotHeight,
dotWidth,
dotBorderRadius,
indicatorBorderRadius indicatorBorderRadius
} = props.$local } = props.$local
const { const {
@ -33,7 +36,7 @@ export default c([
cTB('slider', { cTB('slider', {
raw: ` raw: `
display: block; display: block;
padding: 5px 0; padding: calc((${handleSize} - ${railHeight}) / 2) 0;
position: relative; position: relative;
z-index: 0; z-index: 0;
width: calc(100% - 14px); width: calc(100% - 14px);
@ -69,12 +72,7 @@ export default c([
}, [ }, [
cE('fill', { cE('fill', {
backgroundColor: railFillColorHover backgroundColor: railFillColorHover
}), })
cB('slider-dots', [
cB('slider-dot', {
boxShadow: dotBoxShadowActive
})
])
]), ]),
cB('slider-handle', { cB('slider-handle', {
boxShadow: handleBoxShadowHover boxShadow: handleBoxShadowHover
@ -86,12 +84,7 @@ export default c([
}, [ }, [
cE('fill', { cE('fill', {
backgroundColor: railFillColorHover backgroundColor: railFillColorHover
}), })
cB('slider-dots', [
cB('slider-dot', {
boxShadow: dotBoxShadowActive
})
])
]), ]),
cB('slider-handle', { cB('slider-handle', {
boxShadow: handleBoxShadowHover boxShadow: handleBoxShadowHover
@ -152,15 +145,20 @@ export default c([
}, [ }, [
cB('slider-dot', { cB('slider-dot', {
raw: ` raw: `
transition: box-shadow .3s ${cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut}; transition:
border-color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut},
background-color .3s ${cubicBezierEaseInOut};
position: absolute; position: absolute;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
height: ${dotSize}; height: ${dotHeight};
width: ${dotSize}; width: ${dotWidth};
border-radius: 50%; border-radius: ${dotBorderRadius};
overflow: hidden; overflow: hidden;
box-sizing: border-box;
`, `,
color: handleColor, border: dotBorder,
backgroundColor: dotColor,
boxShadow: dotBoxShadow boxShadow: dotBoxShadow
}) })
]) ])
@ -181,8 +179,8 @@ export default c([
]), ]),
insideModal( insideModal(
cTB('slider', [ cTB('slider', [
cB('slider-handle', { cB('slider-dot', {
backgroundColor: handleColorModal backgroundColor: dotColorModal
}) })
]) ])
) )

6
src/slider/styles/_common.js
View File

@ -1,5 +1,7 @@
export default { export default {
railHeight: '4px', railHeight: '4px',
handleSize: '14px', handleSize: '18px',
dotSize: '8px' dotHeight: '8px',
dotWidth: '8px',
dotBorderRadius: '4px'
} }

33
src/slider/styles/dark.js
View File

@ -1,5 +1,4 @@
import create from '../../_styles/utils/create-component-base' import create from '../../_styles/utils/create-component-base'
import { composite, changeColor } from '../../_utils/color/index.js'
import sizeVariables from './_common' import sizeVariables from './_common'
export default create({ export default create({
@ -9,36 +8,34 @@ export default create({
const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
const { const {
railColorOverlay, railColorOverlay,
railColorHoverOverlay,
cardColor,
modalColor, modalColor,
primaryColor, primaryColorSuppl,
popoverColor, popoverColor,
textColor2Overlay textColor2Overlay,
cardColor
} = derived } = derived
const { const {
borderRadius borderRadius
} = base } = base
const defaultFillColor = composite(cardColor, changeColor(primaryColor, { alpha: 0.7 }))
return { return {
...sizeVariables, ...sizeVariables,
// defaultFillColor: defaultFillColor,
railColor: railColorOverlay, railColor: railColorOverlay,
railColorHover: railColorHoverOverlay, railColorHover: railColorOverlay,
railFillColor: defaultFillColor, railFillColor: primaryColorSuppl,
railFillColorHover: primaryColor, railFillColorHover: primaryColorSuppl,
handleColor: cardColor, handleColor: '#FFF',
handleColorModal: modalColor, dotColor: cardColor,
handleBoxShadow: `inset 0 0 0 2px ${defaultFillColor}`, dotColorModal: modalColor,
handleBoxShadowHover: `inset 0 0 0 2px ${primaryColor}`, handleBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
handleBoxShadowActive: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, handleBoxShadowHover: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, handleBoxShadowActive: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
handleBoxShadowFocus: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
indicatorColor: popoverColor, indicatorColor: popoverColor,
indicatorBoxShadow: boxShadow, indicatorBoxShadow: boxShadow,
indicatorTextColor: textColor2Overlay, indicatorTextColor: textColor2Overlay,
indicatorBorderRadius: borderRadius, indicatorBorderRadius: borderRadius,
dotBoxShadow: `inset 0 0 0 2px ${defaultFillColor}`, dotBorder: `2px solid ${primaryColorSuppl}`,
dotBoxShadowActive: `inset 0 0 0 2px ${primaryColor}` dotBoxShadow: null
} }
} }
}) })

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

@ -1,6 +1,5 @@
import create from '../../_styles/utils/create-component-base' import create from '../../_styles/utils/create-component-base'
import { changeColor } from '../../_utils/color/index.js'
import sizeVariables from './_common' import sizeVariables from './_common'
export default create({ export default create({
@ -11,10 +10,9 @@ export default create({
const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)' const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
const { const {
railColorOverlay, railColorOverlay,
railColorHoverOverlay,
primaryColor, primaryColor,
primaryColorHover, baseColor,
baseColor cardColor
} = derived } = derived
const { const {
borderRadius borderRadius
@ -22,21 +20,22 @@ export default create({
return { return {
...sizeVariables, ...sizeVariables,
railColor: railColorOverlay, railColor: railColorOverlay,
railColorHover: railColorHoverOverlay, railColorHover: railColorOverlay,
railFillColor: primaryColor, railFillColor: primaryColor,
railFillColorHover: primaryColorHover, railFillColorHover: primaryColor,
handleColor: baseColor, handleColor: '#FFF',
handleColorModal: baseColor, dotColor: cardColor,
handleBoxShadow: `inset 0 0 0 2px ${primaryColor}`, dotColorModal: baseColor,
handleBoxShadowHover: `inset 0 0 0 2px ${primaryColorHover}`, handleBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
handleBoxShadowActive: `inset 0 0 0 2px ${primaryColorHover}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, handleBoxShadowHover: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColorHover}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`, handleBoxShadowActive: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
handleBoxShadowFocus: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
indicatorColor: indicatorColor, indicatorColor: indicatorColor,
indicatorBoxShadow: boxShadow, indicatorBoxShadow: boxShadow,
indicatorTextColor: baseColor, indicatorTextColor: baseColor,
indicatorBorderRadius: borderRadius, indicatorBorderRadius: borderRadius,
dotBoxShadow: `inset 0 0 0 2px ${primaryColor}`, dotBorder: `2px solid ${primaryColor}`,
dotBoxShadowActive: `inset 0 0 0 2px ${primaryColorHover}` dotBoxShadow: null
} }
} }
}) })