@arco-design/mobile-react 2.29.5 → 2.30.0

package/cjs/popover/style/index.less

@@ -37,13 +37,11 @@
     .use-var(color, popover-content-color);
 
     &.with-shadow {
-
         .popover-bg {
             .use-var(box-shadow, popover-inner-background-shadow);
         }
 
         .popover-arrow {
-
             &.topRight,
             &.topCenter,
             &.topLeft {
@@ -87,7 +85,6 @@
     }
 
     &.with-suffix {
-
         .popover-content {
             display: flex;
             align-items: center;
@@ -121,7 +118,6 @@
         &.topRight,
         &.topCenter,
         &.topLeft {
-
             &,
             .popover-arrow-content {
                 .use-var(border-bottom-right-radius, popover-arrow-border-radius);
@@ -131,7 +127,6 @@
         &.bottomRight,
         &.bottomCenter,
         &.bottomLeft {
-
             &,
             .popover-arrow-content {
                 .use-var(border-top-left-radius, popover-arrow-border-radius);
@@ -198,7 +193,6 @@
     // 带border的白色主题
 
     &.white-theme.bordered {
-
         .popover-bg {
             .hairline-var(popover-content-white-theme-border-color);
         }
@@ -208,11 +202,9 @@
         }
 
         .popover-arrow {
-
             &.topRight,
             &.topCenter,
             &.topLeft {
-
                 .popover-arrow-content {
                     .hairline-bottom-right-var(popover-content-white-theme-border-color);
                 }
@@ -221,7 +213,6 @@
             &.bottomRight,
             &.bottomCenter,
             &.bottomLeft {
-
                 .popover-arrow-content {
                     .hairline-top-left-var(popover-content-white-theme-border-color);
                 }
@@ -235,3 +226,129 @@
     position: fixed;
 }
 
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+    & when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-popover-menu {
+    &-item {
+      &.active {
+        .white-theme & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-popover-menu-active-white-theme-background);
+          }
+        }
+      }
+      &:not(:last-child) {
+        .@{prefix}-popover-menu-text {
+          .white-theme & {
+            @{arco-dark-mode-selector} & {
+              .hairline-var(dark-popover-content-white-theme-border-color, bottom);
+            }
+          }
+        }
+      }
+    }
+    &-icon {
+      .white-theme & {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-popover-menu-icon-white-theme-color);
+        }
+      }
+    }
+    &-text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-popover-content-color);
+      }
+      .white-theme & {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-popover-content-white-theme-color);
+        }
+      }
+      .disabled & {
+        .white-theme & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-popover-content-white-theme-disabled-color);
+          }
+        }
+      }
+    }
+  }
+  .@{prefix}-popover-inner {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-popover-content-color);
+    }
+    &.white-theme {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-popover-content-white-theme-color);
+      }
+      .popover-bg {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-popover-white-theme-background-color);
+        }
+      }
+      .popover-arrow {
+        @{arco-dark-mode-selector} & {
+          .use-var(background-color, dark-popover-white-theme-background-color);
+        }
+      }
+    }
+    &.white-theme.bordered {
+      .popover-bg {
+        @{arco-dark-mode-selector} & {
+          .hairline-var(dark-popover-content-white-theme-border-color);
+        }
+      }
+      .popover-arrow-content {
+        @{arco-dark-mode-selector} & {
+          .use-var(border-color, dark-popover-content-white-theme-border-color);
+        }
+      }
+      .popover-arrow {
+        &.topRight,
+        &.topCenter,
+        &.topLeft {
+          .popover-arrow-content {
+            @{arco-dark-mode-selector} & {
+              .hairline-bottom-right-var(dark-popover-content-white-theme-border-color);
+            }
+          }
+        }
+        &.bottomRight,
+        &.bottomCenter,
+        &.bottomLeft {
+          .popover-arrow-content {
+            @{arco-dark-mode-selector} & {
+              .hairline-top-left-var(dark-popover-content-white-theme-border-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/cjs/popover/style/menu.less

@@ -92,3 +92,72 @@
 
 }
 
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+    & when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-popover-menu {
+    &-item {
+      &.active {
+        .white-theme & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background-color, dark-popover-menu-active-white-theme-background);
+          }
+        }
+      }
+      &:not(:last-child) {
+        .@{prefix}-popover-menu-text {
+          .white-theme & {
+            @{arco-dark-mode-selector} & {
+              .hairline-var(dark-popover-content-white-theme-border-color, bottom);
+            }
+          }
+        }
+      }
+    }
+    &-icon {
+      .white-theme & {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-popover-menu-icon-white-theme-color);
+        }
+      }
+    }
+    &-text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-popover-content-color);
+      }
+      .white-theme & {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-popover-content-white-theme-color);
+        }
+      }
+      .disabled & {
+        .white-theme & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-popover-content-white-theme-disabled-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/