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