blue-react 9.9.3 → 9.10.0

package/dist/styles/_search.scss

@@ -1,62 +0,0 @@
-.blue-search {
-    display: flex;
-    align-items: center;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $input-bg;
-
-    &.blue-search-body {
-        border: 1px solid $input-border-color;
-
-        .blue-search-input-group {
-            display: flex;
-        }
-
-        &.focus {
-            box-shadow: $input-btn-focus-box-shadow;
-        }
-    }
-
-    &.focus {
-        box-shadow: inset $input-btn-focus-box-shadow;
-    }
-}
-
-.blue-sidebar .blue-search:not(.blue-search-body) {
-    margin-left: map-get($spacers, 1);
-    margin-right: map-get($spacers, 1);
-}
-
-.blue-search-input-group {
-    display: none;
-
-    .input-group-text {
-        border-color: transparent;
-        background-color: transparent;
-    }
-}
-
-.blue-search-control {
-    border: none;
-    background-color: transparent !important;
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.blue-search-reset-btn {
-    color: rgba($input-color, 0.7);
-
-    &:hover {
-        color: $input-color;
-    }
-}
-
-.blue-search.blue-search-sidebar {
-    transition: opacity 0.2s ease-in-out;
-}
-
-.blue-search.blue-search-sidebar:not(:hover):not(.focus) {
-    opacity: 0.7;
-}

package/dist/styles/_sidebar.scss

@@ -1,36 +0,0 @@
-.blue-sidebar-state {
-    &.open {
-        @include openSidebarMenu();
-
-        .blue-menu-item {
-            width: $bla-sidebar-width;
-        }
-
-        .blue-menu-item {
-            & > * {
-                width: auto;
-            }
-        }
-    }
-
-    &:not(.open) {
-        .blue-sidebar-visible-on-open {
-            display: none !important;
-        }
-
-        .blue-sidebar-hidden-on-open {
-            animation: fade-in 1s;
-        }
-    }
-}
-
-@keyframes blue-menu-item-dropdown-from-start {
-    from {
-        transform: translateX(-50%);
-        opacity: 0;
-    }
-}
-
-.blue-menu-item-dropdown-from-start {
-    animation: blue-menu-item-dropdown-from-start 0.15s;
-}

package/dist/styles/_status.scss

@@ -1,147 +0,0 @@
-.blue-loading {
-    background-color: $primary;
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    position: fixed;
-    display: none;
-    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    z-index: 6000;
-}
-
-.blue-status-alert {
-    @extend .blue-normal-scrollbar;
-
-    &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 50%;
-        left: 0;
-        pointer-events: none;
-        background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
-        background-repeat: no-repeat;
-        background-position: 50%;
-        animation: alert-in 1s;
-        transform: scale(10, 10);
-        opacity: 0;
-        transition: transform 0.5s, opacity 1s;
-    }
-
-    transform: translate3d(0, 0, 0);
-    overflow: hidden;
-    white-space: pre-wrap;
-
-    bottom: 2.5rem + 4rem + 0.938rem;
-    left: 1rem;
-    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;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .blue-status-alert {
-        left: calc(50% - 18.75rem);
-        right: calc(50% - 18.75rem);
-    }
-}
-
-.blue-status-circle {
-    bottom: 2.5rem;
-    left: calc(50% - 1.25rem);
-    border-radius: 50%;
-    width: 4rem;
-    height: 4rem;
-    color: #fff;
-
-    &:not(.blue-loading) {
-        align-items: center;
-        justify-content: center;
-        font-size: 2.5em;
-    }
-}
-
-.blue-status-success {
-    background-color: #5cb85c;
-}
-
-.blue-status-info {
-    background-color: #5bc0de;
-}
-
-.blue-status-warning {
-    background-color: #d58512;
-}
-
-.blue-status-danger {
-    background-color: #d43f3a;
-}
-
-.spinner-bounce-circle {
-    width: 100%;
-    height: 100%;
-
-    position: relative;
-    margin: 0;
-}
-
-.spinner-bounce-circle div {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #fff;
-    opacity: 0.6;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    -webkit-animation: circlebounce 2s infinite ease-in-out;
-    animation: circlebounce 2s infinite ease-in-out;
-}
-
-.spinner-bounce-circle div:nth-child(1) {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-}
-
-$bla-status-bar-width: 37.5rem;
-$bla-status-bar-loading-height: 2px;
-
-.blue-status-bar {
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    position: fixed;
-    z-index: 6;
-    // width: 100%;
-    box-sizing: border-box;
-    right: 0;
-    bottom: 0;
-    padding: 0.4rem;
-    padding-top: calc(0.4rem + #{$bla-status-bar-loading-height});
-    overflow: hidden;
-
-    &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: $bla-status-bar-loading-height;
-        background-color: #5cb85c;
-        animation: scrolling 1s linear infinite;
-    }
-}

