84 lines
2.2 KiB
Plaintext
84 lines
2.2 KiB
Plaintext
:root {
|
|
--van-dropdown-menu-height: 48px;
|
|
--van-dropdown-menu-background: var(--van-background-light);
|
|
--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
|
|
--van-dropdown-menu-title-font-size: 15px;
|
|
--van-dropdown-menu-title-text-color: var(--van-text-color);
|
|
--van-dropdown-menu-title-active-text-color: var(--van-danger-color);
|
|
--van-dropdown-menu-title-disabled-text-color: var(
|
|
--van-text-color-secondary
|
|
);
|
|
--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
|
|
--van-dropdown-menu-title-line-height: var(--van-line-height-lg);
|
|
--van-dropdown-menu-option-active-color: var(--van-danger-color);
|
|
--van-dropdown-menu-content-max-height: 80%;
|
|
}
|
|
|
|
.van-dropdown-menu {
|
|
user-select: none;
|
|
|
|
&__bar {
|
|
position: relative;
|
|
display: flex;
|
|
height: var(--van-dropdown-menu-height);
|
|
background: var(--van-dropdown-menu-background);
|
|
box-shadow: var(--van-dropdown-menu-shadow);
|
|
|
|
&--opened {
|
|
z-index: calc(var(--van-dropdown-item-z-index) + 1);
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0; // hack for flex ellipsis
|
|
cursor: pointer;
|
|
|
|
&--disabled {
|
|
.van-dropdown-menu__title {
|
|
color: var(--van-dropdown-menu-title-disabled-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
padding: var(--van-dropdown-menu-title-padding);
|
|
color: var(--van-dropdown-menu-title-text-color);
|
|
font-size: var(--van-dropdown-menu-title-font-size);
|
|
line-height: var(--van-dropdown-menu-title-line-height);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -4px;
|
|
margin-top: -5px;
|
|
border: 3px solid;
|
|
border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
|
|
transform: rotate(-45deg);
|
|
opacity: 0.8;
|
|
content: '';
|
|
}
|
|
|
|
&--active {
|
|
color: var(--van-dropdown-menu-title-active-text-color);
|
|
|
|
&::after {
|
|
border-color: transparent transparent currentColor currentColor;
|
|
}
|
|
}
|
|
|
|
&--down {
|
|
&::after {
|
|
margin-top: -1px;
|
|
transform: rotate(135deg);
|
|
}
|
|
}
|
|
}
|
|
}
|