blue-web 1.21.1 → 1.21.2

package/dist/styles/_modal.scss

@@ -1,118 +1,118 @@
-/**
- * Allows to use Bootstrap Modals but with the native dialog element 
- * without the need of Bootstrap's JavaScript.
- * Even works with Bootstrap's Offcanvas classes.
- */
-
-@keyframes blue-modal-open {
-    from {
-        opacity: 0;
-        scale: var(--ani-scale-from, 95%);
-        translate: var(--ani-translate-from, 0 0);
-    }
-    to {
-        opacity: 1;
-        scale: var(--ani-scale-to, 100%);
-        translate: var(--ani-translate-to, 0 0);
-    }
-}
-
-@keyframes blue-modal-close {
-    from {
-        opacity: 1;
-        scale: var(--ani-scale-to, 100%);
-        translate: var(--ani-translate-to, 0 0);
-    }
-    to {
-        opacity: 0;
-        scale: var(--ani-scale-from, 95%);
-        translate: var(--ani-translate-from, 0 0);
-    }
-}
-
-dialog.blue-modal {
-    --ani-scale-from: 95%;
-    --ani-scale-to: 100%;
-    --ani-translate-from: 0 0;
-    --ani-translate-to: 0 0;
-
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    max-width: none;
-    max-height: none;
-    transition:
-        display 0.2s allow-discrete,
-        overlay 0.2s allow-discrete;
-    animation: blue-modal-close 0.2s forwards;
-
-    .offcanvas-backdrop {
-        display: none;
-    }
-}
-
-dialog.blue-modal[open] {
-    display: block;
-    animation: blue-modal-open 0.2s forwards;
-}
-
-dialog.blue-modal::backdrop {
-    --bs-backdrop-bg: #000;
-    --bs-backdrop-opacity: 0.5;
-    background-color: var(--bs-backdrop-bg);
-    transition: opacity 0.2s;
-    opacity: 0;
-}
-
-dialog.blue-modal[open]::backdrop {
-    opacity: var(--bs-backdrop-opacity);
-}
-
-.blue-modal-backdrop {
-    color: #0000;
-    z-index: -1;
-    grid-row-start: 1;
-    grid-column-start: 1;
-    place-self: stretch stretch;
-    display: grid;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.blue-modal-backdrop > button {
-    opacity: 0;
-    cursor: default;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    dialog.blue-modal,
-    dialog.blue-modal[open],
-    dialog.blue-modal::backdrop {
-        transition: none;
-        animation: none;
-    }
-}
-
-dialog.blue-modal:has(.offcanvas) {
-    --ani-scale-from: 100%;
-}
-
-dialog.blue-modal:has(.offcanvas-top) {
-    --ani-translate-from: 0 -100%;
-}
-
-dialog.blue-modal:has(.offcanvas-end) {
-    --ani-translate-from: 100% 0;
-}
-
-dialog.blue-modal:has(.offcanvas-bottom) {
-    --ani-translate-from: 0 100%;
-}
-
-dialog.blue-modal:has(.offcanvas-start) {
-    --ani-translate-from: -100% 0;
-}
+/**
+ * Allows to use Bootstrap Modals but with the native dialog element 
+ * without the need of Bootstrap's JavaScript.
+ * Even works with Bootstrap's Offcanvas classes.
+ */
+
+@keyframes blue-modal-open {
+    from {
+        opacity: 0;
+        scale: var(--ani-scale-from, 95%);
+        translate: var(--ani-translate-from, 0 0);
+    }
+    to {
+        opacity: 1;
+        scale: var(--ani-scale-to, 100%);
+        translate: var(--ani-translate-to, 0 0);
+    }
+}
+
+@keyframes blue-modal-close {
+    from {
+        opacity: 1;
+        scale: var(--ani-scale-to, 100%);
+        translate: var(--ani-translate-to, 0 0);
+    }
+    to {
+        opacity: 0;
+        scale: var(--ani-scale-from, 95%);
+        translate: var(--ani-translate-from, 0 0);
+    }
+}
+
+dialog.blue-modal {
+    --ani-scale-from: 95%;
+    --ani-scale-to: 100%;
+    --ani-translate-from: 0 0;
+    --ani-translate-to: 0 0;
+
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    transition:
+        display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete;
+    animation: blue-modal-close 0.2s forwards;
+
+    .offcanvas-backdrop {
+        display: none;
+    }
+}
+
+dialog.blue-modal[open] {
+    display: block;
+    animation: blue-modal-open 0.2s forwards;
+}
+
+dialog.blue-modal::backdrop {
+    --bs-backdrop-bg: #000;
+    --bs-backdrop-opacity: 0.5;
+    background-color: var(--bs-backdrop-bg);
+    transition: opacity 0.2s;
+    opacity: 0;
+}
+
+dialog.blue-modal[open]::backdrop {
+    opacity: var(--bs-backdrop-opacity);
+}
+
+.blue-modal-backdrop {
+    color: #0000;
+    z-index: -1;
+    grid-row-start: 1;
+    grid-column-start: 1;
+    place-self: stretch stretch;
+    display: grid;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.blue-modal-backdrop > button {
+    opacity: 0;
+    cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    dialog.blue-modal,
+    dialog.blue-modal[open],
+    dialog.blue-modal::backdrop {
+        transition: none;
+        animation: none;
+    }
+}
+
+dialog.blue-modal:has(.offcanvas) {
+    --ani-scale-from: 100%;
+}
+
+dialog.blue-modal:has(.offcanvas-top) {
+    --ani-translate-from: 0 -100%;
+}
+
+dialog.blue-modal:has(.offcanvas-end) {
+    --ani-translate-from: 100% 0;
+}
+
+dialog.blue-modal:has(.offcanvas-bottom) {
+    --ani-translate-from: 0 100%;
+}
+
+dialog.blue-modal:has(.offcanvas-start) {
+    --ani-translate-from: -100% 0;
+}

package/dist/styles/_page-header.scss

@@ -1,14 +1,14 @@
-.blue-header-title {
-    a {
-        color: inherit;
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-}
-
-.blue-header-title-image {
-    width: var(--blue-header-title-image-width, var(--blue-header-title-image-size, 2rem));
-    height: var(--blue-header-title-image-height, var(--blue-header-title-image-size, 2rem));
-}
+.blue-header-title {
+    a {
+        color: inherit;
+
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}
+
+.blue-header-title-image {
+    width: var(--blue-header-title-image-width, var(--blue-header-title-image-size, 2rem));
+    height: var(--blue-header-title-image-height, var(--blue-header-title-image-size, 2rem));
+}

package/dist/styles/_scrollspy.scss

@@ -1,78 +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;
-        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;
-    }
-}
+.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;
+}