blue-react 8.1.0 → 8.1.3

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v8.1.0 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.1.3 (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/_bootstrap-variables.scss

@@ -11,3 +11,6 @@ $custom-checkbox-indicator-border-radius: $border-radius-sm !default;
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, "Helvetica Neue", sans-serif !default;

package/dist/styles/_general.scss

@@ -1,5 +1,7 @@
 :root {
+    --app-bg: #{$app-bg};
     --sidebar-bg: #{$sidebar-bg};
+    --header-bg: #{$header-bg};
     --action-link-bg-color: var(--theme);
 }
 
@@ -50,7 +52,7 @@ body {
 }
 
 body {
-    background: var(--sidebar-bg, $theme);
+    background: var(--app-bg, #{$app-bg});
 
     .blue-wrapper {
         position: fixed;
@@ -171,4 +173,5 @@ label {
     transform: translateX(-100%);
     transition: transform 0.4s;
     background: var(--sidebar-bg);
+    color: $sidebar-color;
 }

package/dist/styles/_grid.scss

@@ -62,9 +62,9 @@
     z-index: 3;
 }
 
-.blue-sidebar-toggler,
 .blue-header {
     @include header-bg();
+    color: $header-color;
 }
 
 // .blue-layout:not(.wrapper-in) .blue-header {
@@ -73,7 +73,6 @@
 
 .blue-header {
     height: $normal-size;
-    color: $header-color;
     position: fixed;
     top: 0;
     left: $normal-size;
@@ -192,14 +191,13 @@
     position: absolute !important;
     margin-top: 0 !important;
     left: 0;
-    background-color: $bla-button-bg-normal !important;
-    border-color: transparent !important;
     justify-content: center;
 
+    &,
     &:hover,
     &:focus {
         color: $sidebar-color;
-        background-color: $bla-button-bg-hover;
+        background-color: $sidebar-bg;
         border-color: transparent;
     }
 }
@@ -242,7 +240,7 @@
     z-index: 1;
 
     a {
-        color: $header-color;
+        color: inherit;
 
         &:focus {
             text-decoration: none;
@@ -257,8 +255,7 @@
 }
 
 .blue-menu-item {
-    transition: width 0.5s, background-color 0.3s, color 0.15s, box-shadow 0.3s,
-    opacity 0.3s !important;
+    transition: width 0.5s, background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s !important;
     padding: 0.5rem 0.75rem;
     border: none;
     margin-top: 0.125rem;
@@ -305,16 +302,24 @@
     animation: blue-menu-item-dropdown 0.15s;
     position: relative;
 
-    --sidebar-bg: #{$sidebar-deep-bg};
-
     &::before {
         content: "";
         position: absolute;
-        top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem;
-        background-color: var(--sidebar-bg);
+        top: 0.125rem;
+        right: 0.125rem;
+        bottom: 0.125rem;
+        left: 0.125rem;
         border-radius: $border-radius;
         box-shadow: $box-shadow;
     }
+}
+
+.blue-sidebar .blue-menu-item-dropdown {
+    --sidebar-bg: #{$sidebar-deep-bg};
+
+    &::before {
+        background-color: var(--sidebar-bg);
+    }
 
     .blue-menu-item-dropdown {
         --sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
@@ -337,6 +342,34 @@
     }
 }
 
+.blue-header .blue-menu-item-dropdown {
+    --sidebar-bg: #{$header-deep-bg};
+
+    &::before {
+        background-color: var(--header-bg);
+    }
+
+    .blue-menu-item-dropdown {
+        --sidebar-bg: #{darken($header-deep-bg, 4%)};
+
+        .blue-menu-item-dropdown {
+            --sidebar-bg: #{darken($header-deep-bg, 8%)};
+
+            .blue-menu-item-dropdown {
+                --sidebar-bg: #{darken($header-deep-bg, 12%)};
+
+                .blue-menu-item-dropdown {
+                    --sidebar-bg: #{darken($header-deep-bg, 16%)};
+
+                    .blue-menu-item-dropdown {
+                        --sidebar-bg: #{darken($header-deep-bg, 20%)};
+                    }
+                }
+            }
+        }
+    }
+}
+
 .blue-menu-item-dropdown-caret.caret {
     display: none;
     position: absolute;
@@ -344,4 +377,4 @@
     top: 50%;
     transform: translateY(-50%);
     align-items: center;
-}
+}

package/dist/styles/_variables.scss

@@ -1,7 +1,5 @@
-$primary-color: #007bff !default;
-
 /* Bootstrap */
-$primary: $primary-color !default;
+$primary: #007bff !default;
 $success: #4bd763 !default;
 $info: rgb(62, 158, 187) !default;
 $warning: #f0ad4e !default;
@@ -44,7 +42,7 @@ $actions-height: 7.5rem !default;
 $bla-button-bg-normal: rgba(0, 0, 0, 0.1) !default;
 
 // Background color of menu toggle button on hover state.
-$bla-button-bg-hover: rgba(white, 0.15) !default;
+$bla-button-bg-hover: rgba(white, 0.25) !default;
 
 // Font size for sidebar menu items.
 $bla-btn-font-size: 1em !default;
@@ -73,18 +71,21 @@ $sidebar-color: white !default;
 // Color of indicator for active sidebar item.
 $sidebar-indicator-color: $sidebar-color !default;
 
-// Background color, when hovering sidebar menu item.
-$sidebar-control-bg-hover: $bla-button-bg-hover !default;
-
 // Background of search control in sidebar.
 $sidebar-search-bg: $input-bg !default;
 
+// Background of the body element
+$app-bg: $sidebar-bg !default;
+
 // Text color of header elements
 $header-color: #fff !default;
 
 // Background color of Header
 $header-bg: $theme !default;
 
+// Background of header action menu dropdown menus
+$header-deep-bg: darken($header-bg, 4%) !default;
+
 // Background color, when hovering action menu item.
 $actions-control-bg-hover: $bla-button-bg-hover !default;
 

package/dist/styles/mixins/_sidebar.scss

@@ -64,7 +64,7 @@
 
 @mixin blue-sidebar($width) {
     .blue-menu-item {
-        color: $sidebar-color;
+        color: inherit;
         width: $normal-size;
         height: $normal-size;
         padding: 0.25rem 0.75rem;
@@ -78,7 +78,7 @@
             content: "";
             position: absolute;
             top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;
-            background-color: $sidebar-control-bg-hover;
+            background-color: currentColor;
             border-radius: $border-radius;
             transform: scale(0.9);
             opacity: 0;
@@ -87,13 +87,12 @@
 
         &:hover,
         &:active {
-            color: $sidebar-color;
-            // background-color: $sidebar-control-bg-hover !important;
+            color: inherit;
             border-color: transparent;
 
             &::before {
                 transform: scale(1);
-                opacity: 1;
+                opacity: 0.25;
             }
         }
 
@@ -102,11 +101,10 @@
             position: absolute;
             top: 0.625rem;
             bottom: 0.625rem;
-            left: 0;
+            left: 0.125rem;
             width: 0.25rem;
             background-color: $sidebar-indicator-color;
-            border-top-right-radius: 1rem;
-            border-bottom-right-radius: 1rem;
+            border-radius: 1rem;
             animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
         }
 

package/package.json

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