blue-web 1.21.0 → 1.21.2

package/dist/styles/_menu-item.scss

@@ -1,255 +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 {
-        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;
-        }
-    }
-
-    &: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;
-    }
-}
-
-// @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;
-//     position: relative;
-
-//     @media (prefers-reduced-motion) {
-//         animation-duration: 0s;
-//     }
-
-//     &::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 {
-//     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;
-
-//     &::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%;
-// }
+.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";

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));
+}