konrad
32353e3b76
All checks were successful
continuous-integration/drone/push Build is passing
I wanted to give the no-auth screens a new look. Here's what I ended up with:  The image is something we could change with every release. Co-authored-by: kolaente <k@knt.li> Reviewed-on: #1103 Reviewed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-authored-by: konrad <k@knt.li> Co-committed-by: konrad <k@knt.li>
49 lines
865 B
Vue
49 lines
865 B
Vue
<template>
|
|
<div class="message-wrapper">
|
|
<div class="message" :class="variant">
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'info',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.message-wrapper {
|
|
border-radius: $radius;
|
|
background: var(--white);
|
|
}
|
|
|
|
.message {
|
|
padding: .75rem 1rem;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
.info {
|
|
border: 1px solid var(--primary);
|
|
background: hsla(var(--primary-hsl), .05);
|
|
}
|
|
|
|
.danger {
|
|
border: 1px solid var(--danger);
|
|
background: hsla(var(--danger-h), var(--danger-s), var(--danger-l), .05);
|
|
}
|
|
|
|
.warning {
|
|
border: 1px solid var(--warning);
|
|
background: hsla(var(--warning-h), var(--warning-s), var(--warning-l), .05);
|
|
}
|
|
|
|
.success {
|
|
border: 1px solid var(--success);
|
|
background: hsla(var(--success-h), var(--success-s), var(--success-l), .05);
|
|
}
|
|
</style>
|