Dotclear

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

Revision 3763:857d4768935c, 5.0 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/* jQuery Autocomplete plugin */
2
3.ac_results {
4     padding: 0px;
5     background-color: $ac-results-background;
6  border: 1px dotted $ac-results-border;
7     overflow: hidden;
8     z-index: 99999;
9     ul {
10          width: 100%;
11          list-style-position: outside;
12          list-style: none;
13          padding: 0;
14          margin: 0;
15     }
16     li {
17          margin: 0px;
18          padding: 2px 5px;
19          cursor: default;
20          display: block;
21          font-size: 1em;
22          line-height: 16px;
23          overflow: hidden;
24     }
25}
26
27.ac_loading {
28     background: transparent url('loader.gif') right center no-repeat;
29}
30
31.ac_over {
32  color: $ac-results-over;
33  background-color: $ac-results-over-background;
34}
35
36
37/* password indicator */
38
39.pw-table {
40     display: table;
41     margin-bottom: 1em;
42}
43
44.pw-cell {
45     display: table-cell;
46     margin-bottom: 1em;
47}
48
49#pwindicator {
50     display: table-cell;
51     vertical-align: bottom;
52     padding-left: 1.5em;
53     height: 3.8em;
54     .bar {
55          height: 6px;
56          margin-bottom: 4px;
57     }
58}
59
60.pw-very-weak .bar {
61     background: $pw-very-weak;
62     width: 30px;
63}
64
65.pw-weak .bar {
66     background: $pw-weak;
67     width: 60px;
68}
69
70.pw-mediocre .bar {
71     background: $pw-mediocre;
72     width: 90px;
73}
74
75.pw-strong .bar {
76     background: $pw-strong;
77     width: 120px;
78}
79
80.pw-very-strong .bar {
81     background: $pw-very-strong;
82     width: 150px;
83}
84
85
86/* ------------------------------------------------------------------ navigation */
87
88
89/* selects accès rapide */
90
91.anchor-nav {
92     background: $nav-background;
93     padding: 4px 1em;
94     label {
95          vertical-align: bottom;
96     }
97}
98
99
100/* nav links */
101
102.nav_prevnext {
103     margin-bottom: 2em;
104     color: $nav-background;
105}
106
107.nav_prevnext a,
108a.back {
109     color: $nav-prevnext;
110     border: 1px solid $nav-prevnext-border;
111     padding: 2px 1.5em;
112     border-radius: .75em;
113     background-color: $nav-prevnext-background;
114}
115
116a.back:before {
117     content: "\ab\a0";
118}
119
120a.onblog_link {
121     color: $onblog-link;
122     float: right;
123     border: 1px solid $onblog-link-border;
124     padding: 2px 1.5em;
125     border-radius: .75em;
126     background-color: $onblog-link-background;
127     box-shadow: 0 1px 1px $onblog-link-shadow;
128}
129
130
131/* Pagination */
132
133.pager {
134     margin: 2em 0 1em 0;
135     clear: left;
136     ul {
137          list-style-type: none;
138          margin: 0;
139          padding: 0;
140     }
141     li,
142     input {
143          display: inline-block;
144          vertical-align: middle;
145          margin: 0 .33em 0 0;
146          padding: 0;
147          text-align: center;
148     }
149     .btn {
150          border: 1px solid $pager-border;
151          background-color: $pager-background;
152          color: $pager-link;
153          border-radius: 3px;
154          overflow: hidden;
155          &.no-link {
156               border-color: $pager-border;
157               background-color: $pager-off-background;
158               padding: 1px 3px 0;
159          }
160     }
161     .active {
162          padding: 4px 12px;
163          color: $pager-active;
164     }
165     .direct-access {
166          margin-left: 2em;
167          input[type=text] {
168               border: 1px solid $pager-border;
169               padding: 3px 8px;
170               margin-left: .25em;
171               background-color: $pager-input-background;
172          }
173          input[type=submit] {
174               padding: 3px 6px;
175          }
176     }
177     a {
178          display: block;
179          padding: 1px 3px 0;
180          border: none;
181          &:hover,
182          &:focus {
183               background-color: $pager-background-over;
184          }
185     }
186}
187
188.index {
189     .btn.no-link,
190     a {
191          padding: 2px 8px 3px;
192          font-variant: small-caps;
193     }
194     li {
195          margin-bottom: 3px;
196     }
197     a {
198          font-weight: bold;
199     }
200     .btn.no-link {
201          color: $index-no-link;
202     }
203     .active {
204          padding: 4px 8px;
205          color: $index-active;
206          background: $index-active-background;
207          border-radius: 3px;
208          font-variant: small-caps;
209     }
210}
211
212
213/* Etapes */
214
215.step {
216     display: inline-block;
217     float: left;
218     margin: 3px 10px 2px 0;
219     padding: 5px .5em;
220  color: $step;
221     background: $step-background;
222  border: 1px solid $step-border;
223     border-radius: 3px;
224     font-weight: bold;
225}
226
227
228/* ---------------------------------------------------------------- utilisables partout  */
229
230.legible {
231     font-size: 1.16em;
232     max-width: 62em;
233}
234
235.fieldset {
236     background: $fieldset-background;
237     border: 1px solid $fieldset-border;
238     border-radius: 3px;
239     padding: 1em .7em .5em;
240     margin-bottom: 1em;
241     h3 {
242          margin-top: 0;
243     }
244     &:focus-within {
245          background-color: $fieldset-focus-background;
246     }
247}
248
249.right,
250.txt-right {
251     text-align: right;
252}
253
254.txt-center {
255     text-align: center;
256}
257
258.txt-left {
259     text-align: left;
260}
261
262.no-margin,
263label.no-margin {
264     margin-top: 0;
265     margin-bottom: 0;
266}
267
268.vertical-separator {
269     margin-top: 2em;
270}
271
272p.clear.vertical-separator {
273     padding-top: 2em;
274}
275
276.border-top {
277     border-top: 1px solid $link-border;
278     padding-top: 1em;
279     margin-top: 1em;
280}
281
282.grid {
283     background: transparent repeat url('grid.png') 0 0;
284}
285
286ul.nice {
287     margin: 1em 0;
288     padding: 0 0 0 2em;
289     list-style: square;
290     li {
291          margin: 0;
292          padding: 0;
293     }
294}
295
296ul.from-left {
297     list-style-type: none;
298     padding-left: 0;
299     margin: 1em 0;
300     > li {
301          margin-top: 1em;
302          margin-bottom: 1em;
303     }
304     ul {
305          list-style-type: square;
306     }
307}
308
309.offline {
310     color: $offline;
311}
312
313
314/* caché pour tout le monde */
315
316.hide,
317.button.hide {
318     display: none !important;
319}
320
321
322/* Caché sauf pour les revues d'écran */
323
324.hidden,
325.with-js .out-of-screen-if-js {
326     position: absolute !important;
327     clip: rect(1px 1px 1px 1px);
328     /* IE6, IE7 */
329     clip: rect(1px, 1px, 1px, 1px);
330     padding: 0 !important;
331     border: 0 !important;
332     height: 1px !important;
333     width: 1px !important;
334     overflow: hidden;
335}
336
337
338/* caché si js est inactif */
339
340.no-js .hidden-if-no-js {
341     display: none;
342}
343
344
345/* caché si js est actif */
346
347.with-js .hidden-if-js {
348     display: none;
349}
Note: See TracBrowser for help on using the repository browser.

Sites map