16af1346dSMichael Davis 26af1346dSMichael Davis// Accordion 36af1346dSMichael Davis 4994a93b2SMichael Davis.header__actions-bar { 56af1346dSMichael Davis padding-top: 1em; 66dc5f181SMichael Davis padding-bottom: 1em; 76af1346dSMichael Davis padding-right: 1em; 86f7ec80eSYoshie Muranaka background: $background-05; 96f7ec80eSYoshie Muranaka color: $primary-light; 106af1346dSMichael Davis margin-left: 0; 116af1346dSMichael Davis .event__actions { 126af1346dSMichael Davis margin-right: 10px; 13cd789508SIftekharul Islam margin-top: -6px; 142d289422SMichael Davis @include mediaQuery(medium) { 152d289422SMichael Davis margin-right: -40px; 166af1346dSMichael Davis } 176af1346dSMichael Davis } 186dc5f181SMichael Davis p {margin-bottom: 0;} 196af1346dSMichael Davis} 206af1346dSMichael Davis 216af1346dSMichael Davis.accord-trigger { 226af1346dSMichael Davis transform: rotate(90deg); 236af1346dSMichael Davis font-size: 1.5em; 246f7ec80eSYoshie Muranaka color: $text-02; 256af1346dSMichael Davis padding: .3em; 266af1346dSMichael Davis display: block; 276af1346dSMichael Davis margin: 0 auto; 286af1346dSMichael Davis transition: all .2s ease; 296af1346dSMichael Davis &:after { 306af1346dSMichael Davis content: '\276F' 316af1346dSMichael Davis } 326af1346dSMichael Davis &.active { 336af1346dSMichael Davis transform: rotate(-90deg); 346af1346dSMichael Davis } 356af1346dSMichael Davis &:focus { 366af1346dSMichael Davis outline: 0; 376f7ec80eSYoshie Muranaka color: $primary-action; 386af1346dSMichael Davis } 396af1346dSMichael Davis} 406af1346dSMichael Davis 416af1346dSMichael Davis.accord-row { 426af1346dSMichael Davis overflow: hidden; 436dc5f181SMichael Davis .accord-content.inactive { 446dc5f181SMichael Davis max-height: 0; 456dc5f181SMichael Davis height: 0; 466af1346dSMichael Davis } 476dc5f181SMichael Davis .accord-content.active { 486dc5f181SMichael Davis height: auto; 496dc5f181SMichael Davis max-height: 1000px; 506dc5f181SMichael Davis @include fastTransition-all; 516af1346dSMichael Davis } 526af1346dSMichael Davis} 53*8c80dbd9SYoshie Muranaka 54*8c80dbd9SYoshie Muranaka.accordion-trigger { 55*8c80dbd9SYoshie Muranaka .icon { 56*8c80dbd9SYoshie Muranaka transition: transform $duration--fast-01; 57*8c80dbd9SYoshie Muranaka } 58*8c80dbd9SYoshie Muranaka &.accordion-trigger--expanded { 59*8c80dbd9SYoshie Muranaka .icon { 60*8c80dbd9SYoshie Muranaka transform: rotate(90deg); 61*8c80dbd9SYoshie Muranaka } 62*8c80dbd9SYoshie Muranaka } 63*8c80dbd9SYoshie Muranaka}