Upgrade to Bootstrap 5 with first adjustments to the views (#345)

Kovah · Jan 7, 2022 · 48216c6 · 48216c6
1 parent 6b4b6dc
commit 48216c6
Show file tree

Hide file tree

Showing 72 changed files with 425 additions and 501 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,14 +14,12 @@
   },
   "devDependencies": {
     "laravel-mix": "^6.0.31",
-    "postcss": "^8.3.9",
-    "sass": "^1.42.1",
-    "sass-loader": "^10.2.0"
+    "postcss": "^8.4.5",
+    "sass": "^1.46.0",
+    "sass-loader": "^12.4.0"
   },
   "dependencies": {
-    "bootstrap": "^4.6.0",
-    "jquery": "^3.6.0",
-    "popper.js": "^1.16.1",
+    "bootstrap": "^5.1.3",
     "tom-select": "^2.0.0"
   },
   "scripts": {

diff --git a/resources/assets/sass/_variables-dark.scss b/resources/assets/sass/_variables-dark.scss
@@ -28,43 +28,33 @@ $danger: $red;
 $light: $gray-200;
 $dark: $gray-900;
 
-$colors: ();
-$colors: map-merge(
-    (
-      "blue": $blue,
-      "indigo": $indigo,
-      "purple": $purple,
-      "pink": $pink,
-      "red": $red,
-      "orange": $orange,
-      "yellow": $yellow,
-      "green": $green,
-      "teal": $teal,
-      "cyan": $cyan,
-      "white": $white,
-      "gray": $gray-600,
-      "gray-dark": $gray-800
-    ),
-    $colors
+$colors: (
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
 );
 
-$theme-colors: ();
-$theme-colors: map-merge(
-    (
-      "primary": $primary,
-      "secondary": $secondary,
-      "success": $success,
-      "info": $info,
-      "warning": $warning,
-      "danger": $danger,
-      "light": $light,
-      "dark": $dark
-    ),
-    $theme-colors
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
 );
 
-$yiq-contrasted-threshold: 170;
-
 
 // Dark Theme
 $darkmode-bg: $gray-900;

diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
@@ -12,20 +12,16 @@ $gray-900: #193C74;
 $gray: #6F747F;
 $black: #17181A;
 
-$grays: ();
-$grays: map-merge(
-    (
-      "100": $gray-100,
-      "200": $gray-200,
-      "300": $gray-300,
-      "400": $gray-400,
-      "500": $gray-500,
-      "600": $gray-600,
-      "700": $gray-700,
-      "800": $gray-800,
-      "900": $gray-900
-    ),
-    $grays
+$grays: (
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
 );
 
 $blue: #44679F;
@@ -48,86 +44,49 @@ $danger: $red;
 $light: $gray-100;
 $dark: $gray-800;
 
-$colors: ();
-$colors: map-merge(
-    (
-      "blue": $blue,
-      "indigo": $indigo,
-      "purple": $purple,
-      "pink": $pink,
-      "red": $red,
-      "orange": $orange,
-      "yellow": $yellow,
-      "green": $green,
-      "teal": $teal,
-      "cyan": $cyan,
-      "white": $white,
-      "gray": $gray-600,
-      "gray-dark": $gray-800
-    ),
-    $colors
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "white": $white,
+  "gray": $gray-600,
+  "gray-dark": $gray-800
 );
 
-$theme-colors: ();
-$theme-colors: map-merge(
-    (
-      "primary": $primary,
-      "secondary": $secondary,
-      "success": $success,
-      "info": $info,
-      "warning": $warning,
-      "danger": $danger,
-      "light": $light,
-      "dark": $dark
-    ),
-    $theme-colors
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark
 );
 
-$yiq-text-dark: $black;
-$yiq-text-light: $white;
+$color-contrast-dark: $black;
+$color-contrast-light: $white;
 
 
 // Options
 $enable-caret: false;
 
 
-// Spacing
-$spacer: 1rem;
-$spacers: ();
-$spacers: map-merge(
-    (
-      0: 0,
-      1: ($spacer * .25),
-      2: ($spacer * .5),
-      3: $spacer,
-      4: ($spacer * 1.5),
-      5: ($spacer * 3)
-    ),
-    $spacers
-);
-
-$sizes: ();
-$sizes: map-merge(
-    (
-      25: 25%,
-      50: 50%,
-      75: 75%,
-      100: 100%,
-      auto: auto
-    ),
-    $sizes
-);
-
-
 // Body
 $body-bg: $white;
 $body-color: $black;
 $body-color-muted: $gray;
 
 
 // Links
-$link-color: theme-color("primary");
-$link-hover-color: darken($link-color, 20%);
+$link-color: $primary;
 $link-hover-decoration: none;
 
 

diff --git a/resources/assets/sass/app-dark.scss b/resources/assets/sass/app-dark.scss
@@ -3,9 +3,9 @@
 @import "~bootstrap/scss/functions";
 @import "variables";
 @import "variables-dark";
-@import "third-party/bootstrap/bootstrap";
+@import "third-party/bootstrap/bootstrap5";
 // Tom Select
-@import "~tom-select/src/scss/tom-select.bootstrap4";
+@import "third-party/tom-select/variables";
 @import "third-party/tom-select/variables-dark";
 @import "third-party/tom-select/select";
 // Custom styles

diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -2,7 +2,7 @@
 // Bootstrap import
 @import "~bootstrap/scss/functions";
 @import "variables";
-@import "third-party/bootstrap/bootstrap";
+@import "third-party/bootstrap/bootstrap5";
 // Tom Select
 @import "third-party/tom-select/variables";
 @import "third-party/tom-select/select";

diff --git a/resources/assets/sass/custom/_app.scss b/resources/assets/sass/custom/_app.scss
@@ -100,7 +100,7 @@ body:not(.bookmarklet) {
 }
 
 .btn-xs {
-  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-line-height-xs, $btn-border-radius-xs);
+  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
 }
 
 .btn-group-xs > .btn {

diff --git a/resources/assets/sass/custom/_dark-fixes.scss b/resources/assets/sass/custom/_dark-fixes.scss
@@ -25,7 +25,7 @@
   background-color: $gray-800;
   color: $body-color;
 
-  @include hover-focus-active {
+  &:hover, &:focus, &:active {
     background-color: $gray-700;
   }
 }
@@ -34,7 +34,7 @@
   background-color: $primary;
   color: $body-color;
 
-  @include hover-focus-active {
+  &:hover, &:focus, &:active {
     background-color: lighten($primary, 5%);
   }
 }
diff --git a/resources/assets/sass/custom/_fixes.scss b/resources/assets/sass/custom/_fixes.scss
@@ -1,8 +1,13 @@
-// Bootstrap 4 Fixes
+// Bootstrap 5 Fixes
 .custom-control-label {
   cursor: pointer;
 }
 
+.navbar > .container {
+  align-items: normal;
+  justify-content: normal;
+}
+
 // Remove buplicate border from list groups inside cards
 .card .list-group-item:last-of-type {
   border: 0;
@@ -15,7 +20,7 @@
 // Generate a small pagination on mobile devices to prevent overflow
 .pagination {
   @include media-breakpoint-only(xs) {
-    @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
+    @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm);
   }
 }
 

diff --git a/resources/assets/sass/third-party/bootstrap/bootstrap5.scss b/resources/assets/sass/third-party/bootstrap/bootstrap5.scss
@@ -0,0 +1,52 @@
+/*!
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+//@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+//@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+//@import "~bootstrap/scss/accordion";
+//@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+//@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+//@import "~bootstrap/scss/modal";
+//@import "~bootstrap/scss/tooltip";
+//@import "~bootstrap/scss/popover";
+//@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+//@import "~bootstrap/scss/offcanvas";
+//@import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
diff --git a/resources/assets/sass/third-party/tom-select/_select.scss b/resources/assets/sass/third-party/tom-select/_select.scss
@@ -1 +1 @@
-@import "~tom-select/src/scss/tom-select.bootstrap4";
+@import "~tom-select/src/scss/tom-select.bootstrap5";
diff --git a/resources/assets/sass/third-party/tom-select/_variables-dark.scss b/resources/assets/sass/third-party/tom-select/_variables-dark.scss
@@ -7,7 +7,7 @@ $select-color-text: $input-color; //$gray-800
 $select-color-highlight: darken($primary, 10%);
 $select-color-input: $input-bg;
 $select-color-input-full: $input-bg;
-$select-color-input-error: theme-color("danger");
+$select-color-input-error: $danger;
 $select-color-input-error-focus: darken($select-color-input-error, 10%);
 $select-color-disabled: $gray-800;
 $select-color-item: $gray-900;

diff --git a/resources/assets/sass/third-party/tom-select/_variables.scss b/resources/assets/sass/third-party/tom-select/_variables.scss
@@ -7,7 +7,7 @@ $select-color-text: $input-color; //$gray-800
 $select-color-highlight: $gray-400;
 $select-color-input: $white;
 $select-color-input-full: $select-color-input;
-$select-color-input-error: theme-color("danger");
+$select-color-input-error: $danger;
 $select-color-input-error-focus: darken($select-color-input-error, 10%);
 $select-color-disabled: $input-bg;
 $select-color-item: $gray-300;

diff --git a/resources/views/app/bookmarklet/complete.blade.php b/resources/views/app/bookmarklet/complete.blade.php
@@ -6,7 +6,7 @@
         <p>@lang('linkace.bookmarklet_close')</p>
 
         <a href="{{ route('front') }}" target="_blank" class="btn btn-primary">
-            <x-icon.linkace-icon class="mr-2"/>
+            <x-icon.linkace-icon class="me-2"/>
             @lang('linkace.open_linkace')
         </a>
     </div>