| Current File : /home/kelaby89/www/wp/wp-content/plugins/trx_addons/components/api/gutenberg/gutenberg.scss |
@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
/* Gutenberg */
/* Fixes for the block editor
---------------------------------------- */
body.edit-post-visual-editor,
.editor-styles-wrapper {
position: relative;
flex: 1 0 auto;
height: auto !important;
overflow-x: hidden !important;
overflow-y: visible !important;
.block-editor-block-list__layout.is-root-container {
& > .wp-block.alignfull,
& > .wp-block[data-align="full"] {
margin-left: 0;
margin-right: 0;
}
}
.block-editor-block-list__block select {
visibility: visible !important;
}
}
/* Dashicons */
body.edit-post-visual-editor .components-button,
.editor-styles-wrapper .components-button {
.dashicons, .dashicons-before::before {
font-family: dashicons;
line-height: 1;
font-weight: 400;
font-style: normal;
text-transform: none;
text-rendering: auto;
font-size: 20px;
text-align: center;
}
}
/* Widgets block editor */
// WordPress 6.5-
body.editor-styles-wrapper[data-widget-area-id],
// WordPress 6.5+
body.editor-styles-wrapper[data-widget-area-id] {
font-size: 14px;
}
/* Post title
---------------------------------------- */
.editor-post-title__block .editor-post-title__input {
min-height: 1em;
height: unset;
background-color: transparent !important;
}
.editor-post-title .editor-post-title__input::placeholder {
color: rgba(128, 128, 128, 0.5) !important;
}
/* Core blocks
------------------------------------------------- */
/* Spacer */
.block-editor-block-list__block[data-type="core/spacer"] {
& > .components-resizable-box__container {
background-color: rgba(255,255,0,0.1);
}
}
.wp-block-spacer.sc_height_tiny,
[data-type="core/spacer"].sc_height_tiny > .components-resizable-box__container {
height: var(--sc-space-tiny) !important;
}
.wp-block-spacer.sc_height_small,
[data-type="core/spacer"].sc_height_small > .components-resizable-box__container {
height: var(--sc-space-small) !important;
}
.wp-block-spacer.sc_height_medium,
[data-type="core/spacer"].sc_height_medium > .components-resizable-box__container {
height: var(--sc-space-medium) !important;
}
.wp-block-spacer.sc_height_large,
.wp-block-spacer.sc_height_big,
[data-type="core/spacer"].sc_height_large > .components-resizable-box__container,
[data-type="core/spacer"].sc_height_large > .editor-block-list__block-edit .components-resizable-box__container {
height: var(--sc-space-large) !important;
}
.wp-block-spacer.sc_height_huge,
[data-type="core/spacer"].sc_height_huge > .components-resizable-box__container {
height: var(--sc-space-huge) !important;
}
/* Separator */
.wp-block-separator.sc_height_tiny,
[data-type="core/separator"].sc_height_tiny > .wp-block-separator {
margin-top: var(--sc-space-tiny) !important;
margin-bottom: var(--sc-space-tiny) !important;
}
.wp-block-separator.sc_height_small,
[data-type="core/separator"].sc_height_small > .wp-block-separator {
margin-top: var(--sc-space-small) !important;
margin-bottom: var(--sc-space-small) !important;
}
.wp-block-separator.sc_height_medium,
[data-type="core/separator"].sc_height_medium > .wp-block-separator {
margin-top: var(--sc-space-medium) !important;
margin-bottom: var(--sc-space-medium) !important;
}
.wp-block-separator.sc_height_large,
.wp-block-separator.sc_height_big,
[data-type="core/separator"].sc_height_large > .editor-block-list__block-edit .wp-block-separator,
[data-type="core/separator"].sc_height_large > .wp-block-separator {
margin-top: var(--sc-space-large) !important;
margin-bottom: var(--sc-space-large) !important;
}
.wp-block-separator.sc_height_huge,
[data-type="core/separator"].sc_height_huge > .wp-block-separator {
margin-top: var(--sc-space-huge) !important;
margin-bottom: var(--sc-space-huge) !important;
}
/* Gallery */
/*.wp-block-gallery.has-nested-images,*/
figure.wp-block-gallery {
@include flex;
@include flex-direction(row);
@include flex-wrap(wrap);
@include flex-justify-content(flex-start);
@include flex-align-items(stretch);
}
/* Columns */
// Use twice to override an inline style
.wp-block-columns.wp-block-columns {
gap: 0;
}
/* Our blocks
------------------------------------------------- */
/* Anchor */
[data-type="trx-addons/anchor"] .is-block-container,
[data-type="trx-addons/anchor"] .editor-block-list__block-edit {
height: 25px;
position: relative;
background-color: #e7eaed;
}
[data-type="trx-addons/anchor"] .is-block-container:after,
[data-type="trx-addons/anchor"] .editor-block-list__block-edit:after {
content: '\e868';
font-family: trx_addons_icons;
color: #9aa1a9;
position: absolute;
left: 50%;
@include translateX(-50%);
}
/* Blogger */
[data-type="trx-addons/blogger"] a {
pointer-events: none;
}
/* Slider in shortcodes */
[data-type^="trx-addons/"] .slider_container {
display: block;
}
/* Layouts in slides */
[data-type^="trx-addons/"] .slider_source_posts_cpt_layouts .slider-slide {
&:before {
content: 'Slides based on custom layouts may not display correctly in the editor! Check out the slides on Frontend.';
@include abs-cover(1000);
@include flex;
@include flex-justify-content(center);
@include flex-align-items(center);
color: #fff;
background-color: rgba(0,0,0,0.6);
padding: 10%;
font-size: 2em;
line-height: 1.5em;
}
}
/* Layouts */
[data-type="trx-addons/layouts-login"] .sc_layouts_menu,
[data-type="trx-addons/layouts-menu"] .sc_layouts_menu {
visibility: visible;
max-height: 4em;
}
/* Our blocks reloader
------------------------------------------------ */
.trx_addons_gb_reload {
.block-editor-block-list__block & {
position: absolute;
right: 0;
top: 0;
z-index: 100;
height: 32px;
line-height: 30px;
@include border-box;
padding: 0 8px;
color: #333;
background-color: #f7f7f7;
display: none;
&:before {
content: '\e800';
font-family: trx_addons_icons;
}
&:focus,
&:hover {
color: #fff !important;
background-color: #007cba !important;
}
}
.block-editor-block-list__block.is-hovered &,
.block-editor-block-list__block.is-selected &,
.block-editor-block-list__block.is-selected-parent & {
display: block;
}
}
/* Inner blocks
------------------------------------------------- */
.trx_addons_gb_inner_blocks.components-panel__body {
padding: 0;
border-width: 0;
& > .components-panel__body-title {
margin: 0 0 1em !important;
.components-panel__body-toggle {
padding: 1em;
}
}
}
/* Inner blocks without container behaviour (slider, actions, etc.)
-------------------------------------------------------------------------- */
/* Hide to the button, display on hover, select or typing */
.block-editor-block-list__block:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks {
display: none;
}
.block-editor-block-list__block:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks.is-opened,
.block-editor-block-list__block.is-hovered:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks,
.block-editor-block-list__block.is-typing:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks,
.block-editor-block-list__block.is-selected:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks,
.block-editor-block-list__block.is-selected-parent:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks {
display: block;
}
/* Put to the top right corner (near the "Reload" button) */
.block-editor-block-list__block:not([data-type="trx-addons/content"]):not([data-type="trx-addons/layouts-container"]):not([data-type="trx-addons/layouts-featured"]):not([data-type="trx-addons/layouts-title"]) .trx_addons_gb_inner_blocks {
$trx_addons_gb_inner_blocks_padding: 8px;
position: absolute;
right: 40px;
top: 0;
z-index: 30; // Not greater then 30 because 31 has GB toolbar
min-width: 33%;
border: none !important;
&.is-opened {
padding: 0;
}
.components-panel__body-title {
margin: 0 0 0.5em !important;
background: none !important;
text-align: right;
}
.components-panel__body-toggle {
width: auto;
height: 32px;
line-height: 30px;
@include border-box;
white-space:nowrap;
padding: 0 8px !important;
border: 1px solid #ccc;
@include border-radius(3px);
box-shadow: 0 1px 0 #cccccc;
color: #333;
background-color: #f7f7f7;
overflow: hidden;
.components-panel__arrow {
display: none;
}
}
.block-editor-block-list__layout {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
& > .block-editor-block-list__block {
margin: 0;
padding: $trx_addons_gb_inner_blocks_padding;
}
.block-list-appender {
margin: 0;
.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
height: 1em;
min-height: 0;
margin: 0;
padding: $trx_addons_gb_inner_blocks_padding;
padding-right: 48px;
}
}
}
}
/* Inner blocks with container behaviour (content, layouts-container, layouts-title, layouts-featured)
-------------------------------------------------------------------------- */
/* Hide placeholders on the empty containers */
.block-editor-block-list__block[data-type="trx-addons/content"] > .components-placeholder,
.block-editor-block-list__block[data-type="trx-addons/layouts-container"] > .components-placeholder,
.block-editor-block-list__block[data-type="trx-addons/layouts-featured"] > .components-placeholder {
display: none;
}
/* Editor area for custom layouts
-------------------------------------------------------- */
body.post-type-cpt_layouts .wp-block {
max-width: 96% !important;
}
/* Kadence blocks
---------------------------------------- */
.block-editor-block-list__block {
.kt-tabs-title-list {
margin-bottom: 0;
padding-left: 0;
}
.kt-tabs-layout-vtabs > .kt-tabs-wrap > .kt-tabs-title-list li {
margin-bottom: 1px;
}
.kt-tabs-content-wrap {
border: 1px solid #ddd;
}
}