blue-react 8.3.1 → 8.3.2

package/dist/styles/_tooltips.scss

@@ -1,189 +1,189 @@
-@keyframes tips-vert {
-    to {
-        opacity: 0.9;
-        transform: translate(-50%, 0);
-    }
-}
-
-@keyframes tips-horz {
-    to {
-        opacity: 0.9;
-        transform: translate(0, -50%);
-    }
-}
-
-@keyframes tips-diag-right {
-    to {
-        opacity: 0.9;
-        transform: translate(-1em, 0);
-    }
-}
-
-@keyframes tips-diag-left {
-    to {
-        opacity: 0.9;
-        transform: translate(1em, 0);
-    }
-}
-
-// [data-tooltip]s
-[data-tooltip] {
-    position: relative;
-    &::before,
-    &::after {
-        text-transform: none;
-        line-height: 1;
-        font-size: 0.9em;
-        user-select: none;
-        pointer-events: none;
-        position: absolute;
-        display: none;
-        opacity: 0;
-    }
-    // the dink
-    &::before {
-        content: "";
-        border: 5px solid transparent;
-        z-index: 1001;
-    }
-    // the bubble
-    &::after {
-        content: attr(data-tooltip);
-        font-family: $font-family-base;
-        text-align: center;
-
-        min-width: 3em;
-        max-width: 21em;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        padding: 1ch 1.5ch;
-        border-radius: 0.3em;
-        box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
-        background: #353539;
-        color: #fff;
-        z-index: 1000;
-    }
-    // show the [data-tooltip]
-    &:hover::before,
-    &:hover::after {
-        display: block;
-    }
-}
-
-[data-tooltip][class*="blue-tooltip-up"] {
-    &::before {
-        bottom: 100%;
-        border-bottom-width: 0;
-        border-top-color: #353539;
-    }
-    &::after {
-        bottom: calc(100% + 5px);
-    }
-    &::before,
-    &::after {
-        left: 50%;
-        transform: translate(-50%, 0.5em);
-    }
-}
-
-[data-tooltip][class*="blue-tooltip-down"] {
-    &::before {
-        top: 100%;
-        border-top-width: 0;
-        border-bottom-color: #353539;
-    }
-    &::after {
-        top: calc(100% + 5px);
-    }
-    &::before,
-    &::after {
-        left: 50%;
-        transform: translate(-50%, -0.5em);
-    }
-}
-
-[data-tooltip][class$="-left"]::after {
-    right: 50%;
-    left: auto;
-}
-
-[data-tooltip].blue-tooltip-up-left::after {
-    transform: translate(1.5em, 0.5em);
-}
-
-[data-tooltip].blue-tooltip-down-left::after {
-    transform: translate(1.5em, -0.5em);
-}
-
-[data-tooltip].blue-tooltip-up-right::after {
-    transform: translate(-1.5em, 0.5em);
-}
-
-[data-tooltip].blue-tooltip-down-right::after {
-    transform: translate(-1.5em, -0.5em);
-}
-
-[data-tooltip].blue-tooltip-start {
-    &::before {
-        top: 50%;
-        border-right-width: 0;
-        border-left-color: #353539;
-        left: calc(0em - 5px);
-        transform: translate(0.5em, -50%);
-    }
-    &::after {
-        top: 50%;
-        right: calc(100% + 5px);
-        transform: translate(0.5em, -50%);
-    }
-}
-
-[data-tooltip].blue-tooltip-end {
-    &::before {
-        top: 50%;
-        border-left-width: 0;
-        border-right-color: #353539;
-        right: calc(0em - 5px);
-        transform: translate(-0.5em, -50%);
-    }
-    &::after {
-        top: 50%;
-        left: calc(100% + 5px);
-        transform: translate(-0.5em, -50%);
-    }
-}
-
-// FX: do the thing
-[data-tooltip][class*="blue-tooltip-up"]:hover,
-[data-tooltip][class*="blue-tooltip-down"]:hover {
-    &::before,
-    &::after {
-        animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-    }
-}
-
-[data-tooltip][class$="blue-tooltip-end"]:hover::after {
-    animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-}
-
-[data-tooltip][class$="blue-tooltip-start"]:hover::after {
-    animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-}
-
-[data-tooltip].blue-tooltip-start:hover,
-[data-tooltip].blue-tooltip-end:hover {
-    &::before,
-    &::after {
-        animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
-    }
-}
-
-// don't show empty [data-tooltip]s
-[data-tooltip=""] {
-    &::after,
-    &::before {
-        display: none !important;
-    }
-}
+@keyframes tips-vert {
+    to {
+        opacity: 0.9;
+        transform: translate(-50%, 0);
+    }
+}
+
+@keyframes tips-horz {
+    to {
+        opacity: 0.9;
+        transform: translate(0, -50%);
+    }
+}
+
+@keyframes tips-diag-right {
+    to {
+        opacity: 0.9;
+        transform: translate(-1em, 0);
+    }
+}
+
+@keyframes tips-diag-left {
+    to {
+        opacity: 0.9;
+        transform: translate(1em, 0);
+    }
+}
+
+// [data-tooltip]s
+[data-tooltip] {
+    position: relative;
+    &::before,
+    &::after {
+        text-transform: none;
+        line-height: 1;
+        font-size: 0.9em;
+        user-select: none;
+        pointer-events: none;
+        position: absolute;
+        display: none;
+        opacity: 0;
+    }
+    // the dink
+    &::before {
+        content: "";
+        border: 5px solid transparent;
+        z-index: 1001;
+    }
+    // the bubble
+    &::after {
+        content: attr(data-tooltip);
+        font-family: $font-family-base;
+        text-align: center;
+
+        min-width: 3em;
+        max-width: 21em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        padding: 1ch 1.5ch;
+        border-radius: 0.3em;
+        box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+        background: #353539;
+        color: #fff;
+        z-index: 1000;
+    }
+    // show the [data-tooltip]
+    &:hover::before,
+    &:hover::after {
+        display: block;
+    }
+}
+
+[data-tooltip][class*="blue-tooltip-up"] {
+    &::before {
+        bottom: 100%;
+        border-bottom-width: 0;
+        border-top-color: #353539;
+    }
+    &::after {
+        bottom: calc(100% + 5px);
+    }
+    &::before,
+    &::after {
+        left: 50%;
+        transform: translate(-50%, 0.5em);
+    }
+}
+
+[data-tooltip][class*="blue-tooltip-down"] {
+    &::before {
+        top: 100%;
+        border-top-width: 0;
+        border-bottom-color: #353539;
+    }
+    &::after {
+        top: calc(100% + 5px);
+    }
+    &::before,
+    &::after {
+        left: 50%;
+        transform: translate(-50%, -0.5em);
+    }
+}
+
+[data-tooltip][class$="-left"]::after {
+    right: 50%;
+    left: auto;
+}
+
+[data-tooltip].blue-tooltip-up-left::after {
+    transform: translate(1.5em, 0.5em);
+}
+
+[data-tooltip].blue-tooltip-down-left::after {
+    transform: translate(1.5em, -0.5em);
+}
+
+[data-tooltip].blue-tooltip-up-right::after {
+    transform: translate(-1.5em, 0.5em);
+}
+
+[data-tooltip].blue-tooltip-down-right::after {
+    transform: translate(-1.5em, -0.5em);
+}
+
+[data-tooltip].blue-tooltip-start {
+    &::before {
+        top: 50%;
+        border-right-width: 0;
+        border-left-color: #353539;
+        left: calc(0em - 5px);
+        transform: translate(0.5em, -50%);
+    }
+    &::after {
+        top: 50%;
+        right: calc(100% + 5px);
+        transform: translate(0.5em, -50%);
+    }
+}
+
+[data-tooltip].blue-tooltip-end {
+    &::before {
+        top: 50%;
+        border-left-width: 0;
+        border-right-color: #353539;
+        right: calc(0em - 5px);
+        transform: translate(-0.5em, -50%);
+    }
+    &::after {
+        top: 50%;
+        left: calc(100% + 5px);
+        transform: translate(-0.5em, -50%);
+    }
+}
+
+// FX: do the thing
+[data-tooltip][class*="blue-tooltip-up"]:hover,
+[data-tooltip][class*="blue-tooltip-down"]:hover {
+    &::before,
+    &::after {
+        animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+    }
+}
+
+[data-tooltip][class$="blue-tooltip-end"]:hover::after {
+    animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+}
+
+[data-tooltip][class$="blue-tooltip-start"]:hover::after {
+    animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+}
+
+[data-tooltip].blue-tooltip-start:hover,
+[data-tooltip].blue-tooltip-end:hover {
+    &::before,
+    &::after {
+        animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+    }
+}
+
+// don't show empty [data-tooltip]s
+[data-tooltip=""] {
+    &::after,
+    &::before {
+        display: none !important;
+    }
+}

