Commit 579d1f5953b53c39e3c97eb628713affeabd63be
fancy css (use variable)
mixmix committed on 5/13/2019, 5:37:54 AMParent: d0c49fdc39ca332b0de5cdef47f760b02213e88d
Files changed
app/html/settings/friend-pub.js | changed |
app/html/settings/friend-pub.mcss | changed |
app/html/settings/friend-pub.js | ||
---|---|---|
@@ -42,9 +42,9 @@ | ||
42 | 42 … | h('datalist', { id: 'pub-gossip-datalist' }, [ |
43 | 43 … | h('option', { value: 0, label: 'My pub' }), |
44 | 44 … | h('option', { value: 1, label: 'My friend' }), |
45 | 45 … | h('option', { value: 2, label: 'A friends friend' }), |
46 | - h('option', { value: 3, label: 'No limit' }) | |
46 … | + h('option', { value: 3, label: 'Any pub' }) | |
47 | 47 … | ]), |
48 | 48 … | h('input', { |
49 | 49 … | type: 'range', |
50 | 50 … | attributes: { list: 'pub-gossip-datalist' }, |
app/html/settings/friend-pub.mcss | |||
---|---|---|---|
@@ -3,24 +3,27 @@ | |||
3 | 3 … | grid-gap: 1rem | |
4 | 4 … | ||
5 | 5 … | div.description {} | |
6 | 6 … | ||
7 … | + --range-options: 4 | ||
8 … | + --cols: calc(2 * var(--range-options)) | ||
9 … | + | ||
7 | 10 … | div.slider { | |
8 | 11 … | display: grid | |
9 | - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr | ||
12 … | + grid-template-columns: repeat(var(--cols), 1fr) | ||
10 | 13 … | ||
11 | 14 … | datalist { | |
12 | 15 … | grid-row: 1 | |
13 | - grid-column: 1 / 9 | ||
16 … | + grid-column: 1 / calc(var(--cols) + 1) | ||
14 | 17 … | ||
15 | 18 … | display: grid | |
16 | 19 … | grid-template-columns: 1fr 1fr 1fr 1fr | |
17 | 20 … | justify-items: center | |
18 | 21 … | } | |
19 | 22 … | ||
20 | 23 … | input[type=range] { | |
21 | 24 … | grid-row: 2 | |
22 | - grid-column: 2 / 8 | ||
25 … | + grid-column: 2 / var(--cols) | ||
23 | 26 … | ||
24 | 27 … | margin-left: 0 | |
25 | 28 … | } | |
26 | 29 … | } |
Built with git-ssb-web