<!-- 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>