first commit
This commit is contained in:
mukesh13
192
public/scss/component/_accordion.scss
Normal file
192
public/scss/component/_accordion.scss
Normal file
@ -0,0 +1,192 @@
|
||||
@use "../abstracts/index" as *;
|
||||
.accordion-item {
|
||||
.accordion-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
&:not(.collapsed) {
|
||||
.icon {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include transition3();
|
||||
}
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 1px;
|
||||
background-color: var(--Black);
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 17px;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: var(--Black);
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
&.style-default {
|
||||
padding: 38px 0 39px;
|
||||
position: relative;
|
||||
border-top: 1px solid var(--Mono-gray-3);
|
||||
.accordion-title,
|
||||
.accordion-faqs-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.accordion-title {
|
||||
&:not(.collapsed) {
|
||||
.icon {
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
.title {
|
||||
display: flex;
|
||||
gap: 56px;
|
||||
}
|
||||
span {
|
||||
width: 33px;
|
||||
}
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-left: 89px;
|
||||
padding-top: 23px;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--Primary);
|
||||
}
|
||||
&.v2,
|
||||
&.v3,
|
||||
&.v4 {
|
||||
border-bottom: 1px solid var(--Mono-gray-3);
|
||||
border-top: unset;
|
||||
.accordion-faqs-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
&.v2 {
|
||||
padding: 33px 0 29px;
|
||||
.accordion-faqs-content {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
&.v3 {
|
||||
padding: 35px 0 31px;
|
||||
border-block-end: 2px dashed var(--Mono-gray-3);
|
||||
p {
|
||||
max-width: 753px;
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-top: 11px;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
&.v4 {
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
border-radius: 12px;
|
||||
padding: 22px 24px 21px;
|
||||
.accordion-title {
|
||||
&:not(.collapsed) {
|
||||
.icon {
|
||||
&::before {
|
||||
background-color: var(--Mono-gray-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
&.v5 {
|
||||
border-top-style: dashed;
|
||||
padding: 36px 0 40px;
|
||||
.list {
|
||||
padding-left: 10px;
|
||||
gap: 9px;
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-top: 23px;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
&::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--Color-dark);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
background-color: var(--Mono-gray-1);
|
||||
padding: 22.5px 24px;
|
||||
.icon {
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: #141b34;
|
||||
}
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
padding-top: 13px;
|
||||
}
|
||||
.accordion-faqs-content {
|
||||
font-style: italic;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--Sub-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
294
public/scss/component/_animation.scss
Normal file
294
public/scss/component/_animation.scss
Normal file
@ -0,0 +1,294 @@
|
||||
.up-down {
|
||||
-webkit-animation: up-down 1s infinite alternate;
|
||||
animation: up-down 1s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes up-down {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes up-down {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.up-down-2 {
|
||||
-webkit-animation: up-down-2 0.9s infinite alternate;
|
||||
animation: up-down-2 0.9s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes up-down-2 {
|
||||
0% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.left-right {
|
||||
-webkit-animation: left-right 1.5s infinite alternate;
|
||||
animation: left-right 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-right {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.effect-content-slide {
|
||||
.effect-item {
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
animation-duration: 1.3s;
|
||||
animation-delay: 0.3s;
|
||||
animation-name: var(--animation-name);
|
||||
}
|
||||
.effect-img-zoom {
|
||||
position: relative;
|
||||
.img-zoom {
|
||||
-webkit-transition: all 15s linear;
|
||||
-khtml-transition: all 15s linear;
|
||||
-moz-transition: all 15s linear;
|
||||
-ms-transition: all 15s linear;
|
||||
-o-transition: all 15s linear;
|
||||
transition: all 15s linear;
|
||||
min-height: 350px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active,
|
||||
.tab-pane.active {
|
||||
.effect-up {
|
||||
--animation-name: slideinup;
|
||||
}
|
||||
.effect-left {
|
||||
--animation-name: slideinleft;
|
||||
}
|
||||
.effect-right {
|
||||
--animation-name: slideinright;
|
||||
}
|
||||
.effect-down {
|
||||
--animation-name: slideindown;
|
||||
}
|
||||
.img-zoom {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.effect-item {
|
||||
&.effect-1 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&.effect-2 {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&.effect-3 {
|
||||
animation-delay: 0.11s;
|
||||
}
|
||||
&.effect-4 {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
&.effect-5 {
|
||||
animation-delay: 0.19s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideinup {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideinright {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideindown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideinleft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-2 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconShape {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0) rotateZ(0.01deg);
|
||||
}
|
||||
34% {
|
||||
transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(0, 0, 0) rotateZ(0.01deg);
|
||||
}
|
||||
67% {
|
||||
transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sliderShape {
|
||||
0%,
|
||||
100% {
|
||||
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
|
||||
transform: translate3d(0, 0, 0) rotateZ(0.01deg);
|
||||
}
|
||||
34% {
|
||||
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
|
||||
transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(0, 0, 0) rotateZ(0.01deg);
|
||||
}
|
||||
67% {
|
||||
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
|
||||
transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
.img-custom-anim-right {
|
||||
animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes img-anim-right {
|
||||
0% {
|
||||
transform: translateX(5%);
|
||||
clip-path: inset(0 0 0 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.img-custom-anim-left {
|
||||
animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes img-anim-left {
|
||||
0% {
|
||||
transform: translateX(-5%);
|
||||
clip-path: inset(0 100% 0 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
box-shadow: 0 2px 0 #0075ff;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
box-shadow: 0 2px 0 #0075ff;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
box-shadow: 0 2px 0 #0075ff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-front {
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-back {
|
||||
100% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
412
public/scss/component/_blog.scss
Normal file
412
public/scss/component/_blog.scss
Normal file
@ -0,0 +1,412 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.blog-article-item {
|
||||
.article-thumb {
|
||||
position: relative;
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
transition: all 0.4s ease;
|
||||
border: 2px solid var(--Primary);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
a {
|
||||
display: inline;
|
||||
@include transition5();
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
from(currentColor),
|
||||
color-stop(98%, currentColor)
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
currentColor 0%,
|
||||
currentColor 98%
|
||||
);
|
||||
background-size: 0 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 100%;
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
background-color: var(--Mono-dark-9);
|
||||
width: 47px;
|
||||
height: 64px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
@include flex(center, center);
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
&.style-1,
|
||||
&.style-3,
|
||||
&.style-4 {
|
||||
.article-thumb {
|
||||
border-radius: unset;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.btn_link {
|
||||
position: relative;
|
||||
color: var(--Primary);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--Primary);
|
||||
@include transition3();
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-thumb {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 553px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.5s;
|
||||
background-size: cover;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translatex(50%) scalex(2);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
img:nth-child(2) {
|
||||
transform: translatex(-50%) scalex(2);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
img:nth-child(1) {
|
||||
transform: translatex(0) scalex(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
position: relative;
|
||||
|
||||
.article-thumb {
|
||||
&::before {
|
||||
content: "";
|
||||
border-radius: 47.92px;
|
||||
position: absolute;
|
||||
border: none;
|
||||
transform: unset;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
179.86deg,
|
||||
rgba(0, 0, 0, 0) 35.89%,
|
||||
rgba(0, 0, 0, 0.6) 99.87%
|
||||
);
|
||||
}
|
||||
border-radius: 47.92px;
|
||||
}
|
||||
.article-content {
|
||||
padding: 0 15px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
.article-thumb {
|
||||
height: 406px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
.article-thumb {
|
||||
height: 280px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.blog-article-meta {
|
||||
gap: 28px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.article-thumb {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
a {
|
||||
background-size: 100% 1.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-article-meta {
|
||||
gap: 22px;
|
||||
.meta-item {
|
||||
position: relative;
|
||||
color: var(--Primary);
|
||||
&:not(:first-child) {
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "/";
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
&.date {
|
||||
color: var(--Mono-gray-7);
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
.meta-item {
|
||||
position: relative;
|
||||
color: var(--Mono-gray-6);
|
||||
&:not(:first-child) {
|
||||
&::after {
|
||||
content: "";
|
||||
left: -15px;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--Mono-gray-6);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.relatest-post-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
.image {
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 7px;
|
||||
}
|
||||
&.style-1 {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.relatest-post-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-categories {
|
||||
.item {
|
||||
position: relative;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: var(--Primary);
|
||||
width: 0;
|
||||
height: 1px;
|
||||
@include transition3();
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
span {
|
||||
@include transition3();
|
||||
position: absolute;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&:hover {
|
||||
a,
|
||||
span {
|
||||
color: var(--Primary);
|
||||
}
|
||||
a {
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap-popular-tag {
|
||||
display: flex;
|
||||
gap: 14px 12px;
|
||||
flex-wrap: wrap;
|
||||
.popular-tag-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 30px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
background-color: var(--Sub-color-1);
|
||||
color: var(--Mono-dark-9);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
transition: all 0.4s ease;
|
||||
border: 1px solid var(--Border);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading-single-post {
|
||||
.box-infor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
.right {
|
||||
display: flex;
|
||||
gap: 33px;
|
||||
.wrap {
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
i {
|
||||
font-size: 26px;
|
||||
}
|
||||
&.share {
|
||||
gap: 25px;
|
||||
}
|
||||
&.copy {
|
||||
i {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-sigle-post {
|
||||
.wrap-tag {
|
||||
padding-bottom: 122px;
|
||||
border-bottom: 1px solid var(--Border);
|
||||
margin-bottom: 110px;
|
||||
}
|
||||
.thumbs-post-single-2 {
|
||||
img {
|
||||
min-height: 240px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wishlist-post-sigle {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
gap: 4px;
|
||||
@include transition3();
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: var(--Error);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
|
||||
.single-post-content {
|
||||
ul {
|
||||
max-width: 981px;
|
||||
display: grid;
|
||||
gap: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
padding: 0 42px;
|
||||
.text {
|
||||
font-style: italic;
|
||||
font-family: $font-main2;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.box-user {
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
306
public/scss/component/_button.scss
Normal file
306
public/scss/component/_button.scss
Normal file
@ -0,0 +1,306 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.tf-btn {
|
||||
@include flex(center, center);
|
||||
width: max-content;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
background-color: var(--Primary);
|
||||
@include transition3();
|
||||
border-radius: 46px;
|
||||
@include transition3();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
span {
|
||||
color: var(--White);
|
||||
@include transition3();
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bg-effect {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background-color: var(--White);
|
||||
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
&.btn-white {
|
||||
background-color: var(--White);
|
||||
span {
|
||||
color: var(--Primary);
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Primary);
|
||||
span,
|
||||
i {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
&.bg-effect-dark-color {
|
||||
.bg-effect {
|
||||
background-color: var(--Mono-dark-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-white2 {
|
||||
background-color: var(--White);
|
||||
span {
|
||||
color: var(--Mono-dark-9);
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Mono-dark-8);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Mono-dark-8);
|
||||
color: var(--White);
|
||||
span {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
&.bg-effect-dark-color {
|
||||
.bg-effect {
|
||||
background-color: var(--dark-color2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary2 {
|
||||
background-color: var(--Primary);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Mono-dark-8);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Mono-dark-8);
|
||||
span {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
background-color: var(--Mono-dark-9);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
i {
|
||||
color: var(--Mono-dark-9);
|
||||
@include transition3();
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Primary);
|
||||
span {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
i {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark-2 {
|
||||
background-color: var(--dark-color2);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
i {
|
||||
color: var(--dark-color);
|
||||
@include transition3();
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--White);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--White);
|
||||
span {
|
||||
color: var(--dark-color2);
|
||||
}
|
||||
i {
|
||||
color: var(--dark-color2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-black {
|
||||
background-color: var(--black);
|
||||
padding: 0 20px;
|
||||
span {
|
||||
color: var(--White);
|
||||
font-size: 12px;
|
||||
line-height: 14.52px;
|
||||
}
|
||||
i {
|
||||
color: var(--White);
|
||||
@include transition3();
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--White);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--White);
|
||||
span {
|
||||
color: var(--dark-color2);
|
||||
}
|
||||
i {
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-black2 {
|
||||
background-color: var(--black);
|
||||
padding: 0 20px;
|
||||
span {
|
||||
color: var(--White);
|
||||
font-size: 12px;
|
||||
line-height: 14.52px;
|
||||
}
|
||||
i {
|
||||
color: var(--White);
|
||||
@include transition3();
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Primary);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
i {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-border {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
&.border-1 {
|
||||
border-color: var(--Primary);
|
||||
span {
|
||||
color: var(--Primary) !important;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: var(--Mono-dark-9);
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Primary);
|
||||
border: 1px solid var(--Primary);
|
||||
span {
|
||||
color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-bright-orange {
|
||||
background-color: var(--bright-orange);
|
||||
span {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
i {
|
||||
color: var(--dark-color);
|
||||
@include transition3();
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--dark-color);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
i {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.h36 {
|
||||
height: 36px;
|
||||
}
|
||||
&.h-48 {
|
||||
height: 48px;
|
||||
}
|
||||
&.btn-px-28 {
|
||||
padding: 0 28px;
|
||||
}
|
||||
&.btn-px-30 {
|
||||
padding: 0 30px;
|
||||
}
|
||||
&:hover {
|
||||
transition-delay: 0.15s;
|
||||
background-color: var(--White);
|
||||
span {
|
||||
color: var(--Mono-dark-9) !important;
|
||||
}
|
||||
.bg-effect {
|
||||
width: 225%;
|
||||
height: calc(var(--button-width) * 2.25);
|
||||
}
|
||||
-webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.15);
|
||||
-webkit-transform: translate3d(0, -2px, 0);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tf-btn-link {
|
||||
@include d-flex();
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--Primary);
|
||||
gap: 8px;
|
||||
width: max-content;
|
||||
span {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
background: var(--Primary);
|
||||
height: 2px;
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
i {
|
||||
@include transition3();
|
||||
transition-delay: 0.2s;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
i {
|
||||
transform: translateX(4px) rotate(45deg);
|
||||
background-color: var(--Primary);
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
307
public/scss/component/_footer.scss
Normal file
307
public/scss/component/_footer.scss
Normal file
@ -0,0 +1,307 @@
|
||||
@use "../abstracts/index" as *;
|
||||
.footer {
|
||||
.footer-logo {
|
||||
width: 195px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.footer-info {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer-heading {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.footer-menu-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer-newsletter {
|
||||
.footer-heading {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.description {
|
||||
a {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: var(--Primary);
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@include transition3();
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-bottom {
|
||||
.wrapper {
|
||||
margin-top: 120px;
|
||||
padding: 33px 0;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--Border);
|
||||
.right {
|
||||
gap: 12px 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-default {
|
||||
.footer-body {
|
||||
padding-top: 113px;
|
||||
}
|
||||
&.has-border-top {
|
||||
.footer-body {
|
||||
border-top: 1px solid var(--Border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-1 {
|
||||
background-color: var(--Mono-dark-11);
|
||||
.footer-logo {
|
||||
width: 160px;
|
||||
}
|
||||
.contact {
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.footer-bottom .wrapper {
|
||||
margin-top: 73px;
|
||||
padding: 22px 0 31px;
|
||||
}
|
||||
.footer-heading {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.contact {
|
||||
.footer-menu-list {
|
||||
gap: 19px;
|
||||
}
|
||||
}
|
||||
.footer-menu-list {
|
||||
gap: 14px;
|
||||
}
|
||||
.left {
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.footer-body {
|
||||
.right {
|
||||
display: flex;
|
||||
margin-top: 50px;
|
||||
.content {
|
||||
background-color: #ebe8d8;
|
||||
flex: 20%;
|
||||
padding: 24px 15px;
|
||||
}
|
||||
.image {
|
||||
flex: 20%;
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-bottom {
|
||||
.wrapper {
|
||||
border-color: var(--Mono-gray-7);
|
||||
}
|
||||
}
|
||||
.social {
|
||||
a {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.style-2 {
|
||||
padding-top: 73px;
|
||||
.tf-social {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: var(--Mono-dark-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-newsletter {
|
||||
fieldset input {
|
||||
background-color: var(--Mono-gray-2);
|
||||
height: 52px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
max-width: 374px;
|
||||
}
|
||||
.button-submit {
|
||||
max-width: 162px;
|
||||
width: 100%;
|
||||
}
|
||||
.tf-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.subscribe-content {
|
||||
gap: 13px;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
a {
|
||||
&::after {
|
||||
background-color: var(--Color-dark);
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-logo {
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
.footer-heading {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
.footer-bottom {
|
||||
padding-top: 107px;
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
padding-top: 60px;
|
||||
background-color: var(--Primary);
|
||||
.footer-newsletter,
|
||||
.footer-body,
|
||||
.footer-bottom {
|
||||
--Primary: #0075ff;
|
||||
}
|
||||
.description {
|
||||
a {
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-social {
|
||||
a {
|
||||
border-color: var(--Mono-gray-6);
|
||||
color: var(--Mono-gray-6);
|
||||
&:hover {
|
||||
background-color: var(--White);
|
||||
color: #28285b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-bottom {
|
||||
.wrapper {
|
||||
border-top: 1px dashed #53537c;
|
||||
}
|
||||
}
|
||||
.form-newsletter {
|
||||
fieldset input {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
color: var(--White);
|
||||
&::placeholder {
|
||||
color: var(--Mono-gray-4);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
.footer-logo {
|
||||
width: 195px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
background-color: #272727;
|
||||
|
||||
.footer-logo {
|
||||
width: 256px;
|
||||
}
|
||||
.footer-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-menu-list {
|
||||
gap: 14px;
|
||||
}
|
||||
.footer-heading {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-newsletter {
|
||||
max-width: 548px;
|
||||
width: 100%;
|
||||
.subscribe-content {
|
||||
gap: 12px;
|
||||
}
|
||||
.footer-heading {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
fieldset {
|
||||
max-width: 374px;
|
||||
width: 100%;
|
||||
input {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.tf-social {
|
||||
a {
|
||||
background-color: var(--Primary);
|
||||
color: var(--White);
|
||||
border: none;
|
||||
&:hover {
|
||||
background-color: var(--White);
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-bottom {
|
||||
padding-bottom: 27px;
|
||||
.wrapper {
|
||||
padding-top: 0;
|
||||
border-top: unset;
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 26px;
|
||||
border-bottom: 1px solid var(--Mono-gray-7);
|
||||
}
|
||||
.left {
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
466
public/scss/component/_form.scss
Normal file
466
public/scss/component/_form.scss
Normal file
@ -0,0 +1,466 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"] {
|
||||
font-family: $font-main;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
padding: 12px 16px 15px 15px;
|
||||
width: 100%;
|
||||
color: var(--Black);
|
||||
border-radius: 12px;
|
||||
height: 46px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--Mono-gray-3);
|
||||
&::placeholder {
|
||||
color: var(--Mono-gray-6);
|
||||
}
|
||||
&.style-2 {
|
||||
padding: 11px 18px;
|
||||
background-color: var(--Sub-color-1);
|
||||
border-radius: 44px;
|
||||
&::placeholder {
|
||||
color: var(--Mono-gray-6);
|
||||
}
|
||||
}
|
||||
}
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
textarea {
|
||||
height: 130px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
&.style-line-bot {
|
||||
fieldset {
|
||||
input {
|
||||
padding: 8px 40px 9px 0px;
|
||||
border-radius: unset;
|
||||
height: max-content;
|
||||
background-color: transparent;
|
||||
border: unset;
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
fieldset {
|
||||
input {
|
||||
color: var(--mono-gray9);
|
||||
border-color: var(--border);
|
||||
&::placeholder {
|
||||
color: var(--mono-gray9);
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-contact {
|
||||
display: grid;
|
||||
gap: 35px;
|
||||
padding: 61px 64px 64px;
|
||||
border-radius: 24px;
|
||||
background-color: var(--White);
|
||||
fieldset {
|
||||
input {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.attachment {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-search {
|
||||
position: relative;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@include transition3();
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
fieldset {
|
||||
input {
|
||||
height: max-content;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
&::placeholder {
|
||||
color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-send-email {
|
||||
position: relative;
|
||||
fieldset input {
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
border-color: #00000029;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.button-submit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 8px;
|
||||
.tf-btn {
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-mail {
|
||||
fieldset {
|
||||
input {
|
||||
color: #999999;
|
||||
border-color: #bbbbbb !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-newsletter {
|
||||
fieldset {
|
||||
input {
|
||||
background-color: var(--dark-color2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-leave-comment {
|
||||
textarea {
|
||||
height: 200px;
|
||||
margin-bottom: 42px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-help {
|
||||
fieldset input {
|
||||
background-color: transparent;
|
||||
height: 52px;
|
||||
}
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
height: 182px;
|
||||
}
|
||||
}
|
||||
.wrap-sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
.tf-dropdown-sort {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tf-dropdown-sort {
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
padding: 0 12px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.btn-select {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
text-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 15px 5px;
|
||||
border-radius: 0;
|
||||
max-height: 68vh;
|
||||
isolation: isolate;
|
||||
overscroll-behavior-y: contain;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--border);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.select-item {
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
@include transition3;
|
||||
&.active {
|
||||
background-color: var(--line);
|
||||
color: var(--main);
|
||||
padding: 0 15px !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--border);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--bord);
|
||||
}
|
||||
}
|
||||
|
||||
.tf-check {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
background-color: var(--White) !important;
|
||||
&:checked {
|
||||
background-color: var(--Primary) !important;
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
font-family: $fontIcon;
|
||||
content: "\e930";
|
||||
position: absolute;
|
||||
color: var(--White);
|
||||
opacity: 0;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.5);
|
||||
@include transition3;
|
||||
}
|
||||
}
|
||||
|
||||
.box-fieldset-item {
|
||||
display: grid;
|
||||
gap: 17px;
|
||||
.fieldset-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-project {
|
||||
fieldset {
|
||||
input {
|
||||
padding: 7px 40px 4px 0px !important;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
&::placeholder {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-btn {
|
||||
height: 52px;
|
||||
padding: 0 29px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tf-select-tranform-lable {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.select-label {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 15px;
|
||||
font-size: 16px;
|
||||
color: var(--Mono-gray-5);
|
||||
line-height: 20px;
|
||||
@include transition3();
|
||||
}
|
||||
select {
|
||||
height: 48px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--Mono-gray-3);
|
||||
font-size: 16px;
|
||||
color: var(--Black);
|
||||
width: 100%;
|
||||
padding: 20px 20px 9.5px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
&.focused {
|
||||
.select-label {
|
||||
font-size: 12px;
|
||||
transform: translateY(-70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkout {
|
||||
padding: 24px 15px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--Primary);
|
||||
.grid-2 {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-newsletter {
|
||||
&.style-1 {
|
||||
.subscribe-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
fieldset {
|
||||
flex: 1;
|
||||
input {
|
||||
border-radius: 12px;
|
||||
padding-left: 46px;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.has-border {
|
||||
fieldset {
|
||||
flex: 1;
|
||||
input {
|
||||
border: 1px solid #d9dce3;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
max-width: 212px;
|
||||
background-image: url(/images/item/border.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
aspect-ratio: 5.1707317073;
|
||||
.subscribe-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
fieldset {
|
||||
flex: 1 0 auto;
|
||||
input {
|
||||
background: transparent;
|
||||
height: 40px;
|
||||
border-radius: 37px;
|
||||
max-width: 172px;
|
||||
padding: 12px 0 10px 16px;
|
||||
}
|
||||
}
|
||||
.subscribe-button {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--primary);
|
||||
flex: 0 0 auto;
|
||||
aspect-ratio: 1;
|
||||
padding: 5px;
|
||||
margin-right: 6px;
|
||||
color: var(--White);
|
||||
@include transition3();
|
||||
&:hover {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
639
public/scss/component/_header.scss
Normal file
639
public/scss/component/_header.scss
Normal file
@ -0,0 +1,639 @@
|
||||
@use "../abstracts/index" as *;
|
||||
.header {
|
||||
.header-inner-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 32px;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
.header-right {
|
||||
gap: 16px;
|
||||
.btn-find {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
.mega-menu {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.wrap-demo-item {
|
||||
gap: 15px;
|
||||
}
|
||||
.support {
|
||||
i {
|
||||
padding: 8px 9px 10px;
|
||||
font-size: 18px;
|
||||
color: var(--Mono-dark-9);
|
||||
background-color: var(--Mono-gray-1);
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
background-color: var(--White);
|
||||
.header-inner-wrap {
|
||||
padding: 13px 0 14px;
|
||||
}
|
||||
.header-left {
|
||||
gap: 20px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.main-menu .navigation {
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
background-color: var(--Primary);
|
||||
.header-inner-wrap {
|
||||
padding: 17px 0 4px;
|
||||
}
|
||||
.header-left {
|
||||
gap: 48px;
|
||||
}
|
||||
.mobile-button .burger span {
|
||||
background-color: var(--White);
|
||||
}
|
||||
.left {
|
||||
gap: 48px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 0 21px;
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
.header-inner-wrap {
|
||||
padding: 37px 0 22px;
|
||||
border-bottom: 1px dashed #a7a7a7;
|
||||
|
||||
}
|
||||
.header-left {
|
||||
gap: 20px;
|
||||
}
|
||||
.main-menu .navigation {
|
||||
gap: 20px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 0 22px;
|
||||
}
|
||||
.support {
|
||||
i {
|
||||
border-radius: 8px;
|
||||
color: var(--Primary);
|
||||
background-color: var(--Bg-color-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
.header-inner-wrap {
|
||||
padding-top: 15px;
|
||||
}
|
||||
.header-right {
|
||||
gap: 14px;
|
||||
}
|
||||
.tf-btn {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
.comming-soon {
|
||||
background-color: var(--Mono-gray-1);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
.wrap {
|
||||
background-color: var(--White);
|
||||
@include flex(center, center);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
.demo-name {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--Primary);
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.demo-name {
|
||||
color: var(--Primary);
|
||||
&::after {
|
||||
width: 100%;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// header-sticky
|
||||
.header {
|
||||
&.header-sticky {
|
||||
pointer-events: none;
|
||||
top: var(--admin-bar-height);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
-webkit-transform: translateY(-120%);
|
||||
-khtml-transform: translateY(-120%);
|
||||
-moz-transform: translateY(-120%);
|
||||
-ms-transform: translateY(-120%);
|
||||
-o-transform: translateY(-120%);
|
||||
transform: translateY(-120%);
|
||||
-webkit-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
-khtml-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
-moz-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
-ms-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
-o-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
|
||||
visibility: hidden;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
.navigation .has-child {
|
||||
.submenu {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.style-default {
|
||||
background: linear-gradient(103.01deg, #eff4ff 0%, #c9d9ff 100.23%);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
&.style-3 {
|
||||
// height: 66px;
|
||||
background-color: var(--White);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
.tf-btn-effec-arrow {
|
||||
.button-text,
|
||||
.button-icon {
|
||||
background-color: var(--primary);
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
.header-inner-wrap {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
background-color: var(--White);
|
||||
.header-inner-wrap {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
&.style-6,
|
||||
&.style-5 {
|
||||
background-color: var(--White);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
.mobile-button {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.tf-btn {
|
||||
background-color: var(--dark-color2);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
.bg-effect {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-sticky {
|
||||
-webkit-transform: translateY(0);
|
||||
-khtml-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
visibility: visible;
|
||||
pointer-events: all;
|
||||
.navigation .has-child {
|
||||
&:hover {
|
||||
.submenu {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-inner-wrap {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-button {
|
||||
display: none;
|
||||
.burger {
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 18px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
.burger span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: var(--Primary);
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.burger span:nth-of-type(1) {
|
||||
top: 0px;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.burger span:nth-of-type(2) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.burger span:nth-of-type(3) {
|
||||
top: 100%;
|
||||
transform-origin: left center;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
.navigation {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
li {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
a {
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
color: var(--Mono-gray-5);
|
||||
}
|
||||
&:hover,
|
||||
&.current-menu {
|
||||
a {
|
||||
color: var(--Primary);
|
||||
&::after {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-default {
|
||||
padding: 0 24px;
|
||||
border-radius: 48px;
|
||||
background-color: var(--White);
|
||||
}
|
||||
&.style-1,
|
||||
&.style-2,
|
||||
.style-3 {
|
||||
.navigation li {
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 46px;
|
||||
}
|
||||
&:hover,
|
||||
&.current-menu,
|
||||
&.current-menu-item {
|
||||
a {
|
||||
color: var(--Mono-dark-9);
|
||||
&::after {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
.navigation li {
|
||||
a {
|
||||
color: var(--White);
|
||||
}
|
||||
&:hover,
|
||||
&.current-menu,
|
||||
&.current-menu-item {
|
||||
> a {
|
||||
color: var(--White);
|
||||
&::after {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--Mono-gray-1);
|
||||
text-align: center;
|
||||
.demo-image {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.demo-name {
|
||||
position: relative;
|
||||
display: inline;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--Primary);
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.current-menu-item {
|
||||
.demo-name {
|
||||
color: var(--Primary);
|
||||
&::after {
|
||||
width: 100%;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
> .has-child {
|
||||
> a {
|
||||
position: relative;
|
||||
color: var(--mono-gray);
|
||||
&:hover {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 96px;
|
||||
height: 42px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-child {
|
||||
> a {
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "\e958";
|
||||
font-family: $fontIcon;
|
||||
font-size: 6px;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.submenu {
|
||||
min-width: 200px;
|
||||
background-color: var(--White);
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
box-shadow: 0 0 26px rgba(0, 0, 0, 0.06);
|
||||
padding: 32px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
row-gap: 13px;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
@include transition3();
|
||||
> li {
|
||||
> a {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: var(--Mono-gray-5);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: var(--Mono-gray-5);
|
||||
border-radius: 999px;
|
||||
}
|
||||
&:hover,
|
||||
&.current-menu,
|
||||
&.current-menu-item {
|
||||
> a {
|
||||
color: var(--Primary);
|
||||
}
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.submenu {
|
||||
pointer-events: all;
|
||||
margin-top: 0;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-mb {
|
||||
z-index: 9999999;
|
||||
background-color: var(--White);
|
||||
.logo {
|
||||
max-width: 195px;
|
||||
}
|
||||
.offcanvas-header {
|
||||
border-bottom: 1px solid var(--Border);
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mb-body {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid var(--Border);
|
||||
overscroll-behavior-y: contain;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--Primary);
|
||||
border-radius: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
}
|
||||
.mb-bottom {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
.btn-select {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
}
|
||||
.mb-canvas-content {
|
||||
min-width: 100%;
|
||||
max-width: min(90%, 320px);
|
||||
grid-auto-rows: minmax(0, 1fr) auto;
|
||||
isolation: isolate;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
}
|
||||
.close-menu {
|
||||
font-size: 20px;
|
||||
color: var(--Mono-gray-4);
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Mono-gray-4);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-ul-mb {
|
||||
.sub-nav-menu {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 15px;
|
||||
&.sub-menu-level-2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.btn-open-sub {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--Mono-gray-4);
|
||||
transition: 0.4s ease 0.1s;
|
||||
margin: auto;
|
||||
}
|
||||
&::before {
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
}
|
||||
&::after {
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
.nav-mb-item {
|
||||
padding: 2px 0px;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--Mono-dark-2);
|
||||
}
|
||||
.mb-menu-link {
|
||||
min-height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--Black);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&:not(.collapsed) {
|
||||
.btn-open-sub {
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.mb-menu-link {
|
||||
color: var(--Primary);
|
||||
.btn-open-sub {
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav-link.active {
|
||||
color: var(--Primary);
|
||||
.btn-open-sub {
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 32px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
color: var(--Black);
|
||||
&:not(.collapsed) {
|
||||
.btn-open-sub {
|
||||
&::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-open-sub {
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
267
public/scss/component/_hover.scss
Normal file
267
public/scss/component/_hover.scss
Normal file
@ -0,0 +1,267 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.hover-image {
|
||||
.img-style,
|
||||
.article-thumb {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 0%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 1s;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.img-style,
|
||||
.article-thumb {
|
||||
&:after {
|
||||
height: 250%;
|
||||
transition: all 600ms linear;
|
||||
background-color: transparent;
|
||||
}
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-image-2 {
|
||||
.image-rotate {
|
||||
overflow: hidden;
|
||||
img {
|
||||
@include transition3;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.image-rotate {
|
||||
img {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-image-3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.article-thumb {
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
transition: 0.5s;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
@media (max-width: 1023px) {
|
||||
position: unset;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: translatex(50%) scalex(2);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.article-thumb {
|
||||
img:nth-child(2) {
|
||||
transform: translatex(-50%) scalex(2);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
img:nth-child(1) {
|
||||
transform: translatex(0) scalex(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.effect-icon {
|
||||
&:hover {
|
||||
.icon,
|
||||
.tf-icon {
|
||||
i,
|
||||
img,
|
||||
svg {
|
||||
animation: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-tooltip {
|
||||
position: relative;
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding: 0px 8.5px;
|
||||
height: 25px;
|
||||
border-radius: 2px;
|
||||
bottom: calc(100% + 7px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
color: var(--White);
|
||||
max-width: 250px;
|
||||
width: max-content;
|
||||
background-color: var(--Primary);
|
||||
transition: transform 0.4s ease 0.2s, opacity 0.4s ease 0.2s;
|
||||
z-index: 5;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
&::before {
|
||||
content: "";
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
background: var(--Primary);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.tooltip-bot {
|
||||
.tooltip {
|
||||
top: calc(100% + 5px);
|
||||
bottom: unset;
|
||||
&::before {
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-line-text {
|
||||
display: inline;
|
||||
@include transition5();
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
from(currentColor),
|
||||
color-stop(98%, currentColor)
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
currentColor 0%,
|
||||
currentColor 98%
|
||||
);
|
||||
background-size: 0 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 100%;
|
||||
&:hover {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-border {
|
||||
.img-style,
|
||||
.article-thumb,
|
||||
.icon {
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
transition: all 0.4s ease;
|
||||
border: 2px solid var(--Primary);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&.border-element {
|
||||
position: relative;
|
||||
.img-style,
|
||||
.article-thumb,
|
||||
.icon {
|
||||
position: unset;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 0;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
transition: all 0.4s ease;
|
||||
border: 2px solid var(--Primary);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.img-style,
|
||||
.article-thumb,
|
||||
.icon {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
189
public/scss/component/_icon-box.scss
Normal file
189
public/scss/component/_icon-box.scss
Normal file
@ -0,0 +1,189 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.tf-box-icon {
|
||||
@include transition3();
|
||||
&.style-1 {
|
||||
.icon {
|
||||
max-width: 360px;
|
||||
padding: 60px 100px;
|
||||
border-radius: 280px;
|
||||
@include flex(center, center);
|
||||
margin-bottom: 34px;
|
||||
background-color: var(--White);
|
||||
img {
|
||||
animation: iconShape 5s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
height: 581px;
|
||||
padding: 32px 24px 23px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url(/images/item/shape-1.png);
|
||||
}
|
||||
.number {
|
||||
color: var(--Mono-gray-2);
|
||||
font-family: $font-main2;
|
||||
font-weight: 600;
|
||||
font-size: 135.36px;
|
||||
line-height: 169.2px;
|
||||
letter-spacing: -1%;
|
||||
position: absolute;
|
||||
@include transition3();
|
||||
top: -66px;
|
||||
left: -38px;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.btn_link {
|
||||
margin-top: 59px;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--Primary);
|
||||
@include transition3();
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--Sub-color-2);
|
||||
.number {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
padding: 30px 38px 26px 40px;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
max-width: 430px;
|
||||
position: relative;
|
||||
background-image: url(/images/item/shape-2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--White);
|
||||
.number {
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
@include flex(center, center);
|
||||
border-radius: 999px;
|
||||
background-color: var(--Mono-gray-2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@include transition3();
|
||||
color: var(--Mono-dark-9);
|
||||
z-index: 1;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
left: 100%;
|
||||
background-color: var(--Primary-fc-green-100);
|
||||
@include transition5();
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
max-width: max-content;
|
||||
margin-left: auto;
|
||||
margin-bottom: 131px;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.title,
|
||||
a {
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
padding: 40px 40px 33px;
|
||||
border-radius: 24px;
|
||||
height: 429px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--White);
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
padding-top: 14px;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px 0px #00000026;
|
||||
}
|
||||
}
|
||||
&.style-5 {
|
||||
padding: 34px 31px 26px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
}
|
||||
&.style-6 {
|
||||
padding: 40px 40px 45px;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
position: absolute;
|
||||
top: -36%;
|
||||
right: -30%;
|
||||
}
|
||||
.icon {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--Primary);
|
||||
@include flex(center, center);
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
}
|
||||
&.style-7 {
|
||||
padding: 40px 40px 33px;
|
||||
background-color: var(--White);
|
||||
border-radius: 24px;
|
||||
i {
|
||||
font-size: 80px;
|
||||
color: var(--Primary);
|
||||
}
|
||||
svg path {
|
||||
@include transition3();
|
||||
}
|
||||
&.v2 {
|
||||
border-radius: 24px;
|
||||
background-color: var(--Sub-color-1);
|
||||
padding: 41px 41px 31px;
|
||||
.icon {
|
||||
i {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.v3 {
|
||||
}
|
||||
&:hover {
|
||||
svg path {
|
||||
stroke: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
public/scss/component/_index.scss
Normal file
38
public/scss/component/_index.scss
Normal file
@ -0,0 +1,38 @@
|
||||
/*------------ header ---------------- */
|
||||
@forward "header";
|
||||
/*------------ footer ---------------- */
|
||||
@forward "footer";
|
||||
/*------------ tabs ---------------- */
|
||||
@forward "tabs";
|
||||
/*------------ button ---------------- */
|
||||
@forward "button";
|
||||
/*------------ range slider ---------------- */
|
||||
@forward "range-slider";
|
||||
/*------------ form ---------------- */
|
||||
@forward "form";
|
||||
/*------------ slider ---------------- */
|
||||
@forward "slider";
|
||||
/*------------ off canvas ---------------- */
|
||||
@forward "pop-up";
|
||||
/*------------ blog ---------------- */
|
||||
@forward "blog";
|
||||
/*------------ testimonial ---------------- */
|
||||
@forward "testimonial";
|
||||
/*------------ accordion ---------------- */
|
||||
@forward "accordion";
|
||||
/*------------ shop ---------------- */
|
||||
@forward "shop";
|
||||
/*------------ map ---------------- */
|
||||
@forward "map";
|
||||
/*------------ hover ---------------- */
|
||||
@forward "hover";
|
||||
/*------------ hover ---------------- */
|
||||
@forward "nice-select";
|
||||
/*------------ slider ---------------- */
|
||||
@forward "slider";
|
||||
/*------------ animation ---------------- */
|
||||
@forward "animation";
|
||||
/*------------ icon-box ---------------- */
|
||||
@forward "icon-box";
|
||||
/*------------ zoom ---------------- */
|
||||
@forward "zoom";
|
||||
0
public/scss/component/_map.scss
Normal file
0
public/scss/component/_map.scss
Normal file
277
public/scss/component/_nice-select.scss
Normal file
277
public/scss/component/_nice-select.scss
Normal file
@ -0,0 +1,277 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.nice-select {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: var(--White);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "\e923";
|
||||
font-family: $fontIcon;
|
||||
right: 10px;
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
color: var(--Black);
|
||||
position: absolute;
|
||||
transform: translateY(-50%) rotate(0);
|
||||
@include transition3();
|
||||
z-index: 1;
|
||||
}
|
||||
> span {
|
||||
font-weight: 400;
|
||||
}
|
||||
> .list {
|
||||
position: absolute;
|
||||
background-color: var(--White);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
|
||||
box-sizing: border-box;
|
||||
margin-top: 4px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-ms-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
-webkit-transform: scale(0.75) translateY(-21px);
|
||||
-ms-transform: scale(0.75) translateY(-21px);
|
||||
transform: scale(0.75) translateY(-21px);
|
||||
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
|
||||
opacity 0.15s ease-out;
|
||||
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
max-height: 155px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
background-color: #f5f5f5;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #a7a7a7;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
|
||||
background-color: #f5f5f5;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.option {
|
||||
width: 100%;
|
||||
padding: 10px 10px;
|
||||
color: var(--Text);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
&.selected {
|
||||
color: var(--Main-color);
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
&::after {
|
||||
position: absolute;
|
||||
font-family: $fontIcon;
|
||||
content: "\e930";
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
border-color: var(--Line) !important;
|
||||
z-index: 99;
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
.list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: scale(1) translateY(0);
|
||||
-ms-transform: scale(1) translateY(0);
|
||||
transform: scale(1) translateY(0);
|
||||
width: 100%;
|
||||
-moz-transform: scale(1) translateY(0);
|
||||
-o-transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
&.select-sort {
|
||||
padding-right: 30px !important;
|
||||
&::after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 18px;
|
||||
}
|
||||
&.open {
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
> .list {
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import url(/css/bootstrap-select.min.css);
|
||||
|
||||
.image-select {
|
||||
&.style-default {
|
||||
display: flex;
|
||||
width: max-content !important;
|
||||
> select {
|
||||
display: none !important;
|
||||
}
|
||||
> .dropdown-toggle {
|
||||
padding: 0;
|
||||
padding-right: 25px;
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
&::after {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
content: "\e958";
|
||||
font-family: "icomoon";
|
||||
font-size: 6px;
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
.filter-option-inner-inner {
|
||||
@include flex(center, flex-start);
|
||||
gap: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 30px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
> .dropdown-menu {
|
||||
overflow: unset !important;
|
||||
margin-top: 17px !important;
|
||||
margin-bottom: 17px !important;
|
||||
padding: 8px 10px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: var(--White);
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
|
||||
a {
|
||||
padding: 5px 0;
|
||||
.text {
|
||||
@include flex(center, flex-start);
|
||||
gap: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--primary) !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: var(--White);
|
||||
top: 0;
|
||||
left: 60%;
|
||||
z-index: 2;
|
||||
}
|
||||
&[data-popper-placement="top-start"] {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
background-color: var(--White);
|
||||
bottom: 00%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-box {
|
||||
padding: 6px 11px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
background-color: var(--White);
|
||||
> .dropdown-toggle {
|
||||
width: max-content;
|
||||
}
|
||||
.filter-option-inner-inner {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
> .dropdown-menu {
|
||||
margin-left: -11px !important;
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.type-currencies {
|
||||
> .dropdown-menu {
|
||||
width: 78px !important;
|
||||
margin-left: calc(50% - 61px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
157
public/scss/component/_pop-up.scss
Normal file
157
public/scss/component/_pop-up.scss
Normal file
@ -0,0 +1,157 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.popup-form-search,
|
||||
.popup-cart {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
background-color: var(--White);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 0 26px rgba(0, 0, 0, 0.06);
|
||||
width: 549px;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(30px);
|
||||
@include transition3();
|
||||
.form-search {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.wrap-tag {
|
||||
display: flex;
|
||||
}
|
||||
.tag-item {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--Mono-gray-5);
|
||||
border-radius: 28px;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 16px;
|
||||
@include transition3();
|
||||
}
|
||||
.remove-item {
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-form {
|
||||
font-size: 24px;
|
||||
@include transition3();
|
||||
cursor: pointer;
|
||||
transform: rotate(0);
|
||||
width: max-content;
|
||||
margin-left: auto;
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.popup-cart {
|
||||
width: 1003px;
|
||||
overflow-x: auto;
|
||||
max-height: 780px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
.close-form {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
.heading {
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.product-item.style-cart {
|
||||
.img-style {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
.tf-mini-cart-tool {
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
margin-bottom: 32px;
|
||||
i {
|
||||
color: var(--Black);
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.tf-mini-cart-tool {
|
||||
.link {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-backdrop,
|
||||
.overlay-filter {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
opacity: 0.7;
|
||||
backdrop-filter: blur(10px);
|
||||
@include transition3();
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
padding: 0;
|
||||
isolation: isolate;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
display: grid;
|
||||
grid-auto-rows: auto minmax(0, 1fr) auto;
|
||||
align-content: start;
|
||||
}
|
||||
.canvas-body {
|
||||
background-color: var(--White);
|
||||
overscroll-behavior-y: contain;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--Mono-gray-5);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--Primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.canvas-header {
|
||||
background-color: var(--White);
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.close-filter {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
}
|
||||
}
|
||||
309
public/scss/component/_range-slider.scss
Normal file
309
public/scss/component/_range-slider.scss
Normal file
@ -0,0 +1,309 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.noUi-base,
|
||||
.noUi-connects {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-ms-transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-origin {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-origin {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.noUi-handle {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.noUi-state-tap .noUi-connect,
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle {
|
||||
width: 34px;
|
||||
height: 28px;
|
||||
left: -17px;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px;
|
||||
}
|
||||
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
|
||||
right: -10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.noUi-handle:after {
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle:after,
|
||||
.noUi-vertical .noUi-handle:before {
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
top: 17px;
|
||||
}
|
||||
|
||||
[disabled] .noUi-connect {
|
||||
background: #b8b8b8;
|
||||
}
|
||||
|
||||
[disabled] .noUi-handle,
|
||||
[disabled].noUi-handle,
|
||||
[disabled].noUi-target {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.noUi-marker-sub {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.noUi-marker-large {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.noUi-value-horizontal {
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.noUi-rtl .noUi-value-horizontal {
|
||||
-webkit-transform: translate(50%, 50%);
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.noUi-value-vertical {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%, 0);
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.noUi-rtl .noUi-value-vertical {
|
||||
-webkit-transform: translate(0, 50%);
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.noUi-base {
|
||||
.noUi-connects {
|
||||
border-radius: 999px;
|
||||
background-color: #D9DCE3;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle,
|
||||
.noUi-vertical .noUi-handle {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50px;
|
||||
background-color: var(--Primary);
|
||||
box-shadow: unset;
|
||||
cursor: pointer;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled state; */
|
||||
[disabled].noUi-connect,
|
||||
[disabled] .noUi-connect {
|
||||
background: #b8b8b8;
|
||||
}
|
||||
|
||||
[disabled].noUi-origin,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slider-labels .caption {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
806
public/scss/component/_shop.scss
Normal file
806
public/scss/component/_shop.scss
Normal file
@ -0,0 +1,806 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.product-item {
|
||||
.img-style {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 17px;
|
||||
position: relative;
|
||||
@include transition3();
|
||||
border: 4px solid transparent;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.on-sale-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
z-index: 5;
|
||||
.on-sale-item {
|
||||
height: 28px;
|
||||
@include flex(center, center);
|
||||
background-color: #ef2a10;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
color: var(--White);
|
||||
font-weight: 500;
|
||||
font-size: 14;
|
||||
line-height: 24;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.info {
|
||||
max-width: 296px;
|
||||
flex: 1;
|
||||
}
|
||||
.product-name {
|
||||
a {
|
||||
display: inline;
|
||||
@include transition3();
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
from(currentColor),
|
||||
color-stop(98%, currentColor)
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
currentColor 0%,
|
||||
currentColor 98%
|
||||
);
|
||||
background-size: 0 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 100%;
|
||||
}
|
||||
}
|
||||
// .price {
|
||||
// color: var(--White);
|
||||
// }
|
||||
.new-price {
|
||||
color: #ef2a10;
|
||||
}
|
||||
.old-price {
|
||||
color: var(--mono-gray2);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.add-cart {
|
||||
margin-top: 7px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 1.11px solid #bbbbbb;
|
||||
border-radius: 999px;
|
||||
@include flex(center, center);
|
||||
font-size: 18px;
|
||||
color: var(--Black);
|
||||
@include transition3();
|
||||
&:hover {
|
||||
background-color: var(--Primary);
|
||||
border-color: var(--Primary);
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.img-style {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.product-name {
|
||||
a {
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
.img-style {
|
||||
width: 48%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.content {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.info {
|
||||
max-width: unset;
|
||||
}
|
||||
.box-icon {
|
||||
position: relative;
|
||||
.tooltip {
|
||||
top: -100%;
|
||||
margin-top: 5px;
|
||||
margin-right: 0;
|
||||
transform: translateY(8px);
|
||||
right: unset;
|
||||
&::before {
|
||||
top: 85%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-cart {
|
||||
max-width: 272px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.style-cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.img-style {
|
||||
max-width: 263px;
|
||||
}
|
||||
.content {
|
||||
max-width: 299px;
|
||||
width: 100%;
|
||||
.info {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-icon {
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--White);
|
||||
color: var(--Mono-dark-9);
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
border-radius: 50%;
|
||||
@include flex(center, center);
|
||||
@include transition3();
|
||||
border: 1px solid var(--Mono-gray-2);
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
svg {
|
||||
width: 18px;
|
||||
path {
|
||||
@include transition4;
|
||||
}
|
||||
}
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--Primary) !important;
|
||||
color: var(--White) !important;
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-8px);
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
svg {
|
||||
path {
|
||||
stroke: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
z-index: 202;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
background-color: var(--Primary);
|
||||
color: var(--White);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
padding: 6px 8px 8px;
|
||||
max-width: 250px;
|
||||
width: max-content;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease,
|
||||
transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24),
|
||||
-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
&::before {
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: unset;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
right: -4px;
|
||||
position: absolute;
|
||||
background: var(--Primary);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
.list-product-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.range-price {
|
||||
.box-price-product {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 326px;
|
||||
}
|
||||
.box-price-item {
|
||||
height: 44px;
|
||||
width: 113px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
color: var(--Mono-gray-8);
|
||||
&.min {
|
||||
border: 1px solid #8c8c8c;
|
||||
background-color: var(--White);
|
||||
}
|
||||
&.max {
|
||||
background-color: var(--White);
|
||||
}
|
||||
}
|
||||
.btn-go {
|
||||
background-color: var(--Primary);
|
||||
border-radius: 12px;
|
||||
color: var(--White);
|
||||
padding: 0 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
@include transition3();
|
||||
&:hover {
|
||||
background-color: var(--Mono-dark-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbs-slider {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.tf-product-media-thumbs {
|
||||
.swiper-slide {
|
||||
height: max-content;
|
||||
width: auto;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
border-radius: 16px;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
border-radius: 16px;
|
||||
border: 1px solid transparent;
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
&.swiper-slide-thumb-active {
|
||||
.item {
|
||||
&::after {
|
||||
border-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-media-main {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
.pagination-wrap {
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 99;
|
||||
padding: 0 33px;
|
||||
i {
|
||||
color: var(--black);
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-info-wrap {
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
&::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--Color-dark);
|
||||
flex-shrink: 0;
|
||||
@include transition3();
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
a {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-wrap-btn {
|
||||
max-width: 392px;
|
||||
}
|
||||
|
||||
.tf-product-info-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 17px;
|
||||
.price-on-sale {
|
||||
color: #ef2a10;
|
||||
}
|
||||
.compare-at-price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.variant-picker-item {
|
||||
.variant-picker-values {
|
||||
display: flex;
|
||||
gap: 10px 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
&.gap12 {
|
||||
gap: 12px;
|
||||
}
|
||||
&.type-click {
|
||||
input {
|
||||
&:checked + label {
|
||||
border: 1px solid var(--Onsurface);
|
||||
padding: 3px;
|
||||
}
|
||||
&:checked + label.style-text-1 {
|
||||
background-color: var(--Onsurface);
|
||||
border: 1px solid var(--Onsurface);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
word-wrap: normal !important;
|
||||
&:checked + label.style-text {
|
||||
background-color: var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
span {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
border: 1px solid transparent;
|
||||
background-color: var(--White);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
line-height: 22.4px;
|
||||
@include transition3;
|
||||
padding: 4px;
|
||||
.btn-checkbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
@include transition3;
|
||||
}
|
||||
}
|
||||
.color-btn {
|
||||
&.line {
|
||||
border-color: var(--line);
|
||||
}
|
||||
&.active {
|
||||
padding: 4px;
|
||||
color: var(--White);
|
||||
border-color: var(--Primary);
|
||||
// .btn-checkbox {
|
||||
// border-color: var(--White);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-info-rate {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
.ratings {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #5f697c;
|
||||
right: -16px;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
color: #f4752d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-info-by-btn {
|
||||
gap: 12px;
|
||||
.box-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--mono-gray7);
|
||||
font-size: 14px;
|
||||
color: var(--White);
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tf-product-info-quantity {
|
||||
gap: 23px;
|
||||
}
|
||||
|
||||
.wg-quantity {
|
||||
width: 117px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #bbc1ce;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
input {
|
||||
width: 60px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: var(--Primary);
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-quantity {
|
||||
width: 44px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
|
||||
cursor: pointer;
|
||||
@include transition3;
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
width: 140px;
|
||||
.btn-quantity {
|
||||
height: 44px;
|
||||
font-size: 30px;
|
||||
}
|
||||
input {
|
||||
pointer-events: none;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sildebar-fiiler {
|
||||
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
.point::before {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
.filter,
|
||||
.categories,
|
||||
.wrap-range {
|
||||
border-radius: 24px;
|
||||
background-color: #e2ecf9;
|
||||
}
|
||||
.wrap-range {
|
||||
padding: 31px 40px 45px;
|
||||
}
|
||||
.categories {
|
||||
padding: 35px 42px 33px;
|
||||
margin-bottom: 39px;
|
||||
.list {
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
&::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--Color-dark);
|
||||
flex-shrink: 0;
|
||||
@include transition3();
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
&::before {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
a {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap-categories {
|
||||
display: grid;
|
||||
gap: 17px;
|
||||
}
|
||||
|
||||
.filter {
|
||||
padding: 32px 40px 33px;
|
||||
}
|
||||
form.style-line-bot {
|
||||
fieldset input {
|
||||
padding: 6px 40px 12px 0px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
&::placeholder {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
button svg path {
|
||||
stroke: var(--mono-gray2);
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap-shop {
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.wrap-sort {
|
||||
flex: 54%;
|
||||
}
|
||||
.wrap {
|
||||
flex: 25%;
|
||||
}
|
||||
.wrap-layout {
|
||||
flex: 10%;
|
||||
.nav-tab-filter {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.result-count {
|
||||
flex: 20%;
|
||||
}
|
||||
}
|
||||
.nav-tab-filter {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
.nav-link-item {
|
||||
padding: 13px;
|
||||
border-radius: 999px;
|
||||
background-color: var(--Mono-dark-9);
|
||||
svg {
|
||||
path,
|
||||
circle,
|
||||
rect {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--Primary);
|
||||
svg {
|
||||
path,
|
||||
circle,
|
||||
rect {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filterShop {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 0 12px 12px 0;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(100px);
|
||||
font-size: 18px;
|
||||
box-shadow: 0 0 3px #0c5af5;
|
||||
color: var(--Black);
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.cart-product {
|
||||
.left {
|
||||
padding: 24px 15px;
|
||||
border: 1px solid var(--Primary);
|
||||
border-radius: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.tf-cart-item_product {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 40px 0;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
}
|
||||
|
||||
.product-item {
|
||||
width: 100%;
|
||||
}
|
||||
.remove-cart {
|
||||
font-size: 24px;
|
||||
@include transition3();
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
.tf-check {
|
||||
background-color: var(--Mono-gray-3) !important;
|
||||
&:checked {
|
||||
background-color: var(--Primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-totals {
|
||||
border-radius: 24px;
|
||||
border: 1px solid var(--Primary);
|
||||
padding: 27px 40px 40px;
|
||||
.title {
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
.info {
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
.price {
|
||||
color: var(--Error);
|
||||
}
|
||||
}
|
||||
.nice-select {
|
||||
padding: 18px 0 30px;
|
||||
}
|
||||
.sub-total {
|
||||
padding: 26px 0 22px;
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
border-top: 1px solid var(--Mono-gray-2);
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
.total {
|
||||
padding: 32px 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.v2 {
|
||||
padding: 27px 38px 25px;
|
||||
.nice-select {
|
||||
padding: 33px 0 29px;
|
||||
}
|
||||
.total {
|
||||
padding: 22px 0;
|
||||
}
|
||||
.info {
|
||||
margin-bottom: 0;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0 5px;
|
||||
border-bottom: 1px;
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
|
||||
.price {
|
||||
color: var(--Mono-gray-6);
|
||||
}
|
||||
}
|
||||
.sub-total {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color-blue-sapphire {
|
||||
background: #234674;
|
||||
}
|
||||
.bg-color-seafoam-green {
|
||||
background: #75d1af;
|
||||
}
|
||||
.bg-color-dusty-rose {
|
||||
background: #c6637d;
|
||||
}
|
||||
.bg-color-light-gray {
|
||||
background: #cccdcf;
|
||||
}
|
||||
140
public/scss/component/_slider.scss
Normal file
140
public/scss/component/_slider.scss
Normal file
@ -0,0 +1,140 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.sw-button {
|
||||
position: unset;
|
||||
margin-top: 0;
|
||||
@include flex(center, center);
|
||||
@include transition3();
|
||||
&.style-default {
|
||||
height: unset;
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
&.has-bg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-color: var(--Primary);
|
||||
border-radius: 999px;
|
||||
color: var(--White);
|
||||
border: 1px solid var(--Primary);
|
||||
&.v2 {
|
||||
&.swiper-button-disabled,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--White);
|
||||
border-color: var(--Primary);
|
||||
color: var(--Primary);
|
||||
svg path {
|
||||
stroke: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.swiper-button-disabled,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--White);
|
||||
border-color: var(--Border);
|
||||
color: var(--Black);
|
||||
svg path {
|
||||
stroke: var(--Black);
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
color: var(--dark-color);
|
||||
@include transition3();
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--Primary);
|
||||
}
|
||||
&.bg-liner {
|
||||
background: linear-gradient(
|
||||
264deg,
|
||||
rgba(255, 255, 255, 0.1) -1.01%,
|
||||
rgba(255, 255, 255, 0) 149.68%
|
||||
);
|
||||
i {
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
color: var(--White);
|
||||
background-color: var(--dark-color);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--dark-color);
|
||||
@include transition3();
|
||||
&.swiper-button-disabled {
|
||||
background-color: var(--five);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--black);
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--White);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sw-progress {
|
||||
position: relative;
|
||||
height: 8px !important;
|
||||
width: 136px !important;
|
||||
.swiper-pagination-progressbar-fill {
|
||||
background-color: var(--Primary);
|
||||
}
|
||||
}
|
||||
|
||||
.sw-line {
|
||||
max-width: max-content;
|
||||
.swiper-pagination-bullet {
|
||||
width: 72px;
|
||||
border-radius: 25px;
|
||||
background-color: #6c6c6c;
|
||||
height: 8px;
|
||||
&.swiper-pagination-bullet-active {
|
||||
background-color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sw-dots {
|
||||
.swiper-pagination-bullet {
|
||||
background-color: var(--Mono-gray-7);
|
||||
opacity: 1;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
&.swiper-pagination-bullet-active {
|
||||
background-color: var(--Primary) !important;
|
||||
}
|
||||
}
|
||||
&.style-1 {
|
||||
.swiper-pagination-bullet {
|
||||
background-color: var(--Mono-gray-7);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
&.swiper-pagination-bullet-active {
|
||||
background-color: var(--White) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
248
public/scss/component/_tabs.scss
Normal file
248
public/scss/component/_tabs.scss
Normal file
@ -0,0 +1,248 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.nav-tabs-wrap {
|
||||
flex-wrap: nowrap;
|
||||
.nav-link {
|
||||
display: flex;
|
||||
}
|
||||
&.style-1 {
|
||||
.nav-link {
|
||||
width: 280px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
border-radius: 31px;
|
||||
@include transition3();
|
||||
svg {
|
||||
path,
|
||||
circle {
|
||||
@include transition3();
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--Primary);
|
||||
font-weight: 500;
|
||||
color: var(--White);
|
||||
svg {
|
||||
path,
|
||||
circle {
|
||||
stroke: var(--White);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 40px;
|
||||
.nav-link {
|
||||
width: 322px;
|
||||
flex-direction: column;
|
||||
text-align: start;
|
||||
color: var(--Black);
|
||||
padding: 0;
|
||||
gap: 17px;
|
||||
&:hover,
|
||||
&.active {
|
||||
.line {
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background-color: var(--Mono-gray-1);
|
||||
border-radius: 81px;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(
|
||||
90.05deg,
|
||||
#ff3a2d 0.09%,
|
||||
#ffa13f 99.81%
|
||||
);
|
||||
@include transition3();
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flat-animate-tab {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.tab-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.tab-pane {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(100px);
|
||||
z-index: 1;
|
||||
&.active {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-ms-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-tabs {
|
||||
&.style-1 {
|
||||
.widget-menu-tab {
|
||||
display: flex;
|
||||
gap: 43px;
|
||||
padding-bottom: 40px;
|
||||
margin-bottom: 44px;
|
||||
border-bottom: 1px solid var(--Mono-gray-4);
|
||||
.item-title {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
color: #474e5c;
|
||||
@include transition3;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: var(--White);
|
||||
@include transition3;
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--Primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.widget-content-tab {
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid var(--Mono-gray-2);
|
||||
}
|
||||
}
|
||||
.widget-content-tab {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.widget-content-inner {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
-webkit-transform: translateY(30px);
|
||||
-ms-transform: translateY(30px);
|
||||
transform: translateY(30px);
|
||||
transition-timing-function: ease-in;
|
||||
transition-duration: 0.2s;
|
||||
&.active {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-reviews {
|
||||
.tab-reviews-heading {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
flex-wrap: wrap;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
max-width: 597px;
|
||||
gap: 30px;
|
||||
.list-start {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
justify-content: center;
|
||||
margin-bottom: 7px;
|
||||
margin-top: 1px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
.ratings {
|
||||
i {
|
||||
color: #f4752d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rating-score {
|
||||
width: 100%;
|
||||
max-width: 365px;
|
||||
.item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.number-1 {
|
||||
width: 12px;
|
||||
text-align: end;
|
||||
}
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
margin-left: 1px;
|
||||
color: #f4752d;
|
||||
}
|
||||
.number-2 {
|
||||
width: 17px;
|
||||
}
|
||||
.line-bg {
|
||||
margin: 0 8px;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: #e9e9e9;
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
background-color: var(--Black);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-star {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
128
public/scss/component/_testimonial.scss
Normal file
128
public/scss/component/_testimonial.scss
Normal file
@ -0,0 +1,128 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
public/scss/component/_zoom.scss
Normal file
80
public/scss/component/_zoom.scss
Normal file
@ -0,0 +1,80 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.tf-zoom-main {
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
z-index: 50;
|
||||
.drift-zoom-pane {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 520px;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
box-shadow: 0 1px 5px #7f7f7f05, 0 5px 18px #7f7f7f33;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.drift-bounding-box.drift-open {
|
||||
background: #ffffff40;
|
||||
box-shadow: 0 0 0 1px #0006 inset;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.drift-zoom-pane {
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.section-image-zoom {
|
||||
.other-image-zoom {
|
||||
@include transition3;
|
||||
}
|
||||
&.zoom-active .other-image-zoom {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
background: var(--White);
|
||||
}
|
||||
|
||||
.pswp__icn {
|
||||
fill: rgb(34, 34, 34);
|
||||
color: var(--White);
|
||||
.pswp__icn-shadow {
|
||||
stroke: var(--White);
|
||||
stroke-width: 1px;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__counter {
|
||||
color: #222;
|
||||
text-shadow: 1px 1px 3px #ffffff;
|
||||
}
|
||||
|
||||
.tf-model-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
model-viewer {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
model-viewer {
|
||||
pointer-events: all;
|
||||
}
|
||||
.wrap-btn-viewer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user