Skip to content

Commit 474b486

Browse files
crazyservercrazyserver
committed
MOBILE-4598 styles: Import Bootstrap 5 bridge styles from LMS
1 parent d63c06e commit 474b486

File tree

8 files changed

+198
-5
lines changed

8 files changed

+198
-5
lines changed

‎src/addons/mod/data/data.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $grid-column-paddings: (
2525
::ng-deep {
2626

2727
@import "theme/components/moodle.scss";
28-
@import "theme/components/bootstrap/bootstrap_database.scss";
28+
@import "theme/components/bootstrap/bootstrap.scss";
2929

3030
table {
3131
display: block;

‎src/theme/components/bootstrap/_close.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.close {
2+
float: right;
3+
@include font-size($close-font-size);
4+
font-weight: $close-font-weight;
5+
line-height: 1;
6+
color: $close-color;
7+
text-shadow: $close-text-shadow;
8+
opacity: .5;
9+
10+
// Override <a>'s hover style
11+
@include hover() {
12+
color: $close-color;
13+
text-decoration: none;
14+
}
15+
16+
&:not(:disabled):not(.disabled) {
17+
@include hover-focus() {
18+
opacity: .75;
19+
}
20+
}
21+
}
22+
23+
// Additional properties for button version
24+
// iOS requires the button element instead of an anchor tag.
25+
// If you want the anchor version, it requires `href="#"`.
26+
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
27+
28+
// stylelint-disable-next-line selector-no-qualifying-type
29+
button.close {
30+
padding: 0;
31+
background-color: transparent;
32+
border: 0;
33+
}
34+
35+
// Future-proof disabling of clicks on `<a>` elements
36+
37+
// stylelint-disable-next-line selector-no-qualifying-type
38+
a.close.disabled {
39+
pointer-events: none;
40+
}

‎src/theme/components/bootstrap/_utilities.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "utilities/align";
22
@import "utilities/borders";
33
@import "utilities/flex";
4+
@import "utilities/float";
5+
@import "utilities/spacing";
46
@import "utilities/text";
57
@import "utilities/visibility";

‎src/theme/components/bootstrap/_variables.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,10 @@ $grid-row-columns: 6;
155155
//
156156
// Font, line-height, and color for body text, headings, and more.
157157

158+
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
159+
$font-size-lg: $font-size-base * 1.25 !default;
160+
$font-size-sm: $font-size-base * .875 !default;
161+
158162
$font-weight-lighter: lighter !default;
159163
$font-weight-light: 300 !default;
160164
$font-weight-normal: 400 !default;
@@ -215,3 +219,10 @@ $badge-pill-padding-x: .6em;
215219
// Use a higher than normal value to ensure completely rounded edges when
216220
// customizing padding or font-size on labels.
217221
$badge-pill-border-radius: 10rem;
222+
223+
// Close
224+
225+
$close-font-size: $font-size-base * 1.5 !default;
226+
$close-font-weight: $font-weight-bold !default;
227+
$close-color: $black !default;
228+
$close-text-shadow: 0 1px 0 $white !default;

‎src/theme/components/bootstrap/bootstrap.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,28 @@
33
// Bootstrap 4 Styles
44
// -------------------------
55

6+
@import "functions";
7+
@import "variables";
8+
@import "mixins";
9+
610
@import "reboot";
7-
@import "forms";
811

12+
@import "grid";
13+
@import "forms";
914
@import "buttons";
15+
@import "card";
16+
@import "badge";
1017
@import "alert";
1118
@import "media";
19+
@import "close";
20+
1221
@import "utilities";
1322

23+
// Bootstrap 5 Styles
24+
// -------------------------
25+
@import "bs5-bridge";
26+
27+
1428
// Deprecated styles.
1529
.label {
1630
display: inline-block;

‎src/theme/components/bootstrap/bs5-bridge.scss‎

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

‎src/theme/components/bootstrap/utilities/_float.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// stylelint-disable declaration-no-important
2+
3+
@each $breakpoint in map-keys($grid-breakpoints) {
4+
@include media-breakpoint-up($breakpoint) {
5+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
6+
7+
.float#{$infix}-left { float: left !important; }
8+
.float#{$infix}-right { float: right !important; }
9+
.float#{$infix}-none { float: none !important; }
10+
}
11+
}

‎src/theme/components/bootstrap/utilities/_text.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,15 @@
1515

1616
// Responsive alignment
1717

18-
.text-left { text-align: left !important; }
19-
.text-right { text-align: right !important; }
20-
.text-center { text-align: center !important; }
18+
@each $breakpoint in map-keys($grid-breakpoints) {
19+
@include media-breakpoint-up($breakpoint) {
20+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
21+
22+
.text#{$infix}-left { text-align: left !important; }
23+
.text#{$infix}-right { text-align: right !important; }
24+
.text#{$infix}-center { text-align: center !important; }
25+
}
26+
}
2127

2228
// Transformation
2329

0 commit comments

Comments
 (0)