0001-theme-add-clermont-ici-55119.patch
static/clermont-ici/_custom.scss | ||
---|---|---|
1 |
// |
|
2 |
// COMPONENTS |
|
3 |
// |
|
4 | ||
5 |
%title { |
|
6 |
text-align: center; |
|
7 |
line-height: 1.2; |
|
8 |
} |
|
9 | ||
10 |
%button { |
|
11 |
text-transform: uppercase; |
|
12 |
font-size: $fz-small; |
|
13 |
font-weight: bold; |
|
14 |
background-size: 100%; |
|
15 |
transition: 400ms background-size; |
|
16 |
&, &:hover { |
|
17 |
background-image: gradient-ro(90deg); |
|
18 |
} |
|
19 |
&:hover { |
|
20 |
background-size: 200%; |
|
21 |
} |
|
22 |
} |
|
23 | ||
24 |
%cancel-button { |
|
25 |
&, &:hover { |
|
26 |
background-image: none; |
|
27 |
background-color: $beige; |
|
28 |
border-color: $font-color; |
|
29 |
} |
|
30 |
} |
|
31 | ||
32 |
// |
|
33 |
// HEADER |
|
34 |
// |
|
35 |
#top { |
|
36 |
display: flex; |
|
37 |
flex-direction: column; |
|
38 |
padding: 1rem 0; |
|
39 |
@media (max-width: $very-small-limit) { |
|
40 |
font-size: $fz-small; |
|
41 |
} |
|
42 | ||
43 |
@media ($min-desktop-viewport) { |
|
44 |
flex-direction: row; |
|
45 |
align-items: center; |
|
46 |
} |
|
47 | ||
48 |
} |
|
49 |
// Logo |
|
50 |
h1#logo.has-logo { |
|
51 |
line-height: 1.5; |
|
52 |
flex-grow: 1; |
|
53 |
font-size: 1em; |
|
54 |
@media ($min-desktop-viewport) { |
|
55 |
font-size: $fz-h3; |
|
56 |
} |
|
57 |
a { |
|
58 |
padding: 1em 0; |
|
59 |
padding-left: 6.5em; |
|
60 |
text-indent: 0; |
|
61 |
background-size: 5em 100%; |
|
62 |
display: block; |
|
63 |
text-transform: uppercase; |
|
64 |
color: $font-color; |
|
65 |
.site-header--community { |
|
66 |
display: block; |
|
67 |
font-size: $fz-small; |
|
68 |
font-weight: 400; |
|
69 |
} |
|
70 |
} |
|
71 |
} |
|
72 |
// user links |
|
73 |
#toplinks { |
|
74 |
position: static; |
|
75 |
border-radius: 0; |
|
76 |
background: transparent; |
|
77 |
box-shadow: none; |
|
78 |
padding: 0; |
|
79 |
border: none; |
|
80 |
max-width: none; |
|
81 |
@media ($max-mobile-viewport) { |
|
82 |
order: -1; |
|
83 |
margin-bottom: 1rem; |
|
84 |
} |
|
85 |
.login { |
|
86 |
> a { |
|
87 |
@extend .pk-button; |
|
88 |
} |
|
89 |
.sep { |
|
90 |
display: none; |
|
91 |
} |
|
92 |
} |
|
93 |
.logged-in { |
|
94 |
@extend %button; |
|
95 |
a { |
|
96 |
color: inherit; |
|
97 |
} |
|
98 |
.connected-user { |
|
99 |
padding-right: .5em; |
|
100 |
border-right: 2px solid; |
|
101 |
margin-right: .5em; |
|
102 |
@media ($min-desktop-viewport) { |
|
103 |
&::before { |
|
104 |
content: "bienvenue "; |
|
105 |
font-weight: normal; |
|
106 |
} |
|
107 |
} |
|
108 | ||
109 |
} |
|
110 |
} |
|
111 |
} |
|
112 | ||
113 |
// |
|
114 |
// NAV |
|
115 |
// |
|
116 |
.nav-btn { |
|
117 |
display: inline-block; |
|
118 |
line-height: 1; |
|
119 |
font-size: 1rem; |
|
120 |
padding: 0.75em 2em; |
|
121 |
margin: 0; |
|
122 |
margin-bottom: .33em; |
|
123 |
border-radius: $border-radius !important; |
|
124 |
} |
|
125 |
#nav { |
|
126 |
@media ($min-desktop-viewport) { |
|
127 |
text-align: right; |
|
128 |
> ul { |
|
129 |
display: inline; |
|
130 |
} |
|
131 |
} |
|
132 |
} |
|
133 |
.nav--title { |
|
134 |
@extend .nav-btn; |
|
135 |
text-transform: uppercase; |
|
136 |
background-color: white; |
|
137 |
vertical-align: top; |
|
138 |
} |
|
139 |
div.gru-nav ul { |
|
140 |
margin: 0; |
|
141 |
li { |
|
142 |
@media ($max-mobile-viewport) { |
|
143 |
display: block; |
|
144 |
} |
|
145 |
@media ($min-desktop-viewport) { |
|
146 |
text-align: center; |
|
147 |
margin-left: .33em; |
|
148 |
width: 16em; |
|
149 |
} |
|
150 |
a { |
|
151 |
@extend .nav-btn; |
|
152 |
display: block; |
|
153 |
font-weight: 400; |
|
154 |
background-color: $orange-light; |
|
155 |
} |
|
156 |
&.selected a, a:hover { |
|
157 |
font-weight: bold; |
|
158 |
text-decoration: underline; |
|
159 |
} |
|
160 |
} |
|
161 |
//subnav |
|
162 |
ul { |
|
163 |
display: none !important; |
|
164 |
} |
|
165 |
} |
|
166 |
// nav over page image |
|
167 |
@media ($min-desktop-viewport) { |
|
168 |
body.has-picture { |
|
169 |
#nav-wrapper { |
|
170 |
position: relative; |
|
171 |
height: 0; |
|
172 |
z-index: 1000; |
|
173 |
} |
|
174 |
#nav { |
|
175 |
padding-top: 1rem; |
|
176 |
padding-right: 1rem; |
|
177 |
} |
|
178 |
} |
|
179 |
} |
|
180 | ||
181 |
// |
|
182 |
// MAIN |
|
183 |
// |
|
184 |
#content { |
|
185 |
margin-top: 2.5rem; |
|
186 |
} |
|
187 | ||
188 |
.community-header--default { |
|
189 |
background-image: var(--page-picture); |
|
190 |
background-position: center center; |
|
191 |
background-repeat: no-repeat; |
|
192 |
background-size: cover; |
|
193 |
height: 32em; |
|
194 |
display: flex; |
|
195 |
overflow: hidden; |
|
196 | ||
197 |
body:not(.has-picture) & { |
|
198 |
display: none; |
|
199 |
} |
|
200 |
} |
|
201 |
.community-header--logo { |
|
202 |
filter: contrast(0%) brightness(2); |
|
203 |
display: block; |
|
204 |
margin: auto; |
|
205 |
margin-left: 1rem; |
|
206 |
max-width: 40%; |
|
207 |
max-height: 12em; |
|
208 |
height: auto; |
|
209 |
} |
|
210 |
// hide community-header--default if cell in hero placeholder |
|
211 |
* + .community-header--default { |
|
212 |
display: none; |
|
213 |
} |
|
214 | ||
215 | ||
216 |
.top-column { |
|
217 |
div.cell { |
|
218 |
margin-left: 0; |
|
219 |
margin-right: 0; |
|
220 |
margin-bottom: $columns-gutter; |
|
221 |
} |
|
222 |
} |
|
223 | ||
224 |
// |
|
225 |
// CELLS |
|
226 |
// |
|
227 | ||
228 |
// Custom styles |
|
229 |
.centered-cell { |
|
230 |
.gru-content &.cell { |
|
231 |
text-align: center; |
|
232 |
h2:first-child { |
|
233 |
background-color: transparent; |
|
234 |
border-bottom: none; |
|
235 |
} |
|
236 |
form { |
|
237 |
text-align: left; |
|
238 |
} |
|
239 |
} |
|
240 |
} |
|
241 |
.centered-orange-cell { |
|
242 |
@extend .centered-cell; |
|
243 |
.gru-content &.cell { |
|
244 |
color: black; |
|
245 |
background: gradient-ro(135deg); |
|
246 |
background-size: 200%; |
|
247 |
border: none; |
|
248 | ||
249 |
form { |
|
250 |
input, select { |
|
251 |
background-color: transparent; |
|
252 |
border-color: currentColor; |
|
253 |
} |
|
254 |
} |
|
255 |
} |
|
256 |
} |
|
257 |
.list-of-forms-cell { |
|
258 |
$image-width: 2.5rem; |
|
259 |
.gru-content &.cell { |
|
260 |
h2:first-child { |
|
261 |
font-weight: normal; |
|
262 |
font-size: 1rem; |
|
263 |
text-align: left; |
|
264 |
padding-left: $image-width + 2; |
|
265 |
} |
|
266 | ||
267 |
&.foldable.folded { |
|
268 |
h2:first-child { |
|
269 |
background-color: white; |
|
270 |
border-bottom: none; |
|
271 |
} |
|
272 |
} |
|
273 | ||
274 |
// Picture position |
|
275 |
&.has-asset-picture { |
|
276 |
> div { |
|
277 |
display: flex; |
|
278 |
flex-wrap: wrap; |
|
279 |
align-items: baseline; |
|
280 | ||
281 |
> * { |
|
282 |
flex: 0 0 100%; |
|
283 |
} |
|
284 | ||
285 |
> h2:first-child { |
|
286 |
flex: 1 0 50%; |
|
287 |
margin-left: -1 * ($image-width + 1); |
|
288 | ||
289 |
} |
|
290 | ||
291 |
> picture { |
|
292 |
display: block; |
|
293 |
order: -1; |
|
294 |
flex: 0 0 $image-width; |
|
295 |
align-self: center; |
|
296 |
margin-left: 1rem; |
|
297 |
position: relative; |
|
298 |
z-index: 1; |
|
299 | ||
300 |
img { |
|
301 |
padding: 0; |
|
302 |
} |
|
303 |
} |
|
304 |
} |
|
305 |
} |
|
306 |
//links-list |
|
307 |
div.links-list ul { |
|
308 |
& > li { |
|
309 |
> a { |
|
310 |
padding-left: $image-width + 2; |
|
311 |
} |
|
312 |
&.required-authentication a::after { |
|
313 |
content: "\f023"; // lock icon |
|
314 |
top: 0; |
|
315 |
bottom: 0; |
|
316 |
left: 1rem; |
|
317 |
right: auto; |
|
318 |
margin: auto; |
|
319 |
width: $image-width; |
|
320 |
height: 1.5rem; |
|
321 |
display: flex; |
|
322 |
align-items: center; |
|
323 |
justify-content: center; |
|
324 |
} |
|
325 |
// Gray logo keyword options |
|
326 |
$logo-width: 5rem; |
|
327 |
@each $name, $file in $logos-demarche { |
|
328 |
&[class*="keyword-"][class*="-#{$name}"] a { |
|
329 |
padding-right: $logo-width + 1; |
|
330 |
&::before { |
|
331 |
content: ""; |
|
332 |
display: block; |
|
333 |
background: url(/assets/logo:#{$file}) no-repeat right center; |
|
334 |
background-size: contain; |
|
335 |
height: 2.5rem; |
|
336 |
width: $logo-width; |
|
337 |
position: absolute; |
|
338 |
top: 0; |
|
339 |
bottom: 0; |
|
340 |
right: 1rem; |
|
341 |
left: auto; |
|
342 |
margin: auto; |
|
343 |
filter: grayscale(100%); |
|
344 |
} |
|
345 |
} |
|
346 |
} |
|
347 |
} |
|
348 |
} |
|
349 |
} |
|
350 |
} |
|
351 |
// Slug 'btn-with-icon' |
|
352 |
// optionnal class 'orange' or 'beige' |
|
353 |
.btn-with-icon { |
|
354 |
.gru-content &.cell { |
|
355 |
border: none; |
|
356 | ||
357 |
&, &.orange { |
|
358 |
background-color: $orange; |
|
359 |
} |
|
360 |
&.beige { |
|
361 |
background-color: $beige; |
|
362 |
} |
|
363 |
} |
|
364 |
&--link { |
|
365 |
display: flex; |
|
366 |
justify-content: center; |
|
367 |
align-items: center; |
|
368 |
text-transform: uppercase; |
|
369 |
font-weight: 600; |
|
370 |
color: black; |
|
371 |
padding: 0 1.5em; |
|
372 |
&, &:hover { |
|
373 |
background-color: inherit; |
|
374 |
} |
|
375 |
} |
|
376 |
&--icon { |
|
377 |
display: block; |
|
378 |
flex: 0 0 2em; |
|
379 |
height: 2em; |
|
380 |
margin-right: .66em; |
|
381 |
background-size: contain; |
|
382 |
background-repeat: no-repeat; |
|
383 |
transform: translateY(-0.2em); |
|
384 |
} |
|
385 |
&--label { |
|
386 |
padding-top: 1.5em; |
|
387 |
padding-bottom: 1.5em; |
|
388 |
} |
|
389 |
} |
|
390 | ||
391 |
.gru-content { |
|
392 |
// all cells |
|
393 |
div.cell { |
|
394 |
overflow: hidden; |
|
395 |
.cell--body, |
|
396 |
& h2 + div { |
|
397 |
p:first-child { |
|
398 |
margin-top: 0; |
|
399 |
} |
|
400 |
} |
|
401 |
} |
|
402 | ||
403 |
.tracking-code-input-cell { |
|
404 |
form { |
|
405 |
display: flex; |
|
406 |
button { |
|
407 |
margin-right: 0; |
|
408 |
margin-left: 1.5em; |
|
409 |
flex: 0 1 auto; |
|
410 |
} |
|
411 |
} |
|
412 |
} |
|
413 | ||
414 |
.wcs-forms-of-category-cell, |
|
415 |
.wcs-current-forms-cell, |
|
416 |
.wcs-current-drafts-cell { |
|
417 |
@extend .list-of-forms-cell; |
|
418 |
} |
|
419 | ||
420 |
.text-cell, |
|
421 |
.wcs-current-forms-cell, |
|
422 |
.wcs-current-drafts-cell { |
|
423 |
@extend .pk-transparent; |
|
424 |
} |
|
425 | ||
426 |
div.wcs-current-forms-cell, |
|
427 |
div.wcs-current-drafts-cell { |
|
428 |
h2:first-child { |
|
429 |
border-bottom: none; |
|
430 |
border-radius: $border-radius !important; |
|
431 |
background-color: $green-light; |
|
432 |
} |
|
433 |
} |
|
434 |
div.wcs-current-drafts-cell { |
|
435 |
h2:first-child { |
|
436 |
background-color: $gray; |
|
437 |
} |
|
438 |
} |
|
439 |
} |
|
440 | ||
441 |
div.carrousel-content input + div div.carrousel-item { |
|
442 |
padding-left: calc(6rem + 0.7rem); |
|
443 |
} |
|
444 | ||
445 |
// |
|
446 |
// WCS |
|
447 |
// |
|
448 | ||
449 |
.wcs-page #columns-wrapper { |
|
450 |
border: $cell-border; |
|
451 |
border-radius: $cell-border-radius; |
|
452 |
padding: 1rem; |
|
453 |
margin: auto; |
|
454 |
max-width: 62.5rem; |
|
455 |
width: 100%; |
|
456 |
} |
|
457 | ||
458 |
div#tracking-code { |
|
459 |
h3 { |
|
460 |
background: none; |
|
461 |
border-bottom: none; |
|
462 |
padding-bottom: 0; |
|
463 |
} |
|
464 |
a { |
|
465 |
font-size: 1rem; |
|
466 |
} |
|
467 |
} |
|
468 | ||
469 |
div#rub_service { |
|
470 |
h2 { |
|
471 |
background-color: transparent; |
|
472 |
border-bottom: none; |
|
473 |
text-align: left; |
|
474 |
font-size: $fz-h2; |
|
475 |
padding-left: 0.5rem; |
|
476 |
} |
|
477 |
> h2:first-child { |
|
478 |
font-size: $fz-h1; |
|
479 |
} |
|
480 |
} |
|
481 | ||
482 |
div.buttons .cancel-button button { |
|
483 |
@extend %cancel-button; |
|
484 |
} |
|
485 | ||
486 |
// Steps |
|
487 |
@media ($mq-min--wcs-steps-horizontal-layout) { |
|
488 |
.wcs-steps { |
|
489 |
font-size: 1rem; |
|
490 |
} |
|
491 |
.wcs-step { |
|
492 |
position: relative; |
|
493 |
flex-basis: 5rem; |
|
494 |
} |
|
495 |
.wcs-step--marker { |
|
496 |
font-size: $fz-h3; |
|
497 |
} |
|
498 |
.wcs-step--label { |
|
499 |
display: block !important; |
|
500 |
font-size: $fz-xsmall; |
|
501 |
left: -1.1rem; |
|
502 |
top: calc(100% + .5em); |
|
503 | ||
504 |
} |
|
505 |
} |
|
506 | ||
507 | ||
508 |
// |
|
509 |
// FOOTER |
|
510 |
// |
|
511 | ||
512 |
#footer-wrapper { |
|
513 |
border-bottom: 1.5em solid red; |
|
514 |
border-image-slice: 1; |
|
515 |
border-image-source: gradient-ro(-90deg); |
|
516 |
} |
|
517 |
#footer { |
|
518 |
font-size: $fz-small; |
|
519 |
font-weight: 500; |
|
520 | ||
521 |
@media (max-width: $very-small-limit) { |
|
522 |
text-align: center; |
|
523 |
} |
|
524 | ||
525 |
a { |
|
526 |
text-align: inherit; |
|
527 |
font-weight: inherit; |
|
528 | ||
529 |
color: $font-color; |
|
530 |
padding-top: 0; |
|
531 |
padding-bottom: 0; |
|
532 |
display: block; |
|
533 |
&:hover { |
|
534 |
text-decoration: underline; |
|
535 |
} |
|
536 |
} |
|
537 | ||
538 |
.links-list ul { |
|
539 |
& > li { |
|
540 |
border-bottom: none; |
|
541 |
} |
|
542 |
} |
|
543 |
} |
|
544 | ||
545 |
.back-top { |
|
546 |
clear: both; |
|
547 |
} |
|
548 |
.back-top--link { |
|
549 |
&:before { |
|
550 |
color: $red |
|
551 |
} |
|
552 |
} |
|
553 | ||
554 | ||
555 |
// |
|
556 |
// Neutral templates |
|
557 |
// |
|
558 | ||
559 |
.page-template-sidebar-neutral, |
|
560 |
.page-template-neutral { |
|
561 |
.site-header--community { |
|
562 |
display: none !important; |
|
563 |
} |
|
564 |
} |
|
565 | ||
566 |
// |
|
567 |
// PWA navigation |
|
568 |
// |
|
569 | ||
570 |
.pwa-navigation div > ul li a { |
|
571 |
background-size: auto 40%; |
|
572 |
background-position: center 20%; |
|
573 | ||
574 |
span { |
|
575 |
display: flex; |
|
576 |
align-items: center; |
|
577 |
justify-content: center; |
|
578 |
text-transform: uppercase; |
|
579 |
} |
|
580 |
} |
|
581 |
static/clermont-ici/_vars.scss | ||
---|---|---|
1 |
// colors |
|
2 |
$orange: #FF8001; |
|
3 |
$orange-light: #f6ad65; |
|
4 |
$red: #EA0142; |
|
5 |
$beige: #FFF7EF; |
|
6 |
$gray-dark: #555; |
|
7 |
$gray-light: #E9E9E9; |
|
8 |
$gray: #D2D6DE; |
|
9 |
$green-light: #BFE4C4; |
|
10 | ||
11 |
@function gradient-ro($angle) { |
|
12 |
@return linear-gradient($angle, $orange, $red); |
|
13 |
} |
|
14 | ||
15 |
// Typo |
|
16 |
$fz-h1: 2.5em; |
|
17 |
$fz-h2: 1.55em; |
|
18 |
$fz-h3: 1.25em; |
|
19 |
$fz-small: 0.875em; |
|
20 |
$fz-xsmall: 0.75em; |
|
21 | ||
22 |
// logos démarche |
|
23 |
$logos-demarche: ( |
|
24 |
"ville": "clermont-ferrand", |
|
25 |
"metro": "clermont-auvergne-metropole" |
|
26 |
); |
|
27 | ||
28 |
// Core vars |
|
29 |
$primary-color: $orange; |
|
30 |
$border-radius: 20px; |
|
31 |
$font-color: black; |
|
32 |
$link-color: $red; |
|
33 |
$font-family: montserrat, sans-serif; |
|
34 | ||
35 |
$width: 95rem; |
|
36 |
$mobile-limit: 1024px; |
|
37 |
$sidebar-width: 25%; |
|
38 |
$sidebar-min-width: 18rem; |
|
39 |
$sidebar-columns-gutter: 40px; |
|
40 | ||
41 |
$nav-border-radius: 0; |
|
42 |
$nav-background: transparent; |
|
43 |
$nav-color: $font-color; |
|
44 |
$nav-menu-color: $nav-color; |
|
45 |
$nav-active-color: $nav-color; |
|
46 |
$nav-item-selected-background: $orange; |
|
47 |
$nav-mobile-mode: custom; |
|
48 |
$nav-after-image: false; |
|
49 | ||
50 |
$title-font-size: $fz-h3; |
|
51 |
$title-transform: uppercase; |
|
52 |
$title-weight: 700; |
|
53 |
$title-background: $beige; |
|
54 |
$title-padding: 1.25em 1rem !default; |
|
55 |
$title-border-bottom: 1px solid $font-color; |
|
56 | ||
57 |
$carrousel-height: 32rem; |
|
58 |
$carrousel-text-position: middle left; |
|
59 |
$carrousel-navigation-bullet-color: white; |
|
60 | ||
61 |
$cell-border: 1px solid $font-color; |
|
62 |
$cell-title-cover-border: false; |
|
63 |
$cell-entry-color: $font-color; |
|
64 |
$cell-entry-border-color: $gray-dark; |
|
65 |
$cell-entry-hover-background: $beige; |
|
66 | ||
67 |
$button-background: $orange; |
|
68 |
$button-color: $font-color; |
|
69 |
$button-border-radius: $border-radius / 2; |
|
70 | ||
71 |
$widget-unique-checkbox-position: left; |
|
72 |
$widget-border: 1px solid $gray-dark; |
|
73 |
$widget-border-radius: 5px; |
|
74 | ||
75 |
$wcs-steps-small-layout-limit: $mobile-limit; |
|
76 |
$wcs-steps-spacing: .33rem; |
|
77 |
$wcs-step-color: $gray-dark; |
|
78 |
$wcs-step-current-color: $font-color; |
|
79 |
$wcs-step-border-bottom: none; |
|
80 |
$wcs-step-marker-background: $orange-light; |
|
81 |
$wcs-step-current-marker-background: gradient-ro(-45deg); |
|
82 |
$wcs-step-marker-type: disc tied; |
|
83 |
$wcs-step-marker-tie-width: 2px; |
|
84 |
$wcs-step-marker-tie-color: $font-color; |
|
85 | ||
86 |
$form-sidebar-position: top; |
|
87 |
$buttons-order: previous, submit, cancel; |
|
88 | ||
89 |
$footer-background: $beige; |
|
90 |
$footer-color: $font-color; |
|
91 | ||
92 |
$back-top-display: mobile-only; |
|
93 | ||
94 |
$nav-mobile-bottom-bar-background: gradient-ro(-45deg); |
static/clermont-ici/config.json | ||
---|---|---|
1 |
{ |
|
2 |
"label": "Clermont ICI", |
|
3 |
"variables": { |
|
4 |
"pwa_display": "standalone", |
|
5 |
"theme_color": "#FF8001", |
|
6 |
"email_header_asset": "emails:logo" |
|
7 |
}, |
|
8 |
"settings": { |
|
9 |
"combo": { |
|
10 |
"COMBO_ASSET_SLOTS.update": { |
|
11 |
"header:logo": { "label": "Têtière : logo" }, |
|
12 |
"emails:logo": { "label": "Emails : logo" }, |
|
13 |
"footer:logo": { "label": "Pied de page: logo" }, |
|
14 |
"logo:clermont-ferrand": { "label" : "logo : ville" }, |
|
15 |
"logo:clermont-auvergne-metropole": { "label" : "logo : métropole" } |
|
16 |
}, |
|
17 |
"COMBO_CELL_ASSET_SLOTS.update": { |
|
18 |
"data_linkcell": { |
|
19 |
"picture": { "prefix": "Icône" } |
|
20 |
}, |
|
21 |
"wcs_wcsformcell": { |
|
22 |
"picture": { "prefix": "Icône" } |
|
23 |
} |
|
24 |
}, |
|
25 |
"COMBO_PUBLIC_TEMPLATES.update": { |
|
26 |
"sidebar-neutral": { |
|
27 |
"name": "Une colonne et une barre latérale - Neutre", |
|
28 |
"template": "combo/page_template_sidebar_neutral.html" |
|
29 |
}, |
|
30 |
"neutral": { |
|
31 |
"name": "Une colonne - Neutre", |
|
32 |
"template": "combo/page_template_neutral.html" |
|
33 |
} |
|
34 |
} |
|
35 |
} |
|
36 |
} |
|
37 |
} |
static/clermont-ici/style.scss | ||
---|---|---|
1 |
@charset "UTF-8"; |
|
2 |
@import '../includes/fonts/montserrat'; |
|
3 | ||
4 |
@import 'vars'; |
|
5 |
@import '../includes/publik'; |
|
6 |
@import 'custom'; |
templates/variants/clermont-ici/combo/cells/btn-with-icon/form.html | ||
---|---|---|
1 |
{% extends "combo/cells/btn-with-icon/link-cell.html" %} |
templates/variants/clermont-ici/combo/cells/btn-with-icon/link-cell.html | ||
---|---|---|
1 |
{% load assets %} |
|
2 |
{% get_asset cell=cell type='picture' as asset %} |
|
3 |
<a class="btn-with-icon--link" href="{{url}}"> |
|
4 |
{% if asset %} |
|
5 |
<span |
|
6 |
class="btn-with-icon--icon" |
|
7 |
style="background-image: url({{asset.asset.url}})" |
|
8 |
></span> |
|
9 |
{% endif %} |
|
10 |
<span class="btn-with-icon--label">{{ title }}</span> |
|
11 |
</a> |
templates/variants/clermont-ici/combo/cells/choix-collectivite/link-list-cell.html | ||
---|---|---|
1 |
{% load assets %} |
|
2 |
{% with portail_slug=portail_name|lower|slugify %} |
|
3 |
{% block cell-content %} |
|
4 |
<h2 class="choix-collectivite--title"> |
|
5 |
Vous êtes sur le portail citoyen de {{ collectivite }} |
|
6 |
</h2> |
|
7 |
<div class="cell--body"> |
|
8 |
<form id="choix-collectivite--form"> |
|
9 |
<label class="choix-collectivite--label" for="choix-collectivite--select"> |
|
10 |
Pour changer de collectivité |
|
11 |
</label> |
|
12 |
<select id="choix-collectivite--select" class="choix-collectivite--select"> |
|
13 |
<option value="">Sélectionnez</option> |
|
14 |
{% for link in links %} |
|
15 |
<option value="{{ link.url }}">{{ link.title }}</option> |
|
16 |
{% endfor %} |
|
17 |
</select> |
|
18 |
</form> |
|
19 |
</div> |
|
20 |
{% endblock %} |
|
21 |
{% endwith %} |
templates/variants/clermont-ici/combo/page_template.html | ||
---|---|---|
1 |
{% extends "combo/page_template.html" %} |
|
2 | ||
3 |
{% block msie_css_page_picture %} |
|
4 |
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { |
|
5 |
.collectivity-header--default { |
|
6 |
background-image: url("{{site_base}}{{page.picture.url}}"); |
|
7 |
} |
|
8 |
} |
|
9 |
{% endblock %} |
|
10 |
{% block content-pre %} |
|
11 |
<div class="community-header desktop-only"> |
|
12 |
{% placeholder "hero-page" name="Image de la Page" %} |
|
13 |
<div class="community-header--default"> |
|
14 |
<img class="community-header--logo" src="{{portal_url}}assets/logo:{{ collectivite|slugify }}" alt="logo {{ collectivite }}"> |
|
15 |
</div> |
|
16 |
</div> |
|
17 |
{% endblock %} |
|
18 | ||
19 |
{% block header-title-content %} |
|
20 |
<span> |
|
21 |
<span class="sr-only">ICI</span> |
|
22 |
{% firstof global_title site_title "Compte Citoyen" %} |
|
23 |
</span> |
|
24 |
<span class="site-header--community"> |
|
25 |
{{ collectivite }} |
|
26 |
</span> |
|
27 |
{% endblock %} |
|
28 | ||
29 |
{% block menu %} |
|
30 |
<h2 class="nav--title">vous êtes :</h2> |
|
31 |
{{ block.super }} |
|
32 |
{% endblock %} |
|
33 | ||
34 |
{% block columns-top %} |
|
35 |
<div class="top-column"> |
|
36 |
{% placeholder "columns-top" name="Entête de la Page" %} |
|
37 |
</div> |
|
38 |
{% endblock %} |
templates/variants/clermont-ici/combo/page_template_neutral.html | ||
---|---|---|
1 |
{% extends "combo/page_template.html" %} |
|
2 | ||
3 | ||
4 |
{% block nav %}{% endblock %} |
templates/variants/clermont-ici/combo/page_template_sidebar_neutral.html | ||
---|---|---|
1 |
{% extends "combo/page_template_sidebar.html" %} |
|
2 | ||
3 | ||
4 |
{% block nav %}{% endblock %} |
templates/variants/clermont-ici/combo/wcs/tracking_code_input.html | ||
---|---|---|
1 |
{% extends "combo/wcs/tracking_code_input.html" %} |
|
2 |
{% load i18n %} |
|
3 | ||
4 |
{% block form-pre %} |
|
5 |
<p> |
|
6 |
Un code de suivi peut être associé à vos demandes, il vous facilite les échanges avec les services. Pour retrouver une demande disposant d’un code de suivi, indiquez ce dernier ci-dessous : |
|
7 |
</p> |
|
8 |
{% endblock %} |
|
9 |
{% block form-top %}{% endblock %} |
templates/variants/clermont-ici/includes/back-top.html | ||
---|---|---|
1 |
{% extends "includes/back-top.html" %} |
|
2 | ||
3 |
{% block back-top-label %} |
|
4 |
Haut de page |
|
5 |
{% endblock %} |
|
0 |
- |