| 1441 |
ariadna |
1 |
/* Bootstrap 5 bridge classes */
|
|
|
2 |
|
|
|
3 |
/*
|
|
|
4 |
* These variables used to bridge the gap between Bootstrap 4 and Bootstrap 5 for
|
|
|
5 |
* alert and list-group-item.
|
|
|
6 |
*/
|
|
|
7 |
|
|
|
8 |
// Reduces the background color intensity by 80%. This is the definition in BS5.
|
|
|
9 |
$alert-bg-scale: -80% !default;
|
|
|
10 |
// Reduces the border color intensity by 70%. This is the definition in BS5.
|
|
|
11 |
$alert-border-scale: -70% !default;
|
|
|
12 |
// Increases the text color intensity by 50%. This is the definition in BS5.
|
|
|
13 |
$alert-color-scale: 50% !default;
|
|
|
14 |
|
|
|
15 |
/*
|
|
|
16 |
* These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
|
|
|
17 |
* and will be located in __functions.scss in Bootstrap 5
|
|
|
18 |
* This file should be removed as part of MDL-75669.
|
|
|
19 |
*/
|
|
|
20 |
|
|
|
21 |
// Tint a color: mix a color with white based on the provided weight.
|
|
|
22 |
@function tint-color($color, $weight) {
|
|
|
23 |
@return mix(white, $color, $weight);
|
|
|
24 |
}
|
|
|
25 |
|
|
|
26 |
// Shade a color: mix a color with black.
|
|
|
27 |
// This function darkens a given color with black based on the provided weight.
|
|
|
28 |
@function shade-color($color, $weight) {
|
|
|
29 |
@return mix(black, $color, $weight);
|
|
|
30 |
}
|
|
|
31 |
|
|
|
32 |
// Shade the color if the weight is positive, else tint it.
|
|
|
33 |
@function shift-color($color, $weight) {
|
|
|
34 |
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
|
|
|
35 |
}
|
|
|
36 |
|
|
|
37 |
/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
|
|
|
38 |
/* This file should be removed as part of MDL-75669. */
|
|
|
39 |
.g-0 {
|
|
|
40 |
@extend .no-gutters;
|
|
|
41 |
}
|
|
|
42 |
|
|
|
43 |
.btn-close {
|
|
|
44 |
@extend .close;
|
|
|
45 |
}
|
|
|
46 |
|
|
|
47 |
// Generate all spacer classes for all breakpoints for directions start and end.
|
|
|
48 |
// ps-1 > pl-1, pe-1 > pr-1, me-sm-1 > ml-sm-1, ...
|
|
|
49 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
50 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
51 |
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
|
52 |
@each $size, $length in $spacers {
|
|
|
53 |
.#{$abbrev}s#{$infix}-#{$size} {
|
|
|
54 |
@extend .#{$abbrev}l#{$infix}-#{$size};
|
|
|
55 |
}
|
|
|
56 |
.#{$abbrev}e#{$infix}-#{$size} {
|
|
|
57 |
@extend .#{$abbrev}r#{$infix}-#{$size};
|
|
|
58 |
}
|
|
|
59 |
}
|
|
|
60 |
}
|
|
|
61 |
}
|
|
|
62 |
|
|
|
63 |
// Generate all margin auto classes for all breakpoints for directions start and end.
|
|
|
64 |
// ps-auto > pl-auto, pe-auto > pr-auto, me-sm-auto > ml-sm-auto, ...
|
|
|
65 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
66 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
67 |
.ms#{$infix}-auto {
|
|
|
68 |
@extend .ml#{$infix}-auto;
|
|
|
69 |
}
|
|
|
70 |
.me#{$infix}-auto {
|
|
|
71 |
@extend .mr#{$infix}-auto;
|
|
|
72 |
}
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
// Generate all float classes for all breakpoints for directions start and end.
|
|
|
76 |
// float-start > float-left, float-sm-end > float-sm-right, ...
|
|
|
77 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
78 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
79 |
.float#{$infix}-start {
|
|
|
80 |
@extend .float#{$infix}-left;
|
|
|
81 |
}
|
|
|
82 |
.float#{$infix}-end {
|
|
|
83 |
@extend .float#{$infix}-right;
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
|
|
|
87 |
// Generate all text classes for all breakpoints for directions start and end.
|
|
|
88 |
// text-start > text-left, text-sm-end > text-sm-right, ...
|
|
|
89 |
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
90 |
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
91 |
.text#{$infix}-start {
|
|
|
92 |
@extend .text#{$infix}-left;
|
|
|
93 |
}
|
|
|
94 |
.text#{$infix}-end {
|
|
|
95 |
@extend .text#{$infix}-right;
|
|
|
96 |
}
|
|
|
97 |
}
|
|
|
98 |
|
|
|
99 |
.border-start {
|
|
|
100 |
@extend .border-left;
|
|
|
101 |
}
|
|
|
102 |
.border-end {
|
|
|
103 |
@extend .border-right;
|
|
|
104 |
}
|
|
|
105 |
.border-start-0 {
|
|
|
106 |
@extend .border-left-0;
|
|
|
107 |
}
|
|
|
108 |
.border-end-0 {
|
|
|
109 |
@extend .border-right-0;
|
|
|
110 |
}
|
|
|
111 |
.rounded-start {
|
|
|
112 |
@extend .rounded-left;
|
|
|
113 |
}
|
|
|
114 |
.rounded-end {
|
|
|
115 |
@extend .rounded-right;
|
|
|
116 |
}
|