blue-web 1.17.3 → 1.17.5

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.17.3 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.17.5 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 

package/dist/styles/{_actions.css → _actions.scss}

@@ -1,6 +1,8 @@
 .BLUE-actions {
     display: flex;
     white-space: nowrap;
+    // overflow-x: auto;
+    // overflow-y: visible;
 }
 
 .BLUE-actions-menu {
@@ -23,3 +25,13 @@
 .BLUE-actions-collapse-menu:popover-open {
     display: var(--display);
 }
+
+// Compatibility with MenuItems having dropdowns
+.BLUE-actions-menu > .blue-menu-item-wrapper:has(> .blue-menu-item-dropdown) {
+    display: block;
+    position: relative;
+}
+
+.BLUE-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown {
+    position: absolute;
+}

package/dist/styles/_layout.scss

@@ -23,11 +23,34 @@
     height: 100dvh;
     position: relative;
     display: grid;
-    grid-template-columns: 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) auto;
+
     grid-template-rows: var(--toggler-size) auto;
+    grid-template-areas: "header" "main";
+
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+
+    &:has(> .blue-layout-toggle) {
+        grid-template-columns: 0 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) 1fr;
+        grid-template-rows: var(--toggler-size) auto;
+        grid-template-areas:
+            "state .    toggle header header"
+            ".     side main   main   main";
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout {
+        &:has(> .blue-layout-state-expand:checked) {
+            grid-template-areas:
+                "state .    toggle header header"
+                ".     side side   side   main";
+        }
+    }
 }
 
 .blue-layout-state {
+    grid-area: state;
     position: absolute;
     --size: 0;
     height: var(--size);
@@ -37,7 +60,7 @@
 }
 
 .blue-layout-toggle {
-    grid-column-start: 2;
+    grid-area: toggle;
     color: var(--blue-sidebar-color);
     background-color: var(--blue-sidebar-bg);
 }
@@ -62,11 +85,17 @@
 }
 
 .blue-layout-header {
-    grid-column-start: 3;
-    grid-column-end: 5;
+    grid-area: header;
+
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: var(--blue-layout-header-z-index, 4);
+    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
 }
 
 .blue-layout-side {
+    grid-area: side;
     overflow: auto;
 }
 
@@ -88,23 +117,23 @@
     }
 }
 
-@media (width >= 64rem) {
-    .blue-layout-state-expand:checked ~ .blue-layout-side {
-        grid-column-start: 2;
-        grid-column-end: 4;
-    }
-}
-
 .blue-layout-main {
     overflow: auto;
-    grid-column-start: 2;
-    grid-column-end: 5;
+    grid-area: main;
+    // grid-column-start: 2;
 }
 
-@media (width >= 64rem) {
-    .blue-layout-state-expand:checked ~ .blue-layout-main {
-        grid-column-start: 4;
-    }
+.blue-layout-body {
+    --spacing: 0.25rem;
+    width: calc(100% - var(--spacing) * 2);
+    height: calc(100% - var(--spacing));
+    margin-left: auto;
+    margin-right: auto;
+    overflow: auto;
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
+    box-shadow: var(--bs-box-shadow-sm);
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
 }
 
 .blue-layout-overlay {

package/dist/styles/_tabs.scss

@@ -4,14 +4,27 @@
         --#{$prefix}nav-link-color: var(--#{$prefix}list-group-action-color);
     }
 
+    .nav-link:hover,
+    .nav-link:focus {
+        border-bottom-color: transparent;
+    }
+
     .nav-link.active,
-    .show > .nav-link {
-        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-semibold);
-        border-bottom-color: var(--blue-tabs-underline-active-border-bottom-color, var(--bs-primary));
+    .show > .nav-link,
+    .blue-tab:checked {
+        &::after {
+            @include blue-menu-item-indicator();
+            @include blue-menu-item-indicator-horizontal();
+        }
+
+        position: relative;
+        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-base);
+        border-bottom-color: transparent;
+        color: var(--bs-nav-underline-link-active-color);
     }
 }
 
-.blue-tabs {
+.nav-underline .blue-tabs {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -64,9 +77,4 @@ input.blue-tab:checked + .blue-tab-content {
 
 .blue-tabs.nav-underline {
     row-gap: 0;
-    .blue-tab:checked {
-        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-semibold);
-        color: var(--bs-nav-underline-link-active-color);
-        border-bottom-color: var(--blue-tabs-underline-active-border-bottom-color, var(--bs-primary));
-    }
 }

package/dist/styles/_variables.scss

@@ -57,8 +57,8 @@ $sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
 $sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
 
 // Color of indicator for active sidebar item.
-$sidebar-indicator-color: $sidebar-color !default;
-$sidebar-indicator-color-dark: $sidebar-color-dark !default;
+$sidebar-indicator-color: #{var(--bs-primary)} !default;
+$sidebar-indicator-color-dark: #{var(--bs-primary-text-emphasis)} !default;
 
 // Background of search control in sidebar.
 $sidebar-search-bg: $input-bg !default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.17.3",
+    "version": "1.17.5",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -49,7 +49,7 @@
         "astro": "^5.13.5",
         "autoprefixer": "^10.3.6",
         "babel-loader": "^8.4.1",
-        "blue-react": "^10.1.3",
+        "blue-react": "file:../blue-react/blue-react-10.1.300003.tgz",
         "colorjs.io": "^0.5.2",
         "gh-pages": "^3.1.0",
         "license-report": "^6.2.0",