git.roojs.org Git - roojs1/blob - scss/bootstrap/_alert.scss

   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: ($close-font-size + $alert-padding-x * 2);
  31
  32   // Adjust close link position
  33   .close {
  34     position: absolute;
  35     top: 0;
  36     right: 0;
  37     padding: $alert-padding-y $alert-padding-x;
  38     color: inherit;
  39   }
  40 }
  41
  42
  43 // Alternate styles
  44 //
  45 // Generate contextual modifier classes for colorizing the alert.
  46
  47 @each $color, $value in $theme-colors {
  48   .alert-#{$color} {
  49     @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  50   }
  51 }