File "customize-controls.scss"
Full Path: /home/rattkxnv/byattorney.com/wp-content/plugins/everest-forms/assets/css/customize-controls.scss
File size: 34.94 KB
MIME-type: text/plain
Charset: utf-8
/**
* customize-controls.scss
* Customize controls styles.
*/
// Imports.
@import 'variables';
/**
* Styling begins.
*/
$customizerPrimaryColor: #3858E9;
$whiteColor: #FFFFFF;
$toggleDefaultColor: #9CA3AF;
$inputBorderColor: #CCCCCC;
#customize-theme-controls {
// Pre-built templates.
.control-section-evf-templates {
border: none;
> .accordion-section-title,
> .accordion-section-title:hover {
cursor: default;
background: #fff;
color: #555d66;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: none;
border-right: none;
margin: 0 0 15px 0;
padding-right: 100px;
transition: 0.15s color ease-in-out, 0.15s background-color ease-in-out, 0.15s border-color ease-in-out;
&::after {
display: none;
}
}
.accordion-section-title {
padding-right: 100px; /* Space for the button */
span.customize-action {
display: block;
font-size: 13px;
font-weight: 400;
}
.change-template {
position: absolute;
right: 10px;
top: 50%;
margin-top: -14px;
font-weight: 400;
}
}
#everest-forms-save-template-container {
input {
width: 100%;
margin-bottom: 10px;
}
> div {
display: block;
text-align: right;
.button-primary {
background: $customizerPrimaryColor;
border-color: $customizerPrimaryColor;
transition: all .3s;
&:hover {
background: darken($color: $customizerPrimaryColor, $amount: 8);
}
}
}
}
.customize-control-evf-image_radio {
.image-radio-wrapper {
flex-wrap: wrap;
margin-top: 15px;
li {
margin-right: 20px;
margin-bottom: 20px;
flex: 0 0 calc(50% - 10px);
position: relative;
&:nth-child(2n) {
margin-right: 0;
}
label {
height: auto;
border: none;
display: flex;
padding: 15px;
flex-wrap: wrap;
overflow: hidden;
border-radius: 5px;
background: #dedede;
transition: all 0.25s;
border: 2px solid transparent;
img {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
transition: all 0.25s;
}
&:hover {
color: $color__primary;
background: #d9d9d9;
img {
box-shadow: 0 2px 7px rgba(128, 128, 128, 0.3);
}
}
}
input {
&:checked {
+ label {
color: $color__primary;
border: 2px solid $color__primary;
img {
box-shadow: 0 2px 7px rgba(128, 128, 128, 0.3);
}
}
}
}
.evf-delete-template-btn {
position: absolute;
top: 1px;
right: 1px;
color: red;
cursor: pointer;
}
}
}
}
}
// Colorpicker control.
.customize-control-evf-color,
.customize-control-evf-background_image {
.wp-picker-container {
button.wp-color-result {
overflow: hidden;
}
input[type='text'].wp-color-picker {
width: 80px !important;
}
}
}
// Toogle switch contol.
.customize-control-evf-toggle {
position: relative;
label {
display: flex;
flex-wrap: wrap;
.customize-control-title {
width: calc(100% - 55px);
margin-bottom: 0 !important;
}
}
.switch {
top: 4px;
width: 36px;
height: 18px;
cursor: pointer;
user-select: none;
position: relative;
border-radius: 15px;
display: inline-block;
border: 2px solid $color__gray-dark;
background: $color__white;
vertical-align: middle;
transition: background 350ms ease;
&::before,
&::after {
content: '';
top: 50%;
left: 2px;
width: 16px;
height: 16px;
display: block;
position: absolute;
background: $color__gray-dark;
border-radius: 50%;
transform: translate3d(0, -50%, 0);
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
}
&::before {
left: -2px;
background: rgba(0, 0, 0, 0.2);
transform: translate3d(0, -50%, 0) scale(0);
}
.switch-content {
&::before,
&::after {
content: '';
height: 6px;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&::before {
left: 8px;
width: 2px;
background: $color__white;
}
&::after {
height: 4px;
width: 4px;
border: 2px solid $color__gray-dark;
border-radius: 4px;
right: 6px;
}
}
}
input:checked + .switch {
background: $color__primary;
border: 2px solid $color__primary;
&::after {
background: $color__white;
transform: translate3d(100%, -50%, 0);
}
}
}
// Range slider control.
.customize-control-evf-slider {
.customize-control-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.everest-forms-slider {
height: 4px;
display: flex;
border-radius: 3px;
position: relative;
align-items: center;
width: calc(65% - 12px);
background: transparentize($color__gray-base, 0.75);
border: 0;
.ui-slider-handle {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
border-radius: 16px;
background: $customizerPrimaryColor;
top: 50%;
transform: translateY(-50%);
&::after {
top: 50%;
content: '';
z-index: -1;
width: 16px;
height: 16px;
display: block;
position: absolute;
border-radius: 50%;
transform: translate3d(0, -50%, 0) scale(0);
transition: all 350ms cubic-bezier(0, 0, 0, 0.25), background 150ms ease;
background: transparentize($color__gray-base, 0.7);
}
&:active {
&::after {
transform: translate3d(0, -50%, 0) scale(1.75);
}
}
}
.ui-slider-range {
height: 100%;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
background: $customizerPrimaryColor;
}
}
.everest-forms-slider-input {
display: flex;
align-items: center;
width: calc(35% - 12px);
.reset {
width: 16px;
height: 16px;
font-size: 16px;
cursor: pointer;
color: #8b8b8b;
transition: all 0.3s;
&:hover {
color: $customizerPrimaryColor;
}
}
}
}
// Dimension picker control.
.customize-control-evf-dimension {
label {
display: flex;
.customize-control-title {
display: flex;
align-items: center;
margin-right: 10px;
}
}
}
.responsive-tabs {
display: flex;
margin-right: 7px;
align-items: center;
li {
display: flex;
margin-right: 7px;
align-items: center;
.responsive-tab-item {
span {
width: 16px;
height: 16px;
padding: 5px;
border-radius: 16px;
background-color: $color__gray-light;
svg {
fill: $color__gray-dark;
}
&:hover {
svg {
fill: $color__gray-base;
}
}
}
input {
display: none;
&:checked {
+ span {
background: $color__primary;
svg {
fill: $color__white;
}
}
}
}
}
}
}
.dimension-units {
display: flex;
margin-left: auto;
align-items: center;
li {
margin-right: 5px;
&:last-child {
margin-right: 0;
}
label {
font-size: 10px;
text-transform: uppercase;
& + input {
&:not(:checked) {
color: $color__gray-light;
}
}
}
input {
display: none;
&:checked {
+ .unit-switcher {
text-decoration: underline;
}
}
&:not(:checked) {
+ .unit-switcher {
opacity: 0.7;
}
}
}
}
}
.dimension-wrapper {
.dimension-input-wrapper {
.dimension-inputs {
display: flex;
li {
flex: 1;
&:not(:first-child) {
input {
border-left: none;
}
}
&:first-child {
input {
border-radius: 3px 0 0 3px;
}
}
input {
height: 35px;
box-shadow: none;
text-align: center;
border-radius: 0;
border-color: $color__gray;
}
.dimension-anchor-wrapper {
padding: 0;
width: auto;
font-size: 0;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 3px 3px 0;
background-color: $color__gray;
border: 1px solid $color__gray;
border-left: none;
.unlinked-icon {
display: none;
}
span {
width: 16px;
height: 16px;
svg {
fill: $color__gray-dark;
}
&:hover {
svg {
fill: $color__gray-dark;
}
}
}
&.unlinked {
background-color: $color__white;
.linked-icon {
display: none;
}
.unlinked-icon {
display: block;
}
}
input {
&[type='checkbox'] {
display: none;
}
}
}
label {
font-size: 12px;
justify-content: center;
color: $color__gray-dark;
}
}
}
}
}
// Image radio and checkbox control.
.image-radio-wrapper,
.image-checkbox-wrapper {
display: flex;
li {
flex: 1;
text-align: center;
&:first-child {
label {
border-radius: 3px 0 0 3px;
border-left: 1px solid darken($color__gray, 10%);
}
}
&:last-child {
label {
border-radius: 0 3px 3px 0;
}
}
label {
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background: $color__white;
border: 1px solid darken($color__gray, 10%);
border-left: none;
img {
width: 16px;
height: 16px;
}
&.selected {
background: $color__gray;
}
}
input {
display: none;
&:checked {
+ label {
background: $color__gray;
}
}
}
}
}
// Dimension control reset
.everest-forms-dimension-reset {
display: flex;
align-items: center;
width: calc(35% - 12px);
.reset {
width: 16px;
height: 16px;
font-size: 16px;
padding: 7px;
cursor: pointer;
margin-left: 10px;
color: #8b8b8b;
transition: all 0.3s;
&:hover {
color: $customizerPrimaryColor;
}
}
}
// Select2 control.
.select2-container {
width: 100% !important;
&.select2-container--default {
.select2-selection--single,
.select2-selection--multiple {
outline: none;
border-radius: 0;
border-color: $color__gray;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
.select2-selection__clear {
line-height: 24px;
}
}
.select2-selection--multiple {
ul {
&.select2-selection__rendered {
display: block;
.select2-selection__clear {
margin-top: 2px;
}
li {
border-radius: 3px;
}
}
}
}
}
}
}
/**
* Section styling.
*/
#customize-controls {
.customize-info {
.customize-section-description {
margin: 0;
}
}
}
/**
* Select2 Dropdown.
*/
.wp-customizer {
.select2-dropdown {
z-index: 900000;
border-color: $color__gray;
}
.select2-container--default {
.select2-results__option {
&[area-selected],
&[data-selected],
&[aria-selected='true'],
&[data-selected='true'] {
&:focus {
outline: none;
}
}
&.select2-results__option--highlighted {
&[area-selected],
&[data-selected] {
background-color: $color__blue;
}
}
}
.select2-search--dropdown {
.select2-search__field {
border-color: $color__gray;
}
}
}
}
// Custom checkbox color palette.
.color-palette {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
.color-palette-item {
position: relative;
display: flex;
flex-direction: column;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
input[type="checkbox"] {
display: none;
}
.color-palette-color {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 3px;
margin-bottom: 5px;
border: 1px solid #ccc;
cursor: pointer;
transition: border-color 0.3s;
&:hover,
&:focus {
border-color: #333;
}
}
.color-palette-label {
text-align: center;
}
input[type="checkbox"]:checked + .color-palette-color {
border-color: #333;
}
.tooltip {
position: absolute;
top: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
z-index: 999;
display: none;
}
&:focus-within .tooltip {
display: inline-block;
}
}
}
/* Custom styles for accordion effect */
.accordion-toggle {
cursor: pointer;
display: block;
background: #f1f1f1;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.accordion-content {
display: none;
padding: 10px;
border-top: 1px solid #ccc;
background: #fff;
}
.accordion-content.active {
display: block;
}
/*---------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
------------ Style Customizer ReVamp Design CSS -----------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
---------------------------------------------------------------*/
.wpeverest-customizer-style {
&#customize-controls {
#customize-theme-controls {
.customize-pane-parent {
> li {
&:not([id*="everest_forms_"]) {
display: none !important;
}
&#accordion-section-custom_css {
display: list-item !important;
}
}
}
.accordion-section {
&::-webkit-scrollbar {
width: 7px !important;
}
&::-webkit-scrollbar-track {
border-radius: 10px !important;
}
&::-webkit-scrollbar-thumb {
background: #b0b0b0 !important;
border-radius: 10px !important;
}
&::-webkit-scrollbar-thumb:hover {
background: #7a7a7a !important;
}
}
.customize-panel-back,
.customize-section-back {
&:hover,
&:focus {
border-left-color: $customizerPrimaryColor !important;
&::before {
color: $customizerPrimaryColor !important;
}
}
}
.accordion-section {
h3.accordion-section-title {
background: $whiteColor !important;
border-bottom: 1px solid #dcdcde !important;
border-left: 4px solid #fff !important;
transition: .15s color ease-in-out, .15s background-color ease-in-out, .15s border-color ease-in-out !important;
padding: 10px 30px 10px 14px !important;
border-right: none !important;
line-height: 1.55 !important;
&:hover,
&:focus {
color: $customizerPrimaryColor !important;
background: #F6F7F7 !important;
border-left-color: $customizerPrimaryColor !important;
}
}
}
.customize-control {
padding: 16px;
margin-top: 12px;
margin-bottom: 0;
box-sizing: border-box;
background: $whiteColor;
position: relative;
&:last-child {
margin-bottom: 0;
}
.customize-control-title {
margin-bottom: 8px;
color: #222222;
font-size: 14px;
font-weight: 600;
line-height: 18px;
text-transform: capitalize;
}
label {
justify-content: space-between;
align-items: center;
.switch {
width: 30px;
height: 16px;
top: 0;
border: 0;
background: $toggleDefaultColor;
&::after {
width: 12px;
height: 12px;
left: 2px;
background: $whiteColor;
}
&-content {
&::before,
&::after {
content: none;
}
}
}
}
input:checked {
+ .switch {
background: $customizerPrimaryColor;
border-color: $customizerPrimaryColor;
&::after {
right: 14px;
left: unset;
}
}
}
&.customize-control-evf-select2 {
.customize-control-title {
margin-bottom: 8px;
}
select {
height: 38px;
border-radius: 2px;
border-color: $inputBorderColor;
&:focus {
border-color: $customizerPrimaryColor;
}
}
.select2 {
&-selection {
height: 38px;
border-radius: 2px;
&:focus {
border-color: $customizerPrimaryColor;
}
&__rendered {
line-height: 36px;
}
&__arrow {
height: 36px;
}
&__clear {
line-height: 36px;
}
}
}
}
// Margin and Padding Option CSS
&-evf-dimension {
position: relative;
> label {
.customize-control-title {
margin-right: 0;
}
.responsive-tabs {
display: none;
margin-right: 0;
gap: 4px;
li {
margin: 0;
}
}
}
.dimension {
&-inputs {
gap: 8px;
li {
margin-bottom: 0;
input[type="number"] {
width: 100%;
height: 2.1vw;
padding: 0;
text-align: center;
border: 1px solid $inputBorderColor;
border-radius: 3px;
transition: all .3s;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
&:hover {
border-color: #848484;
}
&:focus {
box-shadow: none;
outline: none;
border-color: $customizerPrimaryColor;
}
}
> label {
justify-content: center;
}
> label {
&.dimension-anchor-wrapper {
width: 100%;
height: 2.1vw;
box-sizing: border-box;
justify-content: center;
border-radius: 3px;
cursor: pointer;
border: 0;
background: transparent;
}
}
&:has(.dimension-anchor-wrapper) {
flex: unset;
.dimension-anchor-wrapper {
.linked-icon {
svg {
fill: $customizerPrimaryColor;
}
}
}
}
&:has(.customize-control-content) {
position: absolute;
top: 16px;
right: 16px;
}
.customize-control-content {
.everest-forms-dimension-reset {
.reset {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin-left: 0;
}
}
}
}
}
}
}
&-evf-color_palette {
border: 2px solid transparent !important;
.color-palette-edit-interface {
.color-palette-edit-item {
> label {
font-weight: 500;
}
}
}
}
select {
border: 1px solid $inputBorderColor;
}
}
.customize-pane-child {
margin-bottom: 0;
}
#sub-accordion-section-everest_forms {
&_templates {
background: #f0f0f1 !important;
#everest-forms-save-template-container {
background: $whiteColor;
padding: 16px;
margin-top: 12px;
.customize-control-title {
margin-top: 0;
}
.customize-control-description {
padding: 0;
}
}
.customize-control-evf-image_radio {
.image-radio-wrapper {
margin-top: 0;
gap: 16px;
> li {
margin: 0;
.image-radio-item {
background: $whiteColor;
border: 1px solid $inputBorderColor;
padding: 8px;
transition: all .3s;
&:hover {
background: #F5F5F5 !important;
color: $customizerPrimaryColor;
border-color: $customizerPrimaryColor;
img {
box-shadow: none;
}
}
img {
border: 1px solid $inputBorderColor;
border-radius: 3px;
}
.image-radio-label {
font-size: 13px;
line-height: 18px;
}
}
input[type="radio"] {
&:checked + label {
color: $customizerPrimaryColor;
border-color: $customizerPrimaryColor;
img {
box-shadow: none;
}
}
}
.evf-delete-template-btn {
color: #EA4741;
}
&:has(.everest-forms-pro-template) {
// cursor: not-allowed;
> label {
opacity: .5;
}
&::after {
content: "";
background-image: url('../images/evf-premium-icon.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
position: absolute;
width: 22px;
height: 22px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}
}
// Color Palettes Part CSS
&_color_palette {
.customize-control {
> label {
display: block;
.customize-control-title {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.color-palette-edit-icon,
.evf-pro-feature {
border-radius: 2px;
border: 1px solid #F4F4F4;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #f4f4f4;
}
.evf-pro-feature {
opacity: .4;
}
}
}
&:has(.evf-active-color-palette) {
border: 2px solid $customizerPrimaryColor !important;
}
&:has(.evf-pro-palette) {
> label {
opacity: .5;
}
&::after {
content: "";
background-image: url('../images/evf-premium-icon.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
position: absolute;
width: 22px;
height: 22px;
top: 16px;
right: 16px;
z-index: 2;
}
}
.color-palette {
gap: 8px;
&-item {
margin: 0;
input[type="checkbox"] {
&:checked + .color-palette-color {
border-color: $inputBorderColor;
}
}
label {
.color-palette-color {
margin-bottom: 0;
border-radius: 50%;
}
}
}
}
.color-palette-edit-interface {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 16px;
.color-palette-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.color-palette-save-button {
width: max-content;
padding: 4px 10px;
cursor: pointer;
}
input[type="text"] {
height: 34px;
border-color: $inputBorderColor;
&:focus {
box-shadow: none;
outline: none;
border-color: $customizerPrimaryColor;
}
}
.color-palette-edit-item {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 24px;
.wp-picker-container {
width: 24px;
height: 24px;
.wp-color-result {
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0;
min-height: unset;
border-radius: 50%;
border-color: $inputBorderColor;
&::after {
content: none !important;
}
.wp-color-result-text {
display: none;
}
}
&.wp-picker-active {
height: auto;
background-color: #fff;
border-radius: 5px;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
top: 30px;
left: 50%;
position: absolute;
z-index: 9999;
padding-top: 16px;
width: 270px;
padding: 12px;
transform: translateX(-50%);
.wp-picker-open {
margin: 0 12px 0 0 !important;
}
.wp-picker-holder {
padding: 0 8px 8px;
}
}
}
}
}
}
}
// General > Typography Part CSS
&_general_typography {
.customize-section-description-container {
padding: 12px 12px 0;
margin-bottom: 0;
}
.customize-control {
margin-bottom: 0;
border-bottom: 1px solid #dcdcde;
> label {
input[type="checkbox"] {
display: none;
}
}
}
}
}
.wp-picker-container {
&.wp-picker-active {
background-color: $whiteColor;
border-radius: 5px;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
top: 50px;
left: 50%;
position: absolute;
z-index: 9999;
padding-top: 16px;
width: 270px;
padding: 12px;
transform: translateX(-50%);
.wp-picker-open {
margin: 0 12px 0 0 !important;
}
}
}
.customize-control-evf-color {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.customize-control-title {
margin-bottom: 0;
}
.customize-control-content {
.wp-color-result {
margin: 0;
padding: 0;
width: 24px;
height: 24px;
max-height: unset;
min-height: unset;
border-radius: 50%;
border-color: $inputBorderColor;
.wp-color-result-text {
display: none;
}
}
}
.customize-control-description {
display: none;
}
.wp-picker-active {
.wp-picker-holder {
width: 260px !important;
.iris-picker {
width: 260px !important;
}
}
}
}
.accordion-section {
h3 {
&.accordion-section-title {
button {
&.accordion-trigger {
padding: 0;
&:hover,
&:focus {
background: transparent;
color: $customizerPrimaryColor;
}
}
}
}
}
}
}
}
#customize-theme-controls {
.customize-pane-child.accordion-section-content {
padding: 12px;
}
.customize-info {
margin-bottom: 0;
.customize-section-title {
margin: -12px -12px 0 !important;
}
}
#sub-accordion-section-everest_forms {
&_general_font,
&_submission_success_message,
&_submission_error_message,
&_submission_validation_message {
.customize-control-evf-toggle {
margin-top: 12px !important;
}
}
&_color_palette,
&_general_font,
&_general_form_container,
&_general_field_styles,
&_file_upload_styles,
&_general_typography,
&_general_buttons,
&_submission_success_message,
&_submission_error_message,
&_submission_validation_message {
height: 100%;
background: #F0F0F1 !important;
}
&_general_typography {
padding: 12px !important;
.customize-section-description-container.customize-info {
margin: -12px -12px 0;
}
.customize-control {
border-bottom: 0 !important;
&-evf-toggle {
margin-top: 12px !important;
}
}
}
}
}
.customize-control {
border-top: 0 !important;
&-select {
select {
&:hover,
&:active {
color: $customizerPrimaryColor;
}
&:focus {
border-color: $customizerPrimaryColor;
box-shadow: none;
outline: none;
}
}
}
.customize-control-title {
margin-top: 0;
line-height: 24px !important;
}
&-evf-dimension {
> label {
align-items: flex-start !important;
}
.dimension-units {
margin-right: 28px;
> li {
.dimension-unit-item {
cursor: pointer;
input[type="radio"] {
&:checked + .unit-switcher {
color: $customizerPrimaryColor;
}
}
}
}
}
}
> label {
.customize-control-title {
margin-top: 0;
}
}
&-evf-color {
min-height: 56px;
.customize-control-content {
width: 24px;
height: 24px;
.wp-picker-container {
width: 24px;
height: 24px;
&.wp-picker-active {
width: 100%;
height: auto;
}
.wp-color-result {
width: 24px;
height: 24px !important;
padding: 0 !important;
.color-alpha {
top: 0 !important;
left: 0 !important;
border: 0;
}
}
}
}
}
&-evf-slider {
.customize-control-content {
flex-direction: unset;
.everest-forms-slider-input {
.reset {
position: absolute;
top: 16px;
right: 16px;
margin-left: 0;
}
}
}
}
&-evf-dimension {
&.everest-forms-padding_option {
margin-top: 0 !important;
border-top: 1px dashed #e0e0e0 !important;
}
}
&-evf-toggle {
margin-top: 0 !important;
}
&-evf-image_checkbox,
&-evf-image_radio {
.image-checkbox,
.image-radio {
&-item {
justify-content: center !important;
cursor: pointer;
transition: all .3s;
&:hover {
background: #e5e7e9 !important;
}
}
&-wrapper {
> li {
margin-bottom: 0;
}
}
}
}
&.everest-forms {
&-border_option,
&-background_image_option,
&-typography_font_option {
margin-top: 0 !important;
border-top: 1px dashed #E0E0E0 !important;
}
&-border_type_option {
display: flex;
align-items: center;
justify-content: space-between;
.customize-control-title {
margin-bottom: 0 !important;
}
.customize-control-description {
display: none;
}
select {
width: 100%;
min-width: 100px;
max-width: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0 !important;
text-align: center;
padding: 0 12px;
background: #F4F4F4;
letter-spacing: .4px;
&:focus {
color: $customizerPrimaryColor;
}
}
}
}
.customize-control-description {
padding: 0 !important;
}
// Hide Zakra Customizer tooltip
.zakra-control-tooltip {
&.dashicons-editor-help {
display: none;
}
}
.customize-control-content {
.reset {
position: absolute;
top: 16px;
right: 16px;
}
}
}
}
.wp-customizer {
.jconfirm {
&-box {
width: 360px !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
.jconfirm-title-c {
padding: 20px 20px 0 !important;
margin-bottom: 20px !important;
.jconfirm-icon-c {
display: none !important;
}
.jconfirm-title {
display: block !important;
text-align: left !important;
padding-bottom: 12px;
border-bottom: 1px solid #d3d3d3;
color: #222222 !important;
font-size: 16px;
line-height: 26px !important;
margin-bottom: 0 !important;
}
}
.jconfirm-content-pane {
padding: 0 20px;
box-sizing: border-box;
margin-bottom: 4px !important;
.jconfirm-content {
> div {
text-align: left;
color: #383838;
font-size: 14px;
font-weight: 400;
line-height: 22px;
> div {
background: #fff5f5;
padding: 8px 10px !important;
border-radius: 4px;
margin-top: 12px;
}
}
}
}
.jconfirm-buttons {
background: #f4f4f4;
padding: 18px 20px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px !important;
.btn {
margin: 0 !important;
width: 50%;
padding: 8px 20px !important;
text-transform: capitalize !important;
font-size: 15px !important;
font-weight: 500;
line-height: 22px !important;
letter-spacing: .3px;
font-weight: 400 !important;
transition: all .3s ease-in-out !important;
&-primary {
background: $customizerPrimaryColor !important;
color: #FFFFFF;
&:hover {
background: #2f49bc !important;
}
}
&-green {
background: $customizerPrimaryColor !important;
&:hover {
background: #2f49bc !important;
}
}
&-light {
color: #383838 !important;
border-radius: 3px;
background: #fff !important;
&:hover {
border-color: #4e4e4e !important;
color: #4e4e4e !important;
}
}
}
}
}
&-holder {
.container {
max-width: 100%;
}
}
&.everest-forms-upgrade-customizer {
.jconfirm {
&-box {
padding: 40px 30px !important;
}
&-title-c {
margin-bottom: 12px !important;
padding: 0 12px !important;
.jconfirm-title {
border-bottom: 0;
padding-bottom: 0;
font-size: 26px !important;
line-height: 34px !important;
text-align: center !important;
font-weight: 600;
color: #222222 !important;
}
}
&-content-pane {
margin-bottom: 0 !important;
.jconfirm-content {
> div {
text-align: center;
color: #646464;
font-size: 16px;
line-height: 26px;
font-weight: 400;
}
}
}
&-buttons {
margin-top: 20px !important;
padding: 0 !important;
float: unset !important;
background: none;
.everst-forms-customizer-class {
width: 100%;
border-radius: 4px;
background: #2563EB;
color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 24px !important;
padding: 10px !important;
&:hover {
background: #2f49bc !important;
}
}
}
}
}
}
}