_alert.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. //
  2. // Base styles
  3. //
  4. .alert {
  5. position: relative;
  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. // Headings for larger alerts
  12. .alert-heading {
  13. // Specified to prevent conflicts of changing $headings-color
  14. color: inherit;
  15. }
  16. // Provide class for links that match alerts
  17. .alert-link {
  18. font-weight: $alert-link-font-weight;
  19. }
  20. // Dismissible alerts
  21. //
  22. // Expand the right padding and account for the close button's positioning.
  23. .alert-dismissible {
  24. padding-right: $close-font-size + $alert-padding-x * 2;
  25. // Adjust close link position
  26. .close {
  27. position: absolute;
  28. top: 0;
  29. right: 0;
  30. padding: $alert-padding-y $alert-padding-x;
  31. color: inherit;
  32. }
  33. }
  34. // Alternate styles
  35. //
  36. // Generate contextual modifier classes for colorizing the alert.
  37. @each $color, $value in $theme-colors {
  38. .alert-#{$color} {
  39. @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  40. }
  41. }