blue-react 9.6.0 → 9.7.0-alpha1

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.6.0-alpha2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.7.0-alpha1-alpha1-alpha2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 

package/dist/styles/_action-menu.scss

@@ -1,19 +1,5 @@
-.blue-actions-menu {
-    .nav-link {
-        position: relative;
-        margin-left: 2px;
-
-        background-color: var(--blue-action-link-bg-color);
-
-        &:hover {
-            background-color: $bla-button-bg-hover;
-        }
-    }
-}
-
 .blue-actions {
     display: inline;
-    transition: background-color 0.5s linear;
     position: absolute;
     left: 0;
     right: 0;

package/dist/styles/_hover.scss

@@ -9,7 +9,7 @@
     .blue-d-hover {
         &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
             .blue-d-hover-content-active {
-                display: none;
+                display: none !important;
             }
         }
 
@@ -19,7 +19,7 @@
         &.active,
         &:focus-within {
             .blue-d-hover-content-default {
-                display: none;
+                display: none !important;
             }
         }
     }

package/dist/styles/_layout.scss

@@ -1,6 +1,7 @@
 .blue-layout {
     position: relative;
     min-height: 100vh;
+    min-height: 100dvh;
 
     &.hasNoSidebarMenu {
         .blue-page,
@@ -36,7 +37,7 @@
 
     &:not(.open) {
         .blue-sidebar-visible-on-open {
-            display: none;
+            display: none !important;
         }
 
         .blue-sidebar-hidden-on-open {
@@ -45,14 +46,6 @@
     }
 }
 
-.blue-header-wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
 .blue-sidebar-toggler {
     position: fixed;
     width: $normal-size;
@@ -231,6 +224,7 @@
 
 .blue-page {
     min-height: calc(100vh - #{$normal-size});
+    min-height: calc(100dvh - #{$normal-size});
     margin-top: $normal-size;
 }
 
@@ -238,6 +232,7 @@
     .blue-page {
         margin-top: initial;
         min-height: calc(100vh);
+        min-height: calc(100dvh);
     }
 }
 
@@ -318,26 +313,26 @@
 }
 
 .blue-sidebar .blue-menu-item-dropdown {
-    --blue-sidebar-bg: #{$sidebar-deep-bg};
+    --blue-sidebar-bg: var(--blue-sidebar-depth-1-bg, #{$sidebar-deep-bg});
 
     &::before {
         background-color: var(--blue-sidebar-bg);
     }
 
     .blue-menu-item-dropdown {
-        --blue-sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
+        --blue-sidebar-bg: var(--blue-sidebar-depth-2-bg, #{darken($sidebar-deep-bg, 4%)});
 
         .blue-menu-item-dropdown {
-            --blue-sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
+            --blue-sidebar-bg: var(--blue-sidebar-depth-3-bg, #{darken($sidebar-deep-bg, 8%)});
 
             .blue-menu-item-dropdown {
-                --blue-sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
+                --blue-sidebar-bg: var(--blue-sidebar-depth-4-bg, #{darken($sidebar-deep-bg, 12%)});
 
                 .blue-menu-item-dropdown {
-                    --blue-sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
+                    --blue-sidebar-bg: var(--blue-sidebar-depth-5-bg, #{darken($sidebar-deep-bg, 16%)});
 
                     .blue-menu-item-dropdown {
-                        --blue-sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
+                        --blue-sidebar-bg: var(--blue-sidebar-depth-6-bg, #{darken($sidebar-deep-bg, 20%)});
                     }
                 }
             }

package/dist/styles/_router.scss

@@ -8,9 +8,10 @@ body {
 
     overflow-y: scroll;
     overflow-x: hidden;
-    position: absolute;
     width: 100vw;
+
     height: 100vh;
+    height: 100dvh;
 
     &:not(.active) {
         display: none;

package/dist/styles/_sidebar.scss

@@ -15,7 +15,7 @@
 
     &:not(.open) {
         .blue-sidebar-visible-on-open {
-            display: none;
+            display: none !important;
         }
 
         .blue-sidebar-hidden-on-open {

package/dist/styles/_status.scss

@@ -44,9 +44,11 @@
     right: 1rem;
 
     max-height: calc(100vh - 15rem);
+    max-height: calc(100dvh - 15rem);
 
     .alert-body {
         max-height: calc(100vh - 16rem);
+        max-height: calc(100dvh - 16rem);
         overflow-y: auto;
     }
 }

package/dist/styles/_tooltips.scss

@@ -1,194 +1,196 @@
-@keyframes tips-vert {
-    to {
-        opacity: 0.9;
-        transform: translate(-50%, 0);
-    }
-}
-
-@keyframes tips-horz {
-    to {
-        opacity: 0.9;
-        transform: translate(0, -50%);
-    }
-}
-
-@keyframes tips-diag-right {
-    to {
-        opacity: 0.9;
-        transform: translate(-1em, 0);
-    }
-}
-
-@keyframes tips-diag-left {
-    to {
-        opacity: 0.9;
-        transform: translate(1em, 0);
-    }
-}
-
-// [data-tooltip]s
-[data-tooltip] {
-    position: relative;
-    &::before,
-    &::after {
-        text-transform: none;
-        line-height: 1;
-        font-size: 0.9em;
-        user-select: none;
-        pointer-events: none;
-        position: absolute;
-        display: none;
-        opacity: 0;
-    }
-    // the dink
-    &::before {
-        content: "";
-        border: 5px solid transparent;
-        z-index: 1001;
-    }
-    // the bubble
-    &::after {
-        content: attr(data-tooltip);
-        font-family: $font-family-base;
-        text-align: center;
-
-        min-width: 3em;
-        max-width: var(--bs-tooltip-max-width, 21em);
-
-        padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
-        border-radius: var(--bs-tooltip-border-radius, 0.3em);
-        box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
-        background: var(--bs-tooltip-bg, #353539);
-        color: var(--bs-tooltip-color, #fff);
-        z-index: 1000;
-    }
-    // show the [data-tooltip]
-    &:hover::before,
-    &:hover::after {
-        display: block;
-    }
-}
+@media (hover: hover) {
+    @keyframes tips-vert {
+        to {
+            opacity: 0.9;
+            transform: translate(-50%, 0);
+        }
+    }
+
+    @keyframes tips-horz {
+        to {
+            opacity: 0.9;
+            transform: translate(0, -50%);
+        }
+    }
+
+    @keyframes tips-diag-right {
+        to {
+            opacity: 0.9;
+            transform: translate(-1em, 0);
+        }
+    }
+
+    @keyframes tips-diag-left {
+        to {
+            opacity: 0.9;
+            transform: translate(1em, 0);
+        }
+    }
+
+    // [data-tooltip]s
+    [data-tooltip] {
+        position: relative;
+        &::before,
+        &::after {
+            text-transform: none;
+            line-height: 1;
+            font-size: 0.9em;
+            user-select: none;
+            pointer-events: none;
+            position: absolute;
+            display: none;
+            opacity: 0;
+        }
+        // the dink
+        &::before {
+            content: "";
+            border: 5px solid transparent;
+            z-index: 1001;
+        }
+        // the bubble
+        &::after {
+            content: attr(data-tooltip);
+            font-family: $font-family-base;
+            text-align: center;
+
+            min-width: 3em;
+            max-width: var(--bs-tooltip-max-width, 21em);
+
+            padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
+            border-radius: var(--bs-tooltip-border-radius, 0.3em);
+            box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+            background: var(--bs-tooltip-bg, #353539);
+            color: var(--bs-tooltip-color, #fff);
+            z-index: 1000;
+        }
+        // show the [data-tooltip]
+        &:hover::before,
+        &:hover::after {
+            display: block;
+        }
+    }
+
+    [data-tooltip][class*="blue-tooltip-up"] {
+        &::before {
+            bottom: 100%;
+            border-bottom-width: 0;
+            border-top-color: var(--bs-tooltip-bg, #353539);
+        }
+        &::after {
+            bottom: calc(100% + 5px);
+        }
+        &::before,
+        &::after {
+            left: 50%;
+            transform: translate(-50%, 0.5em);
+        }
+    }
+
+    [data-tooltip][class*="blue-tooltip-down"] {
+        &::before {
+            top: 100%;
+            border-top-width: 0;
+            border-bottom-color: var(--bs-tooltip-bg, #353539);
+        }
+        &::after {
+            top: calc(100% + 5px);
+        }
+        &::before,
+        &::after {
+            left: 50%;
+            transform: translate(-50%, -0.5em);
+        }
+    }
+
+    [data-tooltip][class$="-left"]::after {
+        right: 50%;
+        left: auto;
+    }
+
+    [data-tooltip].blue-tooltip-up-left::after {
+        transform: translate(1.5em, 0.5em);
+    }
+
+    [data-tooltip].blue-tooltip-down-left::after {
+        transform: translate(1.5em, -0.5em);
+    }
+
+    [data-tooltip].blue-tooltip-up-right::after {
+        transform: translate(-1.5em, 0.5em);
+    }
+
+    [data-tooltip].blue-tooltip-down-right::after {
+        transform: translate(-1.5em, -0.5em);
+    }
+
+    [data-tooltip].blue-tooltip-start {
+        &::before {
+            top: 50%;
+            border-right-width: 0;
+            border-left-color: var(--bs-tooltip-bg, #353539);
+            left: calc(0em - 5px);
+            transform: translate(0.5em, -50%);
+        }
+        &::after {
+            top: 50%;
+            right: calc(100% + 5px);
+            transform: translate(0.5em, -50%);
+        }
+    }
+
+    [data-tooltip].blue-tooltip-end {
+        &::before {
+            top: 50%;
+            border-left-width: 0;
+            border-right-color: var(--bs-tooltip-bg, #353539);
+            right: calc(0em - 5px);
+            transform: translate(-0.5em, -50%);
+        }
+        &::after {
+            top: 50%;
+            left: calc(100% + 5px);
+            transform: translate(-0.5em, -50%);
+        }
+    }
+
+    // FX: do the thing
+    [data-tooltip][class*="blue-tooltip-up"]:hover,
+    [data-tooltip][class*="blue-tooltip-down"]:hover {
+        &::before,
+        &::after {
+            animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+        }
+    }
+
+    [data-tooltip][class$="blue-tooltip-end"]:hover::after {
+        animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+    }
+
+    [data-tooltip][class$="blue-tooltip-start"]:hover::after {
+        animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+    }
+
+    [data-tooltip].blue-tooltip-start:hover,
+    [data-tooltip].blue-tooltip-end:hover {
+        &::before,
+        &::after {
+            animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+        }
+    }
 
-[data-tooltip][class*="blue-tooltip-up"] {
-    &::before {
-        bottom: 100%;
-        border-bottom-width: 0;
-        border-top-color: var(--bs-tooltip-bg, #353539);
+    // don't show empty [data-tooltip]s
+    [data-tooltip=""] {
+        &::after,
+        &::before {
+            display: none !important;
+        }
     }
-    &::after {
-        bottom: calc(100% + 5px);
-    }
-    &::before,
-    &::after {
-        left: 50%;
-        transform: translate(-50%, 0.5em);
-    }
-}
-
-[data-tooltip][class*="blue-tooltip-down"] {
-    &::before {
-        top: 100%;
-        border-top-width: 0;
-        border-bottom-color: var(--bs-tooltip-bg, #353539);
-    }
-    &::after {
-        top: calc(100% + 5px);
-    }
-    &::before,
-    &::after {
-        left: 50%;
-        transform: translate(-50%, -0.5em);
-    }
-}
-
-[data-tooltip][class$="-left"]::after {
-    right: 50%;
-    left: auto;
-}
-
-[data-tooltip].blue-tooltip-up-left::after {
-    transform: translate(1.5em, 0.5em);
-}
-
-[data-tooltip].blue-tooltip-down-left::after {
-    transform: translate(1.5em, -0.5em);
-}
-
-[data-tooltip].blue-tooltip-up-right::after {
-    transform: translate(-1.5em, 0.5em);
-}
-
-[data-tooltip].blue-tooltip-down-right::after {
-    transform: translate(-1.5em, -0.5em);
-}
-
-[data-tooltip].blue-tooltip-start {
-    &::before {
-        top: 50%;
-        border-right-width: 0;
-        border-left-color: var(--bs-tooltip-bg, #353539);
-        left: calc(0em - 5px);
-        transform: translate(0.5em, -50%);
-    }
-    &::after {
-        top: 50%;
-        right: calc(100% + 5px);
-        transform: translate(0.5em, -50%);
-    }
-}
-
-[data-tooltip].blue-tooltip-end {
-    &::before {
-        top: 50%;
-        border-left-width: 0;
-        border-right-color: var(--bs-tooltip-bg, #353539);
-        right: calc(0em - 5px);
-        transform: translate(-0.5em, -50%);
-    }
-    &::after {
-        top: 50%;
-        left: calc(100% + 5px);
-        transform: translate(-0.5em, -50%);
-    }
-}
-
-// FX: do the thing
-[data-tooltip][class*="blue-tooltip-up"]:hover,
-[data-tooltip][class*="blue-tooltip-down"]:hover {
-    &::before,
-    &::after {
-        animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-    }
-}
-
-[data-tooltip][class$="blue-tooltip-end"]:hover::after {
-    animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-}
-
-[data-tooltip][class$="blue-tooltip-start"]:hover::after {
-    animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-}
-
-[data-tooltip].blue-tooltip-start:hover,
-[data-tooltip].blue-tooltip-end:hover {
-    &::before,
-    &::after {
-        animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-    }
-}
-
-// don't show empty [data-tooltip]s
-[data-tooltip=""] {
-    &::after,
-    &::before {
-        display: none !important;
-    }
-}
 
-.blue-tooltip-nowrap {
-    &::after {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .blue-tooltip-nowrap {
+        &::after {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }

package/dist/styles/_variables.scss

@@ -93,11 +93,26 @@ $scrollbar-size: 10px;
     --blue-sidebar-width: #{$bla-sidebar-width};
     --blue-sidebar-color: #{$sidebar-color};
     --blue-theme: var(--theme, #{$theme});
-    --blue-shimmering: 0.8;
+    --blue-shimmering: 0.9;
 
     --blue-app-bg: #{$app-bg};
+
     --blue-sidebar-bg: #{$sidebar-bg};
+    --blue-sidebar-depth-1-bg: #{darken($sidebar-bg, 4%)};
+    --blue-sidebar-depth-2-bg: #{darken(darken($sidebar-bg, 4%), 4%)};
+    --blue-sidebar-depth-3-bg: #{darken(darken($sidebar-bg, 4%), 8%)};
+    --blue-sidebar-depth-4-bg: #{darken(darken($sidebar-bg, 4%), 12%)};
+    --blue-sidebar-depth-5-bg: #{darken(darken($sidebar-bg, 4%), 16%)};
+    --blue-sidebar-depth-6-bg: #{darken(darken($sidebar-bg, 4%), 20%)};
+
     --blue-header-bg: #{$header-bg};
+    --blue-header-depth-1-bg: #{darken($header-bg, 4%)};
+    --blue-header-depth-2-bg: #{darken(darken($header-bg, 4%), 4%)};
+    --blue-header-depth-3-bg: #{darken(darken($header-bg, 4%), 8%)};
+    --blue-header-depth-4-bg: #{darken(darken($header-bg, 4%), 12%)};
+    --blue-header-depth-5-bg: #{darken(darken($header-bg, 4%), 16%)};
+    --blue-header-depth-6-bg: #{darken(darken($header-bg, 4%), 20%)};
+
     --blue-header-color: #{$header-color};
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};

package/dist/styles/mixins/_action-menu.scss

@@ -8,19 +8,18 @@
 }
 
 @mixin actions($breakpoint) {
-    @media screen and (max-width: $breakpoint + 1px) {
+    @media screen and (max-width: #{$breakpoint + 1px}) {
         &.open {
-            --blue-action-link-bg-color: #{darken($theme, 30%)};
-
             display: block;
-            background-color: var(--blue-action-link-bg-color);
-            width: 100%;
+            background-color: var(--blue-header-depth-1-bg, #{darken($theme, 30%)});
+            width: auto;
             position: absolute;
             z-index: 1;
-            left: 0;
-            top: 0;
+            left: unset;
+            top: 0.25rem;
             box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
             animation: fadeInDown 0.5s;
+            border-radius: $border-radius;
 
             @include show-action-menu-again();
 
@@ -28,7 +27,7 @@
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: center;
-                flex-direction: row;
+                flex-direction: column;
 
                 > li {
                     text-align: center;

package/dist/styles/mixins/_misc.scss

@@ -41,6 +41,9 @@
 }
 
 @mixin header-bg() {
-    background-color: rgba(var(--bs-theme-rgb, $header-bg), var(--blue-shimmering, $shimmering));
+    background-image: linear-gradient(
+        rgba(var(--bs-theme-rgb, $header-bg), 1),
+        rgba(var(--bs-theme-rgb, $header-bg), var(--blue-shimmering, $shimmering))
+    );
     backdrop-filter: blur(3px) saturate(125%);
 }

package/dist/styles/mixins/_sidebar.scss

@@ -4,12 +4,12 @@
     .blue-sidebar-after-hidden-on-open::after,
     .blue-sidebar-pseudo-hidden-on-open::before,
     .blue-sidebar-pseudo-hidden-on-open::after {
-        display: none;
+        display: none !important;
     }
 
     .blue-sidebar-visible-on-open {
         animation: fade-in 1s;
-        display: flex;
+        display: flex !important;
     }
 
     .blue-menu-item-label {

package/dist/types/components/Header.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 export interface HeaderProps {
-    children?: any;
+    children?: ReactNode;
 }
 /**
  * The top of a page.

package/dist/types/components/Utilities.d.ts

@@ -10,6 +10,9 @@ export declare function startLoading(): void;
 export declare function finishLoading(): void;
 export declare function showSuccess(): void;
 export declare function hideSuccess(): void;
+/**
+ * @deprecated Is handled inside of `ActioMenu` component now
+ */
 export declare function toggleActions(): void;
 /**
  * Resets alert messages that was set with `setAlertMessage`.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.6.0",
+    "version": "9.7.0-alpha1",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",