Roman_applicant-site/public/scssold/layout/_portfolio.scss

385 lines
9.7 KiB
SCSS
Raw Permalink Normal View History

2024-01-11 10:41:35 +03:00
@use '../utils' as *;
/*----------------------------------------*/
/* 09. PORTFOLIO CSS
/*----------------------------------------*/
.portfolio{
$self : &;
&__item{
min-height: 416px;
position: relative;
z-index: 1;
&::after{
@include tp-afbf-full($bg-color: var(--tp-common-black));
opacity: 0;
}
&:hover{
&::after{
opacity: .9;
}
#{$self}{
&__content{
bottom: 45px;
opacity: 1;
visibility: visible;
@media #{$xs}{
bottom: 20px;
}
}
&__view{
top: 50px;
opacity: 1;
visibility: visible;
@media #{$xs}{
top: 20px;
}
}
}
}
}
&__title{
font-size: 24px;
color: var(--tp-common-white);
text-transform: uppercase;
margin-bottom: 0;
& a{
&:hover{
color: var(--tp-theme-primary);
}
}
}
&__content{
position: absolute;
bottom: 0;
left: 50px;
z-index: 1;
visibility: hidden;
opacity: 0;
@media #{$xs}{
left: 20px;
}
&-3{
}
}
&__tag{
display: inline-block;
font-size: 14px;
font-weight: 700;
color: var(--tp-common-white);
text-transform: uppercase;
margin-bottom: 5px;
&-3{
position: absolute;
bottom: 0;
left: 40px;
& a{
display: inline-block;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: var(--tp-common-black);
background-color: var(--tp-theme-primary);
padding: 0 7px;
}
}
}
&__view{
position: absolute;
top: 0;
left: 50px;
z-index: 1;
visibility: hidden;
opacity: 0;
& .portfolio-view-btn{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: var(--tp-common-white);
background-color: var(--tp-theme-primary);
font-size: 16px;
&:hover{
color: var(--tp-theme-primary);
background-color: var(--tp-common-white);
}
}
@media #{$xs}{
left: 20px;
}
}
&__thumb{
min-height: 416px;
&-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include background();
}
}
&__box{
$self : &;
&-item{
&.portfolio-item-active{
#{$self}{
&-btn{
@include transform(perspective(400px) rotateX(0deg));
visibility: visible;
opacity: 1;
}
}
}
&:hover{
#{$self}{
&-btn{
@include transform(perspective(400px) rotateX(0deg));
visibility: visible;
opacity: 1;
}
}
}
}
&-title{
font-size: 24px;
color: var(--tp-common-black);
text-transform: uppercase;
margin-bottom: 0;
@media #{$lg}{
font-size: 18px;
}
@media #{$md}{
font-size: 20px;
}
@media #{$xs}{
font-size: 20px;
}
& a{
&:hover{
color: var(--tp-theme-primary);
}
}
}
&-content{
border: 1px solid var(--tp-border-1);
padding: 32px 40px;
@media #{$xs}{
padding-left: 20px;
padding-right: 20px;
}
}
&-tag{
position: absolute;
bottom: 0;
left: 40px;
& a{
display: inline-block;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: var(--tp-common-black);
background-color: var(--tp-theme-primary);
padding: 0 7px;
}
}
&-btn{
@include transform(perspective(400px) rotateX(-60deg));
transform-origin: top center;
visibility: hidden;
opacity: 0;
}
}
&__details{
&-wrapper{
@media #{$md, $sm, $xs}{
padding-right: 0;
}
}
&-text{
& h3{
font-size: 30px;
text-transform: uppercase;
margin-bottom: 15px;
}
& p{
font-size: 16px;
line-height: 26px;
margin-bottom: 30px;
padding-right: 10px;
}
&.has-dropcap{
& p::first-letter {
}
}
&-highlight{
color: #333333;
}
}
&-msg{
font-size: 20px;
text-transform: uppercase;
line-height: 1.5;
margin-bottom: 55px;
}
&-goal{
&-item{
& h4{
font-size: 20px;
text-transform: uppercase;
border-bottom: 1px solid var(--tp-border-1);
padding-bottom: 15px;
margin-bottom: 20px;
& span{
color: var(--tp-theme-primary);
}
}
& p{
font-size: 16px;
padding-right: 20px;
}
}
}
&-post{
&-item{
padding: 10px;
@media #{$md, $sm, $xs}{
margin-bottom: 20px;
}
&-right{
& .portfolio__details-post-thumb{
@media #{$lg, $md, $sm, $xs}{
margin-right: 20px;
margin-left: 0;
}
}
}
}
&-thumb{
& img{
width: 80px;
height: 80px;
}
}
&-content{
& span{
font-size: 14px;
display: inline-block;
font-weight: 700;
color: var(--tp-theme-primary);
text-transform: uppercase;
margin-bottom: 5px;
}
& h4{
font-size: 24px;
text-transform: uppercase;
margin-bottom: 0;
@media #{$sm, $xs}{
font-size: 20px;
}
& a{
&:hover{
color: var(--tp-theme-primary);
}
}
}
}
}
&-info{
padding: 0 40px 30px;
& ul{
& li{
list-style: none;
border-bottom: 1px solid #f2f2f2;
margin-bottom: 13px;
padding-bottom: 10px;
&:last-child{
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
& p{
font-size: 14px;
color: var(--tp-text-1);
margin-bottom: 0;
& span{
color: var(--tp-common-black);
font-weight: 700;
}
}
}
}
}
}
&__contact{
&-title{
font-size: 18px;
text-transform: uppercase;
margin-bottom: 25px;
}
.contact__input{
& input,
& textarea{
border-color: #f2f2f2;
height: 60px;
line-height: 60px;
padding-left: 50px;
padding-right: 15px;
&:focus{
border-color: var(--tp-theme-primary);
}
}
& textarea{
height: 140px;
line-height: 1.3;
}
& .nice-select{
height: 60px;
line-height: 60px;
border: 1px solid #f2f2f2;
background-color: transparent;
padding-left: 50px;
}
& i{
top: 23px;
left: 23px;
right: auto;
color: var(--tp-common-black);
}
}
}
&__widget{
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.04);
border: 1px solid #f2f2f2;
&-title{
font-size: 18px;
text-transform: uppercase;
margin-bottom: 20px;
padding: 35px 40px 0;
}
}
}