You are here

messages.css in AT Tools 8

@charset "UTF-8";
/**
 * Messages
 * Style system messages such as status, warning and error.
 * Colors are kept here, we don't want these to shift in color module.
 ============================================================================ */
.messages {
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 16px;
  padding: 1rem;
  margin: 26px 0;
  margin: 1.625rem 0;
  border: 1px solid;
  border-radius: 2px;
}
.messages + .messages {
  margin-top: 18px;
  margin-top: 6px;
  margin-top: 0.375rem;
}
.messages .container {
  box-sizing: border-box;
}

.messages__list {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.messages__list + .messages__item {
  margin-top: 6px;
  margin-top: 0.375rem;
}
.messages__list .item-list ul {
  margin: 18px 0;
  margin: 1.125rem 0;
}
.messages__list .item-list ul li {
  list-style: square;
}

.messages--status,
table tr.ok {
  background-color: #f3faef;
}

.messages--status,
.ok {
  color: #325e1c;
  border-color: #c9e1bd;
}

.messages--warning,
table tr.warning {
  background-color: #fdf8ed;
}

.messages--warning,
.warning {
  color: #734c00;
  border-color: #f4daa6;
}

.messages--error,
table tr.error {
  background-color: #fcf4f2;
}

.messages--error,
.error {
  color: #a51b00;
  border-color: #f9c9bf;
}

.messages--status,
.messages--warning,
.messages--error {
  background-image: none;
}

[dir="rtl"] .messages {
  text-align: right;
}

.messages .icon:before {
  font-family: FontAwesome, sans-serif;
  float: left;
  vertical-align: top;
  padding: 0 11px 0 0;
  padding: 0 0.6875rem 0 0;
  display: none;
}
.fa-loaded .messages .icon:before {
  display: block;
}

[dir="rtl"] .messages .icon:before {
  padding: 0 0 0 11px;
  padding: 0 0 0 0.6875rem;
  float: right;
}

.icon-status:before {
  content: "";
}

.icon-warning:before {
  content: "";
}

.icon-error:before {
  content: "";
}

/*# sourceMappingURL=maps/messages.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/messages.css
View source
  1. @charset "UTF-8";
  2. /**
  3. * Messages
  4. * Style system messages such as status, warning and error.
  5. * Colors are kept here, we don't want these to shift in color module.
  6. ============================================================================ */
  7. .messages {
  8. word-wrap: break-word;
  9. overflow-wrap: break-word;
  10. padding: 16px;
  11. padding: 1rem;
  12. margin: 26px 0;
  13. margin: 1.625rem 0;
  14. border: 1px solid;
  15. border-radius: 2px;
  16. }
  17. .messages + .messages {
  18. margin-top: 18px;
  19. margin-top: 6px;
  20. margin-top: 0.375rem;
  21. }
  22. .messages .container {
  23. box-sizing: border-box;
  24. }
  25. .messages__list {
  26. list-style: none;
  27. overflow: hidden;
  28. padding: 0;
  29. margin: 0;
  30. }
  31. .messages__list + .messages__item {
  32. margin-top: 6px;
  33. margin-top: 0.375rem;
  34. }
  35. .messages__list .item-list ul {
  36. margin: 18px 0;
  37. margin: 1.125rem 0;
  38. }
  39. .messages__list .item-list ul li {
  40. list-style: square;
  41. }
  42. .messages--status,
  43. table tr.ok {
  44. background-color: #f3faef;
  45. }
  46. .messages--status,
  47. .ok {
  48. color: #325e1c;
  49. border-color: #c9e1bd;
  50. }
  51. .messages--warning,
  52. table tr.warning {
  53. background-color: #fdf8ed;
  54. }
  55. .messages--warning,
  56. .warning {
  57. color: #734c00;
  58. border-color: #f4daa6;
  59. }
  60. .messages--error,
  61. table tr.error {
  62. background-color: #fcf4f2;
  63. }
  64. .messages--error,
  65. .error {
  66. color: #a51b00;
  67. border-color: #f9c9bf;
  68. }
  69. .messages--status,
  70. .messages--warning,
  71. .messages--error {
  72. background-image: none;
  73. }
  74. [dir="rtl"] .messages {
  75. text-align: right;
  76. }
  77. .messages .icon:before {
  78. font-family: FontAwesome, sans-serif;
  79. float: left;
  80. vertical-align: top;
  81. padding: 0 11px 0 0;
  82. padding: 0 0.6875rem 0 0;
  83. display: none;
  84. }
  85. .fa-loaded .messages .icon:before {
  86. display: block;
  87. }
  88. [dir="rtl"] .messages .icon:before {
  89. padding: 0 0 0 11px;
  90. padding: 0 0 0 0.6875rem;
  91. float: right;
  92. }
  93. .icon-status:before {
  94. content: "";
  95. }
  96. .icon-warning:before {
  97. content: "";
  98. }
  99. .icon-error:before {
  100. content: "";
  101. }
  102. /*# sourceMappingURL=maps/messages.css.map */