Dotclear

source: admin/style/scss/partials/_messages.scss @ 3685:3f1bacac1ac3

Revision 3685:3f1bacac1ac3, 3.1 KB checked in by franck <carnet.franck.paul@…>, 8 years ago (diff)

Switch from jQuery background fade plugin to CSS3 animation (plugin removed from distribution)

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

Sites map