/
_generic_partials.sass
70 lines (55 loc) · 2.04 KB
/
_generic_partials.sass
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
.selective__field__type__partials
> .selective__field__header
align-items: center
display: flex
flex-flow: row-reverse
.selective__field__label
flex-grow: 1
margin: $le-space-small 0
> .selective__field__input__structure
> .selective__list
> .selective__list__item
&:focus-within
border-color: var(--color-tertiary-dark)
> .selective__list__fields__header > .selective__field__actions,
> .selective__field__actions
.selective__list__item__index
aspect-ratio: 1
border: $le-border-size-medium solid var(--color-tertiary)
border-radius: 50%
display: inline-block
text-align: center
width: $le-space-large
.selective__list__item:focus-within &
border-color: var(--color-tertiary-dark)
> .selective__list__fields__header > .selective__field__actions
.selective__list__item__index
border-color: var(--color-on-tertiary)
.selective__list__item--visible &
border-color: var(--color-secondary)
.selective__list__item:focus-within &
border-color: var(--color-tertiary-dark)
&--visible
> .selective__list__fields__header > .selective__field__actions,
> .selective__field__actions
.selective__list__item__index
border-color: var(--color-secondary)
&--hovered
outline: $le-border-size-large solid var(--color-secondary)
> .selective__list__fields__header > .selective__list__item__preview,
> .selective__list__item__preview
.selective__field__partials__preview
margin-left: $le-space-small
font-size: $le-font-size-small
&::after
content: ')'
&::before
content: '('
> .selective__field__footer
margin-top: $le-space-small
button
+button
+button-outline
+button-tertiary
.selective__action--add
+field-action-icon