| Server IP : 162.0.217.223 / Your IP : 216.73.216.168 Web Server : LiteSpeed System : Linux premium269.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : mypckeys ( 1539) PHP Version : 8.1.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/mypckeys/www/wp-content/themes/woodmart/inc/admin/assets/sass/controls/ |
Upload File : |
// ------------------------------------------------------------------------------------
// XTS COLOR-PICKER
// ------------------------------------------------------------------------------------
@if $cont-color-picker {
:is(
.xts-theme-style,
div.vc_ui-panel-content) {
--xts-color-picker-h: 35px;
.wp-picker-container {
position: relative;
display: inline-flex;
align-items: center;
}
.wp-color-result {
&.button {
position: relative;
margin-inline-end: 0 !important;
margin-bottom: 0 !important;
padding: var(--xts-picker-space) !important;
padding-inline-start: calc(var(--xts-color-picker-h) + 4px) !important;
height: var(--xts-color-picker-h);
min-height: var(--xts-color-picker-h);
border: 1px solid var(--xts-option-border-color) !important;
border-radius: var(--xts-option-border-radius);
background-image: none !important;
--xts-picker-space: 2px;
--xts-input-height: calc(var(--xts-color-picker-h) - (var(--xts-picker-space) * 2) - 2px);
&:focus {
outline: none !important;
box-shadow: none !important;
}
}
&:hover {
.wp-color-result-text {
background-color: var(--xts-btn-grey-color-hover);
}
}
}
:is(
.xts-color-control,
.xts-bg-source,
.xts-fields-group,
.xts-group,
.xts-field) {
&:has(.wp-picker-active) {
z-index: 1000000; // NOTE FOR SELECT 2
}
}
.color-alpha {
// top: 2px !important;
top: calc(50% - (var(--xts-input-height) / 2)) !important;
inset-inline-start: 2px !important;
width: var(--xts-color-picker-h) !important;
height: var(--xts-input-height) !important;
border-radius: var(--xts-option-border-radius) !important;
}
.wp-color-result-text {
padding: 0 10px;
width: var(--xts-color-picker-h) !important;
height: var(--xts-input-height) !important;
border: none;
border-radius: var(--xts-option-border-radius);
font-size: 0;
vertical-align: inherit; // NOTE FIX VERTICAL ALIGN IF SIZE OF PICKER IS CHANGED
@extend %xts-button;
@extend %xts-button-default;
@extend %xts-button-default-hover;
&:before {
font-size: 14px;
@include font-icon($xts-icon-brush);
}
}
//**** PICKER COLOR INPUT ****//
.wp-picker-input-wrap {
// margin-inline-start: 5px;
// animation: wd-fadeIn .2s ease;
label {
display: inline-block;
margin-bottom: 0;
padding: 0;
position: absolute;
top: calc(var(--xts-color-picker-h) + 17px);
inset-inline-start: 10px;
z-index: 500;
animation: wd-SlideFromBottomSmall .2s ease;
}
input[type=text] {
width: 236px !important;
}
.button {
width: 34px;
height: var(--xts-color-picker-h);
color: transparent;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGZpbGw9IiM1ZTVlNWUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMTA0Ljg1NGEuNS41IDAgMSAwLS43MDgtLjcwOGwtMi41IDIuNWEuNS41IDAgMCAwIDAgLjcwOGwyLjUgMi41YS41LjUgMCAxIDAgLjcwOC0uNzA4TDMuNDU3IDMuNUg3YTQuNzUgNC43NSAwIDEgMS00Ljc1IDQuNzUuNS41IDAgMCAwLTEgMEE1Ljc1IDUuNzUgMCAxIDAgNyAyLjVIMy40NTdMNS4xMDQuODU0WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxNHYxNEgweiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=);
background-repeat: no-repeat;
background-position: center;
background-size: 18px;
background-color: transparent !important;
border: none;
box-shadow: none !important;
padding: 0;
transition: .2s all ease;
margin-inline-start: 0;
animation: wd-fadeIn .2s ease;
&:before {
@include font-icon-content($xts-icon-round-left);
}
&:hover {
opacity: .7;
}
}
}
//**** PICKER DROPDOWN ****//
.wp-picker-container {
.iris-picker {
position: absolute;
top: var(--xts-color-picker-h);
inset-inline: 0;
z-index: 401; // REWRITE FOR BUTTON CUSTOM TEXT COLORSCHEME.
border: 1px solid var(--xts-option-border-color);
border-radius: var(--xts-option-border-radius);
box-shadow: var(--xts-box-shadow);
animation: wd-SlideFromBottomSmall .2s ease;
}
}
:is(
.iris-picker,
.iris-picker-inner) {
padding-top: calc(var(--xts-input-height) + 10px);
}
.iris-picker {
.ui-draggable-handle {
width: .001px;
height: .001px;
&.ui-state-focus {
border-width: 0;
}
}
// .iris-square-handle {
// left: -7px;
// top: -7px;
// }
.iris-palette {
&:focus {
box-shadow: 0 0 0 2px var(--xts-btn-primay-color);
}
}
.iris-strip {
:is(
.ui-slider-handle,
.ui-square-handle) {
&:focus {
border-color: var(--xts-btn-primay-color);
box-shadow: 0 0 0 1px var(--xts-btn-primay-color);
}
}
}
}
.iris-picker-inner {
:is(
.iris-square-handle,
.ui-draggable-handle) {
transition: none !important;
background: transparent !important;
}
}
.ui-widget {
&.ui-widget-content {
border: none;
}
}
}
.xts-theme-style {
.wp-color-result {
&.button {
background-color: #FFF !important;
}
}
}
// @-moz-document url-prefix() {
// :is(
// .xts-theme-style,
// div.vc_ui-panel-content) {
// .wp-picker-container {
// .iris-picker {
// position: relative;
// top: 0;
// }
// }
// }
// }
// ------------------------------------------
// BEFORE LOAD
// ------------------------------------------
.xts-theme-style {
input.color-picker:not(.wp-color-picker) {
max-width: 78px;
// opacity: 0;
color: transparent;
}
}
// STYLES BEFORE COLOR-PICKER LOAD
// .xts-color-control,
// .xts-bg-color {
// > input[type="text"] {
// width: 135px;
// height: var(--xts-input-height);
// opacity: 0;
// }
// }
// ------------------------------------------
// POSITION RELATIVE/ABSOLUTE
// ------------------------------------------
// @supports selector(:has(*)) {
// :is(
// .xts-theme-style,
// div.vc_ui-panel-content) {
// .wp-picker-container {
// .iris-picker {
// position: absolute;
// top: 35px;
// inset-inline: 0;
// }
// }
// }
// }
} // END IF
@if $wpb-cont-color-picker {
// ------------------------------------------------------------------------------------------------
// WPB COLOR-PICKER
// ------------------------------------------------------------------------------------------------
div.vc_ui-panel-content {
.wp-picker-container {
.wp-color-result {
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
border-radius: inherit;
transform: translateY(-50%) translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 800px;
}
&:before {
inset-inline-start: -1px;
width: 77px;
height: var(--xts-color-picker-h);
border: 1px solid var(--xts-option-border-color) !important;
background-color: #FFF;
}
&:after {
inset-inline-start: 3px;
z-index: 2;
display: block !important;
width: 34px;
height: 29px;
border: none !important;
background-color: inherit;
}
.wp-color-result-text {
position: relative;
z-index: 2;
}
}
}
.wp-picker-container {
.wp-color-picker {
height: var(--xts-input-height) !important;
}
:is(
.woodmart-opacity-container,
.vc_alpha-container) {
border: 1px solid var(--xts-option-border-color) !important;
border-radius: var(--xts-option-border-radius) !important;
box-shadow: var(--xts-box-shadow);
label {
margin-top: 0;
}
}
.color-alpha {
z-index: $z-layer-10;
width: 35px !important;
}
}
}
.woodmart-vc-colorpicker {
.wp-picker-container {
position: relative;
.wp-color-result {
&.wp-picker-open {
&:after {
display: none;
}
}
}
.iris-picker {
margin-bottom: 74px;
}
}
.wp-picker-holder {
position: absolute;
top: 0;
inset-inline-start: 0;
padding-bottom: 10px;
}
}
.woodmart-opacity-container {
position: absolute;
bottom: -73px;
inset-inline-start: -1px;
z-index: 1000;
padding: 6px;
width: 243px;
border: 1px solid #DFDFDF;
border-radius: 0;
background-color: #FFF;
border-end-end-radius: var(--xts-option-border-radius);
border-end-start-radius: var(--xts-option-border-radius);
.woodmart-opacity-field {
padding-right: 0;
padding-left: 0;
}
}
} // END IF
@if $whb-cont-color-picker {
// ------------------------------------------------------------------------------------------------
// WHB COLOR-PICKER
// ------------------------------------------------------------------------------------------------
.whb-color-picker {
position: relative;
display: inline-flex;
padding: 2px;
height: var(--xts-input-height);
border: 1px solid var(--xts-option-border-color);
border-radius: var(--xts-option-border-radius);
background-color: #FFF;
vertical-align: middle;
}
.whb-color-preview {
width: 35px;
border-radius: inherit;
}
.whb-color-handler {
display: flex;
align-items: center;
justify-content: center;
margin-inline-start: 2px;
width: 35px;
border-radius: inherit;
background-color: var(--xts-btn-grey-color);
font-size: 14px;
cursor: pointer;
transition: all .2s ease-in-out;
&:before {
@include font-icon($xts-icon-brush);
}
&:after {
content: "";
position: absolute;
inset: 0;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
}
&:hover {
background-color: var(--xts-btn-grey-color-hover);
}
}
.whb-color-picker-option {
position: relative;
// box-shadow: inset 0 0 5px rgba(0,0,0,.4);
.whb-clear-color {
display: inline-block;
margin-inline-start: 5px;
width: 20px;
height: 20px;
// color: var(--xts-btn-warning-color);
color: rgba(94,94,94,1);
vertical-align: middle;
text-align: center;
font-size: 18px;
cursor: pointer;
transition: all .2s ease-in-out;
&:before {
// @include font-icon($xts-icon-delete-bin);
@include font-icon($xts-icon-round-left);
}
&:hover {
// color: var(--xts-btn-warning-color-hover);
color: rgba(94,94,94,.7);
}
}
.sketch-picker {
border: 1px solid var(--xts-option-border-color-darker-10) !important;
border-radius: var(--xts-option-border-radius) !important;
// box-shadow: var(--xts-option-box-shadow) !important;
box-shadow: var(--xts-box-shadow) !important;
animation: wd-SlideFromBottomSmall .2s ease;
> div {
&:first-child {
border-radius: 3px;
}
}
.flexbox-fix:nth-child(2) > div > div,
.hue-horizontal {
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0,0,0,.4);
}
}
.saturation-white {
box-shadow: inset 0 0 5px rgba(0,0,0,.4);
}
}
.whb-color-picker-cover {
position: absolute;
top: -60px;
right: -100vw;
bottom: -30px;
left: -100vw;
}
.whb-color-picker-absolute {
position: absolute;
top: 50px;
z-index: 2;
.whb-picker-top & {
top: auto;
bottom: 45px;
}
.whb-picker-overlap & {
top: 85px;
}
}
.whb-color-picker-option {
&.whb-picker-opened:not(.whb-picker-top):not(.whb-picker-overlap) {
padding-bottom: 320px;
}
}
} // END IF