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