// ------------------------------------------------------------------------------------------------
// DUMMY CONTENT GENERAL
// ------------------------------------------------------------------------------------------------
@if $general {
// ------------------------------------------
// DEMO ITEM
// ------------------------------------------
.xts-import-item-wrap {
&:not(.xts-active),
&.xts-search-hide,
&.xts-cat-hide {
@extend %dummy-content-display-none;
}
}
.xts-import-item {
position: relative;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
border: 1px solid var(--xts-option-border-color);
border-radius: var(--xts-option-border-radius);
background-color: #FFF;
transition: all .25s ease;
&:hover {
box-shadow: var(--xts-box-shadow);
}
&:not(.xts-loading-item) {
.xts-loading & {
opacity: .6;
}
}
}
//**** DEMO ITEMS IMAGE ****//
.xts-import-item-image {
position: relative;
overflow: hidden;
// padding-top: 66.4%;
transition: inherit;
will-change: transform;
image-rendering: -webkit-optimize-contrast;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 800px;
-webkit-perspective: 800px;
img {
display: block;
aspect-ratio: 3/2;
max-width: 100%;
width: 100%;
object-fit: cover;
transition: all .25s ease;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 800px;
-webkit-perspective: 800px;
}
&:before {
content: "";
position: absolute;
inset: 0 0 -1px 0;
// top: 0;
// right: 0;
// bottom: -1px;
// left: 0;
z-index: 1;
transition: inherit;
}
}
.xts-import-item {
&:hover {
box-shadow: var(--xts-box-shadow);
.xts-import-item-image:before {
background-color: rgba(0,0,0,.15);
}
}
&.xts-installed {
.xts-import-item-image:before {
background-color: rgba(0,0,0,.1);
}
}
&.xts-loading-item {
.xts-import-item-image:before {
background-color: rgba(0,0,0,.3);
}
}
&:is(
:hover,
.xts-installed,
.xts-loading-item) {
.xts-import-item-image:before {
visibility: visible;
opacity: 1;
}
}
}
// PREVIEW BUTTON
.xts-import-item-preview {
position: absolute;
top: 50%;
left: 50%;
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1;
z-index: 10;
visibility: hidden;
box-shadow: var(--xts-option-box-shadow);
opacity: 0;
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, .1);
transform: translateY(-50%) translateX(-50%) translateZ(0);
outline: none !important;
border-color: transparent !important;
&:hover,
&:focus {
box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, .2) !important;
}
}
.xts-import-item {
&:not(.xts-loading-item) {
&:hover {
.xts-import-item-preview {
visibility: visible;
opacity: 1;
// transform: translateY(-50%) translateX(-50%) translateZ(0);
}
}
}
}
// ------------------------------------------
// FOOTER
// ------------------------------------------
.xts-import-item-footer {
position: relative;
z-index: $z-layer-1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-top: 1px solid var(--xts-option-border-color);
}
.xts-import-item-title {
flex-grow: 1;
margin-inline-end: 8px;
color: #242424;
font-weight: 600;
text-align: start; // NOTE FOR SETUP WIZARD
font-size: 16px;
line-height: 17px;
}
} // END
// ------------------------------------------------------------------------------------------------
// DUMMY CONTENT PAGE
// ------------------------------------------------------------------------------------------------
@if $page-dummy-content {
// ------------------------------------------
// FILTERS
// ------------------------------------------
.xts-import-cats-set {
width: 100%;
.xts-set-btn {
flex: 1 1 50%;
padding: 0 10px;
max-width: 50%;
span {
overflow: hidden;
text-overflow: ellipsis;
padding-block: 5px;
}
}
}
.xts-import-cats-list-wrap {
position: sticky;
top: 52px;
.xts-buttons-control {
margin-bottom: 10px;
}
.xts-note {
display: none;
margin-top: 5px;
}
}
.xts-import-cats-list {
// margin-top: 10px;
.xts-filter {
@extend %dummy-content-display-none;
&.xts-active {
display: block;
}
}
}
// ------------------------------------------
// LOADING
// ------------------------------------------
.xts-import-items {
// min-height: 186px;
&.xts-loading {
pointer-events: none;
user-select: none;
}
&.xts-disabled {
.xts-import-item {
opacity: .7;
pointer-events: none;
user-select: none;
}
}
}
// ------------------------------------------
// LABELS
// ------------------------------------------
//**** DEMO ITEMS LABELS ****//
.xts-import-item {
.xts-box-labels {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 20;
display: flex;
visibility: hidden;
opacity: 0;
transition: inherit;
}
.xts-box-label {
margin-left: 5px;
padding: 2px 5px;
font-size: 10px;
&:before {
margin-inline-end: 1px;
vertical-align: middle;
font-size: 11px;
}
}
.xts-label-default {
background-color: #F1F1F1;
color: #333;
}
&.xts-imported .xts-label-default,
&:not(.xts-imported) .xts-label-warning {
@extend %dummy-content-display-none;
}
&:not(.xts-loading-item):not(:hover) {
.xts-box-labels {
visibility: visible;
opacity: 1;
}
}
}
// ------------------------------------------
// PROGRESS BAR
// ------------------------------------------
[class*="xts-import-progress"] {
position: absolute;
inset: 0;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
visibility: hidden;
opacity: 0;
.xts-loading-item & {
visibility: visible;
opacity: 1;
}
}
.xts-import-progress-bar {
top: auto;
bottom: -1px;
z-index: 2;
width: 0%;
height: 6px;
background: linear-gradient(270deg, var(--xts-primary-color), var(--xts-primary-color-darker-10));
// background: linear-gradient(270deg, #83B735, #9ED625);
background-size: 400% 400%;
.xts-loading-item & {
opacity: .9;
}
}
.xts-import-progress-bar-percent {
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-weight: 600;
font-size: 24px;
}
// ------------------------------------------
// FOOTER
// ------------------------------------------
.xts-import-item-btn {
position: relative;
&:after {
content: "";
position: absolute;
top: calc(50% - 7px);
inset-inline-start: 11px;
opacity: 0;
transition: inherit;
@include loader(12px,1px,rgba(255,255,255,.15),currentColor);
}
.xts-loading-item & {
&:after {
opacity: 1;
@include act-loader;
}
&:before {
opacity: 0;
}
}
}
.xts-import-item {
&:not(.xts-imported) {
.xts-import-item-btn {
&.xts-color-alt {
@extend %dummy-content-display-none;
}
}
}
&[data-type="version"] {
&.xts-imported {
.xts-import-item-btn {
&.xts-color-primary {
@extend %dummy-content-display-none;
}
}
}
}
&:is(
[data-type="page"],
[data-type="element"]) {
.xts-import-item-btn {
&.xts-color-alt {
@extend %dummy-content-display-none;
}
}
}
}
.xts-view-item-btn {
@extend %dummy-content-display-none;
.xts-view-page & {
display: inline-flex;
}
}
.xts-view-page {
.xts-import-item-btn {
@extend %dummy-content-display-none;
}
}
// ------------------------------------------
// IMPORT POPUP
// ------------------------------------------
.xts-import-remove {
.xts-popup-inner {
max-width: 640px;
}
.xts-popup-actions {
min-height: 95px;
border-top: none;
background-color: $woodmart-notice-warning;
}
}
.xts-import-remove-form-wrap {
display: flex;
align-items: flex-start;
}
.xts-import-remove-form {
display: flex;
flex-basis: 55%;
flex-wrap: wrap;
transition: .3s all ease;
flex-shrink: 0;
> .xts-import-remove-items {
margin-block: 5px;
// margin-top: 5px;
margin-inline-end: 5px;
// margin-bottom: 5px;
width: calc(50% - 5px);
font-weight: 600;
span {
color: #ABABAB;
font-weight: 400;
}
}
.xts-loading & {
opacity: .4;
pointer-events: none;
}
}
.xts-import-select-btns {
margin-bottom: 15px;
width: 100%;
> button {
margin-inline-end: 10px;
&:before {
color: #ABABAB;
}
}
}
.xts-import-remove-img {
flex-grow: 1;
flex-basis: 45%;
margin-top: 13px;
text-align: center;
transition: .3s all ease;
img {
max-width: 100%;
}
.xts-loading & {
opacity: .4;
pointer-events: none;
}
}
.xts-import-remove-opener {
visibility: hidden;
.xts-has-data & {
visibility: visible;
}
}
.xts-import-remove-btn {
&.xts-disabled {
opacity: .6;
pointer-events: none;
}
}
.xts-import-remove-alert {
position: absolute;
right: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
overflow: hidden;
padding: 20px;
max-height: 95px;
p {
margin-inline-end: 20px;
margin-bottom: 0;
color: $woodmart-notice-warning-text;
}
}
} // END IF
// ------------------------------------------------------------------------------------------------
// EXTENDS
// ------------------------------------------------------------------------------------------------
// @extend %dummy-content-display-none;
%dummy-content-display-none {
display: none;
} |