_alert.scss 1.2 KB

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