-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyoSelect.css
73 lines (72 loc) · 2.38 KB
/
yoSelect.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
details.yo-select.dropdown {
margin-bottom: 1rem;
}
details.yo-select.dropdown > summary,
details.yo-select.dropdown > summary:not([role]) {
min-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
height: auto;
}
details.yo-select.dropdown > summary.placeholder,
details.yo-select.dropdown > summary:not([role]).placeholder {
opacity: 0.5;
}
details.yo-select.dropdown > summary .yo-badge,
details.yo-select.dropdown > summary:not([role]) .yo-badge {
background-color: var(--pico-secondary-background);
color: var(--pico-secondary-inverse);
padding: calc(var(--pico-block-spacing-vertical) * 0.25) calc(var(--pico-block-spacing-horizontal) * 0.5);
border-radius: var(--pico-border-radius);
}
details.yo-select.dropdown > summary .yo-badge > button,
details.yo-select.dropdown > summary:not([role]) .yo-badge > button {
padding: 0.025rem 0.25rem;
line-height: var(--pico-line-height);
}
details.yo-select.dropdown > summary .yo-clear-btn,
details.yo-select.dropdown > summary:not([role]) .yo-clear-btn {
background: none;
border: none;
padding: 0 4px;
cursor: pointer;
font-size: 1.2em;
color: var(--pico-primary-background);
margin-left: auto;
}
details.yo-select.dropdown > summary .yo-clear-btn:hover,
details.yo-select.dropdown > summary:not([role]) .yo-clear-btn:hover {
color: var(--pico-primary-hover-background);
}
details.yo-select.dropdown ul {
position: relative;
}
details.yo-select.dropdown ul li {
padding: 0;
margin: calc(var(--pico-block-spacing-vertical) * 0.25) 0;
}
details.yo-select.dropdown ul li.search-container {
padding: 0 calc(var(--pico-block-spacing-horizontal) * 0.25);
}
details.yo-select.dropdown ul li.placeholder label.disabled {
opacity: 0.5;
color: #6c757d;
cursor: default;
pointer-events: none;
}
details.yo-select.dropdown ul li:last-of-type {
margin-bottom: 0;
}
details.yo-select.dropdown ul li label {
display: inline-block;
margin: 0;
padding: calc(var(--pico-block-spacing-vertical) * 0.5) calc(var(--pico-block-spacing-horizontal) * 0.5);
width: 100%;
transition: color 0.2s ease;
}
details.yo-select.dropdown ul li label:has(input:checked) {
color: var(--pico-primary);
}
details.yo-select.dropdown ul li label input[type=checkbox],
details.yo-select.dropdown ul li label input[type=radio] {
display: none;
}
/*# sourceMappingURL=yoSelect.css.map */