blue-web 1.0.0

package/dist/styles/_keyframes.scss

@@ -0,0 +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%);
+    }
+}

package/dist/styles/_layout.scss

@@ -0,0 +1,378 @@
+.blue-layout {
+    position: relative;
+    min-height: 100vh;
+    min-height: 100dvh;
+
+    &.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 !important;
+        }
+
+        .blue-sidebar-hidden-on-open {
+            animation: fade-in 1s;
+        }
+    }
+}
+
+.blue-sidebar-toggler {
+    position: fixed;
+    width: $normal-size;
+    height: $normal-size;
+    left: 0;
+    top: 0;
+    z-index: 5;
+}
+
+.blue-header {
+    @include header-bg();
+    color: var(--blue-header-color);
+}
+
+.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: var(--blue-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 blue-custom-scrollbar(
+        var(--bs-body-bg, #{$body-bg}),
+        var(--bs-tertiary-color, #{$body-color}),
+        var(--bs-secondary-color, #{$body-color}),
+        var(--bs-body-color, #{$body-color}),
+        0.3rem
+    );
+}
+
+.blue-page {
+    margin-left: $normal-size;
+    animation: enabledBlueAppPage 0.5s;
+    border-top-left-radius: var(--bs-border-radius, 0.5rem);
+    border-top-right-radius: var(--bs-border-radius, 0.5rem);
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), var(--bs-bg-opacity));
+
+    &::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;
+        }
+
+        &.hideToggleExpandSidebar .blue-header {
+            left: 0;
+        }
+    }
+
+    .blue-layout .blue-header-title {
+        padding-left: $spacer;
+    }
+}
+
+.blue-open-menu {
+    position: absolute !important;
+    margin-top: 0 !important;
+    left: 0;
+    justify-content: center;
+
+    &,
+    &:hover,
+    &:focus {
+        color: var(--blue-sidebar-color);
+        background-color: var(--blue-sidebar-bg);
+        border-color: transparent;
+    }
+}
+
+.blue-sidebar {
+    @include blue-custom-scrollbar(
+        var(--blue-sidebar-bg),
+        rgba($sidebar-color, 0.5),
+        rgba($sidebar-color, 0.6),
+        rgba($sidebar-color, 0.7),
+        0.3rem
+    );
+    overflow-y: auto;
+}
+
+.blue-sidebar-bottom {
+    width: auto;
+    background-color: var(--blue-sidebar-bg);
+    transition: box-shadow 0.2s;
+
+    &.has-shadow {
+        box-shadow: 0 -2rem 2rem rgba(black, 0.1);
+    }
+}
+
+.blue-page {
+    min-height: calc(100vh - #{$normal-size});
+    min-height: calc(100dvh - #{$normal-size});
+    margin-top: $normal-size;
+}
+
+.blue-layout.disableHeaders {
+    .blue-page {
+        margin-top: initial;
+        min-height: calc(100vh);
+        min-height: calc(100dvh);
+    }
+}
+
+.blue-header-title {
+    a {
+        color: inherit;
+
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}
+
+.blue-header-title-image {
+    width: 2rem;
+    height: 2rem;
+}
+
+.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;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+}
+
+.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 {
+    --blue-sidebar-bg: var(--blue-sidebar-depth-1-bg, #{$sidebar-deep-bg});
+
+    &::before {
+        background-color: var(--blue-sidebar-bg);
+    }
+
+    .blue-menu-item-dropdown {
+        --blue-sidebar-bg: var(--blue-sidebar-depth-2-bg, #{darken($sidebar-deep-bg, 4%)});
+
+        .blue-menu-item-dropdown {
+            --blue-sidebar-bg: var(--blue-sidebar-depth-3-bg, #{darken($sidebar-deep-bg, 8%)});
+
+            .blue-menu-item-dropdown {
+                --blue-sidebar-bg: var(--blue-sidebar-depth-4-bg, #{darken($sidebar-deep-bg, 12%)});
+
+                .blue-menu-item-dropdown {
+                    --blue-sidebar-bg: var(--blue-sidebar-depth-5-bg, #{darken($sidebar-deep-bg, 16%)});
+
+                    .blue-menu-item-dropdown {
+                        --blue-sidebar-bg: var(--blue-sidebar-depth-6-bg, #{darken($sidebar-deep-bg, 20%)});
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-header .blue-menu-item-dropdown {
+    --blue-sidebar-bg: #{$header-deep-bg};
+
+    &::before {
+        background-color: var(--blue-header-bg);
+    }
+
+    .blue-menu-item-dropdown {
+        --blue-sidebar-bg: #{darken($header-deep-bg, 4%)};
+
+        .blue-menu-item-dropdown {
+            --blue-sidebar-bg: #{darken($header-deep-bg, 8%)};
+
+            .blue-menu-item-dropdown {
+                --blue-sidebar-bg: #{darken($header-deep-bg, 12%)};
+
+                .blue-menu-item-dropdown {
+                    --blue-sidebar-bg: #{darken($header-deep-bg, 16%)};
+
+                    .blue-menu-item-dropdown {
+                        --blue-sidebar-bg: #{darken($header-deep-bg, 20%)};
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-menu-item-dropdown-caret.blue-caret {
+    display: none;
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    align-items: center;
+}

package/dist/styles/_mixins.scss

@@ -0,0 +1,7 @@
+@import "./mixins/misc";
+@import "./mixins/menu-item";
+@import "./mixins/sidebar";
+@import "./mixins/action-menu";
+@import "./mixins/switch";
+@import "./mixins/custom-property";
+@import "./mixins/scroll-shadow";

package/dist/styles/_router.scss

@@ -0,0 +1,19 @@
+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: auto;
+    overflow-x: hidden;
+    width: 100vw;
+
+    height: 100vh;
+    height: 100dvh;
+
+    &:not(.active) {
+        display: none;
+    }
+}

package/dist/styles/_search.scss

@@ -0,0 +1,62 @@
+.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

@@ -0,0 +1,36 @@
+.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

@@ -0,0 +1,147 @@
+.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;
+    }
+}