blue-web 1.14.0 → 1.14.2

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.14.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.14.2 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -2779,6 +2779,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   &:not(caption) {
     position: absolute !important;
   }
+
+  // Fix to prevent overflowing children to become focusable
+  * {
+    overflow: hidden !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused
@@ -3720,9 +3725,6 @@ $header-deep-bg: darken($header-bg, 4%) !default;
 // Background color, when hovering action menu item.
 $actions-control-bg-hover: $bla-button-bg-hover !default;
 
-// Width and height of the scrollbar indicators
-$scrollbar-size: 10px;
-
 // Shrink sidebar on smaller screens
 $sidebar-shrink: true !default;
 
@@ -3736,7 +3738,6 @@ $sidebar-expanded-breakpoint: 1400px !default;
     --blue-app-bg: #{$app-bg};
 
     --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
-    --blue-scrollbar-size: #{$scrollbar-size};
 
     --blue-sidebar-width: #{$bla-sidebar-width};
     --blue-sidebar-color: #{$sidebar-color};
@@ -4164,7 +4165,7 @@ $sidebar-expanded-breakpoint: 1400px !default;
 
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.3.5 (https://getbootstrap.com/)
+   * Bootstrap #{$file} v5.3.6 (https://getbootstrap.com/)
    * Copyright 2011-2025 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
@@ -8578,13 +8579,13 @@ textarea {
         &:not(:last-child) {
           @include border-end-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
           }
@@ -8593,13 +8594,13 @@ textarea {
         &:not(:first-child) {
           @include border-start-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;
           }
@@ -10797,33 +10798,6 @@ $utilities: map-merge(
     scrollbar-width: thin;
 }
 
-@media screen and (min-width: 768px) {
-    ::-webkit-scrollbar {
-        height: var(--blue-scrollbar-size);
-        overflow: visible;
-        width: var(--blue-scrollbar-size);
-    }
-    ::-webkit-scrollbar-thumb {
-        background-clip: padding-box;
-        border: solid transparent;
-        border-width: 1px;
-        min-height: 28px;
-        padding: 100px 0 0;
-        border-radius: 0.3rem;
-    }
-    ::-webkit-scrollbar-button {
-        height: 0;
-        width: 0;
-    }
-    ::-webkit-scrollbar-track {
-        border: solid transparent;
-        border-width: 0 0 0 4px;
-    }
-    ::-webkit-scrollbar-corner {
-        background: 0 0;
-    }
-}
-
 html,
 body {
     height: 100%;
@@ -10858,7 +10832,11 @@ body {
 .pagination > li > a,
 .list-group a.list-group-item {
     &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
-        transition: background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s;
+        transition:
+            background-color 0.3s,
+            color 0.15s,
+            box-shadow 0.3s,
+            opacity 0.3s;
 
         @media (prefers-reduced-motion) {
             transition: none;
@@ -11150,6 +11128,17 @@ body {
         border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
         background-color: var(--blue-menu-item-dropdown-bg);
     }
+
+    &[popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        z-index: 1000;
+        border: none;
+        background: transparent;
+        border-radius: calc(#{$border-radius} + 0.1rem);
+        box-shadow: $box-shadow;
+    }
 }
 
 .blue-menu-item-dropdown-caret.blue-caret {
@@ -11200,7 +11189,8 @@ body {
 
     &:hover,
     &:active,
-    &.highlighted {
+    &.highlighted,
+    &:has(+ :popover-open) {
         color: inherit;
         border-color: transparent;
 
@@ -11210,7 +11200,8 @@ body {
         }
     }
 
-    &.highlighted {
+    &.highlighted,
+    &:has(+ :popover-open) {
         &::before {
             opacity: 0.16;
         }
@@ -11254,10 +11245,6 @@ body {
     right: 0;
     z-index: 4;
 
-    @media screen and (min-width: 768px) {
-        right: $scrollbar-size;
-    }
-
     .navbar-nav {
         margin: 0;
 
@@ -11865,48 +11852,17 @@ body {
 }
 
 .blue-tabs {
-    display: grid;
-    align-items: flex-end;
-
-    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
-    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-    @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
-    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-    --#{$prefix}nav-link-color: #{$nav-link-color};
-    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
-
-    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
-    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
-    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
 }
 
 .blue-tab {
     position: relative;
-    grid-row-start: 1;
+    order: 0;
     cursor: pointer;
     user-select: none;
     appearance: none;
-
-    font-size: var(--#{$prefix}nav-link-font-size, 1rem);
-    font-weight: var(--#{$prefix}nav-link-font-weight);
-    color: var(--#{$prefix}nav-link-color);
-    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
-    @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
-
-    &:hover,
-    &:focus {
-        color: var(--#{$prefix}nav-link-hover-color);
-        // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
-        isolation: isolate;
-        border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
-    }
 }
 
 .blue-tab::before {
@@ -11915,21 +11871,35 @@ body {
 
 .blue-tab-content {
     display: none;
-    grid-column-start: 1;
-    grid-column-end: span 9999;
-    grid-row-start: 2;
+    order: 1;
+    width: 100%;
+}
 
-    border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+input.blue-tab:checked + .blue-tab-content {
+    display: block;
 }
 
-.blue-tab:checked {
-    color: var(--bs-nav-tabs-link-active-color);
-    background-color: var(--bs-nav-tabs-link-active-bg);
-    border-color: var(--bs-nav-tabs-link-active-border-color);
+.blue-tabs.nav-tabs {
+    border-bottom: none;
+
+    .blue-tab-content {
+        border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    }
+
+    .blue-tab:checked {
+        color: var(--bs-nav-tabs-link-active-color);
+        background-color: var(--bs-nav-tabs-link-active-bg);
+        border-color: var(--bs-nav-tabs-link-active-border-color);
+    }
 }
 
-input.blue-tab:checked + .blue-tab-content {
-    display: block;
+.blue-tabs.nav-underline {
+    row-gap: 0;
+    .blue-tab:checked {
+        font-weight: var(--blue-tabs-underline-active-font-weight, 700);
+        color: var(--bs-nav-underline-link-active-color);
+        border-bottom-color: var(--blue-tabs-underline-active-border-bottom-color, currentcolor);
+    }
 }
 
 /**
@@ -12174,8 +12144,6 @@ dialog.blue-modal:has(.offcanvas-start) {
 }
 
 // Collapse with details and animated
-// Right now not part of Blue Web, but could become one
-
 .blue-collapse {
     interpolate-size: allow-keywords;
 
@@ -12209,14 +12177,20 @@ dialog.blue-modal:has(.offcanvas-start) {
 
     &::details-content {
         block-size: 0;
+        opacity: 0;
+        translate: 0 -4rem;
         transition:
             block-size 0.2s,
-            content-visibility 0.2s;
+            content-visibility 0.2s,
+            opacity 0.2s,
+            translate 0.2s;
         transition-behavior: allow-discrete;
     }
 
     &[open]::details-content {
         block-size: auto;
+        opacity: 1;
+        translate: 0;
     }
 }
 
@@ -12227,6 +12201,25 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
+.blue-collapse-group {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+
+    & > details {
+        display: contents;
+
+        & > summary {
+            grid-column: 2;
+
+            & + * {
+                width: calc(100% + 1rem - 2px);
+            }
+        }
+    }
+}
+
 .BLUE-actions {
     display: flex;
     white-space: nowrap;
@@ -12249,6 +12242,43 @@ dialog.blue-modal:has(.offcanvas-start) {
     position: absolute;
 }
 
+.blue-anchor {
+    anchor-name: var(--blue-anchor-name, --anchor-1);
+}
+
+.blue-anchored {
+    top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
+}
+
+.blue-anchored-start {
+    left: anchor(var(--blue-anchor-name, --anchor-1) left);
+}
+
+.blue-anchored-end {
+    left: anchor(var(--blue-anchor-name, --anchor-1) right);
+    translate: -100%;
+}
+
+@supports not (anchor-name: --anchor-1) {
+    .blue-anchored-end {
+        translate: none;
+    }
+
+    .blue-anchored-fallback {
+        left: 50%;
+        top: 50%;
+        translate: -50% -50%;
+
+        &::backdrop {
+            --bs-backdrop-bg: #000;
+            --bs-backdrop-opacity: 0.5;
+            background-color: var(--bs-backdrop-bg);
+            transition: opacity 0.2s;
+            opacity: var(--bs-backdrop-opacity);
+        }
+    }
+}
+
 
 /* Make DevExpress components look more like Bootstrap/Blue */
 [class^="dxbl-"] {