blue-web 1.21.1 → 1.21.2

package/dist/styles/_layout.scss

@@ -1,175 +1,175 @@
-/**
- * The new approach for a global layout with a sidebar, header and main content.
- * Checkboxes are used for states for expanded or drawer.
- */
-
-.blue-layout {
-    --spacing: 0.25rem;
-    --drawer-side-shadow:
-        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
-    --side-width: 18rem;
-    --base-z-index: 0;
-
-    --base-z-index: 500;
-    --side-width: var(--blue-sidebar-width);
-    --toggler-width: 2.714rem;
-    --toggler-height: var(--blue-header-height);
-
-    --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
-    --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
-
-    height: 100dvh;
-    position: relative;
-    display: grid;
-
-    grid-template-rows: var(--toggler-height) auto;
-    grid-template-areas: "header" "main";
-
-    color: var(--blue-sidebar-color);
-    background-color: var(--blue-sidebar-bg);
-
-    &:has(> .blue-layout-toggle) {
-        grid-template-columns: 0 0 var(--toggler-width) calc(var(--side-width) - var(--toggler-width)) 1fr;
-        grid-template-rows: var(--toggler-height) auto;
-        grid-template-areas:
-            "state .    toggle header header"
-            ".     side main   main   main";
-    }
-}
-
-@include color-mode(dark, false) {
-    .blue-layout {
-        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-        --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color-dark)};
-    }
-}
-
-@media (width >= 64rem) {
-    .blue-layout {
-        &:has(> .blue-layout-state-expand:checked) {
-            grid-template-areas:
-                "state .    toggle header header"
-                ".     side side   side   main";
-        }
-    }
-}
-
-.blue-layout-state {
-    grid-area: state;
-    position: absolute;
-    --size: 0;
-    height: var(--size);
-    width: var(--size);
-    appearance: none;
-    opacity: 0;
-}
-
-.blue-layout-toggle {
-    grid-area: toggle;
-    color: var(--blue-sidebar-color);
-    background-color: var(--blue-sidebar-bg);
-}
-
-.blue-layout-state:focus-visible + .blue-layout-toggle {
-    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
-    box-shadow: var(--trigger-box-shadow);
-}
-
-@media (width < 64rem) {
-    .blue-layout-toggle-expand,
-    #layout-expand {
-        display: none !important;
-    }
-}
-
-@media (width >= 64rem) {
-    .blue-layout-toggle-drawer,
-    #layout-drawer {
-        display: none !important;
-    }
-}
-
-.blue-layout-header {
-    grid-area: header;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    z-index: var(--blue-layout-header-z-index, 4);
-    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
-}
-
-.blue-layout-side {
-    grid-area: side;
-    overflow: auto;
-    background: inherit;
-    scrollbar-color: transparent transparent;
-
-    &:hover,
-    &:focus-within {
-        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
-    }
-}
-
-@media (width < 64rem) {
-    .blue-layout-side {
-        translate: -100% 0;
-        height: 100%;
-        transition: translate 0.2s ease;
-    }
-
-    .blue-layout-state-drawer:checked ~ .blue-layout-side {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: calc(var(--base-z-index) + 1);
-        translate: 0;
-        width: calc(var(--spacing) * 80);
-        box-shadow: var(--drawer-side-shadow);
-    }
-}
-
-.blue-layout-main {
-    overflow: auto;
-    grid-area: main;
-}
-
-.blue-layout-body {
-    --spacing: 0.25rem;
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
-    --bs-link-hover-color: #{$link-hover-color};
-
-    width: calc(100% - var(--spacing) * 2);
-    height: calc(100% - var(--spacing));
-    margin-left: auto;
-    margin-right: auto;
-    overflow: auto;
-    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
-    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
-    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
-    box-shadow: var(--bs-box-shadow-sm);
-    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
-    border-radius: var(--bs-border-radius-lg);
-}
-
-@include color-mode(dark, false) {
-    .blue-layout-body {
-        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-        --bs-link-hover-color: #{$link-hover-color-dark};
-    }
-}
-
-.blue-layout-overlay {
-    position: fixed;
-    z-index: var(--base-z-index);
-    inset: 0;
-    display: none;
-}
-
-@media (width < 64rem) {
-    .blue-layout-state-drawer:checked ~ .blue-layout-overlay {
-        display: block;
-    }
-}
+/**
+ * The new approach for a global layout with a sidebar, header and main content.
+ * Checkboxes are used for states for expanded or drawer.
+ */
+
+.blue-layout {
+    --spacing: 0.25rem;
+    --drawer-side-shadow:
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+    --side-width: 18rem;
+    --base-z-index: 0;
+
+    --base-z-index: 500;
+    --side-width: var(--blue-sidebar-width);
+    --toggler-width: 2.714rem;
+    --toggler-height: var(--blue-header-height);
+
+    --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
+    --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
+
+    height: 100dvh;
+    position: relative;
+    display: grid;
+
+    grid-template-rows: var(--toggler-height) auto;
+    grid-template-areas: "header" "main";
+
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+
+    &:has(> .blue-layout-toggle) {
+        grid-template-columns: 0 0 var(--toggler-width) calc(var(--side-width) - var(--toggler-width)) 1fr;
+        grid-template-rows: var(--toggler-height) auto;
+        grid-template-areas:
+            "state .    toggle header header"
+            ".     side main   main   main";
+    }
+}
+
+@include color-mode(dark, false) {
+    .blue-layout {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color-dark)};
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout {
+        &:has(> .blue-layout-state-expand:checked) {
+            grid-template-areas:
+                "state .    toggle header header"
+                ".     side side   side   main";
+        }
+    }
+}
+
+.blue-layout-state {
+    grid-area: state;
+    position: absolute;
+    --size: 0;
+    height: var(--size);
+    width: var(--size);
+    appearance: none;
+    opacity: 0;
+}
+
+.blue-layout-toggle {
+    grid-area: toggle;
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+}
+
+.blue-layout-state:focus-visible + .blue-layout-toggle {
+    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
+    box-shadow: var(--trigger-box-shadow);
+}
+
+@media (width < 64rem) {
+    .blue-layout-toggle-expand,
+    #layout-expand {
+        display: none !important;
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout-toggle-drawer,
+    #layout-drawer {
+        display: none !important;
+    }
+}
+
+.blue-layout-header {
+    grid-area: header;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: var(--blue-layout-header-z-index, 4);
+    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
+}
+
+.blue-layout-side {
+    grid-area: side;
+    overflow: auto;
+    background: inherit;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    }
+}
+
+@media (width < 64rem) {
+    .blue-layout-side {
+        translate: -100% 0;
+        height: 100%;
+        transition: translate 0.2s ease;
+    }
+
+    .blue-layout-state-drawer:checked ~ .blue-layout-side {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: calc(var(--base-z-index) + 1);
+        translate: 0;
+        width: calc(var(--spacing) * 80);
+        box-shadow: var(--drawer-side-shadow);
+    }
+}
+
+.blue-layout-main {
+    overflow: auto;
+    grid-area: main;
+}
+
+.blue-layout-body {
+    --spacing: 0.25rem;
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --bs-link-hover-color: #{$link-hover-color};
+
+    width: calc(100% - var(--spacing) * 2);
+    height: calc(100% - var(--spacing));
+    margin-left: auto;
+    margin-right: auto;
+    overflow: auto;
+    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
+    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
+    box-shadow: var(--bs-box-shadow-sm);
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
+}
+
+@include color-mode(dark, false) {
+    .blue-layout-body {
+        --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+        --bs-link-hover-color: #{$link-hover-color-dark};
+    }
+}
+
+.blue-layout-overlay {
+    position: fixed;
+    z-index: var(--base-z-index);
+    inset: 0;
+    display: none;
+}
+
+@media (width < 64rem) {
+    .blue-layout-state-drawer:checked ~ .blue-layout-overlay {
+        display: block;
+    }
+}

