datepickerdate
Version:
A lightweight datepicker component for Preact
176 lines (161 loc) • 3.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="src/demo/app.min.css" />
<style>
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
sans-serif;
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: 1.4;
color: #151b26;
text-rendering: optimizeLegibility;
box-sizing: border-box;
background-color: #fff1e8;
}
input {
width: 100%;
padding: 10px;
font-weight: 400;
font-style: normal;
border-radius: 5px;
border: 2px solid #e0e0e0;
background-color: #fff;
box-shadow: none;
-webkit-appearance: none;
}
input:focus {
border: 2px solid blue;
}
button {
font-size: 0.95rem;
font-weight: 600;
font-style: normal;
width: 100%;
height: 2.5rem;
padding: 0 18px;
border: 0;
text-transform: capitalize;
color: black;
background-color: transparent;
cursor: pointer;
&:disabled {
color: grey;
background-color: #ddd;
}
}
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
body,
ul {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
li {
list-style: none;
margin-bottom: 0.6rem;
}
button,
input,
select,
textarea {
color: inherit;
font: inherit;
}
strong {
font-weight: 600;
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
transition: all 0.3s;
}
.switch::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type="checkbox"]:checked + .switch::after {
transform: translateX(20px);
}
input[type="checkbox"]:checked + .switch {
background-color: #7983ff;
}
.offscreen {
position: absolute;
left: -9999px;
}
</style>
<script>
function toggleCss() {
document
.getElementById("root")
.firstElementChild.classList.toggle("dpd");
}
</script>
<title>Document</title>
</head>
<body>
<main style="padding: 2rem; max-width: 30em; margin: 0 auto">
<p style="color: #b78181">on/off css</p>
<input
onInput="toggleCss()"
type="checkbox"
id="toggle"
class="offscreen"
/>
<label for="toggle" class="switch"></label>
<div
style="max-width: 17rem;
margin: 0 auto;"
id="root"
></div>
<em
style="max-width: 17rem;
margin: 0 auto; margin-top: 1rem; display: block;
color: #b78181"
id="output"
></em>
</main>
<script src="https://unpkg.com/preact@8.5.2/dist/preact.umd.js"></script>
<script src="src/demo/app.min.js"></script>
</body>
</html>