159 lines
4.1 KiB
CSS
159 lines
4.1 KiB
CSS
/*!
|
|
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
|
|
*/
|
|
@charset "UTF-8";
|
|
|
|
/* ¯¯¯¯¯¯¯¯¯ *\
|
|
STEPPER
|
|
\* ˍˍˍˍˍˍˍˍˍ */
|
|
.fr-stepper {
|
|
--title-spacing: 0;
|
|
--text-spacing: 0;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.fr-stepper__title {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
font-weight: 700;
|
|
font-size: 1.125rem;
|
|
line-height: 1.5rem;
|
|
|
|
--title-spacing: 0 0 0.75rem 0;
|
|
--text-spacing: 0 0 0.75rem 0;
|
|
color: var(--text-title-grey);
|
|
}
|
|
|
|
.fr-stepper__state {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5rem;
|
|
|
|
--title-spacing: 0 0 0.25rem 0;
|
|
--text-spacing: 0 0 0.25rem 0;
|
|
font-weight: 400;
|
|
color: var(--text-mention-grey);
|
|
}
|
|
|
|
.fr-stepper__state::after {
|
|
content: "\a";
|
|
white-space: pre;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.fr-stepper__details {
|
|
font-size: 0.75rem;
|
|
line-height: 1.25rem;
|
|
margin-top: 0.75rem;
|
|
color: var(--text-mention-grey);
|
|
}
|
|
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="2"][data-fr-current-step="2"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="3"][data-fr-current-step="3"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="4"][data-fr-current-step="4"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="5"][data-fr-current-step="5"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="6"][data-fr-current-step="6"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="7"][data-fr-current-step="7"] + .fr-stepper__details,
|
|
.fr-stepper .fr-stepper__steps[data-fr-steps="8"][data-fr-current-step="8"] + .fr-stepper__details {
|
|
display: none;
|
|
}
|
|
|
|
.fr-stepper__steps {
|
|
--stepper-size: 0.5rem;
|
|
--default-outer: calc((100% + var(--stepper-size)) / var(--steps));
|
|
--default-inner: calc(var(--default-outer) - var(--stepper-size));
|
|
--active-outer: calc((100% + var(--stepper-size)) / var(--current-step));
|
|
--active-inner: calc(var(--active-outer) - var(--stepper-size));
|
|
width: 100%;
|
|
height: var(--stepper-size);
|
|
background-repeat: no-repeat;
|
|
background-size: calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%, 100% 100%;
|
|
background-position: 0 0, 0 0;
|
|
|
|
--current-step: 0;
|
|
background-image: repeating-linear-gradient(to right, var(--background-active-blue-france) 0, var(--background-active-blue-france) var(--active-inner), transparent var(--active-inner), transparent var(--active-outer)), repeating-linear-gradient(to right, var(--background-contrast-grey) 0, var(--background-contrast-grey) var(--default-inner), transparent var(--default-inner), transparent var(--default-outer));
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="2"] {
|
|
--steps: 2;
|
|
--step-width: calc(100% / 2);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="3"] {
|
|
--steps: 3;
|
|
--step-width: calc(100% / 3);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="4"] {
|
|
--steps: 4;
|
|
--step-width: calc(100% / 4);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="5"] {
|
|
--steps: 5;
|
|
--step-width: calc(100% / 5);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="6"] {
|
|
--steps: 6;
|
|
--step-width: calc(100% / 6);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="7"] {
|
|
--steps: 7;
|
|
--step-width: calc(100% / 7);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-steps="8"] {
|
|
--steps: 8;
|
|
--step-width: calc(100% / 8);
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="1"] {
|
|
--current-step: 1;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="2"] {
|
|
--current-step: 2;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="3"] {
|
|
--current-step: 3;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="4"] {
|
|
--current-step: 4;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="5"] {
|
|
--current-step: 5;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="6"] {
|
|
--current-step: 6;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="7"] {
|
|
--current-step: 7;
|
|
}
|
|
|
|
.fr-stepper__steps[data-fr-current-step="8"] {
|
|
--current-step: 8;
|
|
}
|
|
@media (min-width: 36em) {
|
|
/*! media sm */
|
|
}
|
|
@media (min-width: 48em) {
|
|
/*! media md */
|
|
.fr-stepper__title {
|
|
font-size: 1.25rem;
|
|
line-height: 1.75rem;
|
|
}
|
|
}
|
|
@media (min-width: 62em) {
|
|
/*! media lg */
|
|
}
|
|
@media (min-width: 78em) {
|
|
/*! media xl */
|
|
}
|