Project-Pro/ostal.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jacek Pyziak
2024-12-20 12:48:12 +01:00
commit d9fb74972a
217 changed files with 26712 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
wp-content/themes/ostal_WP/sass/05-components/_hero-slider.scss Normal file
View File

@@ -0,0 +1,109 @@
@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;
.hero-slider{
@include responsive(small-phones){
height: 100%;
}
height: 90vh;
width: 100%;
@include responsive(desktop){
height: inherit;
width: inherit;
}
.swiper-wrapper{
position: relative;
overflow: hidden;
}
.swiper-slide{
height: 100%;
width: 100%!important;
opacity: 0!important;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
padding-bottom: 90px;
background-repeat: no-repeat;
background-size: cover!important;
background-position: center;
@include responsive(desktop){
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
min-height: 780px;
padding: 102px;
width: 100%;
}
.hero-slider-heading{
z-index: 99;
@include responsive(tablet){
max-width: 70%;
align-self: flex-end;
}
@include responsive(desktop){
max-width: inherit;
flex: 0 0 50%;
}
}
.hero-slider-content{
z-index: 99;
padding: 20px;
@include responsive(tablet){
max-width: 70%;
align-self: flex-end;
}
@include responsive(desktop){
max-width: inherit;
align-self: inherit;
flex: 0 0 50%;
padding: 50px 28px 64px 42px;
}
}
&-active{
opacity: 1!important;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bg-filter{
@include bg-filter;
@include bg-filter--gradient;
}
}
.swiper-nav{
width: 110px;
height: 50px;
position: absolute;
display: flex;
align-items: initial;
gap: 10px;
bottom: 20px;
right: 65px;
@include responsive(tablet){
right: 100px;
}
@include responsive(desktop){
right: 102px;
bottom: 42px;
}
.swiper-button{
display: block;
background-color: $dark-color;
height: 50px;
width: 50px;
padding: 12px;
content: url("./images/arrow-right.png");
position: relative;
&-prev{
transform: rotate(180deg);
left: 0;
}
&-next{
right: 0;
}
}
}
}