@asd20/ui 3.2.955 → 3.2.956
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
|
@@ -474,8 +474,24 @@ export default {
|
|
|
474
474
|
--website-header__button-foreground-color,
|
|
475
475
|
var(--color__accent-t100)
|
|
476
476
|
);
|
|
477
|
-
|
|
478
|
-
|
|
477
|
+
// box-shadow: 2px 2px 2px rgb(50, 50, 50);
|
|
478
|
+
position: relative;
|
|
479
|
+
padding: space(0.5) space(1.5);
|
|
480
|
+
transition: background-color 0.3s ease;
|
|
481
|
+
z-index: 2;
|
|
482
|
+
overflow: hidden;
|
|
483
|
+
::before {
|
|
484
|
+
content: '';
|
|
485
|
+
position: absolute;
|
|
486
|
+
top: 0;
|
|
487
|
+
left: 0; /* Align with the button's left edge */
|
|
488
|
+
width: 20px; /* Default arrow width */
|
|
489
|
+
height: 100%; /* Match the button's height */
|
|
490
|
+
clip-path: polygon(0 0, 100% 50%, 0 100%); /* Triangle pointing right */
|
|
491
|
+
background-color: rgb(255, 255, 255, 0.2); /* Arrow color */
|
|
492
|
+
transition: width 0.3s ease, background-color 0.3s ease; /* Smooth arrow growth */
|
|
493
|
+
z-index: 0;
|
|
494
|
+
}
|
|
479
495
|
&:hover,
|
|
480
496
|
&:focus {
|
|
481
497
|
background-color: var(
|
|
@@ -486,6 +502,11 @@ export default {
|
|
|
486
502
|
--website-header__button-hover-foreground-color,
|
|
487
503
|
var(--color__accent-t100)
|
|
488
504
|
);
|
|
505
|
+
::before {
|
|
506
|
+
width: 25px; /* Arrow grows on hover */
|
|
507
|
+
background-color: rgba(255, 255, 255, 0.3); /* Darker arrow on hover */
|
|
508
|
+
z-index: 0;
|
|
509
|
+
}
|
|
489
510
|
}
|
|
490
511
|
|
|
491
512
|
&:not(:last-child) {
|