blue-web 1.17.7 → 1.18.0

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.17.7 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.18.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -10844,24 +10844,6 @@ body {
 
 body {
     background: var(--blue-app-bg, #{$app-bg});
-
-    .blue-wrapper {
-        position: fixed;
-        width: 100%;
-        width: 100%;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 1;
-        display: none;
-    }
-
-    &.open {
-        .blue-wrapper {
-            display: block;
-        }
-    }
 }
 
 // Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
@@ -10876,13 +10858,12 @@ body {
             color 0.15s,
             box-shadow 0.3s,
             opacity 0.3s;
+        position: relative;
 
         @media (prefers-reduced-motion) {
             transition: none;
         }
 
-        position: relative;
-
         &:hover,
         &:active,
         &:focus {
@@ -10891,27 +10872,6 @@ body {
     }
 }
 
-.page-link {
-    &:hover,
-    &:focus {
-        text-decoration: none;
-    }
-}
-
-.blue-wrapper {
-    z-index: 3 !important;
-
-    &.active {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .blue-header-extension .blue-header-title-labels:not(.keep) {
-        display: none;
-    }
-}
-
 .sign-in-screen {
     padding-top: $normal-size;
 
@@ -10931,22 +10891,17 @@ body {
     }
 }
 
-.w-bla-sidebar-width {
-    width: $bla-sidebar-width;
-}
-
 .blue-header-title.sidebar {
     width: $bla-sidebar-width;
     padding-left: calc(#{$normal-size} + #{$spacer});
     transform: translateX(-100%);
     transition: transform 0.4s;
+    background: var(--blue-sidebar-bg);
+    color: $sidebar-color;
 
     @media (prefers-reduced-motion) {
         transition: none;
     }
-
-    background: var(--blue-sidebar-bg);
-    color: $sidebar-color;
 }
 
 .blue-scroll-shadow {
@@ -10995,25 +10950,31 @@ body {
             animation-duration: 0s;
         }
 
-        transform: scale(10, 10);
-        opacity: 0;
-        transition: transform 0.5s, opacity 1s;
+        & {
+            transform: scale(10, 10);
+            opacity: 0;
+            transition:
+                transform 0.5s,
+                opacity 1s;
+        }
 
         @media (prefers-reduced-motion) {
             transition: none;
         }
     }
 
-    transform: translate3d(0, 0, 0);
-    overflow: hidden;
-    white-space: pre-wrap;
+    & {
+        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+        white-space: pre-wrap;
 
-    bottom: 2.5rem + 4rem + 0.938rem;
-    left: 1rem;
-    right: 1rem;
+        bottom: 2.5rem + 4rem + 0.938rem;
+        left: 1rem;
+        right: 1rem;
 
-    max-height: calc(100vh - 15rem);
-    max-height: calc(100dvh - 15rem);
+        max-height: calc(100vh - 15rem);
+        max-height: calc(100dvh - 15rem);
+    }
 
     .alert-body {
         max-height: calc(100vh - 16rem);
@@ -11086,231 +11047,178 @@ body {
     animation-delay: -1s;
 }
 
-@keyframes blue-menu-item-indicator-in-from-side {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
-
-@keyframes blue-menu-item-indicator-in-from-below {
-    from {
-        transform: translateY(100%);
-    }
-    to {
-        transform: translateY(1);
-    }
-}
-
-.blue-menu-item {
-    transition:
-        width 0.5s,
-        background-color 0.3s,
-        color 0.15s,
-        box-shadow 0.3s,
-        opacity 0.3s !important;
-
-    @media (prefers-reduced-motion) {
-        transition: none !important;
-    }
-
-    border: none;
-    box-shadow: none;
-    background-image: none;
-
-    &:focus {
-        box-shadow: none;
-    }
-
-    &:focus-visible {
-        &,
-        &.active {
-            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-        }
-    }
-}
-
-.blue-menu-item-icon {
-    display: inline-block;
-
-    & > * {
-        display: block;
-        width: 1.5rem;
-    }
-}
-
-.blue-menu-item-icon.iconForActive {
-    display: none;
-}
-
-.blue-menu-item.active {
-    .blue-menu-item-icon.hasIconForActive {
-        display: none;
-    }
-    .blue-menu-item-icon.iconForActive {
-        display: inline-block;
-    }
-}
-
-.blue-menu-item-dropdown {
-    margin-left: 1rem;
-    animation: blue-menu-item-dropdown 0.15s;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-
-    position: relative;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
-        border-radius: $border-radius;
-        box-shadow: $box-shadow;
-        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 {
-    display: none;
-    position: absolute;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    align-items: center;
-}
-
-.blue-menu-item {
-    color: inherit;
-    width: auto;
-    height: $normal-size;
-    font-size: $bla-btn-font-size;
-    display: flex;
-    align-items: center;
-    border-color: transparent;
-    --bs-btn-padding-x: 0.437rem;
-    @include slide-transition();
-
-    &::before {
-        @include blue-menu-item-background();
-    }
-
-    &[draggable] {
-        cursor: grab;
-
-        &:active {
-            box-shadow: inset 0 0 0.25rem;
-        }
-    }
-
-    &:hover,
-    &:active,
-    &.highlighted,
-    &:has(+ :popover-open) {
-        color: inherit;
-        border-color: transparent;
-
-        &::before {
-            transform: scale(1);
-            opacity: 0.25;
-        }
-    }
-
-    &.highlighted,
-    &:has(+ :popover-open) {
-        &::before {
-            opacity: 0.16;
-        }
-    }
-
-    &:hover,
-    &:active {
-        &::before {
-            opacity: 0.25;
-        }
-    }
-
-    &.active::after {
-        @include blue-menu-item-indicator();
-    }
-
-    & > * + .blue-menu-item-label {
-        margin-left: 0.5rem;
-    }
-}
-
-.blue-menu-item-wrapper {
-    display: contents;
-}
-
-.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
-.blue-menu-item-dropdown > .blue-menu-item {
-    width: 100%;
-}
+@keyframes blue-menu-item-indicator-in-from-side {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}
 
-.blue-header {
-    @include header-bg();
-    color: var(--blue-header-color);
+@keyframes blue-menu-item-indicator-in-from-below {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(1);
+    }
 }
 
-.blue-header {
-    height: $normal-size;
-    position: fixed;
-    top: 0;
-    left: $normal-size;
-    right: 0;
-    z-index: 4;
+.blue-menu-item {
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
+    & {
+        border: none;
+        box-shadow: none;
+        background-image: none;
+    }
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+        }
+    }
+}
+
+.blue-menu-item-icon {
+    display: inline-block;
+
+    & > * {
+        display: block;
+        width: 1.5rem;
+    }
+}
+
+.blue-menu-item-icon.iconForActive {
+    display: none;
+}
+
+.blue-menu-item.active {
+    .blue-menu-item-icon.hasIconForActive {
+        display: none;
+    }
+    .blue-menu-item-icon.iconForActive {
+        display: inline-block;
+    }
+}
+
+.blue-menu-item-dropdown {
+    margin-left: 1rem;
+    animation: blue-menu-item-dropdown 0.15s;
+    position: relative;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
 
-    .navbar-nav {
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0.125rem;
+        right: 0.125rem;
+        bottom: 0.125rem;
+        left: 0.125rem;
+        border-radius: $border-radius;
+        box-shadow: $box-shadow;
+        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;
+    }
+}
 
-        > li {
-            float: left;
+.blue-menu-item {
+    color: inherit;
+    width: auto;
+    height: $normal-size;
+    font-size: $bla-btn-font-size;
+    display: flex;
+    align-items: center;
+    border-color: transparent;
+    --bs-btn-padding-x: 0.437rem;
+    @include slide-transition();
 
-            > a {
-                background-color: transparent;
-                color: var(--blue-header-color);
-                padding: $bla-header-nav-padding;
+    &::before {
+        @include blue-menu-item-background();
+    }
 
-                &:hover,
-                &:focus {
-                    background-color: $bla-button-bg-hover;
-                }
-            }
+    &[draggable] {
+        cursor: grab;
+
+        &:active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.highlighted,
+    &:has(+ :popover-open) {
+        color: inherit;
+        border-color: transparent;
+
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.highlighted,
+    &:has(+ :popover-open) {
+        &::before {
+            opacity: 0.16;
         }
     }
 
-    .navbar-left {
-        float: left !important;
+    &:hover,
+    &:active {
+        &::before {
+            opacity: 0.25;
+        }
     }
 
-    .navbar-right {
-        float: right !important;
+    &.active::after {
+        @include blue-menu-item-indicator();
     }
 
-    .blue-search {
-        width: 16rem;
+    & > * + .blue-menu-item-label {
+        margin-left: 0.5rem;
     }
 }
 
+.blue-menu-item-wrapper {
+    display: contents;
+}
+
+.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
+.blue-menu-item-dropdown > .blue-menu-item {
+    width: 100%;
+}
+
 .blue-header-title {
     a {
         color: inherit;
@@ -11409,67 +11317,11 @@ body {
         margin-right: 0.5rem;
     }
 
-    .blue-menu-item-label,
-    .blue-menu-item-dropdown-caret.blue-caret {
+    .blue-menu-item-label {
         display: initial;
     }
 }
 
-.blue-caret {
-    /* treat like a font icon */
-    font-family: "blueicon" !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    font-size: 1.15em;
-    position: relative;
-    top: 0.063rem;
-    display: inline-block;
-    /* END treat like a font icon */
-
-    --caret-size: 0.5em;
-    --caret-strength: 0.09em;
-
-    width: 1em;
-
-    &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: var(--caret-size);
-        height: var(--caret-size);
-        background: transparent;
-        box-shadow: var(--caret-strength) var(--caret-strength) 0 currentColor;
-        transform: rotate(-45deg) translate(-50%, -50%);
-        margin-top: calc((var(--caret-size) + var(--caret-strength)) * -1);
-        transition: all 0.2s;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    &.blue-caret-mirrored {
-        &::before {
-            transform: rotate(135deg) translate(-50%, -50%);
-        }
-    }
-
-    &.blue-caret-open {
-        &::before {
-            transform: rotate(45deg) translate(-50%, -50%);
-        }
-    }
-}
-
 .blue-tooltip,
 .blue-tooltip-start,
 .blue-tooltip-end,
@@ -12338,8 +12190,19 @@ dialog.blue-modal:has(.offcanvas-start) {
     anchor-name: var(--blue-anchor-name, --anchor-1);
 }
 
+@position-try --blue-anchored-below {
+    top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
+    bottom: unset;
+}
+
+@position-try --blue-anchored-above {
+    bottom: anchor(var(--blue-anchor-name, --anchor-1) top);
+    top: unset;
+}
+
 .blue-anchored {
     top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
+    position-try: --blue-anchored-below, --blue-anchored-above;
 }
 
 .blue-anchored-start {