publik-famille-demo: create theme (#61994)

This commit is contained in:
Thomas Jund 2022-02-15 15:54:25 +01:00 committed by Corentin Séchet
parent 6344f898ca
commit 3d69c43328
22 changed files with 849 additions and 1 deletions

View File

@ -531,6 +531,17 @@ body {
padding-left: 0;
}
.wcs-cards-cell {
h2 {
font-size: 1rem;
}
a {
background-color: $gray-light;
border-radius: $border-radius;
}
}
div#rub_service {
h3 {
font-weight: bold;

View File

@ -0,0 +1,157 @@
.cell + .pf-page-header--default {
display: none;
}
.page-template-homepage .gru-content div.cell {
margin-top: 2rem;
padding-bottom: 2rem;
border-radius: 0;
&:not(:last-child) {
border-bottom: 3px solid $orange;
}
}
%pf-icon {
background: var(--pf-icon-picture) no-repeat bottom left;
background-size: contain;
content: var(--pf-icon-content);
display: flex;
align-items: start;
color: $orange;
font-family: 'FontAwesome';
}
// Links
%cell-links-list {
& > li {
margin: 0 1em;
}
& > li:not(.add-more-items) > a {
font-size: $fz-3;
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
}
li div.description {
padding: 0;
p {
margin-left: 0;
}
}
}
.add-more-items--button {
font-size: $fz-2;
color: $orange;
}
// Notifications
div.cell.notifications-cell {
h2:first-child {
color: $orange;
font-size: $fz-3;
&:before {
content: '\f0f3';
font-family: FontAwesome;
margin-right: 2rem;
}
}
.links-list {
background: $orange;
border-radius: $border-radius;
ul {
padding: 2rem 4rem;
> li {
border: none;
padding: 0.3rem 0;
&:not(:last-child) {
border-bottom: 1px solid white;
}
> a {
font-size: $font-size;
text-decoration: underline;
color: white;
}
> div.description {
color: white;
}
}
}
}
}
// Tracking code
div.cell.tracking-code-input-cell {
h2:first-child {
font-size: $font-size;
text-transform: uppercase;
border-bottom: 1px solid $gray-dark;
border-radius: 0;
}
}
// Carrousel
div.carrousel-content {
background: $green-light;
overflow: visible;
margin-top:150px;
@media($min-desktop-viewport) {
&::before {
background-image: url('img/carrousel-banner.png');
background-position:center;
background-repeat: no-repeat;
content: "";
position: absolute;
height: 150px;
width: 100%;
top:-110px;
}
}
@media($max-mobile-viewport) {
.carrousel-item-content {
text-align: center;
background: $green-light;
}
}
input + div {
padding: 3rem;
div.carrousel-item {
&:after {
background-color: transparent;
}
color: black;
background-repeat: no-repeat;
background-size: 30%;
background-position-x: 10%;
padding: 1rem;
}
}
}
// Custom classes
.errornotice,
.warningnotice,
.successnotice,
.infonotice {
border-radius: $border-radius;
padding-top: 1rem;
padding-bottom: 1rem;
padding-right: 1rem;
min-height: calc(#{$notification-icon-size} + 2rem);
&::before {
top: 1rem;
}
}

View File

@ -0,0 +1,33 @@
:root {
--pf-icon-content: "";
}
h1 {
font-size: $fz-1;
font-weight: 800;
}
h2 {
font-size: $fz-2;
font-weight: 700;
}
h3 {
font-size: $fz-3;
font-weight: 600;
}
div#main-content {
margin-top: 6rem;
@media($max-mobile-viewport) {
margin-top: 1rem;
}
}
%pf-field {
padding: 0.5rem;
font-size: $font-size;
background-color: $gray-light;
border-radius: $border-radius;
}

View File

@ -0,0 +1,112 @@
.pf-cloud {
position: relative;
&::before {
background: url('img/cloud.svg');
bottom: -120px;
content: "";
height: 264px;
position: absolute;
right: 50px;
width: 342px;
z-index: -1;
}
}
.gray-cell {
.gru-content &.cell {
background-color: $gray-light;
padding-bottom: 1rem;
}
}
.green-cell {
.gru-content &.cell {
background-color: $green-light;
padding-bottom: 1rem;
}
}
div.pf-icon-list {
ul > li:not(.add-more-items) > a {
background: url(img/bubble.svg);
background-position: bottom left;
background-repeat: no-repeat;
transition: background-position 0.2s ease-out;
&::before {
@extend %pf-icon;
width: 35px;
height: 35px;
font-size: 35px;
margin-right: 1rem;
}
&:hover {
background-position-x: 10px;
background-size: contain;
}
}
}
div.card.pf-card-detail {
h2:first-child {
border-bottom: 2px solid $gray;
padding: 1rem 0;
border-radius: 0;
}
.label {
color: $gray-dark;
font-size: $fz-3;
font-weight: 700;
margin-bottom: 0.3rem;
margin-top: 0.3rem;
text-align: right;
}
.value {
@extend %pf-field;
margin-bottom: 0.3rem;
margin-top: 0.3rem;
}
}
%icon-button {
&:not(.pf-big-button) {
div.links-list {
ul > li > a {
&::before {
@extend %pf-icon;
padding-right: 1rem;
}
}
}
}
&.pf-big-button {
div.links-list {
ul > li > a {
border: 2px solid $orange;
padding: 0.3rem 1.5rem;
width: max-content;
color: $orange;
&::after {
@extend %pf-icon;
margin-left: 1rem;
font-size: 35px;
width: 35px;
height: 35px;
margin-bottom: 3px;
}
}
}
}
}
.pf-icon-famille {
@extend %icon-button;
--pf-icon-picture: url('img/icon_famille.svg');
}
.pf-icon-add {
@extend %icon-button;
--pf-icon-content: '\f055';
}

View File

@ -0,0 +1,240 @@
$desktop-gray-header-height: 90px;
$mobile-top-links-height: 2rem;
body.has-header-background #header {
background-position-x: 30%;
background-size: contain;
@media($max-mobile-viewport) {
background-image: none;
}
}
div#top {
display: flex;
flex-wrap: wrap;
align-items: center;
@media ($min-desktop-viewport) {
padding-right: $nav-menu-side * 1.5;
}
@media ($min-desktop-viewport) {
height: $desktop-gray-header-height;
}
}
h1#logo.has-logo {
padding: 10px 0;
flex-grow: 1;
}
#toplinks {
position: static;
display: flex;
align-items: center;
word-spacing: 1em;
@media ($max-mobile-viewport) {
order: -1;
min-height: 2em;
flex: 1 0 100%;
max-width: none;
margin: 0 -0.7rem;
padding: 0 0.7rem;
}
@media($min-desktop-viewport) {
height: $nav-menu-side;
padding: 0.5em 1.5em;
border-radius: $nav-menu-side / 2;
}
a {
color: $orange-dark;
&:first-child {
font-weight: bold;
}
}
}
.site-nav {
position: fixed;
width: 100%;
z-index: 102;
}
.gru-nav-wrapper {
@extend .page-width;
position: relative;
@media ($max-mobile-viewport) {
max-width: none;
}
}
#nav {
margin: 0;
position: absolute;
width: $nav-menu-side;
height: $desktop-gray-header-height;
top: 0;
right: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
transition: top 400ms;
@media ($max-mobile-viewport) {
body:not(.scrolled) & {
top: $mobile-top-links-height;
}
}
}
div.gru-nav {
.gru-nav-button {
position: relative;
display: block;
line-height: 0;
top: 0;
left: 0;
border-radius: 50%;
border: 6px solid transparent;
+ ul {
&::before {
content: none;
}
display: flex;
flex-wrap: wrap;
left: auto;
right: 0;
transform: translateX(100%);
min-width: calc((100% - #{$width}) / 2 + 420px);
padding-top: 50px;
}
}
}
.pf-menu-item {
&--image {
width: 160px;
height: 160px;
background: white;
border-radius: $border-radius;
padding: 1rem;
}
&--title {
text-align: center;
}
&:hover &--title {
text-decoration: underline;
}
}
.pf-page-header {
&--default {
display: flex;
flex-wrap: wrap;
align-items: end;
&::before {
background: url('img/cloud.svg');
content: "";
position: absolute;
height: 264px;
width: 342px;
top: -10px;
left: 50px;
z-index: -1;
@media($max-mobile-viewport) {
top: 0;
left: 10px;
}
}
}
&--title {
margin: 0;
@media($max-mobile-viewport) {
font-size: $fz-3;
}
}
&--picture {
width: 100px;
margin-right: 1rem;
@media($max-mobile-viewport) {
width: 35px;
}
}
&--description {
margin-top: 0.5rem;
flex-basis: 100%;
}
}
body.page-template-homepage {
.site-header {
background: transparent;
}
#header {
@media ($min-desktop-viewport) {
background: var(--page-picture);
background-repeat: no-repeat;
background-position-y: 50px;
background-size: 100%;
}
@media($min-desktop-viewport) {
height: 550px;
margin-bottom: -180px;
}
}
#top {
align-items: flex-end;
@media ($min-desktop-viewport) {
height: auto;
flex-wrap: nowrap;
}
}
h1#logo.has-logo {
@media($max-mobile-viewport) {
text-align: center;
}
a::before {
width: 260px;
height: 150px;
@media($max-mobile-viewport) {
width: 200px;
height: 114px;
}
}
}
#toplinks {
background: $gray-light;
@media ($min-desktop-viewport) {
position: absolute;
right: $nav-menu-side * 1.5;
top: ($desktop-gray-header-height - $nav-menu-side) / 2;
}
}
.pf-header-description {
font-weight: bold;
text-align: center;
font-size: $fz-1;
flex: 1 1 auto;
@media($max-mobile-viewport) {
padding: 1rem;
font-size: $fz-3;
}
@media($min-desktop-viewport) {
flex: 1 1 50%;
padding-bottom: 10px;
}
}
}

View File

@ -0,0 +1,112 @@
// colors
$gray: #BFBFBF;
$gray-dark: #575757;
$gray-light: #F1F1F1;
$orange: #EC671F;
$orange-dark: #df5a13;
$orange-gray: #A88B7D;
$green: #6BD3AA;
$green-dark: #31a679;
$green-light: #A6E5CC;
$blue: #91D5FF;
$blue-dark: #183c88;
$red: #df1313;
// typo
$base-font: 16;
$font-ratio: 1.333;
$fz-3: 1em * $font-ratio;
$fz-2: $fz-3 * $font-ratio;
$fz-1: $fz-2 * $font-ratio;
$fz-small: 1em / $font-ratio;
// Core vars
$width: 1280em / $base-font;
$mobile-limit: 64em;
$very-small-limit: 35em;
$columns-gutter: 2rem;
$font-size: 100% / ( 16 / $base-font );
$font-color: $gray-dark;
$font-family: "source sans pro", sans-serif;
$primary-color: $orange-dark;
$border-radius: 1rem;
$link-color: $primary-color;
$header-full-width-background: true;
$header-background-color: $gray-light;
$header-logo-size: 105px 60px;
$toplinks-style: none;
$toplinks-background: white;
$nav-after-image: false;
$nav-mobile-limit: 20000px;
$pwa-nav-limit: 960px;
$nav-background: $orange;
$nav-color: white;
$nav-border-radius: 0;
$nav-active-color: white;
$nav-border-color: none;
$nav-button-background: $orange;
$nav-button-color: white;
$nav-mobile-menu-background: $orange;
$nav-border-radius: 100%;
$nav-mobile-menu-item-color: white;
$nav-mobile-menu-item-hover-background: $orange;
$nav-mobile-menu-item-hover-color: white;
$responsive-menu: left-to-right;
$title-background: transparent;
$title-color: $font-color;
$title-font-size: $fz-2;
$title-weight: 900;
$cell-background: transparent;
$cell-border: none;
$cell-title-cover-border: false;
$cell-entry-border: 2px solid $gray;
$cell-entry-hover-color: $orange;
$cell-entry-hover-background: $cell-background;
$cell-entry-color: $gray-dark;
$cell-entry-font-weight: 600;
$carrousel-height: 40rem;
$carrousel-text-position: middle right;
$carrousel-navigation-color: black;
$carrousel-navigation-bullet-border: black;
$button-background: $orange-dark;
$button-color: white;
$button-hover-background: $orange;
$cancel-button-style: "%inverted-button";
$error-color: $red;
$widget-unique-checkbox-position: left;
$widget-background: $gray-light;
$widget-border: 1px solid $gray-light;
$widget-border-radius: $border-radius;
$widget-focus-border: 1px solid $orange;
$widget-padding: 0.625rem 1rem !default;
$widget-focus-box-shadow: none !default;
$notification_error_color: $red;
$notification_warning_color: $orange_dark;
$notification_success_color: $green-light;
$notification_info_color: $gray-light;
$wcs-step-color: $gray-dark;
$wcs-step-background: transparent !default;
$wcs-step-current-marker-background: url(img/bubble.svg);
$wcs-step-border-bottom: none;
$wcs-step-current-border-bottom: none;
$footer-background: $gray-light;
$footer-full-width-background: false;
$footer-color: gray-dark;

View File

@ -0,0 +1,32 @@
.wcs-step {
&.current & {
&--marker {
background-size: contain;
background-repeat: no-repeat;
}
}
}
.form-content {
&--sidebox {
background: $gray-light;
padding: 1rem;
border-radius: $border-radius;
}
}
div.cell.wcs-cards-cell {
h2:first-child {
font-size: $fz-3;
}
div.list-of-cards {
ul > li {
border: none;
padding: 0.3rem 0;
> a {
@extend %pf-field;
}
}
}
}

View File

@ -0,0 +1,17 @@
{
"label": "Publik Famille demo",
"variables": {
"pwa_display": "standalone",
"theme_color": "#EC671F",
"email_header_asset": "emails:logo"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"header:background": { "label": "Têtière : fond" },
"emails:logo": {"label": "Emails : logo"}
}
}
}
}

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><defs><style>.a{fill:#d9f1ff;}</style></defs><ellipse class="a" cx="14.5" cy="14" rx="14.5" ry="14"/></svg>

After

Width:  |  Height:  |  Size: 190 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="342.068" height="264.118" viewBox="0 0 342.068 264.118"><defs><style>.a{fill:#91d5ff;opacity:0.34;}</style></defs><path class="a" d="M1182.574,262.261c-3.436,4.7-8.6,6.818-13.549,8.658a238.914,238.914,0,0,1-32.165,9.838c-.095.024-.192.044-.29.065a126.025,126.025,0,0,1-24.334,3,92.313,92.313,0,0,1-22.782-2.347h0c-.314-.074-.624-.148-.935-.227a76.656,76.656,0,0,1-31.369-15.775c-.858-.728-1.717-1.48-2.589-2.2q-.088-.069-.168-.137a16.341,16.341,0,0,0-5.4-3.176c-5.41-1.638-10.839,1.833-15.918,4.6-31.386,17.117-71.208,7.961-95.431-21.945-2.966-3.659-5.786-7.661-9.495-10.114-5.514-3.642-12.135-3.337-18.24-5.057-18.209-5.133-30.286-31.4-24.345-52.947,3.29-11.94,10.926-21.363,19.216-28.881,20.451-18.548,46.4-27.906,71.894-25.922l.765.063c11.892,1.022,23.95,4.214,35.545.949,10.054-2.831,18.732-10.251,27.945-15.9q2.58-1.582,5.226-2.981c.169-.093.342-.183.512-.27a88.23,88.23,0,0,1,34.921-9.955c9.618-.645,21.393,1.2,28.645,9.791,7.47,8.852,7.756,24.48,17.991,30.3,8.474,4.817,19.13,3.389,27.972,8.8,8.642,5.286,16.152,14.6,17.982,26.159,1.777,11.229-1.922,22.8-.763,34.148a50.346,50.346,0,0,0,2.33,10.516q.3.932.629,1.857c2.147,6.075,4.975,11.919,7.142,18C1187.1,241.246,1188.545,254.086,1182.574,262.261Z" transform="matrix(-0.966, -0.259, 0.259, -0.966, 1122.521, 581.285)"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20.247" height="18.155" viewBox="0 0 20.247 18.155"><defs><style>.a{fill:#ec671f;}</style></defs><path class="a" d="M3880,308.909a9.087,9.087,0,0,0-17.966-2.742,8.947,8.947,0,0,0,1.481,6.454l-3.659,2.421,9.821,1.467A9.032,9.032,0,0,0,3880,308.909Z" transform="translate(-3859.854 -298.467)"/></svg>

After

Width:  |  Height:  |  Size: 345 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.012" height="21.907" viewBox="0 0 19.012 21.907"><defs><style>.a{fill:#ec671f;}.b{fill:#fff;}.b,.c{stroke:#ec671f;stroke-miterlimit:10;}.c{fill:none;stroke-width:1.598px;}</style></defs><g transform="translate(-3882.872 -312.104)"><path class="a" d="M3882.872,312.1v18.291H3898.1V312.1Zm11.327,13.741h-7.706v-1.3h7.706Zm0-4.364h-7.706v-1.3h7.706Zm0-4.364h-7.706v-1.3h7.706Z" transform="translate(0 0)"/><circle class="b" cx="3.697" cy="3.697" r="3.697" transform="translate(3893.99 326.117)"/><line class="c" y2="3.638" transform="translate(3897.687 327.864)"/><line class="c" x1="3.638" transform="translate(3895.868 329.683)"/></g></svg>

After

Width:  |  Height:  |  Size: 689 B

View File

@ -0,0 +1,10 @@
@charset "UTF-8";
@import '../includes/fonts/source-sans-pro';
@import 'vars';
@import '../includes/publik';
@import 'cells';
@import 'custom';
@import 'custom_classes';
@import 'header';
@import 'wcs';

View File

@ -18,7 +18,6 @@
{% if meta_keywords %}
<meta name="keywords" content="{{ meta_keywords }}" />
{% endif %}
{% block meta_icons %}{% endblock %}
{% if theme_color %}
<meta name="theme-color" content="{{theme_color}}">
<meta name="msapplication-navbutton-color" content="{{theme_color}}">

View File

@ -0,0 +1,8 @@
{% extends "combo/cells/carrousel/menu-cell.html" %}
{% block carrousel-item-content %}
{% for cell in menuitem.page.get_cells %}
{{cell.text|safe}}
{% endfor %}
{% endblock %}

View File

@ -0,0 +1,55 @@
{% load i18n %}
{% block cell-content %}
{% load assets %}
{% spaceless %}
{% block cell-header %}
{% if title %}<h2>{{ title }}</h2>{% endif %}
{% include "combo/asset_picture_fragment.html" %}
{% endblock cell-header %}
<div class="links-list">
{% block cell-top-content %}{% endblock cell-top-content %}
<ul>
{% for link in links %}
<li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}"
{% if link.cell.link_page.picture %}
style="--pf-icon-picture: url({{ link.cell.link_page.picture.url }})"
{% endif %}
>
<a href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
{% if more_links %}
<li class="add-more-items">
<a role="button"
tabindex="0"
aria-expanded="false"
aria-controls="more-items-{{ cell.get_reference }}"
aria-label="{% trans 'More items' %}"
id="btn-more-items-{{ cell.get_reference }}"
class="add-more-items--button">
{% block cell-more-items-btn-label %}+{% endblock %}
</a>
</li>
{% endif %}
</ul>
{% if more_links %}
<ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
{% for link in more_links %}
<li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}"
{% if link.cell.link_page.picture %}
style="--pf-icon-picture: url({{ link.cell.link_page.picture.url }})"
{% endif %}
>
<a href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
{% endif %}
</ul>
</div>
{% endspaceless %}
{% endblock %}

View File

@ -0,0 +1,23 @@
{% load i18n %}
{% load assets %}
{% if menuitems %}
<ul class="pf-menu--items">
{% spaceless %}
{% for item in menuitems %}
<li data-menu-page-id="{{ item.page.id }}" class="menu-{{ item.page.slug }} {% if item.selected %}selected{% endif %}">
<a {% if item.selected %}title="{{ item.page.title }} - {% trans "active page" %}"{% endif %} href="{% page_absolute_url item.page %}">
<span class="pf-menu-item">
{% if item.page.picture %}
<img class="pf-menu-item--image" src="{{item.page.picture.url}}"></img>
{% endif %}
<div class="pf-menu-item--title">
{{ item.page.title }}
</div>
</span>
</a>
</li>
{% endfor %}
{% endspaceless %}
</ul>
{% endif %}

View File

@ -0,0 +1,18 @@
{% extends "combo/page_template.html" %}
{% block content-pre %}
<header class="pf-page-header">
<div class="pf-page-header--content">
{% placeholder "page-header" name="Entête de la page"%}
{% if page.title %}
<div class="pf-page-header--default">
{% if page.picture %}
<img src="{{site_base}}{{page.picture.url}}" alt="" class="pf-page-header--picture"></img>
{% endif %}
<h1 class="pf-page-header--title">{{ page.title }}</h1>
<div class="pf-page-header--description">{{ page.description }}</div>
</div>
{% endif %}
</div>
</header>
{% endblock %}

View File

@ -0,0 +1,11 @@
{% extends "combo/page_template_2cols.html" %}
{% load combo i18n %}
{% block content-pre %}
{% endblock %}
{% block header-content %}
<div class="pf-header-description">{{ page.description }}</div>
{{ block.super }}
{% endblock %}

View File

@ -0,0 +1,5 @@
{% extends "includes/nav.html" %}
{% block menu %}
{% show_menu depth=1 ignore_visibility=True %}
{% endblock %}