1
0
Fork 1
mirror of https://example.com synced 2024-11-22 12:26:38 +09:00

style: rearrange buttons in page editor

This commit is contained in:
sup39 2024-01-19 04:01:55 +09:00 committed by naskya
parent ec7b1a9dae
commit c7656a2781
Signed by: naskya
GPG key ID: 712D413B3A9FED5C

View file

@ -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;
}