216 lines
3.7 KiB
SCSS
216 lines
3.7 KiB
SCSS
%cancel-button {
|
|
@extend %button;
|
|
background-color: white;
|
|
border-color: $cyan;
|
|
color: $cyan;
|
|
&:hover {
|
|
background-color: white;
|
|
border-color: $primary-color;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
// HEADER
|
|
#header-wrapper {
|
|
background: url(img/menu_top_fond.png) no-repeat top right;
|
|
background-size: auto 100%;
|
|
border-bottom: 3px solid $primary-color;
|
|
}
|
|
|
|
#logo {
|
|
padding: 15px;
|
|
padding-top: 30px;
|
|
a {
|
|
color: $cyan;
|
|
$logo-height: 100px;
|
|
$logo-width: $logo-height * 1.2;
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 1.125rem;
|
|
padding-top: $logo-height + 5;
|
|
background: url(img/region-reunion.png) no-repeat;
|
|
background-size: auto $logo-height;
|
|
|
|
@media ($min-desktop-viewport) {
|
|
padding-left: $logo-width + 20;
|
|
padding-top: $logo-height - 20px;
|
|
font-size: 1.5rem;
|
|
line-height: 20px;
|
|
background-size: contain;
|
|
}
|
|
|
|
&::before {
|
|
content: "#";
|
|
color: $primary-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
#toplinks {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
// NAV
|
|
.gru-nav-wrapper {
|
|
@media ($max-mobile-viewport) {
|
|
margin-top: -$nav-menu-side - 15px;
|
|
}
|
|
}
|
|
div.gru-nav > ul {
|
|
font-size: .85em;
|
|
margin: 0;
|
|
> li a {
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
// submenu
|
|
ul a {
|
|
&:hover {
|
|
background-color: white;
|
|
color: $font-color;
|
|
}
|
|
}
|
|
}
|
|
// burger btn
|
|
div.gru-nav .gru-nav-button {
|
|
border: 1px solid $primary-color;
|
|
&.toggled {
|
|
background-color: $primary-color;
|
|
.icon-bar {
|
|
border-color: white;
|
|
}
|
|
}
|
|
}
|
|
body.has-picture .site-nav::after {
|
|
position: static;
|
|
}
|
|
|
|
// PWA nav
|
|
.pwa-navigation {
|
|
background-color: transparent;
|
|
text-transform: uppercase;
|
|
div > ul li {
|
|
border: 1px solid transparent;
|
|
background-color: $nav-mobile-bottom-bar-background;
|
|
background-clip: padding-box;
|
|
a {
|
|
background-position: 50% 5px;
|
|
background-size: auto 25px;
|
|
span {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MAIN
|
|
main {
|
|
background-image:
|
|
linear-gradient(178deg, transparent 700px, white 701px),
|
|
linear-gradient(173deg, $xlight-gray 350px, $light-gray 351px)
|
|
;
|
|
}
|
|
|
|
// White bloc with shadow
|
|
div#main-content-wrapper {
|
|
background-color: white;
|
|
margin-top: 40px;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
box-shadow: 0 0px 30px 10px #ccc;
|
|
z-index: 0;
|
|
|
|
@media ($min-desktop-viewport) {
|
|
margin-top: 120px;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
body.has-picture #main-content {
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
padding-top: 16.5%;
|
|
background-image: var(--page-picture);
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
main {
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
background-color: white;
|
|
height: 50px;
|
|
position: relative;
|
|
box-shadow: 0 0px 30px 20px white;
|
|
}
|
|
}
|
|
|
|
// CELLS
|
|
// more link
|
|
div.wcsformsofcategorycell ul li.add-more-items {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
margin: auto;
|
|
font-size: 1.2em;
|
|
background-color: $orange;
|
|
display: flex;
|
|
transform: rotate(45deg);
|
|
a {
|
|
color: white;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
display: block;
|
|
border: none;
|
|
margin: auto;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary-color;
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.wcs-form-cell a {
|
|
@extend .pk-button;
|
|
display: block;
|
|
}
|
|
|
|
// WCS
|
|
div#rub_service h2 {
|
|
font-size: 2rem;
|
|
color: $primary-color;
|
|
}
|
|
|
|
// FOOTER
|
|
div#footer {
|
|
font-size: .9em;
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
// inclined top footer
|
|
@media (min-width: $width) {
|
|
position: relative;
|
|
margin-top: 60px;
|
|
&::before {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
content: "";
|
|
display: block;
|
|
border-top: 60px solid transparent;
|
|
border-right: $width solid $footer-background;
|
|
}
|
|
}
|
|
} |