644 lines
11 KiB
SCSS
644 lines
11 KiB
SCSS
@import '../includes/fonts/opensans';
|
|
|
|
$header-height: 150px;
|
|
$mobile-three-columns-break: 650px;
|
|
|
|
%title {
|
|
@extend %title;
|
|
background-image: url(img/white-skew.png);
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
text-align: center;
|
|
}
|
|
|
|
div#header {
|
|
max-width: 1280px;
|
|
height: $header-height;
|
|
h1#logo {
|
|
width: 50%;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
h1#logo.has-logo a {
|
|
background-size: auto 80px;
|
|
background-position: bottom 15px right 80px;
|
|
display: block;
|
|
height: 150px;
|
|
}
|
|
h1#logo::after {
|
|
content: "";
|
|
display: block;
|
|
background: white;
|
|
position: absolute;
|
|
width: 100px;
|
|
top: 55px;
|
|
right: -60px;
|
|
height: 75px;
|
|
transform: skewX(-21deg);
|
|
transform-origin: top right;
|
|
}
|
|
h1#logo a::after {
|
|
z-index: 200;
|
|
content: "";
|
|
display: block;
|
|
background: url(img/home.png) top 10px right 20px no-repeat;
|
|
background-size: auto 40px;
|
|
top: 65px;
|
|
height: 75px;
|
|
width: 100px;
|
|
position: absolute;
|
|
right: -30px;
|
|
}
|
|
|
|
#toplinks {
|
|
background: $red;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
height: $header-height;
|
|
width: 50%;
|
|
padding: 0;
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
height: $header-height;
|
|
background: $red;
|
|
width: 100px;
|
|
transform-origin: top left;
|
|
transform: skewX(-21deg);
|
|
}
|
|
> span {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 50px;
|
|
background: white;
|
|
border-radius: 10px 10px 0 0;
|
|
line-height: 50px;
|
|
font-weight: bold;
|
|
padding: 0 10px;
|
|
}
|
|
.sep {
|
|
color: $red;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1em;
|
|
width: 2px;
|
|
overflow: hidden;
|
|
background-color: currentColor;
|
|
margin: 0 .33em;
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
height: 80px;
|
|
h1#logo.has-logo::after {
|
|
content: none;
|
|
}
|
|
h1#logo.has-logo a {
|
|
height: 80px;
|
|
width: calc(100vw - 100px);
|
|
background-position: bottom 10px left 0;
|
|
background-size: auto 40px;
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#content-top-wrapper {
|
|
background: $gray;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0.5rem 0.5rem 1rem 0.5rem;
|
|
}
|
|
.content-top {
|
|
position: relative;
|
|
width: $width;
|
|
max-width: 100vw;
|
|
margin: 0 auto;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
}
|
|
h1 {
|
|
font-size: 300%;
|
|
color: $red;
|
|
margin-bottom: 6rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-bottom: 3rem;
|
|
font-size: 200%;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div.cell {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-top {
|
|
div.trackingcodeinputcell {
|
|
@extend .block;
|
|
h2 {
|
|
@extend %title;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.trackingcodeinputcell {
|
|
input {
|
|
width: 60%;
|
|
height: 2.5rem;
|
|
}
|
|
button {
|
|
@extend %button;
|
|
width: 35%;
|
|
margin-right: 0;
|
|
height: 2.5rem;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
}
|
|
|
|
div#anomalies {
|
|
background: $bgblue url(/assets/picture:anomalie) top center no-repeat;
|
|
background-size: 100% auto;
|
|
padding-top: 250px;
|
|
padding-right: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: $bgblue;
|
|
padding-top: 0;
|
|
}
|
|
> div {
|
|
background: $bgblue;
|
|
color: white;
|
|
padding-bottom: 1rem;
|
|
h2 {
|
|
margin: 0;
|
|
font-size: $font-size * 1.1;
|
|
color: $blue;
|
|
background: white;
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 0.5rem 2rem 0.5rem 1rem;
|
|
text-transform: uppercase;
|
|
&::after {
|
|
z-index: 80;
|
|
content: "";
|
|
display: block;
|
|
background: $bgblue;
|
|
position: absolute;
|
|
width: 40px;
|
|
top: 0;
|
|
right: -40px;
|
|
height: 101%;
|
|
transform: skewX(-21deg);
|
|
transform-origin: top right;
|
|
}
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 50%;
|
|
float: left;
|
|
padding-bottom: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
li {
|
|
margin: 0;
|
|
padding: 0;
|
|
a {
|
|
color: white;
|
|
border-bottom: 1px solid white;
|
|
display: block;
|
|
margin: 0 1rem;
|
|
padding: 5px 5px;
|
|
&:hover {
|
|
background: white;
|
|
color: $blue;
|
|
}
|
|
}
|
|
&.inverse {
|
|
margin-top: 0.5rem;
|
|
a {
|
|
background: white;
|
|
color: $blue;
|
|
&:hover {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:last-child::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
display: none;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: block;
|
|
#nav button {
|
|
transform: skewX(-21deg);
|
|
transform-origin: bottom right;
|
|
width: 120px;
|
|
margin-left: -50px;
|
|
.icon-bar {
|
|
left: 60px;
|
|
}
|
|
+ ul {
|
|
border-top-width: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#main-content-wrapper {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
#col1, #col2, #col3 {
|
|
float: left;
|
|
width: 33%;
|
|
@media screen and (max-width: #{$mobile-three-columns-break - 1px}) {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#content div.linkcell {
|
|
border: none;
|
|
a {
|
|
@extend %title;
|
|
text-align: left;
|
|
border-bottom: 0;
|
|
font-size: $font-size;
|
|
}
|
|
}
|
|
|
|
#content div.wcsformsofcategorycell {
|
|
border: 0;
|
|
h2 {
|
|
background: white;
|
|
text-align: left;
|
|
color: black;
|
|
text-transform: uppercase;
|
|
padding-left: 0;
|
|
font-weight: bold;
|
|
padding-top: 5px;
|
|
min-height: 3.5rem;
|
|
padding-bottom: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
min-height: 2.5rem;
|
|
}
|
|
}
|
|
&.foldable h2::after {
|
|
background: url(img/unfold.png) top right no-repeat;
|
|
background-size: 25px 25px;
|
|
content: '';
|
|
display: block;
|
|
width: 25px;
|
|
height: 25px;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 0;
|
|
}
|
|
&.foldable.folded h2::after {
|
|
background-image: url(img/fold.png);
|
|
}
|
|
li a {
|
|
padding: 5px 2px;
|
|
color: black;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
padding-bottom: 10px;
|
|
picture {
|
|
height: 150px;
|
|
overflow: hidden;
|
|
@media screen and (min-width: #{$mobile-three-columns-break}) {
|
|
img {
|
|
max-width: none;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
#footer-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
div.red {
|
|
background: $red;
|
|
color: white;
|
|
text-align: right;
|
|
background-image: url(img/white-skew.png);
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
height: 115px;
|
|
h3 {
|
|
padding-right: 1rem;
|
|
font-size: $font-size * 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#gauche {
|
|
width: 25%;
|
|
+ div#rub_service {
|
|
width: 71%;
|
|
margin-top: 0;
|
|
form {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
div#tracking-code {
|
|
height: 45px;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: -45px;
|
|
left: 29%;
|
|
background: $red;
|
|
div {
|
|
padding: 0 1rem 0 0.5rem;
|
|
display: inline-block;
|
|
h3, a {
|
|
background: transparent;
|
|
display: inline-block;
|
|
height: 45px;
|
|
font-size: 1rem;
|
|
color: white;
|
|
}
|
|
a {
|
|
font-weight: bold;
|
|
}
|
|
float: left;
|
|
}
|
|
form {
|
|
float: left;
|
|
display: inline-block;
|
|
margin: 0;
|
|
button {
|
|
margin-left: 1rem;
|
|
margin-right: 0;
|
|
box-shadow: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
+ div#rub_service {
|
|
width: 100%;
|
|
clear: both;
|
|
}
|
|
div#side {
|
|
display: block;
|
|
margin-top: -40px;
|
|
}
|
|
div#tracking-code, div#steps {
|
|
position: static;
|
|
clear: both;
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
div.tracking-code-part {
|
|
margin-top: -40px;
|
|
background: $red;
|
|
height: 45px;
|
|
width: 100%;
|
|
}
|
|
div#tracking-code {
|
|
height: auto;
|
|
text-align: center;
|
|
form {
|
|
margin-top: 0.5rem;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Steps
|
|
.wcs-steps {
|
|
clear: both;
|
|
padding-top: $wcs-steps-spacing;
|
|
}
|
|
.wcs-step {
|
|
box-shadow: 0 5px 5px #666;
|
|
border-radius: 10px;
|
|
font-weight: normal;
|
|
overflow: hidden;
|
|
|
|
&--marker,
|
|
&--label {
|
|
font-weight: normal !important;
|
|
}
|
|
}
|
|
@include desktop-vertical-steps() {
|
|
.wcs-steps {
|
|
padding-top: 0;
|
|
margin-top: -80px;
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
font-weight: normal;
|
|
margin-top: 0;
|
|
margin-left: 1rem;
|
|
text-transform: uppercase;
|
|
color: $red;
|
|
}
|
|
&--list {
|
|
padding-top: 1rem;
|
|
}
|
|
}
|
|
.wcs-step {
|
|
min-height: $wcs-step-marker-size;
|
|
margin-bottom: 1.5rem;
|
|
|
|
&--marker {
|
|
background: $red;
|
|
color: #fff;
|
|
height: auto;
|
|
&-nb::after {
|
|
content: "-"
|
|
}
|
|
}
|
|
&--label {
|
|
font-size: .8em;
|
|
padding-top: $wcs-steps-spacing;
|
|
padding-bottom: $wcs-steps-spacing;
|
|
color: inherit !important;
|
|
}
|
|
|
|
&.current {
|
|
background: $red;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
#columns div#rub_service {
|
|
// titre de la page (form-validation & dataview)
|
|
div.dataview div.title h3,
|
|
div.form-validation div.page > h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
// widget "titre"
|
|
h3[data-field-id],
|
|
div.dataview div.title h3 {
|
|
color: $red;
|
|
border: 0;
|
|
text-transform: uppercase;
|
|
font-size: 1.5rem;
|
|
font-weight: normal;
|
|
}
|
|
// widget "sous titre"
|
|
h4[data-field-id],
|
|
div.dataview div.subtitle h4 {
|
|
font-weight: bold;
|
|
color: $red;
|
|
}
|
|
div.buttons {
|
|
display: flex;
|
|
@media screen and (max-width: $width) {
|
|
flex-wrap: wrap;
|
|
}
|
|
div.savedraft-button {
|
|
display: none;
|
|
}
|
|
div.widget {
|
|
div.content,
|
|
button {
|
|
width: 100%;
|
|
text-align: left;
|
|
box-shadow: none;
|
|
border: 0;
|
|
padding: 1rem 1rem;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
div.content {
|
|
padding-right: 1rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: $width) {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
}
|
|
div.previous-button {
|
|
flex: 1;
|
|
order: 0;
|
|
button {
|
|
background-image: url(img/white-skew.png);
|
|
background-position: top right;
|
|
&::before {
|
|
content: "\f0d9"; // caret-left
|
|
font-family: FontAwesome;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 50%;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
div.cancel-button {
|
|
flex: 1;
|
|
order: 1;
|
|
button {
|
|
background-color: #e6e7e8;
|
|
background-image: url(img/white-skew.png), url(img/left-white-skew.png);
|
|
background-position: top right, top left;
|
|
background-repeat: no-repeat, no-repeat;
|
|
color: $red;
|
|
text-align: center;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 50%;
|
|
}
|
|
@media screen and (max-width: 320px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
div.submit-button {
|
|
flex: 1;
|
|
order: 2;
|
|
button {
|
|
background-image: url(img/left-white-skew.png);
|
|
background-position: top left;
|
|
text-align: right;
|
|
&::after {
|
|
content: "\f0da"; // caret-right
|
|
font-family: FontAwesome;
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div.previous-button {
|
|
order: 1;
|
|
}
|
|
div.cancel-button {
|
|
order: 2;
|
|
}
|
|
div.submit-button {
|
|
order: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#pwa-navigation {
|
|
ul {
|
|
li:last-child {
|
|
background: $red url(img/white-skew.png) top right no-repeat;
|
|
a {
|
|
background-size: 40px;
|
|
background-position: right 30px top 50%;
|
|
}
|
|
&:hover a {
|
|
background-color: transparent;
|
|
}
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button.synbird-btn.synbird-navigation-button {
|
|
padding: 0 0.5rem;
|
|
}
|