| Current File : /home/kelaby89/public_html/wp/wp-content/themes/nexio/theme-options/theme-customizer.scss |
@import "../css/_mixins.scss";
@import "../css/_theme-vars.scss";
@import "../css/_admin-colors.scss";
/* Theme Customizer styles */
#customize-header-actions .button {
margin: 0;
padding: 0 5px;
font-size: 12px;
}
#customize-header-actions .customize-action-reset {
float: right;
margin-left: 6px;
max-width: 50px;
}
#customize-header-actions .customize-action-refresh {
position: absolute;
z-index:1000;
left: 60px;
top: 10px;
}
#customize-header-actions .customize-action-refresh:before {
margin: 0 0.3em 0 0;
vertical-align: top;
}
#customize-controls .customize-info div.customize-panel-description,
#customize-controls .customize-info div.customize-section-description,
#customize-controls div.no-widget-areas-rendered-notice {
display:block;
}
#customize-controls #customize-info div.customize-panel-description {
display:none;
}
#customize-controls .customize-section-description-container {
margin-bottom:0;
}
#customize-controls div.customize-section-description {
color: #555d66;
background: #fff;
padding: 12px 15px;
border-top: 1px solid #ddd;
}
#customize-controls .customize-section-title + .customize-section-description {
margin: -1px -12px 0;
}
#customize-controls div.customize-panel-description,
#customize-controls div.customize-panel-description p,
#customize-controls div.customize-section-description,
#customize-controls div.customize-section-description p,
.customize-control-description {
font-size: 12px;
line-height: 18px;
}
.customize-control-description {
margin-top: 3px;
margin-bottom: 0;
#customize-controls & {
color: $text_color;
@include font(12px, 17px, normal, normal);
}
#customize-controls .customize-control-info & {
color: $text_color;
font-size: 13px;
}
}
.customize-control-info > div {
margin-top:2em !important;
padding: 0.8em 12px;
background-color: #fcfcfc;
color: #626467;
border-top: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
border-left: 4px solid $customizer_accent_color;
margin: 6px -12px;
& > .customize-control-title {
text-shadow: 1px 1px 1px #fff;
font-size: 16px;
font-weight: 400;
margin-bottom:0;
}
& > .customize-control-description {
p {
margin: 0;
}
}
}
.customize-control-field-wrap {
display: block;
position:relative;
}
#customize-theme-controls li.customize-control > .customize-control-title,
#customize-theme-controls li.customize-control > label {
display:block;
}
#customize-theme-controls li.customize-control > .customize-control-title,
#customize-theme-controls li.customize-control > label,
#customize-theme-controls li.customize-control > .customize-control-wrap {
margin-top: 0.8em;
}
#customize-theme-controls li.customize-section-description-container + li.customize-control-sidebar_widgets {
margin-top: 1em;
}
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > .customize-control-title,
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > label,
#customize-theme-controls li:not(.customize-section-description-container):not(.customize-control-info) + li.customize-control > .customize-control-wrap {
padding-top:0.8em;
border-top: 1px dotted #ddd;
}
.customize-control .customize-inside-control-row {
padding-top: 3px;
padding-bottom: 3px;
}
.customize-control > label > label,
.customize-control > div > label {
display:inline-block;
margin:0 1em 0 0;
padding:0;
border:none;
}
.customize-control > label > label > input[type="radio"],
.customize-control > div > label > input[type="radio"] {
margin-right:0;
}
.customize-control-background img,
.customize-control-cropped_image img,
.customize-control-header img,
.customize-control-image img,
.customize-control-media img,
.customize-control-upload img {
width: auto;
}
#customize-control-header_image .customize-control-description {
display:none;
}
/* Checkbox and Checklist */
.customize-control {
.nexio_options_item_checkbox input[type="checkbox"]:checked,
.nexio_options_item_checklist input[type="checkbox"]:checked {
border-color: $customizer_accent_color;
background-color: $customizer_accent_color;
}
}
/* Radio */
.customize-control-radio {
padding: 0;
.nexio_options_item_radio input:checked + .nexio_options_item_holder,
.nexio_options input[type="radio"]:checked + .nexio_options_item_holder {
background-color: $customizer_accent_color;
}
.nexio_options_item_radio input:checked + .nexio_options_item_holder:focus:before,
.nexio_options input[type="radio"]:checked + .nexio_options_item_holder:focus:before {
border-color: $customizer_accent_color;
}
}
/* Select */
.customize-control-select select {
font-size: 13px;
margin-top: 3px;
}
/* Text */
.customize-control-text input {
font-size: 13px;
margin-top: 3px;
}
/* Textarea */
.customize-control-textarea textarea {
font-size: 13px;
padding: 12px;
}
/* Switch */
#customize-theme-controls .customize-control-switch > .customize-control-wrap {
@include flex;
@include flex-direction(row);
@include flex-align-items(center);
@include flex-justify-content(space-between);
.customize-control-title {
@include flex-grow(1);
}
.customize-control-field-wrap {
@include flex-grow(0);
margin: 0 0 0 0.5em;
}
.nexio_options_item_switch .nexio_options_item_holder_back {
background-color: $customizer_switch_back;
}
.nexio_options_item_switch .nexio_options_item_holder_handle {
background-color: $customizer_switch_handle;
}
.nexio_options_item_switch .nexio_options_item_holder_handle:after {
background-color: $customizer_switch_handle;
}
.nexio_options_item_switch input:checked + .nexio_options_item_holder .nexio_options_item_holder_handle {
background-color: $customizer_accent_color;
}
.nexio_options_item_switch input:checked + .nexio_options_item_holder .nexio_options_item_holder_handle:after {
background-color: $customizer_accent_color;
}
}
/* Choice */
.customize-control-choice {
.nexio_list_choice {
padding-top: 5px;
}
.nexio_list_choice_item {
margin-right: 10px;
}
.nexio_list_choice_item_icon {
border-color: #d5d8dc;
background-color: #fff;
}
.nexio_list_choice_item_title {
color: #6e7379;
}
.nexio_list_choice_item.nexio_list_active .nexio_list_choice_item_icon {
border-color: $customizer_accent_color;
}
.nexio_list_choice_item.nexio_list_active .nexio_list_choice_item_title {
color: $customizer_accent_color;
}
}
/* Range slider */
.customize-control-range {
.customize-control-field-wrap {
margin-top: 1em;
}
div.ui-slider .ui-slider-handle {
background: $customizer_accent_color;
}
div.ui-slider .ui-slider-range {
background: $customizer_accent_color;
}
}
/* List icons */
.customize-control {
.nexio_list_icons_selector:focus {
border-color: $customizer_accent_color;
@include box-shadow(0 0 0 1px $customizer_accent_color);
}
.nexio_list_icons {
left: 0 !important;
}
.nexio_list_icons span {
font-size: 14px;
@include square(30px);
}
.nexio_list_icons input[type="text"].nexio_list_icons_search:focus {
border-color: $customizer_accent_color;
}
.nexio_list_icons input[type="text"].nexio_list_icons_search {
font-size: 14px;
padding: 6px 8px;
}
}
/* Media selector */
.customize-control .widget_field_type_image > input[type="text"],
.customize-control .widget_field_type_media > input[type="text"],
.customize-control .widget_field_type_audio > input[type="text"],
.customize-control .widget_field_type_video > input[type="text"] {
width: 60%;
}
.customize-control .widget_field_type_image > a.trx_addons_media_selector,
.customize-control .widget_field_type_media > a.trx_addons_media_selector,
.customize-control .widget_field_type_audio > a.trx_addons_media_selector,
.customize-control .widget_field_type_video > a.trx_addons_media_selector {
width: 39%;
}
/* Color scheme editor */
.customize-control-scheme_editor {
.nexio_scheme_editor_type .nexio_scheme_editor_row_cell {
padding:0;
}
.nexio_scheme_editor_type .nexio_scheme_editor_row_cell:first-child {
width: 32%;
}
.nexio_scheme_editor_type .nexio_scheme_editor_row_cell_span {
width: 68%;
}
.nexio_scheme_editor_colors .nexio_scheme_editor_header_cell {
font-size: 12px;
}
.nexio_scheme_editor_colors .nexio_scheme_editor_row_cell,
.nexio_scheme_editor_colors .nexio_scheme_editor_row_cell input {
font-size: 11px;
line-height:13px;
}
.nexio_scheme_editor_colors .nexio_scheme_editor_row_cell input {
padding: 3px 2px;
}
.nexio_scheme_editor_colors .nexio_scheme_editor_header_cell,
.nexio_scheme_editor_colors .nexio_scheme_editor_row_cell {
width: 17%;
padding: 0;
}
.nexio_scheme_editor_colors .nexio_scheme_editor_header_cell:first-child,
.nexio_scheme_editor_colors .nexio_scheme_editor_row_cell:first-child {
width: 15%;
font-size: 11px;
}
/* Spectrum ColorPicker */
div.sp-container {
.sp-choose {
background: $customizer_accent_color;
}
.sp-choose:hover {
background: $customizer_accent_hover;
}
}
}
/* Core ColorPicker */
.cp-color-picker {
z-index: 1000000;
}
/* Text editor */
.mce-floatpanel, .mce-tooltip {
z-index: 9999999 !important;
}
/* Widgets parameters
*
* Uncomment first row in each selector if you want display ThemeREX Widgets as SOW - fixed to the right side of panel
* If you remove '[id^="customize-control-widget_trx_addons_"]' part from first line - standard WP Widgets will be moved also
*
*/
.customize-control-widget_form .widget-control-actions {
margin: 1.5em 0;
}
.customize-control-widget_form.wide-widget-control .widget-inside {
position: fixed;
left: 18%;
top: 0 !important;
max-height: 100vh !important;
border: 1px solid #e5e5e5;
overflow-y: scroll;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
max-width: 360px !important;
min-width: 270px !important;
}
@media (max-width: 1667px) {
.customize-control-widget_form.wide-widget-control .widget-inside {
left: 300px;
}
.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
max-width: 300px !important;
}
}
@media (max-width: 1279px) {
.customize-control-widget_form.wide-widget-control .widget-inside {
position: static !important;
left: 0 !important;
top: 0 !important;
max-height: none !important;
border: none;
overflow: visible;
}
.customize-control-widget_form.wide-widget-control .widget-inside .widget-content {
max-width: none !important;
}
}
/* WordPress Customizer decoration
---------------------------------------------- */
#customize-theme-controls {
.accordion-section .accordion-section-title {
&:before {
font-family: $theme_icons;
display: inline-block;
vertical-align: middle;
font-weight: 300;
margin-right: 0.25em;
@include transition-colors;
/* Simple icon */
font-size: 1.25em;
color: $text_light;
/* Round icon */
//font-size: 1em;
//@include square(2em);
//@include border-round;
//@include box-shadow(0 2px 1px rgba(46, 68, 83, 0.15));
//background-color: $customizer_accent_color;
//color: #fff;
//border: 2px solid #fff;
}
&:hover:before {
/* Simple icon */
color: $customizer_accent_hover;
/* Round icon */
//background-color: $customizer_accent_hover;
}
}
/* Theme-specific sections */
#accordion-section-title_tagline .accordion-section-title:before { content: '\e95e'; }
#accordion-section-general .accordion-section-title:before { content: '\e961'; }
#accordion-section-header .accordion-section-title:before { content: '\e967'; }
#accordion-section-footer .accordion-section-title:before { content: '\e966'; }
#accordion-section-mobile .accordion-section-title:before { content: '\e962'; }
#accordion-panel-front_page .accordion-section-title:before { content: '\e965'; }
#accordion-panel-blog .accordion-section-title:before { content: '\f511'; }
#accordion-section-blog_general .accordion-section-title:before { content: '\f508'; }
#accordion-section-blog_general_category .accordion-section-title:before { content: '\f503'; }
#accordion-section-blog_general_tag .accordion-section-title:before { content: '\f513'; }
#accordion-section-blog_general_author .accordion-section-title:before {content: '\f509'; }
#accordion-section-blog_general_search .accordion-section-title:before {content: '\f50a'; }
#accordion-section-blog_single .accordion-section-title:before { content: '\f512'; }
#accordion-panel-woocommerce .accordion-section-title:before { content: '\e96a'; }
#accordion-panel-shop .accordion-section-title:before { content: '\e96a'; }
#accordion-section-shop_general .accordion-section-title:before { content: '\e961'; }
#accordion-section-shop_list .accordion-section-title:before { content: '\f511'; }
#accordion-section-shop_single .accordion-section-title:before { content: '\f508'; }
#accordion-section-shop_brand_section .accordion-section-title:before { content: '\e8b9'; }
#accordion-section-panel_colors .accordion-section-title:before { content: '\e964'; }
#accordion-panel-fonts .accordion-section-title:before { content: '\e95d'; }
#accordion-panel-cpt .accordion-section-title:before { content: '\e960'; }
#accordion-section-cars .accordion-section-title:before { content: '\f502'; }
#accordion-section-certificates .accordion-section-title:before { content: '\f504'; }
#accordion-section-courses .accordion-section-title:before { content: '\f505'; }
#accordion-section-dishes .accordion-section-title:before { content: '\f506'; }
#accordion-section-portfolio .accordion-section-title:before { content: '\f507'; }
#accordion-section-properties .accordion-section-title:before { content: '\e971'; }
#accordion-section-resume .accordion-section-title:before { content: '\f509'; }
#accordion-section-services .accordion-section-title:before { content: '\f50b'; }
#accordion-section-sport .accordion-section-title:before { content: '\f50c'; }
#accordion-section-team .accordion-section-title:before { content: '\f50d'; }
#accordion-section-testimonials .accordion-section-title:before { content: '\f50e'; }
#accordion-section-edd .accordion-section-title:before { content: '\f515'; }
#accordion-section-bbpress .accordion-section-title:before { content: '\f501'; }
#accordion-section-events .accordion-section-title:before { content: '\f516'; }
#accordion-panel-tribe_customizer .accordion-section-title:before { content: '\f516'; }
#accordion-section-give .accordion-section-title:before { content: '\f514'; }
#accordion-section-learnpress .accordion-section-title:before { content: '\f505'; }
/* WordPress sections */
#accordion-panel-nav_menus .accordion-section-title:before { content: '\e93c'; }
#accordion-panel-widgets .accordion-section-title:before { content: '\e977'; }
#accordion-section-static_front_page .accordion-section-title:before { content: '\f510'; }
#accordion-section-background_image .accordion-section-title:before { content: '\e973'; }
#accordion-section-custom_css .accordion-section-title:before { content: '\f50f'; }
}
/* Decorate panel 'Typography'
-------------------------------------------- */
#customize-theme-controls .customize-pane-child[id^="sub-accordion-section-"][id$="_font_section"] {
li:not(.customize-section-description-container):not(.customize-control-info) + li:not(.customize-control-info) > label,
li:not(.customize-section-description-container):not(.customize-control-info) + li:not(.customize-control-info) > div {
padding-top: 0;
border: none;
}
.customize-control:not(.customize-control-info) {
margin: 0;
& + .customize-control:not(.customize-control-info) {
margin-top: 0.5em;
}
.customize-control-title {
display: inline-block;
vertical-align: middle;
width: 35%;
margin-top: 0;
line-height: 1.25em;
& ~ [data-customize-setting-link] {
display: inline-block;
vertical-align: middle;
width: 62%;
}
}
.customize-control-description {
margin-bottom: 1em;
}
}
.customize-control-info {
margin: 1em 0;
.customize-control-wrap {
margin: 0 !important;
border: 1px solid #ddd;
}
}
}
body.nexio_decorate_fonts_section {
#customize-controls .wp-full-overlay-sidebar-content {
overflow-y: scroll;
}
.in-sub-panel.section-open #customize-theme-controls #sub-accordion-panel-fonts.customize-pane-child.current-panel {
visibility: visible;
height: auto;
transform: none;
}
.in-sub-panel #customize-theme-controls .customize-pane-child[id^="sub-accordion-section-"][id$="_font_section"] {
@include abs-lt(3%, 0);
background-color: #fff;
width: 94%;
border: 2px solid #7ec3e5;
padding-top: 1px;
@include box-shadow(0 5px 10px 0 rgba(0,0,0,.125));
@include border-radius(2px);
@include translateX(-110%);
&:after {
content: ' ';
display: block;
@include square(8px);
border: 2px solid #7ec3e5;
border-top-color: transparent;
border-right-color: transparent;
background-color: #fff;
@include abs-lt(15px, -6px);
@include rotate(135deg);
}
&.open {
@include transform-none;
overflow: visible;
}
.customize-section-description-container {
display: none;
}
}
}