2016-10-26 14:00:24 +03:00
|
|
|
/*
|
|
|
|
* - This can probably be achieved with flexbox so that we don't use any
|
|
|
|
* margins or paddings
|
|
|
|
* - We shouldn't use #FFFFFF but a variation of it to have less contrast
|
|
|
|
*/
|
|
|
|
|
2016-10-26 13:55:27 +03:00
|
|
|
.toggle {
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
|
|
color: #464646;
|
|
|
|
border-radius: 4px;
|
|
|
|
width: 5rem;
|
|
|
|
height: 2.5rem;
|
|
|
|
|
|
|
|
& .btn,
|
|
|
|
& .label {
|
|
|
|
height: 2.188rem;
|
|
|
|
width: 2.188rem;
|
|
|
|
margin: 0.125rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
& .label {
|
|
|
|
padding-top: 4px;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
& .btn {
|
|
|
|
background: #FFFFFF;
|
|
|
|
box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
|
|
|
|
border-radius: 3px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.on {
|
|
|
|
background: #38C647;
|
|
|
|
border: 1px solid #23AC32;
|
|
|
|
|
|
|
|
& .label {
|
|
|
|
float: right;
|
|
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
|
|
|
|
|
|
& .btn {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.off {
|
|
|
|
background: #E6E6E6;
|
|
|
|
border: 1px solid #D8D8D8;
|
|
|
|
|
|
|
|
& .label {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
& .btn {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|