package/dist/styles/_tooltips.scss

@@ -1,196 +0,0 @@
-@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;
-        }
-    }
-
-    // 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;
-        }
-    }
-}

package/dist/styles/_variables.scss

@@ -1,123 +0,0 @@
-// 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,
-        "white": white,
-        "black": #212529
-    ),
-    $theme-colors
-);
-
-// For Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
-// Since Bootstrap 5.2 it's no longer required, so it's commented out. If everything works fine, this can be removed for
-// future releases.
-// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-// $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
-// $utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
-// $utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
-
-// Alpha value (RGBA) e.g. for header background.
-$shimmering: 0.8 !default;
-
-// Thumb color of scrollbar.
-$scrollbar-thumb-color: white !default;
-
-// Thumb color of scrollbar as RGB (like `255, 255, 255`).
-$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;
-
-// Height of actions menu when it is expanded, like on mobile devices.
-$actions-height: 7.5rem !default;
-
-// Background color of menu toggle button.
-$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.25) !default;
-
-// Font size for sidebar menu items.
-$bla-btn-font-size: 1em !default;
-
-// Padding for action menu items.
-$bla-header-nav-padding: 0.75rem !default;
-
-// Width of the sidebar.
-$bla-sidebar-width: 16.563rem !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: #fff !default;
-
-// Color of indicator for active sidebar item.
-$sidebar-indicator-color: $sidebar-color !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 color of Header as RGB (like `255, 255, 255`).
-$header-bg-rgb: red($header-bg), green($header-bg), blue($header-bg) !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;
-
-// Width and height of the scrollbar indicators
-$scrollbar-size: 10px;
-
-:root {
-    --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
-    --blue-scrollbar-size: #{$scrollbar-size};
-
-    --blue-sidebar-width: #{$bla-sidebar-width};
-    --blue-sidebar-color: #{$sidebar-color};
-    --blue-theme: var(--theme, #{$theme});
-    --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-bg-rgb: #{$header-bg-rgb};
-    --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

@@ -1,67 +0,0 @@
-@mixin show-action-menu-again() {
-    max-height: initial;
-    overflow: initial;
-
-    .blue-actions-menu {
-        max-width: initial;
-    }
-}
-
-@mixin actions($breakpoint) {
-    @media screen and (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;
-            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();
-
-            .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 {
-                .blue-menu-item-dropdown {
-                    --blue-sidebar-bg: #{darken($theme, 34%)};
-                }
-            }
-        }
-
-        .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
-            display: none;
-        }
-    }
-
-    @media screen and (min-width: $breakpoint) {
-        @include show-action-menu-again();
-
-        .blue-actions-menu .blue-actions-label {
-            display: inline;
-        }
-
-        .blue-actions-menu-toggle {
-            display: none;
-        }
-    }
-}

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

@@ -1,10 +0,0 @@
-@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/styles/mixins/_menu-item.scss

@@ -1,23 +0,0 @@
-@mixin blue-menu-item-indicator() {
-    content: "";
-    position: absolute;
-    top: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.125rem;
-    right: initial;
-    width: 0.25rem;
-    height: auto;
-    background-color: var(--blue-menu-item-indicator-bg);
-    border-radius: 1rem;
-    animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
-}
-
-@mixin blue-menu-item-indicator-horizontal() {
-    top: initial;
-    bottom: 0.125rem;
-    left: 0.625rem;
-    right: 0.625rem;
-    width: auto;
-    height: 0.25rem;
-    animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
-}