862 lines
15 KiB
SCSS
862 lines
15 KiB
SCSS
$icons: (
|
|
"association": "icon-association.png",
|
|
"citoyennete": "icon-citoyennete.png",
|
|
"collectivite": "icon-collectivite.png",
|
|
"culture": "icon-culture.png",
|
|
"eco": "icon-eco.png",
|
|
"education": "icon-education.png",
|
|
"enfance": "icon-enfance.png",
|
|
"entreprise": "icon-entreprise.png",
|
|
"environnement": "icon-environnement.png",
|
|
"particulier": "icon-particulier.png",
|
|
"sante": "icon-sante.png",
|
|
"securite": "icon-securite.png",
|
|
"sport": "icon-sport.png"
|
|
);
|
|
|
|
$social-icons: (
|
|
"facebook": "facebook.svg",
|
|
"twitter": "twitter.svg",
|
|
"youtube": "youtube.svg",
|
|
"vimeo": "vimeo.svg",
|
|
"instagram": "instagram.svg"
|
|
);
|
|
|
|
$header-height: 350px;
|
|
$header-border-height: 50px;
|
|
$mobile-header-height: 280px;
|
|
|
|
%button {
|
|
@extend %button;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 0.889rem;
|
|
}
|
|
|
|
%cancel-button {
|
|
@extend %cancel-button;
|
|
color: #000;
|
|
border: 1px solid #000;
|
|
background: #fff;
|
|
}
|
|
|
|
%custom-radio-checkbox-widget {
|
|
input + span {
|
|
padding-left: 1.75rem;
|
|
&::before {
|
|
height: 1.1rem;
|
|
width: 1.1rem;
|
|
top: 0;
|
|
}
|
|
&::after {
|
|
left: 4px;
|
|
top: 4px;
|
|
width: calc(1.1rem - 6px);
|
|
height: calc(1.1rem - 6px);
|
|
background: rgba(194, 197, 200, 0.47);
|
|
}
|
|
}
|
|
label + label, li + li {
|
|
margin-top: 0.5rem;
|
|
}
|
|
input {
|
|
&:active + span {
|
|
&::before {
|
|
top: -2px;
|
|
left: -2px;
|
|
border: 3px solid $widget-custom-radio-checkbox-border-color;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.widget div.title {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@mixin after-line($color: #cbd05d) {
|
|
&::after {
|
|
display: block;
|
|
margin-top: 0.5em;
|
|
content: '';
|
|
background: $color;
|
|
width: 2em;
|
|
height: 2px;
|
|
}
|
|
}
|
|
|
|
.with-after-line {
|
|
@include after-line;
|
|
}
|
|
|
|
%header {
|
|
background: $primary-color;
|
|
padding: 1.5em 3em;
|
|
margin-bottom: 2em;
|
|
text-transform: uppercase;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 2em;
|
|
margin-bottom: 1em;
|
|
}
|
|
@include after-line;
|
|
}
|
|
|
|
div#header-wrapper {
|
|
border-top: $header-border-height solid #000;
|
|
height: $header-height;
|
|
background: url('/assets/header:logo') center top no-repeat;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-top: $header-border-height solid #000;
|
|
background-size: auto $mobile-header-height - $header-border-height;
|
|
height: $mobile-header-height;
|
|
}
|
|
}
|
|
|
|
div#header {
|
|
#logo {
|
|
position: absolute;
|
|
top: -$header-border-height;
|
|
left: 20px;
|
|
background: url('img/logo.svg') center center no-repeat;
|
|
background-size: contain;
|
|
height: $header-border-height;
|
|
width: 100px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
top: -$header-border-height;
|
|
left: 0;
|
|
padding-left: 40px;
|
|
height: $header-border-height;
|
|
width: 60px;
|
|
}
|
|
@media screen and (max-width: 350px) {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
#logo a {
|
|
display: block;
|
|
height: $header-border-height;
|
|
width: 335px;
|
|
margin-left: 20px;
|
|
background: url('img/header-text.png') center right no-repeat;
|
|
text-indent: -9999px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
height: $header-border-height;
|
|
width: 250px;
|
|
background-size: contain;
|
|
}
|
|
@media screen and (max-width: 350px) {
|
|
width: 50px;
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#toplinks {
|
|
top: -$header-border-height;
|
|
background: transparent;
|
|
border: 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
display: none;
|
|
}
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
div#nav-wrapper {
|
|
margin-top: -2.5em;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: $header-border-height;
|
|
z-index: 1;
|
|
}
|
|
button {
|
|
position: absolute;
|
|
top: -$header-border-height;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
div.pwa-navigation ul li a {
|
|
line-height: 1.75em;
|
|
}
|
|
|
|
div.gru-nav {
|
|
.gru-nav-button {
|
|
border-width: 10px;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
+ ul {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
ul a {
|
|
position: relative;
|
|
}
|
|
> ul {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 1em 0;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
}
|
|
> li {
|
|
&:first-child,
|
|
&.selected, &.selected + li,
|
|
&:hover, &:hover + li {
|
|
> a::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&:hover, &.selected {
|
|
background: $nav-active-color;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background: transparent;
|
|
}
|
|
}
|
|
flex-grow: 1;
|
|
> a {
|
|
margin: 0;
|
|
padding: 1.25em 2em;
|
|
line-height: 1.5em;
|
|
width: 100%;
|
|
text-align: center;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 1em;
|
|
text-align: left;
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10px;
|
|
content: '';
|
|
width: 1px;
|
|
height: calc(100% - 20px);
|
|
background: #c2c5c8;
|
|
opacity: 1;
|
|
transition: opacity 0.5s;
|
|
}
|
|
+ ul {
|
|
li {
|
|
&:hover {
|
|
background: #cbd05d;
|
|
> a {
|
|
background: #cbd05d;
|
|
color: #000;
|
|
}
|
|
}
|
|
> a {
|
|
font-weight: normal;
|
|
color: #f4f7fa;
|
|
font-size: 85%;
|
|
padding: 0.75em 3em;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0.5em 3em;
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
left: 3.5em;
|
|
content: '\f054'; /* chevron-right */
|
|
font-family: FontAwesome;
|
|
font-size: 60%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#side, div#sidebar {
|
|
box-shadow: 3px 3px 20px 0px #dedede;
|
|
}
|
|
|
|
div#tracking-code {
|
|
h3 {
|
|
background: #fff;
|
|
font-weight: bold;
|
|
}
|
|
a {
|
|
padding: 0 1rem;
|
|
font-size: 110%;
|
|
&::after {
|
|
margin-top: 5px;
|
|
content: '';
|
|
display: block;
|
|
width: 60px;
|
|
height: 2px;
|
|
background: #cbd05d;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wcs-step {
|
|
padding-top: $wcs-steps-spacing;
|
|
}
|
|
|
|
.wcs-steps--list {
|
|
background: $primary-color;
|
|
}
|
|
|
|
.wcs-step--marker {
|
|
border-right: 1px solid #c2c5c8;
|
|
}
|
|
|
|
.wcs-step.current {
|
|
background: #fff;
|
|
}
|
|
|
|
.gru-content {
|
|
div.cell {
|
|
&.demarche, &.rubriques-internes {
|
|
background: #d1e8f6;
|
|
h2:first-child, ul {
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
h2:first-child {
|
|
text-align: center;
|
|
border: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
}
|
|
}
|
|
&.demarche h2:first-child {
|
|
font-size: 1rem;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
}
|
|
div.cell, .block {
|
|
margin-bottom: 2em;
|
|
}
|
|
div.a2-block {
|
|
h2 {
|
|
@extend %header;
|
|
}
|
|
}
|
|
div.wcsformsofcategorycell, div.linklistcell {
|
|
h2:first-child {
|
|
text-transform: uppercase;
|
|
background: transparent;
|
|
border: 1px solid #c2c5c8;
|
|
padding: 1em;
|
|
padding-left: 3em;
|
|
&::after {
|
|
color: $purple;
|
|
}
|
|
}
|
|
> div {
|
|
position: relative;
|
|
}
|
|
picture {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
cursor: pointer;
|
|
img {
|
|
width: 3em;
|
|
}
|
|
}
|
|
.add-more-items--button {
|
|
font-weight: bold;
|
|
color: $purple;
|
|
}
|
|
&.rubriques-internes {
|
|
h2:first-child + div.links-list {
|
|
li {
|
|
border: 0;
|
|
}
|
|
}
|
|
&.has-asset-picture h2:first-child {
|
|
padding-left: 1rem;
|
|
}
|
|
ul {
|
|
&:first-child {
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid $title-color;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
}
|
|
.links-list li a {
|
|
padding: 0.5rem 0;
|
|
&:hover {
|
|
background: transparent;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.add-more-items--button {
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#sidebar {
|
|
order: 1
|
|
}
|
|
}
|
|
}
|
|
|
|
div#footer {
|
|
font-size: 80%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 2em;
|
|
}
|
|
div.links-list {
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 0 0.5em;
|
|
}
|
|
li {
|
|
border: 0;
|
|
display: flex;
|
|
align-items: baseline;
|
|
&::before {
|
|
content: '\f054'; /* chevron-right */
|
|
font-family: FontAwesome;
|
|
font-size: 70%;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
a {
|
|
color: #000;
|
|
padding: 0.1rem;
|
|
&:hover {
|
|
background: transparent;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
div.cell.social-links ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
@media screen and ($max-mobile-viewport) {
|
|
margin: 2em 0;
|
|
}
|
|
li {
|
|
list-style-type: none;
|
|
&:not(:first-child) a {
|
|
border-left: 1px solid #000;
|
|
}
|
|
@each $name, $img in $social-icons {
|
|
a.icon-#{$name} {
|
|
width: 2.5em;
|
|
display: block;
|
|
overflow: hidden;
|
|
color: transparent;
|
|
padding: 0 15px;
|
|
background: url('img/#{$img}') center center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.searchcell {
|
|
position: relative;
|
|
form {
|
|
padding: 0;
|
|
}
|
|
input.combo-search-input {
|
|
padding-right: 50px;
|
|
line-height: 2em;
|
|
margin-right: 0;
|
|
font-weight: bold;
|
|
padding: 0.7em;
|
|
border-bottom: 2px solid #d2d2d2;
|
|
&:focus {
|
|
border-bottom: 2px solid #d2d2d2;
|
|
}
|
|
}
|
|
button, button:hover {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
margin: auto 0;
|
|
height: 50px;
|
|
width: 60px;
|
|
padding: 0;
|
|
border-left: 1px solid #c2c5c8;
|
|
background-image: url('img/loupe.png');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: 35%;
|
|
overflow: hidden;
|
|
color: transparent;
|
|
text-overflow: hide;
|
|
}
|
|
}
|
|
|
|
div#columns > div.search-cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
> div {
|
|
width: 75%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* general headers styles */
|
|
|
|
h1, h2, h3, h4 {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.form-content--title,
|
|
h1, div#rub_service h2 {
|
|
font-size: 1.667rem;
|
|
}
|
|
|
|
.form-content--title,
|
|
div#rub_service h2 {
|
|
@include after-line();
|
|
}
|
|
|
|
h2, div#rub_service h3 {
|
|
font-size: 1.444rem;
|
|
color: $purple;
|
|
}
|
|
|
|
h3, div#rub_service h4 {
|
|
font-size: 1.222rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.056rem;
|
|
}
|
|
|
|
input, select {
|
|
line-height: 2.25em;
|
|
}
|
|
|
|
.a2-block {
|
|
form p {
|
|
margin-left: 0;
|
|
}
|
|
h2 {
|
|
@extend %header;
|
|
}
|
|
}
|
|
|
|
h1.login-page-title, div#registration-blocks h1 {
|
|
@extend %header;
|
|
}
|
|
|
|
div#login-page a {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div#registration-blocks {
|
|
h2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div#sidebar {
|
|
h1, h2, h3 {
|
|
@include after-line($purple);
|
|
}
|
|
h2 {
|
|
margin: 0.5em;
|
|
}
|
|
}
|
|
|
|
div.linkcell.homepage-link {
|
|
border: 1px solid #d2d2d2;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 90%;
|
|
a {
|
|
padding-top: 5rem;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding-top: 1rem;
|
|
padding-left: 5rem;
|
|
}
|
|
@include after-line(#000);
|
|
}
|
|
&[class*=" icon-"] {
|
|
a {
|
|
background-position: 1rem 1rem;
|
|
background-size: auto 2.5rem;
|
|
display: block;
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-position: 1rem center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.linkcell.file-link a, a.file-link {
|
|
padding: 0.5em 0 0.5em 1.5em;
|
|
background: url('img/file.png') center left no-repeat;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.linkcell.external-link a, a.external-link {
|
|
text-decoration: underline;
|
|
position: relative;
|
|
margin-right: 1.5em;
|
|
line-height: 1;
|
|
&::after {
|
|
position: absolute;
|
|
content: '\f08e'; /* external-link */
|
|
font-family: FontAwesome;
|
|
margin-left: 5px;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.linkcell.external-link a {
|
|
padding: 0;
|
|
&::after {
|
|
position: relative;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.underline-text {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#registration-blocks #frontend-registration-fc,
|
|
#login-page .block.block-fc {
|
|
border-left: 0;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@each $name, $file in $icons {
|
|
div.linkcell.icon-#{$name} a {
|
|
background-image: url(icons/#{$file});
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
/* customize json contact service cell */
|
|
div.cell.contact-service {
|
|
background: #f3f7fa;
|
|
}
|
|
|
|
/* customize json contact commune cell */
|
|
div.cell.contact-commune, div.cell.contact-commune-rgpd,
|
|
div.coordonnees-generales {
|
|
> div > div {
|
|
padding-top: 0.4em;
|
|
margin-top: 10px;
|
|
background:#f4f7fa;
|
|
}
|
|
h3.service-title {
|
|
margin-top: 0px;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
div.cell.contact-service, div.cell.contact-commune,
|
|
div.cell.contact-commune-rgpd, div.coordonnees-generales {
|
|
h3.service-title {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
padding: 2em 0 2em 260px;
|
|
background-repeat: no-repeat;
|
|
background-position: center left;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 120px 0 0 0;
|
|
background-position: top center;
|
|
}
|
|
}
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
div.service-details, div.commune-details {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
> div {
|
|
width: 50%;
|
|
padding: 0 20px;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: 100%;
|
|
}
|
|
&:first-child {
|
|
border-right: 1px solid gray;
|
|
@media screen and ($max-mobile-viewport) {
|
|
border-right: 0;
|
|
border-bottom: 1px solid gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.three-cols-header {
|
|
margin-bottom: 2em;
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0 0.7em;
|
|
}
|
|
}
|
|
|
|
.three-cols-column {
|
|
width: 33%;
|
|
@media screen and ($max-mobile-viewport) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
div.linkcell .internal-page-link {
|
|
padding: 220px 1rem 0.5rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
background-size: auto 195px;
|
|
box-shadow: 0px 1px 3px #aaa;
|
|
h2 {
|
|
&:first-child {
|
|
font-size: 1rem;
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
a {
|
|
color: $purple;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
&--description {
|
|
margin-left: 0.5em;
|
|
margin-right: 0.5em;
|
|
}
|
|
&--arrow {
|
|
background: $purple;
|
|
width: 1.75em;
|
|
height: 1.75rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&::before {
|
|
content: '\f054'; /* fa-chevron-right */
|
|
font-family: FontAwesome;
|
|
color: white;
|
|
}
|
|
&-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
&:hover {
|
|
background: white;
|
|
border: 1px solid $purple;
|
|
text-decoration: none;
|
|
&::before {
|
|
color: $purple;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.demarche-link {
|
|
padding-bottom: 1.5rem;
|
|
&--description {
|
|
margin: 1.5rem;
|
|
}
|
|
&--arrow {
|
|
background: $nav-background;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px 3px #aaa;
|
|
display: flex;
|
|
@media ($max-mobile-viewport) {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
&::after {
|
|
content: '\f054'; /* fa-chevron-right */
|
|
font-family: FontAwesome;
|
|
background: $green;
|
|
color: black;
|
|
margin-left: 1rem;
|
|
height: 1.25em;
|
|
padding: 2px 5px;
|
|
}
|
|
&:hover::after {
|
|
background: white;
|
|
}
|
|
}
|
|
&--arrow-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Authentic pages */
|
|
|
|
#registration-blocks .a2-block:not(:first-child), #login-page .block:not(:first-child) {
|
|
&::after {
|
|
color: #868686;
|
|
background-image:
|
|
linear-gradient(#ececec, #ececec),
|
|
linear-gradient(#ececec, #ececec)
|
|
}
|
|
}
|
|
|
|
#dordogne-connect-logo {
|
|
background: url('img/dordogne-connect.svg') center no-repeat;
|
|
background-size: contain;
|
|
height: 10rem;
|
|
margin: 1rem;
|
|
display: block;
|
|
}
|
|
|
|
h3.login-password-title {
|
|
margin-top: 0;
|
|
color: #d01971;
|
|
}
|
|
|
|
.authentic-page {
|
|
#nav-wrapper {
|
|
display: none;
|
|
}
|
|
div#header-wrapper {
|
|
height: 0;
|
|
border-color: #2e3639;
|
|
}
|
|
#footer-wrapper {
|
|
background: #2e3639;
|
|
color: white;
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
input, button {
|
|
border-radius: 1rem;
|
|
}
|
|
input {
|
|
background: #ececec;
|
|
}
|
|
button {
|
|
background: #24244e;
|
|
}
|
|
a {
|
|
color: #24244e;
|
|
}
|
|
}
|