@arco-design/mobile-react 2.19.0

package/esm/popover/style/index.less

@@ -0,0 +1,237 @@
+@import "../../../style/mixin.less";
+@import "./menu.less";
+
+.full() {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.@{prefix}-popover {
+    position: relative;
+    display: inline-flex;
+
+    .popover-child-inner {
+        font-size: 0;
+        line-height: 1;
+    }
+}
+
+.@{prefix}-popover-mask {
+    .full-screen();
+    .use-var(background, popover-mask-background);
+    z-index: @full-screen-z-index;
+}
+
+.@{prefix}-popover-inner {
+    box-sizing: border-box;
+    position: absolute;
+    width: max-content;
+    z-index: @full-screen-z-index + 10;
+    right: 0;
+    background-color: transparent;
+    visibility: hidden;
+    will-change: transform;
+    .use-var(transition, popover-inner-transition);
+    .use-var(color, popover-content-color);
+
+    &.with-shadow {
+
+        .popover-bg {
+            .use-var(box-shadow, popover-inner-background-shadow);
+        }
+
+        .popover-arrow {
+
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+                .use-var(box-shadow, popover-inner-top-arrow-shadow);
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+                .use-var(box-shadow, popover-inner-bottom-arrow-shadow);
+            }
+        }
+    }
+
+    &.show {
+        visibility: visible;
+    }
+
+    .popover-content {
+        position: relative;
+        z-index: 1;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+    }
+
+    .popover-bg {
+        position: absolute;
+        .full();
+        .use-var(border-radius, popover-inner-border-radius);
+        .use-var(background-color, popover-background-color);
+        .use-var(opacity, popover-inner-opacity);
+    }
+
+    .content-text {
+        white-space: normal;
+        word-break: break-all;
+        text-align: left;
+        .use-var(font-size, popover-content-font-size);
+        .use-var(line-height, popover-content-line-height);
+        .use-var(padding, popover-content-padding);
+    }
+
+    &.with-suffix {
+
+        .popover-content {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .icon-divider {
+        width: 1PX;
+        .use-var(height, popover-icon-divider-height);
+        .hairline-var(popover-icon-divider-color, left);
+    }
+
+    .text-close-icon {
+        display: inline-flex;
+        .use-var(font-size, popover-icon-size);
+        .use-var(padding, popover-icon-padding);
+    }
+
+    .text-suffix {
+        .use-var(padding, popover-text-suffix-padding);
+        flex: 0 0 auto;
+    }
+
+    .popover-arrow {
+        position: absolute;
+        transform: rotate(45deg);
+        .use-var(width, popover-arrow-size);
+        .use-var(height, popover-arrow-size);
+        .use-var(background-color, popover-background-color);
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+
+            &,
+            .popover-arrow-content {
+                .use-var(border-bottom-right-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+
+            &,
+            .popover-arrow-content {
+                .use-var(border-top-left-radius, popover-arrow-border-radius);
+            }
+        }
+
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+            transform: translateY(50%) rotate(45deg);
+        }
+
+        &.topRight {
+            bottom: 0;
+            right: 0;
+        }
+
+        &.topCenter,
+        &.topLeft {
+            bottom: 0;
+            left: 0;
+        }
+
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+            transform: translateY(-50%) rotate(45deg);
+        }
+
+        &.bottomRight {
+            top: 0;
+            right: 0;
+        }
+
+        &.bottomCenter,
+        &.bottomLeft {
+            top: 0;
+            left: 0;
+        }
+    }
+
+    // 白色主题
+
+    &.white-theme {
+        .use-var(color, popover-content-white-theme-color);
+
+        .popover-bg {
+            .use-var(background-color, popover-white-theme-background-color);
+            .use-var(opacity, popover-inner-white-theme-opacity);
+        }
+
+        .popover-arrow {
+            .use-var(background-color, popover-white-theme-background-color);
+        }
+
+        .popover-arrow-content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-color: inherit;
+        }
+    }
+
+    // 带border的白色主题
+
+    &.white-theme.bordered {
+
+        .popover-bg {
+            .hairline-var(popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow-content {
+            .use-var(border-color, popover-content-white-theme-border-color);
+        }
+
+        .popover-arrow {
+
+            &.topRight,
+            &.topCenter,
+            &.topLeft {
+
+                .popover-arrow-content {
+                    .hairline-bottom-right-var(popover-content-white-theme-border-color);
+                }
+            }
+
+            &.bottomRight,
+            &.bottomCenter,
+            &.bottomLeft {
+
+                .popover-arrow-content {
+                    .hairline-top-left-var(popover-content-white-theme-border-color);
+                }
+            }
+        }
+    }
+}
+
+// 全局模式
+.global-mode.@{prefix}-popover-inner {
+    position: fixed;
+}
+

package/esm/popover/style/menu.less

@@ -0,0 +1,94 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-popover-menu {
+    &-content {
+        .use-var(border-radius, popover-inner-border-radius);
+        overflow: hidden;
+        &.horizontal-menu {
+            .@{prefix}-popover-menu-item .@{prefix}-popover-menu-text {
+                border: none;
+                box-shadow: none;
+            }
+        }
+    }
+    &-item {
+        .use-var(padding, popover-menu-content-padding);
+        .rem(height, 44);
+        display: flex;
+        align-items: center;
+        &.active {
+            .use-var(background-color, popover-menu-active-background);
+            .white-theme & {
+                .use-var(background-color, popover-menu-active-white-theme-background);
+            }
+        }
+        &:not(:last-child) {
+            .@{prefix}-popover-menu-text {
+                .hairline-var(popover-content-border-color, bottom);
+                .white-theme & {
+                    .hairline-var(popover-content-white-theme-border-color, bottom);
+                }
+            }
+        }
+    }
+    &-icon {
+        .rem(margin-right, 8);
+        .rem(font-size, 20);
+        line-height: 1;
+        & > * {
+            float: left;
+        }
+        &::after {
+            content: " ";
+            clear: both;
+        }
+        .white-theme & {
+            .use-var(color, popover-menu-icon-white-theme-color);
+        }
+    }
+    &-text {
+        height: 100%;
+        .rem(font-size, 14);
+        .rem(line-height, 20);
+        .rem(padding, 12 0);
+        .use-var(color, popover-content-color);
+        .white-theme & {
+            .use-var(color, popover-content-white-theme-color);
+        }
+        .disabled & {
+            .use-var(color, popover-content-disabled-color);
+            .white-theme & {
+                .use-var(color, popover-content-white-theme-disabled-color);
+            }
+        }
+    }
+
+    // 横向菜单
+    &-content.horizontal-menu {
+        display: flex;
+        flex-wrap: wrap;
+        .use-var(max-width, popover-horizontal-menu-max-width);
+        .@{prefix}-popover-menu-item {
+            flex: 0 0 auto;
+            .use-var(width, popover-horizontal-menu-item-size);
+            .use-var(height, popover-horizontal-menu-item-size);
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
+
+.horizontal-menu {
+    .@{prefix}-popover-menu-item {
+        .use-var(padding, popover-horizontal-menu-item-padding);
+        align-items: center;
+    }
+    .@{prefix}-popover-menu-text {
+        padding: 0;
+    }
+    .@{prefix}-popover-menu-icon {
+        .use-var(margin, popover-horizontal-menu-icon-margin);
+    }
+
+}
+