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