0001-grenoble-metropole-2019-update-steps-36765.patch
| static/grenoble-metropole-2019/_custom.scss | ||
|---|---|---|
| 1118 | 1118 |
} |
| 1119 | 1119 | |
| 1120 | 1120 |
/* wcs progress bar styles */ |
| 1121 | ||
| 1122 |
div#steps.steps-1 { display: none; }
|
|
| 1123 | ||
| 1124 | ||
| 1125 |
div#steps ol {
|
|
| 1126 |
/* make it possible to grow over its parent size, this makes sure the |
|
| 1127 |
* step number bubble have enough width even with long page names */ |
|
| 1128 |
min-width: 23em; |
|
| 1129 |
position: relative; |
|
| 1130 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1131 |
min-width: auto; |
|
| 1132 |
align-items: center; |
|
| 1121 |
.wcs-steps.steps-1 { display: none; }
|
|
| 1122 |
.wcs-steps--list {
|
|
| 1123 |
@media (max-width: $mobile-limit) {
|
|
| 1133 | 1124 |
justify-content: center; |
| 1134 |
display: -ms-flexbox; |
|
| 1135 |
display: flex; |
|
| 1136 | 1125 |
} |
| 1137 |
&::before {
|
|
| 1138 |
content: ""; |
|
| 1139 |
speak: none; |
|
| 1140 |
position: absolute; |
|
| 1141 |
top: 0; |
|
| 1142 |
left: 40px; |
|
| 1143 |
bottom: 0; |
|
| 1144 |
width: 1px; |
|
| 1145 |
height: 100%; |
|
| 1146 |
background: $primary-color; |
|
| 1147 |
z-index: -2; |
|
| 1148 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1149 |
display: none; |
|
| 1150 |
} |
|
| 1151 |
} |
|
| 1152 |
li {
|
|
| 1153 |
margin: 25px 0; |
|
| 1154 |
border: 0; |
|
| 1155 |
padding: 1ex 1ex 1ex 0; |
|
| 1156 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1157 |
margin: 0 0 25px 0; |
|
| 1158 |
} |
|
| 1159 |
span.marker {
|
|
| 1160 |
font-size: 1.5em; |
|
| 1161 |
font-weight: bold; |
|
| 1162 |
color: #93989d; |
|
| 1163 |
border-radius: 50%; |
|
| 1164 |
width: 80px; |
|
| 1165 |
height: 80px; |
|
| 1126 |
} |
|
| 1127 |
.wcs-step {
|
|
| 1128 |
font-size: 1.2em; |
|
| 1129 |
&--label {
|
|
| 1130 |
@include desktop-vertical-steps() {
|
|
| 1131 |
font-size: 0.65em; |
|
| 1132 |
} |
|
| 1133 |
@media (max-width: $mobile-limit) {
|
|
| 1134 |
padding-left: 0; |
|
| 1166 | 1135 |
text-align: center; |
| 1167 |
position: relative; |
|
| 1168 |
display: table-cell; |
|
| 1169 |
vertical-align: middle; |
|
| 1170 |
background: #f1f1f1; |
|
| 1171 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1172 |
width: 45px; |
|
| 1173 |
height: 45px; |
|
| 1174 |
padding: 0; |
|
| 1175 |
&::after {
|
|
| 1176 |
content: ' '; |
|
| 1177 |
height: 1px; |
|
| 1178 |
width: 15px; |
|
| 1179 |
top: 50%; |
|
| 1180 |
padding: 0; |
|
| 1181 |
left: -16px; |
|
| 1182 |
position: absolute; |
|
| 1183 |
background-color: $primary-color; |
|
| 1184 |
} |
|
| 1185 |
} |
|
| 1186 |
} |
|
| 1187 |
&.first {
|
|
| 1188 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1189 |
span.marker::after {
|
|
| 1190 |
display: none; |
|
| 1191 |
} |
|
| 1192 |
} |
|
| 1193 |
} |
|
| 1194 |
&.current {
|
|
| 1195 |
span.marker {
|
|
| 1196 |
background: $primary-color; |
|
| 1197 |
color: #000000; |
|
| 1198 |
border-radius: 50%; |
|
| 1199 |
} |
|
| 1200 |
.label {
|
|
| 1201 |
color: #000000; |
|
| 1202 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1203 |
padding-left: 0; |
|
| 1204 |
position: absolute; |
|
| 1205 |
display: block; |
|
| 1206 |
width: 100%; |
|
| 1207 |
text-align: center; |
|
| 1208 |
top: 60px; |
|
| 1209 |
left: 0; |
|
| 1210 |
} |
|
| 1211 |
} |
|
| 1212 |
} |
|
| 1213 |
.step-after {
|
|
| 1214 |
.marker {
|
|
| 1215 |
background: #EBECED; |
|
| 1216 |
} |
|
| 1217 |
} |
|
| 1218 |
.marker::after {
|
|
| 1219 |
content: ""; |
|
| 1220 |
width: 90px; |
|
| 1221 |
height: 90px; |
|
| 1222 |
background: #fff; |
|
| 1223 |
border-radius: 50%; |
|
| 1224 |
position: absolute; |
|
| 1225 |
top: -5px; |
|
| 1226 |
left: -5px; |
|
| 1227 |
z-index: -1; |
|
| 1228 |
} |
|
| 1229 |
.label {
|
|
| 1230 |
color: #000000; |
|
| 1231 |
padding-left: 10px; |
|
| 1232 |
display: table-cell; |
|
| 1233 |
vertical-align: middle; |
|
| 1234 |
@media screen and (max-width: $mobile-limit) {
|
|
| 1235 |
display: none; |
|
| 1236 |
} |
|
| 1136 |
top: calc(100% - #{$wcs-steps-spacing});
|
|
| 1137 |
left: 0; |
|
| 1237 | 1138 |
} |
| 1238 | 1139 |
} |
| 1239 | 1140 |
} |
| static/grenoble-metropole-2019/_vars.scss | ||
|---|---|---|
| 58 | 58 |
$widget-unique-checkbox-position: left; |
| 59 | 59 | |
| 60 | 60 |
$form-sidebar-position: right; |
| 61 | ||
| 62 |
$wcs-steps-spacing: .5em; |
|
| 63 | ||
| 64 |
$wcs-step-color: black; |
|
| 65 |
$wcs-step-border-bottom: none; |
|
| 66 |
$wcs-step-current-color: black; |
|
| 67 | ||
| 68 |
$wcs-step-marker-type: disc tied; |
|
| 69 |
$wcs-step-marker-size: 3em; |
|
| 70 |
$wcs-step-marker-background: $gam-user-cell-background-color; |
|
| 71 |
$wcs-step-marker-tie-color: $primary-color; |
|
| 72 |
$wcs-step-marker-tie-width: 1px; |
|
| 73 |
$wcs-step-current-marker-background: $primary-color; |
|
| 61 |
- |
|