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

431 lines
10 KiB
SCSS
Raw Normal View History

2024-01-11 10:41:35 +03:00
@use '../utils' as *;
/*----------------------------------------*/
/* 07. TEAM CSS
/*----------------------------------------*/
.tp-team {
$main: &;
&__overlay {
position: relative;
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: -moz-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
background-image: -webkit-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
background-image: -ms-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
@include transition(.3s);
pointer-events: none;
}
}
&__member {
&:hover {
& {
#{$main} {
&__info {
opacity: 0;
transform: translateY(100%);
}
&__social {
opacity: 1;
transform: translateY(0);
}
&__img {
& img {
transform: scale(1.05, 1.05);
}
}
&__overlay {
&::after {
opacity: 0;
}
}
}
}
}
}
&__img {
& img {
@include transition(.3s);
}
}
&__info {
width: 100%;
position: absolute;
bottom: 10px;
z-index: 1;
color: var(--tp-common-white);
@include transition(.3s)
}
&__name {
font-size: 18px;
color: var(--tp-common-white);
line-height: 1;
margin-bottom: 0;
}
&__social {
position: absolute;
bottom: 0;
transform: translateY(100%);
width: 100%;
text-align: center;
z-index: 3;
background-color: var(--tp-theme-primary);
z-index: 2;
padding: 15px 0;
opacity: 0;
@include transition(.3s);
& span {
margin: 0 5px;
& a {
@include square-btn(40px,$circle:true);
display: inline-block;
text-align: center;
line-height: 36px;
color: var(--tp-common-white);
border: 2px solid;
border-color: rgba($color: #fff, $alpha: .3);
&:hover {
background-color: var(--tp-common-white);
color: var(--tp-theme-primary);
}
}
}
}
}
.tp-team-2 {
$main: &;
&__overlay {
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: -moz-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
background-image: -webkit-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
background-image: -ms-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
@include transition(.3s);
opacity: 0;
border-radius: 6px;
}
}
&__member {
&:hover {
& {
#{$main} {
&__social {
opacity: 1;
transform: translateY(0);
}
&__img {
& img {
}
}
&__overlay {
&::after {
opacity: 1;
}
}
}
}
}
}
&__img {
& img {
@include transition(.3s);
border-radius: 6px;
}
}
&__info {
padding-top: 20px;
}
&__name {
font-size: 20px;
line-height: 1;
margin-bottom: 0;
& a {
&:hover {
color: var(--tp-theme-primary);
}
}
}
&__social {
position: absolute;
bottom: 20px;
transform: translateY(100%);
width: 100%;
left: 25px;
z-index: 2;
opacity: 0;
@include transition(.3s);
& span {
margin-right: 10px;
& a {
@include square-btn(40px);
border-radius: 4px;
line-height: 36px;
display: inline-block;
text-align: center;
color: var(--tp-common-white);
border: 2px solid;
border-color: rgba($color: #fff, $alpha: .1);
&:hover {
background-color: var(--tp-common-white);
color: var(--tp-theme-primary);
}
}
}
}
&__ratting {
color: #faa423;
}
&__pro{
color: var(--tp-text-2);
display: inline-block;
margin-bottom: 5px;
}
}
.teacher{
&__item{
@include border-radius(6px);
padding: 30px;
&:hover{
background: var(--tp-common-white);
@include box-shadow(0px 30px 40px 0px rgba(1, 11, 60, 0.1));
& .teacher__thumb{
& img{
@include transform(scale(1.1));
}
}
}
}
&__content{
padding-top: 25px;
& span{
font-size: 16px;
}
}
&__title{
display: inline-block;
font-size: 20px;
margin-bottom: 10px;
}
&__social{
& ul{
& li{
display: inline-block;
margin: 0 5px;
& a{
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
font-size: 13px;
text-align: center;
border: 2px solid red;
@include border-radius(4px);
color: var(var(--tp-common-black));
&:hover{
background: var(--tp-theme-primary);
color: var(--tp-common-white);
border-color: red;
}
}
}
}
&-2{
@media #{$sm}{
margin-bottom: 30px;
}
@media #{$xs}{
margin-bottom: 30px;
}
& h4{
font-size: 16px;
font-weight: 500;
margin-bottom: 0;
}
& ul{
& li{
display: inline-block;
& a{
font-size: 14px;
color: #898a93;
margin: 2px;
&:hover{
color: var(--tp-theme-primary);
}
}
}
}
}
}
&__rating{
@media #{$sm}{
margin-bottom: 30px;
}
@media #{$xs}{
margin-bottom: 30px;
}
& span{
font-size: 16px;
& i{
padding-right: 5px;
}
}
& h5{
font-size: 14px;
font-weight: 600;
margin-bottom: 0;
}
& ul{
& li{
display: inline-block;
& a{
font-size: 14px;
color: var(--tp-theme-secondary);
}
}
}
&-inner{
& p{
font-size: 16px;
color: var(var(--tp-common-black));
font-weight: 600;
margin-bottom: 0;
padding-left: 3px;
}
}
}
&__info{
@media #{$sm}{
margin-bottom: 30px;
}
@media #{$xs}{
margin-bottom: 30px;
}
& h4{
font-size: 40px;
margin-bottom: 0;
}
& span{
font-size: 16px;
}
}
&__follow{
&-btn{
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 25px;
border: 2px solid #eef0f6;
@include border-radius(4px);
color: var(var(--tp-common-black));
font-weight: 16px;
font-weight: 500;
text-transform: capitalize;
background: var(--tp-common-white);
&:hover{
background-color: var(--tp-theme-primary);
color: var(--tp-common-white);
border-color: transparent;
}
}
}
&__top{
padding-bottom: 20px;
border-bottom: 1px solid #e8eaf0;
}
&__bio{
padding-bottom: 50px;
padding-top: 35px;
border-bottom: 1px solid #e8eaf0;
& h3{
font-size: 20px;
margin-bottom: 15px;
}
& p{
font-size: 16px;
line-height: 26px;
margin-bottom: 0;
}
}
&__courses{
& .section__title{
font-size: 30px;
}
}
&__details{
&-thumb{
& img{
@include border-radius(6px);
}
@media #{$md}{
margin-bottom: 50px;
}
@media #{$sm}{
margin-bottom: 50px;
}
@media #{$xs}{
margin-bottom: 50px;
padding-right: 0;
}
}
&-shape{
& img{
position: absolute;
z-index: -1;
width: auto;
&.teacher-details-shape-1{
right: 0px;
bottom: 70px;
}
&.teacher-details-shape-2{
left: -27px;
top: 55px;
}
}
}
}
}