MDL-56889 bootstrapbase: create static bs4 compatible mixins
[moodle.git] / theme / bootstrapbase / less / moodle / bs4-compat.less
2 // Add support for card. We map it to well.
3 // This is not meant to be perfect - but at least applies some styles to a bs4 card.
4 .card:extend(.well) {
5     /* stylelint-disable-line no-empty-source */
6 }
8 // Due to lessphp limitations, the following classes must be declared statically without use of a loop.
9 .p-l-1 {
10     padding-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
11 }
12 .p-r-1 {
13     padding-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
14 }
15 .p-t-1 {
16     padding-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
17 }
18 .p-b-1 {
19     padding-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
20 }
21 .p-x-1 {
22     padding-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
23     padding-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
24 }
25 .p-y-1 {
26     padding-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
27     padding-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
28 }
29 .p-a-1 {
30     padding: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
31 }
33 .m-l-1 {
34     margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
35 }
36 .m-r-1 {
37     margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
38 }
39 .m-t-1 {
40     margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
41 }
42 .m-b-1 {
43     margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
44 }
45 .m-x-1 {
46     margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
47     margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
48 }
49 .m-y-1 {
50     margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
51     margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
52 }
53 .m-a-1 {
54     margin: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
55 }
57 .p-l-2 {
58     padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
59 }
60 .p-r-2 {
61     padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
62 }
63 .p-t-2 {
64     padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
65 }
66 .p-b-2 {
67     padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
68 }
69 .p-x-2 {
70     padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
71     padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
72 }
73 .p-y-2 {
74     padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
75     padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
76 }
77 .p-a-2 {
78     padding: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
79 }
81 .m-l-2 {
82     margin-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
83 }
84 .m-r-2 {
85     margin-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
86 }
87 .m-t-2 {
88     margin-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
89 }
90 .m-b-2 {
91     margin-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
92 }
93 .m-x-2 {
94     margin-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
95     margin-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
96 }
97 .m-y-2 {
98     margin-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
99     margin-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
101 .m-a-2 {
102     margin: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
105 .p-l-3 {
106     padding-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
108 .p-r-3 {
109     padding-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
111 .p-t-3 {
112     padding-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
114 .p-b-3 {
115     padding-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
117 .p-x-3 {
118     padding-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
119     padding-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
121 .p-y-3 {
122     padding-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
123     padding-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
125 .p-a-3 {
126     padding: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
129 .m-l-3 {
130     margin-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
132 .m-r-3 {
133     margin-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
135 .m-t-3 {
136     margin-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
138 .m-b-3 {
139     margin-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
141 .m-x-3 {
142     margin-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
143     margin-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
145 .m-y-3 {
146     margin-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
147     margin-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
149 .m-a-3 {
150     margin: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
153 .d-inline {
154     display: inline !important; /* stylelint-disable-line declaration-no-important */
156 .d-block {
157     display: block !important; /* stylelint-disable-line declaration-no-important */
159 .d-inline-block {
160     display: inline-block !important; /* stylelint-disable-line declaration-no-important */
163 // Horizontal centering.
164 .m-x-auto {
165     margin-left: auto !important; /* stylelint-disable-line declaration-no-important */
166     margin-right: auto !important; /* stylelint-disable-line declaration-no-important */
169 // Support img-fluid.
170 .img-fluid:extend(.img-responsive) {
171     /* stylelint-disable-line no-empty-source */
174 // Text danger
175 .text-danger:extend(.text-error) {
176     /* stylelint-disable-line no-empty-source */
179 .btn-secondary {
180     background-color: @white;
181     background-image: none;
182     color: @black;
185 // Tags
186 .tag:extend(.label) {
187     // Important (red)
188     &-danger {
189         background-color: @errorText;
190     }
191     &-danger[href] {
192         background-color: darken(@errorText, 10%);
193     }
194     // Warnings (orange)
195     &-warning {
196         background-color: @orange;
197     }
198     &-warning[href] {
199         background-color: darken(@orange, 10%);
200     }
201     // Success (green)
202     &-success {
203         background-color: @successText;
204     }
205     &-success[href] {
206         background-color: darken(@successText, 10%);
207     }
208     // Info (turquoise)
209     &-info {
210         background-color: @infoText;
211     }
212     &-info[href] {
213         background-color: darken(@infoText, 10%);
214     }
215     // Primary (blue)
216     &-primary {
217         background-color: @blue;
218     }
219     &-primary[href] {
220         background-color: darken(@blue, 10%);
221     }
224 // Floats
225 .pull-xs-left:extend(.pull-left) {
226     /* stylelint-disable-line no-empty-source */
229 .pull-xs-right:extend(.pull-right) {
230     /* stylelint-disable-line no-empty-source */
233 .text-nowrap {
234     white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */