Issue #3144 - Upgrade to Bootstrap 5 #3374
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,8 @@ | ||
| // Import locally defined variables. Load this before 'bootstrap' | ||
| @use "variables"; | ||
|
|
||
| // Pull in the webpacker managed copy of Bootstrap Stylesheets | ||
|
Contributor
There was a problem hiding this comment. We may be able to simplify all of the node_modules imports within .scss files. We're using the How do I include 3rd party stylesheets from node_modules in my bundle?
/* Desired file is at at node_modules/select2/dist/css/select2.css */
@import "select2/dist/css/select2"; |
||
| @import "../../../node_modules/bootstrap/scss/bootstrap"; | ||
| @import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss"; | ||
|
|
||
| // Pull in the webapcker managed copy of JQuery-UI Stylesheets | ||
|
|
@@ -19,3 +15,27 @@ $fa-font-path: '.'; | |
| // @import '@fortawesome/fontawesome-free/scss/brands'; | ||
| @import '@fortawesome/fontawesome-free/scss/regular'; | ||
| @import '@fortawesome/fontawesome-free/scss/solid'; | ||
|
|
||
| // Custom.scss | ||
| // Option B: Include parts of Bootstrap | ||
|
|
||
| // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) | ||
| @import "../../../node_modules/bootstrap/scss/functions"; | ||
|
|
||
| // 2. Include any default variable overrides here | ||
|
|
||
| // 3. Include remainder of required Bootstrap stylesheets | ||
| @import "../../../node_modules/bootstrap/scss/variables"; | ||
| @import "../../../node_modules/bootstrap/scss/mixins"; | ||
|
|
||
| // 4. Include any optional Bootstrap components as you like | ||
| @import "../../../node_modules/bootstrap/scss/root"; | ||
| @import "../../../node_modules/bootstrap/scss/reboot"; | ||
| @import "../../../node_modules/bootstrap/scss/type"; | ||
| @import "../../../node_modules/bootstrap/scss/images"; | ||
| @import "../../../node_modules/bootstrap/scss/containers"; | ||
| @import "../../../node_modules/bootstrap/scss/grid"; | ||
|
Contributor
There was a problem hiding this comment. I think the overriding of bootstrap variables is working as it should here (this seems to solve some issues I'm encountering while merging release However, there may be some redundant import statements here. https://getbootstrap.com/docs/5.0/customize/sass/#importing states "You have two options: include all of Bootstrap, or pick the parts you need." I think we may be unnecessarily be adding both options. e.g. @import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid"; |
||
|
|
||
| //Importing customised stylesheets after Bootstrap defaults | ||
| @import "blocks"; | ||
|
Contributor
There was a problem hiding this comment. Not really due to this PR, but I noticed that the following ends up being added to @font-face {
font-family: 'GillSansLight';
src: url(asset-path('GillSans-Light.ttf')) format("truetype");
font-weight: normal;
}This code comes from |
||
| @import "utils"; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| @use '../variables/colours' as *; | ||
|
|
||
| @import "../../../../node_modules/bootstrap/scss/functions"; | ||
| @import "../../../../node_modules/bootstrap/scss/variables"; | ||
|
|
||
|
|
||
| // An explanation of how we change the Bootstrap arrow icon for the accordion to use the fontawesome icons. | ||
| // First we get the fontawesome plus.svg and minus.svg for use in background image from: | ||
| // node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg (in .accordion-button.collapsed::after) | ||
| // node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg | ||
| // We then encode the svg. | ||
| // Next the svg fill attribute is added with color set by a variable $color-accordion-button-icon in the _colours.scss. | ||
| // This allows us to change color of symbols. | ||
| // "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}' | ||
| // SVG we are using are encoded with fill added as fill='#{$color-accordion-button-icon}': | ||
| // After encoding # symbols in svg with the unicode %23. Hence the use of the replace function. | ||
| // We could have done this without str-replace by adding encoded fill='%23{$color-accordion-button-icon}'. | ||
| // Example of process for version Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). | ||
| // Get svgs | ||
| // node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg: | ||
| // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg> | ||
| // Encode using a "URL-encoder for SVG" like https://yoksel.github.io/url-encoder/ | ||
| // %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E | ||
| // Repeat for | ||
| // node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg | ||
| // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg> | ||
| // Encode using a "URL-encoder for SVG" | ||
| // %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E? | ||
| // We now use svgs as the background-image for the .accordion-button class as follows leaving a space. | ||
| // After viewBox='0 0 448 512' we add fill='#{$color-accordion-button-icon}' as follows: | ||
| // For node_modules/@fortawesome/fontawesome-free/svgs/solid/plus.svg: | ||
| // %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E | ||
| // node_modules/@fortawesome/fontawesome-free/svgs/solid/minus.svg: | ||
| // %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E?? | ||
| // Now add to scss with a str-replace javascript function (which replaces '#' with '%23' after evaluation of #{$color-accordion-button-icon}. | ||
| // background-image: str-replace(url("data:image/svg+xml, ENCODED_SVG, , '#', '%23'); | ||
|
|
||
| // Change when fontawesome library upgraded. Using Font Awesome Free 6.4.0 (node_modules/@fortawesome/fontawesome-free). See above explanation on how it is done. | ||
| .accordion-button::after, .accordion-button.collapsed::after { | ||
| background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E"), '#', '%23'); | ||
| } | ||
|
|
||
| .accordion-button:not(.collapsed)::after { | ||
| background-image: str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='#{$color-accordion-button-icon}'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"), '#', '%23'); | ||
| transition: all 0.5s; | ||
| } | ||
|
|
||
|
|
||
| // // move fa-arrows-alt to right | ||
| h2.accordion-header { | ||
| display: flex; | ||
| align-items: center; | ||
| color: $color-accordion-button; | ||
| background-color: $color-accordion-button-bg; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| h2.accordion-header > a.i { | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| // Remove box-shadow and highlight from Accordion button | ||
| a.accordion-button, | ||
| a.accordion-button.collapsed, | ||
| a.accordion-button:not(.collapsed), | ||
| a.accordion-button:hover, | ||
| a.accordion-button:active, | ||
| a.accordion-button:focus, | ||
| a.accordion-button:focus-visible, | ||
| button.accordion-button.collapsed, | ||
| button.accordion-button:not(.collapsed), | ||
| button.accordion-button, | ||
| button.accordion-button:hover, | ||
| button.accordion-button:active, | ||
| button.accordion-button:focus, | ||
| button.accordion-button:focus-visible { | ||
| color: $color-accordion-button; | ||
| background-color: $color-accordion-button-bg; | ||
| text-decoration: none !important; | ||
| box-shadow: none !important; | ||
| outline: none !important; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I need to learn more about the SASS rules, but I worry about this being
@use "variables";, rather than@use "variables" as *;(or maybe@import "variables";)I think we want our
$link-decoration: none !default;to override the Bootstrap default.I ran
rake assets:clobber && rake assets:precompilewith@use "variables";and commited the changes.Next, I ran
rake assets:clobber && rake assets:precompilewith@use "variables" as *;. Here are some of the resultant differences inapp/assets/builds/application.css(it looks like some of those Bootstrap overrides were being missed):There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CHANGELOG.md mentions "Links are underlined by default (not just on hover), unless they're part of specific components. So we had to add css to remove underline in many cases."
If we implement the above change, maybe we can remove the extra css that was added to handle the underlines?