<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Settings panel toggles</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="card">
<div class="card__header">
<div class="toolbar">
<div class="toolbar__item toolbar__item--close"></div>
<div class="toolbar__item toolbar__item--min"></div>
<div class="toolbar__item toolbar__item--max"></div>
</div><a href="#">About</a>
</div>
<div class="card__body">
<div class="container">
<div class="grid">
<h1>Settings</h1>
</div>
</div>
<div class="container">
<div class="grid grid--half">
<h3>General</h3>
<div class="form-item">
<label class="form-item__label">Start at login</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Hide window at start up</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Keep window visible as bg app</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Keep window above other apps</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Show icon in dock</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Hide "Unlock Extreme" button</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<h3>Desktop Status Menu</h3>
<div class="form-item">
<label class="form-item__label">Use precentages</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Icon visible</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Text information</label>
<div class="form-item__control">
<select class="control control--select">
<option selected="selected">Default</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="form-item">
<label class="form-item__label">Text size</label>
<div class="form-item__control">
<div class="radio">
<div class="radio__item"><span class="u-text--small">A</span></div>
<div class="radio__item is-active"><span class="u-text--normal">A</span></div>
<div class="radio__item"><span class="u-text--large">A</span></div>
</div>
</div>
</div>
</div>
<div class="grid grid--half">
<h3>Performance</h3>
<div class="form-item">
<label class="form-item__label">Threshold level</label>
<div class="form-item__control"><small><strong><span class="slider__value">500</span><span>mb</span></strong></small></div>
<div class="slider">
<input class="slider__input" type="range" value="500" min="0" max="1000"/>
<div class="slider__positive" style="width: 50%;"></div>
</div>
</div>
<p><small>If the available memory goes below this amount, the status bar text will turn red.</small></p>
<div class="form-item">
<label class="form-item__label">Auto clean</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<p><small>Automatically clean when available memory drops below the above threshold. Auto clean is limited to once every 3 minutes.</small></p>
<div class="form-item">
<label class="form-item__label">Disable auto clean cooldown</label>
<div class="form-item__control toggle">
<div class="toggle__handle"></div>
</div>
</div>
<p><small>Auto clean cooldown: <strong>136 seconds</strong></small></p>
<div class="form-item">
<label class="form-item__label">Refresh interval</label>
<div class="form-item__control"><small><strong><span class="slider__value">5</span><span> seconds</span></strong></small></div>
<div class="slider">
<input class="slider__input" type="range" value="5" min="0" max="20"/>
<div class="slider__positive" style="width: 25%;"></div>
</div>
</div>
<p><small>If the available memory goes below this amount, the status bar text will turn red.</small></p>
<div class="buttons"><a href="#">Extras</a>
<button class="button">Done</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Heebo:400,700");
html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
}
body {
font-size: 1.6rem;
font-family: 'Heebo', system-ui;
text-shadow: 0px 1px 1px #7059e2;
}
a {
color: inherit;
}
button, input, select, textarea {
font-family: inherit;
}
button:focus, button:active, input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active {
outline: 0;
}
h1 {
margin: 0;
}
h3 {
margin: 4rem 0 3rem;
}
p {
margin-bottom: 2rem;
}
.wrapper {
margin: 4.5rem 1rem 0;
}
.card {
display: block;
width: 100%;
margin: auto;
max-width: 1200px;
background: #9c88ff;
color: white;
border-radius: .8rem;
margin-bottom: 2rem;
}
.card__header {
padding: 2rem;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
.card__body {
padding: 5rem 7rem 7rem;
}
@media screen and (max-width: 900px) {
.card__body {
padding: 5rem 2rem 7rem;
}
}
.toolbar__item {
box-shadow: inset 0px 0px 15px rgba(255, 255, 255, 0.5);
border-radius: 50%;
width: 2rem;
height: 2rem;
display: inline-block;
cursor: pointer;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.toolbar__item:not(:last-of-type) {
margin-right: .5rem;
}
.toolbar__item:hover, .toolbar__item:focus {
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.1);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.toolbar__item--close {
background: #EA6759;
}
.toolbar__item--min {
background: #FFCC00;
}
.toolbar__item--max {
background: #2DCC72;
}
.container {
display: -webkit-box;
display: flex;
width: 100%;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
}
@media screen and (max-width: 900px) {
.container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
}
.grid {
-webkit-box-flex: 1;
flex: 1;
padding-left: 2rem;
padding-right: 2rem;
position: relative;
}
@media screen and (max-width: 900px) {
.grid {
max-width: 100%;
}
}
.toggle {
max-width: 62px;
height: 32px;
background: #7059e2;
border-radius: 999px;
position: relative;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
cursor: pointer;
}
.toggle__handle {
height: 24px;
width: 24px;
position: absolute;
top: 50%;
left: 4px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: white;
border-radius: 50%;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.toggle.is-on {
background: white;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.toggle.is-on .toggle__handle {
left: 34px;
background: #9c88ff;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.form-item {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.form-item__control {
width: 40%;
text-align: right;
}
.control {
background: transparent;
color: inherit;
display: block;
width: 100%;
border-radius: .3rem;
padding: .4rem;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.control:hover, .control:focus {
background: #7059e2;
border-color: transparent;
}
.radio {
display: inline-block;
}
.radio__item {
display: inline-block;
color: #7059e2;
cursor: pointer;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.radio__item:not(:last-of-type) {
margin-right: 1rem;
}
.radio__item.is-active {
color: white;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.u-text--small {
font-size: 1.3rem;
}
.u-text--normal {
font-size: 1.6rem;
}
.u-text--large {
font-size: 2.2rem;
}
.slider {
width: 100%;
position: relative;
}
.slider__positive {
width: 100%;
height: 5px;
background: white;
position: absolute;
top: 80%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
}
.slider__input {
margin-top: 1rem;
display: block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 5px;
background: #7059e2;
outline: none;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.slider__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 4px solid white;
background: white;
cursor: pointer;
position: relative;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.slider__input::-webkit-slider-thumb:focus, .slider__input::-webkit-slider-thumb:active {
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.2);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.button {
border: 0;
background: white;
color: #9c88ff;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 700;
border-radius: .4rem;
padding: .6rem 1.4rem;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.button:hover, .button:focus {
background: #7059e2;
color: white;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.buttons {
position: absolute;
bottom: 0;
right: 0;
margin-top: 3rem;
}
.buttons .button {
margin-left: 1rem;
}
.credits {
position: fixed;
width: 100%;
background: black;
color: white;
text-align: center;
bottom: 0;
padding: 0 1.5rem;
}
.link--dribbble {
color: #ea4c89;
}
console.clear();
const toggle = document.querySelectorAll('.toggle');
for (var i = 0; toggle.length > i; i++) {
toggle[i].addEventListener('click', function () {
this.classList.toggle('is-on');
});
}
const radioItem = document.querySelectorAll('.radio__item');
for (var i = 0; radioItem.length > i; i++) {
radioItem[i].addEventListener('click', function () {
const siblingItems = this.parentNode.getElementsByClassName('radio__item');
for (var i = 0; siblingItems.length > i; i++) {
siblingItems[i].classList.remove('is-active');
}
this.classList.toggle('is-active');
});
}
const sliderInput = document.querySelectorAll('.slider__input');
for (var i = 0; sliderInput.length > i; i++) {
sliderInput[i].addEventListener('input', function () {
const valueContainer = this.parentNode.parentNode.querySelector('.slider__value');
const sliderValue = this.value;
const maxVal = this.getAttribute('max');
const posWidth = this.value / maxVal;
this.parentNode.querySelector('.slider__positive').style.width = posWidth * 100 + '%';
valueContainer.innerHTML = sliderValue;
});
}
// Credits
const credits = document.createElement('footer');
credits.innerHTML = 'Designed and inspired by devinvm\'s dribbble shot';
credits.classList = 'credits';
document.body.appendChild(credits);