@dataloop-ai/components 0.18.103 → 0.18.105
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/package.json
CHANGED
|
@@ -333,6 +333,20 @@ export default defineComponent({
|
|
|
333
333
|
flat: this.flat,
|
|
334
334
|
color: this.textColor
|
|
335
335
|
}),
|
|
336
|
+
'--dl-button-icon-color-hover': setColorOnHover({
|
|
337
|
+
disabled: this.disabled,
|
|
338
|
+
outlined: this.outlined,
|
|
339
|
+
shaded: this.shaded,
|
|
340
|
+
flat: this.flat,
|
|
341
|
+
color: this.getIconColor
|
|
342
|
+
}),
|
|
343
|
+
'--dl-icon-color': setColorOnHover({
|
|
344
|
+
disabled: this.disabled,
|
|
345
|
+
outlined: this.outlined,
|
|
346
|
+
shaded: this.shaded,
|
|
347
|
+
flat: this.flat,
|
|
348
|
+
color: this.getIconColor
|
|
349
|
+
}),
|
|
336
350
|
'--dl-button-border-hover': setBorderOnHover({
|
|
337
351
|
disabled: this.disabled,
|
|
338
352
|
flat: this.flat,
|
|
@@ -505,6 +519,9 @@ export default defineComponent({
|
|
|
505
519
|
|
|
506
520
|
.dl-button-icon {
|
|
507
521
|
transition: var(--dl-button-text-transition-duration);
|
|
522
|
+
&:hover:enabled:not(:active) {
|
|
523
|
+
color: var(--dl-button-icon-color-hover);
|
|
524
|
+
}
|
|
508
525
|
}
|
|
509
526
|
|
|
510
527
|
.dl-button-container {
|
|
@@ -89,7 +89,7 @@ export default defineComponent({
|
|
|
89
89
|
cssIconVars(): Record<string, string> {
|
|
90
90
|
return {
|
|
91
91
|
'--dl-icon-font-size': `${this.size}`,
|
|
92
|
-
'--
|
|
92
|
+
'--icon-color': this.color
|
|
93
93
|
? // todo: remove this. this is needed for now until the swap of DLBTN in OA
|
|
94
94
|
getColor(
|
|
95
95
|
this.color === 'secondary'
|
|
@@ -157,7 +157,7 @@ export default defineComponent({
|
|
|
157
157
|
<style scoped lang="scss">
|
|
158
158
|
.dl-icon {
|
|
159
159
|
display: inline-flex;
|
|
160
|
-
color: var(--dl-icon-color);
|
|
160
|
+
color: var(var(--dl-icon-color), var(--icon-color));
|
|
161
161
|
font-size: var(--dl-icon-font-size);
|
|
162
162
|
}
|
|
163
163
|
</style>
|
|
@@ -293,6 +293,16 @@
|
|
|
293
293
|
outlined
|
|
294
294
|
/>
|
|
295
295
|
</div>
|
|
296
|
+
<div>
|
|
297
|
+
<h3>hover color</h3>
|
|
298
|
+
<dl-button
|
|
299
|
+
icon="icon-dl-search"
|
|
300
|
+
flat
|
|
301
|
+
dense
|
|
302
|
+
label="test me"
|
|
303
|
+
text-color="red"
|
|
304
|
+
/>
|
|
305
|
+
</div>
|
|
296
306
|
<div>
|
|
297
307
|
<h3>button with icon color</h3>
|
|
298
308
|
<dl-button
|
|
@@ -25,8 +25,7 @@
|
|
|
25
25
|
<dl-tooltip
|
|
26
26
|
color="rgb(0, 255, 0)"
|
|
27
27
|
background-color="dl-color-side-panel"
|
|
28
|
-
>
|
|
29
|
-
lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
|
28
|
+
>lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
|
30
29
|
Assumenda corporis alias cupiditate natus? Ipsum quos quia
|
|
31
30
|
temporibus ipsam magnam, alias rerum aut, a quaerat dicta,
|
|
32
31
|
quasi aperiam facere asperiores saepe.
|