701 lines
12 KiB
SCSS
701 lines
12 KiB
SCSS
div#header-wrapper {
|
|
background-color: $primary-color;
|
|
|
|
div#header {
|
|
padding-top: 20px;
|
|
height: 48px;
|
|
padding: 0;
|
|
|
|
div#toplinks {
|
|
border-radius: 0;
|
|
padding: 0.2em 1.4em 0.2em 2em;
|
|
box-shadow: none;
|
|
border: none;
|
|
|
|
& a:hover {
|
|
color: #231f20;
|
|
}
|
|
}
|
|
div#toplinks:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 0;
|
|
border-top: 15px solid transparent;
|
|
border-right: 15px solid black;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
div#toplinks:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: $primary-color;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
div#header-post {
|
|
background: white;
|
|
|
|
div.content{
|
|
max-width: $width;
|
|
margin: 0 auto;
|
|
|
|
#logo {
|
|
float: right;
|
|
margin: 10px 1em 0 0;
|
|
a {
|
|
background: url(img/logo-montlouis-sur-loire.png) no-repeat;
|
|
background-size: contain;
|
|
display: inline-block;
|
|
font-size: 0;
|
|
padding: 30px 65px;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.polygone-wrapper {
|
|
background-color: $primary-color;
|
|
max-width: $width;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
|
|
div.polygone {
|
|
height: 45px;
|
|
background: url('img/polygone-blanc.svg') no-repeat center top transparent;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div#nav-wrapper {
|
|
background: transparent;
|
|
|
|
div#nav {
|
|
box-sizing: content-box;
|
|
margin-top: -55px;
|
|
max-width: calc(#{$width} - 160px);
|
|
padding-right: 165px;
|
|
padding-left: 10px;
|
|
|
|
> ul {
|
|
margin: 0;
|
|
overflow: visible;
|
|
|
|
> li {
|
|
padding: 0 20px;
|
|
line-height: 3em;
|
|
transition: .5s;
|
|
|
|
& a {
|
|
font-family: Khand, sans-serif;
|
|
padding: 0;
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
> a {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
|
|
> span::before {
|
|
content: '';
|
|
display: block;
|
|
position: relative;
|
|
height: 7px;
|
|
background: #231f20;
|
|
top: 45px;
|
|
margin: 0 auto;
|
|
transition: all 0.35s;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
background: #231f20;
|
|
padding: 20px;
|
|
|
|
> li {
|
|
border-bottom: 1px solid #646464;
|
|
|
|
a {
|
|
padding: 5px 20px;
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
transition: .25s;
|
|
}
|
|
}
|
|
|
|
> li:first-child {
|
|
border-top: 1px solid #646464;
|
|
}
|
|
|
|
> li:hover a {
|
|
color: white;
|
|
background: #ef412a;
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
> li.selected > a > span::before, > li:hover > a > span::before {
|
|
width: 100%;
|
|
}
|
|
> li:first-child {
|
|
padding-left: 0;
|
|
}
|
|
> li:last-child {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#nav-post {
|
|
margin: 30px 0 20px;
|
|
height: 12px;
|
|
background: url(img/HachureRepeat.gif) repeat transparent;
|
|
}
|
|
}
|
|
|
|
div#page {
|
|
div#main-content-wrapper {
|
|
flex: unset;
|
|
max-width: unset;
|
|
|
|
div#main-content {
|
|
|
|
div#content {
|
|
max-width: $width;
|
|
margin: 10px auto 50px;
|
|
width: 100%;
|
|
|
|
div#sidebar {
|
|
border-right: 2px solid #d6d6d6;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.cell.wcsformsofcategorycell {
|
|
margin-bottom: 30px;
|
|
}
|
|
.cell.wcsformsofcategorycell > div {
|
|
border: $custom-categorycell-border;
|
|
}
|
|
.cell.wcsformsofcategorycell > div > h2 {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
background: $primary-color;
|
|
color: white;
|
|
padding: 8px 20px 8px 40px;
|
|
}
|
|
.cell.wcsformsofcategorycell > div > h2:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 0;
|
|
border-top: 24px solid white;
|
|
border-right: 24px solid black;
|
|
top: #{extract-width($custom-categorycell-border) * -1};
|
|
left: #{extract-width($custom-categorycell-border) * -1};
|
|
z-index: 1;
|
|
}
|
|
.cell.wcsformsofcategorycell > div > h2:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: -1px;
|
|
top: -1px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: $primary-color;
|
|
z-index: 0;
|
|
}
|
|
.cell.wcsformsofcategorycell > div > div > ul {
|
|
padding: 10px 10px 10px 20px;
|
|
list-style-type: disc;
|
|
list-style-position: inside;
|
|
list-style-image: url('img/list-disc-orange.png');
|
|
|
|
> li {
|
|
padding: 7px 0;
|
|
|
|
> a {
|
|
display: inline;
|
|
border-bottom: none;
|
|
color: #231f20;
|
|
padding: 0;
|
|
}
|
|
}
|
|
> li:hover a {
|
|
color: $primary-color;
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#content-post {
|
|
background: url(img/HachureRepeat.gif) repeat white;
|
|
}
|
|
|
|
.a-votre-service {
|
|
background: url(img/HachureRepeat.gif) repeat white;
|
|
max-width: $width;
|
|
margin: auto;
|
|
width: 100%;
|
|
|
|
> div {
|
|
> h2 {
|
|
margin: 0;
|
|
padding: 0 10px 0 0;
|
|
text-transform: uppercase;
|
|
font-family: "Montserrat",sans-serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
border: 0;
|
|
color: #08b89d;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
text-align: right;
|
|
}
|
|
|
|
> div > ul {
|
|
list-style: none;
|
|
|
|
> li {
|
|
display: block;
|
|
float: left;
|
|
width: 245px;
|
|
height: 131px;
|
|
margin-right: 30px;
|
|
margin-bottom: 30px;
|
|
background: #fff;
|
|
position: relative;
|
|
transition: all 0.45s;
|
|
|
|
> a {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
|
|
> svg {
|
|
width: 47px;
|
|
height: 59px;
|
|
top: 14px;
|
|
position: relative;
|
|
|
|
.ast0, .ast1 {
|
|
transition: all 0.45s;
|
|
}
|
|
.ast1 {
|
|
fill: $primary-color;
|
|
}
|
|
.ast0 {
|
|
fill: #646464;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
bottom: 19px;
|
|
font-family: "Khand",sans-serif;
|
|
font-size: 1.125rem;
|
|
color: #231f20;
|
|
transition: all 0.45s;
|
|
}
|
|
}
|
|
}
|
|
|
|
> li:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: url('img/HachureRepeat.gif') -5px repeat;
|
|
z-index: 0;
|
|
}
|
|
|
|
> li:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 0;
|
|
border-top: 30px solid transparent;
|
|
border-right: 30px solid #08b89d;
|
|
top: 0;
|
|
left: 0;
|
|
transition: all 0.35s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
> li:hover {
|
|
background: #231f20;
|
|
|
|
> a {
|
|
> svg {
|
|
.ast1 {
|
|
fill: white;
|
|
}
|
|
.ast0 {
|
|
fill: #08b89d;
|
|
}
|
|
}
|
|
> span {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.clear {
|
|
display: block;
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
background: url(img/HachureRepeat.gif) repeat white;
|
|
padding-top: 12px;
|
|
|
|
div#footer-pre {
|
|
background: white;
|
|
|
|
div.polygone-wrapper {
|
|
background: url(img/HachureRepeat.gif) repeat;
|
|
}
|
|
}
|
|
|
|
div#footer-wrapper {
|
|
background: white;
|
|
|
|
div#footer {
|
|
> div.logo {
|
|
background: url(img/logo.svg) no-repeat;
|
|
background-size: contain;
|
|
display: inline-block;
|
|
font-size: 0;
|
|
width: 270px;
|
|
height: 121px;
|
|
position: relative;
|
|
float: left;
|
|
margin-right: 90px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
> div.content {
|
|
float: left;
|
|
margin-left: 10px;
|
|
|
|
.contact-footer {
|
|
display: block;
|
|
width: 300px;
|
|
height: 230px;
|
|
float: left;
|
|
margin-right: 50px;
|
|
position: relative;
|
|
|
|
p.titre-footer {
|
|
display: block;
|
|
font-family: "Khand",sans-serif;
|
|
font-size: 1.5rem;
|
|
color: #09b89d;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
margin: 30px 0 27px;
|
|
}
|
|
p.texte-footer {
|
|
display: block;
|
|
line-height: 20px;
|
|
}
|
|
a.btn-contact {
|
|
display: block;
|
|
position: relative;
|
|
bottom: -11px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
padding-left: 20px;
|
|
transition: all 0.35s;
|
|
color: #09b89d;
|
|
|
|
span.picto-link {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #09b89d;
|
|
border-radius: 50px;
|
|
z-index: 0;
|
|
transition: all 0.35s;
|
|
|
|
svg {
|
|
width: 15px;
|
|
height: 10px;
|
|
fill: #fff;
|
|
position: relative;
|
|
left: 7px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
span.txt-label {
|
|
position: relative;
|
|
margin-left: 17px;
|
|
transition: all 0.35s;
|
|
}
|
|
}
|
|
a.btn-contact:hover {
|
|
color: #fff;
|
|
|
|
span.picto-link {
|
|
width: 145px;
|
|
}
|
|
span.txt-label {
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.horaires-footer {
|
|
display: block;
|
|
width: 370px;
|
|
height: 230px;
|
|
float: left;
|
|
position: relative;
|
|
|
|
p.titre-footer {
|
|
display: block;
|
|
font-family: "Khand",sans-serif;
|
|
font-size: 1.5rem;
|
|
color: #09b89d;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
margin: 30px 0 27px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* customization mobiles/petits écrans */
|
|
@media screen and ($max-mobile-viewport) {
|
|
div#header-wrapper div#header div#toplinks {
|
|
right: 20px;
|
|
}
|
|
|
|
div#nav-wrapper {
|
|
margin-top: -50px;
|
|
|
|
div#nav {
|
|
margin-top: 0;
|
|
padding-right: 20px;
|
|
|
|
button#nav-button {
|
|
background-color: $primary-color;
|
|
}
|
|
|
|
> ul {
|
|
margin-left: 10px;
|
|
overflow: hidden;
|
|
border: none;
|
|
|
|
> li, li.selected {
|
|
background-color: $primary-color;
|
|
color: white;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
a {
|
|
color: white;
|
|
|
|
> span::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
> ul {
|
|
background: none;
|
|
|
|
> li {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
> li:first-child {
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
> li:hover {
|
|
> a {
|
|
background-color: #66e6d2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> li.selected {
|
|
> a {
|
|
background-color: #099e86;
|
|
}
|
|
}
|
|
> li:hover {
|
|
> a {
|
|
background-color: #66e6d2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div#nav.toggled {
|
|
> ul {
|
|
}
|
|
}
|
|
}
|
|
|
|
div#page div#main-content-wrapper div#main-content {
|
|
div#content-post > div.cell.textcell > div > h2 {
|
|
margin-right: 10px;
|
|
}
|
|
div#content div#sidebar {
|
|
margin-bottom: 20px;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
footer div#footer-wrapper div#footer {
|
|
> div.logo {
|
|
margin-right: 30px;
|
|
}
|
|
> div.content {
|
|
.contact-footer {
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
border-left: 2px solid #d6d6d6;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
// Steps
|
|
.wcs-step {
|
|
&--label {
|
|
letter-spacing: 1px;
|
|
}
|
|
&:not(.current) & {
|
|
&--marker {
|
|
border: 1px solid;
|
|
}
|
|
}
|
|
@include desktop-vertical-steps() {
|
|
border-bottom: 1px solid #ccc !important;
|
|
}
|
|
}
|
|
|
|
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.625rem;
|
|
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.25rem;
|
|
}
|
|
|
|
ul#evolutions span.status {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#content ul#evolutions li span.item {
|
|
border-color: white !important;
|
|
background: white !important;
|
|
}
|
|
|
|
#content ul#evolutions li span.item::before {
|
|
content: "\f111";
|
|
font-family: FontAwesome;
|
|
color: #aaa;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|