blue-react 8.0.0-next.1 → 8.0.0-next.5

package/dist/styles/_hover.scss

@@ -1,42 +1,42 @@
-.blue-btn-silent {
-    &:not(:hover):not(:focus):not(:active) {
-        border-color: transparent;
-        color: inherit;
-    }
-}
-
-@media (hover: hover) {
-    .blue-d-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active) {
-            .blue-d-hover-content-active {
-                display: none;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            .blue-d-hover-content-default {
-                display: none;
-            }
-        }
-    }
-
-    .blue-opacity-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active) {
-            .blue-opacity-hover-content-active {
-                opacity: 0;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            .blue-opacity-hover-content-default {
-                opacity: 0;
-            }
-        }
-    }
-}
+.blue-btn-silent {
+    &:not(:hover):not(:focus):not(:active) {
+        border-color: transparent;
+        color: inherit;
+    }
+}
+
+@media (hover: hover) {
+    .blue-d-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active) {
+            .blue-d-hover-content-active {
+                display: none;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .blue-d-hover-content-default {
+                display: none;
+            }
+        }
+    }
+
+    .blue-opacity-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active) {
+            .blue-opacity-hover-content-active {
+                opacity: 0;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .blue-opacity-hover-content-default {
+                opacity: 0;
+            }
+        }
+    }
+}

package/dist/styles/_keyframes.scss

@@ -1,73 +1,73 @@
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes blAppearUp {
-    from {
-        margin-top: 2.5rem;
-    }
-    to {
-        margin-top: 0;
-    }
-}
-
-@keyframes blue-menu-item-dropdown {
-    from {
-        transform: translateY(-50%);
-        opacity: 0;
-    }
-}
-
-@keyframes enabledBlueAppPage {
-    from {
-        transform: scale(0.98);
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-@keyframes alert-in {
-    from {
-        transform: scale(0, 0);
-        opacity: 0.2;
-        transition: 0s;
-    }
-}
-
-@keyframes circlebounce {
-    0%,
-    100% {
-        transform: scale(0);
-    }
-    50% {
-        transform: scale(1);
-    }
-}
-
-@keyframes scrolling {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(100%);
-    }
-}
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes blAppearUp {
+    from {
+        margin-top: 2.5rem;
+    }
+    to {
+        margin-top: 0;
+    }
+}
+
+@keyframes blue-menu-item-dropdown {
+    from {
+        transform: translateY(-50%);
+        opacity: 0;
+    }
+}
+
+@keyframes enabledBlueAppPage {
+    from {
+        transform: scale(0.98);
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes alert-in {
+    from {
+        transform: scale(0, 0);
+        opacity: 0.2;
+        transition: 0s;
+    }
+}
+
+@keyframes circlebounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+    50% {
+        transform: scale(1);
+    }
+}
+
+@keyframes scrolling {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}

package/dist/styles/_mixins.scss

@@ -1,6 +1,6 @@
-@import "./mixins/_misc.scss";
-@import "./mixins/_sidebar.scss";
-@import "./mixins/action-menu.scss";
-@import "./mixins/_switch.scss";
-@import "./mixins/custom-property.scss";
-@import "./mixins/scroll-shadow";
+@import "./mixins/_misc.scss";
+@import "./mixins/_sidebar.scss";
+@import "./mixins/action-menu.scss";
+@import "./mixins/_switch.scss";
+@import "./mixins/custom-property.scss";
+@import "./mixins/scroll-shadow";

package/dist/styles/_router.scss

@@ -1,18 +1,18 @@
-body {
-    overflow: hidden;
-}
-
-.router-page {
-    /* This is nessesary, because scrolling on iOS devices would not be smooth without it */
-    -webkit-overflow-scrolling: touch;
-
-    overflow-y: scroll;
-    overflow-x: hidden;
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-
-    &:not(.active) {
-        display: none;
-    }
-}
+body {
+    overflow: hidden;
+}
+
+.router-page {
+    /* This is nessesary, because scrolling on iOS devices would not be smooth without it */
+    -webkit-overflow-scrolling: touch;
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+
+    &:not(.active) {
+        display: none;
+    }
+}

package/dist/styles/_switch.scss

@@ -1,21 +1,21 @@
-$width: 2.188rem;
-$height: 1.25rem;
-$padding: 0.188rem;
-
-$switch-active-color: $success;
-
-.switch {
-    @include switch();
-
-    &.lg {
-        @include switch(100px, 30px);
-    }
-}
-
-/* Rounded sliders */
-.slider.round {
-    border-radius: $height;
-}
-.slider.round:before {
-    border-radius: 50%;
-}
+$width: 2.188rem;
+$height: 1.25rem;
+$padding: 0.188rem;
+
+$switch-active-color: $success;
+
+.switch {
+    @include switch();
+
+    &.lg {
+        @include switch(100px, 30px);
+    }
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: $height;
+}
+.slider.round:before {
+    border-radius: 50%;
+}

package/dist/styles/_variables.scss

@@ -22,6 +22,12 @@ $theme-colors: map-merge(
     $theme-colors
 );
 
+// Since Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
+$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.7 !default;
 

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

@@ -1,68 +1,68 @@
-@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 {
-            --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-actions-menu-item:not(.blue-actions-menu-toggle) {
-                display: flex;
-            }
-
-            .blue-actions-menu {
-                .blue-menu-item-dropdown {
-                    --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;
-        }
-    }
-}
+@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 {
+            --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-actions-menu-item:not(.blue-actions-menu-toggle) {
+                display: flex;
+            }
+
+            .blue-actions-menu {
+                .blue-menu-item-dropdown {
+                    --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 +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;
+}