You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
6.8 KiB
222 lines
6.8 KiB
[data-stepper] {
|
|
--_stepper-gap: var(--stepper-gap-md);
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-md);
|
|
--_stepper-font-size: var(--stepper-font-size-md);
|
|
/* `--_stepper-palette-*` private tokens are TSC-emitted from
|
|
* `lib/recipes/base.ts > stepper._palette-*` with the per-color cascade;
|
|
* the THM-2 shared-layer forward routes them to `color="teal"` + 33 scales. */
|
|
|
|
display: grid;
|
|
gap: var(--_stepper-gap);
|
|
min-inline-size: 0;
|
|
font-family: var(--stepper-font-family);
|
|
font-size: var(--_stepper-font-size);
|
|
line-height: var(--stepper-line-height);
|
|
color: var(--stepper-color);
|
|
}
|
|
|
|
[data-stepper][data-size='sm'] {
|
|
--_stepper-gap: var(--stepper-gap-sm);
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-sm);
|
|
--_stepper-font-size: var(--stepper-font-size-sm);
|
|
}
|
|
|
|
[data-stepper][data-size='lg'] {
|
|
--_stepper-gap: var(--stepper-gap-lg);
|
|
--_stepper-indicator-size: var(--stepper-indicator-size-lg);
|
|
--_stepper-font-size: var(--stepper-font-size-lg);
|
|
}
|
|
|
|
[data-stepper-list] {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--stepper-list-gap);
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
[data-stepper-list][data-orientation='vertical'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-stepper-item] {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(var(--stepper-separator-min-size), 1fr);
|
|
align-items: center;
|
|
gap: var(--stepper-item-gap);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-stepper-item][data-orientation='vertical'] {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(var(--stepper-separator-min-size), 1fr);
|
|
align-items: start;
|
|
}
|
|
|
|
[data-stepper-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--stepper-trigger-gap);
|
|
min-inline-size: 0;
|
|
padding-block: var(--stepper-trigger-padding-block);
|
|
padding-inline: var(--stepper-trigger-padding-inline);
|
|
border: var(--stepper-trigger-border-width) solid transparent;
|
|
border-radius: var(--stepper-trigger-radius);
|
|
background: transparent;
|
|
color: var(--stepper-trigger-color);
|
|
font: inherit;
|
|
text-align: start;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
|
|
}
|
|
|
|
[data-stepper-trigger]:hover:not([data-disabled]) {
|
|
background-image: linear-gradient(var(--state-hover), var(--state-hover));
|
|
color: var(--stepper-trigger-color-hover);
|
|
}
|
|
|
|
[data-stepper-trigger]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-stepper-indicator] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
inline-size: var(--_stepper-indicator-size);
|
|
block-size: var(--_stepper-indicator-size);
|
|
border: var(--stepper-indicator-border-width) solid var(--stepper-indicator-border);
|
|
border-radius: var(--stepper-indicator-radius);
|
|
background: var(--stepper-indicator-bg);
|
|
color: var(--stepper-indicator-color);
|
|
font-weight: var(--stepper-indicator-font-weight);
|
|
}
|
|
|
|
[data-stepper-trigger][data-state='current'] [data-stepper-indicator],
|
|
[data-stepper-indicator][data-state='current'] {
|
|
border-color: var(--_stepper-palette-border);
|
|
background: var(--_stepper-palette-track);
|
|
color: var(--_stepper-palette-text);
|
|
}
|
|
|
|
[data-stepper-trigger][data-state='complete'] [data-stepper-indicator],
|
|
[data-stepper-indicator][data-state='complete'] {
|
|
border-color: var(--_stepper-palette-solid);
|
|
background: var(--_stepper-palette-solid);
|
|
color: var(--stepper-complete-color);
|
|
}
|
|
|
|
[data-stepper][data-variant='outline'] [data-stepper-indicator][data-state='current'],
|
|
[data-stepper][data-variant='outline']
|
|
[data-stepper-trigger][data-state='current']
|
|
[data-stepper-indicator] {
|
|
background: transparent;
|
|
color: var(--_stepper-palette-text);
|
|
}
|
|
|
|
[data-stepper][data-variant='solid'] [data-stepper-indicator][data-state='current'],
|
|
[data-stepper][data-variant='solid']
|
|
[data-stepper-trigger][data-state='current']
|
|
[data-stepper-indicator] {
|
|
border-color: var(--_stepper-palette-solid);
|
|
background: var(--_stepper-palette-solid);
|
|
color: var(--stepper-complete-color);
|
|
}
|
|
|
|
[data-stepper-separator] {
|
|
align-self: center;
|
|
min-inline-size: var(--stepper-separator-min-size);
|
|
block-size: var(--stepper-separator-thickness);
|
|
border-radius: var(--stepper-separator-radius);
|
|
background: var(--stepper-separator-bg);
|
|
}
|
|
|
|
[data-stepper-separator][data-orientation='vertical'] {
|
|
justify-self: center;
|
|
inline-size: var(--stepper-separator-thickness);
|
|
block-size: 100%;
|
|
min-block-size: var(--stepper-separator-min-size);
|
|
}
|
|
|
|
[data-stepper-separator][data-state='complete'] {
|
|
background: var(--_stepper-palette-solid);
|
|
}
|
|
|
|
[data-stepper-content],
|
|
[data-stepper-completed-content] {
|
|
padding: var(--stepper-content-padding);
|
|
border: var(--stepper-content-border-width) solid var(--stepper-content-border);
|
|
border-radius: var(--stepper-content-radius);
|
|
background: var(--stepper-content-bg);
|
|
color: var(--stepper-color);
|
|
box-shadow: var(--stepper-content-shadow);
|
|
outline: none;
|
|
}
|
|
|
|
[data-stepper-content]:focus-visible,
|
|
[data-stepper-completed-content]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-stepper-prev-trigger],
|
|
[data-stepper-next-trigger] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
block-size: var(--stepper-nav-height);
|
|
padding-inline: var(--stepper-nav-padding-inline);
|
|
border: var(--stepper-nav-border-width) solid var(--stepper-nav-border);
|
|
border-radius: var(--stepper-nav-radius);
|
|
background: var(--stepper-nav-bg);
|
|
color: var(--stepper-nav-color);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
border-color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
color var(--stepper-transition-duration) var(--stepper-transition-ease),
|
|
box-shadow var(--stepper-transition-duration) var(--stepper-transition-ease);
|
|
}
|
|
|
|
[data-stepper-next-trigger] {
|
|
border-color: var(--_stepper-palette-border);
|
|
background: var(--_stepper-palette-solid);
|
|
color: var(--stepper-complete-color);
|
|
}
|
|
|
|
[data-stepper-prev-trigger]:hover:not(:disabled),
|
|
[data-stepper-next-trigger]:hover:not(:disabled) {
|
|
filter: brightness(var(--stepper-nav-hover-brightness));
|
|
}
|
|
|
|
[data-stepper-prev-trigger]:focus-visible,
|
|
[data-stepper-next-trigger]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-stepper-trigger][data-disabled],
|
|
[data-stepper-prev-trigger][data-disabled],
|
|
[data-stepper-next-trigger][data-disabled] {
|
|
cursor: default;
|
|
opacity: var(--stepper-disabled-opacity);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-stepper-trigger],
|
|
[data-stepper-prev-trigger],
|
|
[data-stepper-next-trigger] {
|
|
transition: none;
|
|
}
|
|
}
|