Elgg  Version 3.0
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 label.elgg-state-disabled, .elgg-field-label.elgg-state-disabled {
34  opacity: 0.6;
35 }
36 
37 .elgg-required-indicator {
38  font-size: 110%;
39  font-weight: bold;
40  color: $(state-danger-font-color);
41  display: inline;
42  padding: 0 5px;
43 }
44 
45 input, textarea {
46  border: 1px solid $(border-color-mild);
47  color: $(text-color-strong);
48  font-size: 1rem;
49  padding: 0.25rem 0.5rem;
50  line-height: normal;
51  width: 100%;
52  border-radius: 3px;
53 }
54 
55 input:disabled,
56 textarea:disabled,
57 select:disabled,
58 option:disabled {
59  cursor: not-allowed;
60 }
61 
62 textarea {
63  padding: 0.5rem;
64 }
65 
66 input[type=email],
67 input[type=password],
68 input[type=text],
69 input[type=number],
70 input[type=url] {
71  height: 2.5rem;
72 }
73 
74 input[type=email]:focus,
75 input[type=password]:focus,
76 input[type=text]:focus,
77 input[type=number]:focus,
78 input[type=url]:focus,
79 textarea:focus {
80  border: solid 1px $(border-color-strong);
81  background-color: $(background-color-soft);
82  /* We remove outlines from specific input types so we can leave the browser
83  defaults (like glows) for everything else */
84  outline: 0 none;
85 }
86 
87 .elgg-longtext-control {
88  float: right;
89  margin-left: 14px;
90  font-size: 80%;
91  cursor: pointer;
92 }
93 
94 input[type="checkbox"],
95 input[type="radio"] {
96  margin: 0 0.25rem 0 0;
97  padding: 0;
98  border: none;
99  width: auto;
100  vertical-align: middle;
101 }
102 
103 input[type="number"] {
104  -moz-appearance: textfield;
105 }
106 
107 .elgg-input-checkbox + label,
108 .elgg-input-checkbox + .elgg-field-label {
109  display: inline-block;
110 }
111 
112 .elgg-input-checkboxes.elgg-horizontal li,
113 .elgg-input-radios.elgg-horizontal li {
114  display: inline-block;
115  padding-right: 1rem;
116 }
117 
118 <?php
119 echo elgg_view('elements/misc/checkbox_switch.css');
120 ?>
121 
122 select {
123  max-width: 100%;
124  border: 1px solid $(border-color-mild);
125  color: $(text-color-strong);
126  padding: 0.25rem 0.5rem;
127  line-height: 1.75rem;
128  vertical-align: middle;
129  border-radius: 3px;
130 }
131 
132 select:not([multiple]) {
133  height: 2.5rem;
134 }
135 
136 .elgg-form-account {
137  margin-bottom: 1rem;
138 }
139 
140 .elgg-input-radios label {
141  font-weight: normal;
142  font-size: 100%;
143 }
144 
145 .elgg-input-checkboxes label {
146  font-weight: normal;
147  font-size: 100%;
148 }
149 
150 .elgg-form-login, .elgg-form-account {
151  max-width: 40rem;
152  margin: 0 auto;
153 }
154 
155 .elgg-fieldset-has-legend {
156  border: 1px solid $(border-color-soft);
157  padding: 1rem;
158  margin-bottom: 1rem;
159 }
160 
161 .elgg-fieldset-horizontal .elgg-field {
162  display: inline-block;
163  margin: 0 1rem 0 0;
164 }
165 
166 .elgg-fieldset-horizontal.elgg-justify-right .elgg-field {
167  margin: 0 0 0 1rem;
168 }
169 
170 .elgg-fieldset-horizontal.elgg-justify-center .elgg-field {
171  margin: 0 5px;
172 }
173 
174 <?php
175 echo elgg_view('elements/components/autocomplete.css', $vars);
176 echo elgg_view('elements/components/userpicker.css', $vars);
177 echo elgg_view('elements/components/datepicker.css', $vars);
elgg echo
Translates a string.
Definition: languages.js:43
$CONFIG url
The full URL where Elgg is installed.
Definition: config.php:38
$data label
Definition: default.php:26
$vars['type']
Definition: save.php:11
login(\ElggUser $user, $persistent=false)
Logs in a specified .
Definition: sessions.php:273
elgg_view($view, $vars=[], $viewtype= '')
Return a parsed view.
Definition: views.php:246
$site email