lot retours thème alpes-maritimes-2022 (#72994) #104
|
@ -727,6 +727,7 @@ div#footer {
|
|||
@extend .page-title;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
text-transform: none;
|
||||
}
|
||||
div.widget div.title {
|
||||
font-weight: 700;
|
||||
|
@ -787,6 +788,7 @@ span.required {
|
|||
padding-left: 0;
|
||||
text-transform: uppercase;
|
||||
display: block !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
&--progress-bar {
|
||||
@extend .h3;
|
||||
|
@ -821,14 +823,17 @@ span.required {
|
|||
transform: translateX(100%);
|
||||
transition: transform 0.25s ease;
|
||||
&-close {
|
||||
@extend .h2;
|
||||
float: right;
|
||||
margin-bottom: 2rem;
|
||||
@extend %title;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
text-align: right;
|
||||
margin-bottom: 2em;
|
||||
&-icon {
|
||||
&::before {
|
||||
@extend .h3;
|
||||
color: black;
|
||||
content: "\f00d";
|
||||
color: $cyan;
|
||||
content: "\00A0\f00d"; // x-cross
|
||||
font-family: fontAwesome;
|
||||
}
|
||||
}
|
||||
|
@ -850,11 +855,18 @@ span.required {
|
|||
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
|
||||
@include tied-vertical-steps();
|
||||
}
|
||||
.theme-steps--panel h2 {
|
||||
@extend %title;
|
||||
@extend .trapeze-title;
|
||||
border-bottom: 0;
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.wcs-steps {
|
||||
font-size: 1em;
|
||||
&--list {
|
||||
font-family: $title-font-family;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.wcs-step {
|
||||
|
@ -871,13 +883,14 @@ span.required {
|
|||
}
|
||||
&--label {
|
||||
@extend .small;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
width: auto;
|
||||
order: 2;
|
||||
margin-left: 0;
|
||||
}
|
||||
&--marker {
|
||||
border: 1px solid $gray-dark;
|
||||
border: 1px solid;
|
||||
box-shadow: 0 0 0 0.5rem white;
|
||||
}
|
||||
&.current &--marker {
|
||||
|
|
|
@ -12,6 +12,7 @@ $brown: #B34000;
|
|||
|
||||
|
||||
// typo
|
||||
$ff-condensed: 'Roboto Condensed', sans-serif;
|
||||
$base-font: 15;
|
||||
$base-font-m: 13;
|
||||
|
||||
|
@ -80,7 +81,7 @@ $title-transform: uppercase;
|
|||
$title-background: transparent;
|
||||
$title-font-size: $fz-2;
|
||||
$title-weight: 700;
|
||||
$title-font-family: 'Roboto Condensed', sans-serif;
|
||||
$title-font-family: $ff-condensed;
|
||||
|
||||
$cell-border: none;
|
||||
$cell-title-cover-border: false;
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
{
|
||||
"label": "Alpes-Maritimes (CD06) (2022)",
|
||||
"variables": {
|
||||
"theme_color": "#00A7BD",
|
||||
"email_header_asset": "emails:logo",
|
||||
"email_header_img": "img/logo.png",
|
||||
"email_header_right_img": "img/logo-departement.png"
|
||||
"theme_color": "#00A7BD"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"logo:feder": { "label": "Logo FEDER"},
|
||||
"email:logo_left": { "label": "Emails : logo gauche"},
|
||||
"email:logo_right": { "label": "Emails : logo droite"},
|
||||
"social:dossiers:autonomie": {
|
||||
"label": "Pictogramme dossier autonomie"
|
||||
},
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
|
||||
<tr>
|
||||
<td style="padding: 20px 0; text-align: left; font-family: sans-serif;">
|
||||
{% if email_header_img %}<img style="max-width: 80%" alt="{% firstof global_title "Compte Citoyen" %}" src="{{portal_url}}static/{{css_variant}}/{{ email_header_img }}"/>{% endif %}
|
||||
{% if email_header_img %}<img style="max-width: 80%" alt="{% firstof global_title "Compte Citoyen" %}" src="{{portal_url}}assets/email:logo_left"/>{% endif %}
|
||||
</td>
|
||||
{% if email_header_right_img %}
|
||||
<td style="padding: 20px 0; text-align: right; font-family: sans-serif;">
|
||||
<img style="max-width: 80%" src="{{portal_url}}static/{{css_variant}}/{{ email_header_right_img }}"/>
|
||||
<img style="max-width: 80%" src="{{portal_url}}assets/email:logo_right"/>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
|
|
|
@ -1,41 +1,42 @@
|
|||
{% extends "wcs/front/formdata_steps.html" %}
|
||||
{% block steps-list %}
|
||||
<div class="theme-steps">
|
||||
{% for page_label in page_labels %}
|
||||
{% if forloop.counter == current_page_no %}
|
||||
<strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
|
||||
<h2 class="theme-steps--title">
|
||||
{{ page_label }}
|
||||
</h2>
|
||||
<div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
|
||||
{% endif%}
|
||||
{% endfor%}
|
||||
<p class="theme-steps--voir-etapes togglable">
|
||||
<span class="theme-steps--voir" aria-label="Voir"></span>
|
||||
<a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
|
||||
</p>
|
||||
<div class="theme-steps--panel" >
|
||||
<a class="theme-steps--panel-close" role="button
|
||||
">
|
||||
FERMER
|
||||
<span class="theme-steps--panel-close-icon"></span>
|
||||
</a>
|
||||
{{ block.super }}
|
||||
{% if page_labels|length > 1 %}
|
||||
<div class="theme-steps">
|
||||
{% for page_label in page_labels %}
|
||||
{% if forloop.counter == current_page_no %}
|
||||
<strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
|
||||
<h2 class="theme-steps--title">
|
||||
{{ page_label }}
|
||||
</h2>
|
||||
<div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
|
||||
{% endif%}
|
||||
{% endfor%}
|
||||
<p class="theme-steps--voir-etapes togglable">
|
||||
<span class="theme-steps--voir" aria-label="Voir"></span>
|
||||
<a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
|
||||
</p>
|
||||
<div class="theme-steps--panel" >
|
||||
<a class="theme-steps--panel-close" role="button">
|
||||
FERMER
|
||||
<span class="theme-steps--panel-close-icon"></span>
|
||||
</a>
|
||||
{{ block.super }}
|
||||
</div>
|
||||
<div class="theme-steps--panel-mask"></div>
|
||||
</div>
|
||||
<div class="theme-steps--panel-mask"></div>
|
||||
</div>
|
||||
<script>
|
||||
const openStepsBtn = document.querySelector('.theme-steps--panel-open')
|
||||
const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
|
||||
const stepsMask = document.querySelector('.theme-steps--panel-mask')
|
||||
<script>
|
||||
const openStepsBtn = document.querySelector('.theme-steps--panel-open')
|
||||
const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
|
||||
const stepsMask = document.querySelector('.theme-steps--panel-mask')
|
||||
|
||||
closeStepsBtn.addEventListener('click', function(){
|
||||
openStepsBtn.click()
|
||||
});
|
||||
stepsMask.addEventListener('click', function(){
|
||||
openStepsBtn.click()
|
||||
});
|
||||
</script>
|
||||
closeStepsBtn.addEventListener('click', function(){
|
||||
openStepsBtn.click()
|
||||
});
|
||||
stepsMask.addEventListener('click', function(){
|
||||
openStepsBtn.click()
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock%}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue