src/admin/resources/scss/components/_block.scss
.block {
border: 1px solid #f0f0f0;
border-radius: $border-radius;
margin-top: 5px;
padding: 0;
position: relative;
transition: .2s ease-in-out border-color, 0s .2s ease-in-out z-index;
&:not(:last-of-type) {
margin-bottom: 25px;
}
&:hover {
border-color: $block-border-color;
border-radius: $border-radius;
cursor: move;
transition: .2s ease-in-out border-color;
z-index: 1;
}
.block-is-layout > & {
border-color: transparent;
}
&:before,
&:after {
background-color: theme-color(primary);
content: '';
display: none;
height: 5px;
left: 0;
position: absolute;
right: 0;
z-index: z-index(block-drop-indicator);
}
&:before {
top: -6px;
}
&:after {
bottom: -6px;
}
&--drag-top:before {
display: block;
}
&--drag-bottom:after {
display: block;
}
&-is-hidden .block-front {
opacity: .3;
}
&-is-virgin .block-front {
background-color: lighten(color(blue), 40);
border-radius: $border-radius;
}
&-first {
margin-top: 0;
}
.show-block-lines & {
border-color: rgba($block-border-color, .5);
}
}
.empty-placeholder {
color:#333;
font-weight: 200;
font-size: 14px;
}
.block-toolbar {
background-color: map-get($grays, 900);
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
color: $white;
display: flex;
flex-wrap: wrap;
left: -$block-border-width;
opacity: 0;
padding: 0 $block-padding;
pointer-events: none;
position: absolute;
right: -$block-border-width;
height: 36px;
margin-top: -36px;
transition: .2s ease-in-out opacity;
z-index: 1;
.toolbar-item {
border: none !important;
font-size: 20px;
padding: 2px 4px;
&:last-of-type {
padding-right: 0;
}
}
.block:hover > & {
opacity: 1;
pointer-events: all;
}
.block-is-layout > &,
.block-is-layout:hover > & {
background-color: $block-border-color;
opacity: 1;
pointer-events: all;
}
.inlinemodal {
color: $black;
font-size: 1rem;
}
}
.block-front,
.block-edit {
padding: $block-padding;
}
.block-front {
@include clearfix;
cursor: pointer;
overflow: hidden;
white-space: normal;
word-break: break-all;
.block-is-layout > .block > & {
padding: 10px 0;
}
.block-is-layout > .block-is-container > & {
padding: 0;
}
}
.block-is-container {
&:hover {
background-color: #f0f0f0;
}
}
.block-toolbar .scheduler-btn,
.block-toolbar-button {
background: none;
background-color: transparent;
border: none;
border-radius: $border-radius;
color: $white;
cursor: pointer;
display: block;
margin-left: 5px;
transition: .25s ease-in-out background-color;
padding: 1px 6px;
&:hover {
background-color: rgba(255, 255, 255, .2);
}
.block--is-dragging & {
display: none;
}
}
.block-toolbar .btn {
font-size: inherit;
line-height: inherit;
color: $white;
&:focus {
outline: none;
box-shadow: none;
}
}