@smilodon/core 1.4.6 → 1.4.7
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.cjs +28 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +28 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.umd.js +28 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/package.json +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -1506,6 +1506,31 @@
|
|
|
1506
1506
|
position: relative;
|
|
1507
1507
|
}
|
|
1508
1508
|
|
|
1509
|
+
/* Allow authors to style selected state from outside the shadow root
|
|
1510
|
+
by setting attributes/classes on the host element. This mirrors the
|
|
1511
|
+
internal .option-container.selected rules but reads the same CSS
|
|
1512
|
+
custom properties so themes can fully control selected appearance. */
|
|
1513
|
+
:host([aria-selected="true"]) .option-container,
|
|
1514
|
+
:host(.smilodon-option--selected) .option-container {
|
|
1515
|
+
background: var(--select-option-selected-bg, #e3f2fd);
|
|
1516
|
+
color: var(--select-option-selected-color, #1976d2);
|
|
1517
|
+
border: var(--select-option-selected-border, var(--select-option-border, none));
|
|
1518
|
+
border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
|
|
1519
|
+
border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
|
|
1520
|
+
box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
|
|
1521
|
+
transform: var(--select-option-selected-transform, var(--select-option-transform, none));
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
:host([aria-selected="true"]) .option-container:hover,
|
|
1525
|
+
:host(.smilodon-option--selected) .option-container:hover {
|
|
1526
|
+
background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
|
|
1527
|
+
color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
|
|
1528
|
+
border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
|
|
1529
|
+
border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
|
|
1530
|
+
box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
|
|
1531
|
+
transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1509
1534
|
.option-container {
|
|
1510
1535
|
display: flex;
|
|
1511
1536
|
align-items: center;
|
|
@@ -2596,12 +2621,12 @@
|
|
|
2596
2621
|
}
|
|
2597
2622
|
|
|
2598
2623
|
.option:hover {
|
|
2599
|
-
background
|
|
2624
|
+
background: var(--select-dark-option-hover-bg, #374151);
|
|
2600
2625
|
color: var(--select-dark-option-hover-color, #f9fafb);
|
|
2601
2626
|
}
|
|
2602
2627
|
|
|
2603
2628
|
.option.selected {
|
|
2604
|
-
background
|
|
2629
|
+
background: var(--select-dark-option-selected-bg, #3730a3);
|
|
2605
2630
|
color: var(--select-dark-option-selected-text, #e0e7ff);
|
|
2606
2631
|
border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
|
|
2607
2632
|
border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
|
|
@@ -2610,7 +2635,7 @@
|
|
|
2610
2635
|
}
|
|
2611
2636
|
|
|
2612
2637
|
.option.selected:hover {
|
|
2613
|
-
background
|
|
2638
|
+
background: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
|
|
2614
2639
|
color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
|
|
2615
2640
|
border: var(--select-dark-option-selected-hover-border, var(--select-dark-option-selected-border, var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)))));
|
|
2616
2641
|
border-bottom: var(--select-dark-option-selected-hover-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
|