refactor(ui): localize component styles
This commit is contained in:
@@ -461,4 +461,364 @@ component Carousel {
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wire-next--carousel {
|
||||
--wire-carousel-color: var(--wire-component-color, var(--wire-color-primary));
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-next__carousel-header h3,
|
||||
.wire-next__carousel-header p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-header p {
|
||||
margin-top: 0.35rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-next__carousel-layout {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-main {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-viewport {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
background: var(--wire-color-surface-subtle, var(--wire-color-surface));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-next__carousel-viewport:focus-visible {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent);
|
||||
}
|
||||
|
||||
.wire-next__carousel-track {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: var(--wire-carousel-gap);
|
||||
transform: translateX(
|
||||
calc(
|
||||
var(--wire-carousel-index) * -1 *
|
||||
(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
|
||||
)
|
||||
)
|
||||
);
|
||||
transition: transform var(--wire-motion-base) var(--wire-ease-emphasized);
|
||||
translate: var(--wire-carousel-drag-offset, 0) 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-dragging="true"] .wire-next__carousel-track {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-track {
|
||||
transform: translateX(
|
||||
calc(
|
||||
var(--wire-carousel-index) *
|
||||
(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view) + var(--wire-carousel-gap)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide {
|
||||
position: relative;
|
||||
display: grid;
|
||||
flex: 0 0
|
||||
calc(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view)
|
||||
);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 20rem;
|
||||
place-items: center;
|
||||
background: var(--wire-color-surface-raised, var(--wire-color-surface));
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide {
|
||||
flex-basis: min(78%, 32rem);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-track {
|
||||
box-sizing: border-box;
|
||||
transform: translateX(
|
||||
calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap)))
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child {
|
||||
margin-inline-start: calc((100% - min(78%, 32rem)) / 2);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child {
|
||||
margin-inline-end: calc((100% - min(78%, 32rem)) / 2);
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track {
|
||||
transform: translateX(
|
||||
calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap)))
|
||||
);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide > img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 38rem);
|
||||
padding: clamp(2rem, 8vw, 5rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content h4,
|
||||
.wire-next__carousel-slide-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content h4 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.4rem);
|
||||
}
|
||||
|
||||
.wire-next__carousel-slide-content p {
|
||||
margin-top: 0.65rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
}
|
||||
|
||||
.wire-next__carousel-control {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0;
|
||||
border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-text) 76%, transparent);
|
||||
color: var(--wire-color-surface);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.wire-next__carousel-control:focus-visible,
|
||||
.wire-next__carousel-pagination button:focus-visible,
|
||||
.wire-next__carousel-thumbnails button:focus-visible {
|
||||
outline: 2px solid var(--wire-carousel-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control--previous {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-control--next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination {
|
||||
display: flex;
|
||||
min-height: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination button {
|
||||
width: 0.65rem;
|
||||
min-height: 0.65rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-text-muted);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next__carousel-pagination button[data-active="true"] {
|
||||
border-color: var(--wire-carousel-color);
|
||||
background: var(--wire-carousel-color);
|
||||
}
|
||||
|
||||
.wire-next__carousel-counter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
bottom: 0.8rem;
|
||||
left: 50%;
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--wire-color-text) 82%, transparent);
|
||||
color: var(--wire-color-surface);
|
||||
font-weight: 700;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
gap: 0.55rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails button {
|
||||
display: grid;
|
||||
flex: 0 0 8.5rem;
|
||||
min-height: 3.75rem;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-sm);
|
||||
background: var(--wire-color-surface);
|
||||
color: var(--wire-color-text);
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails button[data-active="true"] {
|
||||
border-color: var(--wire-carousel-color);
|
||||
box-shadow: inset 0 0 0 1px var(--wire-carousel-color);
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails img {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.wire-next__carousel-thumbnails span {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
|
||||
flex: 0 0 9rem;
|
||||
flex-direction: column;
|
||||
max-height: 28rem;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
|
||||
flex-basis: 7.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport {
|
||||
cursor: grab;
|
||||
touch-action: pan-y;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-draggable="true"] img,
|
||||
.wire-next--carousel[data-draggable="true"] a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport {
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-track {
|
||||
--wire-carousel-snap-slide: calc(
|
||||
(100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) /
|
||||
var(--wire-carousel-per-view)
|
||||
);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
box-sizing: content-box;
|
||||
grid-auto-columns: var(--wire-carousel-snap-slide);
|
||||
grid-auto-flow: column;
|
||||
padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-next--carousel[data-snap="true"] .wire-next__carousel-slide {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wire-next__carousel-slide {
|
||||
flex-basis: 100%;
|
||||
min-height: 16rem;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails {
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
max-height: none;
|
||||
}
|
||||
.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button {
|
||||
flex-basis: 8.5rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-next__carousel-track {
|
||||
transition-duration: 0.01ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user