sakana-element 2.4.2 → 2.5.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.
Files changed (138) hide show
  1. package/README.md +26 -2
  2. package/dist/es/Alert-Cq5F0XNt.js +57 -0
  3. package/dist/es/Avatar-CbgoH75Q.js +5 -0
  4. package/dist/es/Badge-BVu3hO8V.js +7 -0
  5. package/dist/es/Breadcrumb-Bh5y4LbC.js +6 -0
  6. package/dist/es/Button-B1wRI6I7.js +28 -0
  7. package/dist/es/Card-VMxMFix8.js +8 -0
  8. package/dist/es/Carousel-QnDHp3Ka.js +11 -0
  9. package/dist/es/ChatBubble-DYao4l85.js +5 -0
  10. package/dist/es/Checkbox-BbLzAqK2.js +228 -0
  11. package/dist/es/Collapse-BkKmhGQf.js +11 -0
  12. package/dist/es/Collapsible-B56M9eUW.js +12 -0
  13. package/dist/es/Command-CORaZKsJ.js +45 -0
  14. package/dist/es/ConfigProvider-CGLQ9b8M.js +35 -0
  15. package/dist/es/Diff-gDYKT1cl.js +17 -0
  16. package/dist/es/Divider-bI4lEaol.js +5 -0
  17. package/dist/es/Drawer-AnXxT-V6.js +6 -0
  18. package/dist/es/Dropdown-80RoE7gX.js +115 -0
  19. package/dist/es/FileInput-B6CyElTd.js +113 -0
  20. package/dist/es/Filter-CtIs_iO4.js +13 -0
  21. package/dist/es/Icon-hbRhI1iH.js +3 -0
  22. package/dist/es/Indicator-Bs6f41iJ.js +5 -0
  23. package/dist/es/Input-DJsDXAG1.js +8 -0
  24. package/dist/es/Kbd-DZf70Cdz.js +5 -0
  25. package/dist/es/Link-CLXoAvDl.js +5 -0
  26. package/dist/es/Loading-BHzOi8J-.js +27 -0
  27. package/dist/es/Message-DOxtRo8V.js +51 -0
  28. package/dist/es/Notification-F5UfnGWs.js +22 -0
  29. package/dist/es/Pixelate-DFpR42b2.js +12 -0
  30. package/dist/es/Popconfirm-C1LNG9db.js +8 -0
  31. package/dist/es/Progress-CDHJJUVL.js +6 -0
  32. package/dist/es/Radio-HMaWtyx9.js +11 -0
  33. package/dist/es/Resizable-DSYUZwLE.js +59 -0
  34. package/dist/es/Select-DaBVMoMB.js +31 -0
  35. package/dist/es/Skeleton-4hCbgDOF.js +7 -0
  36. package/dist/es/Switch-BCTrn4hn.js +11 -0
  37. package/dist/es/Table-B5twhEZC.js +5 -0
  38. package/dist/es/Tooltip-CDjXpGHn.js +4 -0
  39. package/dist/es/Validator-DoWa9KfA.js +16 -0
  40. package/dist/es/index.js +41 -140
  41. package/dist/index.css +2 -1
  42. package/dist/theme/Alert.css +1 -295
  43. package/dist/theme/Avatar.css +1 -86
  44. package/dist/theme/Badge.css +1 -214
  45. package/dist/theme/Breadcrumb.css +1 -192
  46. package/dist/theme/Button.css +1 -1570
  47. package/dist/theme/Card.css +1 -347
  48. package/dist/theme/Carousel.css +1 -0
  49. package/dist/theme/ChatBubble.css +1 -218
  50. package/dist/theme/Checkbox.css +1 -604
  51. package/dist/theme/Collapse.css +1 -764
  52. package/dist/theme/Collapsible.css +1 -0
  53. package/dist/theme/Command.css +1 -0
  54. package/dist/theme/Diff.css +1 -110
  55. package/dist/theme/Divider.css +1 -150
  56. package/dist/theme/Drawer.css +1 -206
  57. package/dist/theme/Dropdown.css +1 -471
  58. package/dist/theme/FileInput.css +1 -397
  59. package/dist/theme/Filter.css +1 -598
  60. package/dist/theme/Indicator.css +1 -159
  61. package/dist/theme/Input.css +1 -647
  62. package/dist/theme/Kbd.css +1 -104
  63. package/dist/theme/Link.css +1 -69
  64. package/dist/theme/Loading.css +1 -266
  65. package/dist/theme/Message.css +1 -565
  66. package/dist/theme/Notification.css +1 -316
  67. package/dist/theme/Popconfirm.css +1 -46
  68. package/dist/theme/Progress.css +1 -278
  69. package/dist/theme/Radio.css +1 -492
  70. package/dist/theme/Resizable.css +1 -95
  71. package/dist/theme/Select.css +1 -584
  72. package/dist/theme/Skeleton.css +1 -192
  73. package/dist/theme/Switch.css +1 -323
  74. package/dist/theme/Table.css +1 -680
  75. package/dist/theme/Validator.css +1 -25
  76. package/dist/theme/index.css +1 -341
  77. package/dist/types/components/Badge/types.d.ts +2 -0
  78. package/dist/types/components/Carousel/constants.d.ts +6 -0
  79. package/dist/types/components/Carousel/index.d.ts +77 -0
  80. package/dist/types/components/Carousel/types.d.ts +27 -0
  81. package/dist/types/components/Collapsible/constants.d.ts +6 -0
  82. package/dist/types/components/Collapsible/index.d.ts +85 -0
  83. package/dist/types/components/Collapsible/types.d.ts +22 -0
  84. package/dist/types/components/Command/constants.d.ts +4 -0
  85. package/dist/types/components/Command/index.d.ts +216 -0
  86. package/dist/types/components/Command/types.d.ts +59 -0
  87. package/dist/types/components/Validator/index.d.ts +1 -0
  88. package/dist/types/components/index.d.ts +3 -0
  89. package/dist/types/hooks/index.d.ts +1 -1
  90. package/dist/umd/index.css +2 -1
  91. package/dist/umd/index.css.gz +0 -0
  92. package/dist/umd/index.umd.cjs +1255 -5
  93. package/dist/umd/index.umd.cjs.gz +0 -0
  94. package/package.json +15 -3
  95. package/dist/es/Alert-DdAShH-x.js +0 -19
  96. package/dist/es/Avatar-BGTH7x40.js +0 -9
  97. package/dist/es/Badge-CYZ55qNe.js +0 -14
  98. package/dist/es/Breadcrumb-BTWTtzrN.js +0 -15
  99. package/dist/es/Button-GsSCWg5x.js +0 -24
  100. package/dist/es/Card-BhgzwQqo.js +0 -16
  101. package/dist/es/ChatBubble-4F481Agj.js +0 -9
  102. package/dist/es/Checkbox-C7vZGSTh.js +0 -51
  103. package/dist/es/Collapse-CbcSQig5.js +0 -53
  104. package/dist/es/ConfigProvider-K1UzjlRm.js +0 -45
  105. package/dist/es/Diff-B747pgwb.js +0 -64
  106. package/dist/es/Divider-BSu_1-AU.js +0 -9
  107. package/dist/es/Drawer-I2lCgyba.js +0 -40
  108. package/dist/es/Dropdown-B0J_c8Wv.js +0 -104
  109. package/dist/es/FileInput-CFg1wpsH.js +0 -33
  110. package/dist/es/Filter-nA8j-62U.js +0 -40
  111. package/dist/es/Form-C1b8Igns.js +0 -123
  112. package/dist/es/Icon-BulvH9Wm.js +0 -27
  113. package/dist/es/Indicator-BbW4iUkh.js +0 -9
  114. package/dist/es/Input-BUHFulIW.js +0 -42
  115. package/dist/es/Kbd-CeP2wkdE.js +0 -13
  116. package/dist/es/Link-Dks2bXo8.js +0 -11
  117. package/dist/es/Loading-DoBtVGWo.js +0 -92
  118. package/dist/es/Message-Ba_P4Wvy.js +0 -152
  119. package/dist/es/Notification-DzG8dLuk.js +0 -69
  120. package/dist/es/Overlay-DeyTycv0.js +0 -12
  121. package/dist/es/Pixelate-B21HKbSE.js +0 -39
  122. package/dist/es/Popconfirm-BqN3JxJ_.js +0 -23
  123. package/dist/es/Progress--6EJjbbM.js +0 -12
  124. package/dist/es/Radio-CrdrvrFH.js +0 -33
  125. package/dist/es/Resizable-By3ijQf0.js +0 -151
  126. package/dist/es/Select-Cq1Ucs_U.js +0 -133
  127. package/dist/es/Skeleton-ChCVgMSk.js +0 -15
  128. package/dist/es/Switch-DURmSH-T.js +0 -34
  129. package/dist/es/Table-BE2f9u65.js +0 -10
  130. package/dist/es/Tooltip-DR4Mc5Fh.js +0 -74
  131. package/dist/es/Validator-BYn72MYn.js +0 -40
  132. package/dist/es/hooks-dJGu-5DG.js +0 -170
  133. package/dist/es/utils-CnCdZsHG.js +0 -155
  134. package/dist/es/vendor-eombfMkP.js +0 -1351
  135. package/dist/theme/Form.css +0 -83
  136. package/dist/theme/Icon.css +0 -168
  137. package/dist/theme/Overlay.css +0 -12
  138. package/dist/theme/Tooltip.css +0 -235
