/* UI Toolbar *************************************************************************************************/ /* To Compile file: Alt + F12 and run command: "gulp wpbc" */ html { /* 1. Default Button Style ------------------------------------------------------------------------------------------ */ .ui_element .wpbc_ui_button, .ui_element .wpbc_button_as_icon { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; text-decoration: none; /*font-size: 13px;*/ /*line-height: 2.15384615; !* 28px *!*/ /*min-height: 30px;*/ min-height: 24px; margin: 0; padding: 0 10px 2px; padding-bottom: 1px; cursor: pointer; /*border-width: 1px; - Defined at Several elements in a Group. Point #2. */ border-style: solid; -webkit-appearance: none; /*border-radius: 3px; - Defined at Several elements in a Group. Point #2. */ white-space: nowrap; box-sizing: border-box; } .ui_element .wpbc_button_as_icon { border:none; } .ui_element .wpbc_ui_button, .ui_element .wpbc_ui_button-secondary { color: #555; border-color: #d7d7d7; background: #fdfdfd; vertical-align: top; } /* :hover ---- */ .ui_element .wpbc_ui_button.hover:not(.inactive), .ui_element .wpbc_ui_button:hover:not(.inactive), .ui_element .wpbc_ui_button-secondary:hover:not(.inactive){ background: #fafafa; border-color: #d8d8d8;; color: #23282d; text-decoration: none; } .ui_element .wpbc_ui_button.hover.inactive, .ui_element .wpbc_ui_button.inactive:hover, .ui_element .wpbc_ui_button-secondary.inactive:hover{ cursor: default; } /* :focus ---- */ .ui_element .wpbc_ui_button.focus, .ui_element .wpbc_ui_button:focus, .ui_element .wpbc_ui_button-secondary:focus { background: #fafafa; border-color: #d8d8d8; color: #23282d; /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */ box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8); box-shadow: 0 0 0 1px #fff,0 0 0 3px var(--wpbc_admin-theme-color, #2271b1); z-index: 1; text-decoration: none; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; /* Reset inherited offset from Gutenberg */ outline-offset: 0; } /* :active ---- */ .wpbc_ui_dropdown.open > .wpbc_ui_button:not(.inactive), .ui_element .wpbc_ui_button:active:not(.inactive), .ui_element .wpbc_ui_button-secondary:active:not(.inactive) { /*background: #f6f7f7;*/ border-color: #d8d8d8; /*box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3);*/ /*box-shadow: inset 0 2px 10px -4px rgba(0, 0, 0, 0.1);*/ /*transform: translateY(1px);*/ /*transform: translateY(0px);*/ outline: 0; text-decoration: none; background: #fff; box-shadow: inset 0 5px 20px -3px rgba(0, 0, 0, 0.06); } /* :disabled ---- */ .ui_element .wpbc_ui_button:disabled, .ui_element .wpbc_ui_button[disabled], .ui_element.disabled .wpbc_ui_button, .ui_element .wpbc_ui_button.disabled, .ui_element .wpbc_ui_button-secondary[disabled], .ui_element .wpbc_ui_button-secondary:disabled, .ui_element .wpbc_ui_button-secondary.disabled, .ui_element .wpbc_ui_button-disabled { color: #a7aaad !important; border-color: #dcdcde !important; background: #f6f7f7 !important; box-shadow: none !important; cursor: default; transform: none !important; } /* .active CLASS - pressed button, pressed state e.g. a selected setting */ .ui_element .wpbc_ui_button.active:not(.inactive), .ui_element .wpbc_ui_button.active:hover:not(.inactive) { background: #f6f7f7; border-color: #d8d8d8; box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3); transform: translateY(1px); outline: 0; text-decoration: none; } .ui_element .wpbc_ui_button.active:focus:not(.inactive) { border-color: #3582c4; box-shadow:inset 0 1px 5px -3px #0a4b78, 0 0 1px 1px rgba(79, 148, 212, 0.1); } /* 2. Primary Button Style ----------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_button_primary { background: var(--wpbc_admin-theme-color, #0085ba); border-color: #0073aa #006799 #006799; border-color: transparent; color: #fff; text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; text-decoration: none; box-shadow: 0 1px 0px #f1f1f1; } /* :hover, :focus ---- */ .ui_element .wpbc_ui_button_primary.hover:not(.inactive), .ui_element .wpbc_ui_button_primary:hover:not(.inactive), .ui_element .wpbc_ui_button_primary.focus:not(.inactive), .ui_element .wpbc_ui_button_primary:focus:not(.inactive) { /*background: #135e96;*/ /*border-color: #135e96;*/ /*color: #fff;*/ background: var(--wpbc_admin-theme-color, #008ec2 ); border-color: #006799; color: #fff; } /* :focus ---- */ .ui_element .wpbc_ui_button_primary.focus:not(.inactive), .ui_element .wpbc_ui_button_primary:focus:not(.inactive) { box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff; box-shadow: 0 0 0 1.5px #fff,0 0 0 3px var(--wpbc_admin-theme-color, #2271b1); } /* :active ---- */ .ui_element .wpbc_ui_button_primary.active:not(.inactive), .ui_element .wpbc_ui_button_primary.active:hover:not(.inactive), .ui_element .wpbc_ui_button_primary.active:focus:not(.inactive), .ui_element .wpbc_ui_button_primary:active:not(.inactive) { background: #0c7ca8; border-color: #0b79a4; box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .3); color: #fff; } /* :disabled ---- */ .ui_element .wpbc_ui_button_primary[disabled], .ui_element .wpbc_ui_button_primary:disabled, .ui_element .wpbc_ui_button_primary-disabled, .ui_element .wpbc_ui_button_primary.disabled { color: #a7aaad !important; background: #f6f7f7 !important; border-color: #dcdcde !important; box-shadow: none !important; text-shadow: none !important; cursor: default; } /* 2.1 Danger (Red) Button Style ----------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_button_danger { background: #de605c; border-color: #c05d5a; color: #f7f7f7; text-shadow: 0 0px #ba5956; text-decoration: none; box-shadow: 0 1px 0px #f1f1f1; } /* :hover, :focus ---- */ .ui_element .wpbc_ui_button_danger.hover:not(.inactive), .ui_element .wpbc_ui_button_danger:hover:not(.inactive), .ui_element .wpbc_ui_button_danger.focus:not(.inactive), .ui_element .wpbc_ui_button_danger:focus:not(.inactive) { background: #e6716f; border-color: #d58582; color: #fdfdfd; text-shadow: none; box-shadow: 0 0 0 1.5px #fff,0 0 0 3px var(--wpbc_admin-theme-color, #2271b1); border-color:transparent; } /* :focus ---- */ .ui_element .wpbc_ui_button_danger.focus:not(.inactive), .ui_element .wpbc_ui_button_danger:focus:not(.inactive) { box-shadow:0 0 0 0px #fff, 0 0 2px 1px #a4d7ff; box-shadow: 0 0 0 1.5px #fff,0 0 0 3px var(--wpbc_admin-theme-color, #2271b1); border-color:transparent; } /* :active ---- */ .ui_element .wpbc_ui_button_danger.active:not(.inactive), .ui_element .wpbc_ui_button_danger.active:hover:not(.inactive), .ui_element .wpbc_ui_button_danger.active:focus:not(.inactive), .ui_element .wpbc_ui_button_danger:active:not(.inactive) { background: #ba4c48; border-color: #c05d5a; box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .1); color: #f3f2f2; box-shadow: 0 0 0 1.5px #fff,0 0 0 3px var(--wpbc_admin-theme-color, #2271b1); border-color:transparent; } /* :disabled ---- */ .ui_element .wpbc_ui_button_danger[disabled], .ui_element .wpbc_ui_button_danger:disabled, .ui_element .wpbc_ui_button_danger-disabled, .ui_element .wpbc_ui_button_danger.disabled { color: #a7aaad !important; background: #f6f7f7 !important; border-color: #dcdcde !important; box-shadow: none !important; text-shadow: none !important; cursor: default; } @media (max-width: 782px) { .ui_element .in-button-text { display: none; } } /* 2.2 Green (Green) Button Style ----------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_button_green { /*background: #fdfdfd;*/ /*border-color: #b8cbb2;*/ /*color: #58734c;*/ text-shadow: 0px 0px 0px #429120; text-decoration: none; box-shadow: none; background: #64aa45; color: #fff; border-color: #5b963b; } /* :hover, :focus ---- */ .ui_element .wpbc_ui_button_green.hover:not(.inactive), .ui_element .wpbc_ui_button_green:hover:not(.inactive), .ui_element .wpbc_ui_button_green.focus:not(.inactive), .ui_element .wpbc_ui_button_green:focus:not(.inactive) { background: #5b963b; color: #fff; text-shadow: none; box-shadow: 0 0 0 1.5px #fff,0 0 0 2.5px #5b963b; box-shadow: none; border-color:transparent; } .ui_element .wpbc_ui_button_green.hover:not(.inactive) *, .ui_element .wpbc_ui_button_green:hover:not(.inactive) *, .ui_element .wpbc_ui_button_green.focus:not(.inactive) *, .ui_element .wpbc_ui_button_green:focus:not(.inactive) * { color: #fff; } /* :focus ---- */ .ui_element .wpbc_ui_button_green.focus:not(.inactive), .ui_element .wpbc_ui_button_green:focus:not(.inactive) { box-shadow: 0 0 0 1.5px #fff,0 0 0 3px #5e993d; border-color:transparent; } /* :active ---- */ .ui_element .wpbc_ui_button_green.active:not(.inactive), .ui_element .wpbc_ui_button_green.active:hover:not(.inactive), .ui_element .wpbc_ui_button_green.active:focus:not(.inactive), .ui_element .wpbc_ui_button_green:active:not(.inactive) { background: #5b963b; box-shadow: inset 0 1px 7px -3px rgba(0, 0, 0, .1); color: #fff; box-shadow: 0 0 0 1.5px #fff,0 0 0 3px #5b963b; border-color:transparent; } /* :disabled ---- */ .ui_element .wpbc_ui_button_green[disabled], .ui_element .wpbc_ui_button_green:disabled, .ui_element .wpbc_ui_button_green-disabled, .ui_element .wpbc_ui_button_green.disabled, .ui_element .wpbc_ui_button_green[disabled]:hover, .ui_element .wpbc_ui_button_green:disabled:hover, .ui_element .wpbc_ui_button_green-disabled:hover, .ui_element .wpbc_ui_button_green.disabled:hover{ color: #a7aaad !important; background: #f6f7f7 !important; border-color: #dcdcde !important; box-shadow: none !important; text-shadow: none !important; cursor: default; } } /* 3.1 Text --------------------------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_text { border: 1px solid #d6d6d6; flex: 1 1 120px; } /* :focus ---- */ .ui_element .wpbc_ui_text.focus, .ui_element .wpbc_ui_text:focus { border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); border-color: #d8d8d8; /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */ box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8); z-index: 1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } /* 3.2 Select-box ------------------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_select { border: 1px solid #d6d6d6; flex: 1 1 auto; } /* :focus ---- */ .ui_element .wpbc_ui_select.focus, .ui_element .wpbc_ui_select:focus { border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); border-color: #d8d8d8; /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */ box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8); z-index: 1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } /* 3.3 Check-box & Radio ----------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_checkbox, .ui_element .wpbc_ui_radio { border: 1px solid #bcbcbc; border-radius: 4px; background: #fff; color: #50575e; clear: none; cursor: pointer; display: inline-block; line-height: 0 !important; height: 1rem !important; margin: -0.25rem 0.25rem 0 0; outline: 0; padding: 0 !important; text-align: center; vertical-align: middle; width: 1rem; min-width: 1rem; -webkit-appearance: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); transition: .05s border-color ease-in-out; margin: 0; align-self: center; } .ui_element .wpbc_ui_radio { border-radius: 50%; margin-right: 0.25rem; line-height: 0.71428571; } input[type="checkbox"].wpbc_ui_checkbox:checked::before, input[type="radio"].wpbc_ui_radio:checked::before { margin: 0.2rem 0.2rem auto; } /* :focus ---- */ .ui_element .wpbc_ui_checkbox.focus, .ui_element .wpbc_ui_checkbox:focus, .ui_element .wpbc_ui_radio.focus, .ui_element .wpbc_ui_radio:focus { border-color: var(--wpbc_admin-theme-color, #2271b1); box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1); border-color: #d8d8d8; /*box-shadow: 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(79, 148, 212, 0.8); This is Default: WordPress */ box-shadow: 0 0 0 0px #4f94d4, 0 0 1px 1px rgba(79, 148, 212, 0.8); z-index: 1; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent !important; } .ui_element .wpbc_ui_radio + .wpbc_ui_control_label, .ui_element .wpbc_ui_checkbox + .wpbc_ui_control_label { padding-left: 5px; padding-right: 5px; } /* If radio button inside of the "button" element (border bounded), then need to center vertical position */ .ui_element .wpbc_ui_control.wpbc_ui_button .wpbc_ui_radio + .wpbc_ui_control_label, .ui_element .wpbc_ui_control.wpbc_ui_button .wpbc_ui_checkbox + .wpbc_ui_control_label { margin:0; } @media screen and (max-width: 782px) { .ui_element .wpbc_ui_checkbox, .ui_element .wpbc_ui_radio { height: 1.5625rem !important; width: 1.5625rem; } } /* 3.3.5 Toggle elements, instead of checkboxes ------------------------------------------------------------------ */ .wpbc_ui__toggle { align-items: flex-start; display: flex; gap: 10px; } .wpbc_ui__toggle input[type=checkbox] { display: none; height: 0; width: 0; } .wpbc_ui__toggle input[type=checkbox]:checked + label.wpbc_ui__toggle_icon { background-color: var( --wpbc_admin-theme-color, #036aab ); } .wpbc_ui__toggle input[type=checkbox]:checked + label.wpbc_ui__toggle_icon:after { left: calc(100% - 13px - 2px); } .wpbc_ui__toggle span, .wpbc_ui__toggle label { align-items: flex-start; display: flex; gap: 10px; margin: 0; vertical-align: unset; } .wpbc_ui__toggle .wpbc_ui__toggle_label:hover { cursor: pointer; } .wpbc_ui__toggle .wpbc_ui__toggle_status { color: #86919e; font-size: 12px; line-height: 14px; margin: 2px 5px; } .wpbc_ui__toggle .wpbc_ui__toggle_icon { background-color: #bbbbbb; border-radius: 8.5px; cursor: pointer; display: inline-block; height: 17px; margin: 0 1px; position: relative; text-indent: -9999px; width: 27px; flex: 0 0 auto; } .wpbc_ui__toggle .wpbc_ui__toggle_icon:after { background: #ffffff; border-radius: 50%; content: ""; height: 13px; left: 2px; position: absolute; top: 2px; width: 13px; transition-property: all; transition-duration: 0.25s; transition-timing-function: ease-out; } .wpbc_ui__toggle .wpbc-help-tooltip { margin: 0 !important; } .wpbc_ui__toggle:hover input:checked + label.wpbc_ui__toggle_icon { background-color: var( --wpbc_admin-theme-color, #215d8f ); } .wpbc_ui__toggle:hover .wpbc_ui__toggle_icon { background-color: #777777; } /* Fix compatibility for toggle */ .wpbc_ui__toggle:hover input:disabled + label.wpbc_ui__toggle_icon, .wpbc_ui__toggle input[type=checkbox]:disabled + label.wpbc_ui__toggle_icon { background-color: #ddd; cursor: not-allowed; } .wpbc_ui__toggle input[type=checkbox]:checked:disabled + label.wpbc_ui__toggle_icon { background-color: #c9dbe6 } .ui_element .wpbc_ui__toggle { align-items: center; } .wpbc_ajx_toolbar .ui_container.ui_container_small .ui_group .ui_element .wpbc_ui__toggle > * { margin: 0; } /* Fix compatibility for toggle - Settings Tables */ .form-table td fieldset .wpbc_ui__toggle { margin: 5px 0; display: inline-flex; } .form-table td fieldset .wpbc_ui__toggle input[type=checkbox] + label.wpbc_ui__toggle_icon { margin: 3px 0 0.5em !important } .form-table td fieldset .wpbc_ui__toggle label *, .form-table td fieldset .wpbc_ui__toggle label { line-height: 1.6; margin: 0 1px !important; } .wpbc_ui__toggle input[type=checkbox].wpbc_visible_but_out_screen { display: block; visibility: hidden; position: absolute; } /* Red toggle */ .wpbc_toggle_danger.wpbc_ui__toggle input[type=checkbox]:checked + label.wpbc_ui__toggle_icon { background-color: #d63638; } .wpbc_toggle_danger.wpbc_ui__toggle:hover input:checked + label.wpbc_ui__toggle_icon { background-color: #d63638; } /* 3.3.6 Toggle Icon Radio / Icon Checkbox, instead of real checkboxes ------------------------------------------- */ .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox, .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox:hover, .wpbc_ui__toggle .wpbc_ui__toggle_icon_radio, .wpbc_ui__toggle .wpbc_ui__toggle_icon_radio:hover{ cursor: pointer; } .wpbc_ui__toggle .wpbc_ui__toggle_icon_radio::before, .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox::before { font-family: 'wpbc-material-icons'; display: inline-block; font-variant: normal; font-weight: normal; font-style: normal; font-size: 16px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: -.20125em; font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; /* My Fix */ font-size: 20px; vertical-align: -.25125em; } /* Checkbox Icon */ .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox::before { content: "\e835"; } .wpbc_ui__toggle input:checked ~ label.wpbc_ui__toggle_icon_checkbox::before { content: "\e834"; } /* Radio Icon */ .wpbc_ui__toggle .wpbc_ui__toggle_icon_radio::before { content: "\e836"; } .wpbc_ui__toggle input:checked ~ label.wpbc_ui__toggle_icon_radio::before { content: "\e837"; } /* 3.3.7 Toggle Icon Checkbox, instead of real checkboxes based on BS ------------------------------------------- */ .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox::before { font-family: wpbc-bootstrap-icons !important; font-size: 17px; } .wpbc_ui__toggle .wpbc_ui__toggle_icon_checkbox::before { content: "\f584"; } .wpbc_ui__toggle input:checked ~ label.wpbc_ui__toggle_icon_checkbox::before { content: "\f26d"; } /* 3.4. Addon ------------------------------------------------------------------------------------------------------ */ .ui_element .wpbc_ui_addon { flex: 0 1 auto; display: flex; flex-flow: row wrap; justify-content: stretch; align-items: center; } /* 3.5 Labels ------------------------------------------------------------------------------------------------------ */ .ui_element label.wpbc_ui_control_label { flex: 0 1 auto; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding: 0 5px 2px 0; padding-bottom: 1px; } .ui_element label.wpbc_ui_control_label + .wpbc_ui_control:first-of-type { border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; } /* 3.6. Separator ------------------------------------------------------------------------------------------------------ */ .ui_element .wpbc_ui_separtor { flex: 0 1 auto; display: flex; flex-flow: row wrap; justify-content: stretch; align-items: center; border-right: 1px solid #ccc; } /* 3.7. Horizontal Text Bar ------------------------------------------------------------------------------------------------------ */ .ui_element .wpbc_option_separator, .ui_element .wpbc_option_step { padding-right: 10px; padding-left: 10px; font-weight: 600; border-bottom: 4px solid transparent; padding-bottom: 9px; margin-bottom: -9px; } .ui_element .wpbc_passed_step { border-bottom: 4px solid #d0d3c0; /*border-bottom: 4px solid #c8c0b7;*/ } .ui_element .wpbc_selected_step { border-bottom: 4px solid #aac71e; /*border-bottom: 4px solid #c7751e;*/ } /**********************************************************************************************************************/ /* 4. Dropdown List */ /**********************************************************************************************************************/ .ui_element .wpbc_ui_dropdown__outside_label{ flex: 0 1 auto; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 0 10px 2px 0; padding-bottom: 1px; } .ui_element .wpbc_ui_dropdown { flex: 0 1 auto; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; position: relative; } .ui_element .wpbc_ui_dropdown * { box-sizing: border-box; } .ui_element .wpbc_ui_dropdown .wpbc_ui_dropdown__inside_label{ font-weight: 600; margin:0; padding:0 0.5em 0 0; } .ui_element .wpbc_ui_dropdown .wpbc_ui_dropdown__inside_caret { display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent; } /* ---------------------------------------------------------------------------------------------------------- */ /* BORDER RADIUS */ /* ---------------------------------------------------------------------------------------------------------- */ .ui_element .wpbc_ui_dropdown:last-child > .wpbc_ui_button:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* In case, if have several elements in .ui_element (like "button dropdown button"), - make borders not round */ /* Left border not round */ .ui_element .wpbc_ui_dropdown:not(:first-child) > .wpbc_ui_button:first-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Right border not round */ .ui_element .wpbc_ui_dropdown:not(:last-child) > .wpbc_ui_button:last-child{ border-top-right-radius: 0; border-bottom-right-radius: 0; } /* If we have outside label, then we need to make left border round */ .ui_element .wpbc_ui_dropdown__outside_label + .wpbc_ui_dropdown > .wpbc_ui_button:first-child{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; } /* ---------------------------------------------------------------------------------------------------------- */ /* OPTIONS (Drop Down Menu) in Dropdown List */ /* ---------------------------------------------------------------------------------------------------------- */ /* Complex OPTION - this option include some INPUT elements --------------- */ .wpbc_ui_dropdown .ui_dropdown_menu li.ui_complex_option_element{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin:0; padding: 0 15px; } .wpbc_ui_dropdown ul.ui_dropdown_menu li.ui_complex_option_element .ui_element { flex: 0 1 50%; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin:0; padding: 4px 0; } .wpbc_ui_dropdown ul.ui_dropdown_menu li.ui_complex_option_element .ui_element > * { flex: 0 1 auto; margin:0; height:auto; max-width: 210px; } /* ---------------------------- General backdrop --------------------------- */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 190px; padding: 5px 0; margin: 0; list-style: none; text-align: left; background-color: #ffffff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0 0 3px 3px; background-clip: padding-box; } /* ---------------------------- Animation Menu Start --------------------------------------- */ .ui_element .wpbc_ui_dropdown.open .ui_dropdown_menu{ animation: ui_dropdown_menu__anim__grow_down 200ms ease-in-out forwards; transform-origin: top center; } @keyframes ui_dropdown_menu__anim__grow_down { 0% { transform: scaleY(0) } 50% { transform: scaleY(0.8) } 100% { transform: scaleY(1) } } @keyframes ui_dropdown_menu__anim__pop_up_animation { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes ui_dropdown_menu__anim__fade_in{ 0% { opacity:0; } 33% { opacity:0.1; } 66% { opacity:0.2; } 100% { opacity:1; } } /* ---------------------------- Animation End --------------------------------------- */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu-left { } .ui_element .wpbc_ui_dropdown .ui_dropdown_menu-right { left: auto; right:0; } .ui_element .wpbc_ui_dropdown ul.ui_dropdown_menu *{ font-size: 13px; } @media screen and (max-width: 782px) { .ui_element .wpbc_ui_dropdown ul.ui_dropdown_menu *{ font-size: 14px; line-height: 2em; } } /* ---------------------------- Open --------------------------------------- */ .ui_element .wpbc_ui_dropdown.open > .ui_dropdown_menu { display: block; } /* ---------------------------- Align: left | right ------------------------ */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.pull-right, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.ui_dropdown_menu_right { left: auto; right: 0; } .ui_element .wpbc_ui_dropdown .ui_dropdown_menu.ui_dropdown_menu_left { left: 0; right: auto; } /* ---------------------------- Divider ------------------------------------ */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu hr{ height: 1px; margin: 5px 0; overflow: hidden; background: none; border: 0; border-top: 1px solid #eeeeee; } /* ---------------------------- Header ------------------------------------- */ .wpbc_ui_dropdown .ui_dropdown_menu li.dropdown-header { padding:0 15px; color: #999; font-size: 0.8em; font-style: italic; font-weight: 600; } /* ---------------------------- LI ----------------------------------------- */ .wpbc_ui_dropdown .ui_dropdown_menu li { padding:0; margin:0; } /* ---------------------------- A ------------------------------------------ */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu a { clear: both; display: block; font-weight: 400; padding: 5px 15px; white-space: nowrap; /*font-size: 13px;*/ line-height: 18px; } .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a { color: #333333; text-decoration: none; font-weight: 400; padding:5px 15px; white-space: nowrap; display: block; clear: both; font-size: 1em; line-height: 1.42857143; margin: 1px 5px; padding: 8px 15px; border-radius: 2px; } /* ---------------------------- A :hover :focus .active -------------------- */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a:hover, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > li > a:focus, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a:hover, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .active > a:focus { color: #fff; background: #08c; background: var(--wpbc_ui_dropdown__active-a-background); text-decoration: none; outline: none; box-shadow: none; } /* ---------------------------- .disabled A ------------------------------ */ .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:hover, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:focus { color: #ccc; } .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:hover, .ui_element .wpbc_ui_dropdown .ui_dropdown_menu > .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .ui_element .wpbc_ui_dropdown .dropdown-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 990; } /**********************************************************************************************************************/ /* 5. Several elements in a ".ui_element" group -------------------------------------------------------------------- */ .ui_element .wpbc_ui_control { border-radius: 0; border-width:1px; /*border-right-width:0;*/ border-right-width:1px; margin-right:-1px!important; } .ui_element .wpbc_ui_control:first-child{ border-radius: 3px 0 0 3px; } .ui_element .wpbc_ui_control:last-child { border-radius: 0 3px 3px 0; border-width:1px; } .ui_element .wpbc_ui_control:first-child:last-child { border-radius: 3px; } /**********************************************************************************************************************/ /** Toolbar */ /**********************************************************************************************************************/ .ui_nowrap { flex-wrap:nowrap !important; } /* Toolbar --------------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar { position:relative; margin: 0 0 10px 50px; } .wpbc_ajx_toolbar * { box-sizing: border-box; } /* Row of simple buttons somewhere in a page */ .wpbc_ajx_toolbar.wpbc_buttons_row { position: initial; margin:0; float:left; } .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container { background: none; border: none; margin: 0; padding: 0; } .wpbc_ajx_toolbar.wpbc_no_background .ui_container{ background: none; border: none; margin: 0; padding: 0; } .wpbc_ajx_toolbar.wpbc_background_transparent .ui_container{ background: none; border: none; } /* Container ------------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar .ui_container{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; gap:20px; margin: 0; box-shadow: none; border: 1px solid #dadada; border-top: none; background: #f7f7f7; font-size:14px; padding: 6px 15px; } .wpbc_ajx_toolbar .ui_container:last-child{ border-radius: 0 0 2px 2px; } /* Toolbar without background and borders, for ability to insert elements somewhere in a page ---------------------------- * // FixIn: 9.6.1.5. ?>
* { margin: 5px 0; } .ui_elements_divider { margin-left: 15px; } /**********************************************************************************************************************/ /** Customization */ /**********************************************************************************************************************/ .wpbc_ajx_toolbar .ui_container.ui_container_small *, .wpbc_ajx_toolbar .ui_container.ui_container_mini *, .wpbc_ajx_toolbar .ui_container.ui_container_micro *{ font-size:13px; } .wpbc_ajx_toolbar .ui_container.ui_container_mini { padding: 3px 15px; } @media (max-width: 782px) { .wpbc_ajx_toolbar .ui_container.ui_container_small *, .wpbc_ajx_toolbar .ui_container.ui_container_mini *, .wpbc_ajx_toolbar .ui_container.ui_container_micro *{ font-size:14px; } } /* Elements Height ------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar .ui_container .ui_group .ui_element > * { height: 38px; } .wpbc_ajx_toolbar .ui_container.ui_container_small .ui_group .ui_element > *, .wpbc_ajx_toolbar .ui_container.ui_container_mini .ui_group .ui_element > * { height: 30px; } .wpbc_ajx_toolbar .ui_container.ui_container_micro .ui_group .ui_element > *, .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro > *{ height: 22px; line-height:1; } /* Micro Elements ------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro { margin-right: 5px; align-items: center; } .wpbc_ajx_toolbar .ui_container .ui_group .ui_element.ui_element_micro:last-child{ margin-right: 0; } @media (max-width: 782px) { .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container .ui_group .ui_element > *, #toolbar_booking_listing.wpbc_ajx_toolbar .ui_container .ui_group .ui_element > * { height: 38px; } .wpbc_ajx_toolbar.wpbc_buttons_row .ui_container .ui_group .ui_element > .wpbc_ui_button, #toolbar_booking_listing.wpbc_ajx_toolbar .ui_container .ui_group .ui_element > .wpbc_ui_button { padding: 0 15px 2px; padding-bottom: 1px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } } /* Keyword -------------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__dates_status { margin-right:2.5em; } .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword { flex: 1 1 auto; } .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword .ui_element{ flex: 1 1 auto; } .wpbc_ajx_toolbar .ui_container .ui_group.ui_group__keyword .ui_element .wpbc_search_field { width: 100%; } /* 2nd row -------------------------------------------------------------------------------------------------------- */ .wpbc_ajx_toolbar .ui_container.ui_container_filter_row_2 { padding: 4px 15px; } .wpbc_ajx_toolbar .ui_container.ui_container_filter_row_2 .ui_group.ui_group__statuses { flex: 1 1 auto; } /**********************************************************************************************************************/ /** Booking resources - Chosen /**********************************************************************************************************************/ /** * Choozen Structure