style: rearrange buttons in page editor #8

Manually merged
sup39 merged 1 commit from style/page-editor-buttons into main 2024-01-19 23:13:21 +09:00
Showing only changes of commit 6039e15cd5 - Show all commits

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