@@ -1,83 +0,0 @@
1
- /* Form Component Styles */
2
- .px-form[data-v-0e2bbb22] {
3
- /* Form container styles */
4
- }
5
-
6
- /* Inline layout */
7
- .px-form.is-inline[data-v-0e2bbb22] {
8
- display: flex;
9
- flex-wrap: wrap;
10
- gap: 0 16px;
11
- }
12
- .px-form.is-inline .px-form-item[data-v-0e2bbb22] {
13
- margin-bottom: 12px;
14
- }
15
- .px-form-item[data-v-0e2bbb22] {
16
- display: flex;
17
- flex-wrap: wrap;
18
- align-items: flex-start;
19
- margin-bottom: 18px;
20
- }
21
- .px-form-item__label[data-v-0e2bbb22] {
22
- display: inline-block;
23
- vertical-align: middle;
24
- font-size: var(--px-font-size-base);
25
- color: var(--px-text-color-regular);
26
- line-height: 32px;
27
- padding: 0 12px 0 0;
28
- box-sizing: border-box;
29
- width: var(--px-form-label-width, 150px);
30
- flex-shrink: 0;
31
- text-align: right;
32
- }
33
- .px-form-item__content[data-v-0e2bbb22] {
34
- line-height: 32px;
35
- position: relative;
36
- font-size: var(--px-font-size-base);
37
- flex: 1;
38
- min-width: 0;
39
- }
40
- .px-form-item__error-msg[data-v-0e2bbb22] {
41
- color: var(--px-color-danger);
42
- font-size: var(--px-font-size-small);
43
- line-height: 1;
44
- padding-top: 4px;
45
- position: absolute;
46
- top: 100%;
47
- left: 0;
48
- }
49
- .px-form-item.is-error .px-input__wrapper[data-v-0e2bbb22] {
50
- border-color: var(--px-color-danger);
51
- }
52
- .px-form-item.is-success .px-input__wrapper[data-v-0e2bbb22] {
53
- border-color: var(--px-color-success);
54
- }
55
- .px-form-item.is-required .px-form-item__label[data-v-0e2bbb22]::before {
56
- content: "*";
57
- color: var(--px-color-danger);
58
- margin-right: 4px;
59
- }
60
-
61
- /* Input wrapper for status icon alignment */
62
- .px-form-item__input-wrap[data-v-0e2bbb22] {
63
- position: relative;
64
- display: inline-flex;
65
- align-items: center;
66
- width: 100%;
67
- }
68
-
69
- /* Status icon */
70
- .px-form-item__status-icon[data-v-0e2bbb22] {
71
- position: absolute;
72
- right: 8px;
73
- z-index: 1;
74
- }
75
- .px-form-item__status-icon.is-success[data-v-0e2bbb22] {
76
- color: var(--px-color-success);
77
- }
78
- .px-form-item__status-icon.is-error[data-v-0e2bbb22] {
79
- color: var(--px-color-danger);
80
- }
81
- .px-form-item[data-v-0e2bbb22] {
82
- --px-form-label-width: var(--ac9c6e38) !important;
83
- }
@@ -1,168 +0,0 @@
1
- /* PxIcon - Pixel Art Icon Component Styles */
2
- .px-icon[data-v-57d28fe2] {
3
- --px-icon-color: inherit;
4
- display: inline-flex;
5
- justify-content: center;
6
- align-items: center;
7
- position: relative;
8
- color: var(--px-icon-color);
9
- vertical-align: middle;
10
- line-height: 1;
11
- }
12
-
13
- /* SVG container - ensures proper sizing */
14
- .px-icon__pixel[data-v-57d28fe2] {
15
- display: flex;
16
- width: 100%;
17
- height: 100%;
18
- }
19
- .px-icon__pixel svg[data-v-57d28fe2] {
20
- width: 100%;
21
- height: 100%;
22
- fill: currentColor;
23
- }
24
-
25
- /* Fallback for missing icons */
26
- .px-icon__fallback[data-v-57d28fe2] {
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- width: 100%;
31
- height: 100%;
32
- font-size: 0.75em;
33
- opacity: 0.5;
34
- }
35
-
36
- /* Type colors */
37
- .px-icon--primary[data-v-57d28fe2] {
38
- --px-icon-color: var(--px-color-primary);
39
- }
40
- .px-icon--info[data-v-57d28fe2] {
41
- --px-icon-color: var(--px-color-info);
42
- }
43
- .px-icon--success[data-v-57d28fe2] {
44
- --px-icon-color: var(--px-color-success);
45
- }
46
- .px-icon--warning[data-v-57d28fe2] {
47
- --px-icon-color: var(--px-color-warning);
48
- }
49
- .px-icon--danger[data-v-57d28fe2] {
50
- --px-icon-color: var(--px-color-danger);
51
- }
52
-
53
- /* Size classes (24px grid multiples for crisp pixel rendering) */
54
- .px-icon--xs[data-v-57d28fe2] { width: 12px; height: 12px;
55
- }
56
- .px-icon--sm[data-v-57d28fe2] { width: 18px; height: 18px;
57
- }
58
- .px-icon--md[data-v-57d28fe2] { width: 24px; height: 24px;
59
- }
60
- .px-icon--lg[data-v-57d28fe2] { width: 36px; height: 36px;
61
- }
62
- .px-icon--xl[data-v-57d28fe2] { width: 48px; height: 48px;
63
- }
64
- .px-icon--2xl[data-v-57d28fe2] { width: 72px; height: 72px;
65
- }
66
-
67
- /* FA compat aliases */
68
- .px-icon--1x[data-v-57d28fe2] { width: 24px; height: 24px;
69
- }
70
- .px-icon--2x[data-v-57d28fe2] { width: 48px; height: 48px;
71
- }
72
- .px-icon--3x[data-v-57d28fe2] { width: 72px; height: 72px;
73
- }
74
-
75
- /* Rotation transforms */
76
- .px-icon--rotate-90[data-v-57d28fe2] { transform: rotate(90deg);
77
- }
78
- .px-icon--rotate-180[data-v-57d28fe2] { transform: rotate(180deg);
79
- }
80
- .px-icon--rotate-270[data-v-57d28fe2] { transform: rotate(270deg);
81
- }
82
-
83
- /* Flip transforms */
84
- .px-icon--flip-h[data-v-57d28fe2] { transform: scaleX(-1);
85
- }
86
- .px-icon--flip-v[data-v-57d28fe2] { transform: scaleY(-1);
87
- }
88
- .px-icon--flip-h.px-icon--flip-v[data-v-57d28fe2] { transform: scale(-1, -1);
89
- }
90
-
91
- /* ========================================
92
- Pixel-Art Stepped Animations
93
- Using steps() for discrete frame jumps
94
- ======================================== */
95
-
96
- /* Spin - 8-step rotation (45° increments) */
97
- @keyframes px-spin-57d28fe2 {
98
- from { transform: rotate(0deg);
99
- }
100
- to { transform: rotate(360deg);
101
- }
102
- }
103
- .px-icon--spin[data-v-57d28fe2] {
104
- animation: px-spin-57d28fe2 1s steps(8) infinite;
105
- }
106
-
107
- /* Pulse - rotate with scale pulse (8 steps) */
108
- @keyframes px-pulse-57d28fe2 {
109
- 0%, 100% { transform: rotate(0deg) scale(1);
110
- }
111
- 50% { transform: rotate(180deg) scale(1.1);
112
- }
113
- }
114
- .px-icon--pulse[data-v-57d28fe2] {
115
- animation: px-pulse-57d28fe2 1s steps(8) infinite;
116
- }
117
-
118
- /* Bounce - vertical hop (5 steps) */
119
- @keyframes px-bounce-57d28fe2 {
120
- 0%, 100% { transform: translateY(0);
121
- }
122
- 50% { transform: translateY(-25%);
123
- }
124
- }
125
- .px-icon--bounce[data-v-57d28fe2] {
126
- animation: px-bounce-57d28fe2 0.6s steps(5) infinite;
127
- }
128
-
129
- /* Shake - horizontal shake (4 steps) */
130
- @keyframes px-shake-57d28fe2 {
131
- 0%, 100% { transform: translateX(0);
132
- }
133
- 25% { transform: translateX(-15%);
134
- }
135
- 75% { transform: translateX(15%);
136
- }
137
- }
138
- .px-icon--shake[data-v-57d28fe2] {
139
- animation: px-shake-57d28fe2 0.4s steps(4) infinite;
140
- }
141
-
142
- /* Beat - scale throb (3 steps) */
143
- @keyframes px-beat-57d28fe2 {
144
- 0%, 100% { transform: scale(1);
145
- }
146
- 50% { transform: scale(1.25);
147
- }
148
- }
149
- .px-icon--beat[data-v-57d28fe2] {
150
- animation: px-beat-57d28fe2 0.6s steps(3) infinite;
151
- }
152
-
153
- /* Fade - opacity flicker (4 steps) */
154
- @keyframes px-fade-57d28fe2 {
155
- 0%, 100% { opacity: 1;
156
- }
157
- 50% { opacity: 0.4;
158
- }
159
- }
160
- .px-icon--fade[data-v-57d28fe2] {
161
- animation: px-fade-57d28fe2 1s steps(4) infinite;
162
- }
163
-
164
- /* Ensure image-rendering for crisp pixels */
165
- .px-icon__pixel svg[data-v-57d28fe2] {
166
- image-rendering: pixelated;
167
- image-rendering: crisp-edges;
168
- }
@@ -1,12 +0,0 @@
1
-
2
- .px-overlay[data-v-a64cd74a] {
3
- position: fixed;
4
- top: 0;
5
- left: 0;
6
- right: 0;
7
- bottom: 0;
8
- height: 100%;
9
- background-color: rgba(0, 0, 0, 0.5);
10
- overflow: auto;
11
- z-index: 2000;
12
- }
@@ -1,235 +0,0 @@
1
- /* Tooltip Variables */
2
- .px-tooltip[data-v-d982dfd2] {
3
- --px-tooltip-bg-color: var(--px-bg-color);
4
- --px-tooltip-font-size: var(--px-font-size-base);
5
- --px-tooltip-border-color: var(--px-border-color-dark);
6
- --px-tooltip-padding: 10px 14px;
7
- --px-tooltip-shadow-color: var(--px-shadow-color);
8
- display: inline-block;
9
- }
10
- /* Base Tooltip Styles - Pixel Game Style */
11
- /* No smooth transitions for pixel feel */
12
- .px-tooltip .fade-enter-active[data-v-d982dfd2],
13
- .px-tooltip .fade-leave-active[data-v-d982dfd2] {
14
- transition: none;
15
- }
16
- .px-tooltip .fade-enter-from[data-v-d982dfd2],
17
- .px-tooltip .fade-leave-to[data-v-d982dfd2] {
18
- opacity: 0;
19
- }
20
- /* Popper container - Pixel style box */
21
- .px-tooltip .px-tooltip__popper[data-v-d982dfd2] {
22
- background: transparent;
23
- padding: var(--px-tooltip-padding);
24
- color: var(--px-text-color-primary);
25
- line-height: 1.5;
26
- font-size: var(--px-tooltip-font-size);
27
- font-family: var(--px-font-family);
28
- word-break: break-all;
29
- box-sizing: border-box;
30
- z-index: 1000;
31
- position: relative;
32
-
33
- /* Remove traditional border */
34
- border: none;
35
-
36
- /* Pixel shadow via drop-shadow (respects clip-path shape) */
37
- filter: drop-shadow(
38
- var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-tooltip-shadow-color)
39
- );
40
- }
41
- /* Border layer — filled with border color, clipped to pixel shape */
42
- .px-tooltip .px-tooltip__popper[data-v-d982dfd2]::before {
43
- content: "";
44
- position: absolute;
45
- inset: 0;
46
- background: var(--px-tooltip-border-color);
47
- clip-path: polygon(
48
- 0 4px,
49
- 2px 4px,
50
- 2px 2px,
51
- 4px 2px,
52
- 4px 0,
53
- calc(100% - 4px) 0,
54
- calc(100% - 4px) 2px,
55
- calc(100% - 2px) 2px,
56
- calc(100% - 2px) 4px,
57
- 100% 4px,
58
- 100% calc(100% - 4px),
59
- calc(100% - 2px) calc(100% - 4px),
60
- calc(100% - 2px) calc(100% - 2px),
61
- calc(100% - 4px) calc(100% - 2px),
62
- calc(100% - 4px) 100%,
63
- 4px 100%,
64
- 4px calc(100% - 2px),
65
- 2px calc(100% - 2px),
66
- 2px calc(100% - 4px),
67
- 0 calc(100% - 4px)
68
- );
69
- z-index: -1;
70
- }
71
- /* Fill layer — inset by border width, filled with bg color, beveled */
72
- .px-tooltip .px-tooltip__popper[data-v-d982dfd2]::after {
73
- content: "";
74
- position: absolute;
75
- inset: 2px;
76
- background: var(--px-tooltip-bg-color);
77
- clip-path: polygon(
78
- 0 4px,
79
- 2px 4px,
80
- 2px 2px,
81
- 4px 2px,
82
- 4px 0,
83
- calc(100% - 4px) 0,
84
- calc(100% - 4px) 2px,
85
- calc(100% - 2px) 2px,
86
- calc(100% - 2px) 4px,
87
- 100% 4px,
88
- 100% calc(100% - 4px),
89
- calc(100% - 2px) calc(100% - 4px),
90
- calc(100% - 2px) calc(100% - 2px),
91
- calc(100% - 4px) calc(100% - 2px),
92
- calc(100% - 4px) 100%,
93
- 4px 100%,
94
- 4px calc(100% - 2px),
95
- 2px calc(100% - 2px),
96
- 2px calc(100% - 4px),
97
- 0 calc(100% - 4px)
98
- );
99
- box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.08);
100
- z-index: -1;
101
- }
102
- /* Pixel arrow — base */
103
- .px-tooltip .px-tooltip__popper .px-tooltip__arrow[data-v-d982dfd2] {
104
- position: absolute;
105
- background: var(--px-tooltip-border-color);
106
- z-index: 1;
107
- }
108
- /* Top placement → arrow points down at bottom edge */
109
- .px-tooltip .px-tooltip__popper[data-popper-placement^='top'] .px-tooltip__arrow[data-v-d982dfd2] {
110
- bottom: -6px;
111
- width: 10px;
112
- height: 6px;
113
- clip-path: polygon(
114
- 0 0, 10px 0,
115
- 10px 2px, 8px 2px,
116
- 8px 4px, 6px 4px,
117
- 6px 6px, 4px 6px,
118
- 4px 4px, 2px 4px,
119
- 2px 2px, 0 2px
120
- );
121
- }
122
- /* Bottom placement → arrow points up at top edge */
123
- .px-tooltip .px-tooltip__popper[data-popper-placement^='bottom'] .px-tooltip__arrow[data-v-d982dfd2] {
124
- top: -6px;
125
- width: 10px;
126
- height: 6px;
127
- clip-path: polygon(
128
- 4px 0, 6px 0,
129
- 6px 2px, 8px 2px,
130
- 8px 4px, 10px 4px,
131
- 10px 6px, 0 6px,
132
- 0 4px, 2px 4px,
133
- 2px 2px, 4px 2px
134
- );
135
- }
136
- /* Left placement → arrow points right at right edge */
137
- .px-tooltip .px-tooltip__popper[data-popper-placement^='left'] .px-tooltip__arrow[data-v-d982dfd2] {
138
- right: -6px;
139
- width: 6px;
140
- height: 10px;
141
- clip-path: polygon(
142
- 0 0, 2px 0,
143
- 2px 2px, 4px 2px,
144
- 4px 4px, 6px 4px,
145
- 6px 6px, 4px 6px,
146
- 4px 8px, 2px 8px,
147
- 2px 10px, 0 10px
148
- );
149
- }
150
- /* Right placement → arrow points left at left edge */
151
- .px-tooltip .px-tooltip__popper[data-popper-placement^='right'] .px-tooltip__arrow[data-v-d982dfd2] {
152
- left: -6px;
153
- width: 6px;
154
- height: 10px;
155
- clip-path: polygon(
156
- 6px 0, 6px 10px,
157
- 4px 10px, 4px 8px,
158
- 2px 8px, 2px 6px,
159
- 0 6px, 0 4px,
160
- 2px 4px, 2px 2px,
161
- 4px 2px, 4px 0
162
- );
163
- }
164
- /* Dark tooltip variant */
165
- .px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2] {
166
- --px-tooltip-bg-color: var(--px-text-color-primary);
167
- --px-tooltip-border-color: var(--px-text-color-primary);
168
- --px-tooltip-shadow-color: rgba(0, 0, 0, 0.4);
169
- color: var(--px-bg-color);
170
- }
171
- .px-tooltip--dark .px-tooltip__popper[data-v-d982dfd2]::after {
172
- box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.15), inset -2px -2px 0 rgba(0, 0, 0, 0.2);
173
- }
174
- /* Light tooltip variant */
175
- .px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
176
- --px-tooltip-bg-color: var(--px-bg-color);
177
- --px-tooltip-border-color: var(--px-border-color);
178
- color: var(--px-text-color-primary);
179
- }
180
- /* Type variants — themed colors */
181
- .px-tooltip--primary .px-tooltip__popper[data-v-d982dfd2] {
182
- --px-tooltip-bg-color: var(--px-color-primary);
183
- --px-tooltip-border-color: var(--px-color-primary-dark);
184
- --px-tooltip-shadow-color: var(--px-color-primary-dark);
185
- color: #fff;
186
- }
187
- .px-tooltip--primary.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
188
- --px-tooltip-bg-color: var(--px-color-primary-light-9);
189
- --px-tooltip-border-color: var(--px-color-primary);
190
- color: var(--px-color-primary);
191
- }
192
- .px-tooltip--success .px-tooltip__popper[data-v-d982dfd2] {
193
- --px-tooltip-bg-color: var(--px-color-success);
194
- --px-tooltip-border-color: var(--px-color-success-dark);
195
- --px-tooltip-shadow-color: var(--px-color-success-dark);
196
- color: #fff;
197
- }
198
- .px-tooltip--success.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
199
- --px-tooltip-bg-color: var(--px-color-success-light-9);
200
- --px-tooltip-border-color: var(--px-color-success);
201
- color: var(--px-color-success);
202
- }
203
- .px-tooltip--info .px-tooltip__popper[data-v-d982dfd2] {
204
- --px-tooltip-bg-color: var(--px-color-info);
205
- --px-tooltip-border-color: var(--px-color-info-dark);
206
- --px-tooltip-shadow-color: var(--px-color-info-dark);
207
- color: #fff;
208
- }
209
- .px-tooltip--info.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
210
- --px-tooltip-bg-color: var(--px-color-info-light-9);
211
- --px-tooltip-border-color: var(--px-color-info);
212
- color: var(--px-color-info);
213
- }
214
- .px-tooltip--warning .px-tooltip__popper[data-v-d982dfd2] {
215
- --px-tooltip-bg-color: var(--px-color-warning);
216
- --px-tooltip-border-color: var(--px-color-warning-dark);
217
- --px-tooltip-shadow-color: var(--px-color-warning-dark);
218
- color: #fff;
219
- }
220
- .px-tooltip--warning.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
221
- --px-tooltip-bg-color: var(--px-color-warning-light-9);
222
- --px-tooltip-border-color: var(--px-color-warning);
223
- color: var(--px-color-warning);
224
- }
225
- .px-tooltip--danger .px-tooltip__popper[data-v-d982dfd2] {
226
- --px-tooltip-bg-color: var(--px-color-danger);
227
- --px-tooltip-border-color: var(--px-color-danger-dark);
228
- --px-tooltip-shadow-color: var(--px-color-danger-dark);
229
- color: #fff;
230
- }
231
- .px-tooltip--danger.px-tooltip--light .px-tooltip__popper[data-v-d982dfd2] {
232
- --px-tooltip-bg-color: var(--px-color-danger-light-9);
233
- --px-tooltip-border-color: var(--px-color-danger);
234
- color: var(--px-color-danger);
235
- }