blue-web 1.17.6 → 1.17.7

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.17.6 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.17.7 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 

package/dist/styles/_layout.scss

@@ -20,6 +20,9 @@
     --side-width: var(--blue-sidebar-width);
     --toggler-size: var(--blue-menu-item-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;
@@ -39,6 +42,13 @@
     }
 }
 
+@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) {
@@ -98,7 +108,6 @@
     grid-area: side;
     overflow: auto;
     background: inherit;
-    overflow-y: auto;
 }
 
 @media (width < 64rem) {
@@ -126,6 +135,9 @@
 
 .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;
@@ -138,6 +150,13 @@
     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);

package/dist/styles/_menu-item.scss

@@ -1,193 +1,179 @@
-@keyframes blue-menu-item-indicator-in-from-side {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
-
-@keyframes blue-menu-item-indicator-in-from-below {
-    from {
-        transform: translateY(100%);
-    }
-    to {
-        transform: translateY(1);
-    }
-}
-
-.blue-menu-item {
-    transition:
-        width 0.5s,
-        background-color 0.3s,
-        color 0.15s,
-        box-shadow 0.3s,
-        opacity 0.3s !important;
-
-    @media (prefers-reduced-motion) {
-        transition: none !important;
-    }
-
-    border: none;
-    box-shadow: none;
-    background-image: none;
-
-    &:focus {
-        box-shadow: none;
-    }
-
-    &:focus-visible {
-        &,
-        &.active {
-            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
-        }
-    }
-}
-
-.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;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
-
-    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;
-        border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-        background-color: var(--blue-menu-item-dropdown-bg);
-    }
-
-    &[popover] {
-        position: fixed;
-        margin: 0;
-        padding: 0;
-        z-index: 1000;
-        border: none;
-        background: transparent;
-        border-radius: calc(#{$border-radius} + 0.1rem);
-        box-shadow: $box-shadow;
-    }
-}
-
-.blue-menu-item-dropdown-caret.blue-caret {
-    display: none;
-    position: absolute;
-    right: 1.5rem;
-    top: 50%;
-    transform: translateY(-50%);
-    align-items: center;
-}
-
-.blue-menu-item {
-    color: inherit;
-    width: auto;
-    height: $normal-size;
-    font-size: $bla-btn-font-size;
-    display: flex;
-    align-items: center;
-    border-color: transparent;
-    --bs-btn-padding-x: 0.437rem;
-    @include slide-transition();
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
-        background-color: currentColor;
-        border-radius: $border-radius;
-        transform: scale(0.9);
-        opacity: 0;
-        transition: all 0.2s;
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    &[draggable] {
-        cursor: grab;
-
-        &:active {
-            box-shadow: inset 0 0 0.25rem;
-        }
-    }
-
-    &:hover,
-    &:active,
-    &.highlighted,
-    &:has(+ :popover-open) {
-        color: inherit;
-        border-color: transparent;
-
-        &::before {
-            transform: scale(1);
-            opacity: 0.25;
-        }
-    }
-
-    &.highlighted,
-    &:has(+ :popover-open) {
-        &::before {
-            opacity: 0.16;
-        }
-    }
-
-    &:hover,
-    &:active {
-        &::before {
-            opacity: 0.25;
-        }
-    }
-
-    &.active::after {
-        @include blue-menu-item-indicator();
-    }
-
-    & > * + .blue-menu-item-label {
-        margin-left: 0.5rem;
-    }
-}
-
-.blue-menu-item-wrapper {
-    display: contents;
-}
-
-.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
-.blue-menu-item-dropdown > .blue-menu-item {
-    width: 100%;
-}
+@keyframes blue-menu-item-indicator-in-from-side {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(1);
+    }
+}
+
+@keyframes blue-menu-item-indicator-in-from-below {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(1);
+    }
+}
+
+.blue-menu-item {
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
+    border: none;
+    box-shadow: none;
+    background-image: none;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        &,
+        &.active {
+            box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+        }
+    }
+}
+
+.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;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+
+    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;
+        border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+        background-color: var(--blue-menu-item-dropdown-bg);
+    }
+
+    &[popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        z-index: 1000;
+        border: none;
+        background: transparent;
+        border-radius: calc(#{$border-radius} + 0.1rem);
+        box-shadow: $box-shadow;
+    }
+}
+
+.blue-menu-item-dropdown-caret.blue-caret {
+    display: none;
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    align-items: center;
+}
+
+.blue-menu-item {
+    color: inherit;
+    width: auto;
+    height: $normal-size;
+    font-size: $bla-btn-font-size;
+    display: flex;
+    align-items: center;
+    border-color: transparent;
+    --bs-btn-padding-x: 0.437rem;
+    @include slide-transition();
+
+    &::before {
+        @include blue-menu-item-background();
+    }
+
+    &[draggable] {
+        cursor: grab;
+
+        &:active {
+            box-shadow: inset 0 0 0.25rem;
+        }
+    }
+
+    &:hover,
+    &:active,
+    &.highlighted,
+    &:has(+ :popover-open) {
+        color: inherit;
+        border-color: transparent;
+
+        &::before {
+            transform: scale(1);
+            opacity: 0.25;
+        }
+    }
+
+    &.highlighted,
+    &:has(+ :popover-open) {
+        &::before {
+            opacity: 0.16;
+        }
+    }
+
+    &:hover,
+    &:active {
+        &::before {
+            opacity: 0.25;
+        }
+    }
+
+    &.active::after {
+        @include blue-menu-item-indicator();
+    }
+
+    & > * + .blue-menu-item-label {
+        margin-left: 0.5rem;
+    }
+}
+
+.blue-menu-item-wrapper {
+    display: contents;
+}
+
+.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
+.blue-menu-item-dropdown > .blue-menu-item {
+    width: 100%;
+}

