MDL-60515 groups: Display group information on the participants page.
[moodle.git] / theme / boost / scss / moodle / user.scss
CommitLineData
536f0460
DW
1/* user.less */
2.userprofile .fullprofilelink {
3 text-align: center;
4 margin: 10px;
5}
f4143537 6
536f0460
DW
7.userprofile .page-context-header {
8 margin-bottom: 10px;
9}
f4143537 10
536f0460
DW
11.userprofile .description {
12 margin-top: 10px;
13 margin-bottom: 30px;
14}
f4143537 15
536f0460
DW
16.userprofile .profile_tree {
17 column-count: 2;
f4143537 18
e9a009dc
FM
19 section {
20 @extend .card;
21 @extend .card-block;
22 display: inline-block;
23 width: 100%;
f4143537 24
e9a009dc
FM
25 h3 {
26 @extend .lead;
27 }
28 }
536f0460 29}
f4143537 30
76c493b3
DW
31// This rule overrides the automatic no-overflow on the participants table. It kills the auto-complete.
32#participantsform .no-overflow {
33 overflow: visible;
34}
35
536f0460 36.userprofile dl.list {
da92b738
FM
37 // Copied from dl.row.
38 > dd + dt {
9cb41231 39 clear: left;
da92b738 40 }
536f0460 41}
f4143537 42
536f0460
DW
43.user-box {
44 margin: 8px;
45 width: 115px;
46 height: 160px;
47 text-align: center;
48 float: left;
49 clear: none;
50}
f4143537 51
536f0460
DW
52#page-user-profile .node_category,
53.path-user .node_category {
54 ul {
137c289a 55 margin: 0;
536f0460 56 list-style: none;
137c289a 57 padding-left: 0;
536f0460 58 }
f4143537 59
536f0460
DW
60 li {
61 margin-top: 5px;
62 }
f4143537 63
536f0460
DW
64 .editprofile,
65 .viewmore {
66 text-align: right;
67 }
68}
69
fd8eab57
RW
70.ajax-contact-button {
71 box-sizing: border-box;
72 position: relative;
73
74 &.loading {
75 .loading-icon {
76 display: block;
77 }
78 }
79
80 .loading-icon {
81 display: none;
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 100%;
87 background-color: rgba(255, 255, 255, 0.7);
88
89 .icon {
90 position: absolute;
91 left: 50%;
92 top: 50%;
93 transform: translate(-50%, -50%);
94 }
95 }
96}
97
536f0460
DW
98@media (max-width: 480px) {
99 .userprofile .profile_tree {
100 /** Display the profile on one column on phones@mixin */
101 column-count: 1;
102 }
103}
104
536f0460
DW
105.userlist #showall {
106 margin: 10px 0;
107}
f4143537 108
536f0460
DW
109.userlist .buttons {
110 text-align: center;
111}
f4143537 112
536f0460
DW
113.userlist .buttons label {
114 padding: 0 3px;
115}
f4143537 116
536f0460
DW
117.userlist table#participants {
118 text-align: center;
119}
f4143537 120
bb3216f8
LB
121.userlist table#participants td {
122 text-align: left;
123 padding: 4px;
536f0460 124 vertical-align: middle;
bb3216f8
LB
125}
126
127.userlist table#participants th {
536f0460
DW
128 text-align: left;
129 padding: 4px;
130}
f4143537 131
536f0460
DW
132.userlist {
133 table.controls {
134 width: 100%;
f4143537 135
536f0460
DW
136 tr {
137 vertical-align: top;
138 }
f4143537 139
536f0460
DW
140 .right {
141 text-align: right;
142 }
f4143537 143
536f0460
DW
144 .groupselector {
145 margin-bottom: 0;
146 margin-top: 0;
f4143537 147
536f0460
DW
148 label {
149 display: block;
150 }
151 }
152 }
153}
f4143537 154
536f0460
DW
155.userinfobox {
156 width: 100%;
157 border: 1px solid;
158 border-collapse: separate;
159 padding: 10px;
160}
f4143537 161
536f0460
DW
162.userinfobox .left,
163.userinfobox .side {
164 width: 100px;
165 vertical-align: top;
166}
f4143537 167
536f0460
DW
168.userinfobox .userpicture {
169 width: 100px;
170 height: 100px;
171}
f4143537 172
536f0460
DW
173.userinfobox .content {
174 vertical-align: top;
175}
f4143537 176
536f0460
DW
177.userinfobox .links {
178 width: 100px;
179 padding: 5px;
180 vertical-align: bottom;
181}
f4143537 182
536f0460
DW
183.userinfobox .links a {
184 display: block;
185}
f4143537 186
536f0460
DW
187.userinfobox .list td {
188 padding: 3px;
189}
f4143537 190
536f0460
DW
191.userinfobox .username {
192 padding-bottom: 20px;
193 font-weight: bold;
194}
f4143537 195
536f0460
DW
196.userinfobox td.label {
197 text-align: right;
198 white-space: nowrap;
199 vertical-align: top;
200 font-weight: bold;
201}
f4143537 202
349b705d
AG
203.group-image {
204 min-width: 93px;
205}
206
536f0460
DW
207.groupinfobox {
208 @extend .card;
209}
f4143537 210
536f0460
DW
211.groupinfobox .left {
212 padding: 10px;
213 width: 100px;
214 vertical-align: top;
215}
f4143537 216
536f0460
DW
217.course-participation #showall {
218 text-align: center;
219 margin: 10px 0;
220}
f4143537 221
536f0460
DW
222#user-policy .noticebox {
223 text-align: center;
224 margin-left: auto;
225 margin-right: auto;
226 margin-bottom: 10px;
227 width: 80%;
228 height: 250px;
229}
f4143537 230
536f0460
DW
231#user-policy #policyframe {
232 width: 100%;
233 height: 100%;
234}
f4143537 235
536f0460
DW
236.iplookup #map {
237 margin: auto;
238}
f4143537 239
536f0460
DW
240.userselector select {
241 width: 100%;
242}
f4143537 243
536f0460
DW
244.userselector div {
245 margin-top: 0.2em;
246}
f4143537 247
536f0460
DW
248.userselector div label {
249 margin-right: 0.3em;
250}
251/* Next style does not work in all browsers but looks nicer when it does */
252.userselector .userselector-infobelow {
253 font-size: 0.8em;
254}
f4143537 255
536f0460
DW
256#userselector_options .collapsibleregioncaption {
257 font-weight: bold;
258}
f4143537 259
536f0460
DW
260#userselector_options p {
261 margin: 0.2em 0;
262 text-align: left;
263}
264/** user full profile */
265#page-user-profile .messagebox {
266 text-align: center;
267 margin-left: auto;
268 margin-right: auto;
269}
270/** user course profile */
271#page-course-view-weeks .messagebox {
272 text-align: center;
273 margin-left: auto;
274 margin-right: auto;
275}
276
277.profileeditor {
278 > .singleselect {
279 margin: 0 0.5em 0 0;
280 }
f4143537 281
536f0460
DW
282 > .singlebutton {
283 display: inline-block;
284 margin: 0 0 0 0.5em;
f4143537
DP
285
286 div,
287 input {
536f0460
DW
288 margin: 0;
289 }
290 }
291}
292
a7bebd06
DW
293// Remove the little cog from participants page because we are putting a cog menu there.
294.userlist h3 .action-icon {
295 display: none;
296}
ae9bbd98
DW
297
298#page-enrol-users .popover {
299 max-width: none;
300}
d9a1d683
DW
301
302.user-enroller-panel {
303 width: 600px;
304}