@accordion_container: .smk_accordion; @accordion_section: .accordion_in; //Full accordion @{accordion_container}{ position: relative; margin: 0; padding: 0; list-style: none; margin-bottom: 20px; } /** * -------------------------------------------------------------- * Section * -------------------------------------------------------------- */ @{accordion_container}{ @{accordion_section}{ border: 1px solid #ccc; position: relative; z-index: 10; margin-top: -1px; overflow: hidden; } } /** * -------------------------------------------------------------- * Head * -------------------------------------------------------------- */ @{accordion_container}{ @{accordion_section}{ //Head .acc_head{ position: relative; background: #FDFDFD; padding: 10px; font-size: 14px; display: block; cursor: pointer; //Icon .acc_icon_expand{ display: block; width: 18px; height: 18px; position: absolute; left: 10px; top: 50%; margin-top: -9px; background: url(../images/plusminus.png) center 0; } } } } /** * -------------------------------------------------------------- * Content * -------------------------------------------------------------- */ @{accordion_container}{ @{accordion_section}{ //Content .acc_content{ background: #F9F9F9; color: #7B7E85; padding: 3px 10px; h1, h2, h3, h4, h5, h6{ &:first-of-type{ margin-top: 5px; } } } } } /** * -------------------------------------------------------------- * General * -------------------------------------------------------------- */ @{accordion_container}{ @{accordion_section}{ // Border radius &:first-of-type, &:first-of-type .acc_head{ border-radius: 3px 3px 0 0; } &:last-of-type, &:last-of-type .acc_content{ border-radius: 0 0 3px 3px; } //JS Requirements &.acc_active{ > .acc_content{ display: block; } > .acc_head{ background: #F9F9F9; .acc_icon_expand{ background: url(../images/plusminus.png) center -18px; } } } } &.acc_with_icon{ .accordion_in .acc_head, .accordion_in .acc_content{ padding-left: 40px; } } }