blue-react 8.3.1 → 8.3.4

package/dist/styles/_grid.scss

@@ -1,381 +1,381 @@
-.blue-layout {
-    position: relative;
-    min-height: 100vh;
-
-    &.hasNoSidebarMenu {
-        .blue-page,
-        .blue-header {
-            padding-left: 0;
-        }
-
-        .blue-sidebar-toggler {
-            display: none;
-        }
-
-        .blue-page {
-            margin-left: 0;
-        }
-
-        .blue-header-extension {
-            left: 0;
-            padding-right: 0;
-        }
-    }
-
-    &.open {
-        @media screen and (max-width: 1400px) {
-            .router-page.active {
-                .blue-page {
-                    filter: blur(3px) brightness(0.8);
-                }
-            }
-        }
-
-        @include openSidebarMenu();
-    }
-
-    &:not(.open) {
-        .blue-sidebar-visible-on-open {
-            display: none;
-        }
-
-        .blue-sidebar-hidden-on-open {
-            animation: fade-in 1s;
-        }
-    }
-}
-
-.blue-header-wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.blue-sidebar-toggler {
-    position: fixed;
-    width: $normal-size;
-    height: $normal-size;
-    left: 0;
-    top: 0;
-    z-index: 3;
-}
-
-.blue-header {
-    @include header-bg();
-    color: $header-color;
-}
-
-// .blue-layout:not(.wrapper-in) .blue-header {
-//     overflow: hidden;
-// }
-
-.blue-header {
-    height: $normal-size;
-    position: fixed;
-    top: 0;
-    left: $normal-size;
-    right: 0;
-    z-index: 4;
-
-    @media screen and (min-width: 768px) {
-        right: $scrollbar-size;
-    }
-
-    .navbar-nav {
-        margin: 0;
-
-        > li {
-            float: left;
-
-            > a {
-                background-color: transparent;
-                color: $header-color;
-                padding: $bla-header-nav-padding;
-
-                &:hover,
-                &:focus {
-                    background-color: $bla-button-bg-hover;
-                }
-            }
-        }
-    }
-
-    .navbar-left {
-        float: left !important;
-    }
-
-    .navbar-right {
-        float: right !important;
-    }
-
-    .blue-search {
-        width: 16rem;
-    }
-}
-
-.blue-normal-scrollbar,
-.modal-body,
-.blue-page {
-    @include custom-scrollbar($body-color, $body-bg, 0.3rem);
-}
-
-.blue-page {
-    margin-left: $normal-size;
-    animation: enabledBlueAppPage 0.5s;
-
-    &::before,
-    &::after {
-        content: "";
-        display: table;
-    }
-}
-
-@include blue-sidebar($normal-size);
-
-@media (max-width: 600px) {
-    @include blue-sidebar(0);
-    .blue-layout:not(.open) .blue-sidebar {
-        left: -$normal-size;
-    }
-
-    .blue-page {
-        margin-left: 0;
-    }
-
-    .blue-layout.disableHeaders {
-        .blue-page {
-            padding-top: $normal-size;
-        }
-    }
-
-    .blue-sidebar-toggler {
-        transition: transform 0.5s;
-    }
-
-    .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
-        transform: translate(0.25rem, 0.25rem);
-        border-radius: $border-radius;
-    }
-}
-
-@media (min-width: 1400px) {
-    .blue-layout.expandSidebar {
-        @include openSidebarMenu();
-
-        .blue-sidebar {
-            box-shadow: none !important;
-            // background: transparent;
-        }
-
-        .blue-page {
-            margin-left: $bla-sidebar-width;
-        }
-
-        .blue-sidebar-toggler {
-            display: none;
-        }
-
-        .blue-header {
-            left: 0;
-        }
-    }
-
-    .blue-layout .blue-header-logo {
-        padding-left: $spacer;
-    }
-}
-
-.blue-open-menu {
-    position: absolute !important;
-    margin-top: 0 !important;
-    left: 0;
-    justify-content: center;
-
-    &,
-    &:hover,
-    &:focus {
-        color: $sidebar-color;
-        background-color: $sidebar-bg;
-        border-color: transparent;
-    }
-}
-
-.blue-sidebar {
-    @include custom-scrollbar($sidebar-color, $sidebar-bg, 0.3rem);
-    overflow-y: auto;
-}
-
-.blue-sidebar-bottom {
-    width: auto;
-    background-color: var(--sidebar-bg);
-    transition: box-shadow 0.2s;
-
-    &.has-shadow {
-        box-shadow: 0 -2rem 2rem rgba(black, 0.1);
-    }
-}
-
-.blue-page {
-    background-color: $body-bg;
-    min-height: calc(100vh - #{$normal-size});
-    margin-top: $normal-size;
-}
-
-.blue-layout.disableHeaders {
-    .blue-page {
-        margin-top: initial;
-        min-height: calc(100vh);
-    }
-}
-
-.blue-header-logo {
-    padding: 0.625rem 0.938rem;
-    margin: 0;
-    cursor: default;
-    display: inline-block;
-    font-weight: 300;
-    font-size: $bla-header-logo-font-size;
-    position: absolute;
-    z-index: 1;
-
-    a {
-        color: inherit;
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-}
-
-.blue-header-logo-image {
-    width: 2rem;
-    height: 2rem;
-    margin-top: -0.25rem;
-}
-
-.blue-menu-item {
-    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;
-    margin-bottom: 0.125rem;
-
-    &:hover {
-        box-shadow: none !important;
-    }
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.blue-menu-item-label {
-    display: none;
-    max-height: 100%;
-}
-
-.blue-menu-item-icon {
-    display: inline-block;
-
-    & > * {
-        display: block;
-        width: 1.5rem;
-    }
-}
-
-.blue-menu-item-icon.iconForActive {
-    display: none;
-}
-
-.blue-menu-item.active {
-    .blue-menu-item-icon.hasIconForActive {
-        display: none;
-    }
-    .blue-menu-item-icon.iconForActive {
-        display: inline-block;
-    }
-}
-
-.blue-menu-item-dropdown {
-    margin-left: 1rem;
-    animation: blue-menu-item-dropdown 0.15s;
-    position: relative;
-
-    &::before {
-        content: "";
-        position: absolute;
-        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%)};
-
-        .blue-menu-item-dropdown {
-            --sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
-
-            .blue-menu-item-dropdown {
-                --sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
-
-                .blue-menu-item-dropdown {
-                    --sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
-
-                    .blue-menu-item-dropdown {
-                        --sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
-                    }
-                }
-            }
-        }
-    }
-}
-
-.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;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    align-items: center;
-}
+.blue-layout {
+    position: relative;
+    min-height: 100vh;
+
+    &.hasNoSidebarMenu {
+        .blue-page,
+        .blue-header {
+            padding-left: 0;
+        }
+
+        .blue-sidebar-toggler {
+            display: none;
+        }
+
+        .blue-page {
+            margin-left: 0;
+        }
+
+        .blue-header-extension {
+            left: 0;
+            padding-right: 0;
+        }
+    }
+
+    &.open {
+        @media screen and (max-width: 1400px) {
+            .router-page.active {
+                .blue-page {
+                    filter: blur(3px) brightness(0.8);
+                }
+            }
+        }
+
+        @include openSidebarMenu();
+    }
+
+    &:not(.open) {
+        .blue-sidebar-visible-on-open {
+            display: none;
+        }
+
+        .blue-sidebar-hidden-on-open {
+            animation: fade-in 1s;
+        }
+    }
+}
+
+.blue-header-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.blue-sidebar-toggler {
+    position: fixed;
+    width: $normal-size;
+    height: $normal-size;
+    left: 0;
+    top: 0;
+    z-index: 3;
+}
+
+.blue-header {
+    @include header-bg();
+    color: $header-color;
+}
+
+// .blue-layout:not(.wrapper-in) .blue-header {
+//     overflow: hidden;
+// }
+
+.blue-header {
+    height: $normal-size;
+    position: fixed;
+    top: 0;
+    left: $normal-size;
+    right: 0;
+    z-index: 4;
+
+    @media screen and (min-width: 768px) {
+        right: $scrollbar-size;
+    }
+
+    .navbar-nav {
+        margin: 0;
+
+        > li {
+            float: left;
+
+            > a {
+                background-color: transparent;
+                color: $header-color;
+                padding: $bla-header-nav-padding;
+
+                &:hover,
+                &:focus {
+                    background-color: $bla-button-bg-hover;
+                }
+            }
+        }
+    }
+
+    .navbar-left {
+        float: left !important;
+    }
+
+    .navbar-right {
+        float: right !important;
+    }
+
+    .blue-search {
+        width: 16rem;
+    }
+}
+
+.blue-normal-scrollbar,
+.modal-body,
+.blue-page {
+    @include custom-scrollbar($body-color, $body-bg, 0.3rem);
+}
+
+.blue-page {
+    margin-left: $normal-size;
+    animation: enabledBlueAppPage 0.5s;
+
+    &::before,
+    &::after {
+        content: "";
+        display: table;
+    }
+}
+
+@include blue-sidebar($normal-size);
+
+@media (max-width: 600px) {
+    @include blue-sidebar(0);
+    .blue-layout:not(.open) .blue-sidebar {
+        left: -$normal-size;
+    }
+
+    .blue-page {
+        margin-left: 0;
+    }
+
+    .blue-layout.disableHeaders {
+        .blue-page {
+            padding-top: $normal-size;
+        }
+    }
+
+    .blue-sidebar-toggler {
+        transition: transform 0.5s;
+    }
+
+    .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
+        transform: translate(0.25rem, 0.25rem);
+        border-radius: $border-radius;
+    }
+}
+
+@media (min-width: 1400px) {
+    .blue-layout.expandSidebar {
+        @include openSidebarMenu();
+
+        .blue-sidebar {
+            box-shadow: none !important;
+            // background: transparent;
+        }
+
+        .blue-page {
+            margin-left: $bla-sidebar-width;
+        }
+
+        .blue-sidebar-toggler {
+            display: none;
+        }
+
+        .blue-header {
+            left: 0;
+        }
+    }
+
+    .blue-layout .blue-header-logo {
+        padding-left: $spacer;
+    }
+}
+
+.blue-open-menu {
+    position: absolute !important;
+    margin-top: 0 !important;
+    left: 0;
+    justify-content: center;
+
+    &,
+    &:hover,
+    &:focus {
+        color: $sidebar-color;
+        background-color: $sidebar-bg;
+        border-color: transparent;
+    }
+}
+
+.blue-sidebar {
+    @include custom-scrollbar($sidebar-color, $sidebar-bg, 0.3rem);
+    overflow-y: auto;
+}
+
+.blue-sidebar-bottom {
+    width: auto;
+    background-color: var(--sidebar-bg);
+    transition: box-shadow 0.2s;
+
+    &.has-shadow {
+        box-shadow: 0 -2rem 2rem rgba(black, 0.1);
+    }
+}
+
+.blue-page {
+    background-color: $body-bg;
+    min-height: calc(100vh - #{$normal-size});
+    margin-top: $normal-size;
+}
+
+.blue-layout.disableHeaders {
+    .blue-page {
+        margin-top: initial;
+        min-height: calc(100vh);
+    }
+}
+
+.blue-header-logo {
+    padding: 0.625rem 0.938rem;
+    margin: 0;
+    cursor: default;
+    display: inline-block;
+    font-weight: 300;
+    font-size: $bla-header-logo-font-size;
+    position: absolute;
+    z-index: 1;
+
+    a {
+        color: inherit;
+
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}
+
+.blue-header-logo-image {
+    width: 2rem;
+    height: 2rem;
+    margin-top: -0.25rem;
+}
+
+.blue-menu-item {
+    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;
+    margin-bottom: 0.125rem;
+
+    &:hover {
+        box-shadow: none !important;
+    }
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.blue-menu-item-label {
+    display: none;
+    max-height: 100%;
+}
+
+.blue-menu-item-icon {
+    display: inline-block;
+
+    & > * {
+        display: block;
+        width: 1.5rem;
+    }
+}
+
+.blue-menu-item-icon.iconForActive {
+    display: none;
+}
+
+.blue-menu-item.active {
+    .blue-menu-item-icon.hasIconForActive {
+        display: none;
+    }
+    .blue-menu-item-icon.iconForActive {
+        display: inline-block;
+    }
+}
+
+.blue-menu-item-dropdown {
+    margin-left: 1rem;
+    animation: blue-menu-item-dropdown 0.15s;
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        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%)};
+
+        .blue-menu-item-dropdown {
+            --sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
+
+            .blue-menu-item-dropdown {
+                --sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
+
+                .blue-menu-item-dropdown {
+                    --sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
+
+                    .blue-menu-item-dropdown {
+                        --sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
+                    }
+                }
+            }
+        }
+    }
+}
+
+.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;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    align-items: center;
+}