de.swm.commons.mobile.client.theme.base.css.accordion.css Maven / Gradle / Ivy

@if swmmobile.css pretty {
	@external accordion, pressed, collapse, expand;
}

/* stack */
.accordion > div {
}

 /* header */
.accordion > div > div:first-child {
	display:\-webkit-box;
	\-webkit-box-orient: horizontal;
	\-webkit-box-align: center;
	cursor: pointer;
	padding:.5em .5em .5em 0em;
	border-bottom:1px solid #333333;
	border-top: 1px solid #666666;
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))');

	display: -ms-flexbox;
	-ms-flex-align: center;
	background-image: literal('linear-gradient(to bottom, #4c4d4e 0%, #404142 100%)');
}

.accordion > div > div:first-child.pressed {
	background: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(lightgreen), color-stop(0.5, #298C08), color-stop(0.5, darkgreen), to(darkgreen))');

	background: literal('linear-gradient(to bottom, lightgreen 0%, #298C08 50%, darkgreen 50%, darkgreen 100%)');
}

.accordion > div:first-child > div:first-child {
	border-top:0;
	border-top-left-radius: 0.4em 0.4em;
	border-top-right-radius: 0.4em 0.4em;
	\-webkit-box-shadow: rgba(0, 0, 0, 1) 0em 0em 0.5em;
	
	box-shadow: rgba(0, 0, 0, 1) 0em 0em 0.5em;
}

.accordion > div:last-child.collapse > div:first-child {
	border-bottom:0;
	border-bottom-left-radius: 0.4em 0.4em;
	border-bottom-right-radius: 0.4em 0.4em;
	\-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.2em;
	
	box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.2em;
}

/* content */
.accordion > div > div:last-child {
	overflow: hidden;
	padding:.5em;
	color: black;
	background:#e3e3e3;
	\-webkit-transition-property: height;
	\-webkit-transition-duration: 200ms;
	\-webkit-transition-timing-function: ease;

	transition-property: height;
	transition-duration: 200ms;
	transition-timing-function: ease;
}

/* content */
.accordion > div:last-child.expand > div:last-child {
	border-bottom-left-radius: 0.4em 0.4em;
	border-bottom-right-radius: 0.4em 0.4em;
	\-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.2em;
	
	box-shadow: rgba(0, 0, 0, 0.5) 0em 0.2em 0.2em;
}

.accordion > div.collapse > div:last-child {
	padding-top: 0;
	padding-bottom: 0;
	height: 0 !important;
}

.accordionArrow {
	border: .4em solid gray;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	height: 0.001em;
	width: 0.001em;
	margin-left: .5em;
}

.accordionArrowInvisible {
	height: 0.001em;
	width: 0.001em;
	margin-left: 1.5em;
}

.accordion > div.expand > div > .accordionArrow {
	position: relative;
	top: .3em;
	left: -.2em;
	border-top-color: gray;
	border-left-color: transparent;
}