i-rubik/src/style/components/alert.styl

A Vue.js 2.0+ UI Components Framework

.alert
  border-radius $alert-border-radius
  border-width $alert-border-width
  border-style solid
  border-color rgba(#000, .8)
  color $alert-color
  display flex
  font-size $alert-font-size
  text-align left
  padding $alert-padding
  position relative
  margin $alert-margin
  
  &-icon, &-close
    align-self center
    margin-right 1rem
    margin-bottom 4px
    font-size $alert-icon-font-size
    color $alert-icon-color
  
  &-close
    margin-right 0
    margin-left 1rem
    transition $primary-transition
    align-self flex-start
    font-size $alert-font-size
    text-decoration none
  
  &-close-icon  
    color $alert-icon-color
    &:hover
      color lighten($alert-icon-color, 10%)
    
  > div
    width 100%

  &-info
    alert($blue.lighten-1)
        
  &-error
    alert($red.lighten-1)

  &-success
    alert($green.lighten-1)
    
  &-warning
    alert($amber.lighten-1)
    
  &-no-icon
    .alert-icon
      display none
    
  @media screen and (max-width: $grid-breakpoints.sm)
    &-icon
      display none