blue-web 1.6.4 → 1.7.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.6.4 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.7.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -22,12 +22,9 @@
 
 @import "./styles/text-icons";
 @import "./styles/general";
-@import "./styles/router";
 @import "./styles/status";
-@import "./styles/layout";
-@import "./styles/grid-layout";
 @import "./styles/menu-item";
-@import "./styles/sidebar";
+@import "./styles/page-header";
 @import "./styles/search";
 @import "./styles/action-menu";
 @import "./styles/caret";

package/dist/styles/_general.scss

@@ -1,10 +1,3 @@
-@include blue-custom-scrollbar(
-    transparent,
-    rgba(var(--blue-scrollbar-thumb-color-rgb), 0.5),
-    rgba(var(--blue-scrollbar-thumb-color-rgb), 0.6),
-    rgba(var(--blue-scrollbar-thumb-color-rgb), 0.7)
-);
-
 * {
     scrollbar-width: thin;
 }

package/dist/styles/_menu-item.scss

@@ -1,3 +1,227 @@
+@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;
+    }
+
+    padding: 0.5rem 0.75rem;
+    border: none;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+}
+
+.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);
+    }
+}
+
+.blue-sidebar .blue-menu-item-dropdown {
+    --blue-sidebar-bg: var(--blue-sidebar-depth-1-bg, #{$sidebar-deep-bg});
+
+    &::before {
+        background-color: var(--blue-sidebar-bg);
+        box-shadow: 0 0.5rem 1rem $black;
+        opacity: 0.15;
+        border-color: currentColor;
+    }
+
+    .blue-menu-item-dropdown {
+        --blue-sidebar-bg: var(--blue-sidebar-depth-2-bg, #{darken($sidebar-deep-bg, 4%)});
+
+        .blue-menu-item-dropdown {
+            --blue-sidebar-bg: var(--blue-sidebar-depth-3-bg, #{darken($sidebar-deep-bg, 8%)});
+
+            .blue-menu-item-dropdown {
+                --blue-sidebar-bg: var(--blue-sidebar-depth-4-bg, #{darken($sidebar-deep-bg, 12%)});
+
+                .blue-menu-item-dropdown {
+                    --blue-sidebar-bg: var(--blue-sidebar-depth-5-bg, #{darken($sidebar-deep-bg, 16%)});
+
+                    .blue-menu-item-dropdown {
+                        --blue-sidebar-bg: var(--blue-sidebar-depth-6-bg, #{darken($sidebar-deep-bg, 20%)});
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-header .blue-menu-item-dropdown {
+    --blue-sidebar-bg: #{$header-deep-bg};
+
+    &::before {
+        background-color: var(--blue-header-bg);
+    }
+
+    .blue-menu-item-dropdown {
+        --blue-sidebar-bg: #{darken($header-deep-bg, 4%)};
+
+        .blue-menu-item-dropdown {
+            --blue-sidebar-bg: #{darken($header-deep-bg, 8%)};
+
+            .blue-menu-item-dropdown {
+                --blue-sidebar-bg: #{darken($header-deep-bg, 12%)};
+
+                .blue-menu-item-dropdown {
+                    --blue-sidebar-bg: #{darken($header-deep-bg, 16%)};
+
+                    .blue-menu-item-dropdown {
+                        --blue-sidebar-bg: #{darken($header-deep-bg, 20%)};
+                    }
+                }
+            }
+        }
+    }
+}
+
+.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;
+    padding: 0.25rem 0.75rem;
+    font-size: $bla-btn-font-size;
+    display: flex;
+    align-items: center;
+    border-color: transparent;
+    @include slide-transition();
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+        bottom: 0.25rem;
+        left: 0.25rem;
+        background-color: currentColor;
+        border-radius: $border-radius;
+        transform: scale(0.9);
+        opacity: 0;
+        transition: all 0.2s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+    }
+
+    &[draggable] {
+        cursor: move;
+
+        &:active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.highlighted {
+        color: inherit;
+        border-color: transparent;
+
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.highlighted {
+        &::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;
 }

package/dist/styles/_mixins.scss

@@ -1,6 +1,5 @@
 @import "./mixins/misc";
 @import "./mixins/menu-item";
-@import "./mixins/sidebar";
 @import "./mixins/action-menu";
 @import "./mixins/switch";
 @import "./mixins/custom-property";

package/dist/styles/_page-header.scss

@@ -0,0 +1,63 @@
+.blue-header {
+    @include header-bg();
+    color: var(--blue-header-color);
+}
+
+.blue-header {
+    height: $normal-size;
+    position: fixed;
+    top: 0;
+    left: $normal-size;
+    right: 0;
+    z-index: 4;
+
+    @media screen and (min-width: 768px) {
+        right: $scrollbar-size;
+    }
+
+    .navbar-nav {
+        margin: 0;
+
+        > li {
+            float: left;
+
+            > a {
+                background-color: transparent;
+                color: var(--blue-header-color);
+                padding: $bla-header-nav-padding;
+
+                &:hover,
+                &:focus {
+                    background-color: $bla-button-bg-hover;
+                }
+            }
+        }
+    }
+
+    .navbar-left {
+        float: left !important;
+    }
+
+    .navbar-right {
+        float: right !important;
+    }
+
+    .blue-search {
+        width: 16rem;
+    }
+}
+
+.blue-header-title {
+    a {
+        color: inherit;
+
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}
+
+.blue-header-title-image {
+    width: 2rem;
+    height: 2rem;
+}

package/dist/styles/_status.scss

@@ -15,8 +15,6 @@
 }
 
 .blue-status-alert {
-    @extend .blue-normal-scrollbar;
-
     &:after {
         content: "";
         display: block;

package/dist/styles/mixins/_misc.scss

@@ -1,40 +1,3 @@
-/**
-@deprecated Will be removed in a future version. Please use `blue-custom-scrollbar` instead!
-*/
-@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
-    @include blue-custom-scrollbar(
-        $bg-color,
-        rgba($thumb-color, 0.5),
-        rgba($thumb-color, 0.6),
-        rgba($thumb-color, 0.7),
-        $track-border-radius
-    );
-}
-
-@mixin blue-custom-scrollbar(
-    $bg-color,
-    $thumb-color,
-    $thumb-color-hover: $thumb-color,
-    $thumb-color-focus: $thumb-color,
-    $track-border-radius: 0
-) {
-    ::-webkit-scrollbar-thumb {
-        background-color: $thumb-color;
-        box-shadow: inset 1px 1px 0 rgba(white, 0.2), inset 0 -1px 0 rgba(white, 0.17);
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background-color: $thumb-color-hover;
-    }
-    ::-webkit-scrollbar-thumb:active {
-        background-color: $thumb-color-focus;
-    }
-
-    ::-webkit-scrollbar-track {
-        background-color: $bg-color;
-        border-radius: $track-border-radius;
-    }
-}
-
 @mixin slide-transition() {
     $slide-transition: width 0.5s;
     transition: $slide-transition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.6.4",
+    "version": "1.7.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",
@@ -51,7 +51,7 @@
         "@types/react-router-dom": "^5.3.3",
         "@types/react-syntax-highlighter": "^13.5.0",
         "autoprefixer": "^10.3.6",
-        "blue-react": "^9.9.3",
+        "blue-react": "file:../blue-react/blue-react-10.0.0.tgz",
         "gh-pages": "^3.1.0",
         "license-report": "^6.2.0",
         "lint-staged": "^11.1.2",