blue-react 9.1.1 → 9.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Blue React v9.1.1-alpha2 (https://bruegmann.github.io/blue-react)
2
+ * Blue React v9.1.2-alpha2 (https://bruegmann.github.io/blue-react)
3
3
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
4
4
  */
5
5
 
@@ -1,4 +1,9 @@
1
- @include custom-scrollbar($scrollbar-thumb-color, transparent, false);
1
+ @include blue-custom-scrollbar(
2
+ transparent,
3
+ rgba($scrollbar-thumb-color, 0.5),
4
+ rgba($scrollbar-thumb-color, 0.6),
5
+ rgba($scrollbar-thumb-color, 0.7)
6
+ );
2
7
 
3
8
  * {
4
9
  scrollbar-width: thin;
@@ -114,7 +114,13 @@
114
114
  .blue-normal-scrollbar,
115
115
  .modal-body,
116
116
  .blue-page {
117
- @include custom-scrollbar($body-color, $body-bg, 0.3rem);
117
+ @include blue-custom-scrollbar(
118
+ var(--bs-body-bg, #{$body-bg}),
119
+ var(--bs-tertiary-color, #{$body-color}),
120
+ var(--bs-secondary-color, #{$body-color}),
121
+ var(--bs-body-color, #{$body-color}),
122
+ 0.3rem
123
+ );
118
124
  }
119
125
 
120
126
  .blue-page {
@@ -203,7 +209,13 @@
203
209
  }
204
210
 
205
211
  .blue-sidebar {
206
- @include custom-scrollbar($sidebar-color, var(--blue-sidebar-bg), 0.3rem);
212
+ @include blue-custom-scrollbar(
213
+ var(--blue-sidebar-bg),
214
+ rgba($sidebar-color, 0.5),
215
+ rgba($sidebar-color, 0.6),
216
+ rgba($sidebar-color, 0.7),
217
+ 0.3rem
218
+ );
207
219
  overflow-y: auto;
208
220
  }
209
221
 
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .blue-status-alert {
18
- @include custom-scrollbar(white, rgba(black, 0.5), 0.3rem);
18
+ @extend .blue-normal-scrollbar;
19
19
 
20
20
  &:after {
21
21
  content: "";
@@ -26,11 +26,7 @@
26
26
  top: 50%;
27
27
  left: 0;
28
28
  pointer-events: none;
29
- background-image: radial-gradient(
30
- circle,
31
- rgba(black, 0.7) 10%,
32
- transparent 10.01%
33
- );
29
+ background-image: radial-gradient(circle, rgba(black, 0.7) 10%, transparent 10.01%);
34
30
  background-repeat: no-repeat;
35
31
  background-position: 50%;
36
32
  animation: alert-in 1s;
@@ -1,13 +1,32 @@
1
+ /**
2
+ @deprecated Will be removed in a future version. Please use `blue-custom-scrollbar` instead!
3
+ */
1
4
  @mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
5
+ @include blue-custom-scrollbar(
6
+ $bg-color,
7
+ rgba($thumb-color, 0.5),
8
+ rgba($thumb-color, 0.6),
9
+ rgba($thumb-color, 0.7),
10
+ $track-border-radius
11
+ );
12
+ }
13
+
14
+ @mixin blue-custom-scrollbar(
15
+ $bg-color,
16
+ $thumb-color,
17
+ $thumb-color-hover: $thumb-color,
18
+ $thumb-color-focus: $thumb-color,
19
+ $track-border-radius: 0
20
+ ) {
2
21
  ::-webkit-scrollbar-thumb {
3
- background-color: rgba($thumb-color, 0.5);
4
- box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.2), inset 0 -1px 0 rgba($thumb-color, 0.17);
22
+ background-color: $thumb-color;
23
+ box-shadow: inset 1px 1px 0 rgba(white, 0.2), inset 0 -1px 0 rgba(white, 0.17);
5
24
  }
6
25
  ::-webkit-scrollbar-thumb:hover {
7
- background-color: rgba($thumb-color, 0.6);
26
+ background-color: $thumb-color-hover;
8
27
  }
9
28
  ::-webkit-scrollbar-thumb:active {
10
- background-color: rgba($thumb-color, 0.7);
29
+ background-color: $thumb-color-focus;
11
30
  }
12
31
 
13
32
  ::-webkit-scrollbar-track {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-react",
3
- "version": "9.1.1",
3
+ "version": "9.1.2",
4
4
  "description": "Blue React Components",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "main": "index.js",