generated from mitchell/rust_template
128 lines
2.3 KiB
SCSS
128 lines
2.3 KiB
SCSS
// form component as a grid
|
|
.form_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
row-gap: 1.5rem;
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
// size up to 12 columns on small or bigger devices
|
|
@media (min-width: 640px) {
|
|
.form_grid {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.form_heading {
|
|
font-size: 1.875rem;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #374151;
|
|
border-bottom: 2px solid #374151;
|
|
margin-bottom: 2rem;
|
|
grid-column: span 12;
|
|
display: grid;
|
|
}
|
|
|
|
.form_group {
|
|
background-color: #0295f744;
|
|
border-radius: 25px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.form_label {
|
|
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
text-align: left;
|
|
color: #4a5568;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
display: inline;
|
|
}
|
|
|
|
.form_input {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #f7fafc;
|
|
border-width: 2px;
|
|
border-color: #e2e8f0;
|
|
border-style: solid;
|
|
color: #4a5568;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
border-radius: 0.375rem;
|
|
line-height: 1.25;
|
|
outline: none;
|
|
}
|
|
.form_input:focus {
|
|
background-color: #ffffff;
|
|
border-color: #90cdf4;
|
|
}
|
|
.form_input_invalid {
|
|
border: 2px solid #ef4444;
|
|
background-color: #ffd4d4;
|
|
}
|
|
.form_error {
|
|
display: inline;
|
|
padding-left: 0.25rem;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.form_button {
|
|
display: block;
|
|
outline: none;
|
|
border: none;
|
|
/* width: 100%; */
|
|
border-radius: 1rem;
|
|
background-color: #0477d6;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin: 0 auto auto auto;
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 1rem;
|
|
appearance: none;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.form_submit {
|
|
@extend .form_button;
|
|
@extend .col-span-full;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form_submit:hover {
|
|
background-color: #005fb3;
|
|
}
|
|
|
|
// column widths
|
|
.col-span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.col-span-12 {
|
|
grid-column: span 12 / span 12;
|
|
}
|
|
.col-span-6 {
|
|
grid-column: span 6 / span 6;
|
|
}
|
|
.col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
.col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
.col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
.col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|