forked from canonical/vanilla-framework
/
_patterns_accordion.scss
61 lines (52 loc) · 1.4 KB
/
_patterns_accordion.scss
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
@import 'settings';
@mixin vf-p-accordion {
$icon-size: map-get($icon-sizes, accordion);
.p-accordion__list {
list-style-type: none;
margin: 0 0 $spv-outer--scaleable 0;
padding: 0;
}
.p-accordion__group {
& + & {
@extend %vf-pseudo-border--top;
}
}
.p-accordion__tab {
@extend %single-border-text-vpadding--scaling;
@include vf-focus;
$calculated-height: $multi * $spv-inner--x-small * 2 + map-get($line-heights, default-text);
background: {
position: top 50% left $sph-inner;
repeat: no-repeat;
}
background-color: inherit;
border: 0;
border-radius: 0;
justify-content: flex-start;
margin-bottom: 0;
padding-left: $sph-inner + $icon-size + $sph-inner;
padding-right: $sph-inner;
text-align: left;
transition-duration: 0s;
width: 100%;
z-index: 2;
// aria-selected controls the open and closed state for the accordion tab
&[aria-expanded='true'] {
@include vf-icon-minus($color-mid-dark);
background-size: $icon-size;
}
&[aria-expanded='false'] {
@include vf-icon-plus($color-mid-dark);
background-size: $icon-size;
}
}
.p-accordion__panel {
margin: 0;
overflow: auto; // include child margins into its height
padding-left: $sph-inner + $icon-size + $sph-inner * 2;
// Hides panel content
&[aria-hidden='true'] {
display: none;
}
}
}