@nubisco/ui 1.38.0 → 1.38.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/components/Blueprint.vue.d.ts.map +1 -1
- package/dist/components/blueprint-port-cache.d.ts +37 -0
- package/dist/components/blueprint-port-cache.d.ts.map +1 -0
- package/dist/directives/ToolTip.directive.d.ts +10 -0
- package/dist/directives/ToolTip.directive.d.ts.map +1 -1
- package/dist/directives/index.d.ts +1 -0
- package/dist/directives/index.d.ts.map +1 -1
- package/dist/index.cjs +7 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +10621 -10463
- package/dist/index.mjs.map +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.d.ts.map +1 -1
- package/dist/ui.css +1 -1
- package/package.json +2 -1
- package/src/styles/directives/_tooltip.scss +66 -12
|
@@ -19,11 +19,25 @@
|
|
|
19
19
|
transition:
|
|
20
20
|
opacity 0.2s ease,
|
|
21
21
|
transform 0.2s ease;
|
|
22
|
-
&:before
|
|
22
|
+
&:before,
|
|
23
|
+
&:after {
|
|
23
24
|
position: absolute;
|
|
24
25
|
content: '';
|
|
25
26
|
border: var(--nb-base-unit) solid transparent;
|
|
26
27
|
}
|
|
28
|
+
// `:before` is the FILL triangle (chip background colour).
|
|
29
|
+
// `:after` is the OUTLINE: a slightly larger triangle drawn UNDER
|
|
30
|
+
// the fill so the chip's border colour shows as a 1 px contour
|
|
31
|
+
// around the arrow, matching the outlined chip body. Consumers
|
|
32
|
+
// set `--tooltip-arrow-outline-color` to the chip border colour
|
|
33
|
+
// (falls back to the fill colour when no contour is wanted).
|
|
34
|
+
&:before {
|
|
35
|
+
z-index: 2;
|
|
36
|
+
}
|
|
37
|
+
&:after {
|
|
38
|
+
z-index: 1;
|
|
39
|
+
border-width: calc(var(--nb-base-unit) + 1px);
|
|
40
|
+
}
|
|
27
41
|
|
|
28
42
|
&-header {
|
|
29
43
|
font-weight: var(--nb-font-weight-semibold);
|
|
@@ -63,49 +77,89 @@
|
|
|
63
77
|
}
|
|
64
78
|
}
|
|
65
79
|
|
|
80
|
+
// Arrow offset along the chip's perpendicular axis. The directive
|
|
81
|
+
// sets `--nb-tooltip-arrow-offset` after viewport-clamping so the
|
|
82
|
+
// arrow still meets the anchor even when the chip has been pushed
|
|
83
|
+
// sideways to keep itself onscreen. Defaults to 50 % (centred) when
|
|
84
|
+
// the directive hasn't written the var (no clamp happened).
|
|
85
|
+
|
|
66
86
|
&-top {
|
|
67
87
|
&:before {
|
|
68
|
-
left: 50
|
|
88
|
+
left: var(--nb-tooltip-arrow-offset, 50%);
|
|
69
89
|
bottom: 1px;
|
|
70
90
|
transform: translate(-50%, var(--nb-base-unit));
|
|
71
91
|
border-bottom-width: 0;
|
|
72
|
-
border-top-color: var(--tooltip-arrow-border-color);
|
|
92
|
+
border-top-color: var(--tooltip-arrow-border-color);
|
|
93
|
+
}
|
|
94
|
+
&:after {
|
|
95
|
+
left: var(--nb-tooltip-arrow-offset, 50%);
|
|
96
|
+
bottom: 0;
|
|
97
|
+
transform: translate(-50%, calc(var(--nb-base-unit) + 1px));
|
|
98
|
+
border-bottom-width: 0;
|
|
99
|
+
border-top-color: var(
|
|
100
|
+
--tooltip-arrow-outline-color,
|
|
101
|
+
var(--tooltip-arrow-border-color)
|
|
102
|
+
);
|
|
73
103
|
}
|
|
74
104
|
}
|
|
75
105
|
|
|
76
106
|
&-bottom {
|
|
77
107
|
&:before {
|
|
78
|
-
left: 50
|
|
108
|
+
left: var(--nb-tooltip-arrow-offset, 50%);
|
|
79
109
|
top: 1px;
|
|
80
110
|
transform: translate(-50%, calc(var(--nb-base-unit) * -1));
|
|
81
111
|
border-top-width: 0;
|
|
112
|
+
border-bottom-color: var(--tooltip-arrow-border-color);
|
|
113
|
+
}
|
|
114
|
+
&:after {
|
|
115
|
+
left: var(--nb-tooltip-arrow-offset, 50%);
|
|
116
|
+
top: 0;
|
|
117
|
+
transform: translate(-50%, calc(var(--nb-base-unit) * -1 - 1px));
|
|
118
|
+
border-top-width: 0;
|
|
82
119
|
border-bottom-color: var(
|
|
83
|
-
--tooltip-arrow-
|
|
84
|
-
|
|
120
|
+
--tooltip-arrow-outline-color,
|
|
121
|
+
var(--tooltip-arrow-border-color)
|
|
122
|
+
);
|
|
85
123
|
}
|
|
86
124
|
}
|
|
87
125
|
|
|
88
126
|
&-left {
|
|
89
127
|
&:before {
|
|
90
|
-
top: 50
|
|
128
|
+
top: var(--nb-tooltip-arrow-offset, 50%);
|
|
91
129
|
right: 0;
|
|
92
130
|
transform: translate(var(--nb-base-unit), -50%);
|
|
93
131
|
border-right-width: 0;
|
|
132
|
+
border-left-color: var(--tooltip-arrow-border-color);
|
|
133
|
+
}
|
|
134
|
+
&:after {
|
|
135
|
+
top: var(--nb-tooltip-arrow-offset, 50%);
|
|
136
|
+
right: 1px;
|
|
137
|
+
transform: translate(calc(var(--nb-base-unit) + 1px), -50%);
|
|
138
|
+
border-right-width: 0;
|
|
94
139
|
border-left-color: var(
|
|
95
|
-
--tooltip-arrow-
|
|
96
|
-
|
|
140
|
+
--tooltip-arrow-outline-color,
|
|
141
|
+
var(--tooltip-arrow-border-color)
|
|
142
|
+
);
|
|
97
143
|
}
|
|
98
144
|
}
|
|
99
145
|
|
|
100
146
|
&-right {
|
|
101
147
|
&:before {
|
|
102
|
-
top: 50
|
|
148
|
+
top: var(--nb-tooltip-arrow-offset, 50%);
|
|
103
149
|
left: 0;
|
|
104
150
|
transform: translate(calc(var(--nb-base-unit) * -1), -50%);
|
|
105
151
|
border-left-width: 0;
|
|
152
|
+
border-right-color: var(--tooltip-arrow-border-color);
|
|
153
|
+
}
|
|
154
|
+
&:after {
|
|
155
|
+
top: var(--nb-tooltip-arrow-offset, 50%);
|
|
156
|
+
left: 1px;
|
|
157
|
+
transform: translate(calc(var(--nb-base-unit) * -1 - 1px), -50%);
|
|
158
|
+
border-left-width: 0;
|
|
106
159
|
border-right-color: var(
|
|
107
|
-
--tooltip-arrow-
|
|
108
|
-
|
|
160
|
+
--tooltip-arrow-outline-color,
|
|
161
|
+
var(--tooltip-arrow-border-color)
|
|
162
|
+
);
|
|
109
163
|
}
|
|
110
164
|
}
|
|
111
165
|
}
|