mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
refactor(slider): new style
This commit is contained in:
07akioni
parent
c5f0853220
commit
8c160224a5
@ -172,7 +172,6 @@ export default create({
|
||||
progressRailColorOverlay: overlay(base.alphaProgressRail),
|
||||
railColor: neutral(base.alphaRail),
|
||||
railColorOverlay: overlay(base.alphaRail),
|
||||
railColorHoverOverlay: overlay(base.alphaRail * 1.5),
|
||||
|
||||
popoverColor: base.neutralPopover,
|
||||
tableColor: base.neutralCard,
|
||||
|
||||
@ -172,7 +172,6 @@ export default create({
|
||||
progressRailColorOverlay: overlay(base.alphaProgressRail),
|
||||
railColor: neutral(base.alphaRail),
|
||||
railColorOverlay: overlay(base.alphaRail),
|
||||
railColorHoverOverlay: overlay(base.alphaRail * 0.75),
|
||||
|
||||
popoverColor: base.neutralPopover,
|
||||
tableColor: base.neutralCard,
|
||||
|
||||
@ -10,7 +10,8 @@ export default c([
|
||||
railFillColor,
|
||||
railFillColorHover,
|
||||
handleColor,
|
||||
handleColorModal,
|
||||
dotColor,
|
||||
dotColorModal,
|
||||
handleBoxShadow,
|
||||
handleBoxShadowHover,
|
||||
handleBoxShadowActive,
|
||||
@ -18,11 +19,13 @@ export default c([
|
||||
indicatorColor,
|
||||
indicatorBoxShadow,
|
||||
indicatorTextColor,
|
||||
dotBorder,
|
||||
dotBoxShadow,
|
||||
dotBoxShadowActive,
|
||||
railHeight,
|
||||
handleSize,
|
||||
dotSize,
|
||||
dotHeight,
|
||||
dotWidth,
|
||||
dotBorderRadius,
|
||||
indicatorBorderRadius
|
||||
} = props.$local
|
||||
const {
|
||||
@ -33,7 +36,7 @@ export default c([
|
||||
cTB('slider', {
|
||||
raw: `
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
padding: calc((${handleSize} - ${railHeight}) / 2) 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: calc(100% - 14px);
|
||||
@ -69,12 +72,7 @@ export default c([
|
||||
}, [
|
||||
cE('fill', {
|
||||
backgroundColor: railFillColorHover
|
||||
}),
|
||||
cB('slider-dots', [
|
||||
cB('slider-dot', {
|
||||
boxShadow: dotBoxShadowActive
|
||||
})
|
||||
])
|
||||
})
|
||||
]),
|
||||
cB('slider-handle', {
|
||||
boxShadow: handleBoxShadowHover
|
||||
@ -86,12 +84,7 @@ export default c([
|
||||
}, [
|
||||
cE('fill', {
|
||||
backgroundColor: railFillColorHover
|
||||
}),
|
||||
cB('slider-dots', [
|
||||
cB('slider-dot', {
|
||||
boxShadow: dotBoxShadowActive
|
||||
})
|
||||
])
|
||||
})
|
||||
]),
|
||||
cB('slider-handle', {
|
||||
boxShadow: handleBoxShadowHover
|
||||
@ -152,15 +145,20 @@ export default c([
|
||||
}, [
|
||||
cB('slider-dot', {
|
||||
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;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: ${dotSize};
|
||||
width: ${dotSize};
|
||||
border-radius: 50%;
|
||||
height: ${dotHeight};
|
||||
width: ${dotWidth};
|
||||
border-radius: ${dotBorderRadius};
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
`,
|
||||
color: handleColor,
|
||||
border: dotBorder,
|
||||
backgroundColor: dotColor,
|
||||
boxShadow: dotBoxShadow
|
||||
})
|
||||
])
|
||||
@ -181,8 +179,8 @@ export default c([
|
||||
]),
|
||||
insideModal(
|
||||
cTB('slider', [
|
||||
cB('slider-handle', {
|
||||
backgroundColor: handleColorModal
|
||||
cB('slider-dot', {
|
||||
backgroundColor: dotColorModal
|
||||
})
|
||||
])
|
||||
)
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
export default {
|
||||
railHeight: '4px',
|
||||
handleSize: '14px',
|
||||
dotSize: '8px'
|
||||
handleSize: '18px',
|
||||
dotHeight: '8px',
|
||||
dotWidth: '8px',
|
||||
dotBorderRadius: '4px'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { composite, changeColor } from '../../_utils/color/index.js'
|
||||
import sizeVariables from './_common'
|
||||
|
||||
export default create({
|
||||
@ -9,36 +8,34 @@ export default create({
|
||||
const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
|
||||
const {
|
||||
railColorOverlay,
|
||||
railColorHoverOverlay,
|
||||
cardColor,
|
||||
modalColor,
|
||||
primaryColor,
|
||||
primaryColorSuppl,
|
||||
popoverColor,
|
||||
textColor2Overlay
|
||||
textColor2Overlay,
|
||||
cardColor
|
||||
} = derived
|
||||
const {
|
||||
borderRadius
|
||||
} = base
|
||||
const defaultFillColor = composite(cardColor, changeColor(primaryColor, { alpha: 0.7 }))
|
||||
return {
|
||||
...sizeVariables,
|
||||
// defaultFillColor: defaultFillColor,
|
||||
railColor: railColorOverlay,
|
||||
railColorHover: railColorHoverOverlay,
|
||||
railFillColor: defaultFillColor,
|
||||
railFillColorHover: primaryColor,
|
||||
handleColor: cardColor,
|
||||
handleColorModal: modalColor,
|
||||
handleBoxShadow: `inset 0 0 0 2px ${defaultFillColor}`,
|
||||
handleBoxShadowHover: `inset 0 0 0 2px ${primaryColor}`,
|
||||
handleBoxShadowActive: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
railColorHover: railColorOverlay,
|
||||
railFillColor: primaryColorSuppl,
|
||||
railFillColorHover: primaryColorSuppl,
|
||||
handleColor: '#FFF',
|
||||
dotColor: cardColor,
|
||||
dotColorModal: modalColor,
|
||||
handleBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
|
||||
handleBoxShadowHover: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
|
||||
handleBoxShadowActive: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
|
||||
handleBoxShadowFocus: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)',
|
||||
indicatorColor: popoverColor,
|
||||
indicatorBoxShadow: boxShadow,
|
||||
indicatorTextColor: textColor2Overlay,
|
||||
indicatorBorderRadius: borderRadius,
|
||||
dotBoxShadow: `inset 0 0 0 2px ${defaultFillColor}`,
|
||||
dotBoxShadowActive: `inset 0 0 0 2px ${primaryColor}`
|
||||
dotBorder: `2px solid ${primaryColorSuppl}`,
|
||||
dotBoxShadow: null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color/index.js'
|
||||
import sizeVariables from './_common'
|
||||
|
||||
export default create({
|
||||
@ -11,10 +10,9 @@ export default create({
|
||||
const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
|
||||
const {
|
||||
railColorOverlay,
|
||||
railColorHoverOverlay,
|
||||
primaryColor,
|
||||
primaryColorHover,
|
||||
baseColor
|
||||
baseColor,
|
||||
cardColor
|
||||
} = derived
|
||||
const {
|
||||
borderRadius
|
||||
@ -22,21 +20,22 @@ export default create({
|
||||
return {
|
||||
...sizeVariables,
|
||||
railColor: railColorOverlay,
|
||||
railColorHover: railColorHoverOverlay,
|
||||
railColorHover: railColorOverlay,
|
||||
railFillColor: primaryColor,
|
||||
railFillColorHover: primaryColorHover,
|
||||
handleColor: baseColor,
|
||||
handleColorModal: baseColor,
|
||||
handleBoxShadow: `inset 0 0 0 2px ${primaryColor}`,
|
||||
handleBoxShadowHover: `inset 0 0 0 2px ${primaryColorHover}`,
|
||||
handleBoxShadowActive: `inset 0 0 0 2px ${primaryColorHover}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColorHover}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
railFillColorHover: primaryColor,
|
||||
handleColor: '#FFF',
|
||||
dotColor: cardColor,
|
||||
dotColorModal: baseColor,
|
||||
handleBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
|
||||
handleBoxShadowHover: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)',
|
||||
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,
|
||||
indicatorBoxShadow: boxShadow,
|
||||
indicatorTextColor: baseColor,
|
||||
indicatorBorderRadius: borderRadius,
|
||||
dotBoxShadow: `inset 0 0 0 2px ${primaryColor}`,
|
||||
dotBoxShadowActive: `inset 0 0 0 2px ${primaryColorHover}`
|
||||
dotBorder: `2px solid ${primaryColor}`,
|
||||
dotBoxShadow: null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user