Dotclear

source: admin/style/scss/partials/_messages.scss @ 3763:857d4768935c

Revision 3763:857d4768935c, 3.4 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Use sass variables for every color used (mainly foreground, background, border)

Line 
1.warn,
2.warning,
3.info {
4     font-style: normal;
5     padding: .2em .66em .2em;
6     text-indent: 24px;
7     display: inline-block;
8     line-height: 1.5em;
9     border-radius: 3px;
10}
11
12.info {
13  color: $msg-info-color;
14     background: $msg-info-background url(msg-info.png) no-repeat .3em .3em;
15     border: 1px solid $msg-info-border;
16}
17
18.warn,
19.warning {
20  color: $msg-warn-color;
21  background: $msg-warn-background url(msg-warning.png) no-repeat .3em .3em;
22  border: 1px solid $msg-warn-border;
23}
24
25div.warn,
26div.warning,
27div.info {
28     display: block;
29     padding: 1em 1em .33em 1em;
30     margin-bottom: 1em;
31}
32
33span.warn,
34span.warning,
35span.info {
36     padding-top: 1px;
37     padding-bottom: 1px;
38     background-position: .3em .2em;
39}
40
41.error,
42.message,
43.static-msg,
44.success,
45.warning-msg {
46     padding: 1em 0.5em 0.5em 48px;
47     margin-bottom: 1em;
48     border-radius: 8px;
49     box-shadow: 1px 1px 2px $msg-shadow;
50}
51
52p.error,
53p.message,
54p.static-msg,
55p.success,
56p.warning-msg {
57     padding-top: 1em;
58     padding-bottom: 1em;
59     margin-top: .5em;
60}
61
62.error {
63     background: $msg-error-background url(msg-error.png) no-repeat .7em .7em;
64     color: $msg-error-color;
65  animation-name: kf-error;
66  animation-duration: .5s;
67}
68@keyframes kf-error {
69  0% {
70    background-color: $msg-error-background-alt;
71  }
72  100% {
73    background-color: $msg-error-background;
74  }
75}
76
77.message,
78.static-msg {
79  color: $msg-color;
80     background: $msg-background url(msg-std.png) no-repeat .7em .7em;
81}
82.message {
83  animation-name: kf-message;
84  animation-duration: .5s;
85}
86@keyframes kf-message {
87  0% {
88    background-color: $msg-background-alt;
89  }
90  100% {
91    background-color: $msg-background;
92  }
93}
94
95.message a,
96.static-msg a,
97.message h3,
98.static-msg h3 {
99     color: $msg-color;
100}
101
102.success {
103     color: $msg-success-color;
104}
105
106.success {
107     background: $msg-success-background url(msg-success.png) no-repeat .7em .7em;
108  animation-name: kf-success;
109  animation-duration: .5s;
110}
111@keyframes kf-success {
112  0% {
113    background-color: $msg-success-background-alt;
114  }
115  100% {
116    background-color: $msg-success-background;
117  }
118}
119
120.warning-msg {
121  color: $msg-warn-color;
122     background: $msg-warn-background-alt url(msg-warning.png) no-repeat .7em .7em;
123     border: 1px solid $msg-warn-border;
124  animation-name: kf-warning;
125  animation-duration: .5s;
126}
127@keyframes kf-warning {
128  0% {
129    background-color: $msg-warn-background;
130  }
131  100% {
132    background-color: $msg-warn-background-alt;
133  }
134}
135
136.success a,
137.warning-msg a,
138.info a {
139     color: $msg-info-color;
140}
141
142.close-notice-parent {
143     display: flex;
144     justify-content: space-between;
145     ul, p + p {
146          flex: 1;
147     }
148     p + p {
149          padding-left: .25em;
150     }
151}
152.close-notice {
153     background: none;
154     border:   none;
155     border-radius: 0;
156     box-shadow: none;
157     padding-left: 1em;
158     &:hover, &:focus {
159          background: none;
160     }
161}
162
163.dc-update {
164     padding: 1em 48px 0.5em 48px;
165     margin-bottom: 1em;
166     border-radius: 8px;
167  color: $dc-update-color;
168     background: $dc-update-background url(msg-success.png) no-repeat .7em .7em;
169     box-shadow: 1px 1px 2px $msg-shadow;
170     h3 {
171          margin-top: 0;
172          color: $dc-update-color;
173     }
174     p {
175          display: inline-block;
176          vertical-align: middle;
177     }
178     a {
179          color: $dc-update-color;
180          margin-right: 1em;
181          &.button {
182               padding: .5em 1em;
183          }
184     }
185}
186
187.updt-info a {
188     margin-left: 2em;
189     border-color: $dc-update-color;
190     font-weight: bold;
191}
192
193body.ajax-loader {
194     #header {
195          border-bottom-color: $ajax-loader;
196          transition: border-bottom-color .3s ease;
197     }
198     #collapser {
199          background-color: $ajax-loader;
200          transition: background-color .3s ease;
201     }
202}
Note: See TracBrowser for help on using the repository browser.

Sites map