Merge pull request #4202 from crazyserver/MOBILE-4598

MOBILE-4598 styles: Import Bootstrap 5 bridge styles from LMS

src/addons/mod/data/data.scss

@@ -25,7 +25,7 @@ $grid-column-paddings: (
     ::ng-deep {
 
         @import "theme/components/moodle.scss";
-        @import "theme/components/bootstrap/bootstrap_database.scss";
+        @import "theme/components/bootstrap/bootstrap.scss";
 
         table {
             display: block;

src/theme/components/bootstrap/_close.scss

@@ -0,0 +1,40 @@
+.close {
+  float: right;
+  @include font-size($close-font-size);
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  // Override <a>'s hover style
+  @include hover() {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+  pointer-events: none;
+}

src/theme/components/bootstrap/_utilities.scss

@@ -1,5 +1,7 @@
 @import "utilities/align";
 @import "utilities/borders";
 @import "utilities/flex";
+@import "utilities/float";
+@import "utilities/spacing";
 @import "utilities/text";
 @import "utilities/visibility";

src/theme/components/bootstrap/_variables.scss

@@ -155,6 +155,10 @@ $grid-row-columns:            6;
 //
 // Font, line-height, and color for body text, headings, and more.
 
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
@@ -215,3 +219,10 @@ $badge-pill-padding-x:              .6em;
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.
 $badge-pill-border-radius:          10rem;
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;

src/theme/components/bootstrap/bootstrap.scss

@@ -3,14 +3,28 @@
 // Bootstrap 4 Styles
 // -------------------------
 
-@import "reboot";
-@import "forms";
+@import "functions";
+@import "variables";
+@import "mixins";
 
+@import "reboot";
+
+@import "grid";
+@import "forms";
 @import "buttons";
+@import "card";
+@import "badge";
 @import "alert";
 @import "media";
+@import "close";
+
 @import "utilities";
 
+// Bootstrap 5 Styles
+// -------------------------
+@import "bs5-bridge";
+
+
 // Deprecated styles.
 .label {
     display: inline-block;

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

@@ -0,0 +1,109 @@
+/**
+ * This file should be in sync with: https://github.com/moodle/moodle/blob/main/theme/boost/scss/moodle/bs5-bridge.scss
+ * This is partially done as part of https://tracker.moodle.org/browse/MDL-71979.
+ */
+
+ /* Bootstrap 5 bridge classes */
+
+
+/*
+ * These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
+ * and will be located in __functions.scss in Bootstrap 5
+ */
+
+// Tint a color: mix a color with white based on the provided weight.
+@function tint-color($color, $weight) {
+    @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black.
+// This function darkens a given color with black based on the provided weight.
+@function shade-color($color, $weight) {
+    @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it.
+@function shift-color($color, $weight) {
+    @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+
+/* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
+/* This file should be removed as part of MDL-75669. */
+.g-0 {
+    @extend .no-gutters;
+}
+
+.btn-close {
+    @extend .close;
+}
+
+// Generate all spacer classes for all breakpoints for directions start and end.
+// ps-1 > pl-1, pe-1 > pr-1, me-sm-1 > ml-sm-1, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    @each $prop, $abbrev in (margin: m, padding: p) {
+        @each $size, $length in $spacers {
+            .#{$abbrev}s#{$infix}-#{$size} {
+                @extend .#{$abbrev}l#{$infix}-#{$size};
+            }
+            .#{$abbrev}e#{$infix}-#{$size} {
+                @extend .#{$abbrev}r#{$infix}-#{$size};
+            }
+        }
+    }
+}
+
+// Generate all margin auto classes for all breakpoints for directions start and end.
+// ps-auto > pl-auto, pe-auto > pr-auto, me-sm-auto > ml-sm-auto, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .ms#{$infix}-auto {
+        @extend .ml#{$infix}-auto;
+    }
+    .me#{$infix}-auto {
+        @extend .mr#{$infix}-auto;
+    }
+}
+
+// Generate all float classes for all breakpoints for directions start and end.
+// float-start > float-left, float-sm-end > float-sm-right, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .float#{$infix}-start {
+        @extend .float#{$infix}-left;
+    }
+    .float#{$infix}-end {
+        @extend .float#{$infix}-right;
+    }
+}
+
+// Generate all text classes for all breakpoints for directions start and end.
+// text-start > text-left, text-sm-end > text-sm-right, ...
+@each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .text#{$infix}-start {
+        @extend .text#{$infix}-left;
+    }
+    .text#{$infix}-end {
+        @extend .text#{$infix}-right;
+    }
+}
+
+.border-start {
+    @extend .border-left;
+}
+.border-end {
+    @extend .border-right;
+}
+.border-start-0 {
+    @extend .border-left-0;
+}
+.border-end-0 {
+    @extend .border-right-0;
+}
+.rounded-start {
+    @extend .rounded-left;
+}
+.rounded-end {
+    @extend .rounded-right;
+}

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

@@ -0,0 +1,11 @@
+// stylelint-disable declaration-no-important
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .float#{$infix}-left  { float: left !important; }
+    .float#{$infix}-right { float: right !important; }
+    .float#{$infix}-none  { float: none !important; }
+  }
+}

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

@@ -15,9 +15,15 @@
 
 // Responsive alignment
 
-.text-left   { text-align: left !important; }
-.text-right  { text-align: right !important; }
-.text-center { text-align: center !important; }
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
+  }
+}
 
 // Transformation