pacem-less 0.50.2-berbera → 0.50.2-bithynia

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/pacem/pacem.less CHANGED
@@ -329,6 +329,8 @@ each(range(12), {
329
329
  --@{PCSS}-border-panel-radius: @border_panel_radius;
330
330
  --@{PCSS}-border-card-radius: @border_card_radius;
331
331
  --@{PCSS}-corner-size: @corner_size;
332
+ --@{PCSS}-balloon-tail-size: @balloon_pointer_size;
333
+ --@{PCSS}-balloon-tail-inset: @balloon_pointer_inset;
332
334
  /* #region deprecated */
333
335
  --color-background: @color_background;
334
336
  --color-root: @color_root_background;
@@ -4,6 +4,7 @@
4
4
  @{P}-context-menu {
5
5
  display: inline-block;
6
6
 
7
+ &::part(trigger),
7
8
  @{P}-button {
8
9
  color: inherit;
9
10
 
@@ -11,6 +12,18 @@
11
12
  color: inherit;
12
13
  }
13
14
  }
15
+
16
+ &::part(trigger) {
17
+ margin: 0;
18
+ cursor: pointer;
19
+ }
20
+
21
+ &::part(icon) {
22
+ line-height: 1;
23
+ text-align: center;
24
+ .IconCore();
25
+ font-size: @grid_spacing;
26
+ }
14
27
  }
15
28
 
16
29
  .@{PCSS}-context-menuitem {
@@ -267,6 +267,8 @@
267
267
  @balloon_color: darken(@color_lightblue, 2);
268
268
  @balloon_color_contrast: @color_background;
269
269
  @balloon_shadows: @shadows;
270
+ @balloon_pointer_size: @grid_spacing;
271
+ @balloon_pointer_inset: @grid_spacing / 3;
270
272
 
271
273
  // window
272
274
  @window_color: @balloon_color;
@@ -2,9 +2,9 @@
2
2
 
3
3
  /* #region BALLOON */
4
4
 
5
- @_balloon_offset: @grid_spacing/12;
6
- @_pointer_w: 12px;
7
- @_pointer_h: 12px;
5
+ @_balloon_offset: @balloon_pointer_size/12;
6
+ @_pointer_w: @balloon_pointer_size/2;
7
+ @_pointer_h: @balloon_pointer_size/2;
8
8
  @_scale_off: 0.6667;
9
9
 
10
10
  .BalloonColorize(@_clr, @clr_inv) {
@@ -21,11 +21,31 @@
21
21
 
22
22
  &::after {
23
23
  @_clr0: fade(@_clr, min(99, @_opacity));
24
- content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='@{grid_spacing}' viewBox='0 0 24 24' width='@{grid_spacing}' fill='@{_clr0}'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
24
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='@{balloon_pointer_size}' viewBox='0 0 24 24' width='@{balloon_pointer_size}' fill='@{_clr0}'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
25
25
  }
26
26
 
27
27
  &.balloon-corners {
28
28
 
29
+ &::part(corner-topleft) {
30
+ border-top-color: @_clr2;
31
+ border-left-color: @_clr2;
32
+ }
33
+
34
+ &::part(corner-topright) {
35
+ border-top-color: @_clr2;
36
+ border-right-color: @_clr2;
37
+ }
38
+
39
+ &::part(corner-bottomright) {
40
+ border-bottom-color: @_clr2;
41
+ border-right-color: @_clr2;
42
+ }
43
+
44
+ &::part(corner-bottomleft) {
45
+ border-bottom-color: @_clr2;
46
+ border-left-color: @_clr2;
47
+ }
48
+
29
49
  > .corner {
30
50
  &.top-left {
31
51
  border-top-color: @_clr2;
@@ -52,7 +72,7 @@
52
72
 
53
73
  @{P}-balloon {
54
74
  box-sizing: border-box;
55
- min-height: @grid_spacing * 2;
75
+ //min-height: @grid_spacing * 2;
56
76
  min-width: @grid_spacing * 3;
57
77
  border: 1px solid transparent;
58
78
  //color: #fff;
@@ -60,7 +80,8 @@
60
80
  cursor: default;
61
81
  //font-size: .86em;
62
82
  position: absolute;
63
- top: 0; left: 0;
83
+ top: 0;
84
+ left: 0;
64
85
  z-index: @balloon-z-index;
65
86
  display: block;
66
87
 
@@ -129,11 +150,11 @@
129
150
  &.balloon-bottom {
130
151
 
131
152
  &.balloon-start::after {
132
- left: @grid_spacing / 3;
153
+ left: ~"var(--@{PCSS}-balloon-tail-inset)";
133
154
  }
134
155
 
135
156
  &.balloon-end::after {
136
- right: @grid_spacing / 3;
157
+ right: ~"var(--@{PCSS}-balloon-tail-inset)";
137
158
  }
138
159
 
139
160
  &.balloon-center::after {
@@ -146,11 +167,11 @@
146
167
  &.balloon-left {
147
168
 
148
169
  &.balloon-start::after {
149
- top: @grid_spacing / 3;
170
+ top: ~"var(--@{PCSS}-balloon-tail-inset)";
150
171
  }
151
172
 
152
173
  &.balloon-end::after {
153
- bottom: @grid_spacing / 3;
174
+ bottom: ~"var(--@{PCSS}-balloon-tail-inset)";
154
175
  }
155
176
 
156
177
  &.balloon-center::after {
@@ -161,6 +182,38 @@
161
182
 
162
183
  &.balloon-corners {
163
184
 
185
+ &::part(corner-topleft),
186
+ &::part(corner-topright),
187
+ &::part(corner-bottomright),
188
+ &::part(corner-bottomleft) {
189
+ @_sz: @grid_spacing/4;
190
+ width: @_sz;
191
+ height: @_sz;
192
+ border: 2px solid transparent;
193
+ position: absolute;
194
+ pointer-events: none;
195
+ }
196
+
197
+ &::part(corner-topleft) {
198
+ top: -1px;
199
+ left: -1px;
200
+ }
201
+
202
+ &::part(corner-topright) {
203
+ top: -1px;
204
+ right: -1px;
205
+ }
206
+
207
+ &::part(corner-bottomright) {
208
+ bottom: -1px;
209
+ right: -1px;
210
+ }
211
+
212
+ &::part(corner-bottomleft) {
213
+ bottom: -1px;
214
+ left: -1px;
215
+ }
216
+
164
217
  > .corner {
165
218
  @_sz: @grid_spacing/4;
166
219
  width: @_sz;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.50.2-berbera",
2
+ "version": "0.50.2-bithynia",
3
3
  "name": "pacem-less",
4
4
  "homepage": "https://js.pacem.it",
5
5
  "repository": {