Skip to content

Instantly share code, notes, and snippets.

@IpsumLorem16

IpsumLorem16/index.html

Created April 18, 2021 12:57
Show Gist options
  • Save IpsumLorem16/1510b451ce5a4ee00090191a7d4267e2 to your computer and use it in GitHub Desktop.
Save IpsumLorem16/1510b451ce5a4ee00090191a7d4267e2 to your computer and use it in GitHub Desktop.
Download ZIP
Toggle switch- dropdown
Raw
index.html
<body data-show-bg="false">
<!-- Delete content wrapper -->
<div class="content-wrapper">
<div class="toggle-container">
<label for="toggle-1" class="toggle-switch">
Background
</label>
<button role="switch" type="button" aria-checked="false" id="toggle-1" class="toggle-switch">
<span aria-hidden="true"></span>
<span class="knob"></span>
<span aria-hidden="true"></span>
</button>
<button class="dropdown-trigger" aria-expanded="false" aria-controls="sect-1">
<span class="sr-only">Expand</span>
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div class="dropdown-section hide closed" id="sect-1">
<div class="content">
<!-- dropdown content -->
<!-- checkbox 1 -->
<div class="checkbox-container">
<input id="checkbox-1" type="checkbox" checked>
<label for="checkbox-1">Setting 1</label>
<span class="custom-checkbox" aria-hidden="true"><i class="fas fa-check"></i></span>
</div>
<!-- checkbox 2 -->
<div class="checkbox-container">
<input id="checkbox-2" type="checkbox">
<label for="checkbox-2">Color</label>
<span class="custom-checkbox" aria-hidden="true"><i class="fas fa-check"></i></span>
</div>
</div>
</div>
</body>
Raw
script.js
/* Toggle switch */
document.querySelectorAll(".toggle-switch[role='switch']").forEach(switchEl => {
switchEl.addEventListener("click", handleToggleClick, false);
//prevent focus on switch when clicking on it
switchEl.addEventListener("mousedown", event => {
event.preventDefault();
});
});
function handleToggleClick(event) {
let switchEl = event.target;
//if not disabled toggle attribute
if (!switchEl.hasAttribute("aria-readonly")) {
let currState = switchEl.getAttribute("aria-checked");
let newState = currState === "true" ? false : true;
switchEl.setAttribute("aria-checked", newState);
}
}
//prevent focus to switch, on clicking label
document.querySelectorAll("label.toggle-switch").forEach(labelEl => {
labelEl.addEventListener("click", event => {
event.preventDefault(); //prevent focus
event.target.control.click(); //activate switch
});
});
/* Dropdown */
//add event listeners
document.querySelectorAll(".dropdown-trigger").forEach(triggerEl => {
let toggleTimeout;
const controlledEl = document.getElementById(
triggerEl.getAttribute("aria-controls")
);
//set height of dropdown section, so we can animate it in css
const height = controlledEl.firstElementChild.offsetHeight;
controlledEl.style.height = `${height}px`;
// prevent focus
triggerEl.addEventListener("mousedown", event => {
event.preventDefault();
});
// toggle view on click
triggerEl.addEventListener("click", event => {
window.clearTimeout(toggleTimeout);
if (triggerEl.getAttribute("aria-expanded") === "false") {
controlledEl.classList.remove("closed", "hide");
triggerEl.setAttribute("aria-expanded", true);
} else {
controlledEl.classList.add("closed");
triggerEl.setAttribute("aria-expanded", false);
toggleTimeout = window.setTimeout(() => {
controlledEl.classList.add("hide");
}, 300);
}
});
});
//checkbox
[...document.querySelectorAll(".checkbox-container label")].map(label => {
label.addEventListener("click", e => {
e.preventDefault();
let checkbox = e.target.control;
checkbox.checked = !checkbox.checked;
});
});
/*extra functionality*/
//background toggle
document.getElementById("toggle-1").addEventListener("click", e => {
const checked = e.target.getAttribute("aria-checked");
document.body.setAttribute("data-show-bg", checked);
});
//color checkbox
document.querySelector("#checkbox-2 ~ label").addEventListener("click", e => {
document.body.setAttribute("data-bg-color", e.target.control.checked);
});
Raw
style.scss
// for codepen only, delete these
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
html,body {
height: 100%;
}
body {
background-color: #191919;
display: flex;
justify-content: center;
position: relative;
align-items: flex-start;
margin:0;
padding:0;
&:after {
content: '';
margin: 0;
padding:0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/hC4gHRS.png);
background-size: 25%;
background-position: 0 0;
position: absolute;
opacity: 0.0;
filter: grayscale(1);
pointer-events: none;
z-index: -1;
transition: opacity 0.1s;
animation: animateBackground 40s linear infinite;
}
&[data-show-bg="true"]:after {
opacity: 0.1;
}
&[data-show-bg="false"]:after{
opacity: 0 !important;
}
&[data-bg-color="true"]:after{
opacity:0.6;
filter:unset;
}
}
.content-wrapper {
margin-top:10px;
width: 533px;
max-width: 100%;
box-sizing: border-box;
padding: 0 20px;
border-radius: 4px;
overflow: hidden;
background: #565656;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
// main content
.toggle-container {
display: flex;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
label {
margin-right: 4px;
font-family: Roboto, sans-serif;
color: #111111;
font-size: 16px;
font-weight: 600;
cursor: pointer;
user-select: none;
}
button[role="switch"] {
-webkit-tap-highlight-color: transparent;
position: relative;
margin-left: auto;
width: 50px;
height: 26px;
padding: 1px 6px;
background-color: #d8d9db;
outline: none;
border: none;
color: white;
border-radius: 20px;
line-height: 20px;
cursor: pointer;
transition: all 0.3s;
animation-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
&:focus {
box-shadow: 0px 0px 0px 3px rgba(0, 155, 255, 0.48);
}
&::-moz-focus-inner {
border: 0;
outline: 0;
padding: 0;
}
/* toggle knob */
.knob {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
top: 3px;
left: 3px;
transition: all 0.3s;
}
/* on */
&[aria-checked="true"] {
background-color: #009bff;
:last-child {
opacity: 0;
transition: opacity 0.2s 0.1s;
}
.knob {
transform: translateX(24px);
}
}
/* off */
&[aria-checked="false"] {
background-color: #3c3c3c;
:first-child {
opacity: 0;
transition: opacity 0.2s 0.1s;
}
}
/* disabled */
&[aria-readonly="true"],
&:disabled {
cursor: not-allowed;
opacity: 0.8;
filter: grayscale(50%);
}
span {
pointer-events: none;
}
}
button.dropdown-trigger {
height: 26px;
width: 32px;
margin-left: 10px;
border: unset;
padding: 0;
background: unset;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
&:hover {
background-color: #6b6b6b5c;
}
.fa-chevron-down {
transform-origin: center 6px;
transition: all 0.2s;
}
&[aria-expanded="true"] .fa-chevron-down {
// display:none;
transform: rotateX(180deg);
}
}
}
.dropdown-section {
margin-left: -20px;
margin-right: -20px;
background-color: #424242;
overflow: hidden;
transition: all 0.3s;
transform-origin: top center;
&.closed {
height: 0 !important;
}
.content {
padding: 15px 25px;
}
}
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.hide {
visibility: hidden !important;
}
// Checkbox
.checkbox-container {
--blue: #009BFF;
--checkbox-color: var(--blue);
display: inline-block;
position: relative;
.dropdown-section & {
display:block;
&+.checkbox-container {
/*adds 10px margin between element*/
margin-top:10px;
}
}
}
.checkbox-container input[type="checkbox"] {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
margin: 0;
}
.checkbox-container .custom-checkbox {
position: absolute;
width: 22px;
height: 22px;
left: 0;
top: 0;
box-sizing: border-box;
border-radius: 6px;
border: 2px solid #cdd9ed;
pointer-events: none;
user-select: none;
text-align: center;
vertical-align: center;
line-height: 19px;
color: #ffffff00;
font-weight: bold;
font-size: 12px;
transition: border 0.3s, color 0.2s, background-color 0.2s;
}
.checkbox-container .custom-checkbox i.fas {
transform: translateY(0.5px);
}
/* focus ring */
.checkbox-container input[type="checkbox"]:focus ~ .custom-checkbox {
border: 2px solid #2196f3;
border: 2px solid var(--checkbox-color);
}
.checkbox-container input[type="checkbox"] ~ .custom-checkbox:after {
display: inline-block;
width: 22px;
height: 22px;
box-sizing: border-box;
border-radius: 6px;
top: -2px;
position: absolute;
left: -2px;
content: "";
opacity: 0;
box-shadow: 0px 0px 0px 0px #2196f3; /*var fall back*/
box-shadow: 0px 0px 0px 0px var(--checkbox-color);
transition: all 0.2s;
}
.checkbox-container input[type="checkbox"]:focus ~ .custom-checkbox:after {
opacity: 0.4;
box-shadow: 0px 0px 0px 3px #2196f3; /*var fall back*/
box-shadow: 0px 0px 0px 3px var(--checkbox-color);
}
.checkbox-container input[type="checkbox"]:checked ~ .custom-checkbox {
color: white;
border: 2px solid #2196f3; /* var fall back */
border: 2px solid var(--checkbox-color);
background-color: #2196f3; /* var fall back */
background: var(--checkbox-color);
transition: all 0.2s !important;
}
.checkbox-container label {
display: inline-block;
position: relative;
font-family: 'Roboto', sans-serif;
user-select: none;
padding-left: 30px;
height: 22px;
line-height: 22px;
cursor: pointer;
font-size: 16px;
font-weight:600;
color: #111111;
.dropdown-section & {
font-size: 14px;
font-weight: normal;
color: #A7A7A7;
color: #c1c1c1;
// color: #afafaf;
}
}
/* .checkbox-container label:hover ~ .custom-checkbox {
border: 2px solid #2196f3; /* var fall back
border: 2px solid var(--checkbox-color);
} */
/* disabled styles */
.checkbox-container input[type="checkbox"]:disabled ~ label {
/* opacity:0.6; */
color: #707070;
pointer-events: none;
}
.checkbox-container input[type="checkbox"]:disabled ~ .custom-checkbox {
/* filter: grayscale(1); */
/* background-color: #f5f5f5; */
border: 2px solid #6a6a6a;
background-color:#595959;
/* opacity: 0.4; */
}
.checkbox-container input[type="checkbox"]:disabled:checked ~
.custom-checkbox {
/* filter: grayscale(1); */
background-color: #636363;
border: 2px solid #636363;
color: #898989;
/* opacity: 0.4; */
}
@keyframe animateBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
Raw
toggle-switch-dropdown.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment