blue-react 6.9.2

package/dist/style/_grid.scss

@@ -0,0 +1,316 @@
+.blue-app-grid {
+    position: relative;
+    // padding-top: $normal-size;
+    min-height: 100vh;
+
+    &.hasNoSidebarMenu {
+        .blue-app-page,
+        .blue-app-header {
+            padding-left: 0;
+        }
+
+        .blue-app-sidebar-toggler {
+            display: none;
+        }
+
+        .blue-app-page {
+            margin-left: 0;
+        }
+
+        .blue-app-header-extension {
+            left: 0;
+            padding-right: 0;
+        }
+    }
+
+    &.open {
+        @media screen and (max-width: 1400px) {
+            // --sidebar-bg: #{$sidebar-open-bg};
+
+            .router-page.active {
+                .blue-app-page {
+                    filter: blur(3px) brightness(.8);
+                }
+        
+                // &::after {
+                //     content: "";
+                //     position: absolute;
+                //     top: 0; right: 0; bottom: 0; left: 0;
+                //     background: linear-gradient(rgba($theme, 0.1), transparent);
+                // }
+            }
+        }
+
+        @include openSidebarMenu();
+    }
+
+    &:not(.open){
+        .blue-app-sidebar-visible-on-open {
+            display: none;
+        }
+
+        .blue-app-sidebar-hidden-on-open {
+            animation: fade-in 1s;
+        }
+    }
+}
+
+.ui-header-wrapper {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+}
+
+.blue-app-sidebar-toggler {
+    position: fixed;
+    width: 48px;
+    height: 48px;
+    left: 0;
+    top: 0;
+    z-index: 3;
+}
+
+.blue-app-sidebar-toggler,
+.blue-app-header {
+    @include header-bg();
+}
+
+.blue-app-grid:not(.wrapper-in) .blue-app-header {
+    overflow: hidden;
+}
+
+.blue-app-header {
+    height: $normal-size;
+    color: $header-color;
+    position: fixed;
+    top: 0;
+    left: $normal-size;
+    right: 0;
+    z-index: 4;
+
+    @media screen and (min-width: 768px) {
+        right: 1rem;
+    }
+    
+    .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-app-header-form {
+        padding: .4rem;
+        float: right;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        position: relative;
+
+        &.form-horizontal {
+            .form-group {
+                display: flex;
+                align-items: center;
+            }
+
+            .control-label {
+                padding-top: 0;
+            }
+        }
+    }
+
+    .blue-app-search {
+        width: 256px;
+    }
+}
+
+.blue-app-page {
+    @include custom-scrollbar(#333, white, .3rem);
+
+    margin-left: $normal-size;
+    animation: enabledBlueAppPage .5s;
+
+    // &.active {
+    //     animation: enabledBlueAppPage .5s;
+    // }
+}
+
+@include blue-app-sidebar($normal-size);
+
+@media (max-width: 600px) {
+    @include blue-app-sidebar(0);
+    .blue-app-grid:not(.open) .blue-app-sidebar {
+        left: -$normal-size;
+    }
+    
+    .blue-app-page {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 1400px) {
+    .blue-app-grid.expand-sidebar {
+        @include openSidebarMenu();
+
+        .blue-app-sidebar {
+            box-shadow: none !important;
+            // background: transparent;
+        }
+
+        .blue-app-page {
+            margin-left: $bla-sidebar-width;
+        }
+
+        .blue-app-sidebar-toggler {
+            display: none;
+        }
+
+        .blue-app-header {
+            left: 0;
+        }
+    }
+}
+
+.blue-app-open-menu {
+   position: absolute !important;
+   margin-top: 0 !important;
+   left: 0;
+   background-color: $bla-button-bg-normal !important;
+   border-color: transparent !important;
+
+   &:hover,
+   &:focus {
+       color: $sidebar-color;
+       background-color: $bla-button-bg-hover;
+       border-color: transparent;
+   }
+}
+
+.blue-app-sidebar {
+    overflow-y: auto;
+}
+
+.blue-app-sidebar-bottom {
+    width: auto;
+    background-color: var(--sidebar-bg);
+    transition: box-shadow .2s;
+
+    &.has-shadow {
+        box-shadow: 0 -2rem 2rem rgba(black,.1);
+        
+    }
+}
+
+.blue-app-page {
+   padding-bottom: 10px;
+   background-color: $body-bg;
+   min-height: calc(100vh - #{$normal-size});
+   margin-top: $normal-size;
+}
+
+.blue-app-header-logo {
+   padding: 10px 15px;
+   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-app-header-logo-image {
+   width: 32px;
+   height: 32px;
+   margin-top: -4px;
+}
+
+.blue-app-sidebar-btn {
+    border-radius: 0;
+    transition: width .5s !important;
+    padding: 8px 12px;
+    border: none;
+    margin-top: 2px;
+    margin-bottom: 2px;
+
+    &:hover {
+        box-shadow: none !important;
+    }
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.blue-app-sidebar-label {
+   display: none;
+   max-height: 100%;
+}
+
+.blue-app-sidebar-dropdown {
+    margin-left: 1rem;
+    animation: blue-app-sidebar-dropdown .2s;
+
+    --sidebar-bg: #{$sidebar-deep-bg};
+    background: var(--sidebar-bg);
+
+    .blue-app-sidebar-dropdown {
+        --sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
+
+        .blue-app-sidebar-dropdown {
+            --sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
+
+            .blue-app-sidebar-dropdown {
+                --sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
+
+                .blue-app-sidebar-dropdown {
+                    --sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
+
+                    .blue-app-sidebar-dropdown {
+                        --sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-app-sidebar-dropdown-caret.caret {
+    display: none;
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    align-items: center;
+}
+
+.blue-app-page-nav-btn {
+    position: relative;
+    z-index: 1;
+}

package/dist/style/_keyframes.scss

@@ -0,0 +1,68 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes blAppearUp {
+    from {
+        margin-top: 40px;
+    }
+    to {
+        margin-top: 0;
+    }
+}
+
+@keyframes blue-app-sidebar-dropdown {
+    from {
+        transform: translateY(-50%);
+    }
+}
+
+@keyframes enabledBlueAppPage {
+    from {
+        // margin-top: $normal-size + 60px;
+        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: .2;
+        transition: 0s;
+    }
+}
+
+@keyframes circlebounce {
+    0%, 100% { transform: scale(0.0); }
+    50% { transform: scale(1.0); }
+}
+
+@keyframes scrolling {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}

package/dist/style/_mixins.scss

@@ -0,0 +1,7 @@
+@import "./mixins/_misc.scss";
+@import "./mixins/_sidebar.scss";
+@import "./mixins/_actions_deprecated.scss";
+@import "./mixins/_actions.scss";
+@import "./mixins/_switch.scss";
+@import "./mixins/custom-property.scss";
+@import "./mixins/scroll-shadow";

package/dist/style/_ripple.scss

@@ -0,0 +1,26 @@
+.ripple {
+    position: relative;
+    overflow: hidden;
+    transform: translate3d(0, 0, 0);
+}
+.ripple:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: radial-gradient(circle, rgba(black, .7) 10%, transparent 10.01%);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform .5s, opacity 1s;
+}
+.ripple:active:after {
+    transform: scale(0, 0);
+    opacity: .2;
+    transition: 0s;
+}

package/dist/style/_router.scss

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

package/dist/style/_search.scss

@@ -0,0 +1,48 @@
+.blue-app-search {
+    height: $normal-size;
+    display: flex;
+    align-items: center;
+
+    &.blue-app-search-body {
+        border: 1px solid $input-border-color;
+        border-radius: 4px;
+
+        .blue-app-search-input-group {
+            display: flex;
+        }
+
+        &.focus {
+            box-shadow: $input-btn-focus-box-shadow;
+        }
+    }
+
+    &.focus {
+        box-shadow: inset $input-btn-focus-box-shadow;
+    }
+}
+
+.blue-app-search-input-group {
+    display: none;
+
+    .input-group-text {
+        border-color: transparent;
+        background-color: transparent;
+    }
+}
+
+.blue-app-search-control {
+    border: none;
+    background-color: transparent !important;
+
+    &:focus {
+        box-shadow: none;
+    }
+}
+
+.blue-app-search-reset-btn {
+    color: rgba($input-color, .7);
+
+    &:hover {
+        color: $input-color;
+    }
+}

package/dist/style/_status.scss

@@ -0,0 +1,138 @@
+.blue-app-loading {
+    background-color: $primary;
+}
+
+.blue-app-status-alert,
+.blue-app-status-circle {
+    position: fixed;
+    display: none;
+    box-shadow: 0 5px 15px rgba(0,0,0,.2);
+}
+
+.blue-app-status-alert,
+.blue-app-status-circle {
+    z-index: 6000;
+}
+
+.blue-app-status-alert {
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 50%;
+        left: 0;
+        pointer-events: none;
+        background-image: radial-gradient(circle, rgba(black, .7) 10%, transparent 10.01%);
+        background-repeat: no-repeat;
+        background-position: 50%;
+        animation: alert-in 1s;
+        transform: scale(10, 10);
+        opacity: 0;
+        transition: transform .5s, opacity 1s;
+    }
+
+    transform: translate3d(0, 0, 0);
+    overflow: hidden;
+    white-space: pre-wrap;
+
+    bottom: 40px + 64px + 15px;
+    left: 1rem;
+    right: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+    .blue-app-status-alert {
+        left: calc(50% - 300px);
+        right: calc(50% - 300px);
+    }
+}
+
+.blue-app-status-circle {
+   bottom: 40px;
+   left: calc(50% - 20px);
+   border-radius: 50%;
+   width: 64px;
+   height: 64px;
+   color: #fff;
+
+   &:not(.blue-app-loading) {
+        text-align: center;
+        padding-top: 5px;
+        font-size: 2.5em;
+   }
+}
+
+.blue-app-status-success {
+   background-color: #5cb85c;
+}
+
+.blue-app-status-info {
+    background-color: #5bc0de;
+}
+
+.blue-app-status-warning {
+    background-color: #d58512;
+}
+
+.blue-app-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 2.0s infinite ease-in-out;
+    animation: circlebounce 2.0s infinite ease-in-out;
+}
+
+.spinner-bounce-circle div:nth-child(1) {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+$bla-status-bar-width: 600px;
+$bla-status-bar-loading-height: 2px;
+
+.blue-app-status-bar {
+    background-color: rgba(0,0,0,.7);
+    color: #fff;
+    position: fixed;
+    z-index: 6;
+    // width: 100%;
+    box-sizing: border-box;
+    right: 0;
+    bottom: 0;
+    padding: .4rem;
+    padding-top: calc(.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/style/_switch.scss

@@ -0,0 +1,22 @@
+$width: 35px;
+$height: 20px;
+$padding: 3px;
+
+$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%;
+}