762 lines
13 KiB
SCSS
762 lines
13 KiB
SCSS
@charset "UTF-8";
|
||
|
||
@import "../../publik-base-theme/static/includes/fonts/opensans";
|
||
|
||
/* First for IE 4–8 */
|
||
@font-face {
|
||
font-family: DINWeb;
|
||
src: url("fonts/DINWeb.eot");
|
||
}
|
||
|
||
/* Then for WOFF-capable browsers */
|
||
@font-face {
|
||
font-family: DINWeb;
|
||
src: url("fonts/DINWeb.woff") format("woff");
|
||
}
|
||
|
||
div#page div#main-content-wrapper {
|
||
margin-top: 0px;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
footer {
|
||
div.textcell a {
|
||
color: #b3b3b3;
|
||
&:hover {
|
||
text-decoration: none;
|
||
border-bottom: 1px solid white;
|
||
}
|
||
&.logo-together-footer,
|
||
&.logo-liege-footer {
|
||
&:hover {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
@media screen and ($max-mobile-viewport) {
|
||
div.textcell.bloc-adresse {
|
||
padding: 0 40px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#receipt-intro a {
|
||
color: $href-color;
|
||
font-weight: bold;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
div#content a#disclose-dataview {
|
||
display: none;
|
||
}
|
||
|
||
div.dataview {
|
||
display: block;
|
||
}
|
||
|
||
/* Nouvelle class*/
|
||
#main-content ul li a:hover {
|
||
color: $highlight-text-color !important;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* surcharge*/
|
||
div#services > ul > li,
|
||
div.a2-block,
|
||
#content div.cell,
|
||
div.block {
|
||
text-align: left;
|
||
background: white;
|
||
border-radius: 3px;
|
||
border: 0px;
|
||
}
|
||
|
||
/* resize text input for "nb_exemplaire" field*/
|
||
.nb_exemplaire input {
|
||
width: 60px;
|
||
}
|
||
|
||
/* surcharge*/
|
||
div#rub_service div.category ul a,
|
||
div#services > ul > li > ul a,
|
||
div#account-management ul a,
|
||
div.categoriescell ul a,
|
||
div.wcsformsofcategorycell ul a,
|
||
div.wcscurrentdraftscell ul a,
|
||
div.wcscurrentformscell ul a {
|
||
padding: 1em;
|
||
display: block;
|
||
border-bottom: 0px !important;
|
||
position: relative;
|
||
}
|
||
|
||
div#gauche,
|
||
div#rub_service,
|
||
div#rub_service h2,
|
||
div#gauche + div#rub_service {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
div#tracking-code h3 {
|
||
border: 0;
|
||
background: none;
|
||
display: inline-block;
|
||
text-transform: uppercase;
|
||
font-size: 100%;
|
||
font-weight: bold;
|
||
color: #666;
|
||
padding-bottom: 0;
|
||
&::after {
|
||
content: " :";
|
||
}
|
||
}
|
||
|
||
div#tracking-code a {
|
||
display: inline-block;
|
||
font-size: 130%;
|
||
}
|
||
|
||
label[for="id_username"]::before,
|
||
label[for="id_email"]::before {
|
||
content: url("images/icone_user.png");
|
||
visibility: visible;
|
||
}
|
||
|
||
label[for="id_username"] {
|
||
visibility: hidden;
|
||
width: 54px;
|
||
height: 1px;
|
||
}
|
||
|
||
[for="id_username"],
|
||
#id_username {
|
||
float: left;
|
||
}
|
||
|
||
label[for="id_password"]::before {
|
||
content: url("images/icone_cadenas.png");
|
||
visibility: visible;
|
||
}
|
||
|
||
label[for="id_password"],
|
||
label[for="id_email"] {
|
||
visibility: hidden;
|
||
width: 54px;
|
||
height: 1px;
|
||
}
|
||
|
||
[for="id_password"],
|
||
#id_password,
|
||
[for="id_email"],
|
||
#id_username {
|
||
float: left;
|
||
}
|
||
|
||
input[value="Connexion"] {
|
||
background: url("images/fleche_epaisse_droite.png") no-repeat top center
|
||
transparent;
|
||
color: #ed226c;
|
||
font-size: 70%;
|
||
box-shadow: none;
|
||
border: none;
|
||
float: right;
|
||
padding-top: 35px;
|
||
text-transform: uppercase;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 1ex;
|
||
height: auto;
|
||
}
|
||
|
||
input[value="Connexion"]:hover {
|
||
box-shadow: none;
|
||
}
|
||
|
||
label[for="id_username"]::before,
|
||
label[for="id_password"]::before,
|
||
label[for="id_email"]::before {
|
||
margin-left: 31px;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
visibility: visible;
|
||
z-index: 1;
|
||
}
|
||
|
||
.form-field-required label:after {
|
||
content: "*";
|
||
color: #d90024;
|
||
padding-left: 1ex;
|
||
font-size: 80%;
|
||
}
|
||
|
||
div#rub_service div.form-validation div.page {
|
||
background: transparent;
|
||
padding-left: 0;
|
||
> h3 {
|
||
color: #be0d67;
|
||
border-bottom: 2px solid #e2e2e2;
|
||
font-size: 120%;
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
#messages li,
|
||
div.infonotice,
|
||
div.warningnotice,
|
||
div.errornotice {
|
||
background: #e6f5fc;
|
||
color: #f2f2f2;
|
||
}
|
||
|
||
#messages li,
|
||
div.infonotice,
|
||
div.warningnotice,
|
||
div.errornotice {
|
||
background: #e6f5fc;
|
||
color: #666768;
|
||
}
|
||
|
||
#messages li::before,
|
||
div.infonotice::before,
|
||
div.warningnotice::before,
|
||
div.errornotice::before {
|
||
font-family: FontAwesome;
|
||
font-size: 2em;
|
||
left: 0.5em;
|
||
position: absolute;
|
||
top: 0.25em;
|
||
color: $highlight-text-color;
|
||
}
|
||
|
||
div#rub_service h2 {
|
||
text-align: left;
|
||
border-radius: 0px 0px 0px 10px;
|
||
background: linear-gradient(to right, #f6f6f6, white);
|
||
}
|
||
|
||
/* Remove border on fields validate form page */
|
||
input[readonly],
|
||
select[readonly],
|
||
textarea[readonly] {
|
||
border-width: 0;
|
||
padding-left: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
label {
|
||
font-size: 1.2em;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* profile page */
|
||
.page-profil ul#id_title > li {
|
||
list-style-type: none;
|
||
}
|
||
|
||
.authentic-page.account-page #content {
|
||
.column:first-child {
|
||
float: right;
|
||
width: calc(100% - 350px);
|
||
}
|
||
.column:last-child {
|
||
float: left;
|
||
width: 300px;
|
||
}
|
||
@media screen and ($max-mobile-viewport) {
|
||
.column {
|
||
float: none;
|
||
width: auto;
|
||
}
|
||
}
|
||
#account-management {
|
||
h2 {
|
||
background: $primary-color;
|
||
color: white;
|
||
}
|
||
ul > li {
|
||
a {
|
||
background: #f5f6f6;
|
||
}
|
||
margin: 4px 0;
|
||
}
|
||
}
|
||
#a2-profile {
|
||
span.label {
|
||
clear: both;
|
||
float: left;
|
||
width: 15rem;
|
||
display: inline-block;
|
||
@media screen and ($max-mobile-viewport) {
|
||
float: none;
|
||
width: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-profil .form-field-required {
|
||
margin: 0 auto;
|
||
padding-bottom: 1ex;
|
||
}
|
||
|
||
.page-profil .a2-block p {
|
||
display: block;
|
||
margin: 1em auto;
|
||
}
|
||
|
||
/* Libellé du profile (auth) et valeur alignée*/
|
||
#profile dt {
|
||
color: #666666;
|
||
float: left;
|
||
font-size: 100%;
|
||
width: 40%;
|
||
}
|
||
|
||
#profile dd {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/*Boutton "commander un autre document"*/
|
||
a#workflow-button-command {
|
||
vertical-align: middle;
|
||
float: left;
|
||
display: block;
|
||
font-size: 1.2em;
|
||
font-weight: normal;
|
||
color: #be0d67;
|
||
background-color: white;
|
||
width: 200px;
|
||
height: 3em;
|
||
line-height: 1.5em;
|
||
padding: 1px;
|
||
border: solid #be0d67 1px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
text-decoration: None;
|
||
}
|
||
|
||
/*Bouton "Valider votre commande"*/
|
||
a#workflow-button-paid {
|
||
vertical-align: middle;
|
||
float: left;
|
||
margin-right: 20px;
|
||
margin-left: 24%;
|
||
display: block;
|
||
font-weight: normal;
|
||
color: white;
|
||
background-color: #be0d67;
|
||
width: 200px;
|
||
height: 3em;
|
||
line-height: 2.5em;
|
||
padding: 1px;
|
||
border: solid #be0d67 1px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
text-decoration: None;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
/* Keep border style solid for table presentation in last forms validation page*/
|
||
.form-validation .TableListRowsWidget table td {
|
||
border: 1px solid black;
|
||
}
|
||
|
||
/* Align label for error connexion*/
|
||
|
||
.page-profil input[type="submit"]:hover {
|
||
box-shadow: none;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* When a profile data is empty, we create a new line for next "print field"*/
|
||
#profile dl > dd > ul {
|
||
display: inline;
|
||
}
|
||
|
||
/* In forms title*/
|
||
div.widget div.title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* In forms h4 style (see first word "Traitement" in certif cohab legale)*/
|
||
h4 {
|
||
font-weight: normal;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Change size for button => usefull for "delete" draft form button*/
|
||
.fargo-pick-popup button,
|
||
div#content button {
|
||
height: 100%;
|
||
}
|
||
|
||
/* Class css qui peut servir à rendre invisible un champs en fonciton d'une valeur testée dans extra.js*/
|
||
.invisible {
|
||
display: None;
|
||
}
|
||
|
||
/*Style for new undo BUTTON with 'submit' class*/
|
||
div.a2-block .submit {
|
||
background: #be0d67 none repeat scroll 0 0;
|
||
border: 1px solid transparent;
|
||
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.21);
|
||
color: white;
|
||
cursor: pointer;
|
||
height: 2.5em;
|
||
margin-right: 2ex;
|
||
padding: 5px 15px;
|
||
transition: all 0.2s ease 0s;
|
||
vertical-align: middle;
|
||
width: 12em;
|
||
}
|
||
|
||
/* in forms' page : format word "TRAITEMENT" */
|
||
form.quixote > div > p > u:first-child {
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.page-profil #Mot_de_passe input[name="cancel"] {
|
||
display: None;
|
||
}
|
||
|
||
/*Formulaire*/
|
||
|
||
div.a2-block form input[type="submit"] {
|
||
margin-top: 1.5em;
|
||
}
|
||
|
||
div#gauche {
|
||
width: 25.5%;
|
||
}
|
||
|
||
div#gauche + div#rub_service {
|
||
padding-left: 2em;
|
||
width: 74.5%;
|
||
}
|
||
|
||
.comment-field {
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.comment-field li {
|
||
line-height: 1.5em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
#var_rb_concerne .content {
|
||
margin-top: 0.75em;
|
||
}
|
||
|
||
.title > label {
|
||
display: inline-block;
|
||
padding-bottom: 0em;
|
||
}
|
||
|
||
#content #columns {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* correct a bug in first eId connexion with profile form */
|
||
.form-field-required label[for="id_email"]::before {
|
||
content: None;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.form-field-required #id_email {
|
||
border: 1px solid #aaa;
|
||
border-radius: 0px;
|
||
margin-top: 6px;
|
||
padding-left: 2em;
|
||
width: 100%;
|
||
}
|
||
|
||
.form-field-required label[for="id_email"] {
|
||
height: 20px;
|
||
visibility: visible;
|
||
width: 100%;
|
||
}
|
||
/* END correct a bug in first eId connexion with profile form */
|
||
|
||
/* Style alert if error on field*/
|
||
.form_field_alert {
|
||
background: url("images/alert.jpg") no-repeat left top;
|
||
background-size: 13px 13px;
|
||
padding-left: 18px;
|
||
color: red;
|
||
}
|
||
/* END Style alert if error on field*/
|
||
|
||
/* New link color to highlight them.*/
|
||
a {
|
||
color: #be0d67;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
/* END of highlight links*/
|
||
|
||
/*Mise en apge "porte-documents" sur page d'acceuil*/
|
||
a.icone-porte-documents {
|
||
background-image: url("images/icone_porte-documents.png");
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
display: block;
|
||
width: 100%;
|
||
height: 125px;
|
||
}
|
||
/*END Mise en page "porte-doc..."*/
|
||
|
||
/*Index page*/
|
||
div#columns > div.column:first-child div.jq_txt_connexion > div > div > h2 {
|
||
background-color: transparent !important;
|
||
box-shadow: None !important;
|
||
}
|
||
|
||
/* Form validation page : reduce margin between page*/
|
||
div.form-validation div.page {
|
||
margin-bottom: -1.7em;
|
||
}
|
||
/* End of Form validation page ... */
|
||
|
||
div#tracking-code {
|
||
display: none;
|
||
}
|
||
div#tracking-code h3 {
|
||
display: none;
|
||
}
|
||
div#tracking-code a {
|
||
display: none;
|
||
}
|
||
|
||
div#receipt-intro > p#tracking-code {
|
||
display: none;
|
||
}
|
||
|
||
div.list-of-forms span.form-status {
|
||
position: relative;
|
||
right: 1ex;
|
||
display: block;
|
||
text-align: right;
|
||
}
|
||
|
||
select {
|
||
-moz-appearance: menulist !important;
|
||
-webkit-appearance: menulist !important;
|
||
}
|
||
|
||
/*End Index page*/
|
||
|
||
a#publik-portal-agent {
|
||
top: 62px;
|
||
right: 0;
|
||
}
|
||
|
||
div.widget table input,
|
||
div.widget table select {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Rentre un champs invisible grace aux styles complementaires*/
|
||
form.quixote div.hidden,
|
||
div.invisible {
|
||
display: none;
|
||
}
|
||
|
||
div.list-of-forms {
|
||
span.form-title {
|
||
width: 100%;
|
||
font-weight: bold;
|
||
padding-left: 20px;
|
||
background: url(images/form_puce.png) 0px 4px no-repeat;
|
||
background-size: 12px;
|
||
}
|
||
span.form-number {
|
||
padding-left: 20px;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
@media screen and ($max-mobile-viewport) {
|
||
body.focus-in .site-nav {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
div.carrousel {
|
||
strong {
|
||
@extend %title;
|
||
color: white;
|
||
}
|
||
a:hover {
|
||
text-decoration: none;
|
||
}
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
div#content div.wcsformsofcategorycell {
|
||
position: relative;
|
||
margin-bottom: 25px;
|
||
@media screen and ($max-mobile-viewport) {
|
||
margin: 0px;
|
||
border-bottom: 3px solid white;
|
||
}
|
||
h2 {
|
||
position: relative;
|
||
z-index: 10;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
padding-top: 50px;
|
||
height: 130px;
|
||
}
|
||
&.foldable {
|
||
@media screen and ($max-mobile-viewport) {
|
||
h2 {
|
||
padding-right: 50px; // for folding arrow
|
||
}
|
||
}
|
||
h2::after {
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
&.folded picture,
|
||
picture {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 130px;
|
||
overflow: hidden;
|
||
img {
|
||
padding: 0;
|
||
}
|
||
}
|
||
div.intro,
|
||
div.description {
|
||
display: none;
|
||
}
|
||
ul {
|
||
background: white;
|
||
}
|
||
ul > li {
|
||
background: url(images/form_puce.png) 10px 50% no-repeat;
|
||
background-size: 10px 10px;
|
||
a {
|
||
padding-left: 30px;
|
||
}
|
||
&.add-more-items {
|
||
background: none;
|
||
}
|
||
&.required-authentication a,
|
||
&.required-fedict-authentication a {
|
||
// Add a lock next to required authentication forms
|
||
background: url(images/form_lock.svg) right 10px top 50% no-repeat;
|
||
background-size: 15px;
|
||
padding-right: 30px;
|
||
}
|
||
&.required-fedict-authentication a {
|
||
background-image: url(images/beid_image_mini.png);
|
||
background-size: 30px;
|
||
padding-right: 45px;
|
||
}
|
||
}
|
||
ul > li.add-more-items a {
|
||
padding-left: 0;
|
||
}
|
||
border: none;
|
||
& > div > div {
|
||
position: relative;
|
||
z-index: 10;
|
||
margin: -10px 1rem 0 1rem;
|
||
li {
|
||
margin-bottom: 0px;
|
||
a {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and ($max-mobile-viewport) {
|
||
div.gru-nav span.badge::before {
|
||
content: none;
|
||
}
|
||
div.gru-nav span.badge::after {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
.back-home-button {
|
||
clear: both;
|
||
}
|
||
|
||
// Steps
|
||
.wcs-step {
|
||
font-size: 1.2em;
|
||
|
||
&--label {
|
||
font-weight: normal !important;
|
||
}
|
||
&--marker-nb {
|
||
font-size: 1.2em;
|
||
}
|
||
@include desktop-vertical-steps() {
|
||
padding-left: 0;
|
||
|
||
&:not(.current) {
|
||
border: 1px solid #aaa;
|
||
}
|
||
|
||
&--label {
|
||
margin-left: 0;
|
||
}
|
||
&--marker-nb {
|
||
font-size: 1.4em;
|
||
}
|
||
|
||
// Tie
|
||
&::after {
|
||
z-index: -1 !important;
|
||
top: 50% !important;
|
||
left: calc(
|
||
(#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2
|
||
) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* fix open street map leaflet over pwa menu problem */
|
||
@media screen and (max-width: 800px) {
|
||
.site-nav {
|
||
z-index: 1001;
|
||
}
|
||
}
|
||
|
||
// Fix login button
|
||
|
||
input[value="Connexion"]:hover {
|
||
box-shadow: none;
|
||
background: url("images/fleche_epaisse_droite.png") no-repeat top center transparent;
|
||
color: white;
|
||
background-color: #3a001d;
|
||
}
|
||
|
||
// fix footer href color not visible
|
||
|
||
#footer-wrapper a {
|
||
color: white;
|
||
}
|
||
|
||
// fix key icon on lock
|
||
li.required-authentication a:after {
|
||
content: none;
|
||
}
|