UNPKG

3.14 kBtext/lessView Raw
1@import (reference) './imports/global';
2
3aui-message {
4 display: block;
5}
6
7.aui-message {
8 --aui-message-icolor: var(--aui-message-info-icon-color);
9 --aui-message-ig: @aui-glyph-info-circle;
10 --aui-message-isize: @aui-icon-size-small;
11 --aui-message-padding: 15px;
12 --aui-message-gutter: calc(var(--aui-message-padding) * 2 + 10px);
13
14 // Make the message iconic ;)
15 #aui-message.icon-bar(var(--aui-message-ig), var(--aui-message-icolor, inherit));
16
17 // The message's base CSS rules
18 & {
19 background: var(--aui-message-info-bg-color);
20 border-radius: @aui-message-border-radius;
21 color: var(--aui-message-info-text-color, var(--aui-body-text));
22 line-height: @aui-message-line-height;
23 overflow-wrap: break-word;
24 padding: var(--aui-message-padding);
25 padding-left: var(--aui-message-gutter);
26 position: relative;
27 word-wrap: break-word;
28 word-break: normal;
29 }
30
31 &:first-child {
32 margin-top: 0;
33 }
34
35 &.closeable {
36 padding-right: var(--aui-message-gutter);
37
38 .aui-close-button {
39 position: absolute;
40 right: var(--aui-message-padding);
41 top: var(--aui-message-padding);
42 }
43 }
44}
45
46aui-message, .aui-message {
47 margin: (@aui-grid*2) 0 0 0;
48
49 &:first-child {
50 margin-top: 0;
51 }
52}
53
54.aui-message-error {
55 --aui-message-icolor: var(--aui-message-error-icon-color);
56 --aui-message-ig: @aui-glyph-exclamation-circle;
57 background-color: var(--aui-message-error-bg-color);
58 color: var(--aui-message-error-text-color);
59}
60
61.aui-message-warning {
62 --aui-message-icolor: var(--aui-message-warning-icon-color);
63 --aui-message-ig: @aui-glyph-exclamation-triangle;
64 background-color: var(--aui-message-warning-bg-color);
65 color: var(--aui-message-warning-text-color);
66}
67
68.aui-message-success,
69.aui-message-confirmation {
70 --aui-message-icolor: var(--aui-message-success-icon-color);
71 --aui-message-ig: @aui-glyph-check-circle;
72 background-color: var(--aui-message-success-bg-color);
73 color: var(--aui-message-success-text-color);
74}
75
76.aui-message-change {
77 --aui-message-icolor: var(--aui-message-change-icon-color);
78 --aui-message-ig: @aui-glyph-question-circle;
79 background-color: var(--aui-message-change-bg-color);
80 color: var(--aui-message-change-text-color);
81}
82
83/* Message titles */
84.aui-message p.title {
85 font-weight: bold;
86}
87
88/* IE double bolds otherwise... */
89.aui-message p.title strong {
90 font-weight: inherit;
91}
92
93// Footer interop (provisional, just enough to stop them looking broken)
94#footer .aui-message {
95 margin-left: 20px;
96 margin-right: 20px;
97 text-align: left;
98}
99
100// Better interop of links and focus styles
101// for non-flag messages
102:not(.aui-flag) > .aui-message {
103 // AUI-5192: currentColor is quoted to work around Edge 18 bug.
104 --aui-link-color: 'currentColor';
105 --aui-link-hover-color: 'currentColor';
106 --aui-link-active-color: 'currentColor';
107 --aui-link-decoration: underline;
108 --aui-link-hover-decoration: double underline;
109 --aui-focus: currentcolor;
110}