vaadin-framework/compatibility-themes/src/main/themes/VAADIN/themes/chameleon/components/accordion/accordion.scss

@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;
	}

}