blue-web 1.21.0 → 1.21.2

package/dist/styles/_tooltips.scss

@@ -1,150 +1,150 @@
-.blue-tooltip,
-.blue-tooltip-start,
-.blue-tooltip-end,
-.blue-tooltip-up,
-.blue-tooltip-down {
-    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-    --#{$prefix}tooltip-color: #{$tooltip-color};
-    --#{$prefix}tooltip-bg: #{$tooltip-bg};
-    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-
-    // @apply relative inline-block;
-    position: relative;
-    display: inline-block;
-
-    --tt-bg: var(--#{$prefix}tooltip-bg, black);
-    --tt-off: calc(100% + 0.5rem);
-    --tt-tail: calc(100% + 1px + 0.25rem);
-
-    > :where(.blue-tooltip-content),
-    &[data-tooltip]:before {
-        // @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
-
-        @include reset-text();
-        @include font-size(var(--#{$prefix}tooltip-font-size));
-
-        color: var(--#{$prefix}tooltip-color);
-        @include border-radius(var(--#{$prefix}tooltip-border-radius));
-        position: absolute;
-        max-width: var(--#{$prefix}tooltip-max-width);
-        padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-        text-align: center;
-        white-space: normal;
-        opacity: 0;
-
-        line-height: 1.25em;
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-        background-color: var(--tt-bg);
-        width: max-content;
-        pointer-events: none;
-        z-index: var(--#{$prefix}tooltip-zindex);
-        --tw-content: attr(data-tooltip);
-        content: var(--tw-content);
-    }
-
-    &:after {
-        // @apply absolute opacity-0;
-        position: absolute;
-        opacity: 0;
-
-        background-color: var(--tt-bg);
-        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
-        content: "";
-        pointer-events: none;
-        width: 0.625rem;
-        height: 0.25rem;
-        display: block;
-        position: absolute;
-        mask-repeat: no-repeat;
-        mask-position: -1px 0;
-        --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
-        mask-image: var(--mask-tooltip);
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-up {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-        inset: auto auto var(--tt-off) 50%;
-    }
-}
-
-.blue-tooltip-down {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
-        inset: var(--tt-off) auto auto 50%;
-    }
-}
-
-.blue-tooltip-start {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
-        inset: 50% var(--tt-off) auto auto;
-    }
-}
-
-.blue-tooltip-end {
-    > .blue-tooltip-content,
-    &[data-tooltip]:before {
-        transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
-        inset: 50% auto auto var(--tt-off);
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-start,
-.blue-tooltip-end,
-.blue-tooltip-up,
-.blue-tooltip-down {
-    &.blue-tooltip-open,
-    &[data-tooltip]:hover,
-    &:hover,
-    &:has(:focus-visible) {
-        > .blue-tooltip-content,
-        &[data-tooltip]:before,
-        &:after {
-            // @apply opacity-100;
-            opacity: var(--#{$prefix}tooltip-opacity);
-            --tt-pos: 0rem;
-            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        }
-    }
-}
-
-.blue-tooltip,
-.blue-tooltip-up {
-    &:after {
-        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
-        inset: auto auto var(--tt-tail) 50%;
-    }
-}
-
-.blue-tooltip-down {
-    &:after {
-        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
-        inset: var(--tt-tail) auto auto 50%;
-    }
-}
-
-.blue-tooltip-start {
-    &:after {
-        transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
-        inset: 50% calc(var(--tt-tail) + 1px) auto auto;
-    }
-}
-
-.blue-tooltip-end {
-    &:after {
-        transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
-        inset: 50% auto auto calc(var(--tt-tail) + 1px);
-    }
-}
+.blue-tooltip,
+.blue-tooltip-start,
+.blue-tooltip-end,
+.blue-tooltip-up,
+.blue-tooltip-down {
+    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+    --#{$prefix}tooltip-color: #{$tooltip-color};
+    --#{$prefix}tooltip-bg: #{$tooltip-bg};
+    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+
+    // @apply relative inline-block;
+    position: relative;
+    display: inline-block;
+
+    --tt-bg: var(--#{$prefix}tooltip-bg, black);
+    --tt-off: calc(100% + 0.5rem);
+    --tt-tail: calc(100% + 1px + 0.25rem);
+
+    > :where(.blue-tooltip-content),
+    &[data-tooltip]:before {
+        // @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
+
+        @include reset-text();
+        @include font-size(var(--#{$prefix}tooltip-font-size));
+
+        color: var(--#{$prefix}tooltip-color);
+        @include border-radius(var(--#{$prefix}tooltip-border-radius));
+        position: absolute;
+        max-width: var(--#{$prefix}tooltip-max-width);
+        padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+        text-align: center;
+        white-space: normal;
+        opacity: 0;
+
+        line-height: 1.25em;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+        background-color: var(--tt-bg);
+        width: max-content;
+        pointer-events: none;
+        z-index: var(--#{$prefix}tooltip-zindex);
+        --tw-content: attr(data-tooltip);
+        content: var(--tw-content);
+    }
+
+    &:after {
+        // @apply absolute opacity-0;
+        position: absolute;
+        opacity: 0;
+
+        background-color: var(--tt-bg);
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+        content: "";
+        pointer-events: none;
+        width: 0.625rem;
+        height: 0.25rem;
+        display: block;
+        position: absolute;
+        mask-repeat: no-repeat;
+        mask-position: -1px 0;
+        --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
+        mask-image: var(--mask-tooltip);
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-up {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+        inset: auto auto var(--tt-off) 50%;
+    }
+}
+
+.blue-tooltip-down {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+        inset: var(--tt-off) auto auto 50%;
+    }
+}
+
+.blue-tooltip-start {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+        inset: 50% var(--tt-off) auto auto;
+    }
+}
+
+.blue-tooltip-end {
+    > .blue-tooltip-content,
+    &[data-tooltip]:before {
+        transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+        inset: 50% auto auto var(--tt-off);
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-start,
+.blue-tooltip-end,
+.blue-tooltip-up,
+.blue-tooltip-down {
+    &.blue-tooltip-open,
+    &[data-tooltip]:hover,
+    &:hover,
+    &:has(:focus-visible) {
+        > .blue-tooltip-content,
+        &[data-tooltip]:before,
+        &:after {
+            // @apply opacity-100;
+            opacity: var(--#{$prefix}tooltip-opacity);
+            --tt-pos: 0rem;
+            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        }
+    }
+}
+
+.blue-tooltip,
+.blue-tooltip-up {
+    &:after {
+        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+        inset: auto auto var(--tt-tail) 50%;
+    }
+}
+
+.blue-tooltip-down {
+    &:after {
+        transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+        inset: var(--tt-tail) auto auto 50%;
+    }
+}
+
+.blue-tooltip-start {
+    &:after {
+        transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+        inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    }
+}
+
+.blue-tooltip-end {
+    &:after {
+        transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+        inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    }
+}

package/dist/styles/_utils.scss

@@ -1,20 +1,20 @@
-// Sets `margin: 0` to last child.
-// Useful for creating a gap between items together with `mb-3`.
-// Inspired by Tailwind CSS class `last:m-0`.
-.m-last-0:last-child {
-    margin: 0 !important;
-}
-
-// Shows empty message if the element has no children.
-// Can be used for lists and such.
-// For localization you should override CSS variable `--message` dynamically.
-.blue-empty-message {
-    --message: "No items found.";
-    &:empty::before {
-        content: var(--message);
-        color: var(--bs-secondary-color);
-        display: flex;
-        padding: 1rem;
-        justify-content: center;
-    }
-}
+// Sets `margin: 0` to last child.
+// Useful for creating a gap between items together with `mb-3`.
+// Inspired by Tailwind CSS class `last:m-0`.
+.m-last-0:last-child {
+    margin: 0 !important;
+}
+
+// Shows empty message if the element has no children.
+// Can be used for lists and such.
+// For localization you should override CSS variable `--message` dynamically.
+.blue-empty-message {
+    --message: "No items found.";
+    &:empty::before {
+        content: var(--message);
+        color: var(--bs-secondary-color);
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+    }
+}

package/dist/styles/_variables.scss

@@ -1,127 +1,128 @@
-$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$theme-colors: map-merge(
-    (
-        "theme": $theme
-    ),
-    $theme-colors
-);
-
-// Alpha value (RGBA) e.g. for header background.
-$shimmering: 0.8 !default;
-
-// Thumb color of scrollbar.
-$scrollbar-thumb-color: white !default;
-
-// Thumb color of scrollbar as RGB (like `255, 255, 255`).
-$scrollbar-thumb-color-rgb:
-    red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
-
-// Default size for many components, like sidebar menu items.
-$normal-size: calc(
-    var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
-        (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
-        var(--bs-btn-border-width, 1px)
-) !default;
-
-// Height of actions menu when it is expanded, like on mobile devices.
-$actions-height: 7.5rem !default;
-
-// Background color of menu toggle button.
-$bla-button-bg-normal: rgba(0, 0, 0, 0.1) !default;
-
-// Background color of menu toggle button on hover state.
-$bla-button-bg-hover: rgba(white, 0.25) !default;
-
-// Font size for sidebar menu items.
-$bla-btn-font-size: 1em !default;
-
-// Padding for action menu items.
-$bla-header-nav-padding: 0.75rem !default;
-
-// Width of the sidebar.
-$bla-sidebar-width: 16.563rem !default;
-
-// Background of sidebar.
-$sidebar-bg: $theme !default;
-$sidebar-bg-dark: $theme-dark !default;
-
-// Background of sidebar when it's opened (on mobile devices).
-$sidebar-open-bg: darken($sidebar-bg, 30%) !default;
-
-// Background of sidebar menu dropdown menus
-$sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
-
-// Text color of sidebar.
-$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 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;
-
-// Background of the body element
-$app-bg: $theme !default;
-$app-bg-dark: $theme-dark !default;
-
-// Background color of Header
-$header-bg: $theme !default;
-$header-bg-dark: $theme-dark !default;
-
-// Text color of header elements
-$header-color: color-contrast($header-bg, $gray-900) !default;
-$header-color-dark: color-contrast($header-bg-dark, $gray-900) !default;
-
-// Background of header action menu dropdown menus
-$header-deep-bg: darken($header-bg, 4%) !default;
-
-// Background color, when hovering action menu item.
-$actions-control-bg-hover: $bla-button-bg-hover !default;
-
-// Shrink sidebar on smaller screens
-$sidebar-shrink: true !default;
-
-// Breakpoint for sidebar shrink
-$sidebar-shrink-breakpoint: 600px !default;
-
-// Breakpoint for sidebar fully expanded
-$sidebar-expanded-breakpoint: 1400px !default;
-
-$corner-shape: #{round} !default;
-
-:root {
-    --blue-app-bg: #{$app-bg};
-
-    --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
-
-    --blue-sidebar-width: #{$bla-sidebar-width};
-    --blue-sidebar-color: #{$sidebar-color};
-    --blue-theme: var(--theme, #{$theme});
-    --blue-shimmering: 0.9;
-
-    --blue-sidebar-bg: #{$sidebar-bg};
-    --blue-header-bg: #{$header-bg};
-
-    --blue-header-color: #{$header-color};
-    --blue-action-link-bg-color: var(--blue-theme);
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
-    --blue-menu-item-height: #{$normal-size};
-
-    --blue-corner-shape: #{$corner-shape};
-}
-
-@include color-mode(dark, true) {
-    --blue-app-bg: #{$app-bg-dark};
-
-    --blue-sidebar-color: #{$sidebar-color-dark};
-
-    --blue-sidebar-bg: #{$sidebar-bg-dark};
-    --blue-header-bg: #{$header-bg-dark};
-
-    --blue-header-color: #{$header-color-dark};
-
-    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
-}
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+    (
+        "theme": $theme
+    ),
+    $theme-colors
+);
+
+// Alpha value (RGBA) e.g. for header background.
+$shimmering: 0.8 !default;
+
+// Thumb color of scrollbar.
+$scrollbar-thumb-color: white !default;
+
+// Thumb color of scrollbar as RGB (like `255, 255, 255`).
+$scrollbar-thumb-color-rgb:
+    red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
+
+// Default size for many components, like sidebar menu items.
+$normal-size: calc(
+    var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
+        (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
+        var(--bs-btn-border-width, 1px)
+) !default;
+
+// Height of actions menu when it is expanded, like on mobile devices.
+$actions-height: 7.5rem !default;
+
+// Background color of menu toggle button.
+$bla-button-bg-normal: rgba(0, 0, 0, 0.1) !default;
+
+// Background color of menu toggle button on hover state.
+$bla-button-bg-hover: rgba(white, 0.25) !default;
+
+// Font size for sidebar menu items.
+$bla-btn-font-size: 1em !default;
+
+// Padding for action menu items.
+$bla-header-nav-padding: 0.75rem !default;
+
+// Width of the sidebar.
+$bla-sidebar-width: 16.563rem !default;
+
+// Background of sidebar.
+$sidebar-bg: $theme !default;
+$sidebar-bg-dark: $theme-dark !default;
+
+// Background of sidebar when it's opened (on mobile devices).
+$sidebar-open-bg: darken($sidebar-bg, 30%) !default;
+
+// Background of sidebar menu dropdown menus
+$sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
+
+// Text color of sidebar.
+$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 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;
+
+// Background of the body element
+$app-bg: $theme !default;
+$app-bg-dark: $theme-dark !default;
+
+// Background color of Header
+$header-bg: $theme !default;
+$header-bg-dark: $theme-dark !default;
+
+// Text color of header elements
+$header-color: color-contrast($header-bg, $gray-900) !default;
+$header-color-dark: color-contrast($header-bg-dark, $gray-900) !default;
+
+// Background of header action menu dropdown menus
+$header-deep-bg: darken($header-bg, 4%) !default;
+
+// Background color, when hovering action menu item.
+$actions-control-bg-hover: $bla-button-bg-hover !default;
+
+// Shrink sidebar on smaller screens
+$sidebar-shrink: true !default;
+
+// Breakpoint for sidebar shrink
+$sidebar-shrink-breakpoint: 600px !default;
+
+// Breakpoint for sidebar fully expanded
+$sidebar-expanded-breakpoint: 1400px !default;
+
+$corner-shape: #{round} !default;
+
+:root {
+    --blue-app-bg: #{$app-bg};
+
+    --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
+
+    --blue-sidebar-width: #{$bla-sidebar-width};
+    --blue-sidebar-color: #{$sidebar-color};
+    --blue-theme: var(--theme, #{$theme});
+    --blue-shimmering: 0.9;
+
+    --blue-sidebar-bg: #{$sidebar-bg};
+    --blue-header-bg: #{$header-bg};
+
+    --blue-header-height: 3.429rem;
+    --blue-header-color: #{$header-color};
+    --blue-action-link-bg-color: var(--blue-theme);
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
+    --blue-menu-item-height: #{$normal-size};
+
+    --blue-corner-shape: #{$corner-shape};
+}
+
+@include color-mode(dark, true) {
+    --blue-app-bg: #{$app-bg-dark};
+
+    --blue-sidebar-color: #{$sidebar-color-dark};
+
+    --blue-sidebar-bg: #{$sidebar-bg-dark};
+    --blue-header-bg: #{$header-bg-dark};
+
+    --blue-header-color: #{$header-color-dark};
+
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+}