package/dist/styles/_menu-item.scss

@@ -1,86 +1,86 @@
-.blue-menu-item {
-    display: inline-flex;
-    align-items: center;
-    transition:
-        width 0.5s,
-        background-color 0.3s,
-        color 0.15s,
-        box-shadow 0.3s,
-        opacity 0.3s !important;
-    color: inherit;
-    border-color: transparent;
-    --bs-btn-active-border-color: transparent;
-    --bs-btn-disabled-border-color: transparent;
-
-    @media (prefers-reduced-motion) {
-        transition: none !important;
-    }
-
-    &:focus-visible {
-        &,
-        &.active {
-            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-        }
-    }
-
-    &::before {
-        --visual-padding: 0.125rem;
-
-        content: "";
-        position: absolute;
-        top: var(--visual-padding);
-        right: var(--visual-padding);
-        bottom: var(--visual-padding);
-        left: var(--visual-padding);
-        background-color: currentColor;
-        border-radius: var(--bs-btn-border-radius);
-        transform: scale(0.9);
-        opacity: 0;
-        transition: all 0.2s;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    &:hover,
-    &:active,
-    &.active,
-    &:has(+ :popover-open) {
-        &::before {
-            transform: scale(1);
-            opacity: 0.25;
-        }
-    }
-
-    &.active,
-    &:has(+ :popover-open) {
-        &::before {
-            opacity: 0.16;
-        }
-    }
-
-    &.current {
-        position: relative;
-        &::after {
-            @include blue-menu-item-indicator();
-        }
-    }
-}
-
-.blue-horizontal {
-    .blue-menu-item.current::after {
-        @include blue-menu-item-indicator-horizontal();
-    }
-}
-
-.blue-menu-item-current-hidden {
-    &:is(:where(.blue-menu-item):is(.current) *) {
-        display: none !important;
-    }
-}
-.blue-menu-item-default-hidden {
-    &:is(:where(.blue-menu-item):is(:not(.current)) *) {
-        display: none !important;
-    }
-}
+.blue-menu-item {
+    display: inline-flex;
+    align-items: center;
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
+    color: inherit;
+    border-color: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-border-color: transparent;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+        }
+    }
+
+    &::before {
+        --visual-padding: 0.125rem;
+
+        content: "";
+        position: absolute;
+        top: var(--visual-padding);
+        right: var(--visual-padding);
+        bottom: var(--visual-padding);
+        left: var(--visual-padding);
+        background-color: currentColor;
+        border-radius: var(--bs-btn-border-radius);
+        transform: scale(0.9);
+        opacity: 0;
+        transition: all 0.2s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.active,
+    &:has(+ :popover-open) {
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.active,
+    &:has(+ :popover-open) {
+        &::before {
+            opacity: 0.16;
+        }
+    }
+
+    &.current {
+        position: relative;
+        &::after {
+            @include blue-menu-item-indicator();
+        }
+    }
+}
+
+.blue-horizontal {
+    .blue-menu-item.current::after {
+        @include blue-menu-item-indicator-horizontal();
+    }
+}
+
+.blue-menu-item-current-hidden {
+    &:is(:where(.blue-menu-item):is(.current) *) {
+        display: none !important;
+    }
+}
+.blue-menu-item-default-hidden {
+    &:is(:where(.blue-menu-item):is(:not(.current)) *) {
+        display: none !important;
+    }
+}

package/dist/styles/_mixins.scss

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