diff --git a/static/grandlyon-cut/_custom.scss b/static/grandlyon-cut/_custom.scss index 613b415..5ca00fe 100644 --- a/static/grandlyon-cut/_custom.scss +++ b/static/grandlyon-cut/_custom.scss @@ -259,7 +259,56 @@ div#main-content { padding-bottom: 0; } } - div#registration_completion { + div.registration-steps { + position: relative; + ul { + padding: 0; + @media screen and (max-width: 800px) { + display: none; + } + li { + list-style-type: none; + display: inline-flex; + width: 24.5%; + box-sizing: border-box; + align-items: center; + flex-direction: column; + span { + &.marker { + border: 1px solid #000; + padding: 1em; + border-radius: 50%; + width: 1em; + display: inline-block; + text-align: center; + background: $body-background; + z-index: 10; + } + &.label { + margin-top: 0.5em; + display: block; + text-transform: uppercase; + } + } + &.current { + span.marker { + background: #000; + color: #fff; + } + } + } + &::before { + position: absolute; + top: calc(50% - 1em); + content: ''; + border-top: 1px solid #000; + width: 74.5%; + left: 12.5%; + z-index: -1; + } + } + } + div#registration_completion, div.registration-steps { width: 60em; margin: 0 auto; h2 { diff --git a/templates/authentic2_idp_oidc/authorization.html b/templates/authentic2_idp_oidc/authorization.html index a6065bd..1800139 100644 --- a/templates/authentic2_idp_oidc/authorization.html +++ b/templates/authentic2_idp_oidc/authorization.html @@ -1,5 +1,6 @@ {% extends "authentic2/base-page.html" %} {% block content %} +{% include "registration/registration_steps.html" with active_step="share" %}