MDL-62597 Privacy: Request date column should include time
[moodle.git] / theme / bootstrapbase / less / moodle / bs4-compat.less
1 // Bootstrap 4 compatibility for bootstrapbased themes.
2 // Disable some stylelint rules which are necessary these compatbility classses.
3 /* stylelint-disable declaration-no-important, block-no-empty */
5 // Add support for card. We map it to well.
6 // This is not meant to be perfect - but at least applies some styles to a bs4 card.
7 .card {
8     position: relative;
9     display: block;
10     margin-bottom: .75rem;
11     background-color: #fff;
12     border: 1px solid @wellBorder;
13     border-radius: 0;
14 }
16 .card-header {
17     padding: .75rem 1.25rem;
18     background-color: @wellBackground;
19     border-bottom: 1px solid @wellBorder;
20 }
22 .card-block {
23     padding: 1.25rem;
24 }
27 // Due to lessphp limitations, the following classes must be declared statically without use of a loop.
28 .p-l-1 {
29     padding-left: 1 * @baseFontSize !important;
30 }
31 .p-r-1 {
32     padding-right: 1 * @baseFontSize !important;
33 }
34 .p-t-1 {
35     padding-top: 1 * @baseFontSize !important;
36 }
37 .p-b-1 {
38     padding-bottom: 1 * @baseFontSize !important;
39 }
40 .p-x-1 {
41     padding-left: 1 * @baseFontSize !important;
42     padding-right: 1 * @baseFontSize !important;
43 }
44 .p-y-1 {
45     padding-top: 1 * @baseFontSize !important;
46     padding-bottom: 1 * @baseFontSize !important;
47 }
48 .p-a-1 {
49     padding: 1 * @baseFontSize !important;
50 }
52 .m-l-1 {
53     margin-left: 1 * @baseFontSize !important;
54 }
55 .m-r-1 {
56     margin-right: 1 * @baseFontSize !important;
57 }
58 .m-t-1 {
59     margin-top: 1 * @baseFontSize !important;
60 }
61 .m-b-1 {
62     margin-bottom: 1 * @baseFontSize !important;
63 }
64 .m-x-1 {
65     margin-left: 1 * @baseFontSize !important;
66     margin-right: 1 * @baseFontSize !important;
67 }
68 .m-y-1 {
69     margin-top: 1 * @baseFontSize !important;
70     margin-bottom: 1 * @baseFontSize !important;
71 }
72 .m-a-1 {
73     margin: 1 * @baseFontSize !important;
74 }
76 .p-l-2 {
77     padding-left: 2 * @baseFontSize !important;
78 }
79 .p-r-2 {
80     padding-right: 2 * @baseFontSize !important;
81 }
82 .p-t-2 {
83     padding-top: 2 * @baseFontSize !important;
84 }
85 .p-b-2 {
86     padding-bottom: 2 * @baseFontSize !important;
87 }
88 .p-x-2 {
89     padding-left: 2 * @baseFontSize !important;
90     padding-right: 2 * @baseFontSize !important;
91 }
92 .p-y-2 {
93     padding-top: 2 * @baseFontSize !important;
94     padding-bottom: 2 * @baseFontSize !important;
95 }
96 .p-a-2 {
97     padding: 2 * @baseFontSize !important;
98 }
100 .m-l-2 {
101     margin-left: 2 * @baseFontSize !important;
103 .m-r-2 {
104     margin-right: 2 * @baseFontSize !important;
106 .m-t-2 {
107     margin-top: 2 * @baseFontSize !important;
109 .m-b-2 {
110     margin-bottom: 2 * @baseFontSize !important;
112 .m-x-2 {
113     margin-left: 2 * @baseFontSize !important;
114     margin-right: 2 * @baseFontSize !important;
116 .m-y-2 {
117     margin-top: 2 * @baseFontSize !important;
118     margin-bottom: 2 * @baseFontSize !important;
120 .m-a-2 {
121     margin: 2 * @baseFontSize !important;
124 .p-l-3 {
125     padding-left: 3 * @baseFontSize !important;
127 .p-r-3 {
128     padding-right: 3 * @baseFontSize !important;
130 .p-t-3 {
131     padding-top: 3 * @baseFontSize !important;
133 .p-b-3 {
134     padding-bottom: 3 * @baseFontSize !important;
136 .p-x-3 {
137     padding-left: 3 * @baseFontSize !important;
138     padding-right: 3 * @baseFontSize !important;
140 .p-y-3 {
141     padding-top: 3 * @baseFontSize !important;
142     padding-bottom: 3 * @baseFontSize !important;
144 .p-a-3 {
145     padding: 3 * @baseFontSize !important;
148 .m-l-3 {
149     margin-left: 3 * @baseFontSize !important;
151 .m-r-3 {
152     margin-right: 3 * @baseFontSize !important;
154 .m-t-3 {
155     margin-top: 3 * @baseFontSize !important;
157 .m-b-3 {
158     margin-bottom: 3 * @baseFontSize !important;
160 .m-x-3 {
161     margin-left: 3 * @baseFontSize !important;
162     margin-right: 3 * @baseFontSize !important;
164 .m-y-3 {
165     margin-top: 3 * @baseFontSize !important;
166     margin-bottom: 3 * @baseFontSize !important;
168 .m-a-3 {
169     margin: 3 * @baseFontSize !important;
172 .d-inline {
173     display: inline !important;
175 .d-block {
176     display: block !important;
178 .d-inline-block {
179     display: inline-block !important;
182 // Horizontal centering.
183 .m-x-auto {
184     margin-left: auto !important;
185     margin-right: auto !important;
188 // Support img-fluid.
189 .img-fluid:extend(.img-responsive) {
192 // Text danger
193 .text-danger:extend(.text-error) {
196 .btn-secondary {
197     background-color: @white;
198     background-image: none;
199     color: @black;
202 // Tags
203 .tag:extend(.label) {
204     // Important (red)
205     &-danger {
206         background-color: @errorText;
207     }
208     &-danger[href] {
209         background-color: darken(@errorText, 10%);
210     }
211     // Warnings (orange)
212     &-warning {
213         background-color: @orange;
214     }
215     &-warning[href] {
216         background-color: darken(@orange, 10%);
217     }
218     // Success (green)
219     &-success {
220         background-color: @successText;
221     }
222     &-success[href] {
223         background-color: darken(@successText, 10%);
224     }
225     // Info (turquoise)
226     &-info {
227         background-color: @infoText;
228     }
229     &-info[href] {
230         background-color: darken(@infoText, 10%);
231     }
232     // Primary (blue)
233     &-primary {
234         background-color: @blue;
235     }
236     &-primary[href] {
237         background-color: darken(@blue, 10%);
238     }
241 // Floats
242 .pull-xs-left:extend(.pull-left) {
245 .pull-xs-right:extend(.pull-right) {
248 .text-nowrap {
249     white-space: nowrap !important;
252 .text-truncate {
253     overflow: hidden;
254     text-overflow: ellipsis;
255     white-space: nowrap;
258 .text-white {
259     color: @white;
262 // Bg utilities.
263 .bg {
264     // Important (red)
265     &-danger {
266         background-color: @errorText;
267     }
268     &-danger[href] {
269         background-color: darken(@errorText, 10%);
270     }
271     // Warnings (orange)
272     &-warning {
273         background-color: @orange;
274     }
275     &-warning[href] {
276         background-color: darken(@orange, 10%);
277     }
278     // Success (green)
279     &-success {
280         background-color: @successText;
281     }
282     &-success[href] {
283         background-color: darken(@successText, 10%);
284     }
285     // Info (turquoise)
286     &-info {
287         background-color: @infoText;
288     }
289     &-info[href] {
290         background-color: darken(@infoText, 10%);
291     }
292     // Primary (blue)
293     &-primary {
294         background-color: @blue;
295     }
296     &-primary[href] {
297         background-color: darken(@blue, 10%);
298     }
301 .bg-faded {
302     background-color: @grayLighter;