blue-web 1.17.6 → 1.17.8

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.
@@ -1,118 +1,136 @@
1
- @mixin blue-menu-item-indicator() {
2
- content: "";
3
- position: absolute;
4
- top: 0.625rem;
5
- bottom: 0.625rem;
6
- left: 0.125rem;
7
- right: initial;
8
- width: 0.25rem;
9
- height: auto;
10
- background-color: var(--blue-menu-item-indicator-bg);
11
- border-radius: 1rem;
12
- animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
13
-
14
- @media (prefers-reduced-motion) {
15
- animation-duration: 0s;
16
- }
17
- }
18
-
19
- @mixin blue-menu-item-indicator-horizontal() {
20
- top: initial;
21
- bottom: 0.125rem;
22
- left: 0.625rem;
23
- right: 0.625rem;
24
- width: auto;
25
- height: 0.25rem;
26
- animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
27
-
28
- @media (prefers-reduced-motion) {
29
- animation-duration: 0s;
30
- }
31
- }
32
-
33
- @mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
34
- & > .blue-menu-item-wrapper {
35
- display: block;
36
- position: relative;
37
-
38
- &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
39
- .blue-menu-item-label {
40
- &::before,
41
- & {
42
- animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
43
-
44
- @media (prefers-reduced-motion) {
45
- animation-duration: 0s;
46
- }
47
- }
48
-
49
- &::before {
50
- content: "";
51
- display: block;
52
- position: absolute;
53
- border: 5px solid transparent;
54
- z-index: 1001;
55
-
56
- top: 50%;
57
- border-left-width: 0;
58
- border-right-color: var(--bs-tooltip-bg, #353539);
59
- left: calc(0em - 5px);
60
- transform: translate(0.5em, -50%);
61
- opacity: 0;
62
- }
63
-
64
- display: block;
65
- text-transform: none;
66
- line-height: 1;
67
- font-size: 0.9em;
68
- -webkit-user-select: none;
69
- user-select: none;
70
- pointer-events: none;
71
- position: absolute;
72
- font-family: var(--bs-font-sans-serif);
73
- text-align: center;
74
- min-width: 3em;
75
- max-width: var(--bs-tooltip-max-width, 21em);
76
- padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
77
- border-radius: var(--bs-tooltip-border-radius, 0.3em);
78
- box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
79
- background: var(--bs-tooltip-bg, #353539);
80
- color: var(--bs-tooltip-color, #fff);
81
- z-index: 1000;
82
- width: auto;
83
- top: 50%;
84
- left: calc(100% + 5px);
85
- transform: translate(-0.5em, -50%);
86
- overflow: visible;
87
- opacity: 0;
88
- }
89
- }
90
-
91
- & > .blue-menu-item-dropdown,
92
- & > .blue-outside > .blue-menu-item-dropdown {
93
- @extend .ms-1;
94
- @extend .rounded;
95
- @extend .shadow;
96
- @extend .blue-menu-item-dropdown-from-start;
97
-
98
- position: absolute;
99
- top: 0;
100
- width: $bla-sidebar-width;
101
- left: $normal-size;
102
- max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
103
- overflow-y: auto;
104
- overflow-x: hidden;
105
- background-color: var(--blue-sidebar-bg);
106
-
107
- &::before {
108
- content: none;
109
- }
110
- }
111
-
112
- &:has(.blue-menu-item-dropdown) {
113
- & > .blue-menu-item {
114
- @extend .highlighted;
115
- }
116
- }
117
- }
118
- }
1
+ @mixin blue-menu-item-background() {
2
+ content: "";
3
+ position: absolute;
4
+ top: 0.125rem;
5
+ right: 0.125rem;
6
+ bottom: 0.125rem;
7
+ left: 0.125rem;
8
+ background-color: currentColor;
9
+ border-radius: $border-radius;
10
+ transform: scale(0.9);
11
+ opacity: 0;
12
+ transition: all 0.2s;
13
+
14
+ @media (prefers-reduced-motion) {
15
+ transition: none;
16
+ }
17
+ }
18
+
19
+ @mixin blue-menu-item-indicator() {
20
+ content: "";
21
+ position: absolute;
22
+ top: 0.625rem;
23
+ bottom: 0.625rem;
24
+ left: 0.125rem;
25
+ right: initial;
26
+ width: 0.25rem;
27
+ height: auto;
28
+ background-color: var(--blue-menu-item-indicator-bg);
29
+ border-radius: 1rem;
30
+ animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
31
+
32
+ @media (prefers-reduced-motion) {
33
+ animation-duration: 0s;
34
+ }
35
+ }
36
+
37
+ @mixin blue-menu-item-indicator-horizontal() {
38
+ top: initial;
39
+ bottom: 0.125rem;
40
+ left: 0.625rem;
41
+ right: 0.625rem;
42
+ width: auto;
43
+ height: 0.25rem;
44
+ animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
45
+
46
+ @media (prefers-reduced-motion) {
47
+ animation-duration: 0s;
48
+ }
49
+ }
50
+
51
+ @mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
52
+ & > .blue-menu-item-wrapper {
53
+ display: block;
54
+ position: relative;
55
+
56
+ &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
57
+ .blue-menu-item-label {
58
+ &::before,
59
+ & {
60
+ animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
61
+
62
+ @media (prefers-reduced-motion) {
63
+ animation-duration: 0s;
64
+ }
65
+ }
66
+
67
+ &::before {
68
+ content: "";
69
+ display: block;
70
+ position: absolute;
71
+ border: 5px solid transparent;
72
+ z-index: 1001;
73
+
74
+ top: 50%;
75
+ border-left-width: 0;
76
+ border-right-color: var(--bs-tooltip-bg, #353539);
77
+ left: calc(0em - 5px);
78
+ transform: translate(0.5em, -50%);
79
+ opacity: 0;
80
+ }
81
+
82
+ display: block;
83
+ text-transform: none;
84
+ line-height: 1;
85
+ font-size: 0.9em;
86
+ -webkit-user-select: none;
87
+ user-select: none;
88
+ pointer-events: none;
89
+ position: absolute;
90
+ font-family: var(--bs-font-sans-serif);
91
+ text-align: center;
92
+ min-width: 3em;
93
+ max-width: var(--bs-tooltip-max-width, 21em);
94
+ padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
95
+ border-radius: var(--bs-tooltip-border-radius, 0.3em);
96
+ box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
97
+ background: var(--bs-tooltip-bg, #353539);
98
+ color: var(--bs-tooltip-color, #fff);
99
+ z-index: 1000;
100
+ width: auto;
101
+ top: 50%;
102
+ left: calc(100% + 5px);
103
+ transform: translate(-0.5em, -50%);
104
+ overflow: visible;
105
+ opacity: 0;
106
+ }
107
+ }
108
+
109
+ & > .blue-menu-item-dropdown,
110
+ & > .blue-outside > .blue-menu-item-dropdown {
111
+ @extend .ms-1;
112
+ @extend .rounded;
113
+ @extend .shadow;
114
+ @extend .blue-menu-item-dropdown-from-start;
115
+
116
+ position: absolute;
117
+ top: 0;
118
+ width: $bla-sidebar-width;
119
+ left: $normal-size;
120
+ max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
121
+ overflow-y: auto;
122
+ overflow-x: hidden;
123
+ background-color: var(--blue-sidebar-bg);
124
+
125
+ &::before {
126
+ content: none;
127
+ }
128
+ }
129
+
130
+ &:has(.blue-menu-item-dropdown) {
131
+ & > .blue-menu-item {
132
+ @extend .highlighted;
133
+ }
134
+ }
135
+ }
136
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-web",
3
- "version": "1.17.6",
3
+ "version": "1.17.8",
4
4
  "description": "UI components built on top of Bootstrap 5",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "type": "module",
@@ -49,7 +49,7 @@
49
49
  "astro": "^5.13.5",
50
50
  "autoprefixer": "^10.3.6",
51
51
  "babel-loader": "^8.4.1",
52
- "blue-react": "file:../blue-react/blue-react-10.2.1001.tgz",
52
+ "blue-react": "^10.2.0",
53
53
  "colorjs.io": "^0.5.2",
54
54
  "gh-pages": "^3.1.0",
55
55
  "license-report": "^6.2.0",