MDL-56889 bootstrapbase: create static bs4 compatible mixins
[moodle.git] / theme / bootstrapbase / less / moodle / bs4-compat.less
CommitLineData
fe4a6c3b
DW
1
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}
7
660b51e0
SL
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}
32
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}
56
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}
fe4a6c3b 80
660b51e0
SL
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 */
100}
101.m-a-2 {
102 margin: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
103}
104
105.p-l-3 {
106 padding-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
107}
108.p-r-3 {
109 padding-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
110}
111.p-t-3 {
112 padding-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
113}
114.p-b-3 {
115 padding-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
116}
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 */
120}
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 */
124}
125.p-a-3 {
126 padding: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
127}
fe4a6c3b 128
660b51e0
SL
129.m-l-3 {
130 margin-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
131}
132.m-r-3 {
133 margin-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
134}
135.m-t-3 {
136 margin-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
137}
138.m-b-3 {
139 margin-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
140}
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 */
144}
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 */
148}
149.m-a-3 {
150 margin: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
fe4a6c3b
DW
151}
152
153.d-inline {
154 display: inline !important; /* stylelint-disable-line declaration-no-important */
155}
156.d-block {
157 display: block !important; /* stylelint-disable-line declaration-no-important */
158}
159.d-inline-block {
160 display: inline-block !important; /* stylelint-disable-line declaration-no-important */
161}
162
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 */
167}
168
169// Support img-fluid.
170.img-fluid:extend(.img-responsive) {
171 /* stylelint-disable-line no-empty-source */
172}
173
174// Text danger
175.text-danger:extend(.text-error) {
176 /* stylelint-disable-line no-empty-source */
177}
178
179.btn-secondary {
180 background-color: @white;
181 background-image: none;
182 color: @black;
183}
184
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 }
222}
223
224// Floats
225.pull-xs-left:extend(.pull-left) {
226 /* stylelint-disable-line no-empty-source */
227}
228
229.pull-xs-right:extend(.pull-right) {
230 /* stylelint-disable-line no-empty-source */
231}
a2d9a89f
DW
232
233.text-nowrap {
234 white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
235}