Feat(Menu): Add drop mask

Add drop mask to menu. Optimize tool description.
This commit is contained in:
2024-04-30 15:22:54 +08:00
parent af8e901098
commit 929b2f3b91
8 changed files with 95 additions and 20 deletions

View File

@@ -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;
}
}

View File

@@ -23,6 +23,7 @@
.version {
width: 0;
transition: all 0.2s;
}
.operation {
@@ -30,6 +31,7 @@
font-size: 1.6em;
gap: 4px;
opacity: 0;
transition: all 0.2s;
> *:hover {
color: constants.$font-secondary-color;

View File

@@ -7,6 +7,7 @@
.menu-droppable {
display: flex;
position: relative;
min-height: 0;
flex: 1;
width: 100%;