ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add CSS styling to danger message box

Browse Source 
- lost the CSS when removed buefy
This commit is contained in:
Matt Rider 2019-06-10 14:11:44 -03:00
parent 1c506bd21c
commit 507890a7aa
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
webapp/components/DeleteAccount/DeleteAccount.vue
View File

@ -11,7 +11,9 @@
<ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading> <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
</ds-flex-item> </ds-flex-item>
<ds-space /> <ds-space />
<ds-heading tag="h4">{{ $t('settings.deleteUserAccount.accountDescription') }}</ds-heading> <ds-heading tag="h4">
{{ $t('settings.deleteUserAccount.accountDescription') }}
</ds-heading>
</ds-flex> </ds-flex>
</ds-container> </ds-container>
<ds-space /> <ds-space />
@ -62,10 +64,12 @@
class="enable-comment-deletion-input" class="enable-comment-deletion-input"
/> />
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: '100%' }">
<ds-section id="delete-user-account-warning">
<div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
</ds-section>
</ds-flex-item>
</ds-flex> </ds-flex>
<div class="message is-danger">
<div class="message-body" v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
</div>
</div> </div>
</transition> </transition>
</ds-container> </ds-container>
@ -75,7 +79,9 @@
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }"> <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
<div <div
class="delete-input-label" class="delete-input-label"
v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })" v-html="
$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })
"
></div> ></div>
<ds-input <ds-input
v-model="enableDeletionValue" v-model="enableDeletionValue"
@ -89,7 +95,9 @@
danger danger
:disabled="isLoading || !deleteEnabled" :disabled="isLoading || !deleteEnabled"
@click="handleSubmit" @click="handleSubmit"
>{{ $t('settings.deleteUserAccount.name') }}</ds-button> >
{{ $t('settings.deleteUserAccount.name') }}
</ds-button>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-container> </ds-container>
@ -201,6 +209,15 @@ b.is-danger {
.ds-card-footer { .ds-card-footer {
border-top: $border-size-base solid $border-color-softest; border-top: $border-size-base solid $border-color-softest;
background-color: $background-color-warning-inverse; background-color: $background-color-danger-inverse;
}
#delete-user-account-warning {
background-color: $background-color-danger-inverse;
border-left: $border-size-x-large solid $background-color-danger-active;
color: $text-color-danger;
margin-left: 0px;
margin-right: 0px;
border-radius: $border-radius-x-large;
} }
</style> </style>