de.swm.commons.mobile.client.theme.bootstrap.css.flipswitch.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of swm-mobile Show documentation

GWT Bibliothek fuer Mobile Plattformen der SWM

There is a newer version: 3.1

@if swmmobile.css pretty {
	@external flipSwitch, disabled;
}

.flipSwitch.disabled {
  opacity: .3;
}

.flipSwitch {
    position: relative;
    border-radius: 0.3em;
    overflow: hidden;
    border: 1px solid #333;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

.flipSwitch > div:first-child, .flipSwitch > div:nth-child\(2\) {
	width: 3em;
	height: 1.75em;	
}

.flipSwitch > div:first-child {
	border-top-left-radius: .3em;
	border-bottom-left-radius: .3em;
	background: literal('linear-gradient(to bottom, darkGreen 0%, #298C08 10%, lightGreen 50%, lightGreen 100%)');
}

.flipSwitch > div:nth-child\(2\) {
	border-top-right-radius: .3em;
	border-bottom-right-radius: .3em;
	background: white literal('linear-gradient(to bottom, gray 0%, lightgray 10%, white 50%, white 100%)');
}


.flipSwitch > div:last-child {
	position: absolute;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.flipSwitch > div:last-child > div {
	position: relative;
	display: \-webkit-box;
	height: 100%;
	\-webkit-transition-property: \-webkit-transform;
	\-webkit-transition-timing-function: linear;

	display: -ms-flexbox;
	transition-property: transform;
	transition-timing-function: linear;
}

.flipSwitch > div:last-child > div > div {
	display: \-webkit-box;
	\-webkit-box-align: center;
	\-webkit-box-pack: center;
	font-weight: bold;

	display: -ms-flexbox;
	-ms-flex-align: center;
	-ms-flex-pack: center;
}

.flipSwitch > div:last-child > div > div:first-child {
	width: 2.9em;
}

.flipSwitch > div:last-child > div > div:last-child {
	width: 2.9em;
	color: darkgray;
}

.flipSwitch > div:last-child > div > div:nth-child\(2\) {
	width: 3.1em;
	margin-left: -.1875em;
	border: 1px solid #E5E5E5;
	border-radius: .3em;
	\-webkit-box-shadow: black 0 0 .2em;
	box-shadow: black 0 0 .2em;
	background: white literal('linear-gradient(to bottom, #A1A1A1 0%, white 100%)');
}