IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-04-06 01:25:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style changes for the action buttons

Browse Source
This commit is contained in:
elweyn 2023-03-16 12:08:56 +01:00
parent fd62a03820
commit 9259615a34
1 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -74,8 +74,8 @@
/> />
<!-- eslint-enable vue/no-v-text-v-html-on-component --> <!-- eslint-enable vue/no-v-text-v-html-on-component -->
</ds-flex-item> </ds-flex-item>
<ds-flex-item width="0.25" /> <ds-flex-item width="0.15" />
<ds-flex-item style="align-self: flex-end"> <ds-flex-item class="action-buttons-group" width="2">
<base-button <base-button
data-test="cancel-button" data-test="cancel-button"
:disabled="loading" :disabled="loading"
@ -84,8 +84,6 @@
> >
{{ $t('actions.cancel') }} {{ $t('actions.cancel') }}
</base-button> </base-button>
</ds-flex-item>
<ds-flex-item style="align-self: flex-end">
<base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled> <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
{{ $t('actions.save') }} {{ $t('actions.save') }}
</base-button> </base-button>
@ -310,9 +308,45 @@ export default {
} }
> .buttons-footer { > .buttons-footer {
justify-content: flex-end;
align-self: flex-end; align-self: flex-end;
width: 85%; width: 100%;
margin-top: $space-base; margin-top: $space-base;
> .action-buttons-group {
margin-left: auto;
display: flex;
justify-content: flex-end;
> button {
margin-left: 1em;
min-width: fit-content;
}
}
}
@media screen and (max-width: 656px) {
> .buttons-footer {
flex-direction: column;
margin-top: 5px;
> .action-buttons-group {
> button {
margin-left: 1em;
}
}
}
}
@media screen and (max-width: 280px) {
> .buttons-footer {
> .action-buttons-group {
flex-direction: column;
> button {
margin-bottom: 5px;
}
}
}
} }
.blur-toggle { .blur-toggle {