FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize submenu in ToolsFramework

Browse Source
This commit is contained in:
Fat Snake
2023-10-12 18:34:14 +08:00
parent 6a7cae8319
commit ac3c1dbc2c
6 changed files with 367 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/components/common/hide-scrollbar.scss
View File

@@ -14,7 +14,6 @@
.hide-scrollbar-content {
display: inline-block;
width: 100%;
min-width: 900px;
}
}

118
src/assets/css/pages/tools-framework.scss
View File

@@ -1,4 +1,5 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
body {
background-color: constants.$background-color;
@@ -21,16 +22,24 @@ body {
.content {
> ul {
> li {
margin: 4px 14px;
&.item {
position: relative;
margin: 4px 14px;
font-size: 1.4em;
border-radius: 8px;
overflow: hidden;
.menu-bt {
.icon {
margin-right: 16px;
border-radius: 8px;
overflow: hidden;
.icon-box {
cursor: pointer;
width: 26px;
height: 26px;
.icon {
margin-right: 16px;
}
}
a {
@@ -38,6 +47,7 @@ body {
padding: 8px 16px;
height: 100%;
width: 100%;
transition: all 0.2s;
.text {
flex: 1;
@@ -50,54 +60,60 @@ body {
}
}
.submenu {
display: none;
position: fixed;
padding-left: 20px;
left: 100%;
top: 0;
.content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 10px;
background-color: constants.$origin-color;
border-radius: 8px;
.item {
border-radius: 8px;
white-space: nowrap;
overflow: hidden;
a {
display: block;
padding: 8px 16px;
transition: all 0.2s;
&.active {
color: constants.$origin-color;
background-color: constants.$main-color !important;
}
}
&:hover a {
background-color: constants.$background-color;
}
}
}
}
&:hover {
background-color: constants.$background-color;
}
}
&.multiple-item {
font-size: 1.4em;
border-radius: 8px;
overflow: hidden;
.menu-bt {
display: flex;
.icon-box {
cursor: pointer;
padding: 8px 16px;
.icon {
transition: all 0.3s ease;
transform: rotate(180deg);
}
}
a {
display: flex;
padding: {
top: 8px;
bottom: 8px;
right: 16px;
};
height: 100%;
width: 100%;
.text {
flex: 1;
}
}
}
.submenu {
}
&.show {
.menu-bt {
.icon-box {
.icon {
transform: rotate(360deg);
.submenu {
display: block;
animation: 0.3s ease;
@include mixins.unique-keyframes {
0% {
display: block;
transform: translateX(-10px);
opacity: 0;
}
100% {
display: block;
transform: translateX(0);
opacity: 1;
}
}
}
@@ -106,7 +122,7 @@ body {
.separate {
height: 0;
margin: 10px 0;
margin: 10px 5px;
border: {
width: 1px;
color: constants.$font-secondary-color;