From 8c160224a5a7200bf4894f5c88667636461f6afd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 15 Nov 2020 23:32:53 +0800 Subject: [PATCH] refactor(slider): new style --- src/_styles/base/dark.js | 1 - src/_styles/base/light.js | 1 - src/slider/src/styles/themed-base.cssr.js | 44 +++++++++++------------ src/slider/styles/_common.js | 6 ++-- src/slider/styles/dark.js | 33 ++++++++--------- src/slider/styles/light.js | 27 +++++++------- 6 files changed, 53 insertions(+), 59 deletions(-) diff --git a/src/_styles/base/dark.js b/src/_styles/base/dark.js index 840aceea0..15bbf4a34 100644 --- a/src/_styles/base/dark.js +++ b/src/_styles/base/dark.js @@ -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, diff --git a/src/_styles/base/light.js b/src/_styles/base/light.js index 14cfe8dd6..79f38f5a3 100644 --- a/src/_styles/base/light.js +++ b/src/_styles/base/light.js @@ -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, diff --git a/src/slider/src/styles/themed-base.cssr.js b/src/slider/src/styles/themed-base.cssr.js index e652ebce4..08a3b7ebc 100644 --- a/src/slider/src/styles/themed-base.cssr.js +++ b/src/slider/src/styles/themed-base.cssr.js @@ -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 }) ]) ) diff --git a/src/slider/styles/_common.js b/src/slider/styles/_common.js index 1c702ab27..0e03892d6 100644 --- a/src/slider/styles/_common.js +++ b/src/slider/styles/_common.js @@ -1,5 +1,7 @@ export default { railHeight: '4px', - handleSize: '14px', - dotSize: '8px' + handleSize: '18px', + dotHeight: '8px', + dotWidth: '8px', + dotBorderRadius: '4px' } diff --git a/src/slider/styles/dark.js b/src/slider/styles/dark.js index 12af1a563..c0e43da50 100644 --- a/src/slider/styles/dark.js +++ b/src/slider/styles/dark.js @@ -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 } } }) diff --git a/src/slider/styles/light.js b/src/slider/styles/light.js index bc5a4b6a2..6559328f0 100644 --- a/src/slider/styles/light.js +++ b/src/slider/styles/light.js @@ -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 } } })