Basic forms done.
parent
813ebacac8
commit
29a013f4d1
|
|
@ -0,0 +1,163 @@
|
|||
@use "palette";
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
width: min(100%, 75ch);
|
||||
grid-template-columns: max-content min-content 1fr;
|
||||
|
||||
> * {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
> label:not(.description) {
|
||||
grid-column: 1 / 2;
|
||||
margin-right: 1rem;
|
||||
place-self: center end;
|
||||
}
|
||||
|
||||
> label.description {
|
||||
margin-left: .5rem;
|
||||
grid-column: 3 / 4;
|
||||
place-self: center start;
|
||||
}
|
||||
|
||||
> input,
|
||||
select,
|
||||
textarea,
|
||||
p.hint {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
|
||||
p.hint {
|
||||
font-size: .75rem;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: palette.$standout;
|
||||
border: .1rem solid palette.$standout;
|
||||
margin: .5rem;
|
||||
padding: .5rem .75rem;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 1rem;
|
||||
transition: border-color .3s;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
border-color: palette.$primary;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: palette.$primary;
|
||||
outline: .1rem solid palette.$primary;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: palette.$grey600;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
padding: .75rem;
|
||||
display: block;
|
||||
|
||||
background-color: palette.$standout;
|
||||
border: .15rem solid palette.$grey200;
|
||||
border-radius: .5rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
transition: color .3s, background-color .3s, border-color .3s;
|
||||
|
||||
&:checked {
|
||||
border-color: palette.$primary;
|
||||
background-color: palette.$primary;
|
||||
|
||||
&::after {
|
||||
content: '✔';
|
||||
font-size: 125%;
|
||||
|
||||
@if lightness(palette.$primary) > 50 {
|
||||
color: palette.$grey50
|
||||
}
|
||||
|
||||
@else {
|
||||
color: palette.$grey900
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
transition: translate .3s,
|
||||
left .3s,
|
||||
background-color .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 100%;
|
||||
|
||||
&:checked::after {
|
||||
content: '';
|
||||
|
||||
@if lightness(palette.$primary) > 50 {
|
||||
background-color: palette.$grey50
|
||||
}
|
||||
|
||||
@else {
|
||||
background-color: palette.$grey900
|
||||
}
|
||||
|
||||
border-radius: 100%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"].switch {
|
||||
height: 1px;
|
||||
width: 3rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: palette.$grey200;
|
||||
|
||||
border-radius: 100%;
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: .1rem;
|
||||
translate: 0 -50%;
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
left: calc(100% - .1rem);
|
||||
translate: -100% -50%;
|
||||
|
||||
@if lightness(palette.$primary) > 50 {
|
||||
background-color: palette.$grey50
|
||||
}
|
||||
|
||||
@else {
|
||||
background-color: palette.$grey900
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,5 +5,6 @@
|
|||
@use "headings";
|
||||
@use "text";
|
||||
@use "buttons";
|
||||
@use "forms";
|
||||
|
||||
@use "layouts/publishing";
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
{% extends "templates/publishing.njk" %}
|
||||
|
||||
{% block main %}
|
||||
<h1>Form input elements</h1>
|
||||
<form action="#">
|
||||
|
||||
<label for="text">Text input:</label>
|
||||
<input type="text" name="text" id="text" placeholder="Placeholder">
|
||||
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" id="password" placeholder="Password">
|
||||
<p class="hint">This is a hint telling you that your password should be at least 5 characters long.</p>
|
||||
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea name="textarea" id="textarea" placeholder="Write your text here..."></textarea>
|
||||
|
||||
<input type="checkbox" name="checkbox" id="checkbox">
|
||||
<label class="description" for="checkbox">Accept this checkbox.</label>
|
||||
|
||||
<input class="switch" type="checkbox" name="switch" id="switch">
|
||||
<label class="description" for="switch">Turn on this switch.</label>
|
||||
|
||||
<input type="radio" name="radio" id="radio">
|
||||
<label class="description" for="radio">Select this radio button.</label>
|
||||
|
||||
<label for="color">Color:</label>
|
||||
<input type="color" name="color" id="color">
|
||||
|
||||
<label for="file">File:</label>
|
||||
<input type="file" name="file" id="file">
|
||||
|
||||
<label for="date">Date:</label>
|
||||
<input type="date" name="date" id="date">
|
||||
|
||||
<label for="range">Range:</label>
|
||||
<input type="range" name="range" id="range">
|
||||
|
||||
<label for="select">Select:</label>
|
||||
<select name="select" id="select">
|
||||
<option value="select1">Select 1</option>
|
||||
<option value="select2">Select 2</option>
|
||||
<option value="select3">Select 3</option>
|
||||
<option value="select4">Select 4</option>
|
||||
<option value="select5">Select 5</option>
|
||||
</select>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
|
@ -7,4 +7,5 @@
|
|||
<p><a href="/headings">Headings</a></p>
|
||||
<p><a href="/buttons">Buttons</a></p>
|
||||
<p><a href="/text">Text</a></p>
|
||||
<p><a href="/forms">Forms</a></p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue