You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_alert.scss 1.3KB

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