_alert.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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-color: #f5e0e8;
  38. color: #ef5228;
  39. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  40. }
  41. .alert-success {
  42. background: rgba($success,.2);
  43. color: darken($success, 2%);
  44. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  45. }
  46. .alert-info {
  47. background: rgba($info,.2);
  48. color: $info;
  49. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
  50. }
  51. .alert-primary {
  52. background: rgba($primary,.2);
  53. color: $primary-darker;
  54. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
  55. }
  56. .alert-warning {
  57. background-color: #f6f6eb;
  58. color: darken($warning, 8%);
  59. box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
  60. }
  61. .callout {
  62. border-radius: .1rem;
  63. border: 0;
  64. border-left: 3.5px solid lighten(#8e9aac, 5%);
  65. background-color: #fff;
  66. margin-bottom: 1rem;
  67. box-shadow: $shadow;
  68. }
  69. .callout.callout-primary {
  70. border-left: 3.5px solid lighten($primary, 2%);
  71. }
  72. .callout.callout-light {
  73. background-color: #f7f7f9;
  74. box-shadow: none;
  75. }