_alerts.scss 1.4 KB

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