舒舒服服水电费多少发多少*(^&*(
// ------------------------------------------------------------------------------------------------
// XTS BUTTON SWITHCER
// ------------------------------------------------------------------------------------------------
@if $cont-button-switcher {
.xts-switcher-btn {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box; // NOTE FOR POST TYPE TABLE
// padding-right: 6px;
// padding-left: 6px;
padding-inline: 6px;
min-width: 64px;
height: 32px;
border: 1px solid var(--xts-option-border-color);
border-radius: 30px;
background-color: #FFF;
cursor: pointer;
transition: all .2s ease;
overflow: hidden;
&.xts-loading {
pointer-events: none;
.xts-switcher-dot {
opacity: 0;
}
&:before {
position: absolute;
top: 5px;
left: 6px;
@include loader(18px,1px,rgba(0,0,0,.15),#000);
@include act-loader;
}
}
&.xts-active {
border-color: var(--xts-btn-secondary-color);
background-color: var(--xts-btn-secondary-color);
color: #FFF;
&:before {
left: 42px;
border-color: rgba(255,255,255,.15);
border-inline-start-color: #FFF;
}
}
}
// ------------------------------------------
// SWITCHER LABEL
// ------------------------------------------
.xts-switcher-labels {
display: flex;
align-items: center;
justify-content: space-between;
// padding-right: 5px;
// padding-left: 5px;
padding-inline: 5px;
width: 100%;
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
user-select: none;
.rtl & {
flex-direction: row-reverse;
}
}
.xts-switcher-label {
overflow: hidden;
max-width: 50px;
height: 12px;
text-overflow: ellipsis;
line-height: 1;
transition: opacity .2s ease;
&.xts-on {
padding-right: 5px;
opacity: 0;
}
&.xts-off {
padding-left: 5px;
opacity: 1;
}
}
.xts-switcher-btn {
&.xts-active {
.xts-switcher-label {
&.xts-on {
opacity: 1;
}
&.xts-off {
opacity: 0;
}
}
}
}
// ------------------------------------------
// SWITCHER DOT
// ------------------------------------------
.xts-switcher-dot-wrap {
position: absolute;
inset: 0;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
display: flex;
align-items: center;
justify-content: flex-start;
// padding-right: 5px;
// padding-left: 5px;
padding-inline: 5px;
transition: all .2s ease;
.rtl & {
flex-direction: row-reverse;
}
}
.xts-switcher-dot {
// position: relative;
z-index: 1;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: var(--xts-btn-grey-color-hover);
transition: inherit;
}
.xts-switcher-btn {
&.xts-active {
.xts-switcher-dot-wrap {
transform: translateX(calc(100% - 32px));
}
.xts-switcher-dot {
background-color: #FFF;
// transform: translateX(29px);
}
&:hover {
.xts-switcher-dot {
background-color: rgba(255,255,255,.9);
}
}
}
&:not(.xts-active) {
&:hover {
.xts-switcher-dot {
background-color: var(--xts-btn-grey-color);
}
}
}
.rtl & {
&.xts-active {
.xts-switcher-dot {
background-color: #FFF;
// transform: translateX(-29px);
}
}
}
}
// ------------------------------------------
// HTML BLOCK SWITCHER
// ------------------------------------------
.xts-field {
&.xts-html-block-switch {
margin-bottom: var(--xts-option-space);
+ .xts-field,
+ .xts-field + .xts-field {
.xts-option-title {
margin-bottom: 0;
padding-bottom: 0;
border: none;
font-size: 0;
line-height: 1;
label {
span {
display: none;
}
}
}
.xts-inherit-checkbox-wrapper {
margin-bottom: var(--xts-option-space);
}
}
}
}
} // END IF
// ------------------------------------------------------------------------------------------------
// WPB BUTTON SWITHCER
// ------------------------------------------------------------------------------------------------
// @if $wpb-cont-button-switcher {
// .switch-field-value {
// &[value="no"] {
// + .woodmart-vc-switch-inner {
// }
// }
// &[value="yes"] {
// + .woodmart-vc-switch-inner {
// }
// }
// }
// .woodmart-vc-switch {
// font-size: 0;
// .switch-controls {
// display: inline-block;
// min-width: 50px;
// height: 36px;
// background-color: #EFEFF0;
// color: #444;
// text-align: center;
// text-transform: uppercase;
// font-weight: 600;
// font-size: 12px;
// cursor: pointer;
// transition: all .2s ease-in-out;
// span {
// display: block;
// line-height: 36px;
// }
// &:hover {
// background-color: #DDDDDF;
// }
// &:first-child {
// border-top-left-radius: var(--xts-option-border-radius);
// border-bottom-left-radius: var(--xts-option-border-radius);
// }
// &:last-child {
// border-top-right-radius: var(--xts-option-border-radius);
// border-bottom-right-radius: var(--xts-option-border-radius);
// }
// }
// .switch-inactive {
// &.xts-active {
// background-color: #B1B1B0;
// color: #FFF;
// pointer-events: none;
// user-select: none;
// }
// }
// .switch-active {
// &.xts-active {
// background: $woodmart-button-alt-color;
// color: #FFF;
// }
// }
// }
// ------------------------------------------------------------------------------------------------
// WHB BUTTON SWITHCER
// ------------------------------------------------------------------------------------------------
// .whb-switch-field {
// input[type="checkbox"] {
// width: 55px;
// height: 30px;
// border: 1px solid var(--xts-option-border-color);
// border-radius: 30px;
// transition: all .2s ease;
// &:hover {
// border-color: var(--xts-option-border-color-darker-10);
// }
// &:after {
// // content: "ON OFF";
// content: "\e925 \e926";
// position: absolute;
// top: 14px;
// left: 9px;
// // word-spacing: 4px;
// letter-spacing: 9px;
// font-size: 13px;
// @include font-icon-base;
// }
// &:before {
// content: "";
// position: absolute;
// top: 4px;
// left: 5px;
// z-index: 1;
// display: block;
// visibility: visible;
// margin: 0;
// width: 20px;
// height: 20px;
// border-radius: 50%;
// background-color: var(--xts-btn-grey-color-hover);
// opacity: 1;
// transition: all .2s ease;
// transform: scale(1);
// }
// &:checked {
// &:after {
// color: #FFF;
// }
// &:before {
// left: 29px;
// background-color: #FFF;
// }
// }
// }
// // label {
// // display: inline-block;
// // margin: -7px 0 0 3px;
// // }
// }
// }