File: /var/www/vhosts/creativefellows.nl/recht.creativefellows.nl/public/scss/_base.scss
@mixin animate($duration:0.3s){
transition: all $duration;
}
.no-js {
.toggle-main-navigation{display:none;}
}
.recht-grid{
background-color:$secondary-color;
// side bar left
.recht-sidebar{
position:relative;
padding:2.5rem 2rem 2rem 2rem;
text-align:right;
@include breakpoint(medium down){
padding: 1.5rem 2rem;
}
// logo
.recht-logo{
@include breakpoint(medium down){
.logo{
display:block;
height:2rem;
text-align:left;
float:left;
}
.logo > img{height:100%;}
}
}
// vertical align logo + menu + mandatory links
.vertical-align-menu{
display: flex;
align-items: center;
justify-content: right;
}
// menu
.menu{}
// toplevel menu
.menu__links{margin:3rem 0;}
.menu__links a{padding:0;font-size:1.5rem;font-weight:$global-weight-bold;line-height:2rem;color:$white;text-transform:uppercase;}
.menu__links .link__active > a{color:$primary-color;}
// 2nd layer menu
.menu__pagelinks{text-transform:uppercase;margin:1rem 0;}
.menu__pagelinks a{font-size:0.875rem;font-weight:$global-weight-normal;line-height:1.5rem;}
// mandatory links mobile
.menu__secondary
{
border-top:solid 0.125rem $primary-color;
padding-top:1.5rem;
li{
display:inline;
position:relative;
padding-right:0.75rem;
&::after{content:"";border-right:solid 1px rgba($white,0.25);height:0.625rem;float:right;position:absolute;right:0.375rem;top:0.25rem;padding:0 0.25rem;}
}
&::before{content:"#";position:absolute;top:-0.5rem;left:50%;margin-left:-1rem;width:1rem;height:1rem;background:$primary-color;color:$white;border-radius:50%;text-align:center;font-weight:$global-weight-bold;font-size:0.75rem;line-height:0.875rem;}
a{padding:0;color:$white;text-align:left;font-size:0.625rem;line-height:1rem;}
}
.recht-secondary{}
}
// main content
.recht-content{
padding:0;
background:$white;
> .grid-x{height:100%;}
// main content left
.recht-content-main{
@include xy-grid-container;
padding:1.5rem 2rem !important;
h1{margin-bottom:0.75rem;}
}
// sidebar details right
.recht-content-right{
background-color:$secondary-color;
padding:2rem 2rem;
h1,h2,h3,h4,h5,h6{text-transform:uppercase;}
.tag-line{text-transform:none;}
}
.recht-content-right__background-gray{
img{display:block;margin-bottom:1.5rem;}
h1,h2,h3,h4,h5,h6{color:$primary-color;}
p,ul{color:$white;}
a{color:$white;}
@include breakpoint(medium down){
padding:2rem;
p,ul{color:$black;}
a{color:$black;}
}
}
/*.recht-content-right_background-yellow{
//background-color:$primary-color;
h2,h3,h4,h5,h6{color:$white;text-transform:uppercase;color:$primary-color;}
h2{color:$white;}
h3{margin:0;}
p,ul{color:$white;font-size:0.875rem;}
a{color:$white;}
}*/
}
// toggle responsive nav
.toggle-main-navigation{
float:right;
//margin-top:0.5rem;
.toggle-menu{
float:right;
position:relative;
width:2rem;
height:2rem;
padding:0;
transform:rotate(0deg);
cursor:pointer;
@include animate();
span{
display:block;
position:absolute;
height:0.125em;
width:100%;
background:$white;
opacity:1;
left:0;
transform:rotate(0deg);
@include animate();
}
span:nth-child(1){top:0.25rem;}
span:nth-child(2),
span:nth-child(3){top:0.875rem;}
span:nth-child(4){top:1.5rem;}
&.open span:nth-child(1){top:18px;width:0%;left:50%;}
&.open span:nth-child(2){transform:rotate(45deg);}
&.open span:nth-child(3){transform:rotate(-45deg);}
&.open span:nth-child(4){top:18px;width:0%;left:50%;}
}
}
// footer copy moblile (mobile only)
.recht-copyright{
background:$white;
p{
margin:0.75rem 0;
font-size:0.75rem;
color:$secondary-color;
text-transform:uppercase;
line-height:1.5rem;
}
a{
color:$secondary-color;
&::after{content:"|";padding:0 0.25rem;color:$light-gray;}
&:last-child::after{display:none;}
}
}
// limit width of sidebar and main-content-right
@include breakpoint(large){
.recht-sidebar,
.recht-content-right{
max-width:400px;
}
}
.cell__full-height{
height:100%;
}
}
.loader{
position:fixed;
top:0;
right:0;
bottom:0;
width:100%;
z-index:1000;
@include xy-grid();
.loader-menu-spacer{max-width:400px;width: 25%;}
.loader-content{
flex: 1 1 0;
width: auto;
//background: $white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h256v256H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg style='clip-path:url(%23a)'%3E%3Cpath d='M128 256A128 128 0 1 0 0 128a128 128 0 0 0 128 128' style='fill:%23ffc629'/%3E%3Cpath d='m142.62 114.7-3.44 25.68h-24.5l3.61-25.68Zm41.81-20.4h-18.52l4.7-32.5a8.65 8.65 0 0 0-1.9-7 8.82 8.82 0 0 0-6.71-3.11h-2.56a9 9 0 0 0-8.66 7.39l-5.15 35.22h-24.31L126 61.8a8.71 8.71 0 0 0-1.92-7.09 8.52 8.52 0 0 0-6.51-3h-3a8.74 8.74 0 0 0-8.45 7.37l-5.28 35.22H77.76a8.83 8.83 0 0 0-8.71 8.7v3a8.83 8.83 0 0 0 8.71 8.71H98l-3.6 25.67H71.57a8.62 8.62 0 0 0-8.71 8.71v3a8.71 8.71 0 0 0 8.71 8.7h20l-4.15 30a8.53 8.53 0 0 0 8.64 10.11h2.56a8.71 8.71 0 0 0 8.67-7.45l4.37-32.66h24.53l-4 30.38a9.21 9.21 0 0 0 2.31 7 8.58 8.58 0 0 0 6.39 2.76h2.77a8.6 8.6 0 0 0 8.67-7.47l4.17-32.64h21.72a8.82 8.82 0 0 0 8.71-8.7v-3a8.72 8.72 0 0 0-8.71-8.71h-18.73l3.6-25.68h21.34a8.72 8.72 0 0 0 8.71-8.71v-3a8.72 8.72 0 0 0-8.71-8.71' style='fill:%23fff'/%3E%3Cpath d='m142.62 114.7-3.44 25.68h-24.5l3.61-25.68Zm41.81-20.4h-18.52l4.7-32.5a8.65 8.65 0 0 0-1.9-7 8.82 8.82 0 0 0-6.71-3.11h-2.56a9 9 0 0 0-8.66 7.39l-5.15 35.22h-24.31L126 61.8a8.71 8.71 0 0 0-1.92-7.09 8.52 8.52 0 0 0-6.51-3h-3a8.74 8.74 0 0 0-8.45 7.37l-5.28 35.22H77.76a8.83 8.83 0 0 0-8.71 8.7v3a8.83 8.83 0 0 0 8.71 8.71H98l-3.6 25.67H71.57a8.62 8.62 0 0 0-8.71 8.71v3a8.71 8.71 0 0 0 8.71 8.7h20l-4.15 30a8.53 8.53 0 0 0 8.64 10.11h2.56a8.71 8.71 0 0 0 8.67-7.45l4.37-32.66h24.53l-4 30.38a9.21 9.21 0 0 0 2.31 7 8.58 8.58 0 0 0 6.39 2.76h2.77a8.6 8.6 0 0 0 8.67-7.47l4.17-32.64h21.72a8.82 8.82 0 0 0 8.71-8.7v-3a8.72 8.72 0 0 0-8.71-8.71h-18.73l3.6-25.68h21.34a8.72 8.72 0 0 0 8.71-8.71v-3a8.72 8.72 0 0 0-8.71-8.72Z' style='stroke:%23fff;stroke-miterlimit:10;stroke-width:4.6px;fill:none'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
background:$white;
background-size:4.5rem auto;
animation-name: bounce-background;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-iteration-count: infinite;
}
}
@keyframes bounce-background {
from {
background-position: 50% 48.5%;
}
50% {
background-position: 50% 51.5%;
}
to {
background-position: 50% 48.5%;
}
}
//::selection {
// color: $white;
// background: $primary-color;
//}