package/dist/styles/_tabs.scss

@@ -1,80 +1,88 @@
-// Customize style of Bootstrap's nav-underline
-.nav-underline {
-    .nav-link {
-        --#{$prefix}nav-link-color: var(--#{$prefix}list-group-action-color);
-    }
-
-    .nav-link:hover,
-    .nav-link:focus {
-        border-bottom-color: transparent;
-    }
-
-    .nav-link.active,
-    .show > .nav-link,
-    .blue-tab:checked {
-        &::after {
-            @include blue-menu-item-indicator();
-            @include blue-menu-item-indicator-horizontal();
-        }
-
-        position: relative;
-        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-base);
-        border-bottom-color: transparent;
-        color: var(--bs-nav-underline-link-active-color);
-    }
-}
-
-.nav-underline .blue-tabs {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-}
-
-.blue-tab {
-    // Unsetting to solve issues in Safari
-    width: unset;
-    height: unset;
-    border-radius: unset;
-
-    position: relative;
-    order: 0;
-    user-select: none;
-    -webkit-appearance: none;
-    appearance: none;
-
-    @if ($enable-button-pointers) {
-        cursor: pointer;
-    }
-}
-
-.blue-tab::before {
-    content: attr(aria-label);
-}
-
-.blue-tab-content {
-    display: none;
-    order: 1;
-    width: 100%;
-}
-
-input.blue-tab:checked + .blue-tab-content {
-    display: block;
-}
-
-.blue-tabs.nav-tabs {
-    border-bottom: none;
-
-    .blue-tab-content {
-        border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
-    }
-
-    .blue-tab:checked {
-        color: var(--bs-nav-tabs-link-active-color);
-        background-color: var(--bs-nav-tabs-link-active-bg);
-        border-color: var(--bs-nav-tabs-link-active-border-color);
-    }
-}
-
-.blue-tabs.nav-underline {
-    row-gap: 0;
-}
+// Customize style of Bootstrap's nav-underline
+.nav-underline {
+    .nav-link {
+        --#{$prefix}nav-link-color: var(--#{$prefix}list-group-action-color);
+    }
+
+    .nav-link:hover,
+    .nav-link:focus {
+        &::after {
+            @include blue-menu-item-indicator();
+            @include blue-menu-item-indicator-horizontal();
+            opacity: 0.25;
+        }
+
+        position: relative;
+        border-bottom-color: transparent;
+    }
+
+    .nav-link.active,
+    .show > .nav-link,
+    .blue-tab:checked {
+        &::after {
+            @include blue-menu-item-indicator();
+            @include blue-menu-item-indicator-horizontal();
+            opacity: 1;
+        }
+
+        position: relative;
+        font-weight: var(--blue-tabs-underline-active-font-weight, $font-weight-base);
+        border-bottom-color: transparent;
+        color: currentColor;
+    }
+}
+
+.nav-underline .blue-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.blue-tab {
+    // Unsetting to solve issues in Safari
+    width: unset;
+    height: unset;
+    border-radius: unset;
+
+    position: relative;
+    order: 0;
+    user-select: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    @if ($enable-button-pointers) {
+        cursor: pointer;
+    }
+}
+
+.blue-tab::before {
+    content: attr(aria-label);
+}
+
+.blue-tab-content {
+    display: none;
+    order: 1;
+    width: 100%;
+}
+
+input.blue-tab:checked + .blue-tab-content {
+    display: block;
+}
+
+.blue-tabs.nav-tabs {
+    border-bottom: none;
+
+    .blue-tab-content {
+        border-top: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    }
+
+    .blue-tab:checked {
+        color: var(--bs-nav-tabs-link-active-color);
+        background-color: var(--bs-nav-tabs-link-active-bg);
+        border-color: var(--bs-nav-tabs-link-active-border-color);
+    }
+}
+
+.blue-tabs.nav-underline {
+    row-gap: 0;
+}

package/dist/styles/_variables.scss

@@ -56,9 +56,9 @@ $sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
 $sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
 $sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
 
-// Color of indicator for active sidebar item.
-$sidebar-indicator-color: #{var(--bs-primary)} !default;
-$sidebar-indicator-color-dark: #{var(--bs-primary-text-emphasis)} !default;
+// Color of indicator for active menu item in sidebar.
+$sidebar-indicator-color: $primary !default;
+$sidebar-indicator-color-dark: $white !default;
 
 // Background of search control in sidebar.
 $sidebar-search-bg: $input-bg !default;