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

138
wp-content/themes/ostal_WP/sass/05-components/_boxes-repeater.scss Normal file
View File

@@ -0,0 +1,138 @@
@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;
.section-boxes-repeater{
position: relative;
background-repeat: no-repeat;
background-size: cover;
.bg-filter{
@include bg-filter;
}
.wrapper{
position: relative;
padding-top: 46px;
padding-bottom: 46px;
z-index: 99;
@include responsive(desktop){
padding: 146px 0;
}
.section-heading{
max-width: 520px;
@include responsive(desktop){
margin-left: 32px;
}
}
.section-description{
@include responsive(desktop){
max-width: 60%;
margin-left: 32px;
}
}
.boxes{
display: grid;
justify-content: center;
gap: 20px;
@include responsive(desktop){
padding: 14px 50px 0;
grid-template-columns: repeat(auto-fit,minmax(244px,1fr));
}
.box-single{
background-color: $gray-color;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
padding: 30px 22px 15px;
@include responsive(tablet){
clip-path: polygon(0% 12%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%);
}
@include responsive(desktop){
padding: 40px 22px 30px;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
.box-image{
max-width: 40px;
max-height: 40px;
aspect-ratio: 1/1;
margin-bottom: 22px;
}
.box-content{
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
.cta{
align-self: end;
text-align: end;
}
}
}
}
}
&.bg-dark{
.wrapper{
.boxes.numbered-cards{
display: flex;
flex-direction: column;
position: relative;
gap: 20px;
counter-reset: box-counter;
@include responsive(desktop){
flex-direction: row;
padding: 14px 0 0;
}
.box-single{
clip-path: inherit;
padding: inherit;
background-color: inherit;
@include responsive(tablet){
display: flex;
flex-direction: column;
}
@include responsive(desktop){
min-height: 420px;
height: fit-content;
padding: inherit;
flex: 0 0 33%;
}
.box-content{
display: grid;
grid-template-rows: auto;
height: auto;
min-height: 300px;
background-color: $gray-color;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
padding: 43px 40px;
@include responsive(tablet){
min-height: inherit;
flex: 1 0 205px;
clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
@include responsive(desktop){
flex: 1 0 395px;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
&__text{
color: $dark-color;
@include responsive(tablet){
margin-bottom: 10px;
}
@include responsive(desktop){
margin-bootom: inherit;
}
}
}
.box-counter{
color: $accent-color;
font-size: 7.2rem;
font-weight: 700;
line-height: 110%;
margin-left: 16px;
&:before{
content: "0" counter(box-counter);
counter-increment: box-counter;
}
}
}
}
}
}
}