blue-react 6.9.2

package/dist/style/_variables.scss

@@ -0,0 +1,91 @@
+$primary-color: #007bff !default;
+
+/* Bootstrap */
+$primary:       $primary-color !default;
+$success:       #4BD763 !default;
+$info:          rgb(62, 158, 187) !default;
+$warning:       #F0AD4E !default;
+$danger:        #D9534F !default;
+/* Bootstrap ENDE */
+
+// Main color theme. E.g. used for background for body and sidebar.
+$theme: $primary !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "theme":    $theme
+  ),
+  $theme-colors
+);
+
+// Opacity of the light from a Fluent button when hovering.
+$fluent-halo-opacity: .15 !default;
+
+// Color of lightning on a Fluent button element.
+$fluent-halo-color: white !default;
+
+// Alpha value (RGBA) e.g. for header background.
+$shimmering: .7 !default;
+
+// Thumb color of scrollbar
+$scrollbar-thumb-color: white !default;
+
+// Default size for many components, like sidebar menu items.
+$normal-size: 48px !default;
+
+// Height of actions menu when it is expanded, like on mobile devices.
+$actions-height: 120px !default;
+
+// Background color of menu toggle button.
+$bla-button-bg-normal: rgba(0,0,0,.1) !default;
+
+// Background color of menu toggle button on hover state.
+$bla-button-bg-hover: rgba(white,.07) !default;
+
+// Font size for sidebar menu items.
+$bla-btn-font-size: 1.3em !default;
+
+// Font size for app title on the header.
+$bla-header-logo-font-size: 24px !default;
+
+// Padding for action menu items.
+$bla-header-nav-padding: 12px !default;
+
+// Width of the sidebar.
+$bla-sidebar-width: 265px !default;
+
+// Background of sidebar.
+$sidebar-bg: $theme !default;
+
+// Background of sidebar when it's opened (on mobile devices).
+$sidebar-open-bg: darken($sidebar-bg, 30%) !default;
+
+// Background of sidebar menu dropdown menus
+$sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
+
+// Text color of sidebar.
+$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;
+
+// Text color of header elements
+$header-color: #fff !default;
+
+// Background color of Header
+$header-bg: $theme !default;
+
+// Background color, when hovering action menu item.
+$actions-control-bg-hover: $bla-button-bg-hover !default;
+
+:root {
+    --theme: #{$theme};
+}

package/dist/style/mixins/_actions.scss

@@ -0,0 +1,59 @@
+@mixin actions-break($width) {
+    @media screen and (max-width: $width) {
+        // max-height: $blue-actions-height;
+        bottom: 0;
+        left: .5rem;
+        border-top-left-radius: $blue-actions-indicator-height / 2;
+        border-top-right-radius:  $blue-actions-indicator-height / 2;
+        box-shadow: $box-shadow;
+        background-color: $header-bg;
+
+        .blue-actions-controls {
+            padding: 1rem;
+            margin-top: -$spacer / 2;
+            margin-bottom: -$spacer / 2;
+
+            & > * {
+                margin-top: $spacer / 2;
+                margin-bottom: $spacer / 2;
+            }
+        }
+
+        &.closed {
+            @include header-bg();
+
+            .blue-actions-controls {
+                display: none;
+            }
+        }
+    }
+
+    @media screen and (min-width: $width) {
+        top: 0;
+
+        .blue-actions-controls {
+            background: transparent;
+            display: flex;
+            align-items: center;
+            margin-left: -$spacer / 2;
+            margin-right: -$spacer / 2;
+            padding-right: $spacer;
+
+            & > * {
+                margin-left: $spacer / 2;
+                margin-right: $spacer / 2;
+            }
+        }
+
+        .blue-app-sidebar-btn {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+}
+
+@mixin has-actions($width) {
+    @media screen and (max-width: $width) {
+        padding-bottom: calc(84px + 1rem);
+    }
+}

package/dist/style/mixins/_actions_deprecated.scss

@@ -0,0 +1,54 @@
+@mixin actions($breakpoint) {
+    @media screen and (max-width: $breakpoint + 1px) {
+        &.open {
+            --action-link-bg-color: #{darken($theme, 30%)};
+
+            display: block;
+            background-color: var(--action-link-bg-color);
+            width: 100%;
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            box-shadow: .6rem 6rem 6rem rgba(0,0,0,.3);
+            animation: fadeInDown 0.5s;
+                
+            .navbar-nav {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                flex-direction: row;
+
+                > li {
+                    text-align: center;
+                    height: $actions-height;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            
+            .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
+                display: flex;
+            }
+
+            .blue-app-header-form {
+                width: 100%;
+                margin-bottom: .4rem;
+            }
+        }
+
+        .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
+            display: none;
+        }
+    }
+
+    @media screen and (min-width: $breakpoint) {
+        .blue-app-actions-menu .blue-app-actions-label {
+            display: inline;
+        }
+
+        .blue-app-actions-menu-toggle {
+            display: none;
+        }
+    }
+}

package/dist/style/mixins/_custom-property.scss

@@ -0,0 +1,10 @@
+@mixin customProperty($name, $value) {
+    // fallback for older browser who do not support custom properties / css variables
+    #{$name}: #{$value};
+
+    // create a css variable (this might override the variable on any of the ancestor elements)
+    --#{$name}: #{$value};
+
+    // use the css variable on the property
+    #{$name}: var(--#{$name}, #{$value});
+}

package/dist/style/mixins/_misc.scss

@@ -0,0 +1,28 @@
+@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba($thumb-color, .4);
+        box-shadow: inset 1px 1px 0 rgba($thumb-color, .1), inset 0 -1px 0 rgba($thumb-color, .07)
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba($thumb-color, .5)
+    }
+    ::-webkit-scrollbar-thumb:active {
+        background-color: rgba($thumb-color, .6)
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: $track-border-radius;
+    }
+}
+
+@mixin slide-transition() {
+    $slide-transition: width .5s;
+    transition: $slide-transition;
+}
+
+@mixin header-bg() {
+    background-color: rgba($header-bg, $shimmering);
+    background-image: linear-gradient(0deg, rgba($header-bg,.8), rgba($header-bg,.7));
+    backdrop-filter: blur(3px) saturate(125%);
+}

