18 lines
1.7 KiB
CSS
18 lines
1.7 KiB
CSS
.check-dropdown { position: relative; margin-top: 6px; }
|
|
.check-dropdown summary { list-style: none; min-height: 42px; padding: 11px 12px; border: 1px solid #dce2df; border-radius: 8px; background: white; color: var(--ink); font: 500 13px "DM Sans"; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
|
|
.check-dropdown summary::-webkit-details-marker { display: none; }
|
|
.check-dropdown[open] summary { outline: 2px solid #b6d9ca; border-color: var(--green); border-radius: 8px 8px 0 0; }
|
|
.dropdown-arrow { font-size: 17px; transition: transform .15s; }
|
|
.check-dropdown[open] .dropdown-arrow { transform: rotate(180deg); }
|
|
.check-options { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(3, 1fr); background: white; border: 1px solid #b9cac3; border-top: 0; border-radius: 0 0 9px 9px; box-shadow: 0 14px 30px rgba(24,48,39,.14); max-height: 245px; overflow: auto; padding: 8px; }
|
|
.check-options label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #43534d; }
|
|
.check-options label:hover { background: #edf5f1; }
|
|
.check-options input { position: absolute; opacity: 0; pointer-events: none; }
|
|
.checkmark { width: 18px; height: 18px; border: 1px solid #bdc9c4; border-radius: 5px; display: grid; place-items: center; color: transparent; font-size: 11px; background: #fff; }
|
|
.check-options input:checked + .checkmark { background: var(--green); border-color: var(--green); color: white; }
|
|
.check-options input:focus + .checkmark { outline: 2px solid #b6d9ca; }
|
|
|
|
@media (max-width: 760px) {
|
|
.check-options { grid-template-columns: repeat(2, 1fr); }
|
|
}
|