blob: 9e47bf34c55acbb64cab9e6f3c0f3e18d2f0f34e [file] [log] [blame]
<!-- Inspired by bootstrap http://getbootstrap.com/ -->
<template>
<div :class="['tip', 'tip-' + type]">
<text :class="['tip-txt', 'tip-txt-' + type]">{{value}}</text>
</div>
</template>
<script>
module.exports = {
props: {
type: { default: 'success' },
value: { default: '' }
}
}
</script>
<style scoped>
.tip {
padding-left: 36px;
padding-right: 36px;
padding-top: 36px;
padding-bottom: 36px;
border-radius: 10px;
}
.tip-txt{
font-size: 28px;
}
.tip-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.tip-txt-success {
color: #3c763d;
}
.tip-info {
background-color: #d9edf7;
border-color: #bce8f1;
}
.tip-txt-info {
color: #31708f;
}
.tip-warning {
background-color: #fcf8e3;
border-color: #faebcc;
}
.tip-txt-warning {
color: #8a6d3b;
}
.tip-danger {
background-color: #f2dede;
border-color: #ebccd1;
}
.tip-txt-danger {
color: #a94442;
}
</style>