blue-web 1.9.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/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Blue Web v1.9.0 (https://bruegmann.github.io/blue-web)
2
+ * Blue Web v1.10.1 (https://bruegmann.github.io/blue-web)
3
3
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
4
4
  */
5
5
 
@@ -35,3 +35,4 @@
35
35
  @import "./styles/buttons";
36
36
  @import "./styles/container-grid";
37
37
  @import "./styles/tabs";
38
+ @import "./styles/modal";
@@ -181,7 +181,7 @@
181
181
  }
182
182
 
183
183
  &[draggable] {
184
- cursor: move;
184
+ cursor: grab;
185
185
 
186
186
  &:active {
187
187
  box-shadow: inset 0 0 0.25rem;
@@ -0,0 +1,111 @@
1
+ /**
2
+ * Allows to use Bootstrap Modals but with the native dialog element
3
+ * without the need of Bootstrap's JavaScript.
4
+ * Even works with Bootstrap's Offcanvas classes.
5
+ */
6
+
7
+ @keyframes blue-modal-open {
8
+ from {
9
+ opacity: 0;
10
+ scale: var(--ani-scale-from, 95%);
11
+ translate: var(--ani-translate-from, 0 0);
12
+ }
13
+ to {
14
+ opacity: 1;
15
+ scale: var(--ani-scale-to, 100%);
16
+ translate: var(--ani-translate-to, 0 0);
17
+ }
18
+ }
19
+
20
+ @keyframes blue-modal-close {
21
+ from {
22
+ opacity: 1;
23
+ scale: var(--ani-scale-to, 100%);
24
+ translate: var(--ani-translate-to, 0 0);
25
+ }
26
+ to {
27
+ opacity: 0;
28
+ scale: var(--ani-scale-from, 95%);
29
+ translate: var(--ani-translate-from, 0 0);
30
+ }
31
+ }
32
+
33
+ dialog.blue-modal {
34
+ border: none;
35
+ background: none;
36
+ padding: 0;
37
+ margin: 0;
38
+ max-width: none;
39
+ max-height: none;
40
+ transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete;
41
+ animation: blue-modal-close 0.2s forwards;
42
+
43
+ .offcanvas-backdrop {
44
+ display: none;
45
+ }
46
+ }
47
+
48
+ dialog.blue-modal[open] {
49
+ display: block;
50
+ animation: blue-modal-open 0.2s forwards;
51
+ }
52
+
53
+ dialog.blue-modal::backdrop {
54
+ --bs-backdrop-bg: #000;
55
+ --bs-backdrop-opacity: 0.5;
56
+ background-color: var(--bs-backdrop-bg);
57
+ transition: opacity 0.2s;
58
+ opacity: 0;
59
+ }
60
+
61
+ dialog.blue-modal[open]::backdrop {
62
+ opacity: var(--bs-backdrop-opacity);
63
+ }
64
+
65
+ .blue-modal-backdrop {
66
+ color: #0000;
67
+ z-index: -1;
68
+ grid-row-start: 1;
69
+ grid-column-start: 1;
70
+ place-self: stretch stretch;
71
+ display: grid;
72
+ position: fixed;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ }
78
+
79
+ .blue-modal-backdrop > button {
80
+ opacity: 0;
81
+ cursor: default;
82
+ }
83
+
84
+ @media (prefers-reduced-motion: reduce) {
85
+ dialog.blue-modal,
86
+ dialog.blue-modal[open],
87
+ dialog.blue-modal::backdrop {
88
+ transition: none;
89
+ animation: none;
90
+ }
91
+ }
92
+
93
+ dialog.blue-modal:has(.offcanvas) {
94
+ --ani-scale-from: 100%;
95
+ }
96
+
97
+ dialog.blue-modal:has(.offcanvas-top) {
98
+ --ani-translate-from: 0 -100%;
99
+ }
100
+
101
+ dialog.blue-modal:has(.offcanvas-end) {
102
+ --ani-translate-from: 100% 0;
103
+ }
104
+
105
+ dialog.blue-modal:has(.offcanvas-bottom) {
106
+ --ani-translate-from: 0 100%;
107
+ }
108
+
109
+ dialog.blue-modal:has(.offcanvas-start) {
110
+ --ani-translate-from: -100% 0;
111
+ }
@@ -26,7 +26,7 @@
26
26
  user-select: none;
27
27
  appearance: none;
28
28
 
29
- @include font-size(var(--#{$prefix}nav-link-font-size));
29
+ font-size: var(--#{$prefix}nav-link-font-size, 1rem);
30
30
  font-weight: var(--#{$prefix}nav-link-font-weight);
31
31
  color: var(--#{$prefix}nav-link-color);
32
32
  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
@@ -1,212 +1,150 @@
1
- @media (hover: hover) {
2
- @keyframes tips-vert {
3
- to {
4
- opacity: 0.9;
5
- transform: translate(-50%, 0);
6
- }
7
- }
8
-
9
- @keyframes tips-horz {
10
- to {
11
- opacity: 0.9;
12
- transform: translate(0, -50%);
13
- }
14
- }
15
-
16
- @keyframes tips-diag-right {
17
- to {
18
- opacity: 0.9;
19
- transform: translate(-1em, 0);
20
- }
21
- }
22
-
23
- @keyframes tips-diag-left {
24
- to {
25
- opacity: 0.9;
26
- transform: translate(1em, 0);
27
- }
28
- }
29
-
30
- // [data-tooltip]s
31
- [data-tooltip] {
32
- position: relative;
33
- &::before,
34
- &::after {
35
- text-transform: none;
36
- line-height: 1;
37
- font-size: 0.9em;
38
- user-select: none;
39
- pointer-events: none;
40
- position: absolute;
41
- display: none;
42
- opacity: 0;
43
- }
44
- // the dink
45
- &::before {
46
- content: "";
47
- border: 5px solid transparent;
48
- z-index: 1001;
49
- }
50
- // the bubble
51
- &::after {
52
- content: attr(data-tooltip);
53
- font-family: $font-family-base;
54
- text-align: center;
55
-
56
- min-width: 3em;
57
- max-width: var(--bs-tooltip-max-width, 21em);
58
-
59
- padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
60
- border-radius: var(--bs-tooltip-border-radius, 0.3em);
61
- box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
62
- background: var(--bs-tooltip-bg, #353539);
63
- color: var(--bs-tooltip-color, #fff);
64
- z-index: 1000;
65
- }
66
- // show the [data-tooltip]
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
- [data-tooltip].blue-tooltip-down-right::after {
123
- transform: translate(-1.5em, -0.5em);
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
- [data-tooltip].blue-tooltip-start {
127
- &::before {
128
- top: 50%;
129
- border-right-width: 0;
130
- border-left-color: var(--bs-tooltip-bg, #353539);
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
- [data-tooltip].blue-tooltip-end {
142
- &::before {
143
- top: 50%;
144
- border-left-width: 0;
145
- border-right-color: var(--bs-tooltip-bg, #353539);
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
- // FX: do the thing
157
- [data-tooltip][class*="blue-tooltip-up"]:hover,
158
- [data-tooltip][class*="blue-tooltip-down"]:hover {
159
- &::before,
160
- &::after {
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
- [data-tooltip][class$="blue-tooltip-end"]:hover::after {
170
- animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
171
-
172
- @media (prefers-reduced-motion) {
173
- animation-duration: 0s;
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
- [data-tooltip][class$="blue-tooltip-start"]:hover::after {
178
- animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
179
-
180
- @media (prefers-reduced-motion) {
181
- animation-duration: 0s;
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
- [data-tooltip].blue-tooltip-start:hover,
186
- [data-tooltip].blue-tooltip-end:hover {
187
- &::before,
188
- &::after {
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
- // don't show empty [data-tooltip]s
198
- [data-tooltip=""] {
199
- &::after,
200
- &::before {
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
- .blue-tooltip-nowrap {
206
- &::after {
207
- white-space: nowrap;
208
- overflow: hidden;
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.9.0",
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",