Sub-Store/web/src/components/base/MaterialAlert.vue

<script>
// Components
import {VAlert, VBtn, VIcon} from 'vuetify/lib'

export default {
  name: 'MaterialAlert',

  extends: VAlert,

  computed: {
    __cachedDismissible() {
      if (!this.dismissible) return null

      const color = 'white'

      return this.$createElement(VBtn, {
        staticClass: 'v-alert__dismissible',
        props: {
          color,
          icon: true,
          small: true
        },
        attrs: {
          'aria-label': this.$vuetify.lang.t(this.closeLabel)
        },
        on: {
          // eslint-disable-next-line
          click: () => (this.isActive = false)
        }
      }, [
        this.$createElement(VIcon, {
          props: {color}
        }, '$vuetify.icons.cancel')
      ])
    },
    classes() {
      return {
        ...VAlert.options.computed.classes.call(this),
        'v-alert--material': true
      }
    },
    hasColoredIcon() {
      return true
    }
  }
}
</script>

<style lang="sass">

.v-alert--material
  margin-top: 32px

  .v-alert__icon
    background-color: #FFFFFF
    height: 44px
    min-width: 44px
    top: -36px

  .v-alert__dismissible
    align-self: flex-start
    margin: 0 !important
    padding: 0 !important
</style>