Skip to content

Commit e158a3b

Browse files
kunwarsalujakunwarsaluja
authored
Merge pull request #58 from cloudadoption/issue10-forms
Issue10 forms
2 parents 824c2a2 + 3048dbc commit e158a3b

File tree

19 files changed

+3485
-3109
lines changed

19 files changed

+3485
-3109
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps=true

‎blocks/compound-interest-calculator/compound-interest-calculator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* eslint-disable max-len */
1+
22
import { createTag, loadChartJs, createChart } from '../../scripts/shared.js';
33

44
const DEFAULTS = {

‎blocks/form/form.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
/* Contact-style form layout (inspired by kunwarsaluja/diyfire contact-us) */
2+
main .form-container {
3+
max-width: min(var(--grid-container-width), 860px);
4+
width: 100%;
5+
margin: 0 auto;
6+
padding: var(--space-l) var(--content-padding-inline);
7+
box-sizing: border-box;
8+
}
9+
10+
main .form-container .form-wrapper {
11+
margin-top: var(--space-m);
12+
}
13+
14+
.form form,
15+
main .form form {
16+
display: grid;
17+
gap: var(--space-s);
18+
border: 1px solid currentcolor;
19+
border-radius: 12px;
20+
padding: var(--space-m);
21+
background: transparent;
22+
color: inherit;
23+
min-width: 0;
24+
max-width: 100%;
25+
}
26+
27+
.form [aria-hidden='true'] {
28+
display: none;
29+
}
30+
31+
.form input,
32+
.form textarea,
33+
.form select,
34+
.form button {
35+
box-sizing: border-box;
36+
display: block;
37+
max-width: 100%;
38+
font: inherit;
39+
}
40+
41+
.form input,
42+
.form textarea,
43+
.form select {
44+
scroll-margin: 1em;
45+
width: 100%;
46+
min-width: 0;
47+
border: 1px solid currentcolor;
48+
border-radius: 8px;
49+
padding: 10px 12px;
50+
background: transparent;
51+
color: inherit;
52+
font-size: var(--body-font-size-s);
53+
}
54+
55+
.form textarea {
56+
resize: vertical;
57+
}
58+
59+
.form fieldset {
60+
appearance: none;
61+
margin: 0;
62+
border: 0;
63+
padding: 0;
64+
background-color: transparent;
65+
}
66+
67+
.form input:hover,
68+
.form textarea:hover,
69+
.form select:hover {
70+
opacity: 0.9;
71+
}
72+
73+
.form input:focus,
74+
.form textarea:focus,
75+
.form select:focus {
76+
outline: 2px solid var(--color-accent);
77+
outline-offset: 2px;
78+
}
79+
80+
.form input:disabled,
81+
.form textarea:disabled,
82+
.form select:disabled,
83+
.form input[readonly],
84+
.form textarea[readonly],
85+
.form select[readonly] {
86+
opacity: 0.6;
87+
background: transparent;
88+
color: inherit;
89+
}
90+
91+
.form input[type='checkbox'],
92+
.form input[type='radio'] {
93+
width: unset;
94+
}
95+
96+
.form .form-field {
97+
display: grid;
98+
gap: 6px;
99+
min-width: 0;
100+
}
101+
102+
.form .form-field > label:first-child,
103+
.form .form-field > legend {
104+
font-size: var(--body-font-size-s);
105+
font-weight: 600;
106+
}
107+
108+
.form label[data-required]::after,
109+
.form legend[data-required]::after {
110+
content: '*';
111+
margin-left: 0.25ch;
112+
color: inherit;
113+
}
114+
115+
.form .form-field + .form-field {
116+
margin-top: 0;
117+
}
118+
119+
.form .form-field.checkbox-field label,
120+
.form .form-field.radio-field label {
121+
position: relative;
122+
padding-left: calc(1em + 1ch);
123+
font-size: var(--body-font-size-s);
124+
line-height: 44px;
125+
cursor: pointer;
126+
}
127+
128+
.form .form-field.checkbox-field label input,
129+
.form .form-field.radio-field label input,
130+
.form .form-field.toggle-field label input {
131+
position: absolute;
132+
top: 50%;
133+
left: 0;
134+
transform: translateY(-50%);
135+
margin: 0;
136+
width: 1em;
137+
height: 1em;
138+
cursor: pointer;
139+
}
140+
141+
@media (width >= 600px) {
142+
.form form,
143+
main .form form {
144+
padding: var(--space-l);
145+
}
146+
147+
148+
.form .form-field.checkbox-field,
149+
.form .form-field.radio-field {
150+
display: flex;
151+
flex-wrap: wrap;
152+
gap: 0.25ch 1em;
153+
}
154+
}
155+
156+
/* Toggle field */
157+
.form .form-field.toggle-field label {
158+
position: relative;
159+
display: grid;
160+
grid-template-columns: auto 1fr;
161+
align-items: center;
162+
gap: 1ch;
163+
min-height: 44px;
164+
}
165+
166+
.form .form-field.toggle-field label input {
167+
width: 2em;
168+
opacity: 0;
169+
border-radius: 50%;
170+
}
171+
172+
.form .form-field.toggle-field label span {
173+
position: relative;
174+
width: calc(2em + 2px);
175+
height: calc(1em + 2px);
176+
border-radius: 1em;
177+
border: 1px solid currentcolor;
178+
background: currentcolor;
179+
opacity: 0.4;
180+
transition: opacity 0.2s;
181+
cursor: pointer;
182+
}
183+
184+
.form .form-field.toggle-field label span::after {
185+
content: '';
186+
position: absolute;
187+
top: 50%;
188+
left: 0;
189+
transform: translateY(-50%);
190+
width: 1em;
191+
height: 1em;
192+
border-radius: 50%;
193+
background: inherit;
194+
transition: left 0.2s;
195+
}
196+
197+
.form .form-field.toggle-field label input:checked + span {
198+
opacity: 1;
199+
}
200+
201+
.form .form-field.toggle-field label input:checked + span::after {
202+
left: calc(100% - 1em);
203+
}
204+
205+
.form .field-help-text {
206+
margin-top: 0.2em;
207+
color: inherit;
208+
opacity: 0.8;
209+
font-size: var(--body-font-size-xs);
210+
}
211+
212+
.form .form-status {
213+
margin: var(--space-s) 0 0;
214+
font-size: var(--body-font-size-s);
215+
color: inherit;
216+
opacity: 0.9;
217+
}
218+
219+
/* Buttons – primary submit, secondary reset */
220+
.form .button-wrapper {
221+
margin-top: var(--space-s);
222+
display: flex;
223+
flex-wrap: wrap;
224+
justify-content: center;
225+
gap: var(--space-s);
226+
}
227+
228+
.form .button-wrapper button {
229+
width: auto;
230+
min-width: fit-content;
231+
}
232+
233+
.form .button-wrapper button.button {
234+
border-radius: 8px;
235+
padding: 8px 16px;
236+
font-weight: 600;
237+
cursor: pointer;
238+
}
239+
240+
.form .button-wrapper button.button:not(.secondary) {
241+
border: 1px solid currentcolor;
242+
background: transparent;
243+
color: inherit;
244+
}
245+
246+
.form .button-wrapper button.button:disabled,
247+
.form .button-wrapper button.button:hover:disabled {
248+
opacity: 0.5;
249+
cursor: not-allowed;
250+
}
251+
252+
.form .button-wrapper button.button:not(.secondary):hover {
253+
opacity: 0.9;
254+
}
255+
256+
.form .button-wrapper button.button.secondary {
257+
border: 1px solid currentcolor;
258+
background: transparent;
259+
color: inherit;
260+
}
261+
262+
.form .button-wrapper button.button.secondary:hover {
263+
opacity: 0.9;
264+
}

0 commit comments

Comments
 (0)