475 lines
8.9 KiB
SCSS
475 lines
8.9 KiB
SCSS
@import '../includes/font-din';
|
|
|
|
#header {
|
|
height: 150px;
|
|
background-color: #fff;
|
|
background-image: url('img/header-left.png'), url('img/logo.png');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center, 6em center;
|
|
background-size: 5% auto, 55% auto;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-image: url('img/logo.png');
|
|
background-position: 3em center;
|
|
background-size: 75% auto;
|
|
}
|
|
h1#logo {
|
|
text-indent: -999999px;
|
|
}
|
|
}
|
|
|
|
#toplinks {
|
|
background: $primary-color;
|
|
border-radius: 0 0 0 1em;
|
|
right: 0;
|
|
padding: 1ex 2em 1ex 2em;
|
|
a {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
div#nav {
|
|
margin: 0 auto;
|
|
> ul {
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> li {
|
|
> a {
|
|
font-size: 1.1em;
|
|
line-height: 3.5em;
|
|
}
|
|
&.selected, &:hover {
|
|
> a {
|
|
background: $nav-item-hover-background;
|
|
border-bottom: 5px solid $primary-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
&.selected {
|
|
> a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
&.menu-contact {
|
|
border-top: 1px solid $nav-background;
|
|
background: #fff;
|
|
width: calc(#{$sidebar-width} - 20px);
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent;
|
|
width: auto;
|
|
}
|
|
&.selected a {
|
|
background: $nav-item-hover-background;;
|
|
border-bottom: 5px solid $primary-color;
|
|
}
|
|
a {
|
|
width: 100%;
|
|
color: $primary-color;
|
|
border-bottom: 5px solid #fff;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border: 0
|
|
}
|
|
&:hover {
|
|
border-bottom: 5px solid $primary-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border: 0;
|
|
}
|
|
}
|
|
span::after {
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
content: ' ';
|
|
display: inline-block;
|
|
background: url('img/contact.png') no-repeat;
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 0 2ex;
|
|
background-size: contain;
|
|
background-position: 0 100%;
|
|
}
|
|
}
|
|
}
|
|
&.selected > a {
|
|
font-weight: bold;
|
|
}
|
|
a {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
#columns {
|
|
margin-top: 2ex;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
div.menucell.navigation {
|
|
li {
|
|
&.selected {
|
|
ul {
|
|
display: block;
|
|
}
|
|
> a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
ul {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 2ex;
|
|
.carrousel-wrapper {
|
|
display: flex;
|
|
@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
flex: 0;
|
|
}
|
|
div.menu {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 25%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
a {
|
|
text-align: center;
|
|
@media screen and ($max-mobile-viewport) {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
ul {
|
|
border-right: 1px solid #000;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border: 0;
|
|
}
|
|
li {
|
|
margin: 10px 0;
|
|
&.selected {
|
|
border-right: 3px solid $primary-color;
|
|
margin: 10px -2px;
|
|
a {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
#sidebar {
|
|
div.textcell.espace-personnel {
|
|
margin-bottom: 0;
|
|
h1 {
|
|
padding: 0.5ex 1ex;
|
|
background: $primary-color;
|
|
color: #fff;
|
|
text-align: right;
|
|
margin: 0;
|
|
font-size: 1.5em;
|
|
&::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 65%;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
}
|
|
}
|
|
div.notificationscell {
|
|
margin-top: 0.5em;
|
|
h2 {
|
|
background: transparent;
|
|
color: $primary-color;
|
|
border: 2px solid $nav-background;
|
|
border-radius: 1em 0 0 1em;
|
|
}
|
|
}
|
|
div.lien-agents {
|
|
li a {
|
|
background: #000000;
|
|
color: #FFFFFF;
|
|
border-radius: 1em 0 0 1em;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
div.mes-demandes {
|
|
background: $nav-background;
|
|
border-radius: 0 0 0 1em;
|
|
margin: 0;
|
|
text-align: right;
|
|
&:hover {
|
|
background: $nav-submenu-background;
|
|
color: $primary-color;
|
|
a {
|
|
color: $nav-item-selected-color;
|
|
}
|
|
}
|
|
a {
|
|
color: #000;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
div#espace-personnel {
|
|
background: $primary-color url('img/moncompte.png') no-repeat;
|
|
background-position: 250% 50%;
|
|
background-size: contain;
|
|
color: #fff;
|
|
margin-bottom: 5px;
|
|
padding: 0 0.5em 0.5em 0.5em;
|
|
div.description {
|
|
color: #fff;
|
|
display: block;
|
|
border: 0;
|
|
}
|
|
ul > li {
|
|
text-align: right;
|
|
> a {
|
|
color: #fff;
|
|
padding-bottom: 0;
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
div.searchcell {
|
|
position: absolute;
|
|
top: -7.5em;
|
|
right: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
z-index: 10;
|
|
width: 15em;
|
|
form.combo-search-form {
|
|
padding: 0;
|
|
&:before {
|
|
position: absolute;
|
|
content: "\f002"; /* search icon */
|
|
font-family: FontAwesome;
|
|
display: block;
|
|
width: 2em;
|
|
height: 2em;
|
|
top: 0.25em;
|
|
padding-left: 5px;
|
|
font-size: 1.5em;
|
|
color: $primary-color;
|
|
}
|
|
input {
|
|
border: 1px solid $primary-color;
|
|
padding-left: 3.5ex;
|
|
width: 25ex;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
button {
|
|
display: none;
|
|
}
|
|
div.combo-search-results {
|
|
background: $nav-item-hover-background;
|
|
a {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
div#gauche {
|
|
width: 27.5%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
+ div#rub_service {
|
|
width: 70.5%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// STEPS
|
|
.wcs-steps {
|
|
@include desktop-vertical-steps() {
|
|
clear: both;
|
|
margin-top: $wcs-steps-spacing*3;
|
|
}
|
|
|
|
}
|
|
.wcs-step {
|
|
&--marker {
|
|
font-weight: bold;
|
|
}
|
|
@include desktop-vertical-steps() {
|
|
flex-direction: row-reverse;
|
|
padding-bottom: $wcs-steps-spacing*2;
|
|
&--label {
|
|
margin-right: $wcs-steps-spacing;
|
|
text-align: right;
|
|
font-size: .8em;
|
|
}
|
|
&::after {
|
|
right: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#tracking-code {
|
|
h3 {
|
|
font-size: 110%;
|
|
display: inline;
|
|
&::after {
|
|
content: ':';
|
|
padding: 0 0 0 1ex;
|
|
}
|
|
}
|
|
a {
|
|
font-size: 110%;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
div#liens-divers {
|
|
max-width: $width;
|
|
margin: 0 auto;
|
|
div.description {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 0.75em;
|
|
border: 0;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
@media screen and ($max-mobile-viewport) {
|
|
justify-content: space-around;
|
|
}
|
|
li {
|
|
margin: 1ex 0.5ex;
|
|
width: 10em;
|
|
@each $category in (associations, base-nautique, demenagement, etat-civil, famille, mediatheque) {
|
|
&.menu-#{$category} {
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-color: $primary-color;
|
|
box-shadow: 0px 0px 10px #888888;
|
|
div.description {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
a {
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-color: $primary-color;
|
|
color: #FFFFFF;
|
|
}
|
|
background-image: url('img/#{$category}.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center 0.5em;
|
|
background-size: 5em;
|
|
width: 10em;
|
|
padding: 6em 0 0 0;
|
|
&:hover {
|
|
background-image: url('img/#{$category}-hover.png');
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-color: $nav-item-hover-background;
|
|
+ div.description {
|
|
background-color: $nav-item-hover-background;
|
|
}
|
|
}
|
|
background-repeat: no-repeat;
|
|
background-size: 5em;
|
|
background-position: center 0.5em;
|
|
color: $primary-color;
|
|
+ div.description {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
padding-bottom: 0;
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.wcsformsofcategorycell {
|
|
h2:first-child {
|
|
background: transparent;
|
|
color: $primary-color;
|
|
}
|
|
a {
|
|
background: $primary-color;
|
|
color: #ffffff;
|
|
&::before {
|
|
content: '\f061'; /* arrow-right */
|
|
font-family: FontAwesome;
|
|
width: 1em;
|
|
margin-right: 0.5em;
|
|
}
|
|
&:hover {
|
|
color: $primary-color;
|
|
background: $nav-item-hover-background;
|
|
}
|
|
}
|
|
}
|
|
div.cell {
|
|
p {
|
|
line-height: 1.5em;
|
|
}
|
|
}
|
|
div#a2-profile {
|
|
div.field {
|
|
margin: 0 0 1em 0;
|
|
span.label {
|
|
display: inline;
|
|
font-weight: bold;
|
|
font-size: 100%;
|
|
}
|
|
div.value {
|
|
display: inline;
|
|
&::before {
|
|
content: ':';
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
input, textarea, select {
|
|
border: 1px solid $primary-color;
|
|
}
|
|
span.helptext, div.hint {
|
|
color: #767676;
|
|
}
|
|
}
|
|
|
|
div.cell.sticky > div {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: $primary-color;
|
|
border: 1px solid $nav-background;
|
|
font-size: 85%;
|
|
a {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|