JFIFxxC      C  " }!1AQa"q2#BR$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz w!1AQaq"2B #3Rbr/*! -- Stack Accordions -- */ .accordion{ .accordion__title{ .transition(0.5s,ease); opacity: .5; margin-bottom: @base-line-height/2; &:hover{ opacity: 1; } &:before{ font-family: "stack-interface"; content: '\e80d'; margin-right: 6px; color: @color-dark; } span{ display: inline-block; } } li{ &.active{ margin-bottom: @base-line-height/2; .accordion__title{ opacity: 1; &:before{ content: '\e80a'; } } .accordion__content{ animation: fadeUp .5s ease forwards; -webkit-animation: fadeUp .5s ease forwards; } } } } .accordion-1{ li{ &.active{ .accordion__title{ span{ color: #fff; } &:before{ color: #fff; } border-color: @color-primary; } } .accordion__title{ border-radius: 6px; border-bottom: 1px solid #ECECEC; } } } .accordion-2{ li{ .accordion__title{ border-left: none; border-right: none; border-top: none; border-bottom: 1px solid #ECECEC; padding-left: 0; } &.active{ .accordion__title{ background: none; border-bottom: 1px solid rgba(0,0,0,0); } } } } .bg--dark,.imagebg:not(.image--light), .bg--primary{ .accordion-2, .accordion-1{ li{ .accordion__title{ &:before{ color: #fff; } border-color: lighten(@color-dark, 15%) } } } } .imagebg:not(.image--light), .bg--primary{ .accordion{ li{ .accordion__title{ border-color: rgba(255,255,255,.3); } } } }