la-hague-2022: new theme (#65119)
This commit is contained in:
parent
bcb84f2263
commit
aac059a4c3
|
|
@ -0,0 +1,390 @@
|
|||
//
|
||||
// TYPO
|
||||
//
|
||||
|
||||
h1 {
|
||||
font-size: $fz-1;
|
||||
font-weight: 900;
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-2;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: $fz-2;
|
||||
font-weight: 800;
|
||||
}
|
||||
h3 {
|
||||
font-size: $fz-3;
|
||||
font-weight: 800;
|
||||
}
|
||||
h4 {
|
||||
font-size: $fz-4;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// HEADER
|
||||
//
|
||||
|
||||
div#header {
|
||||
padding: 10px;;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: 15px;
|
||||
max-width: 100em;
|
||||
}
|
||||
}
|
||||
|
||||
#top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
font-size: 1em;
|
||||
flex: 1 1 auto;
|
||||
&.has-logo a {
|
||||
color: $cyan-xdark;
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $fz-3;
|
||||
font-weight: 700;
|
||||
align-items: flex-end;
|
||||
&::before {
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
font-size: $fz-xsmall;
|
||||
font-weight: normal;
|
||||
&::before {
|
||||
width: 76px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
position: static;
|
||||
word-spacing: 1rem;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: 0.75em 1em;
|
||||
border: 1px solid;
|
||||
border-radius: 2em;
|
||||
&::before {
|
||||
content: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
font-size: $fz-3;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 0.33em;
|
||||
}
|
||||
&.login-link {
|
||||
white-space: nowrap;
|
||||
&::before {
|
||||
content: url(img/arrow-right-to-bracket-solid.svg);
|
||||
}
|
||||
}
|
||||
&.registration {
|
||||
&::before {
|
||||
content: url(img/pen-to-square-solid.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: $fz-small;
|
||||
padding: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// NAV
|
||||
//
|
||||
body {
|
||||
border: none;
|
||||
}
|
||||
div.gru-nav {
|
||||
@media ($max-mobile-viewport) {
|
||||
.gru-nav-button {
|
||||
$button-height: calc(#{$nav-menu-side} + 20px + 2em);
|
||||
border: 8px solid $nav-button-background;
|
||||
border-width: 32px 8px;
|
||||
height: $button-height;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&.toggled {
|
||||
.icon-bar {
|
||||
background-color: white;
|
||||
}
|
||||
+ ul::before {
|
||||
height: $button-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
> ul {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
> li {
|
||||
padding: 0.5rem 0;
|
||||
> a {
|
||||
padding: .33em 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Page picture
|
||||
body.has-picture {
|
||||
.site-nav::after {
|
||||
top: 0;
|
||||
}
|
||||
div#main-content-wrapper {
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-top: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// PWA NAV
|
||||
//
|
||||
|
||||
.pwa-navigation div > ul li a {
|
||||
background-size: 20px 20px;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
//
|
||||
// MAIN
|
||||
//
|
||||
main {
|
||||
background-color: $cyan-xlight;
|
||||
}
|
||||
#main-content {
|
||||
padding: $columns-gutter/2;
|
||||
background-color: white;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: $columns-gutter;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// CELLS
|
||||
//
|
||||
|
||||
%cell {
|
||||
margin-bottom: $columns-gutter !important;
|
||||
}
|
||||
|
||||
// Image position (left of cell title)
|
||||
.gru-content .cell.has-asset-picture {
|
||||
$image-size: 4rem;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
> h2:first-child {
|
||||
flex: 1 0 50%;
|
||||
margin-left: -1 * ($image-size + 1);
|
||||
padding-left: $image-size + 2;
|
||||
}
|
||||
> picture {
|
||||
display: block;
|
||||
order: -1;
|
||||
flex: 0 0 $image-size;
|
||||
height: $image-size;
|
||||
align-self: center;
|
||||
margin-left: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1.2rem solid transparent;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// foldable option
|
||||
div.cell.foldable {
|
||||
> div > h2:first-child {
|
||||
&::after {
|
||||
box-sizing: content-box;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
padding: 0.3em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
transition: background-color 400ms;
|
||||
}
|
||||
&:hover::after {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// light blue cell
|
||||
.lightblue-cell {
|
||||
.gru-content &.cell {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
background-color: $cyan-xlight;
|
||||
}
|
||||
}
|
||||
|
||||
// dark blue cell
|
||||
.darkblue-cell {
|
||||
.gru-content &.cell {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
background-color: $cyan-xdark;
|
||||
color: white;
|
||||
|
||||
h2:first-child {
|
||||
color: inherit;
|
||||
font-size: $fz-3;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cyan-xlight;
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
& > li:not(:last-child) {
|
||||
border-bottom-color: $cyan-dark;
|
||||
}
|
||||
& > li {
|
||||
> a {
|
||||
color: inherit
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-forms-of-category-cell {
|
||||
@extend .lightblue-cell;
|
||||
}
|
||||
|
||||
.tracking-code-input-cell {
|
||||
@extend .darkblue-cell;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// search-cell
|
||||
div.searchcell {
|
||||
form {
|
||||
input {
|
||||
border-radius: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// links-list
|
||||
// Add arrow before link label
|
||||
.gru-content %cell-links-list {
|
||||
& > li:not(.add-more-items) {
|
||||
> a,
|
||||
> div.description {
|
||||
padding-left: 2.4em;
|
||||
}
|
||||
> a {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0.5em solid transparent;
|
||||
border-width: 0.37em 0.5em;
|
||||
border-left-color: $cyan;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// FORMS & WCS
|
||||
//
|
||||
|
||||
%button {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-content--title {
|
||||
@extend h1;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
div#rub_service {
|
||||
h3 {
|
||||
font-size: $fz-2;
|
||||
}
|
||||
h4 {
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
@extend %cell;
|
||||
background-color: $cyan-xdark;
|
||||
color: white;
|
||||
h3 {
|
||||
color: inherit;
|
||||
}
|
||||
a {
|
||||
color: $cyan-xlight;
|
||||
}
|
||||
form {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: $fz-small;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// FOOTER
|
||||
//
|
||||
|
||||
#footer-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
// colors
|
||||
$cyan: #209EBD;
|
||||
$cyan-light: #41B6D3;
|
||||
$cyan-xlight: #DFF3F7;
|
||||
$cyan-dark: #507483;
|
||||
$cyan-xdark: #073041;
|
||||
|
||||
// typo
|
||||
$base-font: 16;
|
||||
|
||||
$fz-1: 38em / $base-font;
|
||||
$fz-2: 28em / $base-font;
|
||||
$fz-3: 22em / $base-font;
|
||||
$fz-4: 18em / $base-font;
|
||||
$fz-small : 14em / $base-font;
|
||||
$fz-xsmall: 12em / $base-font;
|
||||
|
||||
// Core vars
|
||||
$font-size: 100% / ( 16 / $base-font );
|
||||
$font-family: Inter, Arial, Helvetica, "Liberation Sans", sans-serif;
|
||||
$font-color: $cyan-xdark;
|
||||
$link-color: $cyan;
|
||||
|
||||
$width: 1200em / $base-font;
|
||||
$mobile-limit: 64em;
|
||||
$very-small-limit: 35em;
|
||||
$columns-gutter: 30px;
|
||||
$sidebar-width: 310px + $columns-gutter;
|
||||
|
||||
$primary-color: $cyan;
|
||||
$body-background: white;
|
||||
|
||||
$header-background-color: white;
|
||||
$header-logo-size: 143px 95px;
|
||||
$show-site-title: true;
|
||||
$toplinks-style: none;
|
||||
|
||||
$responsive-menu: left-to-right;
|
||||
$nav-background: $cyan;
|
||||
$nav-full-width-background: true;
|
||||
$nav-color: white;
|
||||
$nav-active-color: $cyan-light;
|
||||
$nav-button-background: $cyan;
|
||||
$nav-item-spacing: 1rem;
|
||||
$nav-item-hover-color: $cyan-xlight;
|
||||
$nav-item-hover-background: transparent;
|
||||
$nav-mobile-menu-background: $cyan;
|
||||
$nav-mobile-menu-item-color: white;
|
||||
|
||||
$nav-mobile-bottom-bar-background: $cyan-xdark;
|
||||
$nav-mobile-bottom-bar-item-hover-background: black;
|
||||
$nav-mobile-bottom-bar-item-selected-background: black;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-color: $font-color;
|
||||
$title-font-size: $fz-4;
|
||||
$title-weight: bold;
|
||||
|
||||
$cell-border: none;
|
||||
$cell-entry-color: $font-color;
|
||||
$cell-entry-font-weight: bold;
|
||||
$cell-entry-border: 1px solid white;
|
||||
$cell-entry-hover-background: transparent;
|
||||
|
||||
$form-sidebar-gutter: $columns-gutter;
|
||||
$form-sidebar-width: 300px;
|
||||
$button-background: $cyan;
|
||||
$cancel-button-style: '%inverted-button';
|
||||
$buttons-order: cancel (grow), previous, submit;
|
||||
$widget-unique-checkbox-position: left;
|
||||
$widget-border: 1px solid $cyan-dark;
|
||||
|
||||
$wcs-steps-spacing: 1rem;
|
||||
$wcs-step-color: $cyan-dark;
|
||||
$wcs-step-current-color: $cyan;
|
||||
$wcs-step-border-bottom: none;
|
||||
$wcs-step-marker-color: white;
|
||||
$wcs-step-marker-background: $wcs-step-color;
|
||||
$wcs-step-current-marker-color: white;
|
||||
$wcs-step-current-marker-background: $wcs-step-current-color;
|
||||
$wcs-step-marker-type: disc;
|
||||
|
||||
$footer-background: $cyan-xdark;
|
||||
$footer-link-color: $cyan-xlight;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"label": "La Hague (2022)",
|
||||
"variables": {
|
||||
"pwa_display": "standalone",
|
||||
"theme_color": "#209EBD",
|
||||
"email_header_asset": "emails:logo"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"emails:logo": {"label": "Emails : logo"}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="#209EBD" d="M416 32h-64c-17.67 0-32 14.33-32 32s14.33 32 32 32h64c17.67 0 32 14.33 32 32v256c0 17.67-14.33 32-32 32h-64c-17.67 0-32 14.33-32 32s14.33 32 32 32h64c53.02 0 96-42.98 96-96V128C512 74.98 469 32 416 32zM342.6 233.4l-128-128c-12.51-12.51-32.76-12.49-45.25 0c-12.5 12.5-12.5 32.75 0 45.25L242.8 224H32C14.31 224 0 238.3 0 256s14.31 32 32 32h210.8l-73.38 73.38c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0l128-128C355.1 266.1 355.1 245.9 342.6 233.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 714 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="#209EBD" d="M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z"/></svg>
|
||||
|
After Width: | Height: | Size: 941 B |
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/fonts/inter';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
Loading…
Reference in New Issue