entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 8 Releases Wiki Activity

fontenay-sous-bois-2018: update steps (#36765)

This commit is contained in:
Thomas Jund 2019-10-30 15:48:35 +01:00
parent 12f6fadca1
commit c8a6da6b8c
2 changed files with 85 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
static/fontenay-sous-bois-2018/_custom.scss
View File

@ -355,6 +355,7 @@ div#gauche {
border-radius: 10px;
text-align: center;
div#tracking-code {
min-width: 0;
background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
padding: 1rem 3rem 1rem 130px;
@media screen and (max-width: $mobile-limit) {
@ -374,66 +375,77 @@ div#gauche {
}
}
}
div#steps {
margin-top: 1rem;
&::before {
content: "";
height: 1px;
width: 80%;
margin-left: 10%;
background: $primary-color;
display: block;
position: relative;
top: 70px;
}
// Steps
.wcs-steps {
border-radius: 10px;
overflow: hidden;
font-size: 1.2em;
margin-bottom: 0;
}
.wcs-step {
&--marker {
background-size: 100% !important;
}
&--label {
text-align: left;
}
&.current {
font-weight: normal;
}
}
@media ($mq-min--wcs-steps-horizontal-layout){
.wcs-steps--list {
justify-content: center;
padding-bottom: 0;
}
.wcs-step {
margin-right: $wcs-steps-spacing;
flex: 1 1 auto;
max-width: 33%;
&:last-child {
flex-grow: 0;
}
ol {
display: -ms-flexbox;
display: flex;
-ms-justify-content: space-evenly;
justify-content: space-evenly;
}
li {
position: relative;
z-index: 10;
&--label {
text-align: center;
width: 15ex;
border-bottom: 0;
background: url(img/step-g.png) top center no-repeat;
@media screen and (max-width: $mobile-limit) {
background: none;
width: 2ex;
text-align: center;
padding-right: 0;
}
span.marker {
padding: 1.5rem 0;
color: white;
@media screen and (max-width: $mobile-limit) {
padding: 0;
display: inline-block;
width: 100%;
}
}
span.label {
display: inline-block;
padding-top: 0.5rem;
@media screen and (max-width: $mobile-limit) {
display: none;
}
}
&.current {
background-image: url(img/step-r.png);
span.label {
color: $primary-color;
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
background: none;
span.marker {
background: $primary-color;
}
}
}
}
}
}
@include desktop-horizontal-steps() {
.wcs-steps{
font-size: 2.5em;
&--list {
margin-bottom: 0;
}
}
.wcs-step {
$wcs-step-marker-size: 6rem;
position: relative;
margin-bottom: 0;
flex-direction: column;
&--marker {
width: $wcs-step-marker-size;
height: $wcs-step-marker-size;
flex-basis: $wcs-step-marker-size;
}
&--label {
display: block !important;
position: static;
font-size: 0.4em;
padding-top: 0.5em;
top: 100%;
width: $wcs-step-marker-size + 1;
margin-left: -1 * ($wcs-steps-spacing / 2);
text-align: center;
align-self: flex-start;
}
// Tie
&::after {
position: absolute;
top: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important;
left: $wcs-step-marker-size;
width: calc(100% + #{$wcs-steps-spacing});
}
}
}

15
static/fontenay-sous-bois-2018/_vars.scss
View File

@ -29,3 +29,18 @@ $button-color: white;
$footer-background: $primary-color;
$widget-unique-checkbox-position: left;
$form-sidebar-position: top;
$wcs-step-border-bottom: none;
$wcs-steps-spacing: 1rem;
$wcs-steps-background: white;
$wcs-step-marker-size: 3rem;
$wcs-step-marker-type: tied;
$wcs-step-marker-tie-color: $primary-color;
$wcs-step-marker-tie-width: 1px;
$wcs-step-marker-color: white;
$wcs-step-marker-background: url(img/step-g.png) center center no-repeat;
$wcs-step-current-marker-color: white;
$wcs-step-current-marker-background: url(img/step-r.png) center center no-repeat;