Created
May 17, 2022 17:27
-
-
Save aloisdg/b467e4e5e8aab30824a55b255ed6cf54 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<style> | |
html { | |
background-color: white; | |
} | |
.wrapper { | |
width: 400px | |
} | |
.infinite { | |
width: 100%; | |
overflow-x: scrollbar; | |
overflow-y: hidden; | |
} | |
.middle { | |
display: flex; | |
gap: 5px; | |
} | |
.wrap { | |
flex-wrap: wrap; | |
} | |
.linear { | |
width: max-content; | |
} | |
.middle input[type=radio] { | |
display: none; | |
} | |
.middle input[type=radio]:checked + .box { | |
background-color: #75553F; | |
color: white; | |
} | |
.middle .box { | |
padding:5px 10px; | |
height: 50px; | |
background-color: #fff; | |
border-radius: 5px; | |
color: #75553F; | |
border: 2px solid #75553F; | |
transition: all 250ms ease; | |
will-change: transition; | |
cursor: pointer; | |
font-weight: 900; | |
display: grid; | |
place-items: center; | |
font-size: 1.5em; | |
user-select: none; | |
} | |
</style> | |
</head> | |
<body> | |
<select id="layoutSelector"> | |
<option>Wrap</option> | |
<option>Linear</option> | |
</select> | |
<br> | |
<br> | |
<div class="wrapper"> | |
<div class="infinite"> | |
<div class="middle wrap"> | |
<label> | |
<input type="radio" name="radio" checked /> | |
<div class="front-end box"> | |
2 Single Beds | |
</div> | |
</label> | |
<label> | |
<input type="radio" name="radio" /> | |
<div class="back-end box"> | |
1 Double Bed | |
</div> | |
</label> | |
<label> | |
<input type="radio" name="radio" /> | |
<div class="back-end box"> | |
Twin Beds | |
</div> | |
</label> | |
<label> | |
<input type="radio" name="radio" /> | |
<div class="back-end box"> | |
King Beds | |
</div> | |
</label> | |
</div> | |
</div> | |
</div> | |
<script> | |
layoutSelector.onchange = (e) => { | |
const middle = document.querySelector(".middle"); | |
middle.classList.toggle("wrap") | |
middle.classList.toggle("linear") | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment