MDL-56889 bootstrapbase: create static bs4 compatible mixins
[moodle.git] / theme / bootstrapbase / less / moodle / bs4-compat.less
index 21be34b..1d324c7 100644 (file)
     /* stylelint-disable-line no-empty-source */
 }
 
-// Padding and margin utitilies.
-.padding-margin(3);
+// Due to lessphp limitations, the following classes must be declared statically without use of a loop.
+.p-l-1 {
+    padding-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-r-1 {
+    padding-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-t-1 {
+    padding-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-b-1 {
+    padding-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-x-1 {
+    padding-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-y-1 {
+    padding-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-a-1 {
+    padding: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
 
-.padding-margin(@n, @i : 1) when (@i =< @n) {
-    @amount: @i * @baseFontSize;
-    .p-l-@{i} {
-        padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-r-@{i} {
-        padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-t-@{i} {
-        padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-b-@{i} {
-        padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-x-@{i} {
-        padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
-        padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-y-@{i} {
-        padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
-        padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .p-a-@{i} {
-        padding: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
+.m-l-1 {
+    margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-r-1 {
+    margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-t-1 {
+    margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-b-1 {
+    margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-x-1 {
+    margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-y-1 {
+    margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-a-1 {
+    margin: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
 
-    .m-l-@{i} {
-        margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-r-@{i} {
-        margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-t-@{i} {
-        margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-b-@{i} {
-        margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-x-@{i} {
-        margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
-        margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-y-@{i} {
-        margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
-        margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .m-a-@{i} {
-        margin: @amount !important; /* stylelint-disable-line declaration-no-important */
-    }
-    .padding-margin(@n, (@i + 1));
+.p-l-2 {
+    padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-r-2 {
+    padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-t-2 {
+    padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-b-2 {
+    padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-x-2 {
+    padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-y-2 {
+    padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-a-2 {
+    padding: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.m-l-2 {
+    margin-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-r-2 {
+    margin-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-t-2 {
+    margin-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-b-2 {
+    margin-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-x-2 {
+    margin-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-y-2 {
+    margin-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-a-2 {
+    margin: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.p-l-3 {
+    padding-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-r-3 {
+    padding-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-t-3 {
+    padding-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-b-3 {
+    padding-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-x-3 {
+    padding-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-y-3 {
+    padding-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    padding-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.p-a-3 {
+    padding: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.m-l-3 {
+    margin-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-r-3 {
+    margin-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-t-3 {
+    margin-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-b-3 {
+    margin-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-x-3 {
+    margin-left: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-right: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-y-3 {
+    margin-top: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+    margin-bottom: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
+}
+.m-a-3 {
+    margin: 3 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .d-inline {