0001-publik-base-theme-update-steps-36765.patch
static/rouen/_side_block.scss | ||
---|---|---|
50 | 50 |
} |
51 | 51 |
} |
52 | 52 | |
53 |
body.one-step div#steps { display: none; }
|
|
54 |
body.without-tracking-code div#steps { margin-bottom: 2em; }
|
|
53 |
body.one-step #steps { display: none; } |
|
54 |
body.without-tracking-code #steps { margin-bottom: 2em; } |
|
55 | 55 | |
56 |
div#steps {
|
|
57 |
margin-top: 8em;
|
|
58 |
margin-bottom: 11.5em;
|
|
56 |
.wcs-steps {
|
|
57 |
margin-top: 0;
|
|
58 |
margin-bottom: 8.5em;
|
|
59 | 59 | |
60 |
@media screen and (max-width: $mobile-limit) { |
|
61 |
margin-top: 0; |
|
62 |
margin-bottom: 8.5em; |
|
60 |
@media ($mq-min--wcs-steps-horizontal-layout) { |
|
61 |
&--list { |
|
62 |
justify-content: center; |
|
63 |
} |
|
64 |
} |
|
65 | ||
66 |
@include desktop-horizontal-steps() { |
|
67 |
margin-top: 8em; |
|
68 |
margin-bottom: 11.5em; |
|
69 |
} |
|
70 |
} |
|
71 | ||
72 |
.wcs-step { |
|
73 |
&--marker { |
|
74 |
border: 5px solid #9b9b9b; |
|
63 | 75 |
} |
64 | 76 | |
65 |
ol { |
|
66 |
display: -ms-flexbox; |
|
67 |
display: flex; |
|
68 |
li.first.last::after { |
|
69 |
background: none; |
|
77 |
&.current & { |
|
78 |
&--marker { |
|
79 |
border-color: $primary-color; |
|
70 | 80 |
} |
81 |
} |
|
82 | ||
83 |
&.step-before & { |
|
84 |
&--marker { |
|
85 |
background: #9b9b9b; |
|
86 |
} |
|
87 |
} |
|
88 |
@media ($mq-min--wcs-steps-horizontal-layout) { |
|
89 |
&:not(:last-child) { |
|
90 |
flex-grow: 1; |
|
91 |
} |
|
92 |
max-width: 8.5rem; |
|
93 |
&--marker-nb { |
|
94 |
display: none; |
|
95 |
} |
|
96 |
&--label { |
|
97 |
text-align: center; |
|
98 |
} |
|
99 |
} |
|
71 | 100 | |
72 |
li { |
|
73 |
position: relative; |
|
74 |
-ms-flex: 1; |
|
75 |
flex: 1; |
|
76 |
padding: 0; |
|
77 |
text-transform: uppercase; |
|
78 |
color: $primary-color; |
|
79 |
font-size: 24px; |
|
80 |
margin-bottom: 0; |
|
81 |
border: none; |
|
82 |
min-width: 30px; |
|
83 |
min-height: 40px; |
|
84 |
&::after { |
|
85 |
content: ''; |
|
86 |
height: 5px; |
|
87 |
width: 100%; |
|
88 |
display: block; |
|
89 |
position: absolute; |
|
90 |
left: 0; |
|
91 |
bottom: 5px; |
|
92 |
background: #9b9b9b; |
|
93 |
@media screen and (max-width: $mobile-limit) { |
|
94 |
bottom: 15px; |
|
95 |
} |
|
96 |
} |
|
97 |
&:first-child::after { left: 50%; width: 50%; } |
|
98 |
&:last-child::after { right: 50%; width: 50%; } |
|
99 |
span.marker { |
|
100 |
position: absolute; |
|
101 |
bottom: 0; |
|
102 |
overflow: hidden; |
|
103 |
left: 50%; |
|
104 |
text-indent: -1000px; |
|
105 |
border: none; |
|
106 |
color: $primary-color; |
|
107 |
background: white; |
|
108 |
width: 15px; |
|
109 |
height: 15px; |
|
110 |
box-shadow: 0 0 0 5px #9b9b9b; |
|
111 |
border-radius: 10px; |
|
112 |
z-index: 100; |
|
113 |
@media screen and (max-width: $mobile-limit) { |
|
114 |
padding: 0; |
|
115 |
bottom: 10px; |
|
116 |
} |
|
117 |
} |
|
118 |
span.label { |
|
119 |
display: block; |
|
120 |
left: 50%; |
|
121 |
position: absolute; |
|
122 |
width: 12em; |
|
123 |
font-size: $font-size; |
|
124 |
padding-right: 0; |
|
125 |
text-transform: none; |
|
126 |
color: #9b9b9b; |
|
127 |
transform: rotate(-45deg); |
|
128 |
transform-origin: top left; |
|
129 |
top: -0.2em; |
|
130 |
|
|
131 |
@media screen and (max-width: $mobile-limit) { |
|
132 |
display: none; |
|
133 |
} |
|
134 |
} |
|
135 |
&.current { |
|
136 |
span.marker { |
|
137 |
background: $primary-color; |
|
138 |
box-shadow: 0 0 0 5px $primary-color; |
|
139 |
@media screen and (max-width: $mobile-limit) { |
|
140 |
border-radius: 10px; |
|
141 |
} |
|
142 |
} |
|
143 |
} |
|
144 |
&.step-before { |
|
145 |
span.marker { background: #9b9b9b; } |
|
146 |
} |
|
101 |
@include desktop-horizontal-steps() { |
|
102 |
position: relative; |
|
103 |
min-width: 5rem; |
|
104 |
&--label { |
|
105 |
text-align: left; |
|
106 |
font-size: 0.8em; |
|
107 |
display: block !important; |
|
108 |
width: 12em; |
|
109 |
position: absolute; |
|
110 |
top: auto; |
|
111 |
left: auto; |
|
112 |
transform: rotate(-45deg); |
|
113 |
transform-origin: -1.5em -1.5em; |
|
147 | 114 |
} |
148 | 115 |
} |
149 | 116 |
} |
static/rouen/_vars.scss | ||
---|---|---|
30 | 30 |
$title-weight: bold; |
31 | 31 |
$width: 1243.97px; |
32 | 32 |
$custom-very-small-screen: 480px; |
33 | ||
34 |
$form-sidebar-position: top; |
|
35 |
$wcs-step-border-bottom: none; |
|
36 |
$wcs-step-marker-color: #9b9b9b; |
|
37 |
$wcs-step-marker-size: 1.25em; |
|
38 |
$wcs-step-marker-type: disc tied; |
|
39 |
$wcs-step-marker-background: white; |
|
40 |
$wcs-step-current-marker-background: $primary-color; |
|
41 |
$wcs-step-current-marker-color: white; |
|
42 |
$wcs-step-current-label-color: $primary-color; |
|
33 |
- |