// Accordion #header__actions-bar { padding-top: 1em; padding-right: 1em; background: $medgrey; margin-left: 0; .event__actions { margin-top: 1em; margin-right: 10px; @include mediaQuery(medium) { margin-top: 0; } @include mediaQuery(large) { margin-right: -20px; } } } .accord-trigger { transform: rotate(90deg); font-size: 1.5em; color: lighten($darkgrey, 10%); padding: .3em; display: block; margin: 0 auto; transition: all .2s ease; &:after { content: '\276F' } &.active { transform: rotate(-90deg); color: $darkbg__accent; } &:focus { outline: 0; color: $darkbg__accent; } } // Single event log card .accord-row { position: relative; border-top: 1px solid $lightgrey; padding: 1em 1em 1em 0em; background: $lightblue; overflow: hidden; &.active, &.selected { background: $white; } &:hover { background: $white; } }