@mixin chameleon-accordion($primaryStyleName : v-accordion) { .#{$primaryStyleName} { border: 1px solid #b3b3b3; } .#{$primaryStyleName}-item-open { border-bottom: 1px solid #b3b3be; } .#{$primaryStyleName}-item-caption, .#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active { padding: 0; background: transparent url(../../img/grad-light-top.png) repeat-x; border-width: 0 0 1px 0; border-style: solid none; } div.#{$primaryStyleName}-item-caption, div.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active { background-color: transparent; } .#{$primaryStyleName}-item-caption .v-caption { padding: .2em .9em; } .#{$primaryStyleName}-item-caption:active { background-image: url(../../img/grad-dark-bottom.png); background-position: left bottom; } /******************************************************************************* * Opaque ******************************************************************************/ .#{$primaryStyleName}-opaque { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption, .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open { border: none; } .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption, .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active { background-color: #b8b8b8; } .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open { background-color: #fff; } .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first, .#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; overflow: hidden; } /******************************************************************************* * Borderless ******************************************************************************/ .#{$primaryStyleName}-borderless { border: none; } .#{$primaryStyleName}-opaque.borderless, .#{$primaryStyleName}-opaque.borderless .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } }