js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

carousel

Browse Source
This commit is contained in:
Cory LaViska
2023-09-05 14:53:45 -04:00
parent 201b32f3fb
commit b86a6a54ab
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/carousel/carousel.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--slide-gap: var(--sl-spacing-medium, 1rem);
--slide-gap: var(--wa-space-m, 1rem);
--aspect-ratio: 16 / 9;
--scroll-hint: 0px;
@@ -19,7 +19,7 @@ export default css`
grid-template-areas:
'. slides .'
'. pagination .';
gap: var(--sl-spacing-medium);
gap: var(--wa-space-m);
align-items: center;
min-height: 100%;
min-width: 100%;
@@ -31,7 +31,7 @@ export default css`
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sl-spacing-small);
gap: var(--wa-space-s);
}
.carousel__slides {
@@ -46,7 +46,7 @@ export default css`
overscroll-behavior-x: contain;
scrollbar-width: none;
aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
border-radius: var(--sl-border-radius-small);
border-radius: var(--wa-corners-1x);
--slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
}
@@ -95,7 +95,7 @@ export default css`
.carousel__navigation {
grid-area: navigation;
display: contents;
font-size: var(--sl-font-size-x-large);
font-size: var(--wa-font-size-xl);
}
.carousel__navigation-button {
@@ -104,12 +104,12 @@ export default css`
align-items: center;
background: none;
border: none;
border-radius: var(--sl-border-radius-small);
border-radius: var(--wa-corners-1x);
font-size: inherit;
color: var(--sl-color-neutral-600);
padding: var(--sl-spacing-x-small);
color: var(--wa-color-text-quiet);
padding: var(--wa-space-xs);
cursor: pointer;
transition: var(--sl-transition-medium) color;
transition: var(--wa-transition-fast) color;
appearance: none;
}
@@ -137,16 +137,16 @@ export default css`
cursor: pointer;
background: none;
border: 0;
border-radius: var(--sl-border-radius-circle);
width: var(--sl-spacing-small);
height: var(--sl-spacing-small);
background-color: var(--sl-color-neutral-300);
border-radius: var(--wa-corners-circle);
width: var(--wa-space-s);
height: var(--wa-space-s);
background-color: var(--wa-color-neutral-element-fill-muted);
padding: 0;
margin: 0;
}
.carousel__pagination-item--active {
background-color: var(--sl-color-neutral-700);
background-color: var(--wa-color-brand-element-fill-vivid);
transform: scale(1.2);
}
@@ -154,7 +154,7 @@ export default css`
.carousel__slides:focus-visible,
.carousel__navigation-button:focus-visible,
.carousel__pagination-item:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
`;