Fix css for protocol checklists [SCI-8788]

This commit is contained in:
Anton 2023-07-13 13:55:32 +02:00
parent fca9aea4a8
commit 4cc6513f82
5 changed files with 13 additions and 12 deletions

View file

@ -16,6 +16,7 @@
} }
.step-element-header { .step-element-header {
.step-element-name { .step-element-name {
align-items: flex-start; align-items: flex-start;
column-gap: .25em; column-gap: .25em;

View file

@ -4,7 +4,7 @@
} }
.btn { .btn {
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer; @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
} }
.btn.icon-btn { .btn.icon-btn {
@ -12,7 +12,7 @@
} }
.btn.btn-lg { .btn.btn-lg {
@apply py-2.5 px-[1.125rem] text-base leading-5; @apply py-2.5 px-[1.125rem] text-base leading-5 max-h-[44px];
} }
.btn.btn-lg.icon-btn { .btn.btn-lg.icon-btn {
@ -20,7 +20,7 @@
} }
.btn.btn-sm { .btn.btn-sm {
@apply py-1.5 px-2.5 text-xs leading-5; @apply py-1.5 px-2.5 text-xs leading-5 max-h-[36px];
} }
.btn.btn-sm.icon-btn { .btn.btn-sm.icon-btn {
@ -28,7 +28,7 @@
} }
.btn.btn-xs { .btn.btn-xs {
@apply py-0.5 px-2.5 text-xs leading-5; @apply py-0.5 px-2.5 text-xs leading-5 max-h-[30px];
} }
.btn.btn-xs.icon-btn { .btn.btn-xs.icon-btn {

View file

@ -22,13 +22,13 @@
/> />
</div> </div>
<div class="step-element-controls"> <div class="step-element-controls">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true" tabindex="0"> <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light btn-sm" @click="editingName = true" tabindex="0">
<i class="sn-icon sn-icon-edit"></i> <i class="sn-icon sn-icon-edit"></i>
</button> </button>
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement"> <button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light btn-sm" tabindex="0" @click="duplicateElement">
<i class="sn-icon sn-icon-duplicate"></i> <i class="sn-icon sn-icon-duplicate"></i>
</button> </button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0"> <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light btn-sm" @click="showDeleteModal" tabindex="0">
<i class="sn-icon sn-icon-delete"></i> <i class="sn-icon sn-icon-delete"></i>
</button> </button>
</div> </div>
@ -63,7 +63,7 @@
/> />
</Draggable> </Draggable>
<div v-if="element.attributes.orderable.urls.create_item_url" <div v-if="element.attributes.orderable.urls.create_item_url"
class="btn btn-light step-checklist-add-item" class="btn btn-light btn-sm step-checklist-add-item"
tabindex="0" tabindex="0"
@keyup.enter="addItem" @keyup.enter="addItem"
@click="addItem"> @click="addItem">

View file

@ -39,10 +39,10 @@
</div> </div>
</div> </div>
<div class="step-element-controls"> <div class="step-element-controls">
<button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="0"> <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light btn-sm" @click="enableTextEdit" tabindex="0">
<i class="sn-icon sn-icon-edit"></i> <i class="sn-icon sn-icon-edit"></i>
</button> </button>
<button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0"> <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light btn-sm" @click="showDeleteModal" tabindex="0">
<i class="sn-icon sn-icon-delete"></i> <i class="sn-icon sn-icon-delete"></i>
</button> </button>
</div> </div>

View file

@ -20,10 +20,10 @@
</div> </div>
</div> </div>
<template v-if="editing"> <template v-if="editing">
<div :class="{ 'btn-primary': !error, 'btn-disabled': error }" class="sci-inline-edit__control btn icon-btn" @click="update"> <div :class="{ 'btn-primary': !error, 'btn-disabled': error }" class="sci-inline-edit__control btn btn-sm icon-btn" @click="update">
<i class="sn-icon sn-icon-check"></i> <i class="sn-icon sn-icon-check"></i>
</div> </div>
<div class="sci-inline-edit__control btn btn-light icon-btn" @mousedown="cancelEdit"> <div class="sci-inline-edit__control btn btn-light btn-sm icon-btn" @mousedown="cancelEdit">
<i class="sn-icon sn-icon-close"></i> <i class="sn-icon sn-icon-close"></i>
</div> </div>
</template> </template>