From 75b6679bf2658aeaf8fe18be980c4d49de5a10b2 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 5 Dec 2024 21:08:16 -0800
Subject: [PATCH] Bootstrap and sass migration

---
 .../app-frame/app-frame.component.scss        |  6 +-
 .../document-detail.component.scss            |  9 ++-
 src-ui/src/styles.scss                        | 60 +++++++++++++++----
 src-ui/src/theme.scss                         | 11 ++--
 4 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index afa018b3e..9d1110ef4 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -1,6 +1,3 @@
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-
 /*
  * Sidebar
  */
@@ -15,6 +12,7 @@
   overflow-y: auto;
   --pngx-sidebar-width: 100%;
   max-width: var(--pngx-sidebar-width);
+  transition: all .2s ease;
 
   .sidebar-heading .spinner-border {
     width: 0.8em;
@@ -37,8 +35,6 @@
   @media (min-width: 2400px) {
     --pngx-sidebar-width: 8.33333333%;
   }
-
-  transition: all .2s ease;
 }
 @media (max-width: 767.98px) {
   .sidebar {
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index e3d17476b..c00f7655e 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -69,17 +69,16 @@ textarea.rtl {
   left: 0;
   width: 100%;
   height: calc(100vh - 160px);
+  overflow: hidden;
+  background-color: gray;
+  padding: 10px 8px; // border
+  z-index: 1000;
 
   @media screen and (min-width: 768px) {
     left: calc(.5 * var(--bs-gutter-x));
     width: calc(100% - var(--bs-gutter-x));
   }
 
-  overflow: hidden;
-  background-color: gray;
-  padding: 10px 8px; // border
-  z-index: 1000;
-
   > div {
     mix-blend-mode: difference;
   }
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index e5987d5d2..75e3b1449 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,5 +1,34 @@
-// bs options
-$enable-negative-margins: true;
+@use "sass:meta";
+// bs variables
+$grid-gutter-width: 1.5rem;
+$border-radius: .375rem;
+$btn-border-width: var(--bs-border-width);
+
+$form-file-button-bg: var(--bs-body-bg);
+$form-file-button-hover-bg: var(--pngx-bg-alt);
+
+@import "node_modules/bootstrap/dist/css/bootstrap.css";
+@include meta.load-css("theme");
+@import "~@ng-select/ng-select/themes/default.theme.css";
+@include meta.load-css("print");
+
+// re-created bootstrap styles
+.mt-n2 {
+  margin-top: -0.5rem;
+}
+.me-n2 {
+  margin-right: -0.5rem;
+}
+.mb-n2 {
+  margin-bottom: -0.5rem;
+}
+.ms-n2 {
+  margin-left: -0.5rem;
+}
+.my-n2 {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
 
 $grid-breakpoints: (
   xs: 0,
@@ -11,13 +40,22 @@ $grid-breakpoints: (
   xxxl: 2400px
 );
 
-$form-file-button-bg: var(--bs-body-bg);
-$form-file-button-hover-bg: var(--pngx-bg-alt);
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --bs-breakpoint-#{$name}: #{$value};
+  }
+}
 
-@import "node_modules/bootstrap/scss/bootstrap";
-@import "theme";
-@import "~@ng-select/ng-select/themes/default.theme.css";
-@import "print";
+@media (min-width: 2400px) {
+  .col-xxxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-xxxl-11 {
+    flex: 0 0 auto;
+    width:91.66666667%
+  }
+}
 
 // Paperless-ngx styles
 body {
@@ -731,12 +769,14 @@ canvas.hiddenCanvasElement {
     margin-left: calc(#{$btn-border-width} * -1);
   }
   > .btn {
-    @include border-end-radius(0);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 }
 .btn-group pngx-preview-popup:not(:first-child) {
   > .btn {
-    @include border-start-radius(0);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 }
 .btn-group pngx-preview-popup {
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 380f78d7d..9f3c9cbe9 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -1,7 +1,4 @@
-$color-mode-type: data;
-
-@import 'bootstrap/scss/mixins/color-mode';
-
+@use "sass:color";
 @mixin paperless-green {
   // base color e.g. #17541f = hsl(128, 57%, 21%)
   --pngx-primary: 128, 57%;
@@ -32,7 +29,7 @@ $color-mode-type: data;
 // Dark text colors allow for maintain contrast with theme color changes
 $text-color-light-bg: #212529;
 $text-color-dark-bg: #abb2bf;
-$text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%);
+$text-color-dark-bg-accent: color.adjust($text-color-dark-bg, $lightness: 10%);
 // Taken from bootstrap
 $form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$text-color-light-bg}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
 $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$text-color-light-bg}'/></svg>");
@@ -333,7 +330,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 }
 
-@include color-mode(dark) {
+[data-bs-theme="dark"] {
   body:not(.primary-light):not(.primary-dark) {
     @include paperless-green-dark-mode;
 
@@ -347,7 +344,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
 }
 
 // Temp to not blink with white before angular loads
-@include color-mode(auto) {
+[data-bs-theme="auto"] {
   @media (prefers-color-scheme: dark) {
     body {
       // no custom theme color