Skip to content

Commit caffcc5

Browse files
danalvrzdanalvrz
committed
add basic from block styles
1 parent 37d8fa4 commit caffcc5

2 files changed

Lines changed: 351 additions & 0 deletions

File tree

‎frontend/packages/volto-light-theme/src/theme/blocks/_form.scss‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
%form-outlined-button {
2+
display: inline-flex;
3+
align-items: center;
4+
padding: 8px 20px;
5+
border: 1px solid var(--theme-foreground-color);
6+
border-radius: 0;
7+
margin: 0;
8+
background-color: var(--theme-color);
9+
color: var(--theme-foreground-color);
10+
11+
@include body-text-bold();
12+
13+
&:hover,
14+
&:active,
15+
&:focus {
16+
border-color: var(--theme-foreground-color);
17+
background-color: var(--theme-foreground-color);
18+
color: var(--theme-color);
19+
}
20+
}
21+
22+
.block.schemaForm {
23+
--form-error-foreground: #cc0000;
24+
--form-error-background: #f2cecd;
25+
26+
& > h2,
27+
& > p,
28+
& > .formDescription,
29+
& > .container {
30+
@include default-container-width();
31+
@include adjustMarginsToContainer($default-container-width);
32+
}
33+
34+
h2 {
35+
@include block-title();
36+
37+
margin-bottom: $spacing-small;
38+
}
39+
40+
.formDescription {
41+
margin-bottom: $spacing-medium;
42+
}
43+
44+
form.ui.form {
45+
fieldset {
46+
padding: 0;
47+
border: 0;
48+
margin: 0;
49+
}
50+
51+
.ui.segments,
52+
.ui.raised.segments,
53+
.ui.segment {
54+
padding: 0;
55+
border: 0;
56+
border-radius: 0;
57+
margin: 0;
58+
background: none;
59+
box-shadow: none;
60+
61+
&::before,
62+
&::after {
63+
display: none;
64+
}
65+
}
66+
67+
.field {
68+
margin-bottom: $spacing-small;
69+
padding-bottom: 0 !important;
70+
71+
.ui.grid {
72+
display: block;
73+
margin: 0;
74+
75+
> .row {
76+
display: block;
77+
padding: 0;
78+
}
79+
80+
> .row > .column {
81+
width: 100% !important;
82+
padding: 0;
83+
}
84+
}
85+
86+
.wrapper > label {
87+
display: block;
88+
margin-bottom: 0;
89+
90+
@include add(size, xs);
91+
@include add(height, s);
92+
@include add(weight, bold);
93+
94+
color: var(--theme-low-contrast-foreground-color);
95+
opacity: 0.9;
96+
}
97+
98+
&:focus-within .wrapper > label {
99+
color: var(--theme-foreground-color);
100+
opacity: 1;
101+
}
102+
103+
&.required .wrapper > label::after {
104+
content: '*';
105+
margin-left: 2px;
106+
background: none;
107+
}
108+
109+
&.required .wrapper .ui.checkbox::after {
110+
content: '*';
111+
margin-left: 2px;
112+
background: none;
113+
}
114+
115+
.help {
116+
margin: 0;
117+
118+
@include add(size, xs);
119+
@include add(height, m);
120+
121+
color: var(--theme-low-contrast-foreground-color);
122+
border-bottom: none;
123+
}
124+
125+
&.error {
126+
.wrapper > label,
127+
.help {
128+
color: var(--form-error-foreground);
129+
}
130+
131+
.ui.input > input,
132+
input[type='text'],
133+
input[type='email'],
134+
input[type='number'],
135+
input[type='password'],
136+
textarea,
137+
.react-select__control,
138+
.DateInput_input,
139+
.rc-time-picker-input {
140+
background: var(--form-error-background);
141+
color: var(--form-error-foreground);
142+
143+
&::placeholder {
144+
color: var(--form-error-foreground);
145+
}
146+
}
147+
}
148+
149+
&.textarea .wrapper {
150+
margin-top: 0;
151+
}
152+
}
153+
154+
.ui.input {
155+
width: 100%;
156+
}
157+
158+
.ui.input > input,
159+
input[type='text'],
160+
input[type='email'],
161+
input[type='number'],
162+
input[type='password'],
163+
textarea,
164+
.react-select__control,
165+
.DateInput_input,
166+
.rc-time-picker-input {
167+
width: 100%;
168+
padding: $spacing-small;
169+
border: 0;
170+
border-radius: 0;
171+
background: var(--theme-high-contrast-color);
172+
color: var(--theme-foreground-color);
173+
box-shadow: none;
174+
175+
@include body-text();
176+
177+
&::placeholder {
178+
color: var(--theme-low-contrast-foreground-color);
179+
opacity: 0.6;
180+
}
181+
182+
&:focus,
183+
&:focus-visible {
184+
outline: 2px solid var(--theme-foreground-color);
185+
outline-offset: -2px;
186+
}
187+
}
188+
189+
textarea {
190+
min-height: 180px;
191+
resize: vertical;
192+
margin-top: 5px;
193+
}
194+
195+
.react-select__control {
196+
display: flex;
197+
min-height: auto;
198+
padding: $spacing-small;
199+
200+
.react-select__value-container {
201+
padding: 0;
202+
}
203+
204+
.react-select__single-value {
205+
color: var(--theme-foreground-color);
206+
}
207+
208+
.react-select__placeholder {
209+
color: var(--theme-low-contrast-foreground-color);
210+
opacity: 0.6;
211+
}
212+
213+
.react-select__indicator-separator {
214+
display: none;
215+
}
216+
217+
.react-select__indicator svg path {
218+
fill: var(--theme-foreground-color);
219+
}
220+
}
221+
222+
.react-select__menu {
223+
margin: 0;
224+
border-radius: 0;
225+
background: var(--theme-high-contrast-color);
226+
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.25);
227+
}
228+
229+
.react-select__menu-list {
230+
padding: 0;
231+
}
232+
233+
.react-select__option {
234+
padding: 12px $spacing-small;
235+
background: transparent;
236+
color: var(--theme-foreground-color);
237+
cursor: pointer;
238+
239+
@include body-text();
240+
241+
&.react-select__option--is-focused,
242+
&.react-select__option--is-selected {
243+
background: var(--theme-foreground-color);
244+
color: var(--theme-high-contrast-color);
245+
}
246+
}
247+
248+
.date-time-widget-wrapper {
249+
display: flex;
250+
flex-wrap: wrap;
251+
gap: $spacing-small;
252+
align-items: center;
253+
254+
.DateInput {
255+
width: 140px;
256+
}
257+
.time-input input {
258+
width: 90px !important;
259+
}
260+
}
261+
262+
.file-widget-dropzone {
263+
display: flex;
264+
flex-direction: column;
265+
align-items: flex-start;
266+
gap: $spacing-small;
267+
cursor: pointer;
268+
margin-bottom: $spacing-small;
269+
270+
.dropzone-placeholder {
271+
width: 100%;
272+
padding: $spacing-medium;
273+
margin-top: 0;
274+
background: var(--theme-high-contrast-color);
275+
}
276+
277+
.dropzone-text {
278+
margin: 0;
279+
280+
@include body-text();
281+
282+
color: var(--theme-low-contrast-foreground-color);
283+
}
284+
285+
.label-file-widget-input {
286+
@extend %form-outlined-button;
287+
}
288+
}
289+
290+
.field.help .file-widget-dropzone {
291+
margin-bottom: 0;
292+
}
293+
294+
.ui.segment.actions {
295+
display: flex;
296+
gap: $spacing-small;
297+
margin-top: $spacing-xlarge;
298+
padding: 0;
299+
300+
&::after {
301+
display: none;
302+
}
303+
304+
button {
305+
@extend %form-outlined-button;
306+
307+
float: none !important;
308+
309+
&:not(.primary) {
310+
border-color: var(--theme-low-contrast-foreground-color);
311+
color: var(--theme-low-contrast-foreground-color);
312+
313+
&:hover,
314+
&:active,
315+
&:focus {
316+
border-color: var(--theme-low-contrast-foreground-color);
317+
background-color: var(--theme-low-contrast-foreground-color);
318+
color: var(--theme-color);
319+
}
320+
}
321+
}
322+
}
323+
}
324+
325+
.inline.field .wrapper {
326+
border-bottom: none;
327+
min-height: auto;
328+
}
329+
330+
.field-file-name:empty {
331+
display: none;
332+
}
333+
334+
.negative.attached.message {
335+
flex-direction: row;
336+
}
337+
}
338+
339+
#page-edit,
340+
#page-add {
341+
.block.schemaForm {
342+
.field {
343+
.toolbar {
344+
display: flex;
345+
align-items: flex-start;
346+
margin-top: 15px;
347+
}
348+
}
349+
}
350+
}

‎frontend/packages/volto-light-theme/src/theme/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
@import 'blocks/eventMetadata';
3737
@import 'blocks/rss';
3838
@import 'blocks/eventSearch';
39+
@import 'blocks/form';
3940
@import 'blocks/error-boundary';
4041
@import 'sticky-menu';
4142
@import 'mobile-sticky-menu';

0 commit comments

Comments
 (0)