blue-react 7.8.1 → 7.9.1

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

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

package/dist/styles/mixins/_actions.scss

@@ -1,55 +1,55 @@
-@mixin actions-break($width) {
-    @media screen and (max-width: $width) {
-        top: 0;
-        border-radius: $blue-actions-indicator-height / 2;
-        box-shadow: $box-shadow;
-        background-color: $header-bg;
-
-        .blue-actions-controls {
-            & > * {
-                margin-top: $spacer / 2;
-                margin-bottom: $spacer / 2;
-            }
-        }
-
-        &.open {
-            flex-direction: column;
-        }
-
-        &.closed {
-            @include header-bg();
-
-            .blue-actions-controls {
-                display: none;
-            }
-        }
-    }
-
-    @media screen and (min-width: $width) {
-        top: 0;
-
-        .blue-actions-controls {
-            background: transparent;
-            display: flex;
-            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(5.25rem + 1rem);
-    }
-}
+@mixin actions-break($width) {
+    @media screen and (max-width: $width) {
+        top: 0;
+        border-radius: $blue-actions-indicator-height * 0.5;
+        box-shadow: $box-shadow;
+        background-color: $header-bg;
+
+        .blue-actions-controls {
+            & > * {
+                margin-top: $spacer * 0.5;
+                margin-bottom: $spacer * 0.5;
+            }
+        }
+
+        &.open {
+            flex-direction: column;
+        }
+
+        &.closed {
+            @include header-bg();
+
+            .blue-actions-controls {
+                display: none;
+            }
+        }
+    }
+
+    @media screen and (min-width: $width) {
+        top: 0;
+
+        .blue-actions-controls {
+            background: transparent;
+            display: flex;
+            margin-left: -$spacer * 0.5;
+            margin-right: -$spacer * 0.5;
+            padding-right: $spacer;
+
+            & > * {
+                margin-left: $spacer * 0.5;
+                margin-right: $spacer * 0.5;
+            }
+        }
+
+        .blue-app-sidebar-btn {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+}
+
+@mixin has-actions($width) {
+    @media screen and (max-width: $width) {
+        padding-bottom: calc(5.25rem + 1rem);
+    }
+}

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

@@ -1,10 +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});
-}
+@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/_misc.scss

@@ -1,33 +1,33 @@
-@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
-    ::-webkit-scrollbar-thumb {
-        background-color: rgba($thumb-color, 0.4);
-        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
-            inset 0 -1px 0 rgba($thumb-color, 0.07);
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba($thumb-color, 0.5);
-    }
-    ::-webkit-scrollbar-thumb:active {
-        background-color: rgba($thumb-color, 0.6);
-    }
-
-    ::-webkit-scrollbar-track {
-        background-color: $bg-color;
-        border-radius: $track-border-radius;
-    }
-}
-
-@mixin slide-transition() {
-    $slide-transition: width 0.5s;
-    transition: $slide-transition;
-}
-
-@mixin header-bg() {
-    background-color: rgba($header-bg, $shimmering);
-    background-image: linear-gradient(
-        0deg,
-        rgba($header-bg, 0.8),
-        rgba($header-bg, 0.7)
-    );
-    backdrop-filter: blur(3px) saturate(125%);
-}
+@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba($thumb-color, 0.4);
+        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
+            inset 0 -1px 0 rgba($thumb-color, 0.07);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba($thumb-color, 0.5);
+    }
+    ::-webkit-scrollbar-thumb:active {
+        background-color: rgba($thumb-color, 0.6);
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: $track-border-radius;
+    }
+}
+
+@mixin slide-transition() {
+    $slide-transition: width 0.5s;
+    transition: $slide-transition;
+}
+
+@mixin header-bg() {
+    background-color: rgba($header-bg, $shimmering);
+    background-image: linear-gradient(
+        0deg,
+        rgba($header-bg, 0.8),
+        rgba($header-bg, 0.7)
+    );
+    backdrop-filter: blur(3px) saturate(125%);
+}

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

