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