ghostkit / gutenberg / blocks / form / styles / style.scss

style.scss in Block Animations, Motion & Scroll Effects – Ghost Kit 3.3.3, at gutenberg/blocks/form/styles/style.scss

165 lines 3.4 KB

Raw Download Zip

1	/**
2	* Frontend Styles
3	*/
4	@import "./variables";
5
6	.ghostkit-form {
7	&-field-label {
8	display: inline-block;
9	margin-bottom: var(--gkt-form--field-label__margin-bottom);
10
11	.required {
12	margin-left: var(--gkt-form--field-label-required-mark__margin-left);
13	color: var(--gkt-form--field-label-required-mark__color);
14	}
15
16	&-hidden {
17	position: absolute;
18	left: -99999px;
19	}
20	}
21
22	&-field-description {
23	display: block;
24	margin-top: var(--gkt-form--field-description__margin-top);
25	line-height: var(--gkt-form--field-description__line-height);
26	opacity: var(--gkt-form--field-description__opacity);
27
28	&-hidden {
29	position: absolute;
30	left: -99999px;
31	}
32	}
33
34	// Row
35	&-field-row {
36	display: grid;
37	grid-template-columns: var(--gkt-form--field-row__template-columns);
38	gap: var(--gkt-form--field-row__gap);
39
40	@include media-breakpoint-down(md) {
41	grid-template-columns: 1fr;
42	}
43	}
44
45	// Field Name
46	&-field-name-with-middle &-field-row {
47	grid-template-columns: var(--gkt-form--field-name-row-with-middle__template-columns);
48
49	@include media-breakpoint-down(md) {
50	grid-template-columns: 1fr;
51	}
52	}
53
54	// Fields default sizes.
55	&-field {
56	input:not([type="checkbox"], [type="radio"]),
57	textarea,
58	select {
59	width: 100%;
60	max-width: 100%;
61	min-height: var(--gkt-form--field__min-height);
62	font-family: var(--gkt-form--field__font-family);
63	font-size: var(--gkt-form--field__font-size);
64	}
65
66	textarea {
67	min-height: var(--gkt-form--field-textarea__min-height);
68	}
69	}
70
71	// Field Radio
72	&-field-radio &-field-radio-item {
73	display: block;
74	}
75
76	// Field Radio Inline
77	&-field-radio-inline &-field-radio-item {
78	display: inline-block;
79	margin-right: var(--gkt-form--field-radio-inline__margin-right);
80	}
81
82	// Field Checkbox
83	&-field-checkbox &-field-checkbox-item {
84	display: block;
85	}
86
87	// Field Checkbox Inline
88	&-field-checkbox-inline &-field-checkbox-item {
89	display: inline-block;
90	margin-right: var(--gkt-form--field-checkbox-inline__margin-right);
91	}
92
93	// Submit Button
94	&-submit-button {
95	--gkt-button__gap: 0%;
96	--gkt-button__align-items: flex-start;
97	--gkt-button__justify-content: flex-start;
98
99	display: flex;
100	justify-content: var(--gkt-button__align-items);
101	}
102
103	&-submit-button-align-left {
104	--gkt-button__align-items: flex-start;
105	}
106
107	&-submit-button-align-right {
108	--gkt-button__align-items: flex-end;
109	}
110
111	&-submit-button-align-center {
112	--gkt-button__align-items: center;
113	}
114
115	// Alert
116	.ghostkit-alert-form-success {
117	--gkt-alert__border-color: var(--gkt-form--alert-success__color);
118	}
119
120	.ghostkit-alert-form-error {
121	--gkt-alert__border-color: var(--gkt-form--alert-error__color);
122	}
123
124	// Form validation.
125	&-was-validated {
126	input:valid,
127	select:valid,
128	textarea:valid {
129	border-color: var(--gkt-form--field-success__border-color);
130	}
131
132	input:invalid,
133	select:invalid,
134	textarea:invalid {
135	border-color: var(--gkt-form--field-error__border-color);
136	}
137	}
138
139	.ghostkit-form-field-error {
140	padding: 0;
141	margin: 0;
142	margin-top: var(--gkt-form--errors__margin-top);
143	font-family: inherit;
144	font-size: var(--gkt-form--errors__font-size);
145	line-height: var(--gkt-form--errors__line-height);
146	color: var(--gkt-form--errors__color);
147
148	&:empty,
149	&[aria-hidden="true"]="true""] {
150	display: none;
151	}
152	}
153
154	// Honeypot field.
155	[name="ghostkit_verify_email"]="ghostkit_verify_email""] {
156	position: absolute;
157	top: 0;
158	left: 0;
159	z-index: -1;
160	width: 0;
161	height: 0;
162	opacity: 0;
163	}
164	}
165