| Dir : /home/oligap/www/wp-content/themes/woodmart/inc/admin/assets/sass/pages/ |
| Server: Linux cloud.virginhosting.lk 4.18.0-477.27.2.lve.el8.x86_64 #1 SMP Wed Oct 11 12:32:56 UTC 2023 x86_64 IP: 128.140.68.198 |
| Dir : //home/oligap/www/wp-content/themes/woodmart/inc/admin/assets/sass/pages/_base-import.scss |
// ------------------------------------------------------------------------------------------------
// BASE IMPORT
// ------------------------------------------------------------------------------------------------
.wd-import {
> .woodmart-box-header {
position: sticky;
top: 32px;
z-index: 60;
}
.woodmart-box-header-col-left {
display: flex;
flex-wrap: wrap;
}
.woodmart-box-content {
padding-bottom: 0;
}
.wd-import-cats-item {
&:not(.xts-active) {
background-color: #2C2C2C;
color: #FFF;
&:hover {
background-color: #3E3E3E;
color: #FFF;
}
}
}
}
.wd-import-cats {
transform: translate3d(0px,0px,0px); // NOTE FOR WHITE BORDER RADIUS ISSUE
}
.wd-import-cats,
.wd-import-search {
margin-right: 20px;
.rtl & {
margin-right: 0;
margin-left: 20px;
}
}
// .wd-import-search {
// position: relative;
// flex-grow: 1;
// max-width: 300px;
// input {
// padding-left: 32px !important;
// width: 100% !important;
// }
// &:after {
// // content: "\f179";
// content: "\f130";
// position: absolute;
// top: calc(50% - 9px);
// left: 10px;
// display: inline-block;
// color: #3C434A;
// // font-size: 24px;
// font-size: 16px;
// // font-family: dashicons;
// font-family: "woodmart-font";
// line-height: 18px;
// }
// }
// .wd-import-items-wrap {
// // mask-image: linear-gradient(to top,transparent 0px,#000 40px);
// // -webkit-mask-image: linear-gradient(to top,transparent 0px,#000 40px);
// }
// ------------------------------------------
// NOTICES
// ------------------------------------------
// @keyframes wd-fadeInDownBig {
// 0% {
// max-height: 0;
// }
// 100% {
// max-height: 200px;
// }
// }
.xts-import-notices {
z-index: 30;
overflow: hidden;
margin-top: -20px;
margin-right: -20px;
margin-bottom: 20px;
margin-left: -20px;
&:not(.xts-import-remove-notices) {
position: sticky;
top: 112px;
}
.xts-notice {
padding-right: 20px;
padding-left: 20px;
border-bottom: 1px solid;
border-radius: 0;
margin-bottom: 0;
&.xts-info {
border-color: transparentize($woodmart-notice-info-text, .92);
}
&.xts-success {
border-color: transparentize($woodmart-notice-success-text, .92);
}
&.xts-warning {
border-color: transparentize($woodmart-notice-warning-text, .92);
}
&.xts-error {
border-color: transparentize($woodmart-notice-critical-text, .92);
}
+ .xts-notice {
margin-top: -20px;
}
}
&:empty {
display: none;
}
}
// ------------------------------------------
// DEMO ITEMS
// ------------------------------------------
.wd-import-items {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
min-height: 186px;
// padding-top: 20px;
// padding-bottom: 30px;
&.xts-loading {
pointer-events: none;
user-select: none;
}
&.xts-disabled {
.wd-import-item {
opacity: .7;
pointer-events: none;
user-select: none;
}
}
}
.wd-import-item {
position: relative;
// display: flex;
flex-basis: 16.66666666666667%;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
max-width: 16.66666666666667%;
transition: all .25s ease;
&:not(.wd-active),
&.wd-search-hide {
display: none;
}
&:not(.wd-loading-item) {
.xts-loading & {
opacity: .6;
}
&:hover {
.wd-import-item-image {
box-shadow: #BDBDBD 0 0 15px;
transform: scale(1.02) translateZ(0);
}
// .woodmart-box-label {
// transform: scale(0.98) translateZ(0);
// }
.wd-import-item-preview {
visibility: visible;
opacity: 1;
transform: translateY(-50%) translateX(-50%) translateZ(0);
}
}
}
&.wd-installed {
.wd-import-item-image:before {
background-color: rgba(0,0,0,.2);
}
}
&:hover {
.wd-import-item-image:before {
background-color: rgba(0,0,0,.3);
}
}
&.wd-loading-item {
.wd-import-item-image:before {
background-color: rgba(0,0,0,.4);
}
}
&:hover,
&.wd-installed,
&.wd-loading-item {
.wd-import-item-image:before {
visibility: visible;
opacity: 1;
}
}
}
.wd-import-item-image-wrap {
position: relative;
flex-grow: 1;
// overflow: hidden;
margin-bottom: 10px;
width: 100%;
// border-radius: 4px;
transition: inherit;
user-select: none;
.wd-import-item-preview {
top: 50%;
left: 50%;
z-index: 10;
transform: translateY(-50%) translateX(-50%);
&:before {
content: "\f504";
// margin-right: 5px;
// font-weight: 400;
font-size: 110%;
// font-family: "dashicons";
}
}
.wd-import-item-preview,
.wd-import-item-image:before {
position: absolute;
visibility: hidden;
opacity: 0;
}
.rtl & {
.wd-import-item-preview {
&:before {
margin-right: 0;
margin-left: 5px;
}
}
}
}
.wd-import-item {
.woodmart-box-labels {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 20;
display: flex;
visibility: hidden;
opacity: 0;
transition: inherit;
}
.woodmart-box-label {
margin-left: 5px;
padding: 2px 5px;
font-size: 10px;
&:before {
vertical-align: middle;
font-size: 13px;
font-family: "dashicons";
}
}
.woodmart-label-warning {
&:before {
content: "\f15e";
}
}
.woodmart-label-default {
background-color: #F1F1F1;
color: #333;
&:before {
content: "\f227";
}
}
&.wd-imported .woodmart-label-default,
&:not(.wd-imported) .woodmart-label-warning {
display: none;
}
&:not(.wd-loading-item):not(:hover) {
.woodmart-box-labels {
visibility: visible;
opacity: 1;
}
}
}
.wd-import-item-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.wd-import-item-btn {
position: relative;
padding-left: 13px;
&.xts-color-alt {
&:before {
content: "\f12a";
}
}
&.xts-color-primary {
&:before {
content: "\f316";
margin-bottom: -1px;
}
}
&:before {
content: "\f316";
margin-right: 5px;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
font-family: "dashicons";
transition: inherit;
}
&:after {
content: "";
position: absolute;
top: calc(50% - 6px);
left: 11px;
opacity: 0;
transition: inherit;
@include loader(12px,1px,rgba(255,255,255,.15),#FFF);
}
.wd-loading-item & {
&:after {
opacity: 1;
@include act-loader;
}
&:before {
opacity: 0;
}
}
.rtl & {
padding-right: 13px;
padding-left: 15px;
&:after {
right: 11px;
left: auto;
}
&:before {
margin-right: 0;
margin-left: 5px;
}
}
}
.wd-import-item {
&:not(.wd-imported) {
.wd-import-item-btn {
&.xts-color-alt {
display: none;
}
}
}
&[data-type="version"] {
&.wd-imported {
.wd-import-item-btn {
&.xts-color-primary {
display: none;
}
}
}
}
&[data-type="page"],
&[data-type="element"] {
.wd-import-item-btn {
&.xts-color-alt {
display: none;
}
}
}
}
.wd-view-item-btn {
display: none;
padding-left: 13px;
.wd-view-page & {
display: inline-flex;
}
&:before {
content: "\f115";
margin-right: 5px;
// margin-bottom: -2px;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
font-family: "dashicons";
}
.rtl & {
padding-right: 13px;
padding-left: 15px;
&:before {
margin-right: 0;
margin-left: 5px;
}
}
}
.wd-view-page {
.wd-import-item-btn {
display: none;
}
}
.wd-import-item-image {
padding-top: 66.5%;
box-shadow: #DEDEDE 0 0 10px;
transition: inherit;
transform: scale(1) translateZ(0);
will-change: transform;
image-rendering: -webkit-optimize-contrast;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 800px;
-webkit-perspective: 800px;
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
width: 100%;
height: 100%;
height: auto;
vertical-align: middle;
transition: all .25s ease;
object-fit: cover;
// transform: scale(1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 800px;
-webkit-perspective: 800px;
}
&:before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
// background-color: rgba(0,0,0,.4);
// transition: all .25s ease;
transition: inherit;
}
}
[class*="wd-import-progress"] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
visibility: hidden;
opacity: 0;
.wd-loading-item & {
visibility: visible;
opacity: 1;
}
}
.wd-import-progress-bar {
top: auto;
z-index: 2;
width: 0%;
height: 6px;
background: linear-gradient(270deg, #83B735, #9ED625);
background-size: 400% 400%;
.wd-loading-item & {
opacity: .9;
}
}
.wd-import-progress-bar-percent {
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-weight: 600;
font-size: 24px;
}
.wd-import-item-title {
flex-grow: 1;
margin-right: 8px;
color: #242424;
font-weight: 600;
font-size: 16px;
line-height: 17px;
.rtl & {
margin-right: 0;
margin-left: 8px;
}
}
// ------------------------------------------------------------------------------------------------
// BASE IMPORT POPUP
// ------------------------------------------------------------------------------------------------
.wd-import-remove {
.xts-popup-inner {
max-width: 640px;
}
.xts-popup-actions {
min-height: 80px;
border-top: 1px solid #FDE1DE;
background-color: #FEECEA;
}
}
.wd-import-remove-form-wrap {
display: flex;
align-items: flex-start;
}
.wd-import-remove-form {
display: flex;
flex-basis: 55%;
flex-wrap: wrap;
transition: .3s all ease;
flex-shrink: 0;
> .wd-import-remove-items {
margin-top: 5px;
margin-bottom: 5px;
width: 50%;
font-weight: 600;
span {
color: #ABABAB;
}
}
.xts-loading & {
opacity: .4;
pointer-events: none;
}
}
.wd-import-select-btns {
margin-bottom: 15px;
width: 100%;
> button {
margin-inline-end: 10px;
&:before {
// bottom: -3px;
// margin-right: 5px;
color: #ABABAB;
}
// &:first-child {
// &:before {
// content: "\f10f";
// }
// }
// &:last-child {
// &:before {
// content: "\f14f";
// }
// }
}
// .rtl & {
// > button {
// margin-right: 0;
// margin-left: 10px;
// &:before {
// margin-right: 0;
// margin-left: 5px;
// }
// }
// }
}
.wd-import-remove-img {
flex-grow: 1;
flex-basis: 45%;
// margin-top: -20px;
margin-top: 13px;
text-align: center;
transition: .3s all ease;
img {
max-width: 100%;
}
.xts-loading & {
opacity: .4;
pointer-events: none;
}
}
.wd-import-remove-btn,
.wd-import-remove-opener {
padding-left: 13px;
// &:before {
// content: "\f182";
// position: relative;
// margin-right: 3px;
// vertical-align: middle;
// font-weight: 400;
// font-family: "dashicons";
// }
.rtl & {
padding-right: 13px;
padding-left: 15px;
&:before {
margin-right: 0;
margin-left: 3px;
}
}
}
.wd-import-remove-opener {
visibility: hidden;
.wd-has-data & {
visibility: visible;
}
}
.wd-import-remove-btn {
&.xts-disabled {
opacity: .6;
pointer-events: none;
}
}
.wd-import-remove-alert {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
padding: 20px;
min-height: 95px;
p {
margin: 0 20px 0 0;
color: #D93F32;
}
.rtl & {
p {
margin: 0 0 0 20px;
}
}
}
// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------
@media (max-width: 1500px) {
.wd-import-item {
flex-grow: 1;
flex-basis: 250px;
max-width: 300px;
}
}
// ------------------------------------------------------------------------------------------------
// RTL
// ------------------------------------------------------------------------------------------------