opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use computed properties for message colours

Browse source
This commit is contained in:
Oliver Davies 2018-12-28 18:40:28 +00:00
parent 20d41f2ef4
commit b6dd23aebe
1 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/DrupalMessage.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="pl-2 rounded-sm" :class="{'bg-green': type == 'status'}">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="{'border-green-light text-green-dark bg-green-lighter': type == 'status'}">
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<slot></slot>
</div>
</div>
@ -12,5 +12,19 @@ export default {
props: {
type: String,
},
computed: {
classes: function () {
return {
status: 'border-green-light text-green-dark bg-green-lighter',
}[this.type]
},
wrapperClasses: function () {
return {
status: 'bg-green',
}[this.type]
},
}
}
</script>