resources/scss/bootstrap/_alerts.scss

   1 //
   2 // Alerts
   3 // --------------------------------------------------
   4
   5 // Base styles
   6 // -------------------------
   7
   8 .alert {
   9   padding: $alert-padding;
  10   margin-bottom: $line-height-computed;
  11   border: 1px solid transparent;
  12   border-radius: $alert-border-radius;
  13
  14   // Headings for larger alerts
  15   h4 {
  16         margin-top: 0;
  17         // Specified for the h4 to prevent conflicts of changing $headings-color
  18         color: inherit;
  19   }
  20
  21   // Provide class for links that match alerts
  22   .alert-link {
  23         font-weight: $alert-link-font-weight;
  24   }
  25
  26   // Improve alignment and spacing of inner content
  27   > p,
  28   > ul {
  29         margin-bottom: 0;
  30   }
  31
  32   > p + p {
  33         margin-top: 5px;
  34   }
  35 }
  36
  37 // Dismissible alerts
  38 //
  39 // Expand the right padding and account for the close button's positioning.
  40
  41 .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
  42 .alert-dismissible {
  43   padding-right: ($alert-padding + 20);
  44
  45   // Adjust close link position
  46   .close {
  47         position: relative;
  48         top: -2px;
  49         right: -21px;
  50         color: inherit;
  51   }
  52 }
  53
  54 // Alternate styles
  55 //
  56 // Generate contextual modifier classes for colorizing the alert.
  57
  58 .alert-success {
  59   @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
  60 }
  61
  62 .alert-info {
  63   @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
  64 }
  65
  66 .alert-warning {
  67   @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
  68 }
  69
  70 .alert-danger {
  71   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  72 }