SASS files cleanup in TheAdmin theme (#14399)

src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationCollection.cshtml

@@ -23,7 +23,7 @@
             <i class="fa-regular fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@T["You have no unread notifications"]"></i>
         }
     </a>
-    <div class="dropdown-menu dropdown-menu-end notification-navbar" style="max-width: 20rem;">
+    <div class="dropdown-menu dropdown-menu-end notification-navbar scrollable" style="max-width: 20rem;">
         @if (Model.Value.Notifications.Count > 0)
         {
             var maxCount = Math.Min(Model.Value.MaxVisibleNotifications, Model.Value.Notifications.Count);

src/OrchardCore.Themes/TheAdmin/Assets/scss/_variables.scss

-// Global variables to override Bootstrap variables.
-/* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
+/* 
+    IMPORTANT: Never import Bootstrap directly into the theme. 
+    TheAdmin.css will depend on Bootstrap, but we never want to compile it. 
+*/
 @import '../../node_modules/bootstrap/scss/_functions';
 @import '../../node_modules/bootstrap/scss/_variables';
 
-// Override any of Bootstrap variables.
-$link-decoration: none;
-$link-hover-decoration: underline;
-
 // Custom variables.
 $top-nav-height: 52px !default;
 $footer-height: 40px !default;
 $left-navigation-width: 260px !default;
 $left-navigation-width-when-compact: 48px !default;
 $link-padding-left: 16px !default;
+$dropdown-max-height: 250px !default;
 
 :root {
     --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
@@ -25,14 +24,21 @@ $link-padding-left: 16px !default;
     --oc-admin-menu-item-font-color-active: var(--bs-emphasis-color);
     --oc-li-hover-bg-color: var(--bs-list-group-action-hover-bg);
     --oc-zindex-dropdown: #{$zindex-dropdown};
+    --oc-height-dropdown: #{$dropdown-max-height};
     --oc-top-nav-height: #{$top-nav-height};
-    --oc-top-nav-zindex: 1034; // $zindex-fixed + 4
+    --oc-top-nav-zindex: #{$zindex-fixed + 4};
     --oc-footer-height: #{$footer-height};
     --oc-start-navigation-width: #{$left-navigation-width};
     --oc-start-navigation-width-when-compact: #{$left-navigation-width-when-compact};
-    --oc-start-navigation-zindex: 1033; // $zindex-fixed + 3
+    --oc-start-navigation-zindex: #{$zindex-fixed + 3};
     --oc-link-padding-left: #{$link-padding-left};
-    --oc-editor-fullscreen: 1054; // $zindex-modal - 1
+    --oc-editor-fullscreen: #{$zindex-modal - 1};
+    --oc-selected-indicator-color: var(--bs-primary);
+    /* Action bar should always be less than dropdown menu */
+    --oc-action-bar-zindex: #{$zindex-dropdown - 17};
+    --oc-second-action-bar-zindex: #{$zindex-dropdown - 20};
+    /* Undefined Bootstrap variables */
     --bs-dropdown-zindex: #{$zindex-dropdown};
     --bs-zindex-fixed: #{$zindex-fixed};
+    --bs-bg-opacity: 1;
 }

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_action-bar.scss

 @import '../_variables';
 
-/* Action bar should always be less than dropdown menu */
 .action-bar {
     top: 3.3rem;
-    z-index: calc(var(--bs-dropdown-zindex, 1000) - 20);
+    z-index: var(--oc-action-bar-zindex);
 }
 
 .second-action-bar {
-    z-index: calc(var(--bs-dropdown-zindex, 1000) - 10);
+    z-index: var(--oc-second-action-bar-zindex);
 }

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_bootstrap-select.scss

-// bootstrap-select customizations
 @import "../../../node_modules/bootstrap-select/sass/bootstrap-select";
 
 .multiselect__content-wrapper ul {
@@ -20,11 +19,6 @@ html[dir="rtl"] .bootstrap-select .bs-ok-default:after {
 .bootstrap-select {
     .popover-header {
         .close {
-            /*
-            @extend .btn;
-            @extend .btn-close;
-            @extend .float-end;
-                */
             border: 0;
             background: none;
             box-shadow: none;

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_codemirror.scss

@@ -42,5 +42,5 @@
 }
 
 .CodeMirror-focused .CodeMirror-activeline-background {
-    background: rgba(100, 100, 100, 0.1) !important;
+    background: rgba(var(--bs-secondary-bg-rgb), 0.1) !important;
 }

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_dropdown.scss

 .dropdown-menu.scrollable {
     overflow-y: auto;
-    max-height: 250px;
+    max-height: var(--oc-height-dropdown);
+    scrollbar-width: thin;
 }
 
 .btn-dropdown {
@@ -9,55 +10,8 @@
     }
 
     .dropdown-menu {
-        max-height: 200px;
+        max-height: var(--oc-height-dropdown);
         overflow: hidden auto;
         scrollbar-width: thin;
     }
 }
-
-/* rtl:ignore */
-/*
-[dir="rtl"] .dropdown-menu {
-    left: auto !important;
-    right: 0px !important;
-    transform: translate3d(0px, 38px, 0px) !important;
-}
-
-.btn-dropdown-wrapper {
-    &:hover {
-        > .btn-dropdown {
-            border-width: 5px;
-            opacity: 1;
-        }
-    }
-}
-
-
-.btn-dropdown {
-    position: relative;
-    z-index: var(--bs-dropdown-zindex);
-    opacity: 0.8;
-    transition: 0.3s opacity;
-
-    > .btn-group {
-        margin: 0 auto;
-        bottom: 17px;
-    }
-}
-
-.btn-dropdown.show {
-    z-index: calc(var(--bs-dropdown-zindex) + 10);
-}
-
-[dir="ltr"] .btn-dropdown {
-    > .btn-group {
-        left: calc(-14px + 50%);
-    }
-}
-
-[dir="rtl"] .btn-dropdown {
-    > .btn-group {
-        right: calc(-14px + 50%);
-    }
-}
-*/

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_monaco.scss

@@ -24,7 +24,7 @@ div.editor-widget.find-widget {
         background-color: transparent;
         border-color: transparent;
         display: flex;
-        color: rgb(97,97,97);
+        color: var(--bs-secondary-color);
         box-shadow: none;
     }
 

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_sidebar-menu.scss

@@ -101,7 +101,7 @@ body:not(.left-sidebar-compact) {
                 // first level menu items that have no items and are active
                 > li.active:not(.has-items)::before {
                     border-left: 3px solid;
-                    border-left-color: #0078d4;
+                    border-left-color: var(--oc-selected-indicator-color);
                     bottom: 0;
                     content: "";
                     left: 0;
@@ -211,7 +211,7 @@ body:not(.left-sidebar-compact) {
 
         li.active > figure > ul > li.active > .item-label::before {
             border-left: 3px solid;
-            border-left-color: #0078d4;
+            border-left-color: var(--oc-selected-indicator-color);
             bottom: 0;
             content: "";
             left: 0;
@@ -328,6 +328,7 @@ body:not(.left-sidebar-compact) {
         }
     }
 }
+
 // Layout 4 : ta-left-sidebar when compacted
 // -----------------------------------------
 .left-sidebar-compact {
@@ -492,7 +493,7 @@ body:not(.left-sidebar-compact) {
 
                 > li.active:not(.has-items) > figure > figcaption > .item-label::before {
                     border-left: 3px solid;
-                    border-left-color: #0078d4;
+                    border-left-color: var(--oc-selected-indicator-color);
                     bottom: 0;
                     content: "";
                     left: 0;
@@ -522,7 +523,7 @@ body:not(.left-sidebar-compact) {
 
                 > li.has-items.active > figure > figcaption > .item-label::before {
                     border-left: 3px solid;
-                    border-left-color: #0078d4;
+                    border-left-color: var(--oc-selected-indicator-color);
                     bottom: 0;
                     content: "";
                     left: 0;
@@ -636,7 +637,7 @@ body:not(.left-sidebar-compact) {
                 // first level menu items that have no items and are active
                 > li.active:not(.has-items)::before {
                     border-left: 3px solid;
-                    border-left-color: #0078d4;
+                    border-left-color: var(--oc-selected-indicator-color);
                     bottom: 0;
                     content: "";
                     left: 0;
@@ -681,7 +682,7 @@ body:not(.left-sidebar-compact) {
 
         li.active > figure > ul > li.active > .item-label::before {
             border-left: 3px solid;
-            border-left-color: #0078d4;
+            border-left-color: var(--oc-selected-indicator-color);
             bottom: 0;
             content: "";
             left: 0;
@@ -691,7 +692,7 @@ body:not(.left-sidebar-compact) {
 
         li.active > figure > ul > li.active ul > li.active .item-label::before {
             border-left: 3px solid;
-            border-left-color: #0078d4;
+            border-left-color: var(--oc-selected-indicator-color);
             bottom: 0;
             content: "";
             left: 0;
@@ -701,7 +702,7 @@ body:not(.left-sidebar-compact) {
 
         li.active > figure > ul > li.active > figure > figcaption > .item-label::before {
             border-left: 3px solid;
-            border-left-color: #0078d4;
+            border-left-color: var(--oc-selected-indicator-color);
             bottom: 0;
             content: "";
             left: 0;

src/OrchardCore.Themes/TheAdmin/Assets/scss/index.scss

@@ -27,6 +27,6 @@
 @import 'components/validations';
 @import 'components/vue-multiselect';
 
-/* Include themes */
+/* Import themes */
 @import 'themes/light/index';
 @import 'themes/dark/index';

src/OrchardCore.Themes/TheAdmin/Assets/scss/themes/dark/_theme_helpers.scss

@@ -11,28 +11,27 @@
     background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
 }
 
-
 .btn-theme {
-    color: #fff;
-    background-color: #212529;
-    border-color: #212529;
+    color: var(--bs-white);
+    background-color: var(--bs-gray-900);
+    border-color: var(--bs-gray-900);
 }
 
 .btn-theme:hover {
-    color: #fff;
+    color: var(--bs-white);
     background-color: #1c1f23;
     border-color: #1a1e21;
 }
 
 .btn-check:focus + .btn-theme, .btn-theme:focus {
-    color: #fff;
+    color: var(--bs-white);
     background-color: #1c1f23;
     border-color: #1a1e21;
     box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
 }
 
 .btn-check:checked + .btn-theme, .btn-check:active + .btn-theme, .btn-theme:active, .btn-theme.active, .show > .btn-theme.dropdown-toggle {
-    color: #fff;
+    color: var(--bs-white);
     background-color: #1a1e21;
     border-color: #191c1f;
 }
@@ -42,7 +41,7 @@
 }
 
 .btn-theme:disabled, .btn-theme.disabled {
-    color: #fff;
-    background-color: #212529;
-    border-color: #212529;
+    color: var(--bs-white);
+    background-color: var(--bs-gray-900);
+    border-color: var(--bs-gray-900);
 }

src/OrchardCore.Themes/TheAdmin/Assets/scss/themes/light/_theme_helpers.scss

@@ -13,26 +13,26 @@
 }
 
 .btn-theme {
-    color: #000;
+    color: var(--bs-black);
     background-color: #f8f9fa;
     border-color: #f8f9fa;
 }
 
 .btn-theme:hover {
-    color: #000;
+    color: var(--bs-black);
     background-color: #f9fafb;
     border-color: #f9fafb;
 }
 
 .btn-check:focus + .btn-theme, .btn-theme:focus {
-    color: #000;
+    color: var(--bs-black);
     background-color: #f9fafb;
     border-color: #f9fafb;
     box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
 }
 
 .btn-check:checked + .btn-theme, .btn-check:active + .btn-theme, .btn-theme:active, .btn-theme.active, .show > .btn-theme.dropdown-toggle {
-    color: #000;
+    color: var(--bs-black);
     background-color: #f9fafb;
     border-color: #f9fafb;
 }
@@ -42,7 +42,7 @@
 }
 
 .btn-theme:disabled, .btn-theme.disabled {
-    color: #000;
+    color: var(--bs-black);
     background-color: #f8f9fa;
     border-color: #f8f9fa;
 }