blue-web 1.21.0 → 1.21.2

package/dist/styles/_scrollspy.scss

@@ -1,73 +1,78 @@
-.blue-scrollspy {
-    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
-    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
-    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
-    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-    --#{$prefix}nav-link-color: #{$nav-link-color};
-    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
-
-    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
-    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
-    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
-
-    @media (prefers-reduced-motion: no-preference) {
-        scroll-behavior: smooth;
-    }
-
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
-    scroll-snap-type: y mandatory;
-
-    scroll-marker-group: before;
-
-    &::scroll-marker-group {
-        display: flex;
-        min-height: calc(
-            (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
-                (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
-        );
-        margin-bottom: 0.25rem;
-        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
-        gap: var(--blue-scrollspy-marker-group-gap);
-    }
-
-    & > :is(section, .blue-scrollspy-group) {
-        &::scroll-marker {
-            content: attr(aria-label);
-
-            font-size: var(--#{$prefix}nav-link-font-size);
-            box-sizing: border-box;
-            text-decoration: none;
-
-            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
-
-            border-radius: var(--#{$prefix}nav-tabs-border-radius);
-
-            &:is(:hover, :focus) {
-                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
-            }
-
-            &:target-current,
-            &:is(:active) {
-                color: var(--#{$prefix}nav-tabs-link-active-color);
-                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
-                border-color: var(--#{$prefix}border-color);
-            }
-        }
-    }
-}
-
-.blue-scrollspy-after {
-    scroll-marker-group: after;
-
-    &::scroll-marker-group {
-        margin-bottom: 0;
-        margin-top: 0.25rem;
-    }
-}
+.blue-scrollspy {
+    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
+    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: #{$nav-link-color};
+    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+
+    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+    @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+    }
+
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+
+    scroll-marker-group: before;
+
+    &::scroll-marker-group {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        min-height: calc(
+            (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
+                (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
+        );
+        margin-bottom: 0.25rem;
+        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
+        gap: var(--blue-scrollspy-marker-group-gap);
+    }
+
+    & > :is(section, .blue-scrollspy-group) {
+        &::scroll-marker {
+            content: attr(aria-label);
+            white-space: nowrap;
+
+            font-size: var(--#{$prefix}nav-link-font-size);
+            box-sizing: border-box;
+            text-decoration: none;
+
+            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+
+            border-radius: var(--#{$prefix}nav-tabs-border-radius);
+
+            &:is(:hover, :focus) {
+                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+            }
+
+            &:target-current,
+            &:is(:active) {
+                color: var(--#{$prefix}nav-tabs-link-active-color);
+                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+                border-color: var(--#{$prefix}border-color);
+            }
+        }
+    }
+}
+
+.blue-scrollspy-after {
+    scroll-marker-group: after;
+
+    &::scroll-marker-group {
+        margin-bottom: 0;
+        margin-top: 0.25rem;
+    }
+}

package/dist/styles/_status.scss

@@ -1,131 +1,131 @@
-.blue-loading {
-    background-color: $primary;
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    position: fixed;
-    display: none;
-    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
-}
-
-.blue-status-alert,
-.blue-status-circle {
-    z-index: 6000;
-}
-
-.blue-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, 0.7) 10%, transparent 10.01%);
-        background-repeat: no-repeat;
-        background-position: 50%;
-        animation: alert-in 1s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
-
-        & {
-            transform: scale(10, 10);
-            opacity: 0;
-            transition:
-                transform 0.5s,
-                opacity 1s;
-        }
-
-        @media (prefers-reduced-motion) {
-            transition: none;
-        }
-    }
-
-    & {
-        transform: translate3d(0, 0, 0);
-        overflow: hidden;
-        white-space: pre-wrap;
-
-        bottom: 2.5rem + 4rem + 0.938rem;
-        left: 1rem;
-        right: 1rem;
-
-        max-height: calc(100vh - 15rem);
-        max-height: calc(100dvh - 15rem);
-    }
-
-    .alert-body {
-        max-height: calc(100vh - 16rem);
-        max-height: calc(100dvh - 16rem);
-        overflow-y: auto;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .blue-status-alert {
-        left: calc(50% - 18.75rem);
-        right: calc(50% - 18.75rem);
-    }
-}
-
-.blue-status-circle {
-    bottom: 2.5rem;
-    left: calc(50% - 1.25rem);
-    border-radius: 50%;
-    width: 4rem;
-    height: 4rem;
-    color: #fff;
-
-    &:not(.blue-loading) {
-        align-items: center;
-        justify-content: center;
-        font-size: 2.5em;
-    }
-}
-
-.blue-status-success {
-    background-color: #5cb85c;
-}
-
-.blue-status-info {
-    background-color: #5bc0de;
-}
-
-.blue-status-warning {
-    background-color: #d58512;
-}
-
-.blue-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;
-
-    animation: circlebounce 2s infinite ease-in-out;
-}
-
-.spinner-bounce-circle div:nth-child(1) {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-}
+.blue-loading {
+    background-color: $primary;
+}
+
+.blue-status-alert,
+.blue-status-circle {
+    position: fixed;
+    display: none;
+    box-shadow: 0 0.313rem 0.938rem rgba(0, 0, 0, 0.2);
+}
+
+.blue-status-alert,
+.blue-status-circle {
+    z-index: 6000;
+}
+
+.blue-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, 0.7) 10%, transparent 10.01%);
+        background-repeat: no-repeat;
+        background-position: 50%;
+        animation: alert-in 1s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+
+        & {
+            transform: scale(10, 10);
+            opacity: 0;
+            transition:
+                transform 0.5s,
+                opacity 1s;
+        }
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+    }
+
+    & {
+        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+        white-space: pre-wrap;
+
+        bottom: 2.5rem + 4rem + 0.938rem;
+        left: 1rem;
+        right: 1rem;
+
+        max-height: calc(100vh - 15rem);
+        max-height: calc(100dvh - 15rem);
+    }
+
+    .alert-body {
+        max-height: calc(100vh - 16rem);
+        max-height: calc(100dvh - 16rem);
+        overflow-y: auto;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .blue-status-alert {
+        left: calc(50% - 18.75rem);
+        right: calc(50% - 18.75rem);
+    }
+}
+
+.blue-status-circle {
+    bottom: 2.5rem;
+    left: calc(50% - 1.25rem);
+    border-radius: 50%;
+    width: 4rem;
+    height: 4rem;
+    color: #fff;
+
+    &:not(.blue-loading) {
+        align-items: center;
+        justify-content: center;
+        font-size: 2.5em;
+    }
+}
+
+.blue-status-success {
+    background-color: #5cb85c;
+}
+
+.blue-status-info {
+    background-color: #5bc0de;
+}
+
+.blue-status-warning {
+    background-color: #d58512;
+}
+
+.blue-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;
+
+    animation: circlebounce 2s infinite ease-in-out;
+}
+
+.spinner-bounce-circle div:nth-child(1) {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+}

package/dist/styles/_text-icons.scss

@@ -1,15 +1,15 @@
-// In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
-// Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.
-.blue-page-header,
-.page-header {
-    padding-bottom: 0.563rem;
-    margin: 2.5rem 0 1.25rem;
-    border-bottom: 0.25rem solid var(--blue-page-header-border-color, $table-border-color);
-}
-
-// Vertically alignment, especially for Bootstrap Icons.
-.blue-icon,
-.bi {
-    display: inline-block;
-    vertical-align: -0.125em;
-}
+// In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
+// Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.
+.blue-page-header,
+.page-header {
+    padding-bottom: 0.563rem;
+    margin: 2.5rem 0 1.25rem;
+    border-bottom: 0.25rem solid var(--blue-page-header-border-color, $table-border-color);
+}
+
+// Vertically alignment, especially for Bootstrap Icons.
+.blue-icon,
+.bi {
+    display: inline-block;
+    vertical-align: -0.125em;
+}