1
0
mirror of https://github.com/yldio/copilot.git synced 2024-09-22 22:33:51 +03:00
copilot/ui/src/components/toggle/style.css
2016-10-26 12:00:24 +01:00

59 lines
967 B
CSS

/*
* - 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
*/
.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;
}
}
}