435 lines
7.9 KiB
SCSS
435 lines
7.9 KiB
SCSS
@import '../../publik-base-theme/static/includes/font-roboto';
|
|
|
|
|
|
@font-face {
|
|
font-family: 'MarsIcons';
|
|
src: url('fonts/marsicons12.ttf') format('truetype'),
|
|
url('fonts/marsicons12.woff') format('woff'),
|
|
url('fonts/marsicons12.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
h1, h2, h3, h4, div.textcell h3, div.textcell h4 {
|
|
font-weight: bold;
|
|
line-height: 1.5em;
|
|
margin-bottom: 0.6em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
h1 {
|
|
color: $red;
|
|
font-size: 237%;
|
|
}
|
|
|
|
h2 {
|
|
color: $red;
|
|
font-size: 187%;
|
|
}
|
|
|
|
h3 {
|
|
color: $link-color;
|
|
font-size: 162%;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 137%;
|
|
}
|
|
|
|
h1#logo a {
|
|
background: url(img/logo.png) no-repeat left bottom;
|
|
background-size: contain;
|
|
display: block;
|
|
height: 83px;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
div#nav li {
|
|
border-right: 0.1em solid #FFF;
|
|
}
|
|
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
div#footer {
|
|
margin: 0 1em;
|
|
}
|
|
}
|
|
|
|
div#footer > div > div > div {
|
|
@include flexbox();
|
|
@include vendor-prefix(flex-wrap, wrap);
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
@include vendor-prefix(flex-direction, column);
|
|
}
|
|
}
|
|
|
|
div#footer div#footer-logos {
|
|
@include flex(1);
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
flex-basis: auto;
|
|
}
|
|
background: $primary-color;
|
|
margin: 0 0.4em 0 0;
|
|
padding: 2em 0 2em 0;
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
margin: 0;
|
|
}
|
|
ul.menu{
|
|
list-style: none;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
li {
|
|
font-weight: bold;
|
|
float: left;
|
|
line-height: 1.3em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
li.rs-link a, li.logorouen span {
|
|
display: block;
|
|
height: 2.5em;
|
|
margin-right: 0.8em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
li.rs-link a {
|
|
width: 2.5em;
|
|
}
|
|
li.logorouen span {
|
|
width: 9.110em;
|
|
&::after {
|
|
background-image: url(img/logo-h.svg);
|
|
}
|
|
}
|
|
li.rs-link a::after, li.logorouen span::after {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
content: ' ';
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
li.rs-facebook a::after {
|
|
background-image: url(img/rs-facebook.svg);
|
|
}
|
|
li.rs-twitter a::after {
|
|
background-image: url(img/rs-twitter.svg);
|
|
}
|
|
li.rs-googleplus a::after {
|
|
background-image: url(img/rs-googleplus.svg);
|
|
}
|
|
li.rs-youtube a::after {
|
|
background-image: url(img/rs-youtube.svg);
|
|
}
|
|
li.rs-flickr a::after {
|
|
background-image: url(img/rs-flickr.svg);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#footer div#footer-content {
|
|
@include flex(3);
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
flex-basis: auto;
|
|
}
|
|
background: $primary-color;
|
|
padding: 2em 2em 2em 2em;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
ul.menu {
|
|
border: 0;
|
|
font-size: 100%;
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
li {
|
|
display: inline;
|
|
font-weight: bold;
|
|
line-height: 1.6em;
|
|
margin-bottom: 0;
|
|
a {
|
|
border-bottom: none;
|
|
color: $black;
|
|
}
|
|
}
|
|
li::after {
|
|
color: $black;
|
|
content: $icon-mars-bullet;
|
|
font-family: MarsIcons;
|
|
}
|
|
li:last-child::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service h2 {
|
|
color: #C64A59;
|
|
font-size: 237%;
|
|
padding-left: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
button {
|
|
font-weight: bold;
|
|
}
|
|
|
|
%icon-common {
|
|
font-family: MarsIcons;
|
|
font-size: 200%;
|
|
margin-right: 0.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div.RadiobuttonsWidget div.content label {
|
|
display: block;
|
|
& input[type="radio"] {
|
|
display: none;
|
|
& + span::before {
|
|
@extend %icon-common;
|
|
content: $icon-mars-circle;
|
|
}
|
|
&:checked + span::before {
|
|
content: $icon-mars-circle-dotted;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.CheckboxWidget div.content label,
|
|
div.CheckboxesWidget div.content label {
|
|
display: block;
|
|
& input[type="checkbox"] {
|
|
left: -99999999px;
|
|
position: absolute;
|
|
& + span::before {
|
|
@extend %icon-common;
|
|
content: $icon-mars-square;
|
|
}
|
|
&:checked + span::before {
|
|
content: $icon-mars-square-checked;
|
|
}
|
|
}
|
|
}
|
|
|
|
%border-style {
|
|
border: 1px solid #2D2D2D;
|
|
}
|
|
|
|
select {
|
|
@extend %border-style;
|
|
}
|
|
|
|
input[type=text], input[type=password], input[type=email], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week], textarea {
|
|
@extend %border-style;
|
|
background-color: #FFF;
|
|
display: inline-block;
|
|
font-size: 100%;
|
|
padding: 0.7em 1em;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
form.quixote div.title label{
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 122%;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
div#content div.SubmitWidget {
|
|
button[name=submit][value=Suivant], button[name=submit][value=Valider], button[name=previous] {
|
|
background-color: $primary-color;
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
background-size: auto 100%;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding-right: 3.5em;
|
|
&[name=submit][value=Suivant] {
|
|
background-image: url(img/avant.svg);
|
|
}
|
|
&[name=submit][value=Valider] {
|
|
background-image: url(img/valider.svg);
|
|
}
|
|
&[name=previous] {
|
|
background-image: url(img/retour.svg);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#nav #nav-button.toggled + ul li {
|
|
border-bottom: 0.1em solid $white;
|
|
text-align: center;
|
|
a {
|
|
padding-left: 0;
|
|
span {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#toplinks {
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
margin-top: 0.5em;
|
|
padding: 0;
|
|
right: 0.2em;
|
|
a.login,a.logout {
|
|
@include flexbox();
|
|
@include vendor-prefix(justify-content, flex-end);
|
|
div.logtext {
|
|
background: $primary-color;
|
|
color: $black;
|
|
font-size: 122%;
|
|
font-weight: 700;
|
|
height: 2em;
|
|
padding: 0 0.5em;
|
|
text-align: center;
|
|
line-height: 2em;
|
|
}
|
|
div.logicon {
|
|
background-color: $black;
|
|
background-image: url(img/picto_btn_connexion.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 70%;
|
|
content: "";
|
|
width: 2em;
|
|
}
|
|
}
|
|
a.registration {
|
|
@include flexbox();
|
|
@include vendor-prefix(justify-content, flex-end);
|
|
color: $red;
|
|
font-weight: 500;
|
|
margin-top: 0.4em;
|
|
span.pre-register {
|
|
color: $light-black;
|
|
margin-right: 0.2em;
|
|
}
|
|
span.register {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#gauche {
|
|
clear: both;
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
div#gauche + div#rub_service {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
div#tracking-code {
|
|
text-align: center;
|
|
h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding-right: 1ex;
|
|
}
|
|
}
|
|
a {
|
|
padding: 0;
|
|
}
|
|
margin-bottom: 2rem;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
order: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
div#steps ol {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
li {
|
|
position: relative;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
color: $primary-color;
|
|
font-size: 24px;
|
|
margin-bottom: 0;
|
|
border: none;
|
|
min-width: 30px;
|
|
min-height: 40px;
|
|
&::after {
|
|
content: '';
|
|
height: 5px;
|
|
width: 100%;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 5px;
|
|
background: #9b9b9b;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
bottom: 15px;
|
|
}
|
|
}
|
|
&:first-child::after {
|
|
left: 50%;
|
|
width: 50%;
|
|
}
|
|
&:last-child::after {
|
|
right: 50%;
|
|
width: 50%;
|
|
}
|
|
span.marker {
|
|
position: absolute;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
left: 50%;
|
|
text-indent: -1000px;
|
|
border: none;
|
|
color: $primary-color;
|
|
background: white;
|
|
width: 15px;
|
|
height: 15px;
|
|
box-shadow: 0 0 0 5px #9b9b9b;
|
|
border-radius: 10px;
|
|
z-index: 100;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding: 0;
|
|
bottom: 10px;
|
|
}
|
|
}
|
|
span.label {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: $font-size;
|
|
padding-right: 0;
|
|
text-transform: none;
|
|
color: #9b9b9b;
|
|
padding-bottom: 30px;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
&.current {
|
|
span.marker {
|
|
background: $primary-color;
|
|
box-shadow: 0 0 0 5px $primary-color;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
&.step-before {
|
|
span.marker {
|
|
background: #9b9b9b;
|
|
}
|
|
}
|
|
}
|
|
}
|