blue-web 1.21.0 → 1.21.2

package/dist/styles/_container-grid.scss

@@ -1,52 +1,52 @@
-@import "node_modules/bootstrap/scss/functions";
-
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/variables-dark";
-
-@import "node_modules/bootstrap/scss/maps";
-@import "node_modules/bootstrap/scss/mixins";
-
-@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-    .col {
-        flex: initial;
-        max-width: initial;
-        width: 100%;
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        @for $i from 1 through $columns {
-            .col#{$infix}-#{$i} {
-                @extend .col;
-            }
-        }
-    }
-
-    @each $breakpoint in map-keys($breakpoints) {
-        $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-        // @for $i from 1 through $columns {
-        //     .col#{$infix}-#{$i} {
-        //         flex: initial;
-        //         max-width: initial;
-        //         width: 100%;
-        //     }
-        // }
-
-        @if breakpoint-min($breakpoint, $breakpoints) {
-            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
-                @for $i from 1 through $columns {
-                    .col#{$infix}-#{$i} {
-                        @include make-col($i, $columns);
-                    }
-                }
-            }
-        }
-    }
-}
-
-.blue-container-grid {
-    container-type: inline-size;
-    @include make-grid-columns-cq();
-}
+@import "node_modules/bootstrap/scss/functions";
+
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/variables-dark";
+
+@import "node_modules/bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/mixins";
+
+@mixin make-grid-columns-cq($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+    .col {
+        flex: initial;
+        max-width: initial;
+        width: 100%;
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        @for $i from 1 through $columns {
+            .col#{$infix}-#{$i} {
+                @extend .col;
+            }
+        }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+        // @for $i from 1 through $columns {
+        //     .col#{$infix}-#{$i} {
+        //         flex: initial;
+        //         max-width: initial;
+        //         width: 100%;
+        //     }
+        // }
+
+        @if breakpoint-min($breakpoint, $breakpoints) {
+            @container (min-width: #{breakpoint-min($breakpoint, $breakpoints)}) {
+                @for $i from 1 through $columns {
+                    .col#{$infix}-#{$i} {
+                        @include make-col($i, $columns);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.blue-container-grid {
+    container-type: inline-size;
+    @include make-grid-columns-cq();
+}

package/dist/styles/_devexpress.scss

@@ -1,104 +1,104 @@
-/* Make DevExpress components look more like Bootstrap/Blue */
-[class^="dxbl-"] {
-    --dxbl-text-edit-border-radius: var(--bs-border-radius) !important;
-    --dxbl-text-edit-padding-x: 0.75rem !important;
-    --dxbl-text-edit-padding-y: 0.375rem !important;
-    --dxbl-text-edit-line-height: 1.5 !important;
-    --dxbl-text-edit-focus-shadow-spread: 0.25rem !important;
-    --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
-    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
-    --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
-    --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
-    --dxbl-btn-border-radius: var(--bs-border-radius) !important;
-    --dxbl-context-menu-border-radius: var(--bs-border-radius) !important;
-    --dxbl-btn-padding-x: 0.75rem !important;
-    --dxbl-btn-padding-y: 0.375rem !important;
-
-    --dxbl-btn-font-size: 1rem;
-    --dxbl-checkbox-font-size: 1rem;
-    --dxbl-calendar-font-size: 1rem;
-    --dxbl-listbox-font-size: 1rem;
-    --dxbl-list-box-font-size: 1rem;
-    --dxbl-list-box-item-drag-hint-font-size: 1rem;
-    --dxbl-color-palette-font-size: 1rem;
-    --dxbl-text-edit-font-size: 1rem;
-    --dxbl-edit-dropdown-font-size: 1rem;
-    --dxbl-pager-font-size: 1rem;
-    --dxbl-grid-font-size: 1rem;
-    --dxbl-grid-draggable-header-font-size: 1rem;
-    --dxbl-grid-row-drag-hint-font-size: 1rem;
-    --dxbl-flyout-font-size: 1rem;
-    --dxbl-popup-font-size: 1rem;
-    --dxbl-dropdown-font-size: 1rem;
-    --dxbl-window-font-size: 1rem;
-    --dxbl-group-font-size: 1rem;
-    --dxbl-fl-font-size: 1rem;
-    --dxbl-fl-group-font-size: 1rem;
-    --dxbl-fl-tab-group-font-size: 1rem;
-    --dxbl-fl-tab-group-content-font-size: 1rem;
-    --dxbl-toolbar-font-size: 1rem;
-    --dxbl-tabs-font-size: 1rem;
-    --dxbl-tabs-content-font-size: 1rem;
-    --dxbl-accordion-group-font-size: 1rem;
-    --dxbl-accordion-group-item-font-size: 1rem;
-    --dxbl-accordion-group-header-font-size: 1rem;
-    --dxbl-treeview-font-size: 1rem;
-    --dxbl-navigation-badge-font-size: 1rem;
-    --dxbl-radio-group-font-size: 1rem;
-    --dxbl-context-menu-font-size: 1rem;
-    --dxbl-menu-item-font-size: 1rem;
-    --dxbl-scheduler-font-size: 1rem;
-    --dxbl-toast-text-font-size: 1rem;
-    --dxbl-toast-header-font-size: 1rem;
-    --dxbl-drawer-panel-font-size: 1rem;
-    --dxbl-progress-bar-label-font-size: 1rem;
-    --dxbl-pivot-font-size: 1rem;
-    --dxbl-pivot-field-font-size: 1rem;
-    --dxbl-pivot-header-font-size: 1rem;
-    --dxbl-pivot-total-font-size: 1rem;
-    --dxbl-pivot-table-font-size: 1rem;
-    --dxbl-pivot-table-header-field-font-size: 1rem;
-    --dxbl-pivot-table-row-field-font-size: 1rem;
-    --dxbl-pivot-table-total-font-size: 1rem;
-    --dx-chatui-message-font-size: 1rem;
-    --dx-chatui-suggestion-item-title-font-size: 1rem;
-    --dx-chatui-attachment-list-item-font-size: 1rem;
-    --dx-chatui-suggestion-item-text-font-size: 1rem;
-    --dxbl-message-box-body-text-font-size: 1rem;
-    --dxbl-message-box-header-font-size: 1rem;
-    --dxbl-splitter-font-size: 1rem;
-    --dxbl-filter-builder-font-size: 1rem;
-}
-
-.dxbl-grid {
-    --dxbl-grid-font-size: 1rem;
-    border: none;
-}
-
-.dxbl-pager-page-edit {
-    min-width: 2.5em;
-}
-
-.dxbl-toolbar {
-    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
-    font-size: var(--dxbl-toolbar-font-size);
-}
-
-body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
-    z-index: 1056 !important;
-}
-
-@if ($enable-button-pointers: false) {
-    .dxbl-context-menu.dxbl-context-menu-dropdown
-        > .dxbl-dropdown-body
-        ul
-        li:not(.dxbl-context-menu-separator)
-        > .dxbl-context-menu-item,
-    .dxbl-context-menu-submenu.dxbl-context-menu-dropdown
-        > .dxbl-dropdown-body
-        ul
-        li:not(.dxbl-context-menu-separator)
-        > .dxbl-context-menu-item {
-        cursor: default;
-    }
-}
+/* Make DevExpress components look more like Bootstrap/Blue */
+[class^="dxbl-"] {
+    --dxbl-text-edit-border-radius: var(--bs-border-radius) !important;
+    --dxbl-text-edit-padding-x: 0.75rem !important;
+    --dxbl-text-edit-padding-y: 0.375rem !important;
+    --dxbl-text-edit-line-height: 1.5 !important;
+    --dxbl-text-edit-focus-shadow-spread: #{$focus-ring-width} !important;
+    --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-context-menu-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-padding-x: 0.75rem !important;
+    --dxbl-btn-padding-y: 0.375rem !important;
+
+    --dxbl-btn-font-size: 1rem;
+    --dxbl-checkbox-font-size: 1rem;
+    --dxbl-calendar-font-size: 1rem;
+    --dxbl-listbox-font-size: 1rem;
+    --dxbl-list-box-font-size: 1rem;
+    --dxbl-list-box-item-drag-hint-font-size: 1rem;
+    --dxbl-color-palette-font-size: 1rem;
+    --dxbl-text-edit-font-size: 1rem;
+    --dxbl-edit-dropdown-font-size: 1rem;
+    --dxbl-pager-font-size: 1rem;
+    --dxbl-grid-font-size: 1rem;
+    --dxbl-grid-draggable-header-font-size: 1rem;
+    --dxbl-grid-row-drag-hint-font-size: 1rem;
+    --dxbl-flyout-font-size: 1rem;
+    --dxbl-popup-font-size: 1rem;
+    --dxbl-dropdown-font-size: 1rem;
+    --dxbl-window-font-size: 1rem;
+    --dxbl-group-font-size: 1rem;
+    --dxbl-fl-font-size: 1rem;
+    --dxbl-fl-group-font-size: 1rem;
+    --dxbl-fl-tab-group-font-size: 1rem;
+    --dxbl-fl-tab-group-content-font-size: 1rem;
+    --dxbl-toolbar-font-size: 1rem;
+    --dxbl-tabs-font-size: 1rem;
+    --dxbl-tabs-content-font-size: 1rem;
+    --dxbl-accordion-group-font-size: 1rem;
+    --dxbl-accordion-group-item-font-size: 1rem;
+    --dxbl-accordion-group-header-font-size: 1rem;
+    --dxbl-treeview-font-size: 1rem;
+    --dxbl-navigation-badge-font-size: 1rem;
+    --dxbl-radio-group-font-size: 1rem;
+    --dxbl-context-menu-font-size: 1rem;
+    --dxbl-menu-item-font-size: 1rem;
+    --dxbl-scheduler-font-size: 1rem;
+    --dxbl-toast-text-font-size: 1rem;
+    --dxbl-toast-header-font-size: 1rem;
+    --dxbl-drawer-panel-font-size: 1rem;
+    --dxbl-progress-bar-label-font-size: 1rem;
+    --dxbl-pivot-font-size: 1rem;
+    --dxbl-pivot-field-font-size: 1rem;
+    --dxbl-pivot-header-font-size: 1rem;
+    --dxbl-pivot-total-font-size: 1rem;
+    --dxbl-pivot-table-font-size: 1rem;
+    --dxbl-pivot-table-header-field-font-size: 1rem;
+    --dxbl-pivot-table-row-field-font-size: 1rem;
+    --dxbl-pivot-table-total-font-size: 1rem;
+    --dx-chatui-message-font-size: 1rem;
+    --dx-chatui-suggestion-item-title-font-size: 1rem;
+    --dx-chatui-attachment-list-item-font-size: 1rem;
+    --dx-chatui-suggestion-item-text-font-size: 1rem;
+    --dxbl-message-box-body-text-font-size: 1rem;
+    --dxbl-message-box-header-font-size: 1rem;
+    --dxbl-splitter-font-size: 1rem;
+    --dxbl-filter-builder-font-size: 1rem;
+}
+
+.dxbl-grid {
+    --dxbl-grid-font-size: 1rem;
+    border: none;
+}
+
+.dxbl-pager-page-edit {
+    min-width: 2.5em;
+}
+
+.dxbl-toolbar {
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    font-size: var(--dxbl-toolbar-font-size);
+}
+
+body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
+    z-index: 1056 !important;
+}
+
+@if ($enable-button-pointers: false) {
+    .dxbl-context-menu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item,
+    .dxbl-context-menu-submenu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item {
+        cursor: default;
+    }
+}

package/dist/styles/_general.scss

@@ -1,74 +1,55 @@
-* {
-    scrollbar-width: thin;
-}
-
-html,
-body {
-    height: 100%;
-}
-
-body {
-    background: var(--blue-app-bg, #{$app-bg});
-}
-
-// Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
-.btn,
-.nav-pills > li > a,
-.pager li > a,
-.pagination > li > a,
-.list-group a.list-group-item {
-    &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
-        transition:
-            background-color 0.3s,
-            color 0.15s,
-            box-shadow 0.3s,
-            opacity 0.3s;
-        position: relative;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-
-        &:hover,
-        &:active,
-        &:focus {
-            z-index: 1;
-        }
-    }
-}
-
-.sign-in-screen {
-    padding-top: $normal-size;
-
-    .sign-in-container {
-        animation: enabledBlueAppPage 0.5s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
-    }
-
-    @media screen and (min-width: 768px) {
-        .sign-in-container {
-            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
-            width: var(--blue-sign-in-container-md-width, auto);
-        }
-    }
-}
-
-.blue-header-title.sidebar {
-    width: $bla-sidebar-width;
-    padding-left: calc(#{$normal-size} + #{$spacer});
-    transform: translateX(-100%);
-    transition: transform 0.4s;
-    background: var(--blue-sidebar-bg);
-    color: $sidebar-color;
-
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
-
-.blue-scroll-shadow {
-    @include scroll-shadow(var(--bs-body-bg));
-}
+* {
+    scrollbar-width: thin;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    background: var(--blue-app-bg, #{$app-bg});
+}
+
+// Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
+.btn,
+.nav-pills > li > a,
+.pager li > a,
+.pagination > li > a,
+.list-group a.list-group-item {
+    &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
+        transition:
+            background-color 0.3s,
+            color 0.15s,
+            box-shadow 0.3s,
+            opacity 0.3s;
+        position: relative;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            z-index: 1;
+        }
+    }
+}
+
+// .blue-header-title.sidebar {
+//     width: $bla-sidebar-width;
+//     padding-left: calc(#{$normal-size} + #{$spacer});
+//     transform: translateX(-100%);
+//     transition: transform 0.4s;
+//     background: var(--blue-sidebar-bg);
+//     color: $sidebar-color;
+
+//     @media (prefers-reduced-motion) {
+//         transition: none;
+//     }
+// }
+
+.blue-scroll-shadow {
+    @include scroll-shadow(var(--bs-body-bg));
+}

package/dist/styles/_hover.scss

@@ -1,37 +1,37 @@
-@media (hover: hover) {
-    .blue-d-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
-            .blue-d-hover-content-active {
-                display: none !important;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active,
-        &:focus-within {
-            .blue-d-hover-content-default {
-                display: none !important;
-            }
-        }
-    }
-
-    .blue-opacity-hover {
-        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
-            .blue-opacity-hover-content-active {
-                opacity: 0;
-            }
-        }
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active,
-        &:focus-within {
-            .blue-opacity-hover-content-default {
-                opacity: 0;
-            }
-        }
-    }
-}
+@media (hover: hover) {
+    .blue-d-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
+            .blue-d-hover-content-active {
+                display: none !important;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active,
+        &:focus-within {
+            .blue-d-hover-content-default {
+                display: none !important;
+            }
+        }
+    }
+
+    .blue-opacity-hover {
+        &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {
+            .blue-opacity-hover-content-active {
+                opacity: 0;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active,
+        &:focus-within {
+            .blue-opacity-hover-content-default {
+                opacity: 0;
+            }
+        }
+    }
+}

package/dist/styles/_input-group.scss

@@ -1,29 +1,29 @@
-.blue-input-group {
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $input-bg;
-
-    &.focus,
-    &:has(input:focus) {
-        box-shadow: $input-btn-focus-box-shadow;
-        border-color: $input-focus-border-color;
-
-        .input-group-text {
-            color: #{var(--bs-primary-text-emphasis)};
-        }
-    }
-
-    .input-group-text {
-        border-color: transparent;
-        background-color: transparent;
-    }
-
-    .form-control {
-        border: none;
-        background-color: transparent !important;
-
-        &:focus {
-            box-shadow: none;
-        }
-    }
-}
+.blue-input-group {
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $input-bg;
+
+    &.focus,
+    &:has(input:focus) {
+        box-shadow: $input-btn-focus-box-shadow;
+        border-color: $input-focus-border-color;
+
+        .input-group-text {
+            color: #{var(--bs-primary-text-emphasis)};
+        }
+    }
+
+    .input-group-text {
+        border-color: transparent;
+        background-color: transparent;
+    }
+
+    .form-control {
+        border: none;
+        background-color: transparent !important;
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+}

package/dist/styles/_inter.scss

@@ -1,19 +1,19 @@
-:root {
-    --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
-    --blue-font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, "cv07" 1, "tnum" 1, "zero" 1;
-    font-feature-settings: var(--blue-font-feature-settings);
-    font-size: 14px;
-}
-@supports (font-variation-settings: normal) {
-    :root {
-        --bs-font-sans-serif: InterVariable, #{$font-family-sans-serif};
-    }
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-    font-feature-settings: inherit;
-}
+:root {
+    --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
+    --blue-font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, "cv07" 1, "tnum" 1, "zero" 1;
+    font-feature-settings: var(--blue-font-feature-settings);
+    font-size: 14px;
+}
+@supports (font-variation-settings: normal) {
+    :root {
+        --bs-font-sans-serif: InterVariable, #{$font-family-sans-serif};
+    }
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+    font-feature-settings: inherit;
+}

package/dist/styles/_intro.scss

@@ -0,0 +1,22 @@
+.sign-in-screen {
+    padding-top: var(--blue-header-height);
+
+    &:last-child {
+        padding-bottom: var(--blue-header-height);
+    }
+
+    .sign-in-container {
+        animation: enabledBlueAppPage 0.5s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+    }
+
+    @media screen and (min-width: 768px) {
+        .sign-in-container {
+            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
+            width: var(--blue-sign-in-container-md-width, auto);
+        }
+    }
+}