blue-web 1.6.4 → 1.8.0

package/dist/style.scss

@@ -1,9 +1,10 @@
 /*!
- * Blue Web v1.6.4 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.8.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
 @import "./styles/bootstrap-variables";
+
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "./styles/variables";
@@ -22,12 +23,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/_action-menu.scss

@@ -1,6 +1,11 @@
 .blue-actions {
+    --max-width: calc(
+        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) +
+            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-x, 0.75rem) +
+            var(--bs-btn-border-width, 1px)
+    );
+
     display: inline;
-    position: absolute;
     left: 0;
     right: 0;
     top: 0;
@@ -9,20 +14,15 @@
     overflow: hidden;
 
     .blue-actions-menu {
-        max-width: $normal-size;
+        max-width: var(--max-width);
+        & > .blue-menu-item-wrapper {
+            display: block;
+            position: relative;
+        }
     }
 
     &.open {
-        left: -#{$normal-size};
-        width: calc(100% + #{$normal-size});
-    }
-
-    .navbar-nav > li > a {
-        animation: fadeInDown 0.5s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
+        background-color: var(--blue-menu-item-dropdown-bg);
     }
 
     &.none {
@@ -60,10 +60,8 @@
     }
 }
 
-.blue-actions-menu-toggle {
-    & > span:first-child {
-        transform: rotate(90deg);
-    }
+.blue-actions-menu-toggle > span:first-child {
+    transform: rotate(90deg);
 }
 
 .blue-actions-menu-item {

package/dist/styles/_bootstrap-variables.scss

@@ -3,6 +3,15 @@ $light: #ecedf0 !default;
 // Components
 //
 
+$font-size-base: 1rem !default;
+
+$h1-font-size: $font-size-base * 2 !default;
+$h2-font-size: $font-size-base * 1.5 !default;
+$h3-font-size: $font-size-base * 1.25 !default;
+$h4-font-size: $font-size-base * 1.125 !default;
+$h5-font-size: $font-size-base * 1.1 !default;
+$h6-font-size: $font-size-base !default;
+
 $border-radius: 0.5rem !default;
 $border-radius-lg: 0.7rem !default;
 $border-radius-sm: 0.3rem !default;

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,226 @@
+@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;
+
+    &: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);
+        background-color: var(--blue-menu-item-dropdown-bg);
+    }
+}
+
+.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;
+    font-size: $bla-btn-font-size;
+    display: flex;
+    align-items: center;
+    border-color: transparent;
+    @include slide-transition();
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0.125rem;
+        right: 0.125rem;
+        bottom: 0.125rem;
+        left: 0.125rem;
+        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/_variables.scss

@@ -30,7 +30,11 @@ $scrollbar-thumb-color: white !default;
 $scrollbar-thumb-color-rgb: red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
 
 // Default size for many components, like sidebar menu items.
-$normal-size: 3rem !default;
+$normal-size: calc(
+    var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
+        (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
+        var(--bs-btn-border-width, 1px)
+) !default;
 
 // Height of actions menu when it is expanded, like on mobile devices.
 $actions-height: 7.5rem !default;
@@ -129,4 +133,5 @@ $sidebar-expanded-breakpoint: 1400px !default;
     --blue-header-color: #{$header-color};
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --blue-menu-item-height: #{$normal-size};
 }

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

@@ -8,10 +8,9 @@
 }
 
 @mixin actions($breakpoint) {
-    @media screen and (max-width: #{$breakpoint + 1px}) {
+    @media (max-width: #{$breakpoint + 1px}) {
         &.open {
             display: block;
-            background-color: var(--blue-header-depth-1-bg, #{darken($theme, 30%)});
             width: auto;
             position: absolute;
             z-index: 1;
@@ -28,25 +27,12 @@
 
             @include show-action-menu-again();
 
-            .navbar-nav {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: center;
-                flex-direction: column;
-
-                > li {
-                    text-align: center;
-                    height: $actions-height;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-
             .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
                 display: flex;
             }
 
             .blue-actions-menu {
+                flex-direction: column;
                 .blue-menu-item-dropdown {
                     --blue-sidebar-bg: #{darken($theme, 34%)};
                 }
@@ -58,7 +44,7 @@
         }
     }
 
-    @media screen and (min-width: $breakpoint) {
+    @media (min-width: $breakpoint) {
         @include show-action-menu-again();
 
         .blue-actions-menu .blue-actions-label {
@@ -68,5 +54,11 @@
         .blue-actions-menu-toggle {
             display: none;
         }
+
+        .blue-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown,
+        .blue-actions-menu > .blue-menu-item-wrapper > * > .blue-menu-item-dropdown {
+            position: absolute;
+            right: 0;
+        }
     }
 }

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.8.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",
@@ -12,8 +12,8 @@
         "url": "https://github.com/bruegmann/blue-react/issues"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build-docs": "react-scripts build && node indexCssSections.js && node indexJsSections.js",
+        "start": "craco start",
+        "build-docs": "craco build && node indexCssSections.js && node indexJsSections.js",
         "build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/js --noEmit false --project tsconfig.build.json",
         "build": "babel ./src/js --out-dir ./dist/js --extensions \".tsx,.js,.ts\"",
         "build-bundles": "webpack",
@@ -22,8 +22,8 @@
         "build-neu-css-legacy": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
         "build-neu-css": "sass --load-path=. ./dist/neu.scss:./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
         "build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "test": "craco test",
+        "eject": "craco eject",
         "predeploy": "npm run build-docs",
         "deploy": "gh-pages --dist build --dest v1",
         "prepublishOnly": "npm i && npm run build-release",
@@ -40,6 +40,7 @@
         "@babel/preset-env": "^7.10.4",
         "@babel/preset-react": "^7.10.4",
         "@babel/preset-typescript": "^7.9.0",
+        "@craco/craco": "^7.1.0",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/user-event": "^7.2.1",
@@ -51,7 +52,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-rc5.tgz",
         "gh-pages": "^3.1.0",
         "license-report": "^6.2.0",
         "lint-staged": "^11.1.2",