/*! = Left Vertical Navigation Bar = */ .wpbc_admin { --wpbc_ui_left_vert_nav__width_min: 10px; --wpbc_ui_left_vert_nav__width_compact: 48px; --wpbc_ui_left_vert_nav__width_max: 250px; --wpbc_ui_left_vert_nav__margin: 0; --wpbc_ui_left_vert_nav__background-color: var(--wpbc_ui__gen__panel_background-color); --wpbc_ui_left_vert_nav__font-size: var(--wpbc_ui__gen__font-size); --wpbc_ui_left_vert_nav__a_color: var(--wpbc_ui__gen__text-color); /* Active */ --wpbc_ui_left_vert_nav__active_color: var(--wpbc_ui__gen__active-text-color); --wpbc_ui_left_vert_nav__active_background-color: var(--wpbc_ui__gen__active-background-color); /* Hover */ /*--wpbc_ui_left_vert_nav__hover_color: var(--wpbc_ui__gen__hover-color);*/ --wpbc_ui_left_vert_nav__hover_background-color: #4651601c; /*var(--wpbc_ui__gen__panel_background-color);*/ } .wpbc_ui_el__vert_left_bar__wrapper { display: flex; flex-flow: column nowrap; justify-content: stretch; align-items: stretch; width: 100%; flex: 0 0 var(--wpbc_ui_left_vert_nav__width_max); background: var(--wpbc_ui_left_vert_nav__background-color); border: 0; box-shadow: var(--wpbc_ui__gen__panel_box-shadow); transition: all .25s ease-in-out; font-size: var(--wpbc_ui_left_vert_nav__font-size); border-radius: 0 0 6px; padding: 0; margin: var(--wpbc_ui_left_vert_nav__margin); overflow-y: auto; scrollbar-width: thin; overflow-x: hidden; } /* == Responsive Sizes: < 600px (less top icons), < 782px (no wp left bar), < 960px (wp left bar colapse) =========== */ /* By default -- Left Bar Colapsed */ .wpbc_ui_el__vert_left_bar__wrapper { max-width: var(--wpbc_ui_left_vert_nav__width_min); } .wpbc_ui_el__vert_left_bar__content { display: none; } /* More than > 782px -- Left Bar Expanded */ @media screen and (min-width: 782px) { .wpbc_ui_el__vert_left_bar__wrapper { max-width: var(--wpbc_ui_left_vert_nav__width_max); } .wpbc_ui_el__vert_left_bar__content { display: block; } } /* -- Sizes --------------------------------------------------------------------------------------------------------- */ /* == M I N == */ .wpbc_settings_page_wrapper.none .wpbc_ui_el__vert_left_bar__wrapper { max-width: 0px; } .wpbc_settings_page_wrapper.none .wpbc_ui_el__vert_left_bar__content { display: none; } div.wpbc_settings_page_wrapper.none .hide_in_compact_mode { display: none; } /* == M I N == */ .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper { max-width: var(--wpbc_ui_left_vert_nav__width_min); } .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__content { display: none; } div.wpbc_settings_page_wrapper.min .hide_in_compact_mode { display: none; } /* == COMPACT == */ .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper { max-width: var(--wpbc_ui_left_vert_nav__width_compact); } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content { display: block; } div.wpbc_settings_page_wrapper.compact .hide_in_compact_mode { display: none; } /* == M A X == */ .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__wrapper { max-width: var(--wpbc_ui_left_vert_nav__width_max); } .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__content { display: block; } .wpbc_settings_page_wrapper.max .hide_in_compact_mode { display: block; } /* Make compact size, on hover of minimized panel*/ .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper:hover { max-width: calc( var(--wpbc_ui_left_vert_nav__width_min) + 15px ); } /* -- End Sizes ----------------------------------------------------------------------------------------------------- */ /* Navigation elements */ .wpbc_ui_el__vert_left_bar__content{ } .wpbc_ui_el__vert_nav_item{ } /* A */ .wpbc_ui_el__vert_nav_item a { flex: 1 1 100%; margin: 2px 0px 2px 7px; padding: 9px 8px; border: none; border-radius: var(--wpbc_ui__gen__border-radius) 0 0 var(--wpbc_ui__gen__border-radius); text-shadow: none; font-size: var(--wpbc_ui_left_vert_nav__font-size); font-weight: 600; text-transform: capitalize; text-decoration: none; outline: none; color: var(--wpbc_ui_left_vert_nav__a_color); display: flex; flex-flow: row; justify-content: flex-start; align-items: center; } /* Sub item */ .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a{ margin: 2px -0.2px 2px 40px; padding: 7px 8px 7px 10px; } .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item.sub_right a{ margin-left: 50px; } .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item.sub_bold a, .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item.sub_bold .wpbc_ui_el__vert_nav_title { font-weight: 600; } /* == COMPACT == */ .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a{ margin: 2px 0 2px 7px; } /*Hover, focus*/ .wpbc_ui_el__vert_nav_item a:hover, .wpbc_ui_el__vert_nav_item a:focus { /*color: var(--wpbc_ui_left_vert_nav__hover_color);*/ background-color: var(--wpbc_ui_left_vert_nav__hover_background-color); box-shadow: none; outline:0; } /* Active */ .wpbc_ui_el__vert_nav_item.active a, .wpbc_ui_el__vert_nav_item.active a:hover { color: var(--wpbc_ui_left_vert_nav__active_color); background-color: var(--wpbc_ui_left_vert_nav__active_background-color); box-shadow: none; outline:0; } /* Icons */ .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ margin:0; } .wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ margin: 0 13px 0 0; } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ margin-right: 20px; } .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon::before { font-size: 16px; line-height: 20px; } /* Icons in Sub elements */ .wpbc_ui_el__vert_nav_item.wpbc_ui_el__vert_nav_item_sub a .wpbc_ui_el__vert_nav_icon::before { font-size: 14px; } /* == Colapsed == */ .wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item:not(.wpbc_ui_el__vert_nav_item_sub) a { border-bottom: 1px solid #0000001c; } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub { margin-left: 5px; } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub .wpbc_ui_el__vert_nav_icon::before { font-size: 11px; } /* Text */ .wpbc_ui_el__vert_nav_item a span { } /* -- Vertical Menu items ---------------------------------------------------------------------------------------- */ /* Root menu elements */ /* Right arrow in root mennu */ .wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item_root a .wpbc_ui_el__vert_nav_icon.wpbc_ui_el__vert_nav_icon_arrow { margin: 0; margin-left: auto; } /* Section header */ .wpbc_ui_el__section_header { font-size: 13px; font-weight: 600; color: var(--wpbc_ui__gen__text-color); /*text-transform: uppercase;*/ letter-spacing: 0px; margin: 0 0 0 15px; } a > .wpbc_ui_el__section_header { color: #2271b1; font-weight: 400; font-size: 12px; font-weight: 400; letter-spacing: 0; margin: 0 0 0px 5px; text-transform: none; letter-spacing: 0px; } .wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__go_back { width: auto; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: 0 0 0 10px; text-decoration: none; } /* Animation */ .wpbc_ui_el__vert_left_bar__section { animation: wpbc_ui_el__slide_to_left 200ms ease-in-out forwards; transform-origin: left center; transform: translateX(0%); display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; } .wpbc_ui_el__vert_left_bar__section.wpbc_ui__hide { transform: translateX(-100%); } /* -- Items -------------------------------------------------------------------------------------------------------- */ /* Default order */ .wpbc_ui_el__level__folder, .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item, .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item_sub { order: 100; } /* Folder Block - Default order */ .wpbc_ui_el__level__folder { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; } .wpbc_ui_el__level__folder.expanded{ } /* In folder Item */ .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item { } /* Folder */ .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__folder{ } /* Hide or show folder icons on expanded/colapsed blocks */ .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_icon_collapsed { display: none; } .wpbc_ui_el__level__folder:not(.expanded) .wpbc_ui_el__vert_nav_icon_expanded { display: none; } /* Single A */ .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__single{ } /* Item Sub*/ .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item.wpbc_ui_el__vert_nav_item_sub{ } /* Sub - Single A */ .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item_sub a.wpbc_ui_el__vert_nav_item__single{ } /* Set animation for colapsed / expanded sub sections */ .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub{ display:block; height:auto; animation: wpbc_ui_el__dropdown_menu__anim__grow_down 400ms ease-in-out forwards; transform-origin: top center; } /* Hide Colapsed sub section */ .wpbc_ui_el__level__folder:not(.expanded) .wpbc_ui_el__vert_nav_item_sub{ display:none; height:0; animation: wpbc_ui_el__dropdown_menu__anim__grow_down 400ms ease-in-out forwards; transform-origin: top center; } /* Item A --------------------------------------------------- */ .wpbc_ui_el__vert_nav_item__a { } .wpbc_ui_el__vert_nav_item__a *{ flex: 0 1 auto; } /* Left Icon */ .wpbc_ui_el__vert_nav_item__a .wpbc_ui_el__vert_nav_icon{ } /* Title in Parent single element */ .wpbc_ui_el__vert_nav_item .wpbc_ui_el__vert_nav_item__a .wpbc_ui_el__vert_nav_title { flex: 1 1 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } /* Sub title */ .wpbc_settings_page_wrapper .wpbc_ui_el__vert_nav_item_sub .wpbc_ui_el__vert_nav_title { font-weight: 400; font-size: 12px; line-height: 1.5; flex: 1 1 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } /* Right Icon */ .wpbc_ui_el__vert_nav_item__a .wpbc_ui_el__vert_nav_icon_right{ margin-left:auto; } /* Radio button icons */ .wpbc_ui_el__vert_nav_item.active .wpbc_ui_el__vert_nav_icon_right.wpbc-bi-toggle2-on { color: var(--wpbc_ui_left_vert_nav__active_color) !important; } .wpbc_ui_el__vert_nav_item.active .wpbc_ui_el__vert_nav_icon_right.wpbc-bi-toggle2-off { color: #b4b4b4 !important; } .wpbc_ui_el__vert_nav_item__single .wpbc-bi-toggle2-on::before, .wpbc_ui_el__vert_nav_item__single .wpbc-bi-toggle2-off::before{ font-size:95%; } /* -- End Items ---------------------------------------------------------------------------------------------------- */ /* Row for header and buttons */ .wpbc_ui_el__expand_colapse_btns{ margin: 10px 0 5px; padding:0; } .wpbc_ui_el__expand_colapse_btns a, .wpbc_ui_el__expand_colapse_btns a:focus, .wpbc_ui_el__expand_colapse_btns a:hover { box-shadow: none; outline: 0; } .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a{ margin-left: auto; padding:0 8px; } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns { justify-content: center; } .wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a{ margin-left:0; padding:0; }