From 660b51e013fc17c93c5acf502a3fee4e5d7547be Mon Sep 17 00:00:00 2001 From: Simey Lameze Date: Wed, 16 Nov 2016 13:30:39 +0800 Subject: [PATCH] MDL-56889 bootstrapbase: create static bs4 compatible mixins --- .../bootstrapbase/less/moodle/bs4-compat.less | 192 +++++++++++++----- 1 file changed, 141 insertions(+), 51 deletions(-) diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less index 21be34b806d..1d324c71e49 100644 --- a/theme/bootstrapbase/less/moodle/bs4-compat.less +++ b/theme/bootstrapbase/less/moodle/bs4-compat.less @@ -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 { -- 2.36.1