@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
52 lines • 1.21 kB
CSS
/*
* Utilities
*/
.dnb-forms-wizard-layout {
display: flex;
flex-flow: column wrap;
justify-content: stretch;
align-items: stretch;
column-gap: var(--spacing-x-large);
}
.dnb-forms-wizard-layout__indicator {
flex: 0;
margin-bottom: 2rem;
}
.dnb-forms-wizard-layout__contents {
flex: 1;
}
.dnb-forms-wizard-layout__contents .dnb-forms-step {
outline: none;
}
.dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
.dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx {
--appear-opacity: 0;
--appear-offset: -0.25rem;
opacity: var(--appear-opacity);
transform: translate3d(var(--appear-offset), 0, 0);
animation: appear 600ms var(--easing-default) forwards;
animation-delay: calc(var(--element-index, 0) * 30ms);
}
@keyframes appear {
0% {
opacity: var(--appear-opacity);
transform: translate3d(var(--appear-offset), 0, 0);
}
80% {
opacity: 1;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media screen and (max-width: 60em) {
.dnb-forms-wizard-layout {
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.dnb-forms-wizard-layout__contents {
flex-basis: auto;
}
}