blue-web 1.10.0 → 1.10.1
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/legacy-styles/mixins/_sidebar.scss +1 -1
- package/dist/merged.scss +12095 -0
- package/dist/style.css +181 -179
- package/dist/style.css.map +1 -1
- package/dist/style.min.css +3 -3
- package/dist/style.scss +1 -1
- package/dist/styles/_menu-item.scss +1 -1
- package/dist/styles/_tooltips.scss +129 -191
- package/package.json +3 -2
package/dist/style.scss
CHANGED
|
@@ -1,212 +1,150 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
&:hover::before,
|
|
68
|
-
&:hover::after {
|
|
69
|
-
display: block;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
[data-tooltip][class*="blue-tooltip-up"] {
|
|
74
|
-
&::before {
|
|
75
|
-
bottom: 100%;
|
|
76
|
-
border-bottom-width: 0;
|
|
77
|
-
border-top-color: var(--bs-tooltip-bg, #353539);
|
|
78
|
-
}
|
|
79
|
-
&::after {
|
|
80
|
-
bottom: calc(100% + 5px);
|
|
81
|
-
}
|
|
82
|
-
&::before,
|
|
83
|
-
&::after {
|
|
84
|
-
left: 50%;
|
|
85
|
-
transform: translate(-50%, 0.5em);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
[data-tooltip][class*="blue-tooltip-down"] {
|
|
90
|
-
&::before {
|
|
91
|
-
top: 100%;
|
|
92
|
-
border-top-width: 0;
|
|
93
|
-
border-bottom-color: var(--bs-tooltip-bg, #353539);
|
|
94
|
-
}
|
|
95
|
-
&::after {
|
|
96
|
-
top: calc(100% + 5px);
|
|
97
|
-
}
|
|
98
|
-
&::before,
|
|
99
|
-
&::after {
|
|
100
|
-
left: 50%;
|
|
101
|
-
transform: translate(-50%, -0.5em);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
[data-tooltip][class$="-left"]::after {
|
|
106
|
-
right: 50%;
|
|
107
|
-
left: auto;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
[data-tooltip].blue-tooltip-up-left::after {
|
|
111
|
-
transform: translate(1.5em, 0.5em);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
[data-tooltip].blue-tooltip-down-left::after {
|
|
115
|
-
transform: translate(1.5em, -0.5em);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
[data-tooltip].blue-tooltip-up-right::after {
|
|
119
|
-
transform: translate(-1.5em, 0.5em);
|
|
1
|
+
.blue-tooltip,
|
|
2
|
+
.blue-tooltip-start,
|
|
3
|
+
.blue-tooltip-end,
|
|
4
|
+
.blue-tooltip-up,
|
|
5
|
+
.blue-tooltip-down {
|
|
6
|
+
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
|
|
7
|
+
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
|
|
8
|
+
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
|
|
9
|
+
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
|
|
10
|
+
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
|
|
11
|
+
--#{$prefix}tooltip-color: #{$tooltip-color};
|
|
12
|
+
--#{$prefix}tooltip-bg: #{$tooltip-bg};
|
|
13
|
+
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
|
|
14
|
+
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
|
|
15
|
+
|
|
16
|
+
// @apply relative inline-block;
|
|
17
|
+
position: relative;
|
|
18
|
+
display: inline-block;
|
|
19
|
+
|
|
20
|
+
--tt-bg: var(--#{$prefix}tooltip-bg, black);
|
|
21
|
+
--tt-off: calc(100% + 0.5rem);
|
|
22
|
+
--tt-tail: calc(100% + 1px + 0.25rem);
|
|
23
|
+
|
|
24
|
+
> :where(.blue-tooltip-content),
|
|
25
|
+
&[data-tooltip]:before {
|
|
26
|
+
// @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
|
|
27
|
+
|
|
28
|
+
@include reset-text();
|
|
29
|
+
@include font-size(var(--#{$prefix}tooltip-font-size));
|
|
30
|
+
|
|
31
|
+
color: var(--#{$prefix}tooltip-color);
|
|
32
|
+
@include border-radius(var(--#{$prefix}tooltip-border-radius));
|
|
33
|
+
position: absolute;
|
|
34
|
+
max-width: var(--#{$prefix}tooltip-max-width);
|
|
35
|
+
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
|
|
36
|
+
text-align: center;
|
|
37
|
+
white-space: normal;
|
|
38
|
+
opacity: 0;
|
|
39
|
+
|
|
40
|
+
line-height: 1.25em;
|
|
41
|
+
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;
|
|
42
|
+
background-color: var(--tt-bg);
|
|
43
|
+
width: max-content;
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
z-index: var(--#{$prefix}tooltip-zindex);
|
|
46
|
+
--tw-content: attr(data-tooltip);
|
|
47
|
+
content: var(--tw-content);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:after {
|
|
51
|
+
// @apply absolute opacity-0;
|
|
52
|
+
position: absolute;
|
|
53
|
+
opacity: 0;
|
|
54
|
+
|
|
55
|
+
background-color: var(--tt-bg);
|
|
56
|
+
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;
|
|
57
|
+
content: "";
|
|
58
|
+
pointer-events: none;
|
|
59
|
+
width: 0.625rem;
|
|
60
|
+
height: 0.25rem;
|
|
61
|
+
display: block;
|
|
62
|
+
position: absolute;
|
|
63
|
+
mask-repeat: no-repeat;
|
|
64
|
+
mask-position: -1px 0;
|
|
65
|
+
--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");
|
|
66
|
+
mask-image: var(--mask-tooltip);
|
|
120
67
|
}
|
|
68
|
+
}
|
|
121
69
|
|
|
122
|
-
|
|
123
|
-
|
|
70
|
+
.blue-tooltip,
|
|
71
|
+
.blue-tooltip-up {
|
|
72
|
+
> .blue-tooltip-content,
|
|
73
|
+
&[data-tooltip]:before {
|
|
74
|
+
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
|
|
75
|
+
inset: auto auto var(--tt-off) 50%;
|
|
124
76
|
}
|
|
77
|
+
}
|
|
125
78
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
left: calc(0em - 5px);
|
|
132
|
-
transform: translate(0.5em, -50%);
|
|
133
|
-
}
|
|
134
|
-
&::after {
|
|
135
|
-
top: 50%;
|
|
136
|
-
right: calc(100% + 5px);
|
|
137
|
-
transform: translate(0.5em, -50%);
|
|
138
|
-
}
|
|
79
|
+
.blue-tooltip-down {
|
|
80
|
+
> .blue-tooltip-content,
|
|
81
|
+
&[data-tooltip]:before {
|
|
82
|
+
transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
|
|
83
|
+
inset: var(--tt-off) auto auto 50%;
|
|
139
84
|
}
|
|
85
|
+
}
|
|
140
86
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
right: calc(0em - 5px);
|
|
147
|
-
transform: translate(-0.5em, -50%);
|
|
148
|
-
}
|
|
149
|
-
&::after {
|
|
150
|
-
top: 50%;
|
|
151
|
-
left: calc(100% + 5px);
|
|
152
|
-
transform: translate(-0.5em, -50%);
|
|
153
|
-
}
|
|
87
|
+
.blue-tooltip-start {
|
|
88
|
+
> .blue-tooltip-content,
|
|
89
|
+
&[data-tooltip]:before {
|
|
90
|
+
transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
|
|
91
|
+
inset: 50% var(--tt-off) auto auto;
|
|
154
92
|
}
|
|
93
|
+
}
|
|
155
94
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
[data-tooltip]
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
|
|
162
|
-
|
|
163
|
-
@media (prefers-reduced-motion) {
|
|
164
|
-
animation-duration: 0s;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
95
|
+
.blue-tooltip-end {
|
|
96
|
+
> .blue-tooltip-content,
|
|
97
|
+
&[data-tooltip]:before {
|
|
98
|
+
transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
|
|
99
|
+
inset: 50% auto auto var(--tt-off);
|
|
167
100
|
}
|
|
101
|
+
}
|
|
168
102
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
103
|
+
.blue-tooltip,
|
|
104
|
+
.blue-tooltip-start,
|
|
105
|
+
.blue-tooltip-end,
|
|
106
|
+
.blue-tooltip-up,
|
|
107
|
+
.blue-tooltip-down {
|
|
108
|
+
&.blue-tooltip-open,
|
|
109
|
+
&[data-tooltip]:hover,
|
|
110
|
+
&:hover,
|
|
111
|
+
&:has(:focus-visible) {
|
|
112
|
+
> .blue-tooltip-content,
|
|
113
|
+
&[data-tooltip]:before,
|
|
114
|
+
&:after {
|
|
115
|
+
// @apply opacity-100;
|
|
116
|
+
opacity: var(--#{$prefix}tooltip-opacity);
|
|
117
|
+
--tt-pos: 0rem;
|
|
118
|
+
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;
|
|
174
119
|
}
|
|
175
120
|
}
|
|
121
|
+
}
|
|
176
122
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
123
|
+
.blue-tooltip,
|
|
124
|
+
.blue-tooltip-up {
|
|
125
|
+
&:after {
|
|
126
|
+
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
|
|
127
|
+
inset: auto auto var(--tt-tail) 50%;
|
|
183
128
|
}
|
|
129
|
+
}
|
|
184
130
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
|
|
190
|
-
|
|
191
|
-
@media (prefers-reduced-motion) {
|
|
192
|
-
animation-duration: 0s;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
131
|
+
.blue-tooltip-down {
|
|
132
|
+
&:after {
|
|
133
|
+
transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
|
|
134
|
+
inset: var(--tt-tail) auto auto 50%;
|
|
195
135
|
}
|
|
136
|
+
}
|
|
196
137
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
display: none !important;
|
|
202
|
-
}
|
|
138
|
+
.blue-tooltip-start {
|
|
139
|
+
&:after {
|
|
140
|
+
transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
|
|
141
|
+
inset: 50% calc(var(--tt-tail) + 1px) auto auto;
|
|
203
142
|
}
|
|
143
|
+
}
|
|
204
144
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
text-overflow: ellipsis;
|
|
210
|
-
}
|
|
145
|
+
.blue-tooltip-end {
|
|
146
|
+
&:after {
|
|
147
|
+
transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
|
|
148
|
+
inset: 50% auto auto calc(var(--tt-tail) + 1px);
|
|
211
149
|
}
|
|
212
150
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "blue-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"description": "UI components built on top of Bootstrap 5",
|
|
5
5
|
"license": "LGPL-3.0-or-later",
|
|
6
6
|
"homepage": "https://bruegmann.github.io/blue-web/v1",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"build-css": "node ./setVersionToStyleScss.js && sass --load-path=. ./dist/style.scss:./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
|
|
22
22
|
"build-neu-css-legacy": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
23
23
|
"build-neu-css": "sass --load-path=. ./dist/neu.scss:./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
24
|
-
"build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css",
|
|
24
|
+
"build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css && node merge-scss.js dist/style.scss",
|
|
25
25
|
"test": "craco test",
|
|
26
26
|
"eject": "craco eject",
|
|
27
27
|
"predeploy": "npm run build-docs",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
"node-sass": "^9.0.0",
|
|
60
60
|
"postcss-cli": "^9.0.1",
|
|
61
61
|
"postcss-minify": "^1.1.0",
|
|
62
|
+
"postcss-only-vars": "^1.0.0",
|
|
62
63
|
"prettier": "2.4.1",
|
|
63
64
|
"react": "^19.0.0",
|
|
64
65
|
"react-bootstrap-icons": "^1.11.5",
|