From a14f1a21475a061e447a7dc5f71f04f1b4780364 Mon Sep 17 00:00:00 2001 From: Elias Showk Date: Mon, 23 Jul 2018 10:40:33 +0200 Subject: [PATCH 1/2] add option to display circle steps (#23533) --- help/fr/misc-scss.page | 30 ++++ static/includes/_form-steps.scss | 232 +++++++++++++++++++++++++++++++ static/includes/_wcs.scss | 69 ++++----- 3 files changed, 292 insertions(+), 39 deletions(-) create mode 100644 static/includes/_form-steps.scss diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page index 2f1935e..291bb0f 100644 --- a/help/fr/misc-scss.page +++ b/help/fr/misc-scss.page @@ -358,6 +358,36 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.

Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)

0

+ +

$circle-steps

+

Active la présentation en cercles des étapes

+

false

+ + +

$circle-steps-with-lines

+

Active les lignes entre les cercles

+

true

+ + +

$circle-steps-diameter

+

Diamètre des cercles

+

56px

+ + +

$circle-steps-number-color

+

Couleur des nombres à l'intérieur des cercles

+

#868686

+ + +

$circle-steps-current-number-color

+

Couleur des nombres de l'étape courante

+

white

+ + +

$circle-steps-current-marker-background

+

Couleur de fond du cercle de l'étape courante

+

$primary-color

