Fixing Icon-Picker and cleanup sass (#14393)

src/OrchardCore.Modules/OrchardCore.Taxonomies/Views/TaxonomyField-Tags.Edit.cshtml

@@ -38,7 +38,7 @@
 
         @if (Model.Taxonomy == null)
         {
-            <div class="alert alert-danger" role="alert">
+            <div class="alert alert-warning" role="alert">
                 @T["The taxonomy could not be found. Please check the settings for this field."]
             </div>
         }

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_icon-picker.scss

@@ -0,0 +1,21 @@
+.iconpicker-popover.popover {
+    background: transparent !important;
+}
+
+.iconpicker-popover.popover .popover-title {
+    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+    background-color: var(--bs-body-bg) !important;
+}
+
+.iconpicker .iconpicker-items {
+    background-color: var(--bs-body-bg) !important;
+}
+
+.iconpicker .iconpicker-item {
+    color: var(--bs-body-color) !important;
+    box-shadow: 0 0 0 1px var(--bs-border-color);
+}
+
+.iconpicker .iconpicker-item:hover {
+    background-color: var(--bs-tertiary-color) !important;
+}

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

@@ -0,0 +1,5 @@
+@import '../_variables';
+
+.ui-sortable {
+    min-height: $font-size-base;
+}

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

@@ -1,21 +1,27 @@
-/* Import _variables before Bootstrap to allow overriding Bootstrap variables */
+/* Import variables first */
 @import 'variables';
 
-@import 'components/helpers';
-@import 'components/layout';
+/* Import the files from main folder before importing any component */
+@import 'main/helpers';
+@import 'main/overrides';
+@import 'main/layout';
+
+/* Import the components files */
 @import 'components/action-bar';
 @import 'components/badge';
 @import 'components/bootstrap-select';
 @import 'components/codemirror';
 @import 'components/dropdown';
 @import 'components/forms';
 @import 'components/grid';
+@import 'components/icon-picker';
 @import 'components/list-group';
 @import 'components/monaco';
 @import 'components/navbar';
 @import 'components/nouislider';
 @import 'components/pager';
 @import 'components/sidebar-menu';
+@import 'components/sortable';
 @import 'components/tabs';
 @import 'components/trumbowyg';
 @import 'components/validations';

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_helpers.scss → src/OrchardCore.Themes/TheAdmin/Assets/scss/main/_helpers.scss

@@ -15,3 +15,7 @@ $width-sizes: (25, 50, 75);
         }
     }
 }
+
+.unset {
+    all: unset;
+}

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_layout.scss → src/OrchardCore.Themes/TheAdmin/Assets/scss/main/_layout.scss

