/* dialog item */ .bt_bb_dialog_item { position: relative; box-sizing: border-box; overflow: hidden; flex: 0 0 100%; padding: 1em; font-size: 1.1em; #bt_bb_fe_dialog_content_wrapper & { font-size: 1em; i { /* display: none; */ } } .bt_bb_sortable_item i { opacity: 1; } &.bt_bb_dialog_add_element { cursor: pointer; padding: 1.15em 1.15em 1.5em 1.15em; flex: 0 0 33.33%; > i { text-align: left; font-size: 0.875em; opacity: 0.75; .rtl & { text-align: right; } } } &.bt_bb_icon.bt_bb_dialog_add_element { padding: 1.15em 1.15em 1.5em 5.15em; .rtl & { padding: 1.15em 5.15em 1.15em 1.15em; text-align: right; } } &:nth-child(3n+1) { clear: left; } &:last-child { border-bottom: 0px; } &.bt_bb_dialog_add_element:after { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); transition: all 360ms ease; border: 1px solid $(innerBorderColor); } &.bt_bb_dialog_add_element:hover { background-color: transparent; } &.bt_bb_dialog_add_element:hover:after { box-shadow: 0 0 0.4em 0 rgba(0,0,0,0.35); } :any( input[type="text"], input[type="datetime-local"], textarea, select ) { width: 100%; max-width: 100%; height: 2.88em; display: block; margin: 0; margin-top: 0.5em; padding: 0 1.1em; font-size: inherit; line-height: 1.15; box-sizing: border-box; } select { line-height: 1.3; appearance: none; background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%; background-size: 16px 16px; .rtl & { background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat left 5px top 55%; } } &[data-param_name="publish_datetime"], &[data-param_name="expiry_datetime"] { flex: 0 0 50%; input[type="datetime-local"] { width: 100%; height: 2.88em; padding: 0 1.1em; font-size: inherit; line-height: 1.15; } i { text-align: left; .rtl & { text-align: right; } } } textarea { resize: vertical; vertical-align: top; height: auto; min-height: 4em; padding: 1.1em; } b, i { display: block; opacity: 0.6; } i { text-align: right; } &.bt_bb_dialog_add_element:hover { &:last-child { border-bottom: 0px; } } &:before { font: normal 1.3em/2.3em bold-builder; display: block; position: absolute; left: 1em; top: auto; bottom: auto; width: 2.3em; height: 2.3em; border-radius: 50%; background-color: $(accentColor); color: #fff; vertical-align: middle; margin: 0.2em 0 0; text-align: center; /*content: ' ';*/ .rtl & { left: auto; right: 1em; } } /* transition: all 300ms ease; */ transition: opacity 300ms ease; &:hover { /*cursor: pointer;*/ } #bt_bb_fe_dialog_content_wrapper & { padding-bottom: 0; overflow: visible; } } /* iconpicker */ .bt_bb_iconpicker { margin-top: 5px; .bt_bb_iconpicker_select { height: 36px; border-radius: 4px; border: 1px solid #8c8f94; background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%; .rtl & { background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat left 5px top 55%; } background-size: 16px 16px; color: #2c3338; margin-top: 5px; cursor: pointer; position: relative; display: flex; i { line-height: 36px; flex-basis: 36px; color: #ddd; text-align: center !important; opacity: 1; &.fa-angle-down { opacity: 0; } } .bt_bb_iconpicker_clear { flex-basis: 24px; z-index: 2; color: #395f9f; display: none; &:hover {background-color: rgba(0,0,0,.05);} font-style: normal; /* block editor */ } .bt_bb_icon_preview { display: inline-block; flex-basis: 36px; width: auto; height: 36px; font-size: 20px; position: relative; vertical-align: top; } .bt_bb_iconpicker_select_text { display: inline-block; line-height: 36px; flex-basis: 100%; white-space: nowrap; overflow: hidden; } } .bt_bb_iconpicker_filter_container { margin-top: 5px; display: none; } .bt_bb_iconpicker_icons { border: 1px solid #8c8f94; background-color: #fff; height: 350px; overflow-x: hidden; overflow-y: auto; display: none; box-shadow: 0 3px 7px rgba(0,0,0,.3); overscroll-behavior: contain; .bt_bb_iconpicker_title { flex-basis: 100%; padding: .85em 1.6em; font-size: 1em; line-height: 1.2; text-transform: uppercase; text-align: center; background: $(accentBright); color: $(contrastFontColor); } .bt_bb_icon_preview { padding: 0.3em; box-sizing: border-box; flex-basis: 50px; #bt_bb_fe_dialog_content_wrapper & { width: 20%; } &:hover { box-shadow: 0 2px 5px rgba(0,0,0,.1); transform: scale(1.8); background: #FFF; color: #000; z-index: 1; } } } .bt_bb_icon_preview { display: inline-block; width: 8.33%; height: 2em; font-size: 2em; position: relative; vertical-align: top; cursor: pointer; border-radius: 2px; border: 1px solid transparent; &.bt_bb_icon_preview_fa { font-family: FontAwesome !important; } &.bt_bb_icon_preview_fa5_regular { font-family: FontAwesome5Regular !important; } &.bt_bb_icon_preview_fa5_solid { font-family: FontAwesome5Solid !important; } &.bt_bb_icon_preview_fa5_brands { font-family: FontAwesome5Brands !important; } &.bt_bb_icon_preview_s7 { font-family: Icon7Stroke !important; } &:before { content: attr(data-icon-code); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); line-height: 0px; font-size: 0.9em; font-family: inherit; } } } ul.menu { .bt_bb_iconpicker_widget_container { margin-top: 0px; } .bt_bb_iconpicker { margin-top: 0px; .bt_bb_iconpicker_select { margin-top: 0px; } } } /* URL search */ .bt_bb_search_link { width: 100%; max-width: 100%; height: 2.88em; display: block; margin: 0; margin-top: .5em; padding: 0 3em 0 1.1em; font-size: inherit; line-height: 1.15; border-radius: 4px; & + .spinner { position: absolute; right: 1em; margin-top: -2.2em; .rtl & { right: auto; left: 1px; } } } .bt_bb_search_link::placeholder { opacity: .6; } .bt_bb_search_link_results { max-height: 10.55em; overflow-x: hidden; overflow-y: auto; border: 1px solid #8c8f94; background-color: #fff; display: none; box-shadow: 0 3px 7px rgba(0,0,0,.3); > div { display: flex; justify-content: space-between; transition: 200ms ease all; padding: .75em 1.1em; line-height: 1.15; cursor: pointer; align-items: flex-start; > span { display: block; font-style: italic; opacity: .7; margin-left: auto; flex-shrink: 0; .rtl & { margin-right: auto; margin-left: 0; } } &:hover { background: #38a1f4; color: #FFF; } } &:empty { &:before { content:attr(data-empty-text); padding: .75em 1.1em; line-height: 1.15; opacity: .5; display: block; } } } /* colorpicker */ .bt_bb_colorpicker { .wp-picker-container { margin-top: 5px; a {margin-bottom: 0px;} } } /* preview */ .bt_bb_preview { font-weight: normal; } .bt_bb_preview_image { display: inline-block; width: 18px; height: 18px; background-size: cover; vertical-align: top; transition: all 0.1s; &:hover { transform: scale(2); } } #bt_bb_dialog { .wp-picker-open + .wp-picker-input-wrap { display: inline-block; margin: 0; input.bt_bb_color_picker.wp-color-picker { width: 15em !important; display: inline-block; height: auto; padding: 0.3em 1.1em; margin: 0 0 -10px; &[style*="block"] {display: inline-block !important;} } } } /* Radio group */ #bt_bb_dialog { .bt_bb_dialog_content { overscroll-behavior: contain; .bt_bb_dialog_item[data-type="radio"] { display: flex; flex-wrap: wrap; i { padding-top: 0.5em; flex-basis: 100%; } b { padding-bottom: 0.5em; flex-basis: 100%; } label { flex-basis: 33%; padding-bottom: 0.25em; input { } } } } } /* checkbox group */ #bt_bb_dialog { .bt_bb_dialog_content { .bt_bb_dialog_item[data-type="checkbox_group"] { label { margin-right: 1em; &:last-of-type { margin-right: 0; } } } } } /* Checkbox for responsive element */ .bt_bb_dialog_item[data-param_name="responsive"] { label { display: inline-block; position: relative; margin-right: 2em !important; input[type=radio], input[type=checkbox] { position: absolute; right: 0; bottom: 1.75em; margin: 0; .rtl & { right: auto; left: 0; } } input[type=radio]:checked + span:before, input[type=checkbox]:checked + span:before { opacity: 0.3; } span { display: inline-block; width: 100%; text-align: center; &:before { font-family: bold-builder; font-size: 3em; display: block; opacity: 1; transition: opacity 200ms ease; } } &:nth-of-type(1) { span:before { content: "\e95b"; } } &:nth-of-type(2) { span:before { content: "\e95c"; } } &:nth-of-type(3) { span:before { content: "\e95d"; } } &:nth-of-type(4) { span:before { content: "\e95e"; } } &:nth-of-type(5) { span:before { content: "\e95f"; } } &:nth-of-type(6) { span:before { content: "\e95f"; transform: scaleX(1.2); } input { right: -0.5em; } } } } .widget-content .bt_bb_iconpicker_widget_container { margin-top: 1em; } .bt_bb_iconpicker_widget_container .bt_bb_filter { width: 100%; } .bt_bb_iconpicker_widget_container { .bt_bb_iconpicker .bt_bb_iconpicker_icons .bt_bb_icon_preview { width: 20%; &:hover { transform: scale(1.5); } } } .bt_bb_sortable_item { cursor: move; } /* Special widths */ .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_offset"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_zoom_start"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_zoom_end"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_blur_start"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_blur_end"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_opacity_start"], .bt_bb_dialog.bt_bb_section .bt_bb_dialog_item[data-param_name="parallax_opacity_end"] { flex-basis: 50%; } /* Checkbox for Row layout */ #bt_bb_dialog .bt_bb_dialog_content [data-param_name="row_width"][data-type="radio"] { flex-wrap: wrap; label { flex-basis: calc(25% - 2em); padding-bottom: 1em !important; padding-right: 2em; position: relative; &:before { content: ''; font-family: row-layout; font-size: 1rem; display: block; opacity: 1; transition: opacity 200ms ease; background-size: cover; background-repeat: no-repeat; background-position: no-repeat; background-position: bottom center; width: 100%; margin-bottom: 7px; filter: grayscale(1); opacity: 0.6; } &:hover { &:before { filter: none; opacity: 1; } } &:has(input[type=radio]:checked), &:has(input:active) { &:before { filter: none; opacity: 1; } } span { font-size: 1em; line-height: 1.2; display: block; float: left; max-width: calc(100% - 2em); &:before { font-weight: bold; display: block; } } input[type=radio] { float: left; margin-top: 0px; } /* Default */ &[for="bt_bb_row_row_width0"] { flex-basis: 100%; padding-bottom: 5em !important; &:before { width: 0; height: 0; } } /* Boxed 1200 */ &[for="bt_bb_row_row_width1"] { &:before { background-image: url(../fonts/row_layout/boxed-1200.png); padding-bottom: 33%; } &:after { content: ' Row width 1200px'; display: block; font-size: 1.5em; position: absolute; top: -2em; right: -10em; left: 0; opacity: 0.5; font-weight: 600; } } /* Boxed left 1200 */ &[for="bt_bb_row_row_width2"] { &:before { background-image: url(../fonts/row_layout/left-wide-1200.png); padding-bottom: 33%; } } /* Boxed left 1200 wide */ &[for="bt_bb_row_row_width3"] { &:before { background-image: url(../fonts/row_layout/left-wide-content-wide-1200.png); padding-bottom: 33%; } } /* Boxed right 1200 */ &[for="bt_bb_row_row_width4"] { &:before { background-image: url(../fonts/row_layout/right-wide-1200.png); padding-bottom: 33%; } } /* Boxed right 1200 wide */ &[for="bt_bb_row_row_width5"] { &:before { background-image: url(../fonts/row_layout/right-wide-content-wide-1200.png); padding-bottom: 33%; } } /* Boxed left and right 1200 */ &[for="bt_bb_row_row_width6"] { &:before { background-image: url(../fonts/row_layout/right-left-wide-1200.png); padding-bottom: 33%; } } /* Boxed left and right 1200, wide content */ &[for="bt_bb_row_row_width7"] { /* flex-basis: 30%; */ margin-right: 2em; padding-bottom: 6em !important; &:before { background-image: url(../fonts/row_layout/right-left-wide-content-wide-1200.png); padding-bottom: 33%; } } /* Boxed 1400 */ &[for="bt_bb_row_row_width8"] { &:before { background-image: url(../fonts/row_layout/boxed-1400.png); padding-bottom: 33%; } &:after { content: 'Row width 1400px'; display: block; font-size: 1.5em; position: absolute; top: -2em; right: -10em; left: 0; opacity: 0.5; font-weight: 600; } } /* Boxed left 1400 */ &[for="bt_bb_row_row_width9"] { &:before { background-image: url(../fonts/row_layout/left-wide-1400.png); padding-bottom: 33%; } } /* Boxed left 1400 wide */ &[for="bt_bb_row_row_width10"] { &:before { background-image: url(../fonts/row_layout/left-wide-content-wide-1400.png); padding-bottom: 33%; } } /* Boxed right 1400 */ &[for="bt_bb_row_row_width11"] { &:before { background-image: url(../fonts/row_layout/right-wide-1400.png); padding-bottom: 33%; } } /* Boxed right 1400 wide */ &[for="bt_bb_row_row_width12"] { &:before { background-image: url(../fonts/row_layout/right-wide-content-wide-1200.png); padding-bottom: 33%; } } /* Boxed left and right 1400px */ &[for="bt_bb_row_row_width13"] { &:before { background-image: url(../fonts/row_layout/right-left-wide-1400.png); padding-bottom: 33%; } } /* Boxed left and right 1400px, wide content */ &[for="bt_bb_row_row_width14"] { /* flex-basis: 30%; */ margin-right: 2em; &:before { background-image: url(../fonts/row_layout/right-left-wide-content-wide-1400.png); padding-bottom: 33%; } } } } /* Scrollbar styling */ #bt_bb_dialog .bt_bb_dialog_content::-webkit-scrollbar { background-color: rgba(0,0,0,.05); width: 12px; } #bt_bb_dialog .bt_bb_dialog_content::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); transition: background-color 200ms ease; cursor: pointer; &:hover { background-color: rgba(0,0,0,0.4); } } #bt_bb_dialog .bt_bb_dialog_content::-webkit-scrollbar-button { display: none; }