iter: d01 新增下拉菜单 menu 组件(弹层/键盘导航/reduced-motion)
This commit is contained in:
@@ -308,6 +308,82 @@
|
||||
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
|
||||
}
|
||||
|
||||
/* —— 下拉菜单 —— */
|
||||
.ua-menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.ua-menu-trigger {
|
||||
gap: 6px;
|
||||
}
|
||||
.ua-menu-caret {
|
||||
font-size: 10px;
|
||||
opacity: 0.7;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.ua-menu.ua-open .ua-menu-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.ua-menu-pop {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--ua-color-border);
|
||||
border-radius: var(--ua-radius-md);
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
|
||||
}
|
||||
.ua-menu-pop.is-end {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.ua-menu-pop.ua-open {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
.ua-menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: var(--ua-radius-sm);
|
||||
background: none;
|
||||
color: var(--ua-color-text);
|
||||
font-size: var(--ua-font-size-md);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.ua-menu-item:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
|
||||
}
|
||||
.ua-menu-item.is-danger {
|
||||
color: var(--ua-color-danger);
|
||||
}
|
||||
.ua-menu-item.is-danger:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--ua-color-danger) 10%, transparent);
|
||||
}
|
||||
.ua-menu-item:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ua-menu-divider {
|
||||
height: 1px;
|
||||
margin: 4px 2px;
|
||||
background: var(--ua-color-border);
|
||||
}
|
||||
|
||||
/* —— 多行输入 —— */
|
||||
.ua-textarea {
|
||||
width: 100%;
|
||||
@@ -795,6 +871,9 @@
|
||||
.ua-select-arrow,
|
||||
.ua-select-pop,
|
||||
.ua-option,
|
||||
.ua-menu-pop,
|
||||
.ua-menu-caret,
|
||||
.ua-menu-item,
|
||||
.ua-switch-track,
|
||||
.ua-switch-thumb,
|
||||
.ua-tab,
|
||||
|
||||
Reference in New Issue
Block a user