mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(menu.scss)
This commit is contained in:
songwanli2025@163.com
parent
b2373484c8
commit
1390c67af0
186
styles/Menu.scss
186
styles/Menu.scss
@ -4,109 +4,129 @@
|
|||||||
|
|
||||||
@include themes-mixin() {
|
@include themes-mixin() {
|
||||||
@include b(menu) {
|
@include b(menu) {
|
||||||
width: 100%;
|
background-color: $--menu-background-color;
|
||||||
box-sizing: border-box;
|
color: $--menu-item-text-color;
|
||||||
font-size: 14px;
|
@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) {
|
@include b(menu-list) {
|
||||||
list-style: none;
|
@include once {
|
||||||
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;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
line-height: 1.5;
|
margin: 0;
|
||||||
@include e(icon) {
|
padding: 0;
|
||||||
&::before {
|
}
|
||||||
content: '';
|
@include b(menu-item) {
|
||||||
width: 10px;
|
color: $--menu-item-text-color;
|
||||||
height: 10px;
|
@include once {
|
||||||
position: absolute;
|
cursor: pointer;
|
||||||
background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
|
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||||
top: 20px;
|
position: relative;
|
||||||
left: 30px;
|
height: 48px;
|
||||||
clip-path: polygon(100% 0, 100% 100%, 0% 100%);
|
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 {
|
&::before {
|
||||||
content: "";
|
|
||||||
background-size: 300%;
|
|
||||||
background-image: $--menu-item-background-image;
|
background-image: $--menu-item-background-image;
|
||||||
background-position: $--menu-item-background-position;
|
background-position: $--menu-item-background-position;
|
||||||
position: absolute;
|
@include once {
|
||||||
left: 0;
|
content: "";
|
||||||
right: 0;
|
background-size: 300%;
|
||||||
top: 0;
|
position: absolute;
|
||||||
bottom: 0;
|
left: 0;
|
||||||
z-index: 0;
|
right: 0;
|
||||||
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
|
top: 0;
|
||||||
opacity: 0;
|
bottom: 0;
|
||||||
}
|
z-index: 0;
|
||||||
@include m(selected) {
|
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
|
||||||
&::before {
|
opacity: 0;
|
||||||
opacity: .9;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include m(disabled) {
|
|
||||||
opacity: 0.45;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include b(sub-menu) {
|
@include b(sub-menu) {
|
||||||
cursor: pointer;
|
@include once {
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
@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;
|
position: relative;
|
||||||
&::after { // down arrow
|
list-style: none;
|
||||||
content: '';
|
@include b(sub-menu-content) {
|
||||||
height: 6px;
|
padding: 0;
|
||||||
width: 6px;
|
@include fade-in-height-expand-transition($duration: .2s);
|
||||||
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 b(sub-menu-content) {
|
@include b(sub-menu-header) {
|
||||||
padding: 0;
|
color: $--menu-sub-menu-text-color;
|
||||||
@include fade-in-height-expand-transition($duration: .2s);
|
@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) {
|
||||||
@include b(menu-item-group-title) {
|
@include b(menu-item-group-title) {
|
||||||
cursor: default;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: $--menu-item-group-text-color;
|
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,4 +1,5 @@
|
|||||||
@mixin setup-dark-menu {
|
@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-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-background-position: 0% !global;
|
||||||
$--menu-item-group-text-color: $--n-meta-text-color !global;
|
$--menu-item-group-text-color: $--n-meta-text-color !global;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
@mixin setup-light-menu {
|
@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-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-background-position: 100% !global;
|
||||||
$--menu-item-group-text-color: $--n-meta-text-color !global;
|
$--menu-item-group-text-color: $--n-meta-text-color !global;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user