Notification.less 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. // notification
  2. .@{prefix}-notification {
  3. position: absolute;
  4. background-color: @notification-bg;
  5. padding: 5px;
  6. margin-top: 5px;
  7. border-width: 1px;
  8. border-style: solid;
  9. border-color: @notification-border;
  10. transition: transform 100ms ease-in, opacity 150ms ease-in;
  11. opacity: 0;
  12. }
  13. .@{prefix}-notification.@{prefix}-in {
  14. opacity: 1;
  15. }
  16. .@{prefix}-notification-success {
  17. background-color: @notification-success-bg;
  18. border-color: @notification-success-border;
  19. }
  20. .@{prefix}-notification-info {
  21. background-color: @notification-info-bg;
  22. border-color: @notification-info-border;
  23. }
  24. .@{prefix}-notification-warning {
  25. background-color: @notification-warning-bg;
  26. border-color: @notification-warning-border;
  27. }
  28. .@{prefix}-notification-error {
  29. background-color: @notification-error-bg;
  30. border-color: @notification-error-border;
  31. }
  32. .@{prefix}-notification.@{prefix}-has-close {
  33. padding-right: 15px;
  34. }
  35. .@{prefix}-notification .@{prefix}-ico {
  36. margin-top: 5px;
  37. }
  38. .@{prefix}-notification-inner {
  39. display: inline-block;
  40. font-size: @notification-font-size;
  41. margin: 5px 8px 4px 8px;
  42. text-align: center;
  43. white-space: normal;
  44. color: @notification-info-text;
  45. }
  46. .@{prefix}-notification-inner a {
  47. text-decoration: underline;
  48. cursor: pointer;
  49. }
  50. .@{prefix}-notification .@{prefix}-progress {
  51. margin-right: 8px;
  52. }
  53. .@{prefix}-notification .@{prefix}-progress .@{prefix}-text {
  54. margin-top: 5px;
  55. }
  56. .@{prefix}-notification *, .@{prefix}-notification .@{prefix}-progress .@{prefix}-text {
  57. color: @notification-text;
  58. }
  59. .@{prefix}-notification .@{prefix}-progress .@{prefix}-bar-container {
  60. border-color: @notification-border;
  61. }
  62. .@{prefix}-notification .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
  63. background-color: @notification-text;
  64. }
  65. .@{prefix}-notification-success *, .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-text {
  66. color: @notification-success-text;
  67. }
  68. .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-bar-container {
  69. border-color: @notification-success-border;
  70. }
  71. .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
  72. background-color: @notification-success-text;
  73. }
  74. .@{prefix}-notification-info *, .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-text {
  75. color: @notification-info-text;
  76. }
  77. .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-bar-container {
  78. border-color: @notification-info-border;
  79. }
  80. .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
  81. background-color: @notification-info-text;
  82. }
  83. .@{prefix}-notification-warning *, .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-text {
  84. color: @notification-warning-text;
  85. }
  86. .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-bar-container {
  87. border-color: @notification-warning-border;
  88. }
  89. .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
  90. background-color: @notification-warning-text;
  91. }
  92. .@{prefix}-notification-error *, .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-text {
  93. color: @notification-error-text;
  94. }
  95. .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-bar-container {
  96. border-color: @notification-error-border;
  97. }
  98. .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
  99. background-color: @notification-error-text;
  100. }
  101. .@{prefix}-notification .@{prefix}-close {
  102. position: absolute;
  103. top: 6px;
  104. right: 8px;
  105. font-size: 20px;
  106. font-weight: bold;
  107. line-height: 20px;
  108. color: @window-head-close;
  109. cursor: pointer;
  110. // IE7
  111. height: 20px;
  112. overflow: hidden;
  113. }