@@ -5,15 +5,11 @@
 body {
     margin-bottom: var(--oc-footer-height);
     height: 100%;
-    /*font-family: "Segoe UI VSS (Regular)", "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
 }
 
 @include cursor-class(move);
 @include cursor-class(pointer);
 
-// Layout
-// -----------------------------
-
 .ta-wrapper {
 }
 
@@ -32,31 +28,19 @@ body {
     }
 }
 
-.left-sidebar-compact .ta-content {
-    margin-left: var(--oc-start-navigation-width-when-compact);
-}
-
 @include media-breakpoint-down(sm) {
     .ta-content {
         margin-left: var(--oc-start-navigation-width-when-compact);
         transition: margin-left 0.5s ease-in-out;
     }
 }
 
+.left-sidebar-compact .ta-content {
+    margin-left: var(--oc-start-navigation-width-when-compact);
+}
+
 .preload * {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -o-transition: none !important;
 }
-
-// END OF LAYOUT
-
-// Sortable
-// ------------------------------
-.ui-sortable {
-    min-height: $font-size-base;
-}
-
-.unset {
-    all: unset;
-}

src/OrchardCore.Themes/TheAdmin/Assets/scss/main/_overrides.scss

@@ -0,0 +1,7 @@
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

src/OrchardCore.Themes/TheAdmin/Views/Layout.cshtml

@@ -62,17 +62,26 @@
                                     <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="bd-theme-text">
                                         <li>
                                             <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
-                                                <span class="theme-icon"><i class="fa-solid fa-circle-half-stroke"></i></span> <span class="ps-2">@T["Auto"]</span>
+                                                <span class="theme-icon">
+                                                    <i class="fa-solid fa-circle-half-stroke"></i>
+                                                </span>
+                                                <span class="ps-2">@T["Auto"]</span>
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="true">
-                                                <span class="theme-icon"><i class="fa-solid fa-sun"></i></span> <span class="ps-2">@T["Light"]</span>
+                                                <span class="theme-icon">
+                                                    <i class="fa-solid fa-sun"></i>
+                                                </span>
+                                                <span class="ps-2">@T["Light"]</span>
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-                                                <span class="theme-icon"><i class="fa-solid fa-moon"></i></span> <span class="ps-2">@T["Dark"]</span>
+                                                <span class="theme-icon">
+                                                    <i class="fa-solid fa-moon"></i>
+                                                </span>
+                                                <span class="ps-2">@T["Dark"]</span>
                                             </button>
                                         </li>
                                         @await RenderSectionAsync("ToggleThemeItems", required: false)

src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/* Import _variables before Bootstrap to allow overriding Bootstrap variables */
+/* Import variables first */
 /* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
 :root {
   --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
@@ -24,6 +24,7 @@
   --bs-zindex-fixed: 1030;
 }
 
+/* Import the files from main folder before importing any component */
 /* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
 :root {
   --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
@@ -135,6 +136,18 @@
     width: 75% !important;
   }
 }
+.unset {
+  all: unset;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
 /* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
 :root {
   --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
@@ -162,7 +175,6 @@
 body {
   margin-bottom: var(--oc-footer-height);
   height: 100%;
-  /*font-family: "Segoe UI VSS (Regular)", "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
 }
 
 .cursor-move {
@@ -187,30 +199,23 @@ body {
   font-weight: bold;
 }
 
-.left-sidebar-compact .ta-content {
-  margin-left: var(--oc-start-navigation-width-when-compact);
-}
-
 @media (max-width: 575.98px) {
   .ta-content {
     margin-left: var(--oc-start-navigation-width-when-compact);
     transition: margin-left 0.5s ease-in-out;
   }
 }
+.left-sidebar-compact .ta-content {
+  margin-left: var(--oc-start-navigation-width-when-compact);
+}
+
 .preload * {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
 }
 
-.ui-sortable {
-  min-height: 1rem;
-}
-
-.unset {
-  all: unset;
-}
-
+/* Import the components files */
 /* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
 :root {
   --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
@@ -7984,6 +7989,28 @@ input[type=password]::-ms-clear {
   max-width: 100%;
 }
 
+.iconpicker-popover.popover {
+  background: transparent !important;
+}
+
+.iconpicker-popover.popover .popover-title {
+  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  background-color: var(--bs-body-bg) !important;
+}
+
+.iconpicker .iconpicker-items {
+  background-color: var(--bs-body-bg) !important;
+}
+
+.iconpicker .iconpicker-item {
+  color: var(--bs-body-color) !important;
+  box-shadow: 0 0 0 1px var(--bs-border-color);
+}
+
+.iconpicker .iconpicker-item:hover {
+  background-color: var(--bs-tertiary-color) !important;
+}
+
 .with-checkbox .list-group-item {
   padding: 0.75rem 0.5rem;
 }
@@ -9269,6 +9296,34 @@ html:not(.fontawesome-i2svg-complete) #left-nav ul.menu-admin > li > .item-label
   --bs-zindex-fixed: 1030;
 }
 
+.ui-sortable {
+  min-height: 1rem;
+}
+
+/* IMPORTANT: Never import Bootstrap directly into the theme. TheAdmin.css will depend on Bootstrap, but we never want to compile it. */
+:root {
+  --oc-border-content: var(--bs-border-width) solid var(--bs-border-color);
+  --oc-admin-menu-bg-color: var(--bs-secondary-bg-subtle);
+  --oc-scrollbar-color: #CDCDCD;
+  --oc-admin-menu-font-color: var(--bs-secondary-color);
+  --oc-admin-menu-font-color-hover: var(--bs-emphasis-color);
+  --oc-admin-menu-item-bg-color: var(--bs-secondary-bg-subtle);
+  --oc-admin-menu-item-font-color: var(--bs-secondary-color);
+  --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: 1000;
+  --oc-top-nav-height: 52px;
+  --oc-top-nav-zindex: 1034;
+  --oc-footer-height: 40px;
+  --oc-start-navigation-width: 260px;
+  --oc-start-navigation-width-when-compact: 48px;
+  --oc-start-navigation-zindex: 1033;
+  --oc-link-padding-left: 16px;
+  --oc-editor-fullscreen: 1054;
+  --bs-dropdown-zindex: 1000;
+  --bs-zindex-fixed: 1030;
+}
+
 .tab-pane {
   border-left: var(--bs-border-width) solid var(--bs-border-color);
   border-right: var(--bs-border-width) solid var(--bs-border-color);