137 lines
2.1 KiB
CSS
137 lines
2.1 KiB
CSS
.field_group div.actions {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.dragzone {
|
|
padding-bottom:3rem;
|
|
padding-top:3rem;
|
|
}
|
|
|
|
.dragzone .row, .dragzone .col {
|
|
border: 1px dashed transparent;
|
|
border: 1px solid #ddd;
|
|
min-height:50px;
|
|
transition: width 266ms, height 266ms;
|
|
}
|
|
|
|
.dragzone .row, .dragzone .col,
|
|
.dragzone .row:hover, .dragzone .row:hover .col {
|
|
border: 1px solid #ddd;
|
|
position:relative;
|
|
}
|
|
|
|
.dragzone .row:hover .col:last-child,
|
|
.dragzone .row .col:last-child,
|
|
.dragzone .col.dragstart + .col {
|
|
border-right:1px solid #ddd;
|
|
}
|
|
|
|
.dragzone .col {
|
|
border-right:none;
|
|
}
|
|
|
|
.dragzone .row {
|
|
padding:0.5rem 1.5rem;
|
|
margin-bottom:1rem;
|
|
}
|
|
|
|
.dragzone .col {
|
|
padding:0.5rem 1.5rem;
|
|
border-right:none;
|
|
position:relative;
|
|
}
|
|
|
|
.dragzone .col > .row {
|
|
margin-top:2rem;
|
|
}
|
|
|
|
.dragzone > .row::before,
|
|
.dragzone > .row > .col::before,
|
|
.col > .row::before,
|
|
.col > .row > .col::before {
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
height:10px;
|
|
content: '....';
|
|
width: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
line-height: 5px;
|
|
padding: 0px 4px 10px;
|
|
cursor: move;
|
|
vertical-align: middle;
|
|
font-size: 12px;
|
|
font-family: sans-serif;
|
|
letter-spacing: 2px;
|
|
color: #eee;
|
|
text-shadow: 1px 0 1px black;
|
|
content: '.. .. .. ..';
|
|
}
|
|
|
|
.col > .edit {
|
|
display:none;
|
|
}
|
|
|
|
|
|
.dragover {
|
|
}
|
|
|
|
.dragstart {
|
|
max-width:50%;
|
|
max-height:30%;
|
|
}
|
|
|
|
.dragzone.drop, .row.drop {
|
|
background:lightyellow;
|
|
}
|
|
|
|
.col.drop::after {
|
|
content:"";
|
|
width:10px;
|
|
height:100%;
|
|
background:yellow;
|
|
display:block;
|
|
right:0;
|
|
top:0;
|
|
|
|
position:absolute;
|
|
}
|
|
|
|
.dragenter {
|
|
|
|
}
|
|
|
|
#actions {
|
|
position:absolute;
|
|
//display:none;
|
|
left:-5000px;
|
|
top:0;
|
|
opacity: 0;
|
|
border-bottom-left-radius: 10px;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
#edit, .edit {
|
|
position: absolute;
|
|
left: auto;
|
|
top: auto;
|
|
width: 100%;
|
|
width: calc(100% - 80px);
|
|
opacity:0;
|
|
height:0;
|
|
transition: opacity 0.15s ease-out;
|
|
background:var(--bs-body-bg);
|
|
overflow:hidden;
|
|
}
|
|
|
|
#edit.show,
|
|
.edit.show {
|
|
opacity:1;
|
|
height:auto;
|
|
transition: opacity 0.25s ease-in;
|
|
box-shadow:0px 20px 30px 5px rgba(var(--bs-body-color-rgb), 0.08), 0px 100px 100px 10px var(--bs-body-bg);
|
|
}
|