Elgg  Version 5.1
forms.css.php
Go to the documentation of this file.
1 <?php ?>
2 /* <style> /**/
7 /* ***************************************
8  Form Elements
9 *************************************** */
10 fieldset > div,
11 .elgg-field {
12  &:not(:last-child) {
13  margin-bottom: 1rem;
14  }
15 }
16 
17 .elgg-form-alt > fieldset > .elgg-foot {
18  border-top: 1px solid $(border-color-soft);
19  padding: 10px 0;
20 }
21 
22 label, .elgg-field-label {
23  font-weight: 600;
24  font-size: 0.9rem;
25  line-height: 1.8rem;
26 }
27 
28 .elgg-field-label {
29  display: block;
30 }
31 
32 .elgg-field-disabled {
33  .elgg-field-label {
34  opacity: 0.6;
35  }
36 }
37 
38 .elgg-required-indicator {
39  font-size: 110%;
40  font-weight: bold;
41  color: $(state-danger-font-color);
42  display: inline;
43  padding: 0 5px;
44 }
45 
46 input, textarea {
47  border: 1px solid $(border-color-mild);
48  color: $(text-color-strong);
49  font-size: 1rem;
50  padding: 0.25rem 0.5rem;
51  line-height: normal;
52  width: 100%;
53  border-radius: 3px;
54 }
55 
56 input:disabled,
57 textarea:disabled,
58 select:disabled,
59 option:disabled {
60  cursor: not-allowed;
61 }
62 
63 textarea {
64  padding: 0.5rem;
65 }
66 
67 input[type=email],
68 input[type=password],
69 input[type=text],
70 input[type=number],
71 input[type=url],
72 input[type=color],
73 input[type=datetime-local],
74 input[type=month],
75 input[type=search],
76 input[type=tel],
77 input[type=week], {
78  height: 2.5rem;
79 }
80 
81 input[type=email]:focus,
82 input[type=password]:focus,
83 input[type=text]:focus,
84 input[type=number]:focus,
85 input[type=url]:focus,
86 input[type=color]:focus,
87 input[type=datetime-local]:focus,
88 input[type=month]:focus,
89 input[type=search]:focus,
90 input[type=tel]:focus,
91 input[type=week]:focus,
92 textarea:focus {
93  border: solid 1px $(border-color-strong);
94  background-color: $(background-color-soft);
95  /* We remove outlines from specific input types so we can leave the browser
96  defaults (like glows) for everything else */
97  outline: 0 none;
98 }
99 
100 input[type="checkbox"],
101 input[type="radio"] {
102  margin: 0 0.25rem 0 0;
103  padding: 0;
104  border: none;
105  width: auto;
106  vertical-align: middle;
107 }
108 
109 input[type="number"] {
110  -moz-appearance: textfield;
111 }
112 
113 .elgg-input-checkbox + label,
114 .elgg-input-checkbox + .elgg-field-label {
115  display: inline-block;
116 }
117 
118 .elgg-input-checkboxes.elgg-horizontal li,
119 .elgg-input-radios.elgg-horizontal li {
120  display: inline-block;
121  padding-right: 1rem;
122 }
123 
124 .elgg-color-box {
125  width: 1.0rem;
126  height: 1.0rem;
127  display: inline-block;
128  background-color: #ccc;
129  left: 5px;
130  top: 5px;
131  border: 1px solid #000;
132  border-radius: 3px;
133 }
134 
135 .elgg-input-color {
136  width: 4.5rem;
137 }
138 
139 <?php
140 echo elgg_view('elements/misc/checkbox_switch.css');
141 ?>
142 
143 select {
144  max-width: 100%;
145  border: 1px solid $(border-color-mild);
146  color: $(text-color-strong);
147  padding: 0.25rem 0.5rem;
148  line-height: 1.75rem;
149  vertical-align: middle;
150  border-radius: 3px;
151 }
152 
153 select:not([multiple]) {
154  height: 2.5rem;
155 }
156 
157 .elgg-form-account {
158  margin-bottom: 1rem;
159 }
160 
161 .elgg-input-radios label {
162  font-weight: normal;
163  font-size: 100%;
164 }
165 
166 .elgg-input-checkboxes {
167  label {
168  font-weight: normal;
169  font-size: 100%;
170  line-height: inherit;
171  }
172 
173  &.elgg-horizontal label > .elgg-input-checkbox {
174  vertical-align: baseline;
175  }
176 }
177 
178 .elgg-form-login, .elgg-form-account {
179  max-width: 40rem;
180  margin: 0 auto;
181 }
182 
183 .elgg-fieldset-has-legend {
184  border: 1px solid $(border-color-soft);
185  padding: 1rem;
186  margin-bottom: 1rem;
187 }
188 
189 @media $(media-phone-up) {
190  .elgg-fieldset-horizontal {
191  display: flex;
192 
193  .elgg-field {
194  margin: 0 1rem 0 0;
195  vertical-align: top;
196 
197  display: flex;
198  flex-direction: column;
199 
200  &.elgg-field-stretch {
201  flex-basis: 1%;
202  flex-grow: 1;
203 
204  > .elgg-field-input {
205  width: 100%;
206  }
207  }
208 
209  &.elgg-field-horizontal {
210  flex-direction: row;
211  align-items: baseline;
212 
213  > *:not(:first-child) {
214  padding-left: 1rem;
215  }
216  }
217 
218  > .elgg-field-label {
219  align-items: center;
220  display: flex;
221  flex-shrink: 0;
222  }
223 
224  &:last-child {
225  margin-right: 0;
226  }
227  }
228 
229  &.elgg-fieldset-wrap {
230  flex-wrap: wrap;
231 
232  .elgg-field {
233  margin-bottom: 0.5rem;
234  }
235  }
236 
237  &.elgg-justify-right {
238  justify-content: flex-end;
239 
240  .elgg-field {
241  margin: 0 0 0 1rem;
242  }
243  }
244 
245  &.elgg-justify-center {
246  justify-content: center;
247 
248  .elgg-field {
249  margin: 0 5px;
250  }
251  }
252  }
253 }
254 
255 <?php
256 echo elgg_view('elements/components/autocomplete.css', $vars);
257 echo elgg_view('elements/components/datepicker.css', $vars);
258 echo elgg_view('input/entitypicker.css', $vars);
259 echo elgg_view('input/tags.css', $vars);
elgg_view(string $view, array $vars=[], string $viewtype= '')
Return a parsed view.
Definition: views.php:177
$site email
Definition: settings.php:16
$vars
Definition: theme.php:5
$data label
Definition: default.php:26