129 lines
3.1 KiB
SCSS
129 lines
3.1 KiB
SCSS
@use "../abstracts/index" as *;
|
|
|
|
.testimonial {
|
|
padding: 24px 15px;
|
|
.box-user {
|
|
gap: 12px;
|
|
}
|
|
&.style-default {
|
|
border: 1px solid var(--Primary-1);
|
|
border-radius: 20px;
|
|
background-color: var(--White);
|
|
.icon {
|
|
color: var(--Primary-3);
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
&.style-1 {
|
|
position: absolute;
|
|
padding: 0 !important;
|
|
.avatar {
|
|
position: relative;
|
|
&::after,
|
|
&::before {
|
|
opacity: 0;
|
|
position: absolute;
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
border-radius: 9999px;
|
|
animation: ripple 3s infinite;
|
|
@include transition3();
|
|
}
|
|
&::after {
|
|
animation-delay: 0.5s;
|
|
}
|
|
&::before {
|
|
animation-delay: 0.9s;
|
|
}
|
|
img {
|
|
height: 96px;
|
|
width: 96px;
|
|
padding: 12px;
|
|
border-radius: 999px;
|
|
background-color: var(--White);
|
|
}
|
|
}
|
|
.content {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
position: absolute;
|
|
padding: 40px 32px;
|
|
border-radius: 18px;
|
|
background-color: var(--White);
|
|
min-width: 499px;
|
|
@include transition3();
|
|
&.top {
|
|
bottom: calc(100% + 13px);
|
|
.arrow {
|
|
bottom: -8px;
|
|
transform: rotate(-136deg);
|
|
}
|
|
}
|
|
&.bottom {
|
|
top: calc(100% + 13px);
|
|
}
|
|
.arrow {
|
|
position: absolute;
|
|
bottom: calc(100% - 14px);
|
|
left: 45px;
|
|
border-top: 20px solid var(--White);
|
|
border-right: 20px solid transparent;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
&:hover {
|
|
z-index: 10;
|
|
.content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.avatar {
|
|
&::after,
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.style-2 {
|
|
text-align: center;
|
|
.logo {
|
|
margin-bottom: 66px;
|
|
}
|
|
.text {
|
|
margin-bottom: 113px;
|
|
}
|
|
}
|
|
&.style-3 {
|
|
border-radius: 12px;
|
|
background-color: var(--White);
|
|
min-height: 415px;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.box-user {
|
|
.avatar {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
&.style-4 {
|
|
padding: 0;
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.left {
|
|
max-width: 612px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|