quasar-ui-sellmate-ui-kit 3.14.27 → 3.14.28
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/index.common.js +2 -2
- package/dist/index.css +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.min.css +1 -1
- package/dist/index.rtl.css +1 -1
- package/dist/index.rtl.min.css +1 -1
- package/dist/index.umd.js +13 -5
- package/dist/index.umd.min.js +2 -2
- package/package.json +1 -1
- package/src/components/STooltip.vue +36 -69
package/package.json
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
:anchor="$props.arrowAnchor"
|
|
62
62
|
:self="$props.arrowSelf"
|
|
63
63
|
:offset="$props.arrowOffset"
|
|
64
|
-
:class="$props.arrowStyle"
|
|
64
|
+
:class="`${$props.arrowStyle} tooltip-triangle--${type}`"
|
|
65
65
|
class="tooltip-triangle"
|
|
66
66
|
:modelValue="modelValue"
|
|
67
67
|
></q-tooltip>
|
|
@@ -161,6 +161,7 @@
|
|
|
161
161
|
return {
|
|
162
162
|
isToggled,
|
|
163
163
|
closeIcon,
|
|
164
|
+
COLOR_OF_TYPE,
|
|
164
165
|
};
|
|
165
166
|
},
|
|
166
167
|
});
|
|
@@ -188,126 +189,92 @@
|
|
|
188
189
|
box-shadow: none !important;
|
|
189
190
|
background: none !important;
|
|
190
191
|
padding: 0;
|
|
192
|
+
margin: 0;
|
|
191
193
|
width: 0;
|
|
192
194
|
height: 0;
|
|
195
|
+
|
|
196
|
+
// 툴팁이 아래쪽에 있을 때 (위쪽을 향하는 삼각형)
|
|
193
197
|
&.bottom {
|
|
194
|
-
border:
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
right: 8px solid transparent;
|
|
198
|
-
}
|
|
198
|
+
border-left: 8px solid transparent;
|
|
199
|
+
border-right: 8px solid transparent;
|
|
200
|
+
border-bottom: 12px solid transparent; // 기본은 투명
|
|
199
201
|
}
|
|
202
|
+
// 툴팁이 위쪽에 있을 때 (아래쪽을 향하는 삼각형)
|
|
200
203
|
&.top {
|
|
201
|
-
border:
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
right: 8px solid transparent;
|
|
205
|
-
}
|
|
204
|
+
border-left: 8px solid transparent;
|
|
205
|
+
border-right: 8px solid transparent;
|
|
206
|
+
border-top: 12px solid transparent; // 기본은 투명
|
|
206
207
|
}
|
|
208
|
+
// 툴팁이 왼쪽에 있을 때 (오른쪽을 향하는 삼각형)
|
|
207
209
|
&.left {
|
|
208
|
-
border:
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
right: 0px solid transparent;
|
|
212
|
-
}
|
|
210
|
+
border-top: 8px solid transparent;
|
|
211
|
+
border-bottom: 8px solid transparent;
|
|
212
|
+
border-left: 12px solid transparent; // 기본은 투명
|
|
213
213
|
}
|
|
214
|
+
// 툴팁이 오른쪽에 있을 때 (왼쪽을 향하는 삼각형)
|
|
214
215
|
&.right {
|
|
215
|
-
border:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
left: 0px solid transparent;
|
|
219
|
-
}
|
|
216
|
+
border-top: 8px solid transparent;
|
|
217
|
+
border-bottom: 8px solid transparent;
|
|
218
|
+
border-right: 12px solid transparent; // 기본은 투명
|
|
220
219
|
}
|
|
221
220
|
|
|
222
221
|
&--default {
|
|
223
222
|
&.bottom {
|
|
224
|
-
border:
|
|
225
|
-
bottom: 12px solid $oceanblue_85;
|
|
226
|
-
}
|
|
223
|
+
border-bottom-color: $oceanblue_85;
|
|
227
224
|
}
|
|
228
225
|
&.top {
|
|
229
|
-
border:
|
|
230
|
-
top: 12px solid $oceanblue_85;
|
|
231
|
-
}
|
|
226
|
+
border-top-color: $oceanblue_85;
|
|
232
227
|
}
|
|
233
228
|
&.left {
|
|
234
|
-
border:
|
|
235
|
-
left: 12px solid $oceanblue_85;
|
|
236
|
-
}
|
|
229
|
+
border-left-color: $oceanblue_85;
|
|
237
230
|
}
|
|
238
231
|
&.right {
|
|
239
|
-
border:
|
|
240
|
-
right: 12px solid $oceanblue_85;
|
|
241
|
-
}
|
|
232
|
+
border-right-color: $oceanblue_85;
|
|
242
233
|
}
|
|
243
234
|
}
|
|
244
235
|
|
|
245
236
|
&--caution {
|
|
246
237
|
&.bottom {
|
|
247
|
-
border:
|
|
248
|
-
bottom: 12px solid $red_20;
|
|
249
|
-
}
|
|
238
|
+
border-bottom-color: $red_20;
|
|
250
239
|
}
|
|
251
240
|
&.top {
|
|
252
|
-
border:
|
|
253
|
-
top: 12px solid $red_20;
|
|
254
|
-
}
|
|
241
|
+
border-top-color: $red_20;
|
|
255
242
|
}
|
|
256
243
|
&.left {
|
|
257
|
-
border:
|
|
258
|
-
left: 12px solid $red_20;
|
|
259
|
-
}
|
|
244
|
+
border-left-color: $red_20;
|
|
260
245
|
}
|
|
261
246
|
&.right {
|
|
262
|
-
border:
|
|
263
|
-
right: 12px solid $red_20;
|
|
264
|
-
}
|
|
247
|
+
border-right-color: $red_20;
|
|
265
248
|
}
|
|
266
249
|
}
|
|
267
250
|
|
|
268
251
|
&--notice {
|
|
269
252
|
&.bottom {
|
|
270
|
-
border:
|
|
271
|
-
bottom: 12px solid $orange_10;
|
|
272
|
-
}
|
|
253
|
+
border-bottom-color: $orange_10;
|
|
273
254
|
}
|
|
274
255
|
&.top {
|
|
275
|
-
border:
|
|
276
|
-
top: 12px solid $orange_10;
|
|
277
|
-
}
|
|
256
|
+
border-top-color: $orange_10;
|
|
278
257
|
}
|
|
279
258
|
&.left {
|
|
280
|
-
border:
|
|
281
|
-
left: 12px solid $orange_10;
|
|
282
|
-
}
|
|
259
|
+
border-left-color: $orange_10;
|
|
283
260
|
}
|
|
284
261
|
&.right {
|
|
285
|
-
border:
|
|
286
|
-
right: 12px solid $orange_10;
|
|
287
|
-
}
|
|
262
|
+
border-right-color: $orange_10;
|
|
288
263
|
}
|
|
289
264
|
}
|
|
290
265
|
|
|
291
266
|
&--accent {
|
|
292
267
|
&.bottom {
|
|
293
|
-
border:
|
|
294
|
-
bottom: 12px solid $brilliantblue_20;
|
|
295
|
-
}
|
|
268
|
+
border-bottom-color: $brilliantblue_20;
|
|
296
269
|
}
|
|
297
270
|
&.top {
|
|
298
|
-
border:
|
|
299
|
-
top: 12px solid $brilliantblue_20;
|
|
300
|
-
}
|
|
271
|
+
border-top-color: $brilliantblue_20;
|
|
301
272
|
}
|
|
302
273
|
&.left {
|
|
303
|
-
border:
|
|
304
|
-
left: 12px solid $brilliantblue_20;
|
|
305
|
-
}
|
|
274
|
+
border-left-color: $brilliantblue_20;
|
|
306
275
|
}
|
|
307
276
|
&.right {
|
|
308
|
-
border:
|
|
309
|
-
right: 12px solid $brilliantblue_20;
|
|
310
|
-
}
|
|
277
|
+
border-right-color: $brilliantblue_20;
|
|
311
278
|
}
|
|
312
279
|
}
|
|
313
280
|
}
|