Commit 660b51e0 authored by Simey Lameze's avatar Simey Lameze Committed by Dan Poltawski
Browse files

MDL-56889 bootstrapbase: create static bs4 compatible mixins

parent b4d6669d
......@@ -5,59 +5,149 @@
/* 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 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment