alerts.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. //
  2. // Alerts
  3. // --------------------------------------------------
  4. .misago-alert-close(@text, @bg) {
  5. background-color: lighten(@bg, 10%);
  6. border: 1px solid lighten(@bg, 10%);
  7. border-radius: @border-radius-small;
  8. .box-shadow(none);
  9. float: none;
  10. margin-left: @alert-padding;
  11. padding: 6px 8px;
  12. .opacity(1);
  13. color: @text;
  14. font-size: @font-size-base;
  15. text-shadow: none;
  16. &:hover {
  17. background-color: darken(@bg, 15%);
  18. border-color: darken(@bg, 15%);
  19. color: @text;
  20. }
  21. &:active, &:focus {
  22. background-color: @text;
  23. border: 1px solid @text;
  24. color: @bg;
  25. }
  26. }
  27. .misago-alerts {
  28. margin-bottom: @line-height-computed;
  29. .alerts-list {
  30. width: 100%;
  31. text-align: center;
  32. &.affix {
  33. top: 0;
  34. z-index: @zindex-navbar-fixed;
  35. }
  36. .alert {
  37. border: none;
  38. border-radius: 0;
  39. margin-bottom: 0px;
  40. padding: @alert-padding;
  41. .alert-icon {
  42. margin: -@alert-padding 0px;
  43. margin-right: @alert-padding * .7;
  44. position: relative;
  45. top: ((@font-size-base * 1.8) - @line-height-computed) / 2;
  46. font-size: @font-size-base * 1.8;
  47. }
  48. &.alert-success {
  49. .close {
  50. .misago-alert-close(@alert-success-text, @alert-success-bg);
  51. }
  52. }
  53. &.alert-info {
  54. .close {
  55. .misago-alert-close(@alert-info-text, @alert-info-bg);
  56. }
  57. }
  58. &.alert-warning {
  59. .close {
  60. .misago-alert-close(@alert-warning-text, @alert-warning-bg);
  61. }
  62. }
  63. &.alert-danger {
  64. .close {
  65. .misago-alert-close(@alert-danger-text, @alert-danger-bg);
  66. }
  67. }
  68. }
  69. }
  70. }