@@ -1,9 +1,9 @@
-@mixin scroll-shadow($bg, $light-base: white) {
-    background: linear-gradient($bg 30%, rgba($light-base, 0)),
-        linear-gradient(rgba($light-base, 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;
-}
+@mixin scroll-shadow($bg, $light-base: white) {
+    background: linear-gradient($bg 30%, rgba($light-base, 0)),
+        linear-gradient(rgba($light-base, 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/styles/mixins/_sidebar.scss

@@ -1,142 +1,142 @@
-@mixin openSidebarMenu() {
-    .blue-app-sidebar-hidden-on-open {
-        display: none;
-    }
-
-    .blue-app-sidebar-visible-on-open {
-        animation: fade-in 1s;
-        display: flex;
-    }
-
-    .blue-app-sidebar-label {
-        display: inline-block;
-    }
-
-    .blue-app-sidebar {
-        z-index: 42;
-        box-shadow: 0.6rem 6rem 6rem rgba(0, 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-sidebar .blue-app-sidebar-btn {
-        & > * {
-            width: auto;
-        }
-    }
-
-    .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;
-    }
-
-    .blue-app-header-logo.sidebar {
-        transform: translateX(0);
-    }
-}
-
-@mixin blue-app-sidebar($width) {
-    .blue-app-sidebar-btn {
-        color: $sidebar-color;
-        width: $normal-size;
-        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();
-
-        &:hover,
-        &:active {
-            color: $sidebar-color;
-            background-color: $sidebar-control-bg-hover !important;
-            border-color: transparent;
-        }
-
-        &.active::before {
-            content: "";
-            position: absolute;
-            top: 0.625rem;
-            bottom: 0.625rem;
-            left: 0;
-            width: 0.25rem;
-            background-color: $sidebar-indicator-color;
-            border-top-right-radius: 1rem;
-            border-bottom-right-radius: 1rem;
-            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
-        }
-
-        & > * + .blue-app-sidebar-label {
-            margin-left: 0.5rem;
-        }
-    }
-
-    .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), $sidebar-bg);
-        }
-
-        &:hover {
-            .blue-app-sidebar-btn {
-                background-color: var(--sidebar-bg);
-            }
-        }
-
-        .blue-app-sidebar-btn {
-            & > * {
-                width: 100%;
-            }
-        }
-    }
-}
-
-@keyframes sidebar-menu-item-indicator-in {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
+@mixin openSidebarMenu() {
+    .blue-app-sidebar-hidden-on-open {
+        display: none;
+    }
+
+    .blue-app-sidebar-visible-on-open {
+        animation: fade-in 1s;
+        display: flex;
+    }
+
+    .blue-app-sidebar-label {
+        display: inline-block;
+    }
+
+    .blue-app-sidebar {
+        z-index: 42;
+        box-shadow: 0.6rem 6rem 6rem rgba(0, 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-sidebar .blue-app-sidebar-btn {
+        & > * {
+            width: auto;
+        }
+    }
+
+    .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;
+    }
+
+    .blue-app-header-logo.sidebar {
+        transform: translateX(0);
+    }
+}
+
+@mixin blue-app-sidebar($width) {
+    .blue-app-sidebar-btn {
+        color: $sidebar-color;
+        width: $normal-size;
+        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();
+
+        &:hover,
+        &:active {
+            color: $sidebar-color;
+            background-color: $sidebar-control-bg-hover !important;
+            border-color: transparent;
+        }
+
+        &.active::before {
+            content: "";
+            position: absolute;
+            top: 0.625rem;
+            bottom: 0.625rem;
+            left: 0;
+            width: 0.25rem;
+            background-color: $sidebar-indicator-color;
+            border-top-right-radius: 1rem;
+            border-bottom-right-radius: 1rem;
+            animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
+        }
+
+        & > * + .blue-app-sidebar-label {
+            margin-left: 0.5rem;
+        }
+    }
+
+    .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), $sidebar-bg);
+        }
+
+        &:hover {
+            .blue-app-sidebar-btn {
+                background-color: var(--sidebar-bg);
+            }
+        }
+
+        .blue-app-sidebar-btn {
+            & > * {
+                width: 100%;
+            }
+        }
+    }
+}
+
+@keyframes sidebar-menu-item-indicator-in {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}