package/dist/styles/_variables.scss

@@ -1,97 +1,97 @@
-/* Bootstrap */
-$primary: #007bff !default;
-$success: #4bd763 !default;
-$info: rgb(62, 158, 187) !default;
-$warning: #f0ad4e !default;
-$danger: #d9534f !default;
-/* Bootstrap ENDE */
-
-// Main color theme. E.g. used for background for body and sidebar.
-$theme: $primary !default;
-
-$theme-colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$theme-colors: map-merge(
-    (
-        "theme": $theme,
-        "white": white,
-        "black": #212529
-    ),
-    $theme-colors
-);
-
-// Since Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
-$utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
-$utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
-
-// Alpha value (RGBA) e.g. for header background.
-$shimmering: 0.7 !default;
-
-// Thumb color of scrollbar
-$scrollbar-thumb-color: white !default;
-
-// Default size for many components, like sidebar menu items.
-$normal-size: 3rem !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;
-
-// Font size for app title on the header.
-$bla-header-logo-font-size: 1.5rem !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;
-
-// 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: white !default;
-
-// Color of indicator for active sidebar item.
-$sidebar-indicator-color: $sidebar-color !default;
-
-// Background of search control in sidebar.
-$sidebar-search-bg: $input-bg !default;
-
-// Background of the body element
-$app-bg: $sidebar-bg !default;
-
-// Text color of header elements
-$header-color: #fff !default;
-
-// Background color of Header
-$header-bg: $theme !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;
-
-// Width and height of the scrollbar indicators
-$scrollbar-size: 10px;
-
-:root {
-    --theme: #{$theme};
-}
+/* Bootstrap */
+$primary: #007bff !default;
+$success: #4bd763 !default;
+$info: rgb(62, 158, 187) !default;
+$warning: #f0ad4e !default;
+$danger: #d9534f !default;
+/* Bootstrap ENDE */
+
+// Main color theme. E.g. used for background for body and sidebar.
+$theme: $primary !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+    (
+        "theme": $theme,
+        "white": white,
+        "black": #212529
+    ),
+    $theme-colors
+);
+
+// Since Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
+$utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
+$utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
+
+// Alpha value (RGBA) e.g. for header background.
+$shimmering: 0.7 !default;
+
+// Thumb color of scrollbar
+$scrollbar-thumb-color: white !default;
+
+// Default size for many components, like sidebar menu items.
+$normal-size: 3rem !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;
+
+// Font size for app title on the header.
+$bla-header-logo-font-size: 1.5rem !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;
+
+// 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: white !default;
+
+// Color of indicator for active sidebar item.
+$sidebar-indicator-color: $sidebar-color !default;
+
+// Background of search control in sidebar.
+$sidebar-search-bg: $input-bg !default;
+
+// Background of the body element
+$app-bg: $sidebar-bg !default;
+
+// Text color of header elements
+$header-color: #fff !default;
+
+// Background color of Header
+$header-bg: $theme !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;
+
+// Width and height of the scrollbar indicators
+$scrollbar-size: 10px;
+
+:root {
+    --theme: #{$theme};
+}