637 lines
9.9 KiB
SCSS
637 lines
9.9 KiB
SCSS
@import 'data_uris';
|
|
@import 'encombrants';
|
|
|
|
@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
|
|
width: 100vw;
|
|
margin-left: calc(-50vw + 50%);
|
|
padding-right: calc(50vw - 50% + #{$add-padding-right});
|
|
padding-left: calc(50vw - 50% + #{$add-padding-left});
|
|
}
|
|
|
|
|
|
//
|
|
// Typo
|
|
//
|
|
|
|
html {
|
|
@media ($max-mobile-viewport) {
|
|
font-size: 100% / (16 / $base-font-m);
|
|
}
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1 {
|
|
font-size: $fz-1m;
|
|
font-weight: 900;
|
|
line-height: 1.5;
|
|
color: $font-color;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-1;
|
|
}
|
|
}
|
|
|
|
h2, .h2 {
|
|
font-size: $fz-2m;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
color: $salmon-dark;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-2;
|
|
}
|
|
}
|
|
|
|
h3, .h3 {
|
|
font-size: $fz-3m;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: $fz-3;
|
|
}
|
|
}
|
|
|
|
.chapo {
|
|
font-size: 21em / $base-font-m;
|
|
font-weight: 300;
|
|
line-height: 1.25;
|
|
margin: 0;
|
|
@media ($min-desktop-viewport) {
|
|
font-size: 24em / $base-font;
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
%title {
|
|
@extend .h2;
|
|
}
|
|
|
|
// button
|
|
%button {
|
|
box-shadow: none !important;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rounded-button {
|
|
border-radius: 2em;
|
|
}
|
|
|
|
.salmon-button {
|
|
@extend %button;
|
|
background-color: $salmon;
|
|
border-color: transparent;
|
|
&:hover {
|
|
background-color: $salmon-dark;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.rounded-salmon-button {
|
|
@extend .salmon-button;
|
|
@extend .rounded-button;
|
|
padding: .1em .66em;
|
|
}
|
|
|
|
.gray-button {
|
|
@extend %button;
|
|
background-color: $gray-6;
|
|
border-color: $gray-6;
|
|
&:hover {
|
|
background-color: $gray-1;
|
|
border-color: $gray-1;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
//
|
|
// GLOBAL LAYOUT
|
|
//
|
|
|
|
#page {
|
|
@media ($max-mobile-viewport) {
|
|
// keep space for user-links
|
|
padding-top: $topbar-mobile-height;
|
|
}
|
|
}
|
|
// move nav on top
|
|
.site-nav {
|
|
@media ($min-desktop-viewport) {
|
|
order: -1;
|
|
}
|
|
}
|
|
div#header, div#nav {
|
|
max-width: $header-width;
|
|
}
|
|
// header sticky
|
|
.site-header {
|
|
@media ($max-mobile-viewport) {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
//
|
|
// HEADER
|
|
//
|
|
#nav-skip a{
|
|
background-color: $salmon;
|
|
}
|
|
.site-header {
|
|
border-bottom: 1px solid $gray-5;
|
|
}
|
|
#top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
@media ($max-mobile-viewport) {
|
|
justify-content: flex-start;
|
|
height: $header-mobile-height;
|
|
margin-right: $nav-menu-side;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
padding-top: 27px;
|
|
padding-bottom: 27px;
|
|
}
|
|
}
|
|
|
|
#logo {
|
|
display: block;
|
|
&, & a {
|
|
line-height: 0;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
&.has-logo {
|
|
padding-left: 0;
|
|
a::before {
|
|
width: 100px;
|
|
height: 27px;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.theme-header-title h2 {
|
|
font-weight: 200;
|
|
font-size: $fz-1;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
color: $font-color;
|
|
@media ($max-mobile-viewport) {
|
|
font-size: $fz-1m;
|
|
line-height: 1.3;
|
|
border-left: 1px solid $gray-5;
|
|
padding-left: 1em;
|
|
}
|
|
@media (max-width: $very-small-limit) {
|
|
font-size: $fz-4;
|
|
line-height: 1.1;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// NAV
|
|
//
|
|
div.gru-nav {
|
|
@media ($min-desktop-viewport) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
ul:not(.toplinks--list) {
|
|
margin: 0;
|
|
> li > a {
|
|
font-weight: 500;
|
|
font-size: $fz-xsmall;
|
|
}
|
|
}
|
|
.gru-nav-button {
|
|
right: 0.7rem;
|
|
left: auto;
|
|
top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2 + #{$topbar-mobile-height});
|
|
body.scrolled & {
|
|
top: calc( (#{$header-mobile-height} - #{$nav-menu-side}) / 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// toplinks moved inside .gru-nav element
|
|
#toplinks {
|
|
font-size: $fz-xsmall;
|
|
font-weight: 500;
|
|
max-width: none;
|
|
padding: 0.3rem 0.7rem;
|
|
word-spacing: 1em;
|
|
.pre-register {
|
|
word-spacing: normal;
|
|
}
|
|
@media ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
@media ($min-desktop-viewport) {
|
|
position: static;
|
|
}
|
|
a {
|
|
color: white;
|
|
&:hover {
|
|
color: $salmon;
|
|
}
|
|
&.login-link,
|
|
&.logout {
|
|
text-decoration: none;
|
|
@extend .rounded-salmon-button;
|
|
margin-right: 0;
|
|
}
|
|
&.account-link {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// MAIN
|
|
//
|
|
|
|
main {
|
|
padding-top: 3rem;
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: 0.7rem;
|
|
padding-right: 0.7rem;
|
|
}
|
|
}
|
|
|
|
// Page header
|
|
.theme-page-header {
|
|
display: flow-root;
|
|
padding: 0 0.7em;
|
|
h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.cell + .ô-header {
|
|
display: none;
|
|
}
|
|
div.textcell p {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.theme-page-header .text-cell:first-child,
|
|
.ô-header {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
margin-bottom: 60px;
|
|
@media ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
width: 105px;
|
|
height: 130px;
|
|
position: absolute;
|
|
top: -38px;
|
|
left: -49px;
|
|
z-index: -1;
|
|
background: url("img/ô.svg") no-repeat;
|
|
background-size: contain;
|
|
@media ($max-mobile-viewport) {
|
|
left: -0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// CELLS
|
|
//
|
|
|
|
%cell-links-list {
|
|
& > li > a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.gru-content div.cell div.cell-items-pagination button {
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
width: 2.7em;
|
|
height: 2.7em;
|
|
float: none !important;
|
|
}
|
|
|
|
div.list-of-forms span.form-status {
|
|
color: $gray-2;
|
|
font-weight: 300;
|
|
font-size: $fz-small;
|
|
}
|
|
|
|
.errornotice,
|
|
.warningnotice,
|
|
.successnotice,
|
|
.infonotice {
|
|
padding-top: 2rem;
|
|
padding-right: 2rem;
|
|
padding-bottom: 2rem;
|
|
color: $font-color;
|
|
&::before {
|
|
top: 1.9rem;
|
|
}
|
|
}
|
|
.errornotice::before {
|
|
color: $error-color;
|
|
content:"\f2d3"; // square-xmark
|
|
}
|
|
.warningnotice::before {
|
|
color: $color-warning;
|
|
}
|
|
.successnotice::before {
|
|
color: $color-success;
|
|
}
|
|
.infonotice::before {
|
|
color: $color-info;
|
|
}
|
|
|
|
.gru-content div.cell {
|
|
@media ($max-mobile-viewport) {
|
|
scroll-margin-top: 50px;
|
|
}
|
|
}
|
|
|
|
//
|
|
// WCS / Forms
|
|
//
|
|
|
|
.wcs-page {
|
|
.theme-page-header {
|
|
display: none;
|
|
}
|
|
.ô-header {
|
|
margin-bottom: 0;
|
|
@media ($min-desktop-viewport) {
|
|
width: calc(75% - 25px);
|
|
}
|
|
}
|
|
}
|
|
.form-content--title {
|
|
@extend h1;
|
|
padding: 0;
|
|
@media ($min-desktop-viewport) {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
div#side {
|
|
@media ($max-mobile-viewport) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
.form-content--sidebox {
|
|
div#tracking-code {
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
order: 0;
|
|
text-align: left;
|
|
flex-grow: 1;
|
|
@media ($min-desktop-viewport) {
|
|
width: 25%;
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
h3 {
|
|
color: $font-color;
|
|
display: block;
|
|
padding: 0;
|
|
font-size: $fz-xsmall;
|
|
font-weight: 300;
|
|
margin-bottom: 0.33em;
|
|
}
|
|
a {
|
|
display: block;
|
|
font-size: $fz-4;
|
|
font-weight: bold;
|
|
color: $salmon-dark;
|
|
padding: 0;
|
|
&:not(:hover) {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.form-discard-draft {
|
|
@extend .rounded-salmon-button;
|
|
font-size: $fz-xsmall;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wcs-steps {
|
|
clear: both;
|
|
}
|
|
.wcs-step {
|
|
&--marker {
|
|
border: 1px solid $gray-5;
|
|
font-weight: bold;
|
|
}
|
|
&.current &--marker {
|
|
border-color: $wcs-step-color;
|
|
}
|
|
}
|
|
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
.wcs-steps {
|
|
margin-left: 1rem;
|
|
}
|
|
.wcs-step.current {
|
|
.wcs-step--marker {
|
|
height: 40px;
|
|
border-radius: 20px !important;
|
|
background-color: $salmon-dark;
|
|
border-color: $salmon-dark;
|
|
> * {
|
|
transform: none;
|
|
}
|
|
&::before {
|
|
transform: rotate(15deg);
|
|
height: 1.2em;
|
|
margin: 0.2em;
|
|
}
|
|
}
|
|
.wcs-step--label {
|
|
font-size: $fz-small;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
$label-width: 6rem;
|
|
.wcs-steps {
|
|
font-size: 1rem;
|
|
padding-right: $label-width / 2;
|
|
padding-top: 2rem;
|
|
|
|
@for $i from 8 through 42 {
|
|
&.steps-#{$i} li:not(.current) .wcs-step--label {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
.wcs-steps--list {
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
.wcs-step {
|
|
position: relative;
|
|
flex: 0 1 15rem;
|
|
&.last {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
.wcs-step--marker, .wcs-step::after {
|
|
transform: translateX(calc( (#{$label-width} - #{$wcs-step-marker-size}) / 2 ));
|
|
}
|
|
.wcs-step--label {
|
|
display: block !important;
|
|
font-size: $fz-xsmall;
|
|
top: calc(100% + .5em);
|
|
width: $label-width;
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-size: $fz-small;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.required {
|
|
color: $color-warning;
|
|
}
|
|
|
|
.RadiobuttonsWidget .content label {
|
|
font-weight: 400;
|
|
}
|
|
|
|
div#rub_service {
|
|
clear: both;
|
|
padding-top: 2rem;
|
|
h3 {
|
|
@extend .h2;
|
|
}
|
|
h4 {
|
|
@extend .h3;
|
|
}
|
|
@if ($field-on-error-style == custom) {
|
|
div.error {
|
|
font-weight: normal;
|
|
font-size: $fz-small;
|
|
color: $error-color;
|
|
background: none;
|
|
padding-left: 0;
|
|
&::before {
|
|
pointer-events: none;
|
|
content: "\f071"; // triangle-exclamation
|
|
font-family: FontAwesome;
|
|
font-size: 20px;
|
|
color: $salmon-dark;
|
|
}
|
|
p {
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
.submit-button button::after {
|
|
content: " \2002\2192";
|
|
}
|
|
.previous-button button::before {
|
|
content: "\2190\2002";
|
|
}
|
|
}
|
|
|
|
select {
|
|
background-image: url($data_uri_arrow-down-colour-thin);
|
|
}
|
|
|
|
// select2
|
|
div.select2-container,
|
|
span.select2-container {
|
|
.select2-selection--single .select2-selection__arrow {
|
|
background-image: url($data_uri_arrow-down-colour-thin);
|
|
}
|
|
}
|
|
|
|
div.file-upload-widget {
|
|
div.file-button {
|
|
div.widget-message {
|
|
&::before {
|
|
color: $salmon-dark;
|
|
content: "\f15c"; // file-lines
|
|
}
|
|
&::after {
|
|
color: $salmon-dark;
|
|
}
|
|
}
|
|
&.upload-done::after {
|
|
color: $salmon-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// FOOTER
|
|
//
|
|
$footer-padding-bottom: 2rem;
|
|
#footer-wrapper {
|
|
padding-bottom: $footer-padding-bottom;
|
|
}
|
|
#footer {
|
|
.menu-cell {
|
|
@include fill-viewport;
|
|
padding: 1rem 0;
|
|
background-color: #fff;
|
|
ul li a {
|
|
color: $gray-1;
|
|
text-transform: uppercase;
|
|
font-size: $fz-xsmall;
|
|
font-weight: bold;
|
|
&:hover {
|
|
color: $primary-color;
|
|
}
|
|
|
|
}
|
|
// Put .menu-cell only in last position on footer
|
|
transform: translateY(#{$footer-padding-bottom});
|
|
}
|
|
}
|
|
|
|
//
|
|
// Connexion
|
|
//
|
|
|
|
#login-page > .block > div {
|
|
padding: 1em 0.7em;
|
|
}
|
|
|
|
#login-password-form .title label::after {
|
|
content: " *";
|
|
color: $color-warning;
|
|
}
|
|
|
|
.block-password h3 + p::before {
|
|
content: "* ";
|
|
color: $color-warning;
|
|
}
|
|
|
|
// Additional CSS classes for dedicated cell
|
|
.login_registration_content div {
|
|
text-align: center;
|
|
}
|
|
|
|
div#fc-button-wrapper,
|
|
div#fc-explanation-text {
|
|
text-align: left;
|
|
a {
|
|
text-decoration-color: $salmon;
|
|
}
|
|
}
|