686 lines
10 KiB
SCSS
686 lines
10 KiB
SCSS
//
|
|
// TYPO
|
|
//
|
|
h1 {
|
|
font-size: $fz-h1;
|
|
text-transform: uppercase;
|
|
color: $orange;
|
|
}
|
|
h2 {
|
|
font-size: $fz-h2;
|
|
text-transform: uppercase;
|
|
}
|
|
h3 {
|
|
font-size: $fz-h3;
|
|
text-transform: uppercase;
|
|
}
|
|
p {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
//
|
|
// COMPONENTS
|
|
//
|
|
|
|
%title {
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
%button {
|
|
text-transform: uppercase;
|
|
font-size: $fz-small;
|
|
font-weight: bold;
|
|
background-size: 100%;
|
|
transition: 400ms background-size;
|
|
&, &:hover {
|
|
background-image: gradient-ro(90deg);
|
|
}
|
|
&:hover {
|
|
background-size: 200%;
|
|
}
|
|
}
|
|
|
|
%cancel-button {
|
|
&, &:hover {
|
|
background-image: none;
|
|
background-color: $beige;
|
|
color: $orange;
|
|
border-color: currentColor;
|
|
}
|
|
}
|
|
|
|
//
|
|
// HEADER
|
|
//
|
|
#top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem 0;
|
|
@media (max-width: $very-small-limit) {
|
|
font-size: $fz-small;
|
|
}
|
|
|
|
@media ($min-desktop-viewport) {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
// Logo
|
|
#logo.has-logo {
|
|
line-height: 1.5;
|
|
flex-grow: 1;
|
|
font-size: 1em;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-h3;
|
|
}
|
|
a {
|
|
padding: 1em 0;
|
|
padding-left: 6.5em;
|
|
text-indent: 0;
|
|
background-size: 5em 100%;
|
|
display: block;
|
|
text-transform: uppercase;
|
|
color: $font-color;
|
|
.site-header--community {
|
|
display: block;
|
|
font-size: $fz-small;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
// user links
|
|
#toplinks {
|
|
position: static;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
border: none;
|
|
max-width: none;
|
|
word-spacing: 0.5rem;
|
|
@media ($max-mobile-viewport) {
|
|
order: -1;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.login {
|
|
a {
|
|
@extend .pk-button;
|
|
}
|
|
}
|
|
.logged-in {
|
|
@extend %button;
|
|
a {
|
|
color: inherit;
|
|
}
|
|
.connected-user {
|
|
padding-right: .66em;
|
|
border-right: 2px solid;
|
|
@media ($min-desktop-viewport) {
|
|
&::before {
|
|
content: "bienvenue ";
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// NAV
|
|
//
|
|
body.hide-navigation .site-nav {
|
|
display: none;
|
|
}
|
|
.nav-btn {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-size: 1rem;
|
|
padding: 0.75em 2em;
|
|
margin: 0;
|
|
margin-bottom: .33em;
|
|
border-radius: $border-radius !important;
|
|
}
|
|
#nav {
|
|
@media ($min-desktop-viewport) {
|
|
text-align: right;
|
|
> ul {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
.nav--title {
|
|
@extend .nav-btn;
|
|
text-transform: uppercase;
|
|
background-color: hsla(0, 0%, 100%, 0.9);
|
|
color: $font-color;
|
|
vertical-align: top;
|
|
}
|
|
div.gru-nav ul {
|
|
margin: 0;
|
|
li {
|
|
@media ($max-mobile-viewport) {
|
|
display: block;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
text-align: center;
|
|
margin-left: .33em;
|
|
width: 16em;
|
|
}
|
|
a {
|
|
@extend .nav-btn;
|
|
display: block;
|
|
font-weight: 400;
|
|
background-color: adjust-color($nav-item-selected-background, $alpha:-0.3);
|
|
}
|
|
&.selected a, a:hover {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
//subnav
|
|
ul {
|
|
display: none !important;
|
|
}
|
|
}
|
|
// nav over page image
|
|
@media ($min-desktop-viewport) {
|
|
body.has-picture {
|
|
#nav-wrapper {
|
|
position: relative;
|
|
height: 0;
|
|
z-index: 1000;
|
|
}
|
|
#nav {
|
|
padding-top: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// MAIN
|
|
//
|
|
#content {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.community-header--default {
|
|
background-image: var(--page-picture);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
height: 32em;
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
body:not(.has-picture) & {
|
|
display: none;
|
|
}
|
|
}
|
|
.community-header--logo {
|
|
filter: contrast(0%) brightness(2);
|
|
display: block;
|
|
margin: auto;
|
|
margin-left: 1rem;
|
|
max-width: 40%;
|
|
max-height: 12em;
|
|
height: auto;
|
|
}
|
|
// hide community-header--default if cell in hero placeholder
|
|
* + .community-header--default {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.top-column {
|
|
div.cell {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: $columns-gutter;
|
|
}
|
|
}
|
|
|
|
//
|
|
// CELLS
|
|
//
|
|
|
|
// Custom styles
|
|
.centered-cell {
|
|
.gru-content &.cell {
|
|
text-align: center;
|
|
h2:first-child {
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
}
|
|
form {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
.centered-orange-cell {
|
|
@extend .centered-cell;
|
|
.gru-content &.cell {
|
|
color: white;
|
|
background: gradient-ro(150deg);
|
|
background-size: 200%;
|
|
border: none;
|
|
h2:first-child {
|
|
color: inherit;
|
|
}
|
|
form {
|
|
input, select {
|
|
color: black;
|
|
background-color: transparent;
|
|
border-color: currentColor;
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list-of-forms-cell {
|
|
$image-width: 2.5rem;
|
|
.gru-content &.cell {
|
|
h2:first-child {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
text-align: left;
|
|
padding-left: $image-width + 2;
|
|
color: $font-color;
|
|
}
|
|
|
|
&.foldable {
|
|
& > div > h2:first-child {
|
|
padding-right: 3rem;
|
|
&::after {
|
|
color: $red;
|
|
font-size: $fz-h2;
|
|
line-height: 0.75;
|
|
}
|
|
}
|
|
&.folded {
|
|
h2:first-child {
|
|
background-color: white;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Picture position
|
|
&.has-asset-picture {
|
|
> div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
|
|
> * {
|
|
flex: 0 0 100%;
|
|
}
|
|
|
|
> h2:first-child {
|
|
flex: 1 0 50%;
|
|
margin-left: -1 * ($image-width + 1);
|
|
|
|
}
|
|
|
|
> picture {
|
|
display: block;
|
|
order: -1;
|
|
flex: 0 0 $image-width;
|
|
align-self: center;
|
|
margin-left: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
img {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//links-list
|
|
div.links-list ul {
|
|
& > li {
|
|
> a {
|
|
padding-left: $image-width + 2;
|
|
}
|
|
&.required-authentication a::after {
|
|
content: "\f023"; // lock icon
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1rem;
|
|
right: auto;
|
|
margin: auto;
|
|
width: $image-width;
|
|
height: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
// Gray logo keyword options
|
|
$logo-width: 5rem;
|
|
@each $name, $file in $logos-demarche {
|
|
&[class*="keyword-"][class*="-#{$name}"] a {
|
|
padding-right: $logo-width + 1;
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
background: url(/assets/logo:#{$file}) no-repeat right center;
|
|
background-size: contain;
|
|
height: 2.5rem;
|
|
width: $logo-width;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 1rem;
|
|
left: auto;
|
|
margin: auto;
|
|
filter: grayscale(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Slug 'btn-with-icon'
|
|
// optionnal class 'orange' or 'beige'
|
|
.btn-with-icon {
|
|
.gru-content &.cell {
|
|
border: none;
|
|
|
|
&, &.orange {
|
|
background-color: $orange;
|
|
color: white;
|
|
}
|
|
&.beige {
|
|
background-color: $beige;
|
|
color: $orange;
|
|
}
|
|
}
|
|
&--link {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
color: inherit;
|
|
padding: 0 1.5em;
|
|
&, &:hover {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
&--icon {
|
|
display: block;
|
|
flex: 0 0 2em;
|
|
height: 3em;
|
|
margin-right: .66em;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: translateY(-0.2em);
|
|
}
|
|
&--label {
|
|
padding-top: 1.5em;
|
|
padding-bottom: 1.5em;
|
|
}
|
|
}
|
|
|
|
.gru-content {
|
|
// all cells
|
|
div.cell {
|
|
overflow: hidden;
|
|
.cell--body,
|
|
& h2 + div {
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tracking-code-input-cell {
|
|
form {
|
|
display: flex;
|
|
button {
|
|
margin-right: 0;
|
|
margin-left: 1.5em;
|
|
flex: 0 1 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wcs-forms-of-category-cell,
|
|
.wcs-current-forms-cell,
|
|
.wcs-current-drafts-cell {
|
|
@extend .list-of-forms-cell;
|
|
}
|
|
|
|
.text-cell p {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
|
|
.text-cell:not(.centered-orange-cell) {
|
|
@extend .pk-transparent;
|
|
}
|
|
|
|
div.wcs-current-forms-cell,
|
|
div.wcs-current-drafts-cell {
|
|
@extend .pk-transparent;
|
|
h2:first-child {
|
|
font-size: $fz-h3 !important;
|
|
border-bottom: none;
|
|
border-radius: $border-radius !important;
|
|
background-color: $green-light;
|
|
}
|
|
}
|
|
div.wcs-current-drafts-cell {
|
|
h2:first-child {
|
|
background-color: $gray;
|
|
}
|
|
}
|
|
|
|
#sidebar div.searchcell form {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
div.carrousel-content input + div div.carrousel-item {
|
|
padding-left: calc(6rem + 0.7rem);
|
|
}
|
|
|
|
//
|
|
// WCS
|
|
//
|
|
|
|
.wcs-page #columns-wrapper {
|
|
border: $cell-border;
|
|
border-radius: $cell-border-radius;
|
|
padding: 1rem;
|
|
margin: auto;
|
|
max-width: 62.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
div#tracking-code {
|
|
h3 {
|
|
background: none;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
color: $font-color;
|
|
}
|
|
a {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.form-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.form-content--title {
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
text-align: left;
|
|
font-size: $fz-h2;
|
|
padding-left: 0.5rem;
|
|
color: $font-color;
|
|
}
|
|
.form-content--sidebox {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
div#rub_service {
|
|
h2 {
|
|
background-color: transparent;
|
|
border-bottom: none;
|
|
text-align: left;
|
|
font-size: $fz-h2;
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
div.buttons .cancel-button button {
|
|
@extend %cancel-button;
|
|
}
|
|
|
|
// Steps
|
|
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
.wcs-steps {
|
|
font-size: 1rem;
|
|
}
|
|
.wcs-step {
|
|
position: relative;
|
|
flex-basis: 6rem;
|
|
&.last {
|
|
flex-basis: auto;
|
|
}
|
|
}
|
|
.wcs-step--marker {
|
|
font-size: $fz-h3;
|
|
}
|
|
.wcs-step--label {
|
|
display: block !important;
|
|
font-size: $fz-xsmall;
|
|
left: -1.6rem;
|
|
top: calc(100% + .5em);
|
|
width: 6rem;
|
|
}
|
|
}
|
|
|
|
// buttons order on mobile
|
|
@if $buttons-order or $buttons-alignment {
|
|
.quixote:not(#wf-actions) div.buttons {
|
|
@media (max-width: $very-small-limit) {
|
|
.submit-button {
|
|
order: 1;
|
|
flex-basis: 100%;
|
|
}
|
|
.previous-button {
|
|
order: 2;
|
|
}
|
|
.cancel-button {
|
|
order: 3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// AUTHENTIC
|
|
//
|
|
|
|
.authentic-page {
|
|
// submit button in right
|
|
form .buttons {
|
|
display: flex;
|
|
.submit-button {
|
|
order: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// FOOTER
|
|
//
|
|
|
|
#footer-wrapper {
|
|
border-bottom: 1.5em solid red;
|
|
border-image-slice: 1;
|
|
border-image-source: gradient-ro(-90deg);
|
|
}
|
|
#footer {
|
|
font-size: $fz-small;
|
|
font-weight: 500;
|
|
|
|
@media (max-width: $very-small-limit) {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
text-align: inherit;
|
|
font-weight: inherit;
|
|
|
|
color: $font-color;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
display: block;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.links-list ul {
|
|
& > li {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.back-top {
|
|
clear: both;
|
|
}
|
|
.back-top--link {
|
|
&:before {
|
|
color: $red
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Neutral templates
|
|
//
|
|
|
|
.page-template-sidebar-neutral,
|
|
.page-template-neutral {
|
|
.site-header--community {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
//
|
|
// PWA navigation
|
|
//
|
|
|
|
.pwa-navigation div > ul li {
|
|
a {
|
|
background-size: auto 33%;
|
|
background-position: center 25%;
|
|
font-weight: 600;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
&.selected a, a:hover {
|
|
filter: brightness(0.3);
|
|
}
|
|
}
|
|
|