+ diff --git a/static/includes/_form-steps.scss b/static/includes/_form-steps.scss new file mode 100644 index 0000000..206218a --- /dev/null +++ b/static/includes/_form-steps.scss @@ -0,0 +1,232 @@ +$circle-steps: false !default; +$circle-steps-with-lines: true !default; +$circle-steps-diameter: 56px !default; +$circle-steps-number-color: #868686 !default; +$circle-steps-current-number-color: white !default; +$circle-steps-current-marker-background: $primary-color !default; + +// private variables +$_circle-lines-thickness: 1px !default; +$_steps-height: $circle-steps-diameter; +$_steps-border: 1px; + +/* circle steps or squared steps */ + +@if $circle-steps { + + div#steps { + padding: 0 1em; + + ol { + // reduce empty space on the left (user agent stylesheet) + padding-left: 0; + margin-left: -1em; + } + + li { + display: -ms-flexbox; + display: flex; + padding: 0; + margin: $_steps-height 0; + width: auto; + position: relative; + border: 0; + background: transparent; + justify-content: space-between; + -ms-justify-content: space-between; + align-items: center; + -ms-align-items: center; + flex-direction: row; + -ms-flex-direction: row; + + > span { + flex-shrink: 0; + flex-basis: $circle-steps-diameter; + } + + span.marker { + display: inline-flex; + flex-grow: 0; + align-items: center; + -ms-align-items: center; + justify-content: center; + -ms-justify-content: center; + margin: 0 1em; + position: relative; + color: $circle-steps-number-color; + background: white; + border: $_steps-border solid $circle-steps-number-color; + border-radius: 50%; + font-size: 100%; + font-weight: bold; + text-align: center; + vertical-align: middle; + width: $circle-steps-diameter; + height: $circle-steps-diameter; + // bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + // hide the circle inside the marker + &::before { + display: none; + } + } + + span.label { + margin: 0; + flex-grow: 1; + color: #868686; + text-align: center; + vertical-align: middle; + } + + &.current { + font-weight: bold; + + span.label { + color: $title-color; + } + + span.marker { + color: $circle-steps-current-number-color; + border-color: $circle-steps-current-marker-background; + background: $circle-steps-current-marker-background; + } + } + + @if $circle-steps-with-lines { + + &.first { + span.marker::after { + display: none; + } + } + + span.marker::after { + content: ' '; + z-index: -1; + position: absolute; + height: calc(#{$_steps-height} + #{$circle-steps-diameter}/2 + #{$_steps-border}); + width: $_circle-lines-thickness; + bottom: calc(#{$circle-steps-diameter} - #{$_steps-border}); + right: 50%; + background-color: $circle-steps-number-color; + padding: 0; + } + } + } + } + + @media screen and (max-width: $mobile-limit) { + div#gauche div#steps { + order: 1; + -ms-order: 1; + padding: 1em 0; + + ol { + display: flex; + display: -ms-flexbox; + flex-direction: row; + -ms-flex-direction: row; + justify-content: center; + -ms-justify-content: center; + flex-flow: nowrap; + -ms-flex-flow: nowrap; + align-items: center; + -ms-align-items: center; + // bug on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2) + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + + li { + padding: 0 1em; + height: auto; + + &.first { + padding-left: 0; + } + + span.marker { + margin: 0; + padding: 0 9px; + border-radius: 50%; + width: $circle-steps-diameter; + height: $circle-steps-diameter; + + @if $circle-steps-with-lines { + &::after { + content: ' '; + position: absolute; + padding: 0; + height: $_circle-lines-thickness; + width: calc(#{$circle-steps-diameter} + #{$_steps-border}*2); + left: calc(-#{$circle-steps-diameter}/2 - #{$_steps-border}); + bottom: 50%; + } + } + } + // hide labels on little screens + span.label { + display: none; + } + } + } + } + } +} @else { + // squared steps + div#steps ol { + margin: 0; + padding: 0; + text-align: left; + list-style: none; + color: #868686; + + & li { + border: 0; + border-bottom: 1px solid #CCC; + margin-bottom: 2ex; + border-radius: $border-radius; + padding: 1ex; + letter-spacing: 1px; + } + & li.current { + border: 0; + background: $title-background; + color: $title-color; + & span.label { + font-weight: bold; + } + } + & li span.marker { + display: block; + font-size: 250%; + } + } + @if ($responsive-steps == horizontal) { + @media screen and (max-width: $mobile-limit) { + div#steps { + color: #AAA; + & ol { + & li { + & span.marker { + color: white; + background: #DDD; + border: 1px solid #DDD; + } + } + & li.current { + background: inherit; + color: inherit; + & span.marker { + background: $title-background; + color: $title-color; + } + } + } + } + } + } +} diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss index 9ad6185..72c4f85 100644 --- a/static/includes/_wcs.scss +++ b/static/includes/_wcs.scss @@ -1,6 +1,8 @@ @import 'grid'; +@import 'form-steps'; $responsive-steps: horizontal !default; +$circle-steps: false !default; /* hide a bunch of elements */ div#droite, @@ -33,7 +35,35 @@ div#gauche + div#rub_service { clear: none; } +@if $circle-steps { + // in order to let more space to the labels + div#gauche { + min-width: 18.5%; + max-width: 25%; + width: auto; + } + + div#gauche + div#rub_service { + min-width: 73%; + float: left; + width: auto; + } + @media screen and (max-width: $mobile-limit) { + div#gauche { + min-width: inherit; + max-width: inherit; + float: none; + width: 100%; + } + + div#gauche + div#rub_service { + min-width: inherit; + float: none; + width: 100%; + } + } +} /* style homepage blocks */ div#services > ul { @include vendor-prefix('column-count', '2'); @@ -106,37 +136,6 @@ div#services div.block-custom-text { margin: 1em; } -/* steps */ - -div#steps ol { - text-align: left; - margin: 0; - padding: 0; - list-style: none; - color: #868686; - - & li { - border: 0; - border-bottom: 1px solid #ccc; - margin-bottom: 2ex; - border-radius: $border-radius; - padding: 1ex; - letter-spacing: 1px; - } - & li.current { - border: 0; - background: $title-background; - color: $title-color; - & span.label { - font-weight: bold; - } - } - & li span.marker { - font-size: 250%; - display: block; - } -} - @if ($responsive-steps == horizontal) { @media screen and (max-width: $mobile-limit) { div#gauche { @@ -157,7 +156,6 @@ div#steps ol { div#steps { position: static; margin: 0; - color: #aaa; white-space: nowrap; overflow: hidden; width: 100%; @@ -180,22 +178,15 @@ div#steps ol { position: static; padding: 2px 9px; font-weight: bold; - color: white; text-align: center; - background: #ddd; border-radius: $border-radius; - border: 1px solid #ddd; } } & li.current { - background: inherit; - color: inherit; & span.label { font-weight: normal; } & span.marker { - background: $title-background; - color: $title-color; border-radius: $border-radius; } } -- 2.18.0