refactor: unify box-shadow

2025-01-06 12:17:13 +08:00 · 2020-11-17 01:22:12 +08:00 · 2020-11-17 01:22:12 +08:00 · fd617b5781
commit fd617b5781
parent 03c751eb77
26 changed files with 75 additions and 61 deletions
--- a/src/_base/select-menu/styles/dark.js
+++ b/src/_base/select-menu/styles/dark.js
@ -9,7 +9,7 @@ export default create({
      ...commonVariables,
      borderRadius: base.borderRadius,
      color: derived.popoverColor,
-      boxShadow: derived.popoverBoxShadow,
+      boxShadow: derived.boxShadow2,
      groupHeaderTextColor: derived.textColor3Overlay,
      actionDividerColor: derived.dividerColorOverlay,
      optionTextColor: derived.textColor2Overlay,
--- a/src/_base/select-menu/styles/light.js
+++ b/src/_base/select-menu/styles/light.js
@ -9,7 +9,7 @@ export default create({
      ...commonVariables,
      borderRadius: base.borderRadius,
      color: derived.popoverColor,
-      boxShadow: derived.popoverBoxShadow,
+      boxShadow: derived.boxShadow2,
      groupHeaderTextColor: derived.textColor3,
      actionDividerColor: derived.dividerColorOverlay,
      optionTextColor: derived.textColor2,
--- a/src/_styles/base/_common.js
+++ b/src/_styles/base/_common.js
@ -13,7 +13,5 @@ export default {

  lineHeight: '1.75',

-  transformDebounceScale: 'scale(0.99999)',
-
-  popmenuBoxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.18)'
+  transformDebounceScale: 'scale(0.99999)'
 }
--- a/src/_styles/base/dark.js
+++ b/src/_styles/base/dark.js
@ -72,7 +72,8 @@ export default create({
      successActive: '#5acea7',
      successSuppl: 'rgb(42, 148, 125)',

-      boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
+      boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)',
+      boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)'
    }, commonVariables)
  },
  getDerivedVariables (base) {
@ -199,7 +200,8 @@ export default create({
      inputColorDisabled: neutral(base.alphaDisabledInput),
      inputColorDisabledOverlay: overlay(base.alphaDisabledInput),

-      popoverBoxShadow: base.boxShadow2
+      boxShadow2: base.boxShadow2,
+      boxShadow3: base.boxShadow3
    }
    return derived
  }
--- a/src/_styles/base/light.js
+++ b/src/_styles/base/light.js
@ -72,7 +72,9 @@ export default create({
      successActive: '#0c7a43',
      successSuppl: '#36ad6a',

-      boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)'
+      boxShadow1: '',
+      boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
+      boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)'
    }, commonVariables)
  },
  getDerivedVariables (base) {
@ -199,7 +201,8 @@ export default create({
      inputColorDisabled: neutral(base.alphaDisabledInput),
      inputColorDisabledOverlay: overlay(base.alphaDisabledInput),

-      popoverBoxShadow: base.boxShadow2
+      boxShadow2: base.boxShadow2,
+      boxShadow3: base.boxShadow3
    }
    return derived
  }
--- a/src/card/src/styles/themed-base.cssr.js
+++ b/src/card/src/styles/themed-base.cssr.js
@ -128,7 +128,7 @@ export default c([
            cE('close-mark', {
              raw: `
                cursor: pointer;
-                transition: fill .3s ${cubicBezierEaseInOut};
+                transition: color .3s ${cubicBezierEaseInOut};
                color: ${closeColor};
              `
            }, [
--- a/src/cascader/src/styles/themed-base.cssr.js
+++ b/src/cascader/src/styles/themed-base.cssr.js
@ -11,6 +11,7 @@ c([
      transformDebounceScale
    } = props.$base
    const {
+      arrowColor,
      optionTextColor,
      optionTextColorMatched,
      optionTextColorDisabled,
@ -137,7 +138,7 @@ c([
                fadeInScaleUpTransition()
              ]),
              cM('arrow', {
-                color: optionTextColor
+                color: arrowColor
              })
            ])
          ]),
@ -162,14 +163,18 @@ c([
              background-color: transparent;
              cursor: not-allowed;
            `
-          })
+          }, [
+            cB('cascader-option-icon', [
+              cM('arrow', {
+                color: optionTextColorDisabled
+              })
+            ])
+          ])
        ])
      ]
    )
  },
  cB('cascader', {
-    raw: `
-      width: 100%;
-    `
+    width: '100%'
  })
 ])
--- a/src/cascader/styles/dark.js
+++ b/src/cascader/styles/dark.js
@ -23,11 +23,12 @@ export default create({
  getDerivedVariables ({ base, derived }) {
    const {
      borderRadius,
-      popmenuBoxShadow
+      boxShadow2
    } = base
    const {
      popoverColor,
      textColor2Overlay,
+      textColor3Overlay,
      primaryColor,
      textColorDisabledOverlay,
      dividerColorOverlay,
@ -37,8 +38,9 @@ export default create({
      ...sizeVariables,
      menuBorderRadius: borderRadius,
      menuColor: popoverColor,
-      menuBoxShadow: popmenuBoxShadow,
+      menuBoxShadow: boxShadow2,
      menuBorderColor: dividerColorOverlay,
+      arrowColor: textColor3Overlay,
      optionColorHover: hoverColorOverlay,
      optionTextColor: textColor2Overlay,
      optionTextColorMatched: primaryColor,
--- a/src/cascader/styles/light.js
+++ b/src/cascader/styles/light.js
@ -21,11 +21,12 @@ export default create({
  getDerivedVariables ({ base, derived }) {
    const {
      borderRadius,
-      popmenuBoxShadow
+      boxShadow2
    } = base
    const {
      popoverColor,
      textColor2,
+      textColor3,
      primaryColor,
      textColorDisabled,
      dividerColorOverlay,
@ -35,8 +36,9 @@ export default create({
      ...sizeVariables,
      menuBorderRadius: borderRadius,
      menuColor: popoverColor,
-      menuBoxShadow: popmenuBoxShadow,
+      menuBoxShadow: boxShadow2,
      menuBorderColor: dividerColorOverlay,
+      arrowColor: textColor3,
      optionColorHover: hoverColorOverlay,
      optionTextColor: textColor2,
      optionTextColorMatched: primaryColor,
--- a/src/date-picker/styles/dark.js
+++ b/src/date-picker/styles/dark.js
@ -19,7 +19,7 @@ export default create({
      panelHeaderTextColor: derived.textColor1Overlay,
      panelDividerColor: derived.dividerColorOverlay,
      panelBorderRadius: base.borderRadius,
-      panelBoxShadow: derived.popoverBoxShadow,
+      panelBoxShadow: derived.boxShadow2,
      pickerTextDecorationColor: derived.textColor2Overlay,
      panelHeaderFontWeight: base.fontWeightStrong
    }
--- a/src/date-picker/styles/light.js
+++ b/src/date-picker/styles/light.js
@ -20,7 +20,7 @@ export default create({
      panelIconColor: derived.iconColor,
      panelHeaderTextColor: derived.textColor1,
      panelDividerColor: derived.dividerColor,
-      panelBoxShadow: derived.popoverBoxShadow,
+      panelBoxShadow: derived.boxShadow2,
      panelBorderRadius: base.borderRadius,
      pickerTextDecorationColor: derived.textColor2,
      panelHeaderFontWeight: base.fontWeightStrong
--- a/src/drawer/src/styles/themed-base.cssr.js
+++ b/src/drawer/src/styles/themed-base.cssr.js
@ -9,7 +9,8 @@ export default c([
  ({ props }) => {
    const {
      color: backgroundColor,
-      textColor
+      textColor,
+      boxShadow
    } = props.$local
    const {
      cubicBezierEaseInOut,
@ -22,6 +23,7 @@ export default c([
          overflow: auto;
          position: absolute;
          pointer-events: all;
+          box-shadow: ${boxShadow};
          transition:
            background-color .3s ${cubicBezierEaseInOut},
            color .3s ${cubicBezierEaseInOut};
--- a/src/drawer/styles/dark.js
+++ b/src/drawer/styles/dark.js
@ -6,7 +6,8 @@ export default create({
  getDerivedVariables ({ derived }) {
    return {
      color: derived.modalColor,
-      textColor: derived.textColor2Overlay
+      textColor: derived.textColor2Overlay,
+      boxShadow: derived.boxShadow3
    }
  }
 })
--- a/src/drawer/styles/light.js
+++ b/src/drawer/styles/light.js
@ -6,7 +6,8 @@ export default create({
  getDerivedVariables ({ derived }) {
    return {
      color: derived.modalColor,
-      textColor: derived.textColor2Overlay
+      textColor: derived.textColor2Overlay,
+      boxShadow: derived.boxShadow3
    }
  }
 })
--- a/src/dropdown/styles/dark.js
+++ b/src/dropdown/styles/dark.js
@ -7,7 +7,7 @@ export default create({
  getDerivedVariables ({ derived, base }) {
    const {
      textColor2,
-      popoverBoxShadow,
+      boxShadow2,
      dividerColorOverlay,
      hoverColorOverlay,
      popoverColor
@ -20,7 +20,7 @@ export default create({
      color: popoverColor,
      dividerColor: dividerColorOverlay,
      borderRadius,
-      boxShadow: popoverBoxShadow,
+      boxShadow: boxShadow2,
      suffixColor: textColor2,
      prefixColor: textColor2,
      optionColorHover: hoverColorOverlay
--- a/src/dropdown/styles/light.js
+++ b/src/dropdown/styles/light.js
@ -7,7 +7,7 @@ export default create({
  getDerivedVariables ({ derived, base }) {
    const {
      textColor2,
-      popoverBoxShadow,
+      boxShadow2,
      dividerColor,
      hoverColorOverlay,
      popoverColor
@ -20,7 +20,7 @@ export default create({
      color: popoverColor,
      dividerColor,
      borderRadius,
-      boxShadow: popoverBoxShadow,
+      boxShadow: boxShadow2,
      suffixColor: textColor2,
      prefixColor: textColor2,
      optionColorHover: hoverColorOverlay
--- a/src/message/styles/dark.js
+++ b/src/message/styles/dark.js
@ -15,7 +15,7 @@ export default create({
      popoverColor
    } = derived
    const {
-      popmenuBoxShadow
+      boxShadow2
    } = base
    return {
      textColorInfo: textColorBase,
@ -32,7 +32,7 @@ export default create({
      boxShadowSuccess: `0 2px 12px 0 ${changeColor(successColorSuppl, { alpha: '0.4' })}`,
      boxShadowError: `0 2px 12px 0 ${changeColor(errorColorSuppl, { alpha: '0.4' })}`,
      boxShadowWarning: `0 2px 12px 0 ${changeColor(warningColorSuppl, { alpha: '0.4' })}`,
-      boxShadowLoading: popmenuBoxShadow,
+      boxShadowLoading: boxShadow2,
      iconColorInfo: 'rgba(255, 255, 255, .5)',
      iconColorSuccess: 'rgba(255, 255, 255, .5)',
      iconColorWarning: 'rgba(255, 255, 255, .5)',
--- a/src/message/styles/light.js
+++ b/src/message/styles/light.js
@ -16,7 +16,7 @@ export default create({
      popoverColor
    } = derived
    const {
-      popmenuBoxShadow
+      boxShadow2
    } = base
    const coloredBoxShadow = '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
    return {
@ -34,7 +34,7 @@ export default create({
      boxShadowSuccess: coloredBoxShadow,
      boxShadowError: coloredBoxShadow,
      boxShadowWarning: coloredBoxShadow,
-      boxShadowLoading: popmenuBoxShadow,
+      boxShadowLoading: boxShadow2,
      iconColorInfo: 'rgba(255, 255, 255, .45)',
      iconColorSuccess: 'rgba(255, 255, 255, .45)',
      iconColorWarning: 'rgba(255, 255, 255, .45)',
--- a/src/modal/src/BodyWrapper.vue
+++ b/src/modal/src/BodyWrapper.vue
@ -4,7 +4,7 @@
    v-show="displayDirective === 'if' || displayed || show"
    class="n-modal-body-wrapper"
  >
-    <n-scrollbar ref="scrollbar">
+    <n-scrollbar ref="scrollbar" content-class="n-modal-scroll-content">
      <transition
        name="n-fade-in-scale-up-transition"
        :appear="NModal.appear ?? NModal.isMounted"
--- a/src/modal/src/styles/themed-base.cssr.js
+++ b/src/modal/src/styles/themed-base.cssr.js
@ -8,7 +8,8 @@ export default c([
      cubicBezierEaseOut
    } = props.$base
    const {
-      color
+      color,
+      boxShadow
    } = props.$local
    return [
      cB('modal-container', {
@ -48,27 +49,18 @@ export default c([
          overflow: visible;
        `
      }, [
-        c('>', [
-          cB('scrollbar', [
-            c('>', [
-              cB('scrollbar-container', [
-                c('>', [
-                  cB('scrollbar-content', {
-                    raw: `
-                      min-height: 100%;
-                      display: flex;
-                    `
-                  })
-                ])
-              ])
-            ])
-          ])
-        ])
+        cB('modal-scroll-content', {
+          raw: `
+            min-height: 100%;
+            display: flex;
+          `
+        })
      ]),
      cTB('modal', {
        raw: `
          margin: auto;
          position: relative;
+          box-shadow: ${boxShadow}
        `
      }, [
        fadeInScaleUpTransition({
--- a/src/modal/styles/dark.js
+++ b/src/modal/styles/dark.js
@ -6,11 +6,13 @@ export default create({
  getDerivedVariables ({ base, derived }) {
    const {
      modalColor,
-      textColor2Overlay
+      textColor2Overlay,
+      boxShadow3
    } = derived
    return {
      color: modalColor,
-      textColor: textColor2Overlay
+      textColor: textColor2Overlay,
+      boxShadow: boxShadow3
    }
  }
 })
--- a/src/modal/styles/light.js
+++ b/src/modal/styles/light.js
@ -6,11 +6,13 @@ export default create({
  getDerivedVariables ({ base, derived }) {
    const {
      modalColor,
-      textColor2
+      textColor2,
+      boxShadow3
    } = derived
    return {
      color: modalColor,
-      textColor: textColor2
+      textColor: textColor2,
+      boxShadow: boxShadow3
    }
  }
 })
--- a/src/popover/styles/dark.js
+++ b/src/popover/styles/dark.js
@ -7,7 +7,8 @@ export default create({
  getDerivedVariables ({ base, derived }) {
    const {
      popoverColor,
-      textColor2Overlay
+      textColor2Overlay,
+      boxShadow2
    } = derived
    const {
      borderRadius
@ -17,7 +18,7 @@ export default create({
      borderRadius,
      color: popoverColor,
      textColor: textColor2Overlay,
-      boxShadow: '0 2px 8px 0 rgba(0, 0, 0, .12)',
+      boxShadow: boxShadow2,
      tooltipColor: popoverColor,
      tooltipTextColor: textColor2Overlay
    }
--- a/src/popover/styles/light.js
+++ b/src/popover/styles/light.js
@ -6,6 +6,7 @@ export default create({
  theme: 'light',
  getDerivedVariables ({ base, derived }) {
    const {
+      boxShadow2,
      popoverColor,
      textColor2,
      baseColor
@ -18,7 +19,7 @@ export default create({
      borderRadius,
      color: popoverColor,
      textColor: textColor2,
-      boxShadow: '0 2px 8px 0 rgba(0, 0, 0, .12)',
+      boxShadow: boxShadow2,
      tooltipColor: 'rgba(0, 0, 0, .85)',
      tooltipTextColor: baseColor
    }
--- a/src/time-picker/styles/dark.js
+++ b/src/time-picker/styles/dark.js
@ -13,12 +13,12 @@ export default create({
      opacityDisabled
    } = derived
    const {
-      popmenuBoxShadow,
+      boxShadow2,
      borderRadius
    } = base
    return {
      panelColor: popoverColor,
-      panelBoxShadow: popmenuBoxShadow,
+      panelBoxShadow: boxShadow2,
      panelDividerColor: dividerColorOverlay,
      itemTextColor: textColor2Overlay,
      itemTextColorActive: primaryColor,
--- a/src/time-picker/styles/light.js
+++ b/src/time-picker/styles/light.js
@ -13,12 +13,12 @@ export default create({
      opacityDisabled
    } = derived
    const {
-      popmenuBoxShadow,
+      boxShadow2,
      borderRadius
    } = base
    return {
      panelColor: modalColor,
-      panelBoxShadow: popmenuBoxShadow,
+      panelBoxShadow: boxShadow2,
      panelDividerColor: dividerColorOverlay,
      itemTextColor: textColor2Overlay,
      itemTextColorActive: primaryColor,