landingpage/themes/app-landingpage/assets/scss/_header.scss

302 lines
7.7 KiB
SCSS
Raw Permalink Normal View History

2022-08-06 20:25:26 +02:00
.logo {
display: flex;
flex-direction: row;
text-decoration: none;
&-image {
width: auto;
height: 55px;
display: block;
flex: 0 0 auto;
overflow: hidden;
}
}
.header {
background-position: center;
@extend .section_bg-gradient;
@if $header-mobile-sticky {
top: 0;
position: sticky;
z-index: 2;
@media(min-width: $screen-md){
z-index: auto;
position: relative;
}
} @else {
position: relative;
z-index: 2;
}
&_home {
body & {
background-image: none;
z-index: auto;
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: -1;
background-position: center;
background-image: $background-image_gradient;
height: 140px;
top: -12px;
}
&:after {
top: -10px;
background-image: $background-image_shape-wave-xs;
background-position: center bottom;
background-size: 100% auto;
background-repeat: no-repeat;
}
@media(min-width: $screen-sm){
&:before,
&:after {
background-image: $background-image_gradient;
height: 280px;
}
&:after {
background-image: $background-image_shape-wave;
background-size: auto;
background-position: left bottom;
}
}
.page-home & {
@media(min-width: $screen-lg){
margin-bottom: 5 * $spacer;
}
@media(min-width: $screen-xl){
margin-bottom: $spacer;
}
}
@media (min-width: $screen-xl) {
&:before,
&:after {
min-height: 320px;
height: 23vw;
}
&:after {
background-size: cover;
background-position: center bottom;
}
}
@media (min-width: $screen-xl + 180px){
&:before,
&:after {
height: 20vw;
transform: translate3d(0,-2%,0);
}
}
@media (min-width: 2200px){
&:before,
&:after {
transform: translate3d(0,-10%,0);
}
}
@media (min-width: 2200px){
&:before,
&:after {
transform: translate3d(0,-20%,0);
}
}
}
.logo-caption {
color: $white;
}
.nav-link {
text-decoration: none;
}
.nav-item {
font-weight: $font-weight-bold;
}
.nav-item,
.nav-link {
@media(min-width: $screen-md){
color: inherit;
}
}
.navbar{
padding-top: $spacer * 1.5;
padding-bottom: $spacer * 1.5;
@media(min-width: $screen-md){
color: $white;
}
}
.btn-menu {
appearance: none;
width: 44px;
height: 44px;
min-width: 44px;
display: block;
border-radius: $border-radius;
position: absolute;
background: transparent;
border: none;
outline: none;
top: $spacer * 1.5;
right: $spacer * 1.5;
z-index: 1;
&:before {
content: "";
width: 100%;
height: 100%;
min-width: 44px;
background: url("../img/icons/burger_menu.svg") center no-repeat;
display: block;
position: absolute;
left: 0;
top: 0;
}
@media(min-width: $screen-md){
display: none;
}
&_close:before {
background-image: url("../img/icons/burger_menu_close.svg");
}
}
&-nav {
display: none;
&.active {
display: block;
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top:0;
background-color: $body-bg;
padding-top: $spacer * 1.3;
padding-left: $spacer;
padding-right: $spacer;
z-index: $zindex-modal;
.nav {
display: flex;
flex-direction: column;
}
}
.nav-item {
font-size: $font-size-lg;
color: $body-color;
font-weight: $font-weight-bold;
order: 1;
.nav-link {
&,
&:hover {
color: inherit;
}
&.disabled {
opacity: 0.7;
}
}
&.lang {
display: flex;
align-items: center;
font-size: $font-size-base;
position: relative;
top: 0.08rem;
order: 0;
padding-left: $spacer * 0.8;
padding-right: $spacer * 0.8;
margin-bottom: $spacer;
text-transform: uppercase;
.nav-link {
&,
&:hover {
padding-left: 0.3rem;
padding-right: 0.3rem;
opacity: 0.7;
}
&-delimiter {
position: relative;
top: -0.08rem;
}
&.active {
&,
&:hover {
opacity: 1;
}
}
}
}
}
@media(min-width: $screen-md){
&,
&.active {
display: flex;
justify-content: flex-end;
align-items: center;
position: static;
background: transparent;
height: auto;
width: auto;
padding: 0;
.nav {
flex-direction: row;
color: $white;
&-item.lang {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
}
}
.nav-item,
.nav-item.lang {
order: 1;
color: inherit;
}
.btn-menu {
display: none;
}
.nav-link {
&.active {
position: relative;
&:after {
content: "";
position: absolute;
bottom: $spacer * 0.6;
border-top: 2px solid $white;
left: $spacer;
right: $spacer;
}
}
}
.nav-link-icon {
&.icon_github {
position: relative;
margin-right: 10px;
&:before {
content: "";
background-image: url("../img/icons/github_white.svg");
background-position: center;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0.01rem;
}
img {
visibility: hidden;
}
}
}
}
}
}