Merge branch 'MDL-62597-master' of https://github.com/HuongNV13/moodle
[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-0 {
29     padding: 0 !important;
30 }
31 .p-l-1 {
32     padding-left: 1 * @baseFontSize !important;
33 }
34 .p-r-1 {
35     padding-right: 1 * @baseFontSize !important;
36 }
37 .p-t-1 {
38     padding-top: 1 * @baseFontSize !important;
39 }
40 .p-b-1 {
41     padding-bottom: 1 * @baseFontSize !important;
42 }
43 .p-x-1 {
44     padding-left: 1 * @baseFontSize !important;
45     padding-right: 1 * @baseFontSize !important;
46 }
47 .p-y-1 {
48     padding-top: 1 * @baseFontSize !important;
49     padding-bottom: 1 * @baseFontSize !important;
50 }
51 .p-a-1 {
52     padding: 1 * @baseFontSize !important;
53 }
55 .m-0 {
56     margin: 0 !important;
57 }
59 .m-l-1 {
60     margin-left: 1 * @baseFontSize !important;
61 }
62 .m-r-1 {
63     margin-right: 1 * @baseFontSize !important;
64 }
65 .m-t-1 {
66     margin-top: 1 * @baseFontSize !important;
67 }
68 .m-b-1 {
69     margin-bottom: 1 * @baseFontSize !important;
70 }
71 .m-x-1 {
72     margin-left: 1 * @baseFontSize !important;
73     margin-right: 1 * @baseFontSize !important;
74 }
75 .m-y-1 {
76     margin-top: 1 * @baseFontSize !important;
77     margin-bottom: 1 * @baseFontSize !important;
78 }
79 .m-a-1 {
80     margin: 1 * @baseFontSize !important;
81 }
83 .p-l-2 {
84     padding-left: 2 * @baseFontSize !important;
85 }
86 .p-r-2 {
87     padding-right: 2 * @baseFontSize !important;
88 }
89 .p-t-2 {
90     padding-top: 2 * @baseFontSize !important;
91 }
92 .p-b-2 {
93     padding-bottom: 2 * @baseFontSize !important;
94 }
95 .p-x-2 {
96     padding-left: 2 * @baseFontSize !important;
97     padding-right: 2 * @baseFontSize !important;
98 }
99 .p-y-2 {
100     padding-top: 2 * @baseFontSize !important;
101     padding-bottom: 2 * @baseFontSize !important;
103 .p-a-2 {
104     padding: 2 * @baseFontSize !important;
107 .m-l-2 {
108     margin-left: 2 * @baseFontSize !important;
110 .m-r-2 {
111     margin-right: 2 * @baseFontSize !important;
113 .m-t-2 {
114     margin-top: 2 * @baseFontSize !important;
116 .m-b-2 {
117     margin-bottom: 2 * @baseFontSize !important;
119 .m-x-2 {
120     margin-left: 2 * @baseFontSize !important;
121     margin-right: 2 * @baseFontSize !important;
123 .m-y-2 {
124     margin-top: 2 * @baseFontSize !important;
125     margin-bottom: 2 * @baseFontSize !important;
127 .m-a-2 {
128     margin: 2 * @baseFontSize !important;
131 .p-l-3 {
132     padding-left: 3 * @baseFontSize !important;
134 .p-r-3 {
135     padding-right: 3 * @baseFontSize !important;
137 .p-t-3 {
138     padding-top: 3 * @baseFontSize !important;
140 .p-b-3 {
141     padding-bottom: 3 * @baseFontSize !important;
143 .p-x-3 {
144     padding-left: 3 * @baseFontSize !important;
145     padding-right: 3 * @baseFontSize !important;
147 .p-y-3 {
148     padding-top: 3 * @baseFontSize !important;
149     padding-bottom: 3 * @baseFontSize !important;
151 .p-a-3 {
152     padding: 3 * @baseFontSize !important;
155 .m-l-3 {
156     margin-left: 3 * @baseFontSize !important;
158 .m-r-3 {
159     margin-right: 3 * @baseFontSize !important;
161 .m-t-3 {
162     margin-top: 3 * @baseFontSize !important;
164 .m-b-3 {
165     margin-bottom: 3 * @baseFontSize !important;
167 .m-x-3 {
168     margin-left: 3 * @baseFontSize !important;
169     margin-right: 3 * @baseFontSize !important;
171 .m-y-3 {
172     margin-top: 3 * @baseFontSize !important;
173     margin-bottom: 3 * @baseFontSize !important;
175 .m-a-3 {
176     margin: 3 * @baseFontSize !important;
179 .d-inline {
180     display: inline !important;
182 .d-block {
183     display: block !important;
185 .d-inline-block {
186     display: inline-block !important;
189 // Horizontal centering.
190 .m-x-auto {
191     margin-left: auto !important;
192     margin-right: auto !important;
195 // Support img-fluid.
196 .img-fluid:extend(.img-responsive) {
199 // Text danger
200 .text-danger:extend(.text-error) {
203 .btn-secondary {
204     background-color: @white;
205     background-image: none;
206     color: @black;
209 // Tags
210 .tag:extend(.label) {
211     // Important (red)
212     &-danger {
213         background-color: @errorText;
214     }
215     &-danger[href] {
216         background-color: darken(@errorText, 10%);
217     }
218     // Warnings (orange)
219     &-warning {
220         background-color: @orange;
221     }
222     &-warning[href] {
223         background-color: darken(@orange, 10%);
224     }
225     // Success (green)
226     &-success {
227         background-color: @successText;
228     }
229     &-success[href] {
230         background-color: darken(@successText, 10%);
231     }
232     // Info (turquoise)
233     &-info {
234         background-color: @infoText;
235     }
236     &-info[href] {
237         background-color: darken(@infoText, 10%);
238     }
239     // Primary (blue)
240     &-primary {
241         background-color: @blue;
242     }
243     &-primary[href] {
244         background-color: darken(@blue, 10%);
245     }
248 // Floats
249 .pull-xs-left:extend(.pull-left) {
252 .pull-xs-right:extend(.pull-right) {
255 .text-nowrap {
256     white-space: nowrap !important;
259 .text-truncate {
260     overflow: hidden;
261     text-overflow: ellipsis;
262     white-space: nowrap;
265 .text-white {
266     color: @white;
269 // Bg utilities.
270 .bg {
271     // Important (red)
272     &-danger {
273         background-color: @errorText;
274     }
275     &-danger[href] {
276         background-color: darken(@errorText, 10%);
277     }
278     // Warnings (orange)
279     &-warning {
280         background-color: @orange;
281     }
282     &-warning[href] {
283         background-color: darken(@orange, 10%);
284     }
285     // Success (green)
286     &-success {
287         background-color: @successText;
288     }
289     &-success[href] {
290         background-color: darken(@successText, 10%);
291     }
292     // Info (turquoise)
293     &-info {
294         background-color: @infoText;
295     }
296     &-info[href] {
297         background-color: darken(@infoText, 10%);
298     }
299     // Primary (blue)
300     &-primary {
301         background-color: @blue;
302     }
303     &-primary[href] {
304         background-color: darken(@blue, 10%);
305     }
308 .bg-faded {
309     background-color: @grayLighter;
312 .w-100 {
313     width: 100%;