100 lines
1.8 KiB
SCSS
100 lines
1.8 KiB
SCSS
|
/*
|
||
|
* Visual Portfolio Layouts Editor styles.
|
||
|
*/
|
||
|
|
||
|
.post-type-vp_lists {
|
||
|
.block-editor-block-list__breadcrumb,
|
||
|
.edit-post-layout__footer {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
// remove outline from block.
|
||
|
.block-editor-block-list__block::before,
|
||
|
.block-editor-block-contextual-toolbar,
|
||
|
.block-editor-block-list__insertion-point {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
// Remove writing container.
|
||
|
.block-editor-writing-flow__click-redirect {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
// Shortcodes settings.
|
||
|
.vpf-layout-shortcode-copy {
|
||
|
> div {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
> strong {
|
||
|
display: block;
|
||
|
padding-top: 0;
|
||
|
font-size: 11px;
|
||
|
font-weight: 500;
|
||
|
line-height: 1.4;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
padding: 10px;
|
||
|
padding-right: 40px;
|
||
|
margin-top: 0.5em;
|
||
|
margin-bottom: 1.1em;
|
||
|
overflow: auto;
|
||
|
font-size: 12px;
|
||
|
background-color: #ebebeb;
|
||
|
border: 1px solid #ddd;
|
||
|
border-radius: 4px;
|
||
|
}
|
||
|
|
||
|
.components-button {
|
||
|
position: absolute;
|
||
|
top: 6px;
|
||
|
right: 0;
|
||
|
background-color: #ebebeb;
|
||
|
opacity: 0;
|
||
|
transition: 0.2s opacity;
|
||
|
}
|
||
|
|
||
|
.components-button:hover,
|
||
|
.components-button:focus,
|
||
|
pre:hover + .components-button {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Copied element
|
||
|
.vpf-layout-shortcode-copied {
|
||
|
position: absolute;
|
||
|
bottom: 100%;
|
||
|
left: 0;
|
||
|
padding: 4px 6px;
|
||
|
margin-left: 50%;
|
||
|
color: #fff;
|
||
|
background: #000;
|
||
|
border-radius: 3px;
|
||
|
opacity: 0;
|
||
|
transform: translateY(5px) translateX(-50%);
|
||
|
animation: 0.4s vpf-layout-shortcode-copied linear;
|
||
|
}
|
||
|
|
||
|
@keyframes vpf-layout-shortcode-copied {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
transition-timing-function: ease-out;
|
||
|
transform: translateY(5px) translateX(-50%);
|
||
|
}
|
||
|
|
||
|
50% {
|
||
|
opacity: 1;
|
||
|
transform: translateY(-5px) translateX(-50%);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
transition-timing-function: ease-in;
|
||
|
transform: translateY(-15px) translateX(-50%);
|
||
|
}
|
||
|
}
|
||
|
}
|