Feat(Menu): Add drop mask

Add drop mask to menu. Optimize tool description.
2024-04-30 15:22:54 +08:00
parent af8e901098
commit 929b2f3b91
8 changed files with 95 additions and 20 deletions
--- a/src/assets/css/components/dnd/drop-mask.scss
+++ b/src/assets/css/components/dnd/drop-mask.scss
@@ -0,0 +1,30 @@
+@use "@/assets/css/constants" as constants;
+
+[data-component=component-drop-mask] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+  };
+  background-color: constants.$origin-color;
+
+  .drop-mask-border {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    border: {
+      width: 2px;
+      color: constants.$font-secondary-color;
+      style: dashed;
+      radius: 8px;
+    };
+    font-size: 1.8em;
+  }
+}