SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: ♻️ use custom property for gradient direction

Browse source
This commit is contained in:
Sebin Nyshkim 2025-06-20 15:08:46 +02:00
parent 788dc36364
commit fa19ee5e91
1 changed files with 8 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/ref-gallery.webc
View file

@ -121,6 +121,8 @@
}
:host :where(.prev, .next, .indicator-btn) {
--gradient-dir: to bottom right;
position: relative;
font-size: 1.25em;
@ -128,7 +130,7 @@
cursor: pointer;
background: linear-gradient(
to bottom right,
var(--gradient-dir),
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
@ -143,19 +145,17 @@
}
:host :where(.prev, .next, .indicator-btn):active::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
--gradient-dir: to top left;
}
:host :where(.prev, .next, .indicator-btn)::after {
--gradient-dir: to bottom right;
content: '';
position: absolute;
inset: var(--border-thin);
background: linear-gradient(
to bottom right,
var(--gradient-dir),
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
@ -255,10 +255,6 @@
}
:host .indicator-btn[aria-current='true']::after {
background: linear-gradient(
to top left,
var(--clr-quick-info-bg-start) 0%,
var(--clr-quick-info-bg-end) 50%
);
--gradient-dir: to top left;
}
</style>