@oslokommune/punkt-css
Version:
CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo
1 lines • 4.67 kB
CSS
.pkt-stepper{--pkt-steps-indicator-width: 24px;--pkt-steps-indicator-height: 24px;--pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);--pkt-steps-border-width: 2.5px;--pkt-steps-line-length: 1.5rem;color:var(--pkt-color-brand-dark-blue-1000);font-size:1.125rem;font-weight:500;letter-spacing:-0.2px;list-style:none;margin:0;padding:0}.pkt-stepper .pkt-step{display:grid}.pkt-stepper .pkt-step__wrapper{grid-column:title/content;grid-row:title/content}.pkt-stepper .pkt-step__title{font-weight:500;width:max-content;width:100%}.pkt-stepper .pkt-step__content{font-weight:300;padding-bottom:1.5rem;width:100%}.pkt-stepper .pkt-step__indicator{z-index:2;grid-area:indicator}.pkt-stepper .pkt-step__line{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-stepper .pkt-step__line--1{grid-area:indicator}.pkt-stepper .pkt-step__line--2{grid-area:indicator}.pkt-stepper .pkt-step__line--3{grid-area:line;height:fit-content}.pkt-stepper .pkt-step__nav-wrapper{display:flex;gap:20px;margin-top:1rem}.pkt-stepper--vertical{display:grid;grid-template-columns:1fr}.pkt-stepper--vertical .pkt-step{grid-template-areas:"indicator title" "line content";grid-template-columns:var(--pkt-steps-indicator-width) auto;grid-template-rows:var(--pkt-steps-indicator-height) minmax(min-content, max-content);grid-gap:0 1rem;justify-items:flex-start}.pkt-stepper--vertical .pkt-step--current .pkt-step__title,.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding:1rem 1.5rem;background-color:var(--pkt-color-surface-subtle-pale-blue)}.pkt-stepper--vertical .pkt-step--current .pkt-step__content{padding-top:0}.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper{margin-bottom:1.5rem}.pkt-stepper--vertical .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--vertical .pkt-step__line{min-height:min-content;height:100%;margin:auto;width:var(--pkt-steps-border-width)}.pkt-stepper--vertical .pkt-step__line--1{height:50%;transform:translateY(-55%)}.pkt-stepper--vertical .pkt-step__line--2{height:50%;transform:translateY(55%)}.pkt-stepper--vertical .pkt-step__line--3{min-height:4rem}.pkt-stepper--vertical .pkt-step__nav-wrapper{flex-direction:row}.pkt-stepper--horizontal{display:flex}.pkt-stepper--horizontal .pkt-step{grid-template-areas:"indicator line" "title title" "content content";grid-template-columns:var(--pkt-steps-indicator-width) minmax(60px, max-content);grid-template-rows:var(--pkt-steps-indicator-width) min-content min-content;justify-items:flex-start}.pkt-stepper--horizontal .pkt-step__wrapper{min-width:fit-content}.pkt-stepper--horizontal .pkt-step__title{padding:1.5rem 1rem 1.5rem 0}.pkt-stepper--horizontal .pkt-step__content{padding:0 1rem 1rem 0}.pkt-stepper--horizontal .pkt-step__indicator>svg{vertical-align:baseline}.pkt-stepper--horizontal .pkt-step__line{min-width:min-content;width:100%;margin:auto;height:var(--pkt-steps-border-width)}.pkt-stepper--horizontal .pkt-step__line--1{width:50%;transform:translateX(-55%)}.pkt-stepper--horizontal .pkt-step__line--2{width:50%;transform:translateX(55%)}.pkt-stepper--horizontal .pkt-step__line--3{min-width:5rem}.pkt-stepper--horizontal .pkt-step__nav-wrapper{flex-direction:column}.pkt-step:first-of-type .pkt-step__line--1{display:none}.pkt-step--incomplete .pkt-step__line{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--incomplete .pkt-step__title,.pkt-step--incomplete .pkt-step__content{color:var(--pkt-color-grays-gray-600)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--2{background-color:var(--pkt-color-grays-gray-200)}.pkt-step:last-of-type .pkt-step__line--3,.pkt-step:last-of-type .pkt-step__line--2{display:none}.pkt-step--current .pkt-step__line--1{background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-step--current .pkt-step__line--2,.pkt-step--current .pkt-step__line--3{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--current+.pkt-step--incomplete .pkt-step__line--1{background-color:var(--pkt-color-grays-gray-200)}.pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__title,.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__content{display:none}.pkt-stepper--vertical .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-height:2rem}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current){grid-template-columns:var(--pkt-steps-indicator-width) minmax(2rem, max-content)}.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3{min-width:2rem}