pm-controls
Version:
ProModel Controls
85 lines (70 loc) • 2.04 kB
CSS
.switch-container {
position: relative;
height: 20px;
}
.switch-bar {
left: 1px;
width: 34px;
top: 3px;
height: 14px;
border-radius: 8px;
position: absolute;
}
.switch-thumb-container {
position: absolute;
z-index: 1;
}
.switch-thumb {
position: absolute;
height: 20px;
width: 20px;
border-radius: 20px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
-webkit-transition: all .3s;
transition: all .3s;
}
.switch-thumb-is-unchecked {
background-color: rgb(255,255,255);
}
.switch-bar-is-unchecked {
background-color: rgb(158,158,158);
}
.switch-thumb-is-checked-disabled {
background-color: rgb(189,189,189);
}
.switch-thumb-is-unchecked-disabled {
background-color: rgb(189,189,189);
}
.switch-bar-is-unchecked-disabled {
background-color: rgba(0,0,0,0.12);
}
.switch-thumb-is-checked-default {
-o-transform: translate(20px,0); /** Opera **/
-moz-transform: translate(20px,0);
-webkit-transform: translate(20px,0); /** Chrome & Safari **/
transform: translate(20px,0);
background-color: rgb(255,82,82);
}
.switch-bar-is-checked-default {
background-color: rgba(255,82,82,0.5);
}
.switch-thumb-is-checked-theme-1 {
-o-transform: translate(20px,0); /** Opera **/
-moz-transform: translate(20px,0);
-webkit-transform: translate(20px,0); /** Chrome & Safari **/
transform: translate(20px,0);
background-color: rgb(16,108,200);
}
.switch-bar-is-checked-theme-1 {
background-color: rgba(16,108,200,0.5);
}
.switch-thumb-is-checked-theme-2 {
-o-transform: translate(20px,0); /** Opera **/
-moz-transform: translate(20px,0);
-webkit-transform: translate(20px,0); /** Chrome & Safari **/
transform: translate(20px,0);
background-color: rgb(133, 142, 155);
}
.switch-bar-is-checked-theme-2 {
background-color: rgba(133, 142, 155,0.5);
}