651 lines
12 KiB
SCSS
651 lines
12 KiB
SCSS
@import '../../publik-base-theme/static/includes/font-roboto';
|
|
|
|
@font-face {
|
|
font-family: 'MarsIcons';
|
|
src: url('fonts/marsicons13.ttf') format('truetype'),
|
|
url('fonts/marsicons13.woff') format('woff'),
|
|
url('fonts/marsicons13.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: 175%;
|
|
padding-left: 0.9rem;
|
|
}
|
|
|
|
h2 {
|
|
color: $red;
|
|
font-size: 150%;
|
|
}
|
|
|
|
li.required-authentication a::after {
|
|
content: "\e04d";
|
|
font-family: MarsIcons;
|
|
position: absolute;
|
|
right: 1rem;
|
|
color: #444;
|
|
font-size: 170%;
|
|
top: 0.35em;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
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; }
|
|
|
|
/* Home page */
|
|
body.page-index {
|
|
.gru-content { display: block; }
|
|
|
|
.bonjour {
|
|
text-align: center;
|
|
font-size: 175%;
|
|
font-weight: bold;
|
|
color: #198468;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.cell-summary { display: none; }
|
|
body.page-index #sidebar {
|
|
flex: inherit;
|
|
max-width: inherit;
|
|
|
|
@media screen and (min-width: $mobile-limit) {
|
|
display: grid;
|
|
column-gap: 1rem;
|
|
row-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-areas:
|
|
"a a a a"
|
|
"b b c d"
|
|
"e e f f"
|
|
"g g g g";
|
|
|
|
.introduction { grid-area: a; }
|
|
.suivi { grid-area: b; }
|
|
.creer-compte { grid-column: d-end / 3;}
|
|
.en-cours { grid-area: c; }
|
|
.brouillons { grid-area: d; }
|
|
.coffre-fort { grid-area: e; }
|
|
.historique { grid-area: f; }
|
|
.toutes-demarches { grid-area: g; }
|
|
}
|
|
|
|
.toutes-demarches h1 { margin-top: 1em; }
|
|
|
|
.btlnk {
|
|
background-color: #82cebb;
|
|
&::after { color: #82cebb; }
|
|
}
|
|
|
|
.creer-compte {
|
|
background-image: url(img/picto_create.svg);
|
|
background-size: 5em 5em;
|
|
background-repeat: no-repeat;
|
|
background-position: 1rem 1rem;
|
|
|
|
h2 {
|
|
margin: 1em 0 1.5em 4em;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, p, form, .cell {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
p { margin: 1em 0; }
|
|
|
|
button { background-color: #82cebb; }
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 175%;
|
|
}
|
|
|
|
.introduction h1 { color: #198468; }
|
|
|
|
h2 { font-size: 150%; }
|
|
|
|
.suivi h2 {
|
|
position: relative;
|
|
left: 1.55em;
|
|
background-color: #82cebb;
|
|
padding: 0.5em 0.5em;
|
|
display: inline-block;
|
|
width: 9em;
|
|
text-align: center;
|
|
|
|
&::before {
|
|
content: ' ';
|
|
background-image: url(img/ticket.svg);
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 1.55em;
|
|
left: -1.55em;
|
|
top: 0;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
#tracking-code {
|
|
height: 2.5em;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
|
|
.introduction {
|
|
text-align: center;
|
|
|
|
p:nth-child(0) {
|
|
color: #198468;
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
|
|
.suivi, .en-cours, .creer-compte, .brouillons, .coffre-fort, .historique {
|
|
padding: 1rem;
|
|
background-color: #d8f0ea;
|
|
@media screen and (max-width: $mobile-limit) { margin-bottom: 1em; }
|
|
}
|
|
|
|
.summary-count {
|
|
font-size: 700%;
|
|
font-weight: bold;
|
|
color: #3eb397;
|
|
}
|
|
|
|
.cell-summary { display: block; }
|
|
.cell-full { display: none; }
|
|
}
|
|
|
|
body.page-index #columns {
|
|
@media screen and (min-width: $mobile-limit) {
|
|
display: grid;
|
|
column-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
#left, #right {
|
|
float: none;
|
|
width: inherit;
|
|
}
|
|
|
|
h1, h2, h3, p, form, .cell {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
padding: 0.5em 1rem;
|
|
margin: 2em 0 0.7em;
|
|
}
|
|
|
|
.description, .intro { display: none; }
|
|
|
|
#left .cell:nth-child(2n), #right .cell:nth-child(2n+1) {
|
|
h2 { background-color: #F4A7AA; }
|
|
a {
|
|
background-color: #FCE4E5;
|
|
color: #c64a59;
|
|
}
|
|
li.required-authentication a::after { color: #c64a59; }
|
|
}
|
|
|
|
#left .cell:nth-child(2n+1), #right .cell:nth-child(2n) {
|
|
h2 { background-color: #82cebb; }
|
|
a {
|
|
background-color: #D8F0EA;
|
|
color: #198468;
|
|
}
|
|
li.required-authentication a::after { color: #198468; }
|
|
}
|
|
|
|
.cell {
|
|
margin-bottom: 2em;
|
|
|
|
li, h2 { border-radius: 0; }
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
border: none;
|
|
padding: 1em;
|
|
margin: 0.3em 0;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.registration.picto::after {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-image: url(img/picto_roue.svg);
|
|
background-size: contain;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
|
|
div#toplinks a.registration {
|
|
margin-top: 0.4em;
|
|
display: inline-block;
|
|
}
|
|
|
|
body.page-codesuivi {
|
|
#main-content-wrapper {
|
|
max-width: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#columns h2 {
|
|
color: $red;
|
|
font-size: 175%;
|
|
padding-left: 0.9rem;
|
|
}
|
|
|
|
#tracking-code {
|
|
height: 2.5em;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
}
|
|
|
|
#messages li, div.infonotice, div.successnotice, div.warningnotice, div.errornotice, form ul.errorlist.nonfield li {
|
|
background: transparent;
|
|
}
|
|
|
|
.tracking-code-part + form, #tracking-code>form {
|
|
position: relative;
|
|
left: -6em;
|
|
z-index: 1;
|
|
}
|
|
|
|
div.list-of-forms span.form-number {
|
|
opacity: inherit;
|
|
color: #575757;
|
|
} |