MDL-60515 groups: Display group information on the participants page.
[moodle.git] / theme / boost / scss / moodle / user.scss
1 /* user.less */
2 .userprofile .fullprofilelink {
3     text-align: center;
4     margin: 10px;
5 }
7 .userprofile .page-context-header {
8     margin-bottom: 10px;
9 }
11 .userprofile .description {
12     margin-top: 10px;
13     margin-bottom: 30px;
14 }
16 .userprofile .profile_tree {
17     column-count: 2;
19     section {
20         @extend .card;
21         @extend .card-block;
22         display: inline-block;
23         width: 100%;
25         h3 {
26             @extend .lead;
27         }
28     }
29 }
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 }
36 .userprofile dl.list {
37     // Copied from dl.row.
38     > dd + dt {
39         clear: left;
40     }
41 }
43 .user-box {
44     margin: 8px;
45     width: 115px;
46     height: 160px;
47     text-align: center;
48     float: left;
49     clear: none;
50 }
52 #page-user-profile .node_category,
53 .path-user .node_category {
54     ul {
55         margin: 0;
56         list-style: none;
57         padding-left: 0;
58     }
60     li {
61         margin-top: 5px;
62     }
64     .editprofile,
65     .viewmore {
66         text-align: right;
67     }
68 }
70 .ajax-contact-button {
71     box-sizing: border-box;
72     position: relative;
74     &.loading {
75         .loading-icon {
76             display: block;
77         }
78     }
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);
89         .icon {
90             position: absolute;
91             left: 50%;
92             top: 50%;
93             transform: translate(-50%, -50%);
94         }
95     }
96 }
98 @media (max-width: 480px) {
99     .userprofile .profile_tree {
100         /** Display the profile on one column on phones@mixin  */
101         column-count: 1;
102     }
105 .userlist #showall {
106     margin: 10px 0;
109 .userlist .buttons {
110     text-align: center;
113 .userlist .buttons label {
114     padding: 0 3px;
117 .userlist table#participants {
118     text-align: center;
121 .userlist table#participants td {
122     text-align: left;
123     padding: 4px;
124     vertical-align: middle;
127 .userlist table#participants th {
128     text-align: left;
129     padding: 4px;
132 .userlist {
133     table.controls {
134         width: 100%;
136         tr {
137             vertical-align: top;
138         }
140         .right {
141             text-align: right;
142         }
144         .groupselector {
145             margin-bottom: 0;
146             margin-top: 0;
148             label {
149                 display: block;
150             }
151         }
152     }
155 .userinfobox {
156     width: 100%;
157     border: 1px solid;
158     border-collapse: separate;
159     padding: 10px;
162 .userinfobox .left,
163 .userinfobox .side {
164     width: 100px;
165     vertical-align: top;
168 .userinfobox .userpicture {
169     width: 100px;
170     height: 100px;
173 .userinfobox .content {
174     vertical-align: top;
177 .userinfobox .links {
178     width: 100px;
179     padding: 5px;
180     vertical-align: bottom;
183 .userinfobox .links a {
184     display: block;
187 .userinfobox .list td {
188     padding: 3px;
191 .userinfobox .username {
192     padding-bottom: 20px;
193     font-weight: bold;
196 .userinfobox td.label {
197     text-align: right;
198     white-space: nowrap;
199     vertical-align: top;
200     font-weight: bold;
203 .group-image {
204     min-width: 93px;
207 .groupinfobox {
208     @extend .card;
211 .groupinfobox .left {
212     padding: 10px;
213     width: 100px;
214     vertical-align: top;
217 .course-participation #showall {
218     text-align: center;
219     margin: 10px 0;
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;
231 #user-policy #policyframe {
232     width: 100%;
233     height: 100%;
236 .iplookup #map {
237     margin: auto;
240 .userselector select {
241     width: 100%;
244 .userselector div {
245     margin-top: 0.2em;
248 .userselector div label {
249     margin-right: 0.3em;
251 /* Next style does not work in all browsers but looks nicer when it does */
252 .userselector .userselector-infobelow {
253     font-size: 0.8em;
256 #userselector_options .collapsibleregioncaption {
257     font-weight: bold;
260 #userselector_options p {
261     margin: 0.2em 0;
262     text-align: left;
264 /** user full profile */
265 #page-user-profile .messagebox {
266     text-align: center;
267     margin-left: auto;
268     margin-right: auto;
270 /** user course profile */
271 #page-course-view-weeks .messagebox {
272     text-align: center;
273     margin-left: auto;
274     margin-right: auto;
277 .profileeditor {
278     > .singleselect {
279         margin: 0 0.5em 0 0;
280     }
282     > .singlebutton {
283         display: inline-block;
284         margin: 0 0 0 0.5em;
286         div,
287         input {
288             margin: 0;
289         }
290     }
293 // Remove the little cog from participants page because we are putting a cog menu there.
294 .userlist h3 .action-icon {
295     display: none;
298 #page-enrol-users .popover {
299     max-width: none;
302 .user-enroller-panel {
303     width: 600px;