Issue #3144 - first official commit for upgrade to Bootstrap 5

app/assets/stylesheets/application.scss

@@ -1,12 +1,8 @@
 // Import locally defined variables. Load this before 'bootstrap'
-
 @use "variables";
 
-@use "blocks";
-@use "utils";
-
 // Pull in the webpacker managed copy of Bootstrap Stylesheets
-@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@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";
+
+//Importing customised stylesheets after Bootstrap defaults
+@import "blocks";
+@import "utils";

app/assets/stylesheets/blocks/_accordion.scss

@@ -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 footawesome 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;
+}

app/assets/stylesheets/blocks/_buttons.scss

@@ -1,10 +1,6 @@
 @use '../variables/colours' as *;
 // Bootstrap overrides
 
-.btn {
-  border-radius: 0px;
-}
-
 /* primary button */
 .btn-primary,
 .btn-primary:hover,
@@ -19,6 +15,7 @@
   outline: none;
   margin-top: 5px;
   margin-bottom: 10px;
+  border-radius: 0rem;
 }
 
 /* default button */
@@ -35,6 +32,9 @@
   outline: none;
   margin-top: 5px;
   margin-bottom: 10px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 0rem;
 }
 
 /* Popover button */
@@ -52,6 +52,13 @@
 }
 
 /* link button */
-.btn-link {
+.btn-link, .btn-close {
   color: $color-link-text;
+  border: $color-border-default;
+  border-radius: 0rem;
+}
+
+.btn:disabled {
+  background-color: lighten($color-primary-background, 40%);
+  border: none;
 }

app/assets/stylesheets/blocks/_cards.scss

@@ -0,0 +1,55 @@
+@use '../variables/colours' as *;
+
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
+// Override Bootstrap 5 cards
+
+.card {
+  border-color: $color-border-default;
+  border-radius: 0rem;
+}
+.heading-button > .card-heading, .card > .card-heading {
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+
+.empty-section {
+  background-color: $color-muted-background !important;
+  cursor: 'auto' !important;
+}
+
+.card-title a {
+  display: block;
+  padding: 8px calc($grid-gutter-width / 2);
+  margin: -10px calc($grid-gutter-width / -2);
+  background-color: $color-primary-background;
+  color: $color-primary-text;
+}
+.card-title > a.reverse {
+  background-color: $color-secondary-background;
+  color: $color-secondary-text;
+}
+
+// Classes from Boostrap 3 panels (renamed card) - interim solution
+.card-default {
+  border-color: #ddd;
+  border-radius: 0rem;
+}
+.card-default > .card-heading {
+  color: #333333;
+  background-color: #f5f5f5;
+  border-color: #ddd;
+}
+.card-default > .card-heading + .card-collapse > .card-body {
+  border-top-color: #ddd;
+}
+.card-default > .card-heading .badge {
+  color: #f5f5f5;
+  background-color: #333333;
+}
+.card-default > .card-footer + .card-collapse > .card-body {
+  border-bottom-color: #ddd;
+}

app/assets/stylesheets/blocks/_font_awesomes.scss

@@ -1,6 +1,6 @@
 @use '../variables/colours' as *;
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 // Override FontAwesome icons
 
 /* FONTAWESOME STYLING */

app/assets/stylesheets/blocks/_footers.scss

@@ -1,5 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
-/* For sticky footer */
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 #footer-navbar {
   margin-bottom: 0px;
   position: absolute;
@@ -8,6 +9,6 @@
   border-radius:0px;
   z-index: 1;
   ul {
-    padding-right: $grid-gutter-width / 2;
+    padding-right: calc($grid-gutter-width / 2);
   }
 }

app/assets/stylesheets/blocks/_html.scss

@@ -4,13 +4,16 @@
 // blocks.
 
 html {
+  font-size: 0.9rem;
+  font-weight: 300;
   position: relative;
   min-height: 100%;
 }
 
 /* For sticky footer */
 main {
   margin-bottom: 100px;
+  margin-top: 30px;
   @media (max-width: 768px) {
     margin-bottom: 420px;
   }
@@ -21,6 +24,15 @@ main {
 
 body{
   padding-bottom: 50px;
+
+  hr {
+    border-top: 1px solid #eeeeee;
+  }
+
+  .row {
+    --bs-gutter-x: 0rem;
+  }
+
 }
 
 /* footer */
@@ -51,7 +63,7 @@ fieldset {
 
 legend {
   border: none;
-  font-size: 14px;
+  font-size: 14px; 
   font-weight: bold;
   margin-bottom: 5px;
   text-transform: capitalize;
@@ -65,3 +77,9 @@ h1, h2, h3, h4, h5, h6 {
   /* font-family: "GillSansLight"; */
   color: $color-heading-text;
 }
+
+
+.fas:not(.small) {
+  font-size: 1rem;
+}
+

app/assets/stylesheets/blocks/_index.scss

@@ -1,7 +1,9 @@
 @use 'accessibility';
+@use 'accordion';
 @use 'alerts';
 @use 'autocomplete';
 @use 'buttons';
+@use 'cards';
 @use 'clearable_field';
 @use 'datepicker';
 @use 'display';
@@ -23,7 +25,6 @@
 @use 'new_plans_form';
 @use 'new_window_popup';
 @use 'notification_areas';
-@use 'panels';
 @use 'profile_form';
 @use 'progress';
 @use 'project_details';

app/assets/stylesheets/blocks/_input_groups.scss

@@ -1,5 +1,10 @@
 @use '../variables/colours' as *;
 .input-group-addon {
-  border-radius: 0px;
+  border-radius: 0rem;
   background-color: $color-primary-background;
+  padding: 0.5rem;
+}
+
+.form-control {
+  border-radius: 0rem;
 }

app/assets/stylesheets/blocks/_inverse_dropdowns.scss

@@ -1,4 +1,5 @@
-@use '../variables/bootstrap' as *;
+ @use '../variables/bootstrap' as *;
+
 /* For dark (inverse) navbars */
 .inverse-dropdown {
   background-color: $dropdown-inverse-bg !important;

app/assets/stylesheets/blocks/_labels.scss

@@ -1,14 +1,23 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* label stlying */
+label {
+  font-weight: 700;
+}
+
 .label {
   font-size: 85%;
   border-radius: 0px;
 }
 
 /* RADIO BUTTONS */
 .radio label {
-  margin-right: $grid-gutter-width / 2;
+  margin-right: calc($grid-gutter-width / 2);
+}
+
+.radio label, .checkbox label {
+  font-weight: 400;
 }
 
 /* Remove mandatory * from check_box_tag in Admin search */

app/assets/stylesheets/blocks/_lists.scss

@@ -1,4 +1,6 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
+
 // Overrides Bootstrap 3.0's lists
 
 /* list-group styling */
@@ -13,6 +15,6 @@
 
 /* LIST STYLING */
 span.sublist {
-  margin-left: $grid-gutter-width / -2;
+  margin-left: calc($grid-gutter-width / -2);
   margin-right: 25px;
 }

app/assets/stylesheets/blocks/_logos.scss

@@ -1,12 +1,13 @@
-@use "../../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss" as *;
+@import "../../../../node_modules/bootstrap/scss/functions";
+@import "../../../../node_modules/bootstrap/scss/variables";
 
 /* HEADER LOGOS */
 .app-logo {
   height: 50px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }
 
 .org-logo {
   height: 100px;
-  padding-right: $grid-gutter-width / 2;
+  padding-right: calc($grid-gutter-width / 2);
 }