refactor: ♻️ use more of the webc feature set proper
This commit is contained in:
Sebin Nyshkim
parent
c0b42b82d0
commit
aa410f916a
21 changed files with 678 additions and 723 deletions
|
|
@ -102,12 +102,12 @@
|
|||
document.addEventListener('DOMContentLoaded', () => initializeGallery());
|
||||
</script>
|
||||
|
||||
<section class="gallery" aria-label="Image gallery">
|
||||
<section aria-label="Image gallery" webc:root="override">
|
||||
<button class="prev" aria-label="Previous Image">
|
||||
<icon icon="chevron-left" webc:nokeep></icon>
|
||||
<icon icon="chevron-left"></icon>
|
||||
</button>
|
||||
<button class="next" aria-label="Next Image">
|
||||
<icon icon="chevron-right" webc:nokeep></icon>
|
||||
<icon icon="chevron-right"></icon>
|
||||
</button>
|
||||
|
||||
<div class="track">
|
||||
|
|
@ -117,8 +117,8 @@
|
|||
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
<style webc:scoped="gallery">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-auto-columns: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
|
|
@ -126,152 +126,147 @@
|
|||
'. progress .';
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& .prev,
|
||||
& .next,
|
||||
& .indicator-btn {
|
||||
position: relative;
|
||||
:host :where(.prev, .next, .indicator-btn) {
|
||||
position: relative;
|
||||
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
cursor: pointer;
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
cursor: pointer;
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.875em;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.875em;
|
||||
|
||||
z-index: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
: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%
|
||||
);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
:host :where(.prev, .next, .indicator-btn)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
& .prev,
|
||||
& .next {
|
||||
grid-row: track;
|
||||
:host :where(.prev, .next) {
|
||||
grid-row: track;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
:host :where(.prev, .next):disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
}
|
||||
:host :where(.prev, .next) svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
|
||||
& .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
}
|
||||
:host .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
& .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
}
|
||||
:host .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
& .track {
|
||||
grid-row: track;
|
||||
grid-column: prev / next;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
:host .track {
|
||||
grid-row: track;
|
||||
grid-column: prev / next;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
|
||||
border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host .track > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:host .track::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .ref-image {
|
||||
& :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
:host .ref-image :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
:host .ref-image img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& .caption {
|
||||
font-size: 0.875em;
|
||||
text-wrap: balance;
|
||||
:host .ref-image .caption {
|
||||
font-size: 0.875em;
|
||||
text-wrap: balance;
|
||||
|
||||
background: oklch(from var(--clr-box-background) l c h / 0.75);
|
||||
background: oklch(from var(--clr-box-background) l c h / 0.75);
|
||||
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
|
||||
& .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
:host .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||
gap: 0.5em;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||
gap: 0.5em;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
& .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
:host .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
& .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%
|
||||
);
|
||||
}
|
||||
: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%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue