PATH:
home
/
lab2454c
/
.trash
/
assets
/
templates
/
basic
/
frontend
/
sass
/
_layout
.product-item { padding: 15px; @include border-radius(5px); box-shadow: 0 0 .075rem #fff, 0 0 .075rem #fff, 0 0 .75rem rgba($color:$base-color, $alpha:.4), 0 0 0.3rem rgba($color:$base-color, $alpha:.4), 0 0 .9rem rgba($color:$base-color, $alpha:.4), inset 0 0 .6rem rgba($color:$base-color, $alpha:.4); .product-thumb { @include border-radius(5px); overflow: hidden; margin-bottom: 15px; img { width: 100%; } } .countdown { margin-bottom: 10px; li { margin-bottom: 10px; } } .meta-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; li { a { font-size: 14px; display: inline-flex; align-items: center; color: $body-color; i { color: $base-color; font-size: 18px; line-height: 1; margin-right: 5px; } } .buy-now { color: $white-color; background: $base-color; padding: 5px 15px; @include border-radius(2px); } } } .ratings { span { i { font-size: 15px; } } } @include breakpoint(max-xxl) { @include breakpoint(xl) { } } @include breakpoint(max-md) { max-width: 400px; margin: 0 auto; } } .countdown { text-align: center; display: flex; justify-content: space-between; margin: 0 -5px; li { padding: 0 5px; } &__title { margin: 0 auto 15px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px dashed rgba($color:$base-color, $alpha:.7); @include border-radius(50%); } color: $body-color; text-transform: capitalize; font-size: 14px; } .ratings { i { color: $star; } } .slide-item { padding: 12px; } .slider-wrapper { margin: -12px; .owl-nav { display: flex; position: absolute; bottom: calc(100% + 30px); right: 12px; .owl-next, .owl-prev { font-size: 24px; font-weight: 700; cursor: pointer; } .owl-prev { margin-right: 5px; } } @include breakpoint(max-sm) { .title { font-size: 16px; padding: 10px 40px 6px 18px; } } } /*How Section Starts Here*/ .how__wrapper { counter-reset: how; display: flex; flex-wrap: wrap; justify-content: center; max-width: 1100px; margin: 0 auto -30px; } @keyframes arrow { 0% { background-position: 22%; }100% {background-position: 75% } } .how__item { counter-increment: how; text-align: center; width: calc(100% / 3); padding: 0 25px 30px; position: relative; &::before { position: absolute; content: ''; width: 100%; height: 20px; background: url(./img/arrow.png) no-repeat center center; background-size: contain; top: 50px; animation: arrow 3s linear infinite; } .how__icon { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 42px; line-height: 1; color: $white-color; z-index: 2; position: relative; span { font-family: $heading; } i { padding-top: 10px; position: relative; z-index: 1; } &::after { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url(./img/how1.png); mask-image: url(./img/how1.png); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: rgba($color:$base-color, $alpha:.1); position: absolute; content: ""; inset: 0; } &::before { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url(./img/how2.png); mask-image: url(./img/how2.png); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; background: $white-color; mask-repeat: no-repeat; position: absolute; content: ""; inset: 0; z-index: 1; } } .title { margin-bottom: 15px; } &:last-child { &::before { display: none; } } @include breakpoint(max-lg) { width: 50%; &:nth-of-type(even) { &::before { display: none; } } } @include breakpoint(max-md) { width: 100%; &::before { display: none; } } @media screen and (max-width:375px) { padding-left: 0; padding-right: 0; } } .client-item { max-width: 920px; margin: 0 auto; text-align: center; .subtitle { display: block; } blockquote { font-size: 18px; font-family: $heading; margin-bottom: 30px; position: relative; &::before { display: block; content: "\f10d"; font-family: "Line Awesome Free"; font-weight: 700; font-size: 80px; line-height: 1; z-index: -1; color: rgba($color:$base-color, $alpha:1); margin-bottom: 10px; } @include breakpoint(max-sm) { font-size: 16px; } } } .client--thumb { width: 100%; @include breakpoint(max-lg) { max-width: 450px; margin: 0 auto 20px; display: block; } } .owl-dots { display: flex; margin-top: 30px; justify-content: center; .owl-dot { width: 15px; height: 15px; background: $base-color; @include border-radius(50%); @include transform(scale(.4)); @include transition($transition); &.active { @include transform(scale(1)) } } } .counter__item { padding: 15px; @include border-radius(5px); display: flex; height: 100%; .counter__icon { width: 90px; height: 90px; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 36px; position: relative; color: $base-color; &::before { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url(./img/counter.png); mask-image: url(./img/counter.png); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: rgba($color:$white-color, $alpha:.1); position: absolute; content: ""; inset: 0; } } .subtitle { font-weight: 500; font-size: 16px; line-height: 1.3; margin: 0; position: relative; font-weight: 500; color: $base-color; } .title { font-size: 22px; line-height: 1; margin: 0; margin-bottom: 5px; } box-shadow: 0 0 .075rem rgba($color:$white-color, $alpha:.6), 0 0 .075rem rgba($color:$white-color, $alpha:.6), 0 0 5px rgba($color:$base-color, $alpha:.3), 0 0 8px rgba($color:$base-color, $alpha:.3), 0 0 10px rgba($color:$base-color, $alpha:.3); align-items: center; @include transition($transition); .counter__content { width: calc(100% - 90px); padding-top: 5px; padding-left: 5px; } &:hover { @include transform(translateY(-10px)); } } .partner--txt { margin-bottom: 30px; } .partner--list { li { position: relative; display: flex; padding-left: 20px; &:last-child { padding-bottom: 0; } &::before { content: ""; left: 0; top: 13px; width: 5px; height: 5px; @include border-radius(50%); background: $base-color; position: absolute; } position: relative; } } .sponsor-wrapper { @extend %flex; justify-content: center; margin: -12px; .sponsor-thumb { padding: 12px; width: calc(100% / 3); img { width: 100%; height: 50px; object-fit: contain; object-position: center; @include transition($transition); &:hover { filter: brightness(100); } } &:nth-child(5) { img {filter: brightness(100);} } } @media screen and (max-width:450px) { .sponsor-thumb { width: calc(50%); } } } .account-logo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; @include breakpoint(max-sm) { margin-bottom: 40px; } } .account-section { padding: 50px; @include breakpoint(max-md) { padding: 40px 0; } } .account-wrapper { @include border-radius(40px); .left-side { background: #042444; background : linear-gradient(0deg, #042444 0%, #04245c 100%); padding: 60px 40px; @include border-radius(40px 0 0 40px); border-right: 1px solid rgba($color:$white-color, $alpha:.07); } .right-side { background: #04245c; background : linear-gradient(180deg, #042444 0%, #04245c 100%); padding: 60px 20px; @include border-radius(0 40px 40px 0); @include breakpoint(xxl) { padding: 60px 30px; } } .row.flex-row-reverse { @include breakpoint(lg) { .left-side { @include border-radius(0 40px 40px 0); } .right-side { @include border-radius(40px 0 0 40px); } } } .select-bar { height: 35px; padding: 0 5px; outline: none; border-color: rgba($color:$white-color, $alpha:.1); background: transparent; color: $white-color; @include border-radius(4px); option { background: $dark-color; } } @include breakpoint(max-lg) { @include border-radius(30px); .left-side { @include border-radius(30px 30px 0 0); border-right: none; border-bottom: 1px solid rgba($color:$white-color, $alpha:.1); } .right-side { @include border-radius(0 0 30px 30px); } } @include breakpoint(max-sm) { .left-side { padding: 35px 15px 40px; } .right-side { padding: 45px 15px 40px; } } } .account-header { margin-bottom: 50px; .logo { width: calc(100% - 100px); img { max-width: 100%; } } .title { font-weight: 500; margin-bottom: 15px; } } .form--label { font-family: $heading; color: $white-color; display: block; cursor: pointer; margin-bottom: 0; } .form-group { margin-bottom: 28px; } .form--control { background: transparent; outline: none; border: none; border-bottom: 1px solid rgba($color:$white-color, $alpha:.3); @include border-radius(0); padding: 0; height: 35px; color: $white-color; &:focus { box-shadow: none; background: transparent; color: $white-color; } } textarea { &.form--control { height: 120px; } } .type-change { position: absolute; bottom: 0; right: 0; line-height: 40px; width: 40px; text-align: center; cursor: pointer; } .form--check { margin: 0; align-items: center; label { padding-top: 1px; cursor: pointer; } .form-check-input:checked { background-color: $base-color; border-color: $base-color; } .form-check-input:checked:focus { box-shadow: 0 0 0 0.25rem rgba($color:$base-color, $alpha:.25); } } .recent__logins { .item { text-align: center; padding: 12px; .thumb { padding: 10px; @include border-radius(50%); border: 1px solid $base-color; max-width: 120px; max-height: 120px; margin: 0 auto 25px; position: relative; img { width: 100%; height: 100%; object-fit: cover; @include border-radius(inherit); } position: relative; .hide-btn { position: absolute; right: 10px; top: 0; background: $base-color; color: $white-color; width: 25px; height: 25px; line-height: 25px; text-align: center; @include border-radius(50%); cursor: pointer; } } .name { font-weight: 500; font-size: 18px; font-family: $heading; } } } .account-section { min-height: 100vh; } .contact__info-item { &:not(:last-child) { margin-bottom: 40px; } .title { margin-bottom: 5px; } ul { li { max-width: 260px; padding: 0; &:not(:last-child) { margin-bottom: 10px; }a { color: $body-color; } i { margin-right: 5px; color: $base-color; } } } } .maps { height: 400px; @include border-radius(10px); } .account-wrapper { position: relative; z-index: 9; } /*About Section Starts Here*/ .about-content { .para { margin: 0; } .para:not(:last-child) { margin-bottom: 20px; @include breakpoint(max-sm) { margin-bottom: 16px; } } ul { @extend %flex; li { width: 100%; max-width: 220px; padding-right: 5px; &::before { content: "\f061"; font-family: "Line Awesome Free"; font-weight: 700; color: $theme-one; font-size: 18px; } } } } @include breakpoint(max-lg) { .about-content { margin-bottom: 50px; } .about-thumb { img { width: 100%; } } } @include breakpoint(max-sm) { .about-content { margin-bottom: 30px; } } .about-thumb { position: relative; @include breakpoint(sm) { .watch__video { position: absolute; bottom: 0; left: 0; } } } .watch__video { display: flex; align-items: center; a.video__btn { transform: translate(0, 0); } .watch__content { padding-left: 20px; .watch__title {margin: 0;margin-top: 5px;} } } /*Faq Section Starts Here*/ .faq__item { background: $section-bg; border: 1px solid rgba($color:$white-color, $alpha:.2); @include border-radius(5px); &:not(:last-child) { margin-bottom: 20px; } .faq__title { margin: 0; padding: 15px 40px 15px 20px; position: relative; cursor: pointer; @include transition($transition); &::before, &::after { @extend %pa; background: $white-color; right: 24px; top: 28px; @include transform(translate(50%, -50%)); @include transition($transition); } &::before { width: 22px; height: 2px; } &::after { height: 22px; width: 2px; } } .faq__content { display: none; padding: 30px 20px; } &.open { .faq__title { padding: 10px 40px 10px 20px; @include border-radius(5px 5px 0 0); background: $theme-one; &::after { height: 0; } &::after, &::before { top: 22px; } } } &.active { .faq__content { display: block; } } } .bg--section { .faq__item { background: $body-bg; } } .dashboard__item { display: flex; align-items: center; padding: 30px; @include border-radius(10px); height: 100%; box-shadow: 0 0 .075rem #fff, 0 0 .075rem #fff, 0 0 .75rem rgba($color:$base-color, $alpha:.4), 0 0 0.3rem rgba($color:$base-color, $alpha:.4), 0 0 .9rem rgba($color:$base-color, $alpha:.4), inset 0 0 .6rem rgba($color:$base-color, $alpha:.4); .content { width: calc(100% - 60px); padding-inline-end: 15px; .subtitle { display: block; margin-bottom: 20px; } .title { line-height: 1; } } .thumb { height: 60px; width: 60px; line-height: 60px; text-align: center; @include border-radius(50%); font-size: 30px; color: $base-color; border: 1px solid rgba($color:$base-color, $alpha:.2); } @include breakpoint(lg) { @include breakpoint(max-xl) { padding: 30px 15px; } } } .wish-item { @extend %flex; align-items: center; padding: 10px; border: 1px solid rgba($color:$base-color, $alpha:.4); @include border-radius(5px); background: $section-bg; .wish-thumb { width: 80px; height: 80px; @include border-radius(5px); overflow: hidden; img { width: 100%; height: 100%; object-fit: cover; } } .wish-content { width: calc(100% - 100px); padding-inline-start: 20px; .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; font-size: 18px; } .price { font-size: 18px; } } color: $body-color; } .wish-title { margin-bottom: 20px; } .cmn--table { margin: 0; border: none; @include border-radius(5px); background: $section-bg; thead { tr { th { font-family: $heading; padding: 10px; text-align: center; border: none; background: rgba($color:$base-color, $alpha:.9); color: $white-color; &:not(:last-child) { border-right: 1px solid rgba($color:$white-color, $alpha:.3); } &:first-child { @include border-radius(5px 0 0 0); } &:last-child { @include border-radius(0 5px 0 0); } } } } tbody { text-align: center; tr { td { color: $body-color; .badge { text-transform: capitalize; } vertical-align: middle; padding: 8px 5px; border-color: rgba($color:$white-color, $alpha:.1); .btn { font-size: 13px; padding: 5px; line-height: 16px; } &:not(:last-child) { border-right: 1px solid rgba($color:$white-color, $alpha:.1); } .date { font-size: 14px; } } } } @include breakpoint(lg) { border-right: 1px solid rgba($color:$white-color, $alpha:.1); border-left: 1px solid rgba($color:$white-color, $alpha:.1); .details { max-width: 260px; margin: 0 auto; font-size: 14px; } } @include breakpoint(max-lg) { thead { display: none; } tbody { tr { display: block; &:first-child { border-top: 1px solid rgba($color:$white-color, $alpha:.1); } td { display: flex; align-items: center; justify-content: space-between; border-left: 1px solid rgba($color:$white-color, $alpha:.1); border-right: 1px solid rgba($color:$white-color, $alpha:.1); padding: 10px 15px; text-align: right; &::before { content: attr(data-label); margin-right: 10px; color: $title-color; } } &:nth-child(even) { background: rgba($color:$white-color, $alpha:.05); backdrop-filter: blur(15px); } } } } } .bg--section { .cmn--table { background: $body-bg; } } .custom--card { height: 100%; border: 1px solid rgba($color:$white-color, $alpha:.1); background: $section-bg; .card-header { background: rgba($color:$title-color, $alpha:.05); // margin-left: -1px; // margin-right: -1px; padding: 10px; .card-title { text-align: center; margin: 0; color: $white-color; font-size: 18px; } } .card-footer { text-align: center; background: transparent; } .form--control[readonly] { background: $body-bg; } } .deposit-card { margin: 0 auto; max-width: 350px; .card-header { background: rgba($color:$white-color, $alpha:.1); } } .modal { z-index: 9999; } .custom--modal { .modal-footer, .modal-header { background: $section-bg; border-color: rgba($color:$white-color, $alpha:.1); .modal-title { margin: 0; } .btn-close { background: transparent; font-size: 20px; line-height: 1; color: $danger-color; opacity: 1; } } .modal-content { background: $body-bg; box-shadow: 0 0 .075rem #fff, 0 0 .075rem #fff, 0 0 .75rem rgba($color:$base-color, $alpha:.2), 0 0 0.3rem rgba($color:$base-color, $alpha:.2), 0 0 .9rem rgba($color:$base-color, $alpha:.2), inset 0 0 .6rem rgba($color:$base-color, $alpha:.2); } } .h--50px { height: 50px !important; } .custom--card { .meta-info { @extend %flex; justify-content: space-between; padding: 10px 10px 0; .item { margin-bottom: 10px; color: $title-color; font-weight: 500; font-family: $heading; } } } .deposit-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 25px; .input-group { width: calc(100% - 200px); } .deposit--label { max-width: 200px; font-family: $heading; } @include breakpoint(max-md) { .input-group { width: calc(100% - 160px); } .deposit--label { max-width: 160px; } } @include breakpoint(max-sm) { .input-group, .deposit--label { width: 100%; } .deposit--label { margin-bottom: 10px; } } } .input-group { .input-group-text { &.bg-transparent { border-color: rgba($color:$white-color, $alpha:.2); } } } .user--thumb { text-align: center; border-right: 1px solid rgba($color:$white-color, $alpha:.1); .title { margin-bottom: 15px; } .thumb { @include border-radius(50%); overflow: hidden; width: 120px; height: 120px; margin: 0 auto 30px; img { width: 100%; height: 100%; object-fit: cover; } } } .profle-wrapper { @include breakpoint(lg) { padding-left: 100px; } } textarea.form--control-2 { height: 120px; padding: 15px; } .form--control-2 { background: $section-bg; border: 1px solid rgba($color:$white-color, $alpha:.1); color: $white-color !important; height: 45px; width: 100%; @include border-radius(5px); padding: 0 15px; &::placeholder { color: $body-color; } &:focus { box-shadow: none; } &[type="file"] { height: unset; line-height: 20px; padding: 12px 20px; } } .support-ticket-header { margin: -5px; align-items: center; .card-title, .cmn--btn { margin: 5px !important; } .cmn--btn { font-size: 14px; padding: 10px 15px 6px; } } .support__wrapper { &-area { li { display: flex; flex-wrap: wrap; padding: 0; &:not(:last-child) { margin-bottom: 15px; } .message-txt { padding: 25px 20px 40px; background: rgba($color:$white-color, $alpha:.1); max-width: 80%; @include border-radius(15px 15px 15px 0); img { width: 100%; object-fit: contain; max-height: 320px; } position: relative; .date { font-size: 12px; position: absolute; right: 30px; bottom: 15px; color: rgba($color:$base-color, $alpha:.5); } @include breakpoint(max-sm) { max-width: 92%; font-size: 14px; } } &.right-message { .message-txt { margin-left: auto; @include border-radius(15px 15px 0 15px); background: rgba($color:$white-color, $alpha:.04); } } } } } .support--card-wrapper { max-width: 820px; margin: 0 auto; } .chat-form { padding: 10px; background: rgba($color:$white-color, $alpha:.1); .input--group { .add-file-icon { width: 40px; height: 45px; line-height: 45px; color: $white-color; cursor: pointer; } input { border-radius: 5px !important; margin: 0 15px; background: $body-bg; height: 50px; } .input-group-text { font-size: 30px; padding: 0; background: transparent !important; } .other-files { margin-right: 10px; .file-item { label { width: 46px; height: 46px; line-height: 46px; text-align: center; background: rgba($color:$white-color, $alpha:.1); @include border-radius(2px); cursor: pointer; z-index: 999; position: relative; } } } } }
[-] _blog.scss
[edit]
[-] _section.scss
[edit]
[-] _banner.scss
[edit]
[+]
..
[-] _forms.scss
[edit]
[-] _sidebar.scss
[edit]
[-] _animation.scss
[edit]
[-] _header.scss
[edit]
[-] _footer.scss
[edit]