alerts.less 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /*
  2. * Component: alert
  3. * ----------------
  4. */
  5. .alert {
  6. .border-radius(3px);
  7. h4 {
  8. font-weight: 600;
  9. }
  10. .icon {
  11. margin-right: 10px;
  12. }
  13. .close {
  14. color: #000;
  15. .opacity(.2);
  16. &:hover {
  17. .opacity(.5);
  18. }
  19. }
  20. a {
  21. color: #fff;
  22. text-decoration: underline;
  23. }
  24. }
  25. //Alert Variants
  26. .alert-success {
  27. &:extend(.bg-green);
  28. border-color: darken(@green, 5%);
  29. }
  30. .alert-danger,
  31. .alert-error {
  32. &:extend(.bg-red);
  33. border-color: darken(@red, 5%);
  34. }
  35. .alert-warning {
  36. &:extend(.bg-yellow);
  37. border-color: darken(@yellow, 5%);
  38. }
  39. .alert-info {
  40. &:extend(.bg-aqua);
  41. border-color: darken(@aqua, 5%);
  42. }
  43. .alert-primary-light {
  44. background-color: @primary-light-bg;
  45. border-color: @primary-light-border;
  46. color: @primary-light-text;
  47. a {
  48. color: darken(@primary-light-text, 5%);
  49. }
  50. }
  51. .alert-success-light {
  52. background-color: @success-light-bg;
  53. border-color: @success-light-border;
  54. color: @success-light-text;
  55. a {
  56. color: darken(@success-light-text, 5%);
  57. }
  58. }
  59. .alert-danger-light,
  60. .alert-error-light {
  61. background-color: @danger-light-bg;
  62. border-color: @danger-light-border;
  63. color: @danger-light-text;
  64. a {
  65. color: darken(@danger-light-text, 5%);
  66. }
  67. }
  68. .alert-warning-light {
  69. background-color: @warning-light-bg;
  70. border-color: @warning-light-border;
  71. color: @warning-light-text;
  72. a {
  73. color: darken(@warning-light-text, 5%);
  74. }
  75. }
  76. .alert-info-light {
  77. background-color: @info-light-bg;
  78. border-color: @info-light-border;
  79. color: @info-light-text;
  80. a {
  81. color: darken(@info-light-text, 5%);
  82. }
  83. }