first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,97 @@
|
||||
//
|
||||
// _authentication.scss
|
||||
//
|
||||
.auth-page-wrapper {
|
||||
padding: 90px 0 80px;
|
||||
|
||||
.auth-header {
|
||||
.container-fluid {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1;
|
||||
|
||||
.card-header {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1000' height='350' preserveAspectRatio='none' viewBox='0 0 1000 350'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1157%26quot%3b)' fill='none'%3e%3cpath d='M328.58 394.08C431.67 392.73 512.94 277.58 722.85 273.08 932.75 268.58 1010.02 108.53 1117.11 105.08' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M453.78 394.57C543.12 393.38 614.47 292.66 795.29 289.27 976.11 285.88 1045.21 158.59 1136.8 156.27' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M121.76 365.13C209.07 363.92 287.72 260.74 455.05 260.68 622.38 260.62 621.7 304.43 788.34 304.43 954.99 304.43 1037.59 260.77 1121.63 260.68' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M476.17 407.18C572.4 393.77 628.5 169.12 783.24 168.97 937.99 168.82 1003.77 325.19 1090.32 329.97' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M409.3 365.09C484.19 357.63 470.42 198 659.61 197.82 848.8 197.64 1033.73 271.12 1160.23 271.32' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1157'%3e%3crect width='1000' height='350' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
// auth-pass-inputgroup
|
||||
.auth-pass-inputgroup {
|
||||
input[type="text"]+.btn .ri-eye-fill {
|
||||
&:before {
|
||||
content: "\ecb6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// signin card title
|
||||
.signin-other-title {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px dashed var(--#{$prefix}border-color);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
padding: 2px 16px;
|
||||
}
|
||||
}
|
||||
//passowrd validations
|
||||
#password-contain {
|
||||
display: none;
|
||||
|
||||
p {
|
||||
padding-left: 13px;
|
||||
|
||||
&.valid {
|
||||
color: $success;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
color: $danger;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✖";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-addon {
|
||||
z-index: 5;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.categrory-widgets {
|
||||
position: relative;
|
||||
|
||||
.category-img {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 0;
|
||||
max-width: 120px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
#remove-actions {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// _coming-soon.scss
|
||||
//
|
||||
|
||||
// countdownlist
|
||||
|
||||
.countdownlist {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
|
||||
.countdownlist-item {
|
||||
width: 25%;
|
||||
|
||||
&:last-of-type {
|
||||
.count-num {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-semibold;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: 16px 10px;
|
||||
position: relative;
|
||||
border-radius: $card-border-radius;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 32px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// coming soon
|
||||
|
||||
.move-animation {
|
||||
animation: mover 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes mover {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-input-subscribe {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 50px;
|
||||
padding-right: 95px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown {
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.countdownlist{
|
||||
.countdownlist-item{
|
||||
.count-title{
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
//
|
||||
// _dashboard.scss
|
||||
//
|
||||
|
||||
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dash-avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.widget-responsive-fullscreen {
|
||||
@media (min-width: 1200px) and (max-width: 1440px) {
|
||||
.col-xxl-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
width: 33.33%;
|
||||
&:first-child {
|
||||
-webkit-box-ordinal-group: 7!important;
|
||||
-ms-flex-order: 6!important;
|
||||
order: 6!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,619 @@
|
||||
//
|
||||
// _ecommerce.scss
|
||||
//
|
||||
|
||||
//ecommerce landing page
|
||||
|
||||
#ecommerceHero {
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: $primary;
|
||||
top: 43%;
|
||||
border-radius: $border-radius;
|
||||
font-size: 24px;
|
||||
transition: all 0.5s ease;
|
||||
transform: rotate(45deg);
|
||||
|
||||
i {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
right: 45px;
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-home {
|
||||
position: relative;
|
||||
padding: 160px 0 90px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 710px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width:1200px) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-banner-1 {
|
||||
position: relative;
|
||||
|
||||
.product-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
background: linear-gradient(270deg, $black, transparent);
|
||||
}
|
||||
|
||||
.blue {
|
||||
&.bg-overlay {
|
||||
background: linear-gradient(45deg, #0764619c, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.product-content {
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about {
|
||||
padding: 180px 0 85px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.effect {
|
||||
.ecommerce-effect {
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
filter: grayscale(33%) blur(40px);
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: 150px;
|
||||
|
||||
&:last-child {
|
||||
bottom: 20px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about-team {
|
||||
position: relative;
|
||||
padding: 150px 0 100px;
|
||||
|
||||
.team-box {
|
||||
.team-img {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $success;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $danger;
|
||||
left: 38%;
|
||||
bottom: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about-cta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
|
||||
.ecommerce-subscript {
|
||||
input {
|
||||
padding: 15px 105px 15px 24px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-product {
|
||||
display: flex;
|
||||
|
||||
.sidebar {
|
||||
width: 350px;
|
||||
|
||||
&.small-sidebar {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.offer-bar {
|
||||
width: 350px;
|
||||
|
||||
.offer-banner {
|
||||
height: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar,
|
||||
.offer-bar,
|
||||
.sidebar.small-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1440px) {
|
||||
.offer-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//ecommerce widgets
|
||||
.clothe-colors {
|
||||
li {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label,
|
||||
input[type="checkbox"]:checked+label {
|
||||
&::after {
|
||||
content: "\f33e";
|
||||
font-family: Phosphor;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clothe-size {
|
||||
li {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label,
|
||||
input[type="checkbox"]:checked+label {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-banner-2 {
|
||||
.product-content {
|
||||
position: absolute;
|
||||
right: 102px;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
|
||||
@media (max-width:425px) {
|
||||
right: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// product create
|
||||
|
||||
.error-msg {
|
||||
display: none;
|
||||
color: var(--#{$prefix}danger-text);
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
.was-validated .error-msg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Product
|
||||
.categories-filter {
|
||||
.list-inline-item {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: 8px 15px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-lable {
|
||||
transform: rotate(-90deg) translateX(-60%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.element-item {
|
||||
transition: all 0.5s;
|
||||
|
||||
.gallery-product {
|
||||
img {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
transition: all 0.5s;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gallery-product-actions {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
opacity: 0;
|
||||
|
||||
.product-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.gallery-product {
|
||||
img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-product-actions {
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
transform: translateY(-27px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ecommerce-product-widgets {
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-deals-widgets {
|
||||
.gallery-product {
|
||||
img {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-deals {
|
||||
.count-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
font-size: 18px;
|
||||
background-color: rgba($white, 0.6);
|
||||
filter: blur(15%);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: -120px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// product slider
|
||||
|
||||
.latest-slider {
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
right: 55px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Testimonial client
|
||||
.testi-slider {
|
||||
.swiper-pagination {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0px 7px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -5px;
|
||||
right: 0;
|
||||
border: 2px solid $secondary;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-box {
|
||||
.client-desc {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 60px;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
transform: rotate(67deg);
|
||||
border-color: transparent var(--#{$prefix}border-color) var(--#{$prefix}border-color) transparent;
|
||||
bottom: -30px;
|
||||
left: 80px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-images {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
max-height: 40px;
|
||||
width: 200px;
|
||||
margin: 6px auto;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
// Landing contdown
|
||||
.ecommerce-land-countdown {
|
||||
.countdownlist {
|
||||
.count-num {
|
||||
background-color: rgba($danger, 0.1);
|
||||
padding: 16px 8px;
|
||||
font-size: 22px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 16px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// INSTAGRAM
|
||||
.insta-img {
|
||||
background-color: $secondary;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
i {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease;
|
||||
font-size: 35px;
|
||||
color: $white;
|
||||
transform: scale(1.5) rotate(-15deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.2) rotate(-3deg);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// blog
|
||||
.blog-date {
|
||||
width: 60px;
|
||||
height: 68px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
margin-top: -70px;
|
||||
padding: 8px 0;
|
||||
border-top: 4px solid $primary;
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
// insta
|
||||
.insta-lable {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.categrory-box {
|
||||
position: relative;
|
||||
|
||||
.categrory-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
transition: all 0.5s ease-in;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.categrory-content {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sticky-side-div {
|
||||
position: sticky;
|
||||
top: calc(#{$header-height} + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
// product details
|
||||
.productSwiper {
|
||||
.swiper-slide {
|
||||
@media (min-width: 768px) {
|
||||
height: 80px !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-thumb {
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
&.swiper-slide-thumb-active {
|
||||
.product-thumb {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delivery page
|
||||
@@ -0,0 +1,44 @@
|
||||
//
|
||||
// _errors.scss
|
||||
//
|
||||
|
||||
.error-basic-img{
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.error-500 {
|
||||
.title {
|
||||
font-size: 250px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.title {
|
||||
font-size: 150px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
width: 20% !important;
|
||||
top: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.title {
|
||||
font-size: 68px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
//
|
||||
// _extra-pages.scss
|
||||
//
|
||||
|
||||
.term-condition {
|
||||
position: relative;
|
||||
padding: 160px 0 300px 0;
|
||||
}
|
||||
|
||||
.term-card {
|
||||
position: relative;
|
||||
margin-top: -215px;
|
||||
}
|
||||
|
||||
//contact
|
||||
.map {
|
||||
line-height: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.productswiper-2 {
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-widget {
|
||||
.brand-img {
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 135px;
|
||||
min-width: 200px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 135px;
|
||||
width: 360px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.chat-conversation {
|
||||
height: calc(100vh - 299px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 275px);
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.simplebar-content {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation-list {
|
||||
padding-top: 10px;
|
||||
margin-bottom: 0;
|
||||
|
||||
>li {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:last-of-type {
|
||||
.conversation-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
|
||||
&.left {
|
||||
.check-message-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box-drop {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.message-box-drop {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
margin: 0 16px 0 0
|
||||
/*rtl:0 0 0 16px*/
|
||||
;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-day-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($primary, 0.2);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
margin-bottom: 24px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: flex-end;
|
||||
max-width: 85%;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.ctext-wrap {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctext-content {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ctext-wrap-content {
|
||||
padding: 12px 20px;
|
||||
background-color: var(--#{$prefix}light);
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.attached-file {
|
||||
@media (max-width: 575.98px) {
|
||||
.attached-file-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
font-weight: $font-weight-medium;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
color: $gray-600;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-img {
|
||||
border-radius: .2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.message-img-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.message-img-link {
|
||||
position: absolute;
|
||||
right: 10px
|
||||
/*rtl:auto*/
|
||||
;
|
||||
left: auto
|
||||
/*rtl:0*/
|
||||
;
|
||||
bottom: 10px;
|
||||
|
||||
li {
|
||||
>a {
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.chat-avatar {
|
||||
order: 3;
|
||||
margin-right: 0px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
text-align: left;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
text-align: right;
|
||||
|
||||
.ctext-wrap {
|
||||
justify-content: flex-end;
|
||||
|
||||
.ctext-wrap-content {
|
||||
order: 2;
|
||||
background-color: rgba($primary, 0.2);
|
||||
color: $primary;
|
||||
text-align: right;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.replymessage-block {
|
||||
background-color: rgba($white, 0.5);
|
||||
border-color: rgba(var(--vz-success-rgb), 1);
|
||||
color: $body-color;
|
||||
|
||||
.conversation-name {
|
||||
color: rgba(var(--vz-success-rgb), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
justify-content: flex-end;
|
||||
|
||||
.check-message-icon {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.time {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.name {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#subscribeModal {
|
||||
img {
|
||||
@media (min-width: 992px) {
|
||||
margin-top: -140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-cta {
|
||||
overflow-x: clip;
|
||||
|
||||
img {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
//
|
||||
// _fashion.scss
|
||||
//
|
||||
|
||||
//modern fashion-home
|
||||
.modern-fashion-home{
|
||||
.font-effect {
|
||||
font-size: 14rem;
|
||||
opacity: 0.04;
|
||||
top: 50px;
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-home-img {
|
||||
img {
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-slider {
|
||||
:is(.swiper-button-next, .swiper-button-prev) {
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:is(.swiper-button-next, .swiper-button-prev) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-input {
|
||||
input {
|
||||
padding: calc($input-padding-y * 1.1) calc($input-padding-x * 1.1);
|
||||
padding-right: 145px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
//modern fashion home
|
||||
.modern-fashion-home {
|
||||
position: relative;
|
||||
padding: 170px 0 80px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 50px solid $warning;
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: -90px;
|
||||
top: -90px;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -120px;
|
||||
bottom: -120px;
|
||||
height: 350px;
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.fashion-offer-widgets {
|
||||
height: 250px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
position: relative;
|
||||
padding: 150px 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
//products
|
||||
.product-widget {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.product-menu {
|
||||
position: absolute;
|
||||
right: calc($card-spacer-x * -0.5);
|
||||
top: calc($card-spacer-y * 0.5);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
li {
|
||||
a {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
&:hover {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $warning;
|
||||
|
||||
i {
|
||||
&::before {
|
||||
content: "\f586";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
position: absolute;
|
||||
bottom: calc($card-spacer-y * -0.5);
|
||||
left: calc($card-spacer-x * 0.5);
|
||||
right: calc($card-spacer-x * 0.5);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
transition: all 0.5s ease;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $box-shadow-lg;
|
||||
|
||||
.product-menu {
|
||||
right: calc($card-spacer-x * 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
opacity: 1;
|
||||
bottom: calc($card-spacer-y * 0.5);
|
||||
}
|
||||
|
||||
.product-img-main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-product {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//category
|
||||
.category-widgets-main {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.widgets-wrapper {
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.effect::before,
|
||||
.effect::after {
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
}
|
||||
|
||||
.effect::before {
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.effect::after {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:hover::after {
|
||||
width: calc(100% - 20px);
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&:hover .effect::before,
|
||||
&:hover .effect::after {
|
||||
top: 10px;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//trend fashion home
|
||||
|
||||
.trend-fashion-home {
|
||||
position: relative;
|
||||
padding: 105px 0 60px;
|
||||
}
|
||||
|
||||
.home-widgets {
|
||||
min-height: 85vh;
|
||||
height: 400px;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// _invoice.scss
|
||||
//
|
||||
|
||||
.invoice-table {
|
||||
tbody {
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currency-select {
|
||||
.choices__inner {
|
||||
padding: 0px;
|
||||
padding-right: 15px;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
padding: 0px 16px 0 4px;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] {
|
||||
bottom: 0px;
|
||||
|
||||
:after {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
//
|
||||
// _profile.scss
|
||||
//
|
||||
|
||||
.profile-user {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.profile-photo-edit {
|
||||
position: absolute;
|
||||
right: $card-spacer-x;
|
||||
left: auto;
|
||||
top: $card-spacer-y;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-basic{
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
//account
|
||||
|
||||
.profile-user-img {
|
||||
img {
|
||||
height: 285px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
//activity-timeline
|
||||
.acitivity-timeline {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.acitivity-item {
|
||||
position: relative;
|
||||
|
||||
.flex-shrink-0 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.acitivity-avatar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
margin-top: 8px;
|
||||
background-color: $body-secondary-bg;
|
||||
border: 1px solid $primary;
|
||||
box-shadow: rgba($primary, 0.2) 2px 2px, rgba($primary, 0.1) 4px 4px, rgba($primary, 0.05) 6px 6px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px dashed var(--#{$prefix}border-color);
|
||||
left: 4px;
|
||||
height: 100%;
|
||||
top: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
//
|
||||
// _sellers.scss
|
||||
//
|
||||
|
||||
.seller-search-box {
|
||||
.form-control {
|
||||
height: 50px;
|
||||
padding-left: 40px;
|
||||
padding-right: 110px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
i {
|
||||
left: 12px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.order-tracking {
|
||||
.is-complete {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
outline: 6px solid var(--#{$prefix}body-bg);
|
||||
background-color: var(--#{$prefix}light);
|
||||
margin: 0 auto;
|
||||
transition: background 0.25s linear;
|
||||
-webkit-transition: background 0.25s linear;
|
||||
z-index: 2;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 14px;
|
||||
width: 7px;
|
||||
top: -2px;
|
||||
bottom: 0;
|
||||
left: 11px;
|
||||
margin: auto 0;
|
||||
border: 0px solid var(--#{$prefix}secondary-color);
|
||||
border-width: 0px 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.is-complete {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
|
||||
&::after {
|
||||
border-color: $white;
|
||||
border-width: 0px 2px 2px 0;
|
||||
width: 7px;
|
||||
left: 11px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 115%;
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
right: -70%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.track-orders {
|
||||
.order-tracking::before {
|
||||
width: 150%;
|
||||
right: -104%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
//
|
||||
// _watch.scss
|
||||
//
|
||||
|
||||
//watch layout
|
||||
.watch-layout {
|
||||
position: relative;
|
||||
padding: 175px 0 130px;
|
||||
min-height: 80vh;
|
||||
background-image: url('../images/watch/home.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
//watch category
|
||||
.watch-category-widgets {
|
||||
.category-btn {
|
||||
margin-top: -3.8rem;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.category-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-watch {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba($primary, 0.04);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watch-cta {
|
||||
padding: 100px 0 185px;
|
||||
background-image: url('../images/watch/cta.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
position: relative;
|
||||
margin-top: -6.5rem;
|
||||
}
|
||||
|
||||
.video-main {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.waves {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: rgba($gray-900, 0.3);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
right: -34px;
|
||||
bottom: -34px;
|
||||
z-index: 0;
|
||||
animation: waves 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.wave-3 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes waves {
|
||||
0% {
|
||||
transform: scale(0.2, 0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.watch-product {
|
||||
.watch-widgets-menu {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.watch-widgets-menu {
|
||||
opacity: 1;
|
||||
bottom: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watch-widgets-menu {
|
||||
a {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
&:hover {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $warning;
|
||||
|
||||
i {
|
||||
&::before {
|
||||
content: "\f586";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user