mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-01-10 22:00:03 +01:00
1180b7b195
Switched from less to scss. Still no build script to update the final CSS, though. Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.
97 lines
1.4 KiB
SCSS
97 lines
1.4 KiB
SCSS
div.checkbox {
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
@include border-radius(4px);
|
|
border: 2px solid white;
|
|
background-color: white;
|
|
width: 80px;
|
|
position: relative;
|
|
height: 32px;
|
|
|
|
&:before {
|
|
content: "ON";
|
|
padding-left: 9px;
|
|
line-height: 32px;
|
|
color: $solarize-Accent-Cyan;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
&:after {
|
|
content: "OFF";
|
|
// padding-left: 12px;
|
|
padding-left: 25px;
|
|
line-height: 32px;
|
|
color: $solarize-Accent-Cyan;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
|
|
label.check {
|
|
display: block;
|
|
width: 40px;
|
|
height: 30px;
|
|
@include border-radius(3px);
|
|
background-color: $solarize-Accent-Magenta;
|
|
border: 1px solid $solarize-Accent-Magenta;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
|
|
input[type=checkbox]:checked + label.check {
|
|
top: 0px;
|
|
left: 38px;
|
|
@include animation(labelON, .2s, ease-in, 1);
|
|
}
|
|
|
|
input[type=checkbox] + label.check {
|
|
top: 0px;
|
|
left: 0px;
|
|
@include animation(labelOFF, .2s, ease-in, 1);
|
|
}
|
|
|
|
label.info {
|
|
position: absolute;
|
|
color: white;
|
|
top: 0px;
|
|
left: 100px;
|
|
line-height: 32px;
|
|
width: 200px;
|
|
font-size: 16pt;
|
|
}
|
|
}
|
|
|
|
@include keyframes(labelON) {
|
|
0% {
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
100% {
|
|
top: 0px;
|
|
left: 38px;
|
|
}
|
|
}
|
|
|
|
@include keyframes(labelOFF) {
|
|
0% {
|
|
top: 0px;
|
|
left: 38px;
|
|
}
|
|
|
|
100% {
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
}
|