on-demand release 3.2beta+
[moodle.git] / theme / bootstrapbase / less / moodle / bs4-compat.less
2 // Add support for card. We map it to well.
3 // This is not meant to be perfect - but at least applies some styles to a bs4 card.
4 .card:extend(.well) {
5     /* stylelint-disable-line no-empty-source */
6 }
8 // Padding and margin utitilies.
9 .padding-margin(3);
11 .padding-margin(@n, @i : 1) when (@i =< @n) {
12     @amount: @i * @baseFontSize;
13     .p-l-@{i} {
14         padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
15     }
16     .p-r-@{i} {
17         padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
18     }
19     .p-t-@{i} {
20         padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
21     }
22     .p-b-@{i} {
23         padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
24     }
25     .p-x-@{i} {
26         padding-left: @amount !important; /* stylelint-disable-line declaration-no-important */
27         padding-right: @amount !important; /* stylelint-disable-line declaration-no-important */
28     }
29     .p-y-@{i} {
30         padding-top: @amount !important; /* stylelint-disable-line declaration-no-important */
31         padding-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
32     }
33     .p-a-@{i} {
34         padding: @amount !important; /* stylelint-disable-line declaration-no-important */
35     }
37     .m-l-@{i} {
38         margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
39     }
40     .m-r-@{i} {
41         margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
42     }
43     .m-t-@{i} {
44         margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
45     }
46     .m-b-@{i} {
47         margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
48     }
49     .m-x-@{i} {
50         margin-left: @amount !important; /* stylelint-disable-line declaration-no-important */
51         margin-right: @amount !important; /* stylelint-disable-line declaration-no-important */
52     }
53     .m-y-@{i} {
54         margin-top: @amount !important; /* stylelint-disable-line declaration-no-important */
55         margin-bottom: @amount !important; /* stylelint-disable-line declaration-no-important */
56     }
57     .m-a-@{i} {
58         margin: @amount !important; /* stylelint-disable-line declaration-no-important */
59     }
60     .padding-margin(@n, (@i + 1));
61 }
63 .d-inline {
64     display: inline !important; /* stylelint-disable-line declaration-no-important */
65 }
66 .d-block {
67     display: block !important; /* stylelint-disable-line declaration-no-important */
68 }
69 .d-inline-block {
70     display: inline-block !important; /* stylelint-disable-line declaration-no-important */
71 }
73 // Horizontal centering.
74 .m-x-auto {
75     margin-left: auto !important; /* stylelint-disable-line declaration-no-important */
76     margin-right: auto !important; /* stylelint-disable-line declaration-no-important */
77 }
79 // Support img-fluid.
80 .img-fluid:extend(.img-responsive) {
81     /* stylelint-disable-line no-empty-source */
82 }
84 // Text danger
85 .text-danger:extend(.text-error) {
86     /* stylelint-disable-line no-empty-source */
87 }
89 .btn-secondary {
90     background-color: @white;
91     background-image: none;
92     color: @black;
93 }
95 // Tags
96 .tag:extend(.label) {
97     // Important (red)
98     &-danger {
99         background-color: @errorText;
100     }
101     &-danger[href] {
102         background-color: darken(@errorText, 10%);
103     }
104     // Warnings (orange)
105     &-warning {
106         background-color: @orange;
107     }
108     &-warning[href] {
109         background-color: darken(@orange, 10%);
110     }
111     // Success (green)
112     &-success {
113         background-color: @successText;
114     }
115     &-success[href] {
116         background-color: darken(@successText, 10%);
117     }
118     // Info (turquoise)
119     &-info {
120         background-color: @infoText;
121     }
122     &-info[href] {
123         background-color: darken(@infoText, 10%);
124     }
125     // Primary (blue)
126     &-primary {
127         background-color: @blue;
128     }
129     &-primary[href] {
130         background-color: darken(@blue, 10%);
131     }
134 // Floats
135 .pull-xs-left:extend(.pull-left) {
136     /* stylelint-disable-line no-empty-source */
139 .pull-xs-right:extend(.pull-right) {
140     /* stylelint-disable-line no-empty-source */
143 .text-nowrap {
144     white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */