This commit is contained in:
parent
fa58012e0a
commit
12027802cc
|
|
@ -0,0 +1,260 @@
|
|||
div#header {
|
||||
@media($min-desktop-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#top {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: $space-medium;
|
||||
@media($max-mobile-viewport) {
|
||||
padding: $space-small 0;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
#logo.has-logo {
|
||||
@media($max-mobile-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
position: static;
|
||||
@media($max-mobile-viewport) {
|
||||
max-width: unset;
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
|
||||
.toplinks{
|
||||
&--list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: $space-large;
|
||||
}
|
||||
|
||||
&--item {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.site-nav {
|
||||
@media($max-mobile-viewport) {
|
||||
grid-area: 1 / 2 / 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.gru-nav-wrapper {
|
||||
@media($max-mobile-viewport) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
.menu {
|
||||
margin: 0;
|
||||
@media($min-desktop-viewport) {
|
||||
padding-left: $space-xlarge;
|
||||
}
|
||||
|
||||
&--link {
|
||||
border-right: 1px solid $blue-dark;
|
||||
padding: 0 $space-large !important;
|
||||
@media($max-mobile-viewport) {
|
||||
margin: $space-medium 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 900 !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.gru-nav-button {
|
||||
top: $space-medium;
|
||||
right: $space-medium;
|
||||
left: auto;
|
||||
border-radius: 100%;
|
||||
border: 9px solid transparent;
|
||||
|
||||
&.toggled {
|
||||
background: $yellow;
|
||||
|
||||
& .icon-bar {
|
||||
background: $blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
+ ul {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
@media($min-desktop-viewport) {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
&--link {
|
||||
@media($max-mobile-viewport) {
|
||||
padding: $space-small 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&--label {
|
||||
color: white;
|
||||
&:hover {
|
||||
color: $yellow;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%title {
|
||||
background-image: linear-gradient(#{$yellow}, #{$yellow});
|
||||
background-size: 60px 7px;
|
||||
background-position: 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin: $space-small 0;
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
box-shadow: none;
|
||||
font-weight: 700;
|
||||
overflow: clip;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: 0;
|
||||
padding: $space-large $space-xlarge;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
background: $button-background;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
background: var(--hover-background);
|
||||
content: "";
|
||||
transition: .2s ease;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pk-button-cancel {
|
||||
&, #footer-wrapper & {
|
||||
@extend %button;
|
||||
background: $blue-dark;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
&--title {
|
||||
background: transparent;
|
||||
font-size: $fz-1;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
font-size: $fz-2;
|
||||
}
|
||||
|
||||
color: $blue-dark;
|
||||
font-weight: 900;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&--label {
|
||||
font-weight: 700;
|
||||
color: $blue-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-steps {
|
||||
border-radius: 5px;
|
||||
padding: $space-large;
|
||||
box-shadow: 0 0 16px 0 rgba(0,0,0,.33)
|
||||
}
|
||||
|
||||
input, textarea, .godo--editor, select, div.select2-container, span.select2-container {
|
||||
border-bottom: 1px solid $blue-dark;
|
||||
}
|
||||
|
||||
.select2-results {
|
||||
border: 1px solid $blue-dark;
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 3rem 0;
|
||||
|
||||
div.cell {
|
||||
@media($max-mobile-viewport) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&--label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
color: $yellow;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\f054'; // chevron-right
|
||||
font-family: FontAwesome;
|
||||
color: $yellow;
|
||||
font-weight: normal;
|
||||
margin-right: 0.5em;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
@import '../includes/fonts/raleway';
|
||||
|
||||
$blue: #496BAE;
|
||||
$blue-dark: #0B1E4D;
|
||||
$yellow: #FFCA60;
|
||||
$beige: #EEEBE8;
|
||||
|
||||
$font-family: Raleway, sans-serif;
|
||||
|
||||
$scale: 1rem;
|
||||
|
||||
$space-small: 5px;
|
||||
$space-medium: 10px;
|
||||
$space-large: 18px;
|
||||
$space-xlarge: 35px;
|
||||
|
||||
// Typo
|
||||
$fz-1: 55 / 16 * $scale;
|
||||
$fz-2: 36 / 16 * $scale;
|
||||
$fz-3: 28 / 16 * $scale;
|
||||
$font-size: 18 / 16 * $scale;
|
||||
$fz-small: 14 / 16 * $scale;
|
||||
|
||||
$title-color: $blue;
|
||||
$title-font-size: $fz-2;
|
||||
$title-transform: uppercase;
|
||||
$title-weight: 700;
|
||||
$title-padding: $space-small 0;
|
||||
|
||||
// Layout
|
||||
$width: 1140px;
|
||||
|
||||
// Header
|
||||
$header-background-color: $yellow;
|
||||
$header-full-width-background: true;
|
||||
$header-logo-size: 200px 50px;
|
||||
|
||||
$toplinks-style: none;
|
||||
|
||||
$responsive-menu: left-to-right;
|
||||
$nav-active-color: $blue-dark;
|
||||
$nav-background: $yellow;
|
||||
$nav-item-background: transparent;
|
||||
$nav-item-selected-background: transparent;
|
||||
$nav-menu-color: $blue-dark;
|
||||
$nav-submenu-background: $blue-dark;
|
||||
$nav-mobile-menu-background: $blue-dark;
|
||||
$nav-mobile-menu-item-color: white;
|
||||
$nav-mobile-menu-item-hover-color: $yellow;
|
||||
$nav-button-color: $yellow;
|
||||
$nav-button-bar-height: 4px;
|
||||
$nav-after-image: false;
|
||||
|
||||
|
||||
// Widgets
|
||||
$widget-focus-outline: 2px solid $blue;
|
||||
$widget-border: 0;
|
||||
|
||||
$button-background: $yellow;
|
||||
$button-color: $blue-dark;
|
||||
$button-hover-background: $blue;
|
||||
$button-hover-color: white;
|
||||
$button-border: 0;
|
||||
$button-border-radius: 2.375rem;
|
||||
$buttons-order: previous, cancel (grow), submit;
|
||||
$cancel-button-style: ".pk-button-cancel";
|
||||
|
||||
// cells
|
||||
$cell-border: none;
|
||||
|
||||
// w.c.s
|
||||
$wcs-steps-background: $beige;
|
||||
|
||||
// Step
|
||||
$wcs-step-color: $blue-dark;
|
||||
$wcs-step-current-color: $blue;
|
||||
|
||||
// Footer
|
||||
$footer-background: $blue-dark;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"label": "Manche",
|
||||
"variables": {
|
||||
"theme_color": "#0b1e4d",
|
||||
"email_header_asset": "emails:logo"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:background": { "label": "Têtière : fond" },
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"emails:logo": { "label": "Courriels : logo" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{% extends 'theme.html' %}
|
||||
|
||||
{# move nav #}
|
||||
{% block header-content %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block top-links %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block after-header %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue