aa7f3a6edfcd5c5f4c5127f7cb460e16d44b5ca9
[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 .groupinfobox {
204     @extend .card;
207 .groupinfobox .left {
208     padding: 10px;
209     width: 100px;
210     vertical-align: top;
213 .course-participation #showall {
214     text-align: center;
215     margin: 10px 0;
218 #user-policy .noticebox {
219     text-align: center;
220     margin-left: auto;
221     margin-right: auto;
222     margin-bottom: 10px;
223     width: 80%;
224     height: 250px;
227 #user-policy #policyframe {
228     width: 100%;
229     height: 100%;
232 .iplookup #map {
233     margin: auto;
236 .userselector select {
237     width: 100%;
240 .userselector div {
241     margin-top: 0.2em;
244 .userselector div label {
245     margin-right: 0.3em;
247 /* Next style does not work in all browsers but looks nicer when it does */
248 .userselector .userselector-infobelow {
249     font-size: 0.8em;
252 #userselector_options .collapsibleregioncaption {
253     font-weight: bold;
256 #userselector_options p {
257     margin: 0.2em 0;
258     text-align: left;
260 /** user full profile */
261 #page-user-profile .messagebox {
262     text-align: center;
263     margin-left: auto;
264     margin-right: auto;
266 /** user course profile */
267 #page-course-view-weeks .messagebox {
268     text-align: center;
269     margin-left: auto;
270     margin-right: auto;
273 .profileeditor {
274     > .singleselect {
275         margin: 0 0.5em 0 0;
276     }
278     > .singlebutton {
279         display: inline-block;
280         margin: 0 0 0 0.5em;
282         div,
283         input {
284             margin: 0;
285         }
286     }
289 // Remove the little cog from participants page because we are putting a cog menu there.
290 .userlist h3 .action-icon {
291     display: none;
294 #page-enrol-users .popover {
295     max-width: none;
298 .user-enroller-panel {
299     width: 600px;