_alert.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // Alerts
  2. .alert {
  3. font-weight: 500;
  4. border: none;
  5. padding: 0;
  6. // close
  7. &.alert-dismissible {
  8. .close {
  9. padding: 0.5rem $alert-padding-x 0.5rem $alert-padding-x;
  10. background-color: transparent !important;
  11. box-shadow: none !important;
  12. }
  13. .alert-body {
  14. padding: $alert-padding-y ($alert-padding-x * 2) $alert-padding-y $alert-padding-x;
  15. }
  16. }
  17. .close:focus {
  18. outline: 0;
  19. }
  20. .alert-link:hover {
  21. text-decoration: underline;
  22. }
  23. // For Alert Content
  24. p {
  25. font-weight: 500;
  26. padding: 2px 0;
  27. margin-bottom: 0;
  28. vertical-align: middle;
  29. }
  30. // For alert heading
  31. .alert-heading {
  32. font-weight: 600;
  33. font-size: $font-size-base;
  34. padding: $alert-padding-y $alert-padding-x;
  35. margin-bottom: 0;
  36. }
  37. .alert-body {
  38. padding: $alert-padding-y $alert-padding-x;
  39. i,
  40. svg {
  41. position: relative;
  42. top: -2px;
  43. }
  44. }
  45. // For dark alert
  46. &.alert-dark {
  47. .alert-heading {
  48. @include alert-heading-bs($dark);
  49. }
  50. }
  51. }