Verified Commit 5c68ee0b authored by Laurent Heirendt's avatar Laurent Heirendt
Browse files

add css for banner

parent 05f77f4f
......@@ -89,4 +89,81 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// Small component to show a Material Design style input toggle
// ref: https://codepen.io/FezVrasta/pen/yNRgrB - MIT licensed
$toggle-w: 32px;
$toggle-h: 14px;
$handle-size: 18px;
$unchecked-handle-bg: #F1F1F1;
$checked-handle-bg: #198cdc;
$disabled-handle-bg: #BDBDBD;
$unchecked-toggle-bg: #848484;
$checked-toggle-bg: desaturate(lighten($checked-handle-bg, 28%), 32%); // kind of magic recipe
$disabled-toggle-bg: #D5D5D5;
label.input-toggle {
line-height: 0;
font-size: 0;
display: inline-block;
margin: 0;
>span {
display: inline-block;
position: relative;
background-image: linear-gradient( to right, $unchecked-toggle-bg 0%, $unchecked-toggle-bg 50%, $checked-toggle-bg 50%, $checked-toggle-bg 100%);
background-size: $toggle-w*2 $toggle-h;
background-position: 0%;
border-radius: $toggle-w;
width: $toggle-w;
height: $toggle-h;
cursor: pointer;
transition: background-position 0.2s ease-in;
}
>input:checked+span {
background-position: -100%;
}
>span:after {
content: "";
display: block;
position: absolute;
width: $handle-size;
height: $handle-size;
background: $unchecked-handle-bg;
align-self: center;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 100%;
//box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
}
>input:checked+span:after {
left: $handle-size;
background-color: $checked-handle-bg;
}
// Jelly effect on click
>span:active:after {
//transform: translateY(-50%) scale3d(1.15, 0.85, 1);
}
// No jelly effect on disabled toggles
>input:disabled+span:active:after {
transform: translateY(-50%);
}
>input:disabled+span {
cursor: default;
}
>input:disabled+span {
background: $disabled-toggle-bg;
}
>input:disabled+span:after {
background: $disabled-handle-bg;
}
// Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard
>input {
display: block;
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment