vuetify/src/stylus/components/_alerts.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.alert
  border-radius: $alert-border-radius
  border-width: $alert-border-width
  border-style: solid
  color: #fff
  display: flex
  font-size: $alert-font-size
  margin: $alert-margin
  padding: $alert-padding
  position: relative
  transition: $primary-transition

  .alert__icon.icon,
  &__dismissible .icon
    align-self: center
    color: $alert-icon-color
    font-size: $alert-icon-font-size
  &--outline .icon
    color: inherit !important

  &__icon
    margin-right: $alert-padding

  &__dismissible
    align-self: flex-start
    color: inherit
    margin-left: $alert-padding
    margin-right: 0
    text-decoration: none
    transition: $primary-transition
    user-select: none

    &:hover
      opacity: .8

  &--no-icon
    .alert__icon
      display: none

  > div
    align-self: center
    flex: 1 1

  @media screen and (max-width: $grid-breakpoints.sm)
    &__icon
      display: none

// Double .alert is intended - it increases css specificity
// to properly set the border color where alert has set color
// with modifier (for example "red lighten-2")
.alert.alert
  border-color: $material-light.dividers !important
  &--outline
    border: $alert-outline-border-width $alert-outline-border-style currentColor !important