Merge pull request #328 from zhuokuang/feature/kz/fix-toast-text-zindex

feat: 修复非loading toast zIndex属性不生效/popup-extra暴露背景
hellof2e · Jan 19, 2024 · dab58ac · dab58ac
2 parents 9e44e81 + 510e9cf
commit dab58ac
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 1 deletion.
diff --git a/packages/quarkd/src/popupextra/doc-react.en-US.md b/packages/quarkd/src/popupextra/doc-react.en-US.md
@@ -85,6 +85,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--popup-extra-title-color`          | Title color          | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | Subtitle color       | `#879099`                                     |
 | `--popup-extra-mask-color`           | Mask color           | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | Popup background     | `#ffffff`                                     |
 | `--popup-extra-z-index`              | z-index              | `999`                                         |
 | `--popup-extra-max-height`           | Content max-height   | `90%`                                         |
 | `--popup-extra-min-height`           | Content min-height   | -                                             |

diff --git a/packages/quarkd/src/popupextra/doc-react.zh-CN.md b/packages/quarkd/src/popupextra/doc-react.zh-CN.md
@@ -87,6 +87,7 @@ export default () => {
 | `--popup-extra-title-color`          | 主标题颜色               | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | 副标题颜色               | `#879099`                                     |
 | `--popup-extra-mask-color`           | 蒙层背景                 | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | 浮层背景                 | `#ffffff`                                     |
 | `--popup-extra-z-index`              | 组件层级                 | `999`                                         |
 | `--popup-extra-max-height`           | popup 内容区域最大高度   | `90%`                                         |
 | `--popup-extra-min-height`           | popup 内容区域最小高度   | -                                             |

diff --git a/packages/quarkd/src/popupextra/doc.en-US.md b/packages/quarkd/src/popupextra/doc.en-US.md
@@ -97,6 +97,7 @@ The component provides the following [CSS variables](https://developer.mozilla.o
 | `--popup-extra-title-color`          | Title color          | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | Subtitle color       | `#879099`                                     |
 | `--popup-extra-mask-color`           | Mask color           | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | Popup background     | `#ffffff`                                     |
 | `--popup-extra-z-index`              | z-index              | `999`                                         |
 | `--popup-extra-max-height`           | Content max-height   | `90%`                                         |
 | `--popup-extra-min-height`           | Content min-height   | -                                             |

diff --git a/packages/quarkd/src/popupextra/doc.zh-CN.md b/packages/quarkd/src/popupextra/doc.zh-CN.md
@@ -99,6 +99,7 @@ export default {
 | `--popup-extra-title-color`          | 主标题颜色               | `#242729`                                     |
 | `--popup-extra-subtitle-color`       | 副标题颜色               | `#879099`                                     |
 | `--popup-extra-mask-color`           | 蒙层背景                 | `rgba(0, 0, 0, 0.7)`                          |
+| `--popup-extra-background`           | 浮层背景                 | `#ffffff`                                     |
 | `--popup-extra-z-index`              | 组件层级                 | `999`                                         |
 | `--popup-extra-max-height`           | popup 内容区域最大高度   | `90%`                                         |
 | `--popup-extra-min-height`           | popup 内容区域最小高度   | -                                             |

diff --git a/packages/quarkd/src/popupextra/style.css b/packages/quarkd/src/popupextra/style.css
@@ -33,7 +33,7 @@
   flex-direction: column;
   justify-content: flex-start;
   box-sizing: border-box;
-  background-color: quark-fillBaseColor;
+  background: var(--popup-extra-background, quark-fillBaseColor);
   opacity: 1;
   transition: transform quark-animationDurationBase;
   transition-timing-function: quark-animationTimingEnter;

diff --git a/packages/quarkd/src/toast/style.css b/packages/quarkd/src/toast/style.css
@@ -1,6 +1,7 @@
 :host {
   display: flex;
   transition: quark-animationDurationBase;
+  position: relative;
 }
 
 :host quark-overlay {