[Summary view] [Print] [Text view]

   1  //
   2  // Base styles
   3  //
   4  
   5  .alert {
   6    position: relative;
   7    padding: $alert-padding-y $alert-padding-x;
   8    margin-bottom: $alert-margin-bottom;
   9    border: $alert-border-width solid transparent;
  10    @include border-radius($alert-border-radius);
  11  }
  12  
  13  // Headings for larger alerts
  14  .alert-heading {
  15    // Specified to prevent conflicts of changing $headings-color
  16    color: inherit;
  17  }
  18  
  19  // Provide class for links that match alerts
  20  .alert-link {
  21    font-weight: $alert-link-font-weight;
  22  }
  23  
  24  
  25  // Dismissible alerts
  26  //
  27  // Expand the right padding and account for the close button's positioning.
  28  
  29  .alert-dismissible {
  30    padding-right: $alert-dismissible-padding-r;
  31  
  32    // Adjust close link position
  33    .btn-close {
  34      position: absolute;
  35      top: 0;
  36      right: 0;
  37      z-index: $stretched-link-z-index + 1;
  38      padding: $alert-padding-y * 1.25 $alert-padding-x;
  39    }
  40  }
  41  
  42  
  43  // scss-docs-start alert-modifiers
  44  // Generate contextual modifier classes for colorizing the alert.
  45  
  46  @each $state, $value in $theme-colors {
  47    $alert-background: shift-color($value, $alert-bg-scale);
  48    $alert-border: shift-color($value, $alert-border-scale);
  49    $alert-color: shift-color($value, $alert-color-scale);
  50    @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
  51      $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  52    }
  53    .alert-#{$state} {
  54      @include alert-variant($alert-background, $alert-border, $alert-color);
  55    }
  56  }
  57  // scss-docs-end alert-modifiers