Dotclear

source: admin/style/scss/partials/_layout.scss @ 3355:5619cd4c8c5d

Revision 3355:5619cd4c8c5d, 10.7 KB checked in by franck <carnet.franck.paul@…>, 9 years ago (diff)

Switch admin CSS to Sass/Compass?, 1st step
Line 
1#dotclear-admin {
2    display: flex;
3    min-height: 100vh;
4    flex-direction: column;
5}
6
7#header {
8    background: $ternary-background;
9    color: $white;
10    border-bottom: 4px solid $light-blue;
11    width: 99.99%;
12    /* Bugfix Chrome >= 49.0.2623.108 */
13    display: table;
14    position: relative;
15}
16
17h1,
18#top-info-blog,
19#top-info-user {
20    display: table-cell;
21    padding: 8px 0;
22    margin: 0;
23    font-size: 1em;
24    vertical-align: top;
25}
26
27#wrapper {
28    position: relative;
29    padding-top: 1.5em;
30    float: left;
31    width: 100%;
32    z-index: 10;
33    background: $secondary-background url(bg_wrapper.png) repeat-y 14em;
34    flex: 1;
35}
36
37.with-js #wrapper {
38    padding-top: 0;
39}
40
41#main {
42    width: 100%;
43    float: right;
44    margin-left: -14em;
45    margin-top: 0;
46}
47
48#content {
49    margin: 0 0 0 14em;
50    padding: .5em 1.5em .75em 2.5em;
51    background: $white;
52}
53
54#main-menu {
55    width: 14em;
56    float: left;
57    margin: 0;
58    padding-top: .5em;
59    padding-bottom: 1em;
60    overflow: hidden;
61    background: $secondary-background;
62}
63
64#footer {
65    clear: both;
66    position: relative;
67    padding: .5em 0 .5em 1em;
68    text-align: left;
69    border-top: 1px solid $gray-light; // #ccc;
70    background-color: $white;
71}
72
73
74/* to hide main-menu */
75
76#collapser {
77    position: absolute;
78    top: 0;
79    left: 14em;
80    width: $collapser-width;
81    height: 100%;
82    overflow: hidden;
83    display: block;
84    background: $light-blue; // #f3f3f3 url(../images/collapser-hide.png) no-repeat center bottom;
85    border-right: 0; // 1px solid #999;
86    border-bottom: 0;
87    z-index: 1;
88    transition: none;
89}
90
91.expand-mm {
92    display: none;
93}
94
95
96/* if main-menu is hidden */
97
98#wrapper.hide-mm {
99    background: $white;
100}
101
102.hide-mm #main {
103    margin-left: 0;
104}
105
106.hide-mm #content {
107    margin-left: $collapser-width;
108}
109
110.hide-mm #content > h2 {
111    margin-left: calc(-1em - #{$collapser-width});
112}
113
114.hide-mm #main-menu {
115    display: none;
116}
117
118.hide-mm #collapser {
119    left: 0;
120    //    background: #e3e3e3 url(../images/collapser-show.png) no-repeat center bottom;
121}
122
123.hide-mm .collapse-mm {
124    display: none;
125}
126
127.hide-mm .expand-mm {
128    display: block;
129}
130
131
132/* -------------------------------------------------------------- layout: two-cols */
133
134.two-cols {
135    position: static;
136}
137
138.two-cols .col {
139    width: 48%;
140    margin-left: 2%;
141    float: left;
142}
143
144.two-cols .col70 {
145    width: 68%;
146    margin-left: 0;
147    float: left;
148}
149
150.col30 {
151    width: 28%;
152    margin-left: 2%;
153    float: left;
154}
155
156.two-cols .col:first-child,
157.two-cols .col30.first-col {
158    margin-left: 0;
159    margin-right: 2%;
160}
161
162.two-cols .col:last-child,
163.two-cols .col70.last-col {
164    margin-left: 2%;
165    margin-right: 0;
166}
167
168.two-cols table {
169    width: 90%;
170}
171
172
173/* -------------------------------------------------------------- layout: three-cols */
174
175.three-cols {
176    position: static;
177}
178
179.three-cols .col {
180    width: 32.3%;
181    float: left;
182    margin-left: 1%;
183}
184
185.three-cols .col:first-child {
186    margin-left: 0;
187}
188
189
190/* ------------------------------------------------- layout: optionnal one/two/three-boxes */
191
192.one-box {
193    text-align: justify;
194}
195
196.two-boxes {
197    width: 48.5%;
198}
199
200.three-boxes {
201    width: 30%;
202}
203
204.two-boxes,
205.three-boxes {
206    display: inline-block;
207    vertical-align: top;
208    margin: 0 1.5% 1em;
209    text-align: left;
210}
211
212.two-boxes:nth-of-type(odd),
213.three-boxes:nth-of-type(3n+1) {
214    margin-left: 0;
215}
216
217.two-boxes:nth-of-type(even),
218.three-boxes:nth-of-type(3n) {
219    margin-right: 0;
220}
221
222
223/* ---------------------------------------------------------------- layout: popups */
224
225.popup h1 {
226    display: block;
227    width: 100%;
228    margin: 0;
229    background: $ternary-background;
230    font-size: 1.5em;
231    text-indent: 1em;
232    line-height: 1.5em;
233    font-weight: normal;
234    color: $white;
235}
236
237.popup #wrapper {
238    display: block;
239    float: none;
240    width: 100%;
241    margin: 0;
242    padding: 0;
243    background-position: 0 0;
244}
245
246.popup #main {
247    margin: 0;
248    padding: 0;
249}
250
251.popup #content {
252    margin: 0;
253    padding: 1em;
254}
255
256.popup #content h2 {
257    margin: 0 0 1em 0;
258    padding: 0;
259}
260
261.popup #footer p {
262    border: none;
263}
264
265
266/* -------------------------------------------------------- layout: classes de complément */
267
268.constrained {
269    margin: 0;
270    padding: 0;
271    border: none;
272    background: transparent;
273}
274
275.table {
276    display: table;
277}
278
279.cell {
280    display: table-cell;
281    vertical-align: top;
282}
283
284.clear {
285    clear: both;
286}
287
288.lclear {
289    clear: left;
290}
291
292.clearer {
293    height: 1px;
294    font-size: 1px;
295}
296
297
298/* Micro clearfix thx to Nicolas Gallagher */
299
300.clearfix:before,
301.clearfix:after {
302    content: " ";
303    display: table;
304}
305
306.clearfix:after {
307    clear: both;
308}
309
310
311/*
312.frame-shrink {
313     border: 1px solid #676e78;
314     padding: 0.5em;
315     margin-bottom: 1em;
316     height: 120px;
317     overflow: auto;
318     }
319 */
320
321.box {
322    display: inline-block;
323    vertical-align: top;
324    margin: 0 10px 10px;
325    text-align: left;
326}
327
328.box.small {
329    width: 312px;
330}
331
332.box.medium {
333    width: 644px;
334}
335
336.box.large {
337    width: 100%;
338}
339
340.odd {
341    margin-left: 0;
342}
343
344.even {
345    margin-right: 0;
346}
347
348
349/* ------------------------------------------------------------------------------------
350                                                                           UN POIL DE MEDIA QUERIES
351------------------------------------------------------------------------------------ */
352
353@media screen and (min-width: $xl-screen) {
354    #wrapper {
355        background: $secondary-background url(bg_wrapper.png) repeat-y 17em;
356    }
357    #main {
358        margin-left: -17em;
359    }
360    #content {
361        margin: 0 0 0 17em;
362    }
363    #main-menu {
364        width: 17em;
365    }
366    #collapser {
367        left: 17em;
368    }
369    h1 {
370        width: 19.5em;
371    }
372}
373
374@media screen and (max-width: $l-screen) {
375    #top-info-blog #switchblog {
376        max-width: 16em;
377    }
378    #top-info-blog a {
379        margin-left: 2em;
380    }
381    #header {
382        display: block;
383        width: 100%;
384        text-align: right;
385        background: $gray-very-dark;
386    }
387    #header h1,
388    #header h1 a {
389        width: 120px;
390        padding: 0;
391        margin: 0;
392    }
393    h1,
394    #top-info-blog {
395        display: inline-block;
396        vertical-align: top;
397        margin-right: 1em;
398    }
399    #top-info-user {
400        display: block;
401        width: 100%;
402        background: $ternary-background;
403        padding-right: 0;
404    }
405    #top-info-user li:last-child {
406        padding-right: 1em;
407    }
408    #top-info-user a.active {
409        padding: 2px 8px;
410        background: #999;
411        color: #FFF;
412        border-width: 0;
413        border-radius: 6px;
414    }
415    .three-boxes,
416    .three-boxes .box,
417    .two-cols .col70,
418    .two-cols .col30 {
419        width: 100%;
420        margin-left: 0;
421        margin-right: 0;
422    }
423}
424
425@media screen and (max-width: $m-screen) {
426    #dashboard-boxes .box.medium,
427    .box.medium,
428    #dashboard-boxes .box.small,
429    .box.small,
430    #dashboard-boxes .box.large,
431    .box.large {
432        width: 95%;
433        margin: 10px auto;
434    }
435}
436
437@media screen and (max-width: $s-screen) {
438    #help-button {
439        height: 26px;
440        width: 26px;
441        background-color: $light-blue;
442        padding: 0;
443        margin: 0;
444        font-size: .83em;
445        line-height: 68px;
446        overflow: hidden;
447    }
448    #content.with-help #help-button {
449        top: 10em; // 77px;
450    }
451    .one-box,
452    .two-boxes,
453    .box,
454    .two-cols .col {
455        width: 96%;
456        margin-left: 0;
457        margin-right: 0;
458    }
459    #entry-wrapper {
460        float: none;
461        width: 100%;
462        margin-right: 0;
463    }
464    #entry-content {
465        margin-right: 0;
466        margin-left: 0;
467    }
468    #entry-sidebar {
469        width: 100%;
470        float: none;
471    }
472}
473
474@media screen and (max-width: $xs-screen) {
475    #header h1,
476    #header h1 a {
477        width: 42px !important;
478        height: 42px;
479    }
480    h1 a:link {
481        background: transparent url(dc_logos/b-dotclear120.png) no-repeat -270px 6px;
482        border-right: 1px solid $gray-light;
483    }
484    h1 a:hover,
485    h1 a:focus {
486        background: url(dc_logos/b-dotclear120.png) no-repeat -270px -94px;
487        border-right: 1px solid $light-blue;
488    }
489    #wrapper,
490    #main,
491    #main-menu {
492        display: block;
493        float: none;
494        width: 100%;
495        margin: 0;
496    }
497    #dashboard-main {
498        padding: 0;
499    }
500    #main-menu a {
501        display: block;
502        width: 100%;
503    }
504    #main-menu h3 a {
505        display: inline;
506    }
507    #content,
508    .hide-mm #content {
509        margin: 0;
510        padding: 0 .5em !important;
511    }
512    #collapser {
513        display: none;
514    }
515    #main #content > h2 {
516        margin: 0 -.25em 1em;
517        padding: 6px 30px 4px .5em;
518    }
519    #dashboard-boxes .box.medium,
520    .box.medium,
521    #dashboard-boxes .box.small,
522    .box.small,
523    #dashboard-boxes .box.large,
524    .box.large {
525        width: 95%;
526        margin: 10px auto;
527    }
528    .cell,
529    #filters-form .cell {
530        display: inline-block;
531        border: none;
532        padding: 1em;
533        vertical-align: bottom;
534    }
535    .pseudo-tabs li {
536        display: block;
537        float: left;
538        width: 50%;
539        border-top: 1px solid #ddd;
540        padding: .25em;
541    }
542    .pseudo-tabs li:first-child,
543    .pseudo-tabs li:nth-of-type(2) {
544        border-top: none;
545    }
546}
547
548@media screen and (max-width: $xxs-screen) {
549    h1,
550    h1 a {
551        padding: 0;
552        border-right: $gray-very-dark !important;
553    }
554    #top-info-blog label,
555    .nomobile {
556        display: none;
557    }
558    #top-info-blog {
559        margin-bottom: .5em;
560        max-width: 75%;
561    }
562    #top-info-blog select {
563        margin-bottom: .5em;
564    }
565    #content.with-help #help-button {
566        top: 10em; // 120px;
567        right: 28rem; // 20.5em;
568    }
569    #content.with-help #help {
570        width: 28rem;
571        font-size: 1.2rem // 12px;
572    }
573    p.top-add {
574        margin-bottom: .5em;
575        text-align: center;
576    }
577    .multi-part {
578        padding-left: 0;
579    }
580    .part-tabs ul {
581        margin: 1em 0;
582        padding: 0 .5em;
583    }
584    .part-tabs li a {
585        display: block;
586        width: 100%;
587    }
588    #icons p {
589        width: 9em;
590        padding: 1em .25em;
591    }
592    .media-item {
593        width: 90%;
594    }
595    #theme-new,
596    #theme-activate,
597    #theme-deactivate {
598        margin-left: 0;
599        margin-right: 0;
600    }
601    .box.current-theme {
602        margin: 5px;
603        padding: 10px;
604        width: 100%;
605    }
606    .current-theme .module-sshot img {
607        margin: 0;
608        float: none;
609        max-width: 100%;
610    }
611    table .maximal {
612        min-width: 14em;
613    }
614    th,
615    td {
616        padding: 0.3em 1em 0.3em 0;
617    }
618    .pseudo-tabs li {
619        display: block;
620        width: 100%;
621        float: none;
622        border-top: 1px solid #ddd !important;
623    }
624    .pseudo-tabs li:first-child {
625        border-top: none;
626    }
627}
Note: See TracBrowser for help on using the repository browser.

Sites map