static/scss/bootstrap-4.0.0-alpha.6/scss/_alert.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .alert {
   6   padding: $alert-padding-y $alert-padding-x;
   7   margin-bottom: $alert-margin-bottom;
   8   border: $alert-border-width solid transparent;
   9   @include border-radius($alert-border-radius);
  10 }
  11
  12 // Headings for larger alerts
  13 .alert-heading {
  14   // Specified to prevent conflicts of changing $headings-color
  15   color: inherit;
  16 }
  17
  18 // Provide class for links that match alerts
  19 .alert-link {
  20   font-weight: $alert-link-font-weight;
  21 }
  22
  23
  24 // Dismissible alerts
  25 //
  26 // Expand the right padding and account for the close button's positioning.
  27
  28 .alert-dismissible {
  29   // Adjust close link position
  30   .close {
  31     position: relative;
  32     top: -$alert-padding-y;
  33     right: -$alert-padding-x;
  34     padding: $alert-padding-y $alert-padding-x;
  35     color: inherit;
  36   }
  37 }
  38
  39
  40 // Alternate styles
  41 //
  42 // Generate contextual modifier classes for colorizing the alert.
  43
  44 .alert-success {
  45   @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
  46 }
  47 .alert-info {
  48   @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
  49 }
  50 .alert-warning {
  51   @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
  52 }
  53 .alert-danger {
  54   @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  55 }