refactor(dropdown): reoganize css

This commit is contained in:
07akioni 2019-12-04 09:36:17 +08:00
parent 22f308284e
commit eb895564cf
3 changed files with 28 additions and 23 deletions

View File

@ -5,7 +5,7 @@
@include b(popover-content) {
@include b(dropdown-submenu-activator) {
@include e(arrow) {
fill: $--n-secondary-text-color;
fill: $--dropdown-item-suffix-fill;
}
}
@include once {
@ -23,7 +23,22 @@
@include b(dropdown-menu) {
outline: none;
@include b(base-select-menu) {
@include m(small-size, medium-size) {
@include m(small-size) {
@include b(base-select-menu-option-wrapper) {
padding-top: 4px;
padding-bottom: 4px;
}
@include b(base-select-option) {
padding: 0 20px;
}
@include b(dropdown-submenu-activator) {
@include e(arrow) {
font-size: 16px;
margin-left: 12px;
}
}
}
@include m(medium-size) {
@include b(base-select-menu-option-wrapper) {
padding-top: 4px;
padding-bottom: 4px;
@ -38,18 +53,22 @@
}
}
}
@include m(small-size) {
@include m(large-size) {
@include b(base-select-menu-option-wrapper) {
padding-top: 6px;
padding-bottom: 6px;
}
@include b(base-select-option) {
padding: 0 16px;
padding: 0 24px;
}
@include b(dropdown-submenu-activator) {
@include e(arrow) {
font-size: 16px;
margin-left: 12px;
margin-left: 20px;
}
}
}
@include m(large-size, huge-size) {
@include m(huge-size) {
@include b(base-select-menu-option-wrapper) {
padding-top: 8px;
padding-bottom: 8px;
@ -64,27 +83,18 @@
}
}
}
@include m(large-size) {
@include b(base-select-menu-option-wrapper) {
padding-top: 6px;
padding-bottom: 6px;
}
}
}
}
@include b(dropdown-divider) {
margin: 4px 0;
}
@include b(dropdown-submenu) {
@include fade-in-scale-up-transition($origin: (left top));
@include fade-in-scale-up-transition();
margin-top: 0;
position: absolute !important;
margin-left: 6px;
margin-right: 6px;
}
@include b(base-select-menu) {
outline: none;
}
}
}
}

View File

@ -1,6 +1,3 @@
@mixin setup-dark-dropdown {
$--dropdown-menu-bg-color:#4b516a !global;
$--dropdown-item-hover-bg-color: rgba(96, 220, 178, 0.3) !global;
$--dropdown-item-hover-font-color: #fff !global;
$--dropdown-item-suffix-fill: $--n-secondary-text-color !global;
}

View File

@ -1,5 +1,3 @@
@mixin setup-light-dropdown {
$--dropdown-menu-bg-color: #fff !global;
$--dropdown-item-hover-bg-color: #E8E8E8 !global;
$--dropdown-item-hover-font-color: $--primary-6 !global;
$--dropdown-item-suffix-fill: $--n-secondary-text-color !global;
}