stylus/options/onoffswitch.css

74 lines
1.5 KiB
CSS
Raw Normal View History

2017-09-05 21:33:08 +00:00
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
.onoffswitch {
position: relative;
margin: 1ex 0;
-moz-user-select: none;
user-select: none;
2017-09-05 21:33:08 +00:00
}
.onoffswitch input {
-webkit-appearance: none;
-moz-appearance: none;
cursor: default;
position: absolute;
top: -8px;
bottom: -10px;
left: -10px;
width: calc(100% + 12px);
border: 0;
}
#message-box .onoffswitch input {
top: -6px;
left: -6px;
bottom: 0;
height: calc(100% + 12px);
2017-09-05 21:33:08 +00:00
}
.onoffswitch span {
display: block;
overflow: hidden;
height: 12px;
padding: 0;
line-height: 12px;
border: 0 solid var(--c90);
2017-09-05 21:33:08 +00:00
border-radius: 12px;
background-color: var(--c85);
2017-09-05 21:33:08 +00:00
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
pointer-events: none; /* this is just a non-clickable decoration, only `input` is clickable */
2017-09-05 21:33:08 +00:00
}
.onoffswitch span::before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: -3px;
background: var(--knob, var(--c95));
2017-09-05 21:33:08 +00:00
position: absolute;
top: 0;
bottom: 0;
right: 46px;
border-radius: 18px;
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
}
.onoffswitch input:checked + span {
background-color: hsla(165, 45%, 50%, .3);
2017-09-05 21:33:08 +00:00
}
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
border-color: #CAEBE3;
}
.onoffswitch input:checked + span .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch input:checked + span::before {
right: 0;
background-color: #04BA9F;
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
}