舒舒服服水电费多少发多少*(^&*(
// ------------------------------------------------------------------------------------------------
// PLUGINS
// ------------------------------------------------------------------------------------------------
@if $page-plugins {
.xts-plugins {
ul {
overflow: auto;
margin: 0;
li {
margin-bottom: 0;
}
}
&.xts-all-active {
+ .xts-wizard-footer {
.xts-wizard-all-plugins {
display: none;
}
}
}
}
.xts-plugin-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
// border: 1px solid var(--xts-option-border-color);
border-radius: var(--xts-brd-radius);
background-color: #FFF;
transition: all .25s ease;
.xts-box & {
border: 1px solid var(--xts-option-border-color);
}
.xts-plugin-img {
min-width: 58px;
text-align: center;
transition: all .25s ease;
img {
max-width: 32px;
}
}
&:before {
position: absolute;
top: 19px;
inset-inline-start: 19px;
z-index: 1;
opacity: 0;
transition: inherit;
@include loader;
}
&.xts-loading {
pointer-events: none;
.xts-plugin-img {
opacity: .09;
}
.xts-plugin-btn-wrapper {
opacity: .8;
}
&:before {
opacity: 1;
@include act-loader;
}
}
&.xts-disabled {
opacity: .6;
pointer-events: none;
}
}
.xts-plugin-heading {
display: flex;
flex-grow: 0;
align-items: center;
flex-shrink: 0;
}
.xts-plugin-name {
color: #242424;
font-weight: 600;
}
:is(
.xts-plugin-version,
.xts-plugin-required) {
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
span {
padding: 0 8px;
// border-radius: 20px;
border-radius: var(--xts-brd-radius);
font-weight: 600;
font-size: 10px;
line-height: 20px;
}
}
.xts-plugin-version {
span {
background-color: #F2F2F2;
color: rgba(0, 0, 0, .4);
}
}
.xts-plugin-required {
flex-grow: 1;
span {
background-color: $woodmart-notice-warning;
color: var(--xts-warning-color);
}
}
.xts-plugin-required-dot {
display: none;
}
.xts-plugin-btn-wrapper {
text-align: center;
}
.xts-plugin-btn-text {
display: inline-block;
font-weight: 600;
font-size: 12px;
line-height: 1.2;
}
.xts-plugin-response {
margin-bottom: 20px;
&:empty {
display: none;
}
}
.xts-plugin-description {
display: none;
margin-bottom: 15px;
}
.xts-btn {
&.xts-activate {
@extend %xts-button-primary;
@extend %xts-button-primary-hover;
}
&:is(
.xts-install,
.xts-update) {
border-width: 1px;
border-style: solid;
background-color: transparent;
@extend %xts-bordered-button-primary;
}
&.xts-install {
&:before {
@include font-icon($xts-icon-import);
}
}
// &.xts-update {
// &:before {
// @include font-icon($xts-icon-import);
// }
// }
&.xts-deactivate {
border-width: 1px;
border-style: solid;
background-color: transparent;
@extend %xts-bordered-button-warning;
// @extend %xts-button-warning;
// @extend %xts-button-warning-hover;
}
}
// ------------------------------------------------------------------------------------------------
// SETUP WIZARD
// ------------------------------------------------------------------------------------------------
.xts-wizard-content {
.xts-plugins {
ul {
max-height: 450px;
}
}
.xts-plugin-wrapper {
&:not(:last-child) {
margin-bottom: 7px;
}
}
.xts-plugin-heading {
flex-basis: 215px;
}
.xts-plugin-version {
flex-basis: 160px;
}
.xts-plugin-btn-wrapper {
flex-basis: 100px;
margin: 0 5px;
}
}
// ------------------------------------------------------------------------------------------------
// PLUGINS TAB
// ------------------------------------------------------------------------------------------------
.xts-box {
.xts-plugins {
ul {
display: flex;
flex-wrap: wrap;
// margin-right: -15px;
gap: 15px;
}
}
.xts-plugin-wrapper {
flex-grow: 1;
// flex: 0 1 calc(100% - 15px);
flex-basis: 200px;
flex-direction: column;
padding: 30px 10px;
text-align: center;
// &.xts-large {
// flex: 0 1 calc(100% - 15px);
// }
&:before {
top: 35px;
inset-inline-start: calc(50% - 10px);
}
}
.xts-plugin-heading {
flex-direction: column;
margin-bottom: 15px;
}
.xts-plugin-img {
margin-bottom: 15px;
}
//**** REQUIRED ****//
.xts-plugin-required {
position: absolute;
top: 20px;
inset-inline-start: 10px;
span {
transition: all .3s;
}
}
.xts-plugin-required-text {
font-size: 9px;
}
//**** VERSION ****//
.xts-plugin-version {
position: absolute;
top: 20px;
inset-inline-end: 10px;
margin-bottom: 10px;
span {
font-size: 9px;
}
}
.xts-plugin-btn-wrapper {
// margin-top: auto;
// margin-right: -5px;
// margin-bottom: -5px;
// margin-left: -5px;
margin: auto -5px -5px -5px;
> a {
// margin-right: 5px;
// margin-left: 5px;
margin-inline: 5px;
margin-bottom: 5px;
}
}
.xts-wizard-footer {
margin-top: 0;
}
.xts-wizard-all-plugins {
margin-top: 20px;
}
}
// ------------------------------------------------------------------------------------------------
// RTL
// ------------------------------------------------------------------------------------------------
// .rtl {
// .xts-wizard-content {
// .xts-plugin-wrapper {
// &:before {
// right: 20px;
// left: 0;
// }
// }
// }
// }
} // END IF
// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------
@mixin R-XL-UP__pages__plugins {
@if $page-plugins {
.xts-box {
.xts-plugins {
ul {
margin-inline-end: -15px;
}
}
.xts-plugin-wrapper {
flex: 0 1 calc(16.666667% - 15px);
&.xts-large {
flex: 0 1 calc(50% - 15px);
align-items: flex-start;
padding: 30px;
padding-inline-start: 130px;
text-align: start;
&:before {
top: 50px;
inset-inline-start: 50px;
}
.xts-plugin-img {
position: absolute;
top: 30px;
inset-inline-start: 30px;
img {
max-width: 58px;
}
}
.xts-plugin-heading {
margin-bottom: 15px;
}
.xts-plugin-name {
font-size: 22px;
line-height: 1.1;
}
.xts-plugin-description {
display: block;
}
}
}
//**** REQUIRED ****//
.xts-plugin-required-text {
opacity: 0;
}
.xts-plugin-required-dot {
content: "";
position: absolute;
top: 2px;
inset-inline-start: 0;
display: block;
padding: 0;
width: 10px;
height: 10px;
border-radius: 50%;
// background-color: #FDEBEA;
opacity: 1;
}
.xts-plugin-wrapper {
&:hover {
.xts-plugin-required-text {
opacity: 1;
}
.xts-plugin-required-dot {
opacity: 0;
}
}
}
}
} // END IF
}