Skip to content

Commit 9b10106

Browse files
VitalyyPVitalyyP
authored
[549] style: Update form and checkbox styling for better UX (#112)
- Add new checkbox styles in separate SCSS file - Update form styles for better user experience - Add SVG check mark icon for checkboxes - Implement responsive design for forms - Extract checkbox styles to improve code organization
1 parent 9ec6a27 commit 9b10106

5 files changed

Lines changed: 178 additions & 90 deletions

File tree

‎website/modules/@apostrophecms/form-textarea-field-widget/views/widget.html‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
1-
{# ids must be unique doc-wide #}
2-
{% set id = apos.util.generateId() %}
3-
{% set widget = data.widget %}
4-
{% set prependIfPrefix = apos.modules['@apostrophecms/form'].prependIfPrefix %}
5-
{% import "fragments/utility.html" as utils with context %}
1+
{# ids must be unique doc-wide #} {% set id = apos.util.generateId() %} {% set
2+
widget = data.widget %} {% set prependIfPrefix =
3+
apos.modules['@apostrophecms/form'].prependIfPrefix %} {% import
4+
"fragments/utility.html" as utils with context %}
65

7-
<div data-apos-form-textarea class="apos-form-input-wrapper sf-field sf-field-textarea">
8-
<label for="{{ id }}"
6+
<div
7+
data-apos-form-textarea
8+
class="apos-form-input-wrapper sf-field sf-field-textarea"
9+
>
10+
<label
11+
for="{{ id }}"
912
class="apos-form-label {{ prependIfPrefix('__label') }}"
1013
>
1114
{{ widget.fieldLabel}}
12-
{{ utils.optional(widget.required) }}
1315
<span
1416
class="apos-form-label-message {{ prependIfPrefix('__label-message') }}"
15-
data-apos-input-message="{{ widget.fieldName }}" hidden></span>
17+
data-apos-input-message="{{ widget.fieldName }}"
18+
hidden
19+
></span>
1620
</label>
17-
<textarea class="sf-textarea apos-form-input {{ prependIfPrefix('__input') }}"
18-
id="{{ id }}" name="{{ widget.fieldName }}"
21+
<textarea
22+
class="sf-textarea apos-form-input {{ prependIfPrefix('__input') }}"
23+
id="{{ id }}"
24+
name="{{ widget.fieldName }}"
1925
placeholder="{{ widget.placeholder }}"
20-
{% if widget.required %}required{% endif %}></textarea>
21-
</div>
26+
{%
27+
if
28+
widget.required
29+
%}required{%
30+
endif
31+
%}
32+
></textarea>
33+
</div>

‎website/modules/asset/ui/src/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@import './scss/_carousel';
1919
@import './scss/_testimonials';
2020
@import './scss/_form';
21+
@import './scss/_checkbox';
2122
@import './scss/_page-intro';
2223
@import './scss/_cases.scss';
2324
@import './scss/_container.scss';

‎website/modules/asset/ui/src/scss/_checkbox.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.apos-form-fieldset {
2+
div {
3+
input[type='checkbox'] {
4+
opacity: 0;
5+
position: absolute;
6+
width: 0;
7+
height: 0;
8+
&:focus + label::before {
9+
outline: 2px solid $gray-border;
10+
outline-offset: 2px;
11+
}
12+
13+
&:focus:not(:focus-visible) + label::before {
14+
outline: none;
15+
}
16+
17+
&:focus-visible + label::before {
18+
outline: 2px solid $gray-border;
19+
outline-offset: 2px;
20+
}
21+
}
22+
23+
label {
24+
position: relative;
25+
display: flex;
26+
align-items: center;
27+
gap: 16px;
28+
cursor: pointer;
29+
user-select: none;
30+
}
31+
32+
label::before {
33+
content: '';
34+
left: 0;
35+
top: 2px;
36+
width: 14px;
37+
height: 14px;
38+
background-color: $gray-100;
39+
background-repeat: no-repeat;
40+
background-position: center;
41+
background-size: 10px 10px;
42+
}
43+
44+
input[type='checkbox']:checked + label::before {
45+
left: 0;
46+
top: 2px;
47+
width: 14px;
48+
height: 14px;
49+
background-color: $gray-500;
50+
background-image: url(/images/check_mark.svg);
51+
background-repeat: no-repeat;
52+
background-position: center;
53+
background-size: 10px 10px;
54+
}
55+
}
56+
}

‎website/modules/asset/ui/src/scss/_form.scss‎

Lines changed: 93 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,36 @@
1-
.sf-field {
2-
position: relative;
3-
box-sizing: border-box;
4-
.apos-form-label {
5-
font-weight: 500;
6-
color: $gray-300;
7-
margin: 0 0 10px;
8-
padding-top: 10px;
9-
}
10-
.sf-textarea, .sf-input {
11-
box-sizing: border-box;
12-
border-radius: 0;
13-
}
14-
.sf-label {
15-
position: absolute;
16-
top: 4px;
17-
@include transition(all);
18-
font-size: 10px;
1+
.sf-contact-form {
2+
.sf-form {
3+
position: relative;
4+
min-width: 295px;
5+
max-width: 900px;
6+
margin: 0 auto;
7+
padding: 23px 15px 7px;
8+
border: 1px solid $gray-border;
9+
@include font-settings(14px, 150%, 500);
10+
margin-bottom: 84px;
11+
@include breakpoint-medium {
12+
padding: 24px 44px 6px;
13+
margin-bottom: 248px;
14+
}
1915
}
2016
}
2117

18+
.sf-textarea,
2219
.sf-input {
23-
width: 100%;
24-
padding: 20px 0 10px;
25-
font-size: 14px;
26-
color: $gray-300;
27-
font-weight: 500;
28-
margin-bottom: 10px;
29-
border: 0;
30-
@include border(border-bottom);
31-
@include transition(all);
32-
&:focus + label,
33-
&:not(:placeholder-shown) ~ label {
34-
font-size: 10px;
35-
top: -10px;
20+
box-sizing: border-box;
21+
border-radius: 0;
22+
border: 1px solid $whisper;
23+
padding: 8px 16px;
24+
height: 37px;
25+
margin-bottom: 24px;
26+
@include breakpoint-medium {
27+
height: 53px;
28+
padding: 16px 25px;
29+
}
30+
line-height: 140%;
31+
&::placeholder {
32+
color: $gray-300;
3633
}
37-
&::placeholder {
38-
color: $gray-300;
39-
}
4034
&:focus {
4135
outline: 0;
4236
border-left: 0;
@@ -46,62 +40,84 @@
4640
border-color: $gray-300;
4741
}
4842
&:focus:invalid {
49-
outline: 0;
5043
border-color: $red;
5144
}
5245
}
46+
47+
.sf-input,
48+
.sf-textarea,
49+
.sf-input::placeholder,
50+
.sf-textarea::placeholder {
51+
white-space: nowrap;
52+
overflow: hidden;
53+
text-overflow: ellipsis;
54+
}
55+
5356
.sf-textarea {
54-
width: 100%;
55-
font-size: 10px;
56-
line-height: 14px;
57-
color: $gray-300;
58-
font-weight: 500;
59-
padding: 10px;
60-
@include border(border);
61-
min-height: 125px;
57+
min-height: unset;
58+
overflow: hidden;
6259
resize: none;
63-
margin-bottom: 20px;
60+
}
61+
62+
label {
63+
display: block;
64+
margin-bottom: 12px;
65+
color: $gray-500;
66+
}
67+
68+
.sf-button {
69+
min-width: 93px;
70+
margin: 0 auto;
71+
position: absolute;
72+
left: 50%;
73+
transform: translateX(-50%);
74+
bottom: -65px;
6475
@include breakpoint-medium {
65-
margin-bottom: 40px;
66-
}
67-
@include transition(border-color);
68-
&:focus {
69-
outline: 0;
70-
border-bottom-color: $gray-300;
76+
bottom: -136px;
7177
}
7278
}
79+
80+
.apos-form-input-wrapper {
81+
display: flex;
82+
flex-direction: column-reverse;
83+
}
84+
7385
.sf-field-textarea {
74-
.apos-form-label {
75-
font-size: 10px;
86+
display: flex;
87+
flex-direction: column;
88+
}
89+
90+
.apos-form-fieldset {
91+
border: 0;
92+
padding: 0;
93+
margin: 0;
94+
95+
legend {
96+
margin-bottom: 12px;
7697
}
7798
.apos-form-field-optional {
7899
display: none;
79100
}
101+
div {
102+
margin-bottom: 16px;
103+
}
80104
}
81-
.sf-contact-form {
82-
.sf-form {
83-
position: relative;
84-
padding: 6px 20px 20px 20px;
85-
@include border(border);
86-
@include breakpoint-medium {
87-
padding: 40px;
88-
}
105+
106+
.apos-form-submission-thank-you {
107+
padding: 40px 0;
108+
text-align: center;
109+
h3 {
110+
font-weight: 700;
111+
font-size: 22px;
112+
line-height: 24px;
113+
margin: 0 0 20px;
114+
color: $gray-500;
89115
}
90-
.apos-form-submission-thank-you {
91-
padding: 40px 0;
92-
h3 {
93-
font-weight: 700;
94-
font-size: 22px;
95-
line-height: 24px;
96-
margin: 0 0 20px;
97-
color: $gray-500;
98-
}
99-
p {
100-
font-weight: 500;
101-
font-size: 14px;
102-
line-height: 20px;
103-
margin: 0;
104-
color: $gray-300;
105-
}
116+
p {
117+
font-weight: 500;
118+
font-size: 14px;
119+
line-height: 20px;
120+
margin: 0;
121+
color: $gray-300;
106122
}
107-
}
123+
}

‎website/public/images/check_mark.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)