184 lines
3.4 KiB
SCSS
Raw Permalink Normal View History

2025-03-05 20:28:54 -06:00
// Base
// *******************************************************************************
body {
text-rendering: optimizeLegibility;
font-smoothing: antialiased;
-moz-font-feature-settings: 'liga' on;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@include media-breakpoint-up(md) {
button.list-group-item {
outline: none;
}
}
// * App Overlay
// *******************************************************************************
.app-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
visibility: hidden;
z-index: 3;
transition: all 0.25s ease;
&.show {
visibility: visible;
}
@if not $dark-style {
.light-style & {
background-color: rgba($black, 0.5);
}
}
@if $dark-style {
.dark-style & {
background-color: rgba($modal-backdrop-bg, 0.6);
}
}
}
// * Containers
// *******************************************************************************
.container,
.container-fluid,
.container-xxl {
padding-right: $container-padding-x-sm;
padding-left: $container-padding-x-sm;
@include media-breakpoint-up(lg) {
padding-right: $container-padding-x;
padding-left: $container-padding-x;
}
}
// * Thumbnails
// *******************************************************************************
.img-thumbnail {
position: relative;
display: block;
img {
z-index: 1;
}
}
.img-thumbnail-content {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: block;
opacity: 0;
transition: all 0.2s ease-in-out;
transform: translate(-50%, -50%);
.img-thumbnail:hover &,
.img-thumbnail:focus & {
opacity: 1;
}
}
// Overlay effect
.img-thumbnail-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: block;
transition: all 0.2s ease-in-out;
.img-thumbnail:not(:hover):not(:focus) & {
opacity: 0 !important;
}
}
.img-thumbnail-shadow {
transition: box-shadow 0.2s;
&:hover,
&:focus {
box-shadow: 0 5px 20px rgba($black, 0.4);
}
}
// Zoom-in effect
.img-thumbnail-zoom-in {
overflow: hidden;
img {
transition: all 0.3s ease-in-out;
transform: translate3d(0);
}
.img-thumbnail-content {
transform: translate(-50%, -50%) scale(0.6);
}
&:hover,
&:focus {
img {
transform: scale(1.1);
}
.img-thumbnail-content {
transform: translate(-50%, -50%) scale(1);
}
}
}
// * IE Fixes
// *******************************************************************************
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// Fix IE parent container height bug when containing image with fluid width
.card,
.card-body,
.media,
.flex-column,
.tab-content {
min-height: 1px;
}
img {
min-height: 1px;
height: auto;
}
}
// * RTL
// *******************************************************************************
@if $rtl-support {
[dir='rtl'] body {
text-align: right;
direction: rtl;
}
}
// * Buy now section
// *******************************************************************************
.buy-now {
.btn-buy-now {
position: fixed;
bottom: 3rem;
right: $container-padding-x;
@include rtl-style() {
left: $container-padding-x;
right: inherit;
}
z-index: $zindex-menu-fixed;
box-shadow: 0 1px 20px 1px $danger !important;
&:hover {
box-shadow: none;
}
}
}