150 lines
2.9 KiB
SCSS
150 lines
2.9 KiB
SCSS
// Extend default Bootstrap's card compopnent
|
|
|
|
// Header navs
|
|
|
|
.card-header-nav-underline {
|
|
--#{$prefix}nav-link-padding-y: calc(1.25 * var(--#{$prefix}card-cap-padding-y));
|
|
|
|
margin: calc(-1 * var(--#{$prefix}card-cap-padding-y)) calc(-.125 * var(--#{$prefix}card-cap-padding-x));
|
|
}
|
|
|
|
.card-header-tabs {
|
|
--#{$prefix}nav-tabs-padding: var(--#{$prefix}card-cap-padding-y);
|
|
|
|
margin: calc(-1 * var(--#{$prefix}card-cap-padding-y)) calc(-1 * var(--#{$prefix}card-cap-padding-x));
|
|
@include border-bottom-radius(0);
|
|
}
|
|
|
|
|
|
// Shop product card
|
|
|
|
.product-card {
|
|
position: relative;
|
|
|
|
.product-card-details {
|
|
display: none;
|
|
}
|
|
|
|
&.hover-effect-opacity .hover-effect-target {
|
|
transition: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:has(.select-card-check:checked) {
|
|
@include media-breakpoint-up(lg) {
|
|
z-index: 2;
|
|
box-shadow: var(--#{$prefix}box-shadow);
|
|
}
|
|
}
|
|
|
|
&:hover .product-card-button,
|
|
.count-input:not(.collapsed) .product-card-button {
|
|
@extend .btn-primary;
|
|
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include media-breakpoint-up(lg) {
|
|
.product-card-details {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.hover-effect-underline {
|
|
text-decoration: underline !important;
|
|
text-decoration-thickness: var(--#{$prefix}underline-thickness) !important;
|
|
}
|
|
|
|
.count-input .form-control,
|
|
[data-decrement] {
|
|
transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
|
|
}
|
|
|
|
.count-input:not(.collapsed) {
|
|
[data-count-input-value] {
|
|
display: none;
|
|
}
|
|
|
|
[data-increment] > i {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
.count-input.collapsed {
|
|
[data-increment] {
|
|
border-radius: var(--#{$prefix}border-radius-sm) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:hover) {
|
|
.count-input .form-control,
|
|
[data-decrement] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.count-input:not(.collapsed) {
|
|
[data-count-input-value] {
|
|
display: inline;
|
|
}
|
|
[data-increment] > i {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-increment] {
|
|
border-radius: var(--#{$prefix}border-radius-sm) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Animated category card
|
|
|
|
.category-card-body,
|
|
.category-card-title {
|
|
transition: transform .35s ease-in-out;
|
|
transform-origin: top center;
|
|
will-change: transform;
|
|
}
|
|
|
|
.category-card-list {
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition: transform .35s ease-in-out, opacity .35s ease-in-out;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.category-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
.category-card-body {
|
|
transform: scale(.67);
|
|
}
|
|
.category-card-title,
|
|
.category-card-list {
|
|
transform: scale(1.45);
|
|
}
|
|
.category-card-list {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dark mode
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
.product-card:hover .product-card-button {
|
|
@extend .btn-primary;
|
|
}
|
|
}
|
|
}
|