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