blue-react 7.8.0-next.2 → 8.0.0-next.2

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v7.8.0-next.2 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.0.0-next.2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -19,7 +19,6 @@
 @import "./styles/_grid";
 @import "./styles/_search";
 @import "./styles/action-menu";
-@import "./styles/_actions";
 @import "./styles/_switch";
 @import "./styles/_caret";
 @import "./styles/_tooltips";

package/dist/styles/_action-menu.scss

@@ -1,4 +1,4 @@
-.blue-app-actions-menu {
+.blue-actions-menu {
     .nav-link {
         position: relative;
         margin-left: 2px;
@@ -11,7 +11,7 @@
     }
 }
 
-.blue-app-actions {
+.blue-actions {
     display: inline;
     transition: background-color 0.5s linear;
     position: absolute;
@@ -22,7 +22,7 @@
     max-height: $normal-size;
     overflow: hidden;
 
-    .blue-app-actions-menu {
+    .blue-actions-menu {
         max-width: $normal-size;
     }
 
@@ -52,29 +52,29 @@
     }
 
     // Support for MenuItems
-    .blue-app-sidebar-btn {
+    .blue-menu-item {
         width: auto;
         margin-top: 0;
         margin-bottom: 0;
     }
 
-    .blue-app-sidebar-dropdown-toggle .blue-app-sidebar-label {
+    .blue-menu-item-dropdown-toggle .blue-menu-item-label {
         margin-right: 2rem;
     }
 
-    .blue-app-sidebar-label,
-    .blue-app-sidebar-dropdown-caret.caret {
+    .blue-menu-item-label,
+    .blue-menu-item-dropdown-caret.caret {
         display: initial;
     }
 }
 
-.blue-app-actions-menu-toggle {
+.blue-actions-menu-toggle {
     & > span:first-child {
         transform: rotate(90deg);
     }
 }
 
-.blue-app-actions-menu-item {
+.blue-actions-menu-item {
     display: flex;
     align-items: center;
     color: inherit;

package/dist/styles/_general.scss

@@ -52,7 +52,7 @@ body {
 body {
     background: var(--sidebar-bg, $theme);
 
-    .blue-app-wrapper {
+    .blue-wrapper {
         position: fixed;
         width: 100%;
         width: 100%;
@@ -65,7 +65,7 @@ body {
     }
 
     &.open {
-        .blue-app-wrapper {
+        .blue-wrapper {
             display: block;
         }
     }
@@ -132,7 +132,7 @@ label {
     top: -0.375rem;
 }
 
-.blue-app-wrapper {
+.blue-wrapper {
     z-index: 3 !important;
 
     &.active {
@@ -141,7 +141,7 @@ label {
 }
 
 @media screen and (max-width: 768px) {
-    .blue-app-header-extension .blue-app-header-logo-title-labels:not(.keep) {
+    .blue-header-extension .blue-header-logo-title-labels:not(.keep) {
         display: none;
     }
 }
@@ -165,7 +165,7 @@ label {
     width: $bla-sidebar-width;
 }
 
-.blue-app-header-logo.sidebar {
+.blue-header-logo.sidebar {
     width: $bla-sidebar-width;
     padding-left: calc(#{$normal-size} + #{$spacer});
     transform: translateX(-100%);

package/dist/styles/_grid.scss

@@ -1,23 +1,22 @@
-.blue-app-grid {
+.blue-layout {
     position: relative;
-    // padding-top: $normal-size;
     min-height: 100vh;
 
     &.hasNoSidebarMenu {
-        .blue-app-page,
-        .blue-app-header {
+        .blue-page,
+        .blue-header {
             padding-left: 0;
         }
 
-        .blue-app-sidebar-toggler {
+        .blue-sidebar-toggler {
             display: none;
         }
 
-        .blue-app-page {
+        .blue-page {
             margin-left: 0;
         }
 
-        .blue-app-header-extension {
+        .blue-header-extension {
             left: 0;
             padding-right: 0;
         }
@@ -26,7 +25,7 @@
     &.open {
         @media screen and (max-width: 1400px) {
             .router-page.active {
-                .blue-app-page {
+                .blue-page {
                     filter: blur(3px) brightness(0.8);
                 }
             }
@@ -36,17 +35,17 @@
     }
 
     &:not(.open) {
-        .blue-app-sidebar-visible-on-open {
+        .blue-sidebar-visible-on-open {
             display: none;
         }
 
-        .blue-app-sidebar-hidden-on-open {
+        .blue-sidebar-hidden-on-open {
             animation: fade-in 1s;
         }
     }
 }
 
-.ui-header-wrapper {
+.blue-header-wrapper {
     position: absolute;
     top: 0;
     right: 0;
@@ -54,7 +53,7 @@
     left: 0;
 }
 
-.blue-app-sidebar-toggler {
+.blue-sidebar-toggler {
     position: fixed;
     width: $normal-size;
     height: $normal-size;
@@ -63,16 +62,16 @@
     z-index: 3;
 }
 
-.blue-app-sidebar-toggler,
-.blue-app-header {
+.blue-sidebar-toggler,
+.blue-header {
     @include header-bg();
 }
 
-// .blue-app-grid:not(.wrapper-in) .blue-app-header {
+// .blue-layout:not(.wrapper-in) .blue-header {
 //     overflow: hidden;
 // }
 
-.blue-app-header {
+.blue-header {
     height: $normal-size;
     color: $header-color;
     position: fixed;
@@ -112,18 +111,18 @@
         float: right !important;
     }
 
-    .blue-app-search {
+    .blue-search {
         width: 16rem;
     }
 }
 
 .blue-normal-scrollbar,
 .modal-body,
-.blue-app-page {
+.blue-page {
     @include custom-scrollbar($body-color, $body-bg, 0.3rem);
 }
 
-.blue-app-page {
+.blue-page {
     margin-left: $normal-size;
     animation: enabledBlueAppPage 0.5s;
 
@@ -134,62 +133,62 @@
     }
 }
 
-@include blue-app-sidebar($normal-size);
+@include blue-sidebar($normal-size);
 
 @media (max-width: 600px) {
-    @include blue-app-sidebar(0);
-    .blue-app-grid:not(.open) .blue-app-sidebar {
+    @include blue-sidebar(0);
+    .blue-layout:not(.open) .blue-sidebar {
         left: -$normal-size;
     }
 
-    .blue-app-page {
+    .blue-page {
         margin-left: 0;
     }
 
-    .blue-app-grid.disableHeaders {
-        .blue-app-page {
+    .blue-layout.disableHeaders {
+        .blue-page {
             padding-top: $normal-size;
         }
     }
 
-    .blue-app-sidebar-toggler {
+    .blue-sidebar-toggler {
         transition: transform 0.5s;
     }
 
-    .blue-app-grid:not(.open).disableHeaders .blue-app-sidebar-toggler {
+    .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
         transform: translate(0.25rem, 0.25rem);
         border-radius: $border-radius;
     }
 }
 
 @media (min-width: 1400px) {
-    .blue-app-grid.expand-sidebar {
+    .blue-layout.expandSidebar {
         @include openSidebarMenu();
 
-        .blue-app-sidebar {
+        .blue-sidebar {
             box-shadow: none !important;
             // background: transparent;
         }
 
-        .blue-app-page {
+        .blue-page {
             margin-left: $bla-sidebar-width;
         }
 
-        .blue-app-sidebar-toggler {
+        .blue-sidebar-toggler {
             display: none;
         }
 
-        .blue-app-header {
+        .blue-header {
             left: 0;
         }
     }
 
-    .blue-app-grid > .blue-app-header-logo {
+    .blue-layout .blue-header-logo {
         padding-left: $spacer;
     }
 }
 
-.blue-app-open-menu {
+.blue-open-menu {
     position: absolute !important;
     margin-top: 0 !important;
     left: 0;
@@ -205,11 +204,11 @@
     }
 }
 
-.blue-app-sidebar {
+.blue-sidebar {
     overflow-y: auto;
 }
 
-.blue-app-sidebar-bottom {
+.blue-sidebar-bottom {
     width: auto;
     background-color: var(--sidebar-bg);
     transition: box-shadow 0.2s;
@@ -219,20 +218,20 @@
     }
 }
 
-.blue-app-page {
+.blue-page {
     background-color: $body-bg;
     min-height: calc(100vh - #{$normal-size});
     margin-top: $normal-size;
 }
 
-.blue-app-grid.disableHeaders {
-    .blue-app-page {
+.blue-layout.disableHeaders {
+    .blue-page {
         margin-top: initial;
         min-height: calc(100vh);
     }
 }
 
-.blue-app-header-logo {
+.blue-header-logo {
     padding: 0.625rem 0.938rem;
     margin: 0;
     cursor: default;
@@ -251,13 +250,13 @@
     }
 }
 
-.blue-app-header-logo-image {
+.blue-header-logo-image {
     width: 2rem;
     height: 2rem;
     margin-top: -0.25rem;
 }
 
-.blue-app-sidebar-btn {
+.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;
@@ -274,12 +273,12 @@
     }
 }
 
-.blue-app-sidebar-label {
+.blue-menu-item-label {
     display: none;
     max-height: 100%;
 }
 
-.blue-app-menu-item-icon {
+.blue-menu-item-icon {
     display: inline-block;
 
     & > * {
@@ -288,39 +287,39 @@
     }
 }
 
-.blue-app-menu-item-icon.iconForActive {
+.blue-menu-item-icon.iconForActive {
     display: none;
 }
 
-.blue-app-sidebar-btn.active {
-    .blue-app-menu-item-icon.hasIconForActive {
+.blue-menu-item.active {
+    .blue-menu-item-icon.hasIconForActive {
         display: none;
     }
-    .blue-app-menu-item-icon.iconForActive {
+    .blue-menu-item-icon.iconForActive {
         display: inline-block;
     }
 }
 
-.blue-app-sidebar-dropdown {
+.blue-menu-item-dropdown {
     margin-left: 1rem;
-    animation: blue-app-sidebar-dropdown 0.15s;
+    animation: blue-menu-item-dropdown 0.15s;
 
     --sidebar-bg: #{$sidebar-deep-bg};
     background: var(--sidebar-bg);
 
-    .blue-app-sidebar-dropdown {
+    .blue-menu-item-dropdown {
         --sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
 
-        .blue-app-sidebar-dropdown {
+        .blue-menu-item-dropdown {
             --sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
 
-            .blue-app-sidebar-dropdown {
+            .blue-menu-item-dropdown {
                 --sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
 
-                .blue-app-sidebar-dropdown {
+                .blue-menu-item-dropdown {
                     --sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
 
-                    .blue-app-sidebar-dropdown {
+                    .blue-menu-item-dropdown {
                         --sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
                     }
                 }
@@ -329,16 +328,11 @@
     }
 }
 
-.blue-app-sidebar-dropdown-caret.caret {
+.blue-menu-item-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/styles/_keyframes.scss

@@ -16,7 +16,7 @@
     }
 }
 
-@keyframes blue-app-sidebar-dropdown {
+@keyframes blue-menu-item-dropdown {
     from {
         transform: translateY(-50%);
         opacity: 0;

package/dist/styles/_mixins.scss

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

package/dist/styles/_search.scss

@@ -1,13 +1,13 @@
-.blue-app-search {
+.blue-search {
     height: $normal-size;
     display: flex;
     align-items: center;
     border-radius: $input-border-radius;
 
-    &.blue-app-search-body {
+    &.blue-search-body {
         border: 1px solid $input-border-color;
 
-        .blue-app-search-input-group {
+        .blue-search-input-group {
             display: flex;
         }
 
@@ -21,12 +21,12 @@
     }
 }
 
-.blue-app-sidebar .blue-app-search:not(.blue-app-search-body) {
+.blue-sidebar .blue-search:not(.blue-search-body) {
     margin-left: map-get($spacers, 1);
     margin-right: map-get($spacers, 1);
 }
 
-.blue-app-search-input-group {
+.blue-search-input-group {
     display: none;
 
     .input-group-text {
@@ -35,7 +35,7 @@
     }
 }
 
-.blue-app-search-control {
+.blue-search-control {
     border: none;
     background-color: transparent !important;
 
@@ -44,7 +44,7 @@
     }
 }
 
-.blue-app-search-reset-btn {
+.blue-search-reset-btn {
     color: rgba($input-color, 0.7);
 
     &:hover {
@@ -52,10 +52,10 @@
     }
 }
 
-.blue-app-search.blue-app-search-sidebar {
+.blue-search.blue-search-sidebar {
     transition: opacity 0.2s ease-in-out;
 }
 
-.blue-app-search.blue-app-search-sidebar:not(:hover):not(.focus) {
-    opacity: 0.5;
+.blue-search.blue-search-sidebar:not(:hover):not(.focus) {
+    opacity: 0.7;
 }

package/dist/styles/_status.scss

@@ -1,20 +1,20 @@
-.blue-app-loading {
+.blue-loading {
     background-color: $primary;
 }
 
-.blue-app-status-alert,
-.blue-app-status-circle {
+.blue-status-alert,
+.blue-status-circle {
     position: fixed;
     display: none;
     box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
 }
 
-.blue-app-status-alert,
-.blue-app-status-circle {
+.blue-status-alert,
+.blue-status-circle {
     z-index: 6000;
 }
 
-.blue-app-status-alert {
+.blue-status-alert {
     @include custom-scrollbar(white, rgba(black, 0.5), 0.3rem);
 
     &:after {
@@ -56,13 +56,13 @@
 }
 
 @media screen and (min-width: 768px) {
-    .blue-app-status-alert {
+    .blue-status-alert {
         left: calc(50% - 18.75rem);
         right: calc(50% - 18.75rem);
     }
 }
 
-.blue-app-status-circle {
+.blue-status-circle {
     bottom: 2.5rem;
     left: calc(50% - 1.25rem);
     border-radius: 50%;
@@ -70,26 +70,26 @@
     height: 4rem;
     color: #fff;
 
-    &:not(.blue-app-loading) {
+    &:not(.blue-loading) {
         align-items: center;
         justify-content: center;
         font-size: 2.5em;
     }
 }
 
-.blue-app-status-success {
+.blue-status-success {
     background-color: #5cb85c;
 }
 
-.blue-app-status-info {
+.blue-status-info {
     background-color: #5bc0de;
 }
 
-.blue-app-status-warning {
+.blue-status-warning {
     background-color: #d58512;
 }
 
-.blue-app-status-danger {
+.blue-status-danger {
     background-color: #d43f3a;
 }
 
@@ -123,7 +123,7 @@
 $bla-status-bar-width: 37.5rem;
 $bla-status-bar-loading-height: 2px;
 
-.blue-app-status-bar {
+.blue-status-bar {
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     position: fixed;

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

@@ -2,7 +2,7 @@
     max-height: initial;
     overflow: initial;
 
-    .blue-app-actions-menu {
+    .blue-actions-menu {
         max-width: initial;
     }
 }
@@ -38,18 +38,18 @@
                 }
             }
 
-            .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
+            .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
                 display: flex;
             }
 
-            .blue-app-actions-menu {
-                .blue-app-sidebar-dropdown {
+            .blue-actions-menu {
+                .blue-menu-item-dropdown {
                     --sidebar-bg: #{darken($theme, 34%)};
                 }
             }
         }
 
-        .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
+        .blue-actions-menu-item:not(.blue-actions-menu-toggle) {
             display: none;
         }
     }
@@ -57,11 +57,11 @@
     @media screen and (min-width: $breakpoint) {
         @include show-action-menu-again();
 
-        .blue-app-actions-menu .blue-app-actions-label {
+        .blue-actions-menu .blue-actions-label {
             display: inline;
         }
 
-        .blue-app-actions-menu-toggle {
+        .blue-actions-menu-toggle {
             display: none;
         }
     }