mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 17:06:53 +02:00
MDL-56889 bootstrapbase: create static bs4 compatible mixins
This commit is contained in:
Simey Lameze
Dan Poltawski
parent
b4d6669dd0
commit
660b51e013
1 changed files with 141 additions and 51 deletions
|
|
@ -5,59 +5,149 @@
|
||||||
/* stylelint-disable-line no-empty-source */
|
/* stylelint-disable-line no-empty-source */
|
||||||
}
|
}
|
||||||
|
|
||||||
// Padding and margin utitilies.
|
// Due to lessphp limitations, the following classes must be declared statically without use of a loop.
|
||||||
.padding-margin(3);
|
.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) {
|
.m-l-1 {
|
||||||
@amount: @i * @baseFontSize;
|
margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-l-@{i} {
|
}
|
||||||
padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-r-1 {
|
||||||
}
|
margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-r-@{i} {
|
}
|
||||||
padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-t-1 {
|
||||||
}
|
margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-t-@{i} {
|
}
|
||||||
padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-b-1 {
|
||||||
}
|
margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-b-@{i} {
|
}
|
||||||
padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-x-1 {
|
||||||
}
|
margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-x-@{i} {
|
margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
}
|
||||||
padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-y-1 {
|
||||||
}
|
margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-y-@{i} {
|
margin-bottom: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
}
|
||||||
padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
.m-a-1 {
|
||||||
}
|
margin: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
.p-a-@{i} {
|
}
|
||||||
padding: @amount !important; /* stylelint-disable-line declaration-no-important */
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-l-@{i} {
|
.p-l-2 {
|
||||||
margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-r-@{i} {
|
.p-r-2 {
|
||||||
margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-t-@{i} {
|
.p-t-2 {
|
||||||
margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-b-@{i} {
|
.p-b-2 {
|
||||||
margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-x-@{i} {
|
.p-x-2 {
|
||||||
margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-left: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-right: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-y-@{i} {
|
.p-y-2 {
|
||||||
margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-top: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding-bottom: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.m-a-@{i} {
|
.p-a-2 {
|
||||||
margin: @amount !important; /* stylelint-disable-line declaration-no-important */
|
padding: 2 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||||
}
|
}
|
||||||
.padding-margin(@n, (@i + 1));
|
|
||||||
|
.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 {
|
.d-inline {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue