style: rearrange buttons in page editor
This commit is contained in:
parent
881fd5f5d8
commit
7ffb8e2853
1 changed files with 10 additions and 9 deletions
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
|
||||
<header>
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="buttons">
|
||||
<slot name="func"></slot>
|
||||
<button v-if="removable" class="_button" @click="remove()">
|
||||
<i :class="icon('ph-trash')"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="buttons">
|
||||
<slot name="func"></slot>
|
||||
<div v-if="draggable" class="drag-handle _button">
|
||||
<i :class="icon('ph-list')"></i>
|
||||
</div>
|
||||
|
@ -115,14 +117,16 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> header {
|
||||
display: flex;
|
||||
padding-top: 0.5em;
|
||||
|
||||
> .title {
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
line-height: 42px;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 1px rgba(#000, 0.07);
|
||||
flex: 1;
|
||||
|
||||
> i {
|
||||
margin-inline-end: 6px;
|
||||
|
@ -134,16 +138,13 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .buttons {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
> ._button {
|
||||
> ._button,
|
||||
> :slotted(._button) {
|
||||
padding: 0;
|
||||
width: 42px;
|
||||
font-size: 0.9em;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue