70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
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
|
|
*/
|
|
|
|
~boxes: "../../shared/constants.js";
|
|
~colors: "../../shared/constants.js";
|
|
|
|
:root {
|
|
--background-confirmed: ~colors.confirmation;
|
|
--border-confirmed: ~boxes.border.confirmed;
|
|
--border-unchecked: ~boxes.border.unchecked;
|
|
--border-radius: remCalc(~boxes.borderRadius);
|
|
--bottom-shaddow: ~boxes.bottomShaddow;
|
|
}
|
|
|
|
.toggle {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
color: #464646;
|
|
border-radius: var(--border-radius);
|
|
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: var(--bottom-shaddow);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
&.on {
|
|
background: var(--background-confirmed);
|
|
border: var(--border-confirmed);
|
|
|
|
& .label {
|
|
float: right;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
& .btn {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
&.off {
|
|
background: #E6E6E6;
|
|
border: var(--border-unchecked);
|
|
|
|
& .label {
|
|
float: left;
|
|
}
|
|
|
|
& .btn {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|