package/dist/style/mixins/_scroll-shadow.scss

@@ -0,0 +1,10 @@
+@mixin scroll-shadow($bg) {
+    background:
+        linear-gradient($bg 30%, hsla(0,0%,100%, 0)),
+        linear-gradient(hsla(0,0%,100%,0) 10px, $bg 70%) bottom,
+        radial-gradient(at top, rgba(0,0,0,0.2), transparent 70%), 
+        radial-gradient(at bottom, rgba(0,0,0,0.2), transparent 70%) bottom;
+    background-repeat:no-repeat;
+    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
+    background-attachment:local, local, scroll, scroll;
+}

package/dist/style/mixins/_sidebar.scss

@@ -0,0 +1,114 @@
+@mixin openSidebarMenu() {
+    .blue-app-sidebar-hidden-on-open {
+        display: none;
+    }
+
+    .blue-app-sidebar-visible-on-open {
+        animation: fade-in 1s;
+        display: block;
+    }
+
+
+    .blue-app-sidebar-label {
+        display: inline-block;
+    }
+
+    .blue-app-sidebar {
+        z-index: 42;
+        box-shadow: .6rem 6rem 6rem rgba(0,0,0,.4);
+        // background-color: darken($theme, 30%);
+    }
+
+    .blue-app-sidebar,
+    .blue-app-sidebar .blue-app-sidebar-btn {
+        width: $bla-sidebar-width;
+    }
+
+    .blue-app-sub-sidebar {
+        left: $bla-sidebar-width;
+    }
+
+    .blue-app-sidebar-dropdown-caret.caret {
+        display: flex;
+    }
+
+    .blue-app-sidebar-dropdown {
+        .blue-app-sidebar-btn {
+            width: 100%;
+        }
+    }
+
+
+    /* search */
+    .blue-app-search {
+        background-color: $sidebar-search-bg;
+    }
+
+    .blue-app-search-btn {
+        display: none;
+    }
+
+    .blue-app-search-input-group {
+        display: flex;
+        align-items: center;
+    }
+}
+
+@mixin blue-app-sidebar($width) {
+    .blue-app-sidebar-btn {
+        color: $sidebar-color;
+        width: $normal-size;
+        height: $normal-size;
+        padding: 4px 12px;
+        font-size: $bla-btn-font-size;
+        font-weight: 300;
+        text-align: left;
+        display: block;
+        // background-color: var(--sidebar-bg);
+        border-color: transparent;
+        @include slide-transition();
+
+        &:hover,
+        &:active {
+            color: $sidebar-color;
+            background-color: $sidebar-control-bg-hover !important;
+            border-color: transparent;
+        }
+
+        &.active::before {
+            content: "";
+            position: absolute;
+            top: 10px; 
+            bottom: 10px;
+            left: 0;
+            width: 4px;
+            background-color: $sidebar-indicator-color;
+        }        
+    }
+    
+    .blue-app-sidebar {
+        width: $width;
+        color: $sidebar-color;
+        background: var(--sidebar-bg);
+        position: fixed;
+        left: 0;
+        top: $normal-size;
+        bottom: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        @include slide-transition();
+
+        .blue-app-menu {
+            overflow-y: auto;
+            flex: 1;
+            @include scroll-shadow(var(--sidebar-bg));
+        }
+
+        &:hover {
+            .blue-app-sidebar-btn {
+                background-color: var(--sidebar-bg);
+            }
+        }
+    }
+}

package/dist/style/mixins/_switch.scss

@@ -0,0 +1,77 @@
+@mixin switch($width: 35px, $height: 20px, $padding: 3px, $color: $body-color, $color-active: $success) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+        
+        input {
+            display:none;
+        }
+
+        &.disabled {
+            opacity: .8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: .4s;
+            box-shadow: inset 0 0 0 1px rgba($color, .5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: .4s;
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size / 2);
+                transition: margin-left .4s;
+                color: $color;
+            }
+        }
+
+        input:checked{ 
+            &+ .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX($width - $slider-size - ($padding * 2));
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size / 2) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}