mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-15 04:53:00 +08:00
60 lines
1.6 KiB
CSS
60 lines
1.6 KiB
CSS
/* ==========================================================================
|
||
9. Dynamic lists
|
||
========================================================================== */
|
||
|
||
.cbi-dynlist {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
min-width: 260px;
|
||
max-width: 100%;
|
||
height: auto;
|
||
min-height: 32px;
|
||
}
|
||
.cbi-dynlist > .item {
|
||
position: relative;
|
||
padding: 6px 36px 6px 10px;
|
||
border-radius: var(--cb-radius-sm);
|
||
background: var(--cb-fill-2);
|
||
color: var(--cb-text);
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
pointer-events: auto;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
cursor: move;
|
||
user-select: text;
|
||
}
|
||
.cbi-dynlist > .item::after {
|
||
content: "×";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0 11px;
|
||
color: var(--cb-red);
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
}
|
||
.cbi-dynlist > .item:hover::after { background: var(--cb-red-t); }
|
||
.cbi-dynlist > .item > span { pointer-events: none; }
|
||
.cbi-dynlist > .item.drag-over { box-shadow: inset 0 2px 0 var(--cb-accent); }
|
||
.cbi-dynlist > .item.dragging { opacity: .5; }
|
||
.cbi-dynlist > .add-item { display: flex; gap: 6px; }
|
||
.cbi-dynlist > .add-item > input,
|
||
.cbi-dynlist > .add-item > button {
|
||
flex: 1 1 auto;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.cbi-dynlist > .add-item > .cbi-button { flex: 0 0 auto; }
|
||
.cbi-dynlist > .add-item > .cbi-dropdown { flex: 1; min-width: 0; width: 100%; }
|
||
.cbi-dynlist > .add-item > .cbi-input-text.drag-over,
|
||
.cbi-dynlist > .add-item > .cbi-button-add.drag-over { box-shadow: inset 0 2px 0 var(--cb-accent); }
|
||
|