_alerts.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. // Dismissible alerts
  31. //
  32. // Expand the right padding and account for the close button's positioning.
  33. .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
  34. .alert-dismissible {
  35. padding-right: ($alert-padding + 20);
  36. // Adjust close link position
  37. .close {
  38. position: relative;
  39. top: -2px;
  40. right: -21px;
  41. color: inherit;
  42. }
  43. }
  44. // Alternate styles
  45. //
  46. // Generate contextual modifier classes for colorizing the alert.
  47. .alert-success {
  48. @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
  49. }
  50. .alert-info {
  51. @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
  52. }
  53. .alert-warning {
  54. @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
  55. }
  56. .alert-danger {
  57. @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  58. }