_alert.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .alert {
  2. font-weight: 500;
  3. border: none;
  4. padding: 0.85rem 1.2rem;
  5. border-radius: .25rem;
  6. // close
  7. h4 {
  8. color: inherit;
  9. }
  10. .close:focus{
  11. outline: 0;
  12. }
  13. // For Alert Content
  14. p {
  15. font-weight: 500;
  16. padding: 2px 0;
  17. margin-bottom: 0;
  18. vertical-align: middle;
  19. }
  20. span{
  21. vertical-align: middle;
  22. }
  23. // For alert heading
  24. .alert-heading {
  25. font-weight: 700;
  26. font-size: 0.9rem;
  27. padding: 0;
  28. padding-bottom: 8px;
  29. }
  30. &.alert-dark {
  31. .alert-heading {
  32. box-shadow: rgba($dark, 0.4) 0px 6px 15px -7px;
  33. }
  34. }
  35. }
  36. .alert-danger {
  37. background: rgba($danger,.2);
  38. color: $danger;
  39. }
  40. .alert-success {
  41. background: rgba($success,.2);
  42. color: $success;
  43. }
  44. .alert-info {
  45. background: rgba($info,.2);
  46. color: $info;
  47. }
  48. .alert-primary {
  49. background: rgba($primary,.2);
  50. color: $primary-darker;
  51. }
  52. .alert-warning {
  53. background: rgba($warning,.35);
  54. color: darken($warning, 5%);
  55. }
  56. .callout {
  57. border-radius: .1rem;
  58. border: 0;
  59. border-left: 3.5px solid lighten(#8e9aac, 5%);
  60. background-color: #fff;
  61. margin-bottom: 1rem;
  62. box-shadow: $shadow;
  63. }
  64. .callout.callout-primary {
  65. border-left: 3.5px solid lighten($primary, 2%);
  66. }
  67. .callout.callout-light {
  68. background-color: #f7f7f9;
  69. box-shadow: none;
  70. }