397 lines
7.7 KiB
SCSS
397 lines
7.7 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;
|
|
}
|
|
|
|
element-invisible {
|
|
position: absolute !important;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
overflow: hidden;
|
|
height: 1px;
|
|
width: 1px;
|
|
word-wrap: 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%;
|
|
}
|
|
|
|
#login-page h2 {
|
|
color: $red;
|
|
font-size: 237%;
|
|
padding-left: 0;
|
|
text-align: left;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#login-page div.block h2 + div { padding: 0; }
|
|
|
|
h3 {
|
|
color: $link-color;
|
|
font-size: 162%;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 137%;
|
|
}
|
|
|
|
.gru-content div.a2-block h2, .gru-content div.block h2, div.links-list h2,
|
|
div#rub_service h2 {
|
|
color: #C64A59;
|
|
font-size: 187%;
|
|
}
|
|
|
|
div#rub_service div.category h3, .gru-content div.a2-block h2,
|
|
.gru-content div.block h2, div.links-list h2,
|
|
div#services > ul > li > strong > a,
|
|
.gru-content div.textcell h2:first-child,
|
|
.gru-content div.cell h2:first-child, div#tracking-code h3,
|
|
div#rub_service h2, #toplinks {
|
|
background-color: transparent;
|
|
}
|
|
|
|
div#header {
|
|
@media screen and (max-width: $mobile-limit) {
|
|
padding: 0;
|
|
|
|
h1 {
|
|
padding-left: 0;
|
|
background-position: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1#logo a {
|
|
background: url(img/logo.svg) no-repeat left bottom;
|
|
background-size: auto 1.3em;
|
|
background-position: 0.4em center;
|
|
display: block;
|
|
height: 2em;
|
|
text-indent: -9999px;
|
|
|
|
@media screen and (max-width: $mobile-limit) {
|
|
background-size: auto 0.7em;
|
|
background-position: 0.4em 0.42em;
|
|
}
|
|
}
|
|
|
|
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;
|
|
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; }
|
|
|
|
form.quixote div.widget { margin-bottom: 2em; }
|
|
form.quixote div.widget div.widget { margin-bottom: inherit; }
|
|
|
|
@media screen and (min-width: $mobile-limit) {
|
|
div#rub_service form.quixote, div#rub_service h2,
|
|
body.authentic #content, #messages {
|
|
max-width: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
%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, body.authentic label {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 122%;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
body.authentic label { margin-top: 1.7em; }
|
|
|
|
div.a2-block form button, div.a2-block form input[type="submit"] {
|
|
margin-top: 1.7em;
|
|
min-width: inherit;
|
|
}
|
|
|
|
div#content div.buttons.submit {
|
|
@include flexbox();
|
|
& div.submit-button {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
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#gauche {
|
|
clear: both;
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
div#gauche + div#rub_service {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
#publik-portal-agent { display: none; }
|
|
|
|
#messages {
|
|
li.info {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
margin: inherit;
|
|
padding-left: 1em;
|
|
|
|
&::before, &::after { display: none; }
|
|
}
|
|
}
|
|
|
|
.fargo-pick-popup button, button.ui-button, a.pk-button, a.pk-big-button,
|
|
a#a2-continue, div.gru-content button, input[type="submit"], div.buttons input {
|
|
box-shadow: none;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.fargo-pick-popup button:hover, button.ui-button:hover, a.pk-button:hover,
|
|
a.pk-big-button:hover, a#a2-continue:hover, div.gru-content button:hover,
|
|
input[type="submit"]:hover, div.buttons input:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Account management */
|
|
#profile span.label {
|
|
display: block;
|
|
color: $red;
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.a2-block p { margin-left: 0; }
|
|
div.a2-block form, div.a2-block > p { margin: 1em 1em; } |