601 lines
11 KiB
SCSS
601 lines
11 KiB
SCSS
/*Light - 100*/
|
|
@font-face {
|
|
font-family: 'DINPro';
|
|
src: url('assets/fonts/DINPro-Light.eot');
|
|
src: url('assets/fonts/DINPro-Light.woff2') format('woff2'),
|
|
url('assets/fonts/DINPro-Light.woff') format('woff'),
|
|
url('assets/fonts/DINPro-Light.ttf') format('truetype'),
|
|
url('assets/fonts/DINPro-Light.svg#DINPro-Light') format('svg'),
|
|
url('assets/fonts/DINPro-Light.eot?#iefix') format('embedded-opentype');
|
|
font-weight: 100;
|
|
font-style: normal;
|
|
}
|
|
/*Regular - 400*/
|
|
@font-face {
|
|
font-family: 'DINPro';
|
|
src: url('assets/fonts/DINPro-Regular.eot');
|
|
src: url('assets/fonts/DINPro-Regular.woff2') format('woff2'),
|
|
url('assets/fonts/DINPro-Regular.woff') format('woff'),
|
|
url('assets/fonts/DINPro-Regular.ttf') format('truetype'),
|
|
url('assets/fonts/DINPro-Regular.svg#DINPro-Regular') format('svg'),
|
|
url('assets/fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
/*Medium - 500*/
|
|
@font-face {
|
|
font-family: 'DINPro';
|
|
src: url('assets/fonts/DINPro-Medium.eot');
|
|
src: url('assets/fonts/DINPro-Medium.woff2') format('woff2'),
|
|
url('assets/fonts/DINPro-Medium.woff') format('woff'),
|
|
url('assets/fonts/DINPro-Medium.ttf') format('truetype'),
|
|
url('assets/fonts/DINPro-Medium.svg#DINPro-Medium') format('svg'),
|
|
url('assets/fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
/*Bold - 700*/
|
|
@font-face {
|
|
font-family: 'DINPro';
|
|
src: url('assets/fonts/DINPro-Bold.eot');
|
|
src: url('assets/fonts/DINPro-Bold.woff2') format('woff2'),
|
|
url('assets/fonts/DINPro-Bold.woff') format('woff'),
|
|
url('assets/fonts/DINPro-Bold.ttf') format('truetype'),
|
|
url('assets/fonts/DINPro-Bold.svg#DINPro-Bold') format('svg'),
|
|
url('assets/fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Icons';
|
|
src: url('assets/fonts/Icons.eot?-acgfst');
|
|
src: url('assets/fonts/Icons.eot?#iefix-acgfst') format('embedded-opentype'),
|
|
url('assets/fonts/Icons.woff?-acgfst') format('woff'),
|
|
url('assets/fonts/Icons.ttf?-acgfst') format('truetype'),
|
|
url('assets/fonts/Icons.svg?-acgfst#Icons') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
div#header {
|
|
padding-top: 20px;
|
|
background: transparent url(assets/img/logo-tournai.png) no-repeat 100% 20px;
|
|
height: 142px;
|
|
padding: 0;
|
|
}
|
|
|
|
#logo a {
|
|
background: url(assets/img/logo-my-tournai-be.png) no-repeat left bottom;
|
|
display: inline-block;
|
|
height: 132px;
|
|
width: 491px;
|
|
background-size: 100%;
|
|
max-width: 100%;
|
|
color: transparent;
|
|
}
|
|
|
|
div#nav {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
div#nav > ul > li a {
|
|
font-weight: normal;
|
|
padding-bottom: 3px;
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
div#nav > ul > li:last-child {
|
|
float: right;
|
|
border-left: 15px solid white;
|
|
a {
|
|
color: #fff;
|
|
background: #555555;
|
|
font-weight: bold;
|
|
text-transform: none;
|
|
&:hover {
|
|
background: #555555;
|
|
}
|
|
&:after {
|
|
font-family: Icons;
|
|
font-weight: normal;
|
|
content: " \e6df"; /* redo-3 */
|
|
}
|
|
}
|
|
}
|
|
|
|
div#footer-wrapper {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
div#footer {
|
|
padding: 1ex 0;
|
|
background: $footer-background url(assets/img/logo-ville-de-tournai.png) 10px 10px no-repeat;
|
|
padding-left: 250px;
|
|
min-height: 190px;
|
|
a {
|
|
color: white;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
#toplinks {
|
|
box-shadow: none;
|
|
border: none;
|
|
top: 1em;
|
|
left: 0;
|
|
right: auto;
|
|
padding-left: 0;
|
|
padding-top: 0;
|
|
|
|
span.login span.sep,
|
|
a.registration {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#toplinks a.logout {
|
|
margin-left: 1em;
|
|
color: #565656;
|
|
&:before {
|
|
font-family: Icons;
|
|
content: "\e80f "; /* lock-3 */
|
|
}
|
|
}
|
|
|
|
div.dashboard-title h1 {
|
|
@extend %title;
|
|
}
|
|
|
|
$dashboard_items: profil, demandes, paiements, porte-documents;
|
|
|
|
#content div.dashboard-menu ul li {
|
|
font-size: 1.071rem;
|
|
a:hover {
|
|
background: transparent;
|
|
color: $primary-color;
|
|
span {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
@each $dashboard_class in $dashboard_items {
|
|
&.menu-#{$dashboard_class} {
|
|
background: url(assets/menu-#{$dashboard_class}.png) left center no-repeat;
|
|
background-size: auto 100%;
|
|
a {
|
|
padding-left: 40px
|
|
}
|
|
}
|
|
span {
|
|
color: #2b2b2b;
|
|
padding-left: 10px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar {
|
|
border-right: 2px solid #d6d6d6;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
border-left: 2px solid #d6d6d6;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
// Steps
|
|
.wcs-step {
|
|
@include desktop-vertical-steps() {
|
|
border-bottom: 1px solid #b4b4b4 !important;
|
|
}
|
|
&--marker {
|
|
font-weight: bold;
|
|
}
|
|
&:not(.current) & {
|
|
&--marker {
|
|
border: 1px solid #b4b4b4;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#tracking-code {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
div#tracking-code a {
|
|
display: block;
|
|
font-weight: bold;
|
|
border: 2px solid $primary-color;
|
|
}
|
|
|
|
div#rub_service div.submit-button {
|
|
float: right;
|
|
}
|
|
|
|
.form-content--title,
|
|
div#rub_service h2 {
|
|
text-align: left;
|
|
color: $primary-color;
|
|
font-size: 1.857rem;
|
|
font-weight: 500;
|
|
padding-left: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
#evolutions:after {
|
|
border: none;
|
|
background: none;
|
|
border-left: 1px dashed #aaa;
|
|
}
|
|
|
|
div#content #disclose-dataview {
|
|
color: $primary-color;
|
|
border: 2px solid $primary-color;
|
|
padding: 1ex 3ex;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
&:hover {
|
|
background: $primary-color;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
div#evolution-log h2:first-child,
|
|
div#summary h2:first-child {
|
|
color: #000;
|
|
font-weight: normal;
|
|
font-size: 1.429rem;
|
|
}
|
|
|
|
ul#evolutions span.status {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#content ul#evolutions li span.item {
|
|
border-color: transparent !important;
|
|
background: white !important;
|
|
}
|
|
|
|
ul#evolutions li:after {
|
|
display: none;
|
|
}
|
|
|
|
div#content div.cancel-button button,
|
|
div#content div.cancel-button input {
|
|
color: black;
|
|
border-color: black;
|
|
&:hover {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
div#welcome {
|
|
width: 50%;
|
|
float: left;
|
|
div {
|
|
width: 80%;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 1.786rem;
|
|
font-weight: 500;
|
|
color: #414042;
|
|
line-height: 110%;
|
|
}
|
|
p#accueil-text {
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
p.intro {
|
|
margin: 0;
|
|
margin-top: 1ex;
|
|
font-size: 1.286rem;
|
|
font-weight: 100;
|
|
color: #9c9999;
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
}
|
|
a.button {
|
|
@extend %button;
|
|
margin-left: 2em;
|
|
}
|
|
}
|
|
|
|
div#login-form {
|
|
box-sizing: content-box;
|
|
margin-top: 5ex;
|
|
float: right;
|
|
width: 48%;
|
|
border-left: 2px solid #d6d6d6;
|
|
padding-left: 10px;
|
|
h3 {
|
|
margin-top: 0;
|
|
font-size: 1.571rem;
|
|
font-weight: 500;
|
|
}
|
|
p input {
|
|
width: 90%;
|
|
}
|
|
button,
|
|
input[type=submit] {
|
|
font-weight: 600;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
div#login-page input[name=cancel] {
|
|
display: none;
|
|
}
|
|
|
|
form#csam-login img {
|
|
display: none;
|
|
}
|
|
|
|
form#csam-login p {
|
|
font-size: 1.071rem;
|
|
}
|
|
|
|
form#csam-login input {
|
|
background: transparent;
|
|
border: transparent;
|
|
box-shadow: none;
|
|
font-weight: bold;
|
|
padding-left: 0;
|
|
&:hover {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
$category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-certificats, emploi, etat-civil, fiscalite, mobilite, population, vie-citoyenne;
|
|
|
|
#content div.wcsformsofcategorycell {
|
|
position: relative;
|
|
h2:first-child {
|
|
font-size: 1.429rem;
|
|
text-transform: none;
|
|
}
|
|
@each $category in $category-slugs {
|
|
&.#{$category} {
|
|
h2 {
|
|
background: url(img/#{$category}.png) 1ex 50% no-repeat;
|
|
padding-left: 60px;
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
margin: 0 1em;
|
|
a {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
div.description,
|
|
div.intro,
|
|
p {
|
|
display: none;
|
|
background: $primary-color;
|
|
}
|
|
ul {
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
ul > li:last-child > a {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
#content div.wcscurrentdraftscell,
|
|
#content div.wcscurrentformscell {
|
|
h2:first-child {
|
|
margin-top: 10px;
|
|
font-size: 1.429rem;
|
|
text-transform: none;
|
|
background: url(assets/img/picto-demandes-en-cours.png) bottom left no-repeat;
|
|
padding-left: 60px;
|
|
}
|
|
&.terminees h2:first-child {
|
|
background-image: url(assets/img/picto-demandes-terminees.png);
|
|
}
|
|
a {
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
#content div.wcscurrentdraftscell {
|
|
h2:first-child {
|
|
background-image: url(assets/img/picto-brouillons.png);
|
|
}
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#nav {
|
|
margin-top: 10px;
|
|
}
|
|
#logo a {
|
|
height: 100px;
|
|
max-width: calc(100% - 80px);
|
|
}
|
|
#columns-wrapper {
|
|
padding: 0 2ex 0 0;
|
|
}
|
|
div#header {
|
|
height: 100px;
|
|
background-size: 60px;
|
|
background-position: 98% 80%;
|
|
}
|
|
#toplinks {
|
|
left: 1em;
|
|
max-width: none;
|
|
}
|
|
div#nav #nav-button.toggled + ul > li:last-child {
|
|
display: none;
|
|
}
|
|
div#welcome,
|
|
div#login-form {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
div#login-page.methods2 > div.block:first-child,
|
|
div#login-page.methods2 > div.block {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
div.fileinfo a.remove:before {
|
|
color: $primary-color;
|
|
}
|
|
|
|
body.page-bienvenue {
|
|
div#main-content {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
}
|
|
}
|
|
#content div.textcell h2:first-child {
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
}
|
|
#content #columns div.cell.bloc {
|
|
height: 240px;
|
|
background: #F3F1F1;
|
|
margin-left: 10px;
|
|
margin-right: 30px;
|
|
width: 260px;
|
|
position: relative;
|
|
padding: 20px 40px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
h2 {
|
|
text-transform: uppercase;
|
|
font-size: 1.857rem;
|
|
color: #414042;
|
|
}
|
|
p {
|
|
font-size: 80%;
|
|
}
|
|
a {
|
|
box-sizing: content-box;
|
|
font-size: $font-size;
|
|
text-transform: none;
|
|
width: 160px;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 30px;
|
|
background: $primary-color;
|
|
color: white;
|
|
padding: 1ex;
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
height: auto;
|
|
a {
|
|
position: static;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#content div.a2-block.registration {
|
|
width: 80%;
|
|
margin: 2em auto;
|
|
max-width: 80%;
|
|
h2 {
|
|
background: #F3F1F1;
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
}
|
|
form p label {
|
|
margin-right: 2ex;
|
|
}
|
|
form input[type=email] {
|
|
width: 60ex;
|
|
}
|
|
form p,
|
|
div.buttons {
|
|
text-align: center;
|
|
}
|
|
div.buttons {
|
|
input {
|
|
background: $primary-color;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#content div#login-page {
|
|
width: 80%;
|
|
margin: 2em auto;
|
|
max-width: 80%;
|
|
h2 {
|
|
background: #F3F1F1;
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
> div.block {
|
|
margin-right: 0;
|
|
margin-bottom: 3em;
|
|
float: none;
|
|
width: 100%;
|
|
form p label {
|
|
display: inline-block;
|
|
margin-right: 1rem;
|
|
width: 20ex;
|
|
}
|
|
form p input {
|
|
width: 60ex;
|
|
}
|
|
> div {
|
|
padding: 0;
|
|
}
|
|
}
|
|
div.buttons {
|
|
text-align: center;
|
|
a {
|
|
display: block;
|
|
margin-bottom: 1em;
|
|
}
|
|
button {
|
|
margin-right: 0;
|
|
}
|
|
button[name="login-password-submit"] {
|
|
background: $primary-color;
|
|
color: white;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.timetable-widget {
|
|
span.timetable-cell.selectable {
|
|
background: #ffebf6;
|
|
&:hover {
|
|
background: #ffebf6;
|
|
outline: 1px solid $primary-color;
|
|
}
|
|
&.on {
|
|
background: $primary-color;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|