Upgrade bootstrap 3 to bootstrap 5

flaskbb/themes/aurora/src/scss/_aurora.scss

@@ -1,16 +0,0 @@
-@import "variables";
-@import "mixins";
-
-@import "text";
-@import "misc";
-@import "fixes";
-@import "navigation";
-@import "button";
-
-@import "category";
-@import "forum";
-@import "topic";
-@import "panel";
-@import "profile";
-
-@import "management";

flaskbb/themes/aurora/src/scss/_bootstrap-custom.scss

@@ -0,0 +1,118 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$fbb-bg: #f6f9fc;
+$fbb-border-color: #cad7e1;
+
+
+//$enable-caret:                true !default;
+//$enable-rounded:              false;
+//$enable-shadows:              false !default;
+//$enable-gradients:            false !default;
+//$enable-transitions:          true !default;
+//$enable-reduced-motion:       true !default;
+//$enable-smooth-scroll:        true !default;
+//$enable-grid-classes:         true !default;
+//$enable-cssgrid:              false !default;
+//$enable-button-pointers:      true !default;
+//$enable-rfs:                  true !default;
+//$enable-validation-icons:     true !default;
+//$enable-negative-margins:     false !default;
+//$enable-deprecation-messages: true !default;
+//$enable-important-utilities:  true !default;
+
+$body-bg:                   $fbb-bg;
+
+// Links
+//
+// Style anchor elements.
+/*$link-color:                              $primary !default;*/
+$link-decoration:                         none !default;
+$link-shade-percentage:                   20% !default;
+$link-hover-decoration:                   underline !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-width:                1px !default;
+$border-widths: (
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
+
+$border-color:                $fbb-border-color;
+$border-radius:               .25rem !default;
+$border-radius-sm:            .2rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-pill:          50rem !default;
+
+
+// Dropdowns
+$dropdown-border-radius:            $border-radius !default;
+
+
+// Pagination
+$pagination-border-radius:          $border-radius !default;
+
+$pagination-border-radius-sm:       $border-radius-sm !default;
+$pagination-border-radius-lg:       $border-radius-lg !default;
+
+
+// Cards
+$card-border-radius: none;
+
+
+// Accordion
+$accordion-border-radius:                 $border-radius !default;
+
+
+// Tooltips
+$tooltip-border-radius:             $border-radius !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+
+// Popovers
+$popover-border-radius:             $border-radius-lg !default;
+
+
+// Toasts
+$toast-border-radius:               $border-radius !default;
+
+
+// Badges
+$badge-border-radius:               $border-radius !default;
+
+
+// Modals
+$modal-content-border-radius:       $border-radius-lg !default;
+
+
+// Alerts
+$alert-border-radius:           $border-radius !default;
+
+
+// Progress bars
+$progress-border-radius:            $border-radius !default;
+
+
+// List group
+$list-group-border-radius:          $border-radius !default;
+
+
+// Image thumbnails
+$thumbnail-border-radius:           $border-radius !default;
+
+
+// Breadcrumbs
+$breadcrumb-border-radius:          null !default;

flaskbb/themes/aurora/src/scss/_button.scss

@@ -1,23 +1,21 @@
-// a "link" that is actually a button
-.btn.btn-link {
-    border: none;
-    color: #337ab7;
+.btn-link {
     text-decoration: none;
-    padding: 0;
-    // for some (yet for me unkown) reasons this required to be on the same
-    // height as for normal links (happens when using the inline-forms)
-    margin-bottom: 2px;
-
-    &:focus, &:hover {
-    color: #23527c;
-    text-decoration: underline;
-}
 }
 
 .btn-icon {
-    font-family: 'Font Awesome 5 Free';
+    font-family: "Font Awesome 5 Free";
     font-size: 1em;
-    line-height: 1.50em;
+    line-height: 1.5em;
     background: none;
     border-radius: 0;
 }
+
+.btn-white {
+    @include button-variant(
+        $background: #fff,
+        $border: #ccc,
+        $hover-background: #e6e5e5,
+        $hover-border: #adadad,
+        $hover-color: #333
+    );
+}

flaskbb/themes/aurora/src/scss/_category.scss

@@ -1,8 +1,7 @@
 // category specific values
-.category-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
+.category {
 
-    .panel-heading {
+    .category-header {
         font-weight: bold;
     }
 

flaskbb/themes/aurora/src/scss/_fixes.scss

@@ -1,67 +0,0 @@
-// fix for button in <a>
-.navbar {
-    .navbar-btn {
-        &>a.btn-primary {
-          color: #fff;
-          background-color: #337ab7;
-          border-color: #2e6da4;
-        }
-        &>a.btn-primary:focus {
-          color: #fff;
-          background-color: #286090;
-          border-color: #122b40;
-        }
-        &>a.btn-primary:hover {
-          color: #fff;
-          background-color: #286090;
-          border-color: #204d74;
-        }
-    }
-
-    .navbar-nav .user-btn {
-        padding-right: 2em;
-        padding-left: 1em;
-    }
-}
-
-
-// apply the same changes as for "a" for the btn-link
-.dropdown-menu {
-    & > li .btn-link {
-        display: block;
-        padding: 3px 20px;
-        width: 100%;
-        text-align: left;
-        clear: both;
-        font-weight: normal;
-        line-height: 1.42857143;
-        color: #333;
-        white-space: nowrap;
-
-        &:hover, &:focus {
-            color: #262626;
-            text-decoration: none;
-            background-color: #f5f5f5;
-        }
-    }
-
-    & > .active {
-        .btn-link, .btn-link:hover, .btn-link:focus {
-            color: #fff;
-            text-decoration: none;
-            background-color: #337ab7;
-            outline: 0;
-        }
-    }
-
-    & > .disabled {
-        .btn-link, .btn-link:hover, .btn-link:focus {
-            color: #777;
-            text-decoration: none;
-            cursor: not-allowed;
-            background-color: transparent;
-            background-image: none;
-            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-        }
-    }
-}

flaskbb/themes/aurora/src/scss/_forum.scss

@@ -1,9 +1,7 @@
 // forum specific values
-.forum-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
-    margin-bottom: 0;
+.forum {
 
-    .panel-heading {
+    .forum-header {
         font-weight: bold;
     }
 

flaskbb/themes/aurora/src/scss/_management.scss

@@ -1,16 +1,13 @@
 // Management Panel
-.management-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
-
+.management {
     .search-form {
         display: none;
         padding: 15px;
-
-        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+            border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     }
 
-    .management-head {
+    .management-header {
         background-color: $blue;
     }
     .management-body {
@@ -18,11 +15,11 @@
     }
 }
 
-.panel.settings-panel {
+.settings {
     border: none;
     margin-bottom: 0;
 
-    .settings-head {
+    .settings-header {
         background-color: $panel-hover;
         border-bottom: 1px solid $border-color;
     }
@@ -165,7 +162,7 @@
     }
 
     &.alert-message-success {
-        background-color: #F4FDF0;
+        background-color: #f4fdf0;
         border-color: $dark-green;
     }
     &.alert-message-success h4 {
@@ -193,15 +190,15 @@
         color: $light-blue;
     }
     &.alert-message-default {
-        background-color: #EEE;
+        background-color: #eee;
         border-color: $gray;
     }
     &.alert-message-default h4 {
         color: #000;
     }
     &.alert-message-notice {
-        background-color: #FCFCDD;
-        border-color: #BDBD89;
+        background-color: #fcfcdd;
+        border-color: #bdbd89;
     }
     &.alert-message-notice h4 {
         color: #444;

flaskbb/themes/aurora/src/scss/_misc.scss

@@ -58,9 +58,18 @@ body {
     }
 }
 
+.flaskbb-navbar {
+    border-bottom: 1px solid $border-color;
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+    margin-bottom: 1rem;
+}
+
 .flaskbb-breadcrumb {
     border: 1px solid $border-color;
     border-radius: 0;
+
+    padding: 0.5em 1em;
 }
 
 p.flaskbb-stats {
@@ -100,10 +109,8 @@ p.flaskbb-stats {
     h2 {
         text-align: center;
         font-size: 1.6em;
-        -webkit-border-radius: 2px;
-        -webkit-background-clip: padding-box;
-        -moz-border-radius: 2px;
-        -moz-background-clip: padding;
+        border-radius: 2px;
+        background-clip: padding-box;
         padding: 10px 0;
     }
     .emojis {
@@ -111,24 +118,16 @@ p.flaskbb-stats {
     }
 
     .typography {
-        -webkit-column-count: 3;
-           -moz-column-count: 3;
-                column-count: 3;
-        -webkit-column-gap: 4px;
-           -moz-column-gap: 4px;
-                column-gap: 4px;
+        column-count: 3;
+        column-gap: 4px;
         text-align: center;
     }
     .code-example {
         width: 100%;
         position: relative;
         margin-bottom: 1em;
-        -webkit-column-count: 2;
-           -moz-column-count: 2;
-                column-count: 2;
-        -webkit-column-gap: -4px;
-           -moz-column-gap: -4px;
-                column-gap: -4px;
+        column-count: 2;
+        column-gap: -4px;
         .markup {
             padding: 0;
         }

flaskbb/themes/aurora/src/scss/_mixins.scss

@@ -1 +0,0 @@
-@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_panels.scss";

flaskbb/themes/aurora/src/scss/_panel.scss

@@ -1,7 +1,6 @@
 // default values for the panels
-.page-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
-    .panel-heading {
+.page {
+    .page-header {
         font-weight: bold;
     }
 

flaskbb/themes/aurora/src/scss/_profile.scss

@@ -106,10 +106,10 @@
 }
 
 // conversation specific values
-.conversation-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
+.conversation {
     margin-bottom: 0;
-    .panel-heading {
+
+    .conversation-header {
         font-weight: bold;
     }
 
@@ -133,7 +133,7 @@
     }
 }
 
-.conversation-panel {
+.conversation {
     .conversation-body {
         .row > .conversation-row {
             &:not(:last-child) {

flaskbb/themes/aurora/src/scss/_topic.scss

@@ -1,21 +1,18 @@
-.topic-panel {
-    @include panel-variant($panel-border, $gray, $panel-head-bg, $panel-border);
+.topic {
     margin-bottom: 0;
 
-    .panel-heading {
+    .topic-header {
         font-weight: bold;
     }
 
     .topic-body {
-        padding-top: 0;
-        padding-bottom: 0;
+        padding: 0;
     }
 }
 
 .post-row {
     background: $author-box-bg;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
     padding-top: 0;
     padding-bottom: 0;
 
@@ -100,6 +97,7 @@
 
 // author
 .author {
+    padding: 0.5rem 1rem;
     text-shadow: 0px 1px 0px #fff;
 
     // probably not the best name but i couldn't come up with a better one
@@ -146,8 +144,8 @@
     }
 
     .author-online, .author-offline {
-        margin-top: 0.75em;
-        margin-left: 0.25em;
+        margin-top: 0.25em;
+        margin-left: 0.1em;
         float: left;
         width: 0.5em;
         height: 0.5em;
@@ -161,4 +159,8 @@
     .author-offline {
         background: $author-offline;
     }
+
+    .author-adminactions {
+        text-shadow: none;
+    }
 }

flaskbb/themes/aurora/src/scss/styles.scss

@@ -1,9 +1,6 @@
 // Import custom Bootstrap variables
-@import "bootstrap-variables";
-
-// Import Bootstrap for Sass
-$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
-@import "bootstrap-sass/assets/stylesheets/bootstrap";
+@import "bootstrap-custom";
+@import "bootstrap/scss/bootstrap";
 
 // Import fontawesome icons
 $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@@ -12,7 +9,20 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/regular";
 
 // Import FlaskBB theme
-@import "aurora";
+@import "variables";
+
+@import "text";
+@import "misc";
+@import "navigation";
+@import "button";
+
+@import "category";
+@import "forum";
+@import "topic";
+@import "panel";
+@import "profile";
+
+@import "management";
 
 // Import pygments style
 @import "pygments";