Web: style action buttons and move the delete button to the last place
This commit is contained in:
parent
eeb8305de0
commit
bb1acef054
@ -234,6 +234,7 @@ section.action-bar {
|
|||||||
height: var(--action-bar-height);
|
height: var(--action-bar-height);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.action-bar button.action {
|
section.action-bar button.action {
|
||||||
@ -244,6 +245,7 @@ section.action-bar button.action {
|
|||||||
background: #6E6D70;
|
background: #6E6D70;
|
||||||
color: #DFDEDF;
|
color: #DFDEDF;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
|
||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
transition-property: color, background-color, border-color, box-shadow
|
transition-property: color, background-color, border-color, box-shadow
|
||||||
@ -261,7 +263,9 @@ section.action-bar button.action:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
section.action-bar button.action.dangerous {
|
section.action-bar button.action.dangerous {
|
||||||
background-color: darkred;
|
background-color: #7c4d41;
|
||||||
|
color: #e4c5c0;
|
||||||
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.action-bar button.action.dangerous[disabled] {
|
section.action-bar button.action.dangerous[disabled] {
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="action-bar jobs">
|
<section class="action-bar jobs">
|
||||||
<button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
|
|
||||||
<button class="action cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel</button>
|
<button class="action cancel" :disabled="!jobs.canCancel" v-on:click="onButtonCancel">Cancel</button>
|
||||||
<button class="action requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
|
<button class="action requeue" :disabled="!jobs.canRequeue" v-on:click="onButtonRequeue">Requeue</button>
|
||||||
|
<button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user