mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 08:56:36 +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 */
|
||||
}
|
||||
|
||||
// Padding and margin utitilies.
|
||||
.padding-margin(3);
|
||||
|
||||
.padding-margin(@n, @i : 1) when (@i =< @n) {
|
||||
@amount: @i * @baseFontSize;
|
||||
.p-l-@{i} {
|
||||
padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
// 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-@{i} {
|
||||
padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.p-r-1 {
|
||||
padding-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
.p-t-@{i} {
|
||||
padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.p-t-1 {
|
||||
padding-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
.p-b-@{i} {
|
||||
padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.p-b-1 {
|
||||
padding-bottom: 1 * @baseFontSize !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-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-@{i} {
|
||||
padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
padding-bottom: @amount !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-@{i} {
|
||||
padding: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.p-a-1 {
|
||||
padding: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.m-l-@{i} {
|
||||
margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.m-l-1 {
|
||||
margin-left: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
.m-r-@{i} {
|
||||
margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.m-r-1 {
|
||||
margin-right: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
.m-t-@{i} {
|
||||
margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.m-t-1 {
|
||||
margin-top: 1 * @baseFontSize !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
.m-b-@{i} {
|
||||
margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.m-b-1 {
|
||||
margin-bottom: 1 * @baseFontSize !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-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-@{i} {
|
||||
margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
margin-bottom: @amount !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-@{i} {
|
||||
margin: @amount !important; /* stylelint-disable-line declaration-no-important */
|
||||
.m-a-1 {
|
||||
margin: 1 * @baseFontSize !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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue