MOBILE-4653 bootstrap: Sync bs5-bridge file

main
Pau Ferrer Ocaña 2024-12-16 14:15:37 +01:00 committed by Dani Palou
parent 20a39bbcb5
commit b85c1993f4
2 changed files with 59 additions and 1 deletions

View File

@ -2,6 +2,7 @@
@import "utilities/borders";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

View File

@ -5,10 +5,22 @@
/* Bootstrap 5 bridge classes */
/*
* These variables used to bridge the gap between Bootstrap 4 and Bootstrap 5 for
* alert and list-group-item.
*/
// Reduces the background color intensity by 80%. This is the definition in BS5.
$alert-bg-scale: -80% !default;
// Reduces the border color intensity by 70%. This is the definition in BS5.
$alert-border-scale: -70% !default;
// Increases the text color intensity by 50%. This is the definition in BS5.
$alert-color-scale: 50% !default;
/*
* These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
* and will be located in __functions.scss in Bootstrap 5
* This file should be removed as part of MDL-75669.
*/
// Tint a color: mix a color with white based on the provided weight.
@ -27,6 +39,15 @@
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// Visually hidden mixins
@mixin visually-hidden() {
@include sr-only();
}
@mixin visually-hidden-focusable() {
@include sr-only-focusable();
}
/* 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 {
@ -107,3 +128,39 @@
.rounded-end {
@extend .rounded-right;
}
// Generate sized rounded classes.
.rounded-1 {
@extend .rounded-sm;
}
.rounded-3 {
@extend .rounded-lg;
}
// Generate all font-weight and font-style classes.
.fw-light {
@extend .font-weight-light;
}
.fw-lighter {
@extend .font-weight-lighter;
}
.fw-normal {
@extend .font-weight-normal;
}
.fw-bold {
@extend .font-weight-bold;
}
.fw-bolder {
@extend .font-weight-bolder;
}
.fst-italic {
@extend .font-italic;
}
// Generate visually-hidden classes.
.visually-hidden {
@extend .sr-only;
}
.visually-hidden-focusable {
@extend .sr-only-focusable;
}