mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu.scss)

Browse Source
This commit is contained in:
songwanli2025@163.com 2020-01-07 17:09:45 +08:00
parent b2373484c8
commit 1390c67af0
3 changed files with 106 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
styles/Menu.scss
View File

@ -4,109 +4,129 @@
@include themes-mixin() {
@include b(menu) {
width: 100%;
box-sizing: border-box;
font-size: 14px;
background-color: $--menu-background-color;
color: $--menu-item-text-color;
@include once {
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
width: 100%;
box-sizing: border-box;
font-size: 14px;
}
@include b(menu-list) {
list-style: none;
margin: 0;
padding: 0;
@include b(menu-item) {
cursor: pointer;
color: $--menu-item-text-color;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
height: 48px;
display: flex;
align-items: center;
font-size: 14px;
@include once {
list-style: none;
line-height: 1.5;
@include e(icon) {
&::before {
content: '';
width: 10px;
height: 10px;
position: absolute;
background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
top: 20px;
left: 30px;
clip-path: polygon(100% 0, 100% 100%, 0% 100%);
margin: 0;
padding: 0;
}
@include b(menu-item) {
color: $--menu-item-text-color;
@include once {
cursor: pointer;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
height: 48px;
display: flex;
align-items: center;
font-size: 14px;
list-style: none;
line-height: 1.5;
// @include e(icon) {
// &::before {
// content: '';
// width: 10px;
// height: 10px;
// position: absolute;
// background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
// top: 20px;
// left: 30px;
// clip-path: polygon(100% 0, 100% 100%, 0% 100%);
// }
// }
@include m(selected) {
&::before {
opacity: .9;
}
}
@include m(disabled) {
opacity: 0.45;
cursor: not-allowed;
}
}
&::before {
content: "";
background-size: 300%;
background-image: $--menu-item-background-image;
background-position: $--menu-item-background-position;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
opacity: 0;
}
@include m(selected) {
&::before {
opacity: .9;
@include once {
content: "";
background-size: 300%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0;
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
opacity: 0;
}
}
@include m(disabled) {
opacity: 0.45;
cursor: not-allowed;
}
}
}
@include b(sub-menu) {
cursor: pointer;
position: relative;
@include b(sub-menu-header) {
font-weight: 500;
font-size: 14px;
color: $--menu-sub-menu-text-color;
transition: color .3s $--n-ease-in-out-cubic-bezier;
height: 48px;
display: flex;
align-items: center;
position: relative;
&::after { // down arrow
content: '';
height: 6px;
width: 6px;
border-left: 2px solid $--n-primary-color;
border-top: 2px solid $--n-primary-color;
position: absolute;
right: 24px;
top: calc(50% - 3px);
transform: rotate(45deg) ;
transform-origin: 25% 25%;
transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
@include m(collapsed) {
&::after {
transform: rotate(225deg);
}
}
@include m(disabled) {
opacity: 0.45;
cursor: not-allowed;
@include once {
cursor: pointer;
position: relative;
list-style: none;
@include b(sub-menu-content) {
padding: 0;
@include fade-in-height-expand-transition($duration: .2s);
}
}
@include b(sub-menu-content) {
padding: 0;
@include fade-in-height-expand-transition($duration: .2s);
@include b(sub-menu-header) {
color: $--menu-sub-menu-text-color;
@include once {
font-weight: 500;
font-size: 14px;
transition: color .3s $--n-ease-in-out-cubic-bezier;
height: 48px;
display: flex;
align-items: center;
position: relative;
@include m(collapsed) {
&::after {
transform: rotate(225deg);
}
}
@include m(disabled) {
opacity: 0.45;
cursor: not-allowed;
}
}
&::after { // down arrow
border-left: 2px solid $--n-primary-color;
border-top: 2px solid $--n-primary-color;
@include once {
content: '';
height: 6px;
width: 6px;
position: absolute;
right: 24px;
top: calc(50% - 3px);
transform: rotate(45deg) ;
transform-origin: 25% 25%;
transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
}
}
}
@include b(menu-item-group) {
@include b(menu-item-group-title) {
cursor: default;
height: 40px;
display: flex;
align-items: center;
color: $--menu-item-group-text-color;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include once {
cursor: default;
height: 40px;
display: flex;
align-items: center;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
}
}
}

1
styles/themes/dark/components/Menu.scss
View File

@ -1,4 +1,5 @@
@mixin setup-dark-menu {
$--menu-background-color: $--neutral-9 !global;
$--menu-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
$--menu-item-background-position: 0% !global;
$--menu-item-group-text-color: $--n-meta-text-color !global;

1
styles/themes/light/components/Menu.scss
View File

@ -1,4 +1,5 @@
@mixin setup-light-menu {
$--menu-background-color: $--n-background-color !global;
$--menu-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
$--menu-item-background-position: 100% !global;
$--menu-item-group-text-color: $--n-meta-text-color !global;