Alexander Zaytsev
69 lines
1.3 KiB
CSS
69 lines
1.3 KiB
CSS
@layer components {
|
|
.step {
|
|
display: grid;
|
|
grid-template-columns: 1em auto auto;
|
|
gap: calc(var(--inline-space) * 2/3);
|
|
inline-size: auto;
|
|
}
|
|
|
|
.step__content {
|
|
--input-border-radius: 0;
|
|
--input-border-size: 0;
|
|
--input-padding: 0;
|
|
|
|
border-bottom: 1px solid transparent;
|
|
color: currentColor;
|
|
font-weight: 500;
|
|
margin-block-end: calc(var(--block-space) * 1/3);
|
|
|
|
&:is(a, input[type=text]) {
|
|
--hover-size: 0;
|
|
}
|
|
|
|
.step:has(:checked) & {
|
|
opacity: 0.7;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--card-color);
|
|
}
|
|
|
|
&:is(input) {
|
|
max-inline-size: 70ch;
|
|
min-inline-size: 30ch;
|
|
|
|
@supports (field-sizing: content) {
|
|
field-sizing: content;
|
|
max-inline-size: 100%;
|
|
min-inline-size: 15ch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step__content--edit {
|
|
border-bottom-color: currentColor;
|
|
}
|
|
|
|
.steps {
|
|
contain: inline-size;
|
|
display: grid;
|
|
list-style: none;
|
|
margin: 0;
|
|
max-inline-size: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.steps__icon {
|
|
--icon-size: 0.875em;
|
|
|
|
background-color: var(--card-color);
|
|
block-size: 1.3em;
|
|
border-radius: 50%;
|
|
color: var(--color-ink-inverted);
|
|
display: grid;
|
|
inline-size: 1.3em;
|
|
place-content: center;
|
|
}
|
|
}
|