All Downloads are FREE. Search and download functionalities are using the official Maven repository.
Please wait. This can take some minutes ...
Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
de.swm.commons.mobile.client.theme.base.css.flipswitch.css Maven / Gradle / Ivy
@if swmmobile.css pretty {
@external flipSwitch, disabled;
}
.flipSwitch.disabled {
opacity: .3;
}
.flipSwitch {
position: relative;
border-radius: .3em;
overflow: hidden;
border: 1px solid #333;
\-webkit-box-shadow: 0px 0px .1em #333;
display: \-webkit-box;
\-webkit-box-orient: horizontal;
display: -ms-flexbox;
box-shadow: 0px 0px .1em #333;
}
.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('-webkit-gradient(linear, 0% 0%, 0% 100%, from(darkGreen), color-stop(0.1, #298C08), color-stop(0.5, lightGreen), to(lightGreen))');
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('-webkit-gradient(linear, 0% 0%, 0% 100%, from(gray), color-stop(0.1, lightgray), color-stop(0.5, white), to(white))');
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: 3em;
text-shadow: #093B5C 0px 1px 1px;
}
.flipSwitch > div:last-child > div > div:last-child {
width: 2.8125em;
color: darkgray;
text-shadow: black 0px 1px 1px;
}
.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;
background: white literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(white))');
box-shadow: black 0 0 .2em;
background: white literal('linear-gradient(to bottom, #A1A1A1 0%, white 100%)');
}