139 lines
3.3 KiB
CSS
139 lines
3.3 KiB
CSS
/**
|
|
* All of the CSS for your block editor functionality should be
|
|
* included in this file.
|
|
*/
|
|
/*--------------------------------------------------------------*/
|
|
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"],
|
|
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] > .cnvs-block-column {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.cnvs-block-row-inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="canvas/column"] {
|
|
-ms-flex-preferred-size: 50%;
|
|
flex-basis: 50%;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
min-width: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.cnvs-block-column-inner > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:first-child) {
|
|
display: none;
|
|
}
|
|
|
|
.cnvs-block-column {
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.cnvs-block-column-inner {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 100%;
|
|
-ms-flex: 100%;
|
|
flex: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.cnvs-block-column-inner > div {
|
|
-webkit-box-flex: 100%;
|
|
-ms-flex: 100%;
|
|
flex: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.cnvs-block-column-resizer {
|
|
position: absolute;
|
|
right: -2.5px;
|
|
top: -5px;
|
|
bottom: -5px;
|
|
width: 3px;
|
|
border-radius: 3px;
|
|
background-color: #017cba;
|
|
cursor: col-resize;
|
|
opacity: 0;
|
|
z-index: 10;
|
|
-webkit-transition: .3s opacity;
|
|
transition: .3s opacity;
|
|
}
|
|
|
|
.cnvs-block-column-resizer:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: 0;
|
|
}
|
|
|
|
[data-type="canvas/column"]:hover > .canvas-component-custom-blocks > .cnvs-block-column-resizer {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cnvs-block-column-resizer > span {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-top: -7px;
|
|
margin-left: -7px;
|
|
border-radius: 10px;
|
|
border: 2px solid #fff;
|
|
background-color: #017cba;
|
|
}
|
|
|
|
.cnvs-block-row-inner .block-editor-block-list__layout .block-editor-block-list__block {
|
|
max-width: none;
|
|
}
|
|
|
|
.components-popover.block-editor-block-list__block-popover
|
|
.components-popover__content
|
|
.block-editor-block-contextual-toolbar[data-type="canvas/column"] {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/**
|
|
* Columns act as as a "passthrough container"
|
|
* and therefore has its vertical margins/padding removed via negative margins
|
|
* therefore we need to compensate for this here by doubling the spacing on the
|
|
* vertical to ensure there is equal visual spacing around the inserter. Note there
|
|
* is no formal API for a "passthrough" Block so this is an edge case override
|
|
*/
|
|
[data-type="canvas/row"] .block-list-appender {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.cnvs-block-row-inner > .block-editor-inner-blocks.has-overlay::after {
|
|
left: 0;
|
|
right: 0;
|
|
}
|