_messages.less 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. //
  6. // Variables
  7. // _____________________________________________
  8. @alert__font-size: @font-size__base;
  9. @alert__font-style: @font-style__base;
  10. @alert__font-weight: @font-weight__regular;
  11. @alert__color: @color-gray20;
  12. @alert__background-color: @color-lazy-sun;
  13. @alert__error__background-color: @color-pink;
  14. @alert__spinner__font-size: 2.5rem;
  15. //
  16. // Alert Icons
  17. // ---------------------------------------------
  18. @alert-icon__font-name: @icons-admin__font-name;
  19. @alert-icon__font-size: 1.9rem;
  20. @alert-icon__notice__content: @icon-info__content;
  21. @alert-icon__notice__color: @color-blue-pure;
  22. @alert-icon__warning__content: @icon-warning__content;
  23. @alert-icon__warning__color: @color-phoenix;
  24. @alert-icon__progress__content: @icon-refresh__content;
  25. @alert-icon__progress__color: @color-blue-dodger;
  26. @alert-icon__success__content: @icon-check-mage__content;
  27. @alert-icon__success__color: @color-green-apple;
  28. @alert-icon__error__content: @icon-error__content;
  29. @alert-icon__error__color: @color-tomato-brick;
  30. @alert-icon__error__font-size: 1.5rem;
  31. //
  32. // Messages
  33. // ---------------------------------------------
  34. .messages {
  35. .message {
  36. &:last-child {
  37. margin: 0 0 2rem;
  38. }
  39. }
  40. }
  41. .message {
  42. background: @alert__background-color;
  43. border: none;
  44. border-radius: 0;
  45. color: @alert__color;
  46. font-size: @alert__font-size;
  47. margin: 0 0 1px;
  48. padding: 1.8rem 4rem 1.8rem 5.5rem;
  49. position: relative;
  50. text-shadow: none;
  51. &:before {
  52. background: none;
  53. border: 0;
  54. color: @alert-icon__notice__color;
  55. content: @alert-icon__notice__content;
  56. font-family: @alert-icon__font-name;
  57. font-size: @alert-icon__font-size;
  58. font-style: @alert__font-style;
  59. font-weight: @alert__font-weight;
  60. height: auto;
  61. left: 1.9rem;
  62. line-height: inherit;
  63. position: absolute;
  64. speak: none;
  65. text-shadow: none;
  66. top: 50%;
  67. margin-top: -1.25rem;
  68. width: auto;
  69. }
  70. }
  71. .message-notice {
  72. &:before {
  73. color: @alert-icon__notice__color;
  74. content: @alert-icon__notice__content;
  75. }
  76. }
  77. .message-warning {
  78. &:before {
  79. color: @alert-icon__warning__color;
  80. content: @alert-icon__warning__content;
  81. }
  82. }
  83. .message-progress {
  84. &:before {
  85. color: @alert-icon__progress__color;
  86. content: @alert-icon__progress__content;
  87. }
  88. }
  89. .message-error {
  90. background: @alert__error__background-color;
  91. &:before {
  92. color: @alert-icon__error__color;
  93. content: @alert-icon__error__content;
  94. font-size: @alert-icon__error__font-size;
  95. left: 2.2rem;
  96. margin-top: -.9rem;
  97. }
  98. }
  99. .message-success {
  100. &:before {
  101. color: @alert-icon__success__color;
  102. content: @alert-icon__success__content;
  103. }
  104. }
  105. .message-spinner {
  106. &:before {
  107. display: none;
  108. }
  109. .spinner {
  110. font-size: @alert__spinner__font-size;
  111. left: 1.5rem;
  112. position: absolute;
  113. top: 1.5rem;
  114. }
  115. }
  116. .message-in-rating-edit {
  117. margin-left: 1.8rem;
  118. margin-right: 1.8rem;
  119. }