1
2// Accordion
3
4.header__actions-bar {
5  padding-top: 1em;
6  padding-right: 1em;
7  background: $darkpurple;
8  color: $white;
9  margin-left: 0;
10  .event__actions {
11    margin-right: 10px;
12    margin-top: -6px;
13    @include mediaQuery(large) {
14      margin-right: -20px;
15    }
16  }
17}
18
19.accord-trigger {
20  transform: rotate(90deg);
21  font-size: 1.5em;
22  color: lighten($darkgrey, 10%);
23  padding: .3em;
24  display: block;
25  margin: 0 auto;
26  transition: all .2s ease;
27  &:after {
28    content: '\276F'
29  }
30  &.active {
31    transform: rotate(-90deg);
32    color: $darkbg__accent;
33  }
34  &:focus {
35    outline: 0;
36    color: $darkbg__accent;
37  }
38}
39
40// Single event log card
41.accord-row {
42  position: relative;
43  border: 1px solid $lightgrey;
44  padding: 1em 1em 1em 0em;
45  margin: .65em 0;
46  background: $white;
47  overflow: hidden;
48  &.active,
49  &.selected {
50    background: $lightblue;
51  }
52  &:hover {
53    background: $lightblue;
54    cursor: pointer;
55  }
56  &:last-child {
57    border-bottom: 1px solid $lightgrey;
58  }
59}