f9f02f05b416b39986398516625aee300bc27885
[moodle.git] / theme / boost / scss / moodle / filemanager.scss
1 // File Picker and File Manager
2 .fp-content-center {
3     height: 100%;
4     width: 100%;
5     display: table-cell;
6     vertical-align: middle;
7 }
9 .fp-content-hidden {
10     visibility: hidden;
11 }
12 // Dialogue (File Picker and File Manager)
13 .yui3-panel-focused {
14     outline: none;
15 }
17 .fp-panel-button {
18     background: #fff;
19     padding: 3px 20px 2px 20px;
20     text-align: center;
21     margin: 10px;
23     @include border-radius(10px);
24     display: inline-block;
26     @include box-shadow(2px 2px 3px .1px #999);
27 }
29 // File Picker layout
30 .filepicker .yui3-widget-content-expanded {
31     height: auto;
32 }
34 /* The javascript is adding a style="height: 0px;" to this element - we need to set the min-height so the height is ignored. */
35 .filepicker .moodle-dialogue-bd {
36     min-height: 520px;
37 }
38 .file-picker .fp-navbar {
39     border-bottom: 1px solid #e5e5e5;
40     min-height: 40px;
41     padding: 4px;
42 }
44 .file-picker .fp-content {
45     border-top: 0;
46     background: #fff;
47     clear: none;
48     overflow: auto;
49     height: 452px;
50 }
52 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
53     width: 100%;
54 }
56 .file-picker .fp-content-loading {
57     height: 100%;
58     width: 100%;
59     display: table;
60     text-align: center;
61 }
63 .file-picker .fp-content .fp-object-container {
64     width: 98%;
65     height: 98%;
66 }
67 .file-picker .fp-def-search {
68     margin-top: 0;
69 }
70 // Repositories on fp-repo-area (File Picker only)
71 .file-picker .fp-list {
72     list-style-type: none;
73     padding: 0;
74     float: left;
75     width: 100%;
76     margin: 0;
77 }
79 .file-picker .fp-list .fp-repo a {
80     display: block;
81     padding: .5em .7em;
82 }
84 .file-picker .fp-list .fp-repo.active {
85     background: #f2f2f2;
86 }
88 .file-picker .fp-list .fp-repo-icon {
89     padding: 0 7px 0 5px;
90     width: 16px;
91     height: 16px;
92 }
93 // Tools, Path & View on fp-navbar (File Picker and File Manager)
94 .fp-toolbar {
95     float: left;
96 }
98 .fp-toolbar.empty {
99     display: none;
102 .fp-toolbar .disabled {
103     display: none;
106 .fp-toolbar div {
107     display: block;
108     float: left;
109     margin-right: 4px;
112 .fp-toolbar img {
113     vertical-align: -15%;
114     margin-right: 5px;
117 .fp-viewbar:not(.disabled) a.checked {
118     @extend .btn-secondary.active;
121 .fp-viewbar.disabled a {
122     @extend .btn.disabled;
123     @extend .btn-secondary.disabled;
126 .file-picker .fp-clear-left {
127     clear: left;
130 .fp-pathbar.empty {
131     display: none;
134 .fp-pathbar .fp-path-folder {
135     background: url('[[pix:theme|fp/path_folder]]') 0 3px no-repeat;
136     height: 12px;
137     margin-left: 4px;
140 /*rtl:raw:
141 .fp-pathbar .fp-path-folder {
142     background-image: url('[[pix:theme|fp/path_folder_rtl]]');
144 */
146 .fp-pathbar .fp-path-folder-name {
147     margin-left: 32px;
149 // Icon view (File Picker and File Manager)
150 .fp-iconview .fp-file {
151     float: left;
152     text-align: center;
153     position: relative;
154     margin: 10px 10px 35px;
157 .fp-iconview .fp-thumbnail {
158     min-width: 110px;
159     min-height: 110px;
160     line-height: 110px;
161     text-align: center;
162     border: 1px solid #fff;
163     display: block;
166 .fp-iconview .fp-thumbnail img {
167     border: 1px solid #ddd;
168     padding: 3px;
169     vertical-align: middle;
171     @include box-shadow(1px 1px 2px 0 #ccc);
174 .fp-iconview .fp-thumbnail:hover {
175     background: #fff;
176     border: 1px solid #ddd;
178     @include box-shadow(inset 0 0 10px0 #ccc);
181 .fp-iconview .fp-filename-field {
182     height: 33px;
183     word-wrap: break-word;
184     overflow: hidden;
185     position: absolute;
188 .fp-iconview .fp-filename-field:hover {
189     overflow: visible;
190     z-index: 1000;
193 .fp-iconview .fp-filename-field .fp-filename {
194     background: #fff;
195     padding-top: 5px;
196     padding-bottom: 12px;
197     min-width: 112px;
199 // Table view (File Picker only)
200 .file-picker .yui3-datatable table {
201     border: 0 solid #bbb;
202     width: 100%;
204 // Tree view (File Manager only)
206 // first or middle sibling, no children
207 .file-picker .ygtvtn,
208 .filemanager .ygtvtn {
209     /*rtl:remove*/
210     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
211     /*rtl:raw:
212     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
213     */
214     width: 19px;
215     height: 32px;
217 // first or middle sibling, collapsable
218 .file-picker .ygtvtm,
219 .filemanager .ygtvtm {
220     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
221     /*rtl:raw:
222         background-position: 2px 10px;
223     */
224     width: 13px;
225     height: 12px;
226     cursor: pointer;
228 // first or middle sibling, collapsable, hover
229 .file-picker .ygtvtmh,
230 .filemanager .ygtvtmh {
231     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
232     /*rtl:raw:
233         background-position: 2px 10px;
234     */
235     width: 13px;
236     height: 12px;
237     cursor: pointer;
239 // first or middle sibling, expandable
240 .file-picker .ygtvtp,
241 .filemanager .ygtvtp {
242     /*rtl:remove*/
243     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
244     /*rtl:raw:
245     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
246     */
247     width: 13px;
248     height: 12px;
249     cursor: pointer;
251 // first or middle sibling, expandable, hover
252 .file-picker .ygtvtph,
253 .filemanager .ygtvtph {
254     /*rtl:remove*/
255     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
256     /*rtl:raw:
257     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
258     */
259     width: 13px;
260     height: 22px;
261     cursor: pointer;
263 // last sibling, no children
264 .file-picker .ygtvln,
265 .filemanager .ygtvln {
266     /*rtl:remove*/
267     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
268     /*rtl:raw:
269     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
270     */
271     width: 19px;
272     height: 32px;
274 // Last sibling, collapsable
275 .file-picker .ygtvlm,
276 .filemanager .ygtvlm {
277     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
278     /*rtl:raw:
279         background-position: 2px 10px;
280     */
281     width: 13px;
282     height: 12px;
283     cursor: pointer;
285 // Last sibling, collapsable, hover
286 .file-picker .ygtvlmh,
287 .filemanager .ygtvlmh {
288     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
289     /*rtl:raw:
290         background-position: 2px 10px;
291     */
292     width: 13px;
293     height: 12px;
294     cursor: pointer;
296 // Last sibling, expandable
297 .file-picker .ygtvlp,
298 .filemanager .ygtvlp {
299     /*rtl:remove*/
300     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
301     /*rtl:raw:
302     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
303     */
304     width: 13px;
305     height: 12px;
306     cursor: pointer;
308 // Last sibling, expandable, hover
309 .file-picker .ygtvlph,
310 .filemanager .ygtvlph {
311     /*rtl:remove*/
312     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
313     /*rtl:raw:
314     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
315     */
316     width: 13px;
317     height: 12px;
318     cursor: pointer;
320 // Loading icon
321 .file-picker .ygtvloading,
322 .filemanager .ygtvloading {
323     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
324     width: 16px;
325     height: 22px;
327 // the style for the empty cells that are used for rendering the depth of the node
328 .file-picker .ygtvdepthcell,
329 .filemanager .ygtvdepthcell {
330     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
331     /*rtl:raw:
332     background-position: 0 0;
333     */
334     width: 17px;
335     height: 32px;
338 .file-picker .ygtvblankdepthcell,
339 .filemanager .ygtvblankdepthcell {
340     width: 17px;
341     height: 22px;
344 a.ygtvspacer:hover {
345     color: transparent;
346     text-decoration: none;
349 .ygtvlabel,
350 .ygtvlabel:link,
351 .ygtvlabel:visited,
352 .ygtvlabel:hover {
353     background-color: transparent;
354     cursor: pointer;
355     margin-left: 2px;
356     text-decoration: none;
359 .file-picker .ygtvfocus,
360 .filemanager .ygtvfocus {
361     background-color: #eee;
364 .fp-filename-icon {
365     margin-top: 10px;
366     display: block;
367     position: relative;
370 .fp-icon {
371     float: left;
372     margin-top: -7px;
373     width: 24px;
374     height: 24px;
375     margin-right: 10px;
376     text-align: center;
377     line-height: 24px;
380 .fp-icon img {
381     max-height: 24px;
382     max-width: 24px;
383     vertical-align: middle;
386 .fp-filename {
387     padding-right: 10px;
389 // Repositories Login on fp-content (File Picker only)
391 .file-picker .fp-login-form {
392     height: 100%;
393     width: 100%;
394     display: table;
396 // Upload on fp-content (File Picker only)
397 .file-picker .fp-upload-form {
398     height: 100%;
399     width: 100%;
400     display: table;
403 .file-picker .fp-upload-form table {
404     margin: 0 auto;
406 // File exists dialogue on Upload (File Picker only)
407 .file-picker.fp-dlg {
408     text-align: center;
411 .file-picker.fp-dlg .fp-dlg-buttons {
412     margin: 0 20px;
414 // Error dialogue on Upload (File Picker only)
415 .file-picker.fp-msg {
416     text-align: center;
418 // Error on fp-content (File Picker only)
419 .file-picker .fp-content-error {
420     height: 100%;
421     width: 100%;
422     display: table;
423     text-align: center;
425 // Lazy loading on fp-content (File Picker only)
426 .file-picker .fp-nextpage {
427     clear: both;
430 .file-picker .fp-nextpage .fp-nextpage-loading {
431     display: none;
434 .file-picker .fp-nextpage.loading .fp-nextpage-link {
435     display: none;
438 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
439     display: block;
440     text-align: center;
441     height: 100px;
442     padding-top: 50px;
444 // Select Dialogue (File Picker and File Manager)
445 .fp-select .fp-select-loading {
446     text-align: center;
447     margin-top: 20px;
450 .fp-select table {
451     padding: 0 0 10px;
454 .fp-select table .mdl-right {
455     min-width: 84px;
458 .fp-select .fp-reflist .mdl-right {
459     vertical-align: top;
462 .fp-select .fp-select-buttons {
463     float: right;
466 .fp-select .fp-info {
467     font-size: $font-size-xs;
470 .fp-select .fp-thumbnail {
471     float: left;
472     min-width: 110px;
473     min-height: 110px;
474     line-height: 110px;
475     text-align: center;
476     margin: 10px 20px 0 0;
477     background: #fff;
478     border: 1px solid #ddd;
480     @include box-shadow(inset 0 0 10px 0 #ccc);
483 .fp-select .fp-thumbnail img {
484     border: 1px solid #ddd;
485     padding: 3px;
486     vertical-align: middle;
487     margin: 10px;
490 .fp-select .fp-fileinfo {
491     display: inline-block;
492     margin-top: 10px;
495 .file-picker.fp-select .fp-fileinfo {
496     max-width: 240px;
499 .fp-select .fp-fileinfo div {
500     padding-bottom: 5px;
503 .file-picker.fp-select .uneditable {
504     display: none;
507 .file-picker.fp-select .fp-select-loading {
508     display: none;
511 .file-picker.fp-select.loading .fp-select-loading {
512     display: block;
515 .file-picker.fp-select.loading form {
516     display: none;
519 .fp-select .fp-dimensions.fp-unknown {
520     display: none;
523 .fp-select .fp-size.fp-unknown {
524     display: none;
526 // File Manager
527 .filemanager-loading {
528     display: none;
531 .jsenabled .filemanager-loading {
532     display: block;
533     margin-top: 100px;
536 .filemanager.fm-loading .filemanager-toolbar,
537 .filemanager.fm-loading .fp-pathbar,
538 .filemanager.fm-loading .filemanager-container,
539 .filemanager.fm-loaded .filemanager-loading,
540 .filemanager.fm-maxfiles .fp-btn-add,
541 .filemanager.fm-maxfiles .dndupload-message,
542 .filemanager.fm-noitems .fp-btn-download,
543 .filemanager .fm-empty-container,
544 .filemanager.fm-noitems .filemanager-container .fp-content {
545     display: none;
548 .filemanager .fp-img-downloading {
549     display: none;
550     padding-top: 7px;
553 .filemanager .filemanager-updating {
554     display: none;
555     text-align: center;
558 .filemanager.fm-updating .filemanager-updating {
559     display: block;
560     margin-top: 37px;
563 .filemanager.fm-updating .fm-content-wrapper,
564 .filemanager.fm-nomkdir .fp-btn-mkdir,
565 .fitem.disabled .filemanager .filemanager-toolbar,
566 .fitem.disabled .filemanager .fp-pathbar,
567 .fitem.disabled .filemanager .fp-restrictions,
568 .fitem.disabled .filemanager .fm-content-wrapper {
569     display: none;
571 // File Manager layout
572 .filemanager {
573     .fp-restrictions {
574         text-align: right;
575     }
578 .filemanager-toolbar {
579     padding: 4px;
580     overflow: hidden;
583 .filemanager .fp-pathbar.empty {
584     display: none;
587 .filepicker-filelist,
588 .filemanager-container {
589     min-height: 140px;
590     border-top: 0;
593 .filemanager .fp-content {
594     overflow: auto;
595     max-height: 472px;
596     min-height: 157px;
599 .filemanager-container,
600 .filepicker-filelist {
601     overflow: hidden;
604 .file-picker .yui3-datatable-header {
605     background: initial;
608 .fitem.disabled .filepicker-filelist,
609 .fitem.disabled .filemanager-container {
610     background-color: #ebebe4;
613 .fitem.disabled .fp-btn-choose {
614     @extend .text-muted;
617 .fitem.disabled .filepicker-filelist .filepicker-filename {
618     display: none;
620 // Icon view (File Manager only)
621 .fp-iconview .fp-reficons1 {
622     position: absolute;
623     height: 100%;
624     width: 100%;
625     top: 0;
626     left: 0;
629 .fp-iconview .fp-reficons2 {
630     position: absolute;
631     height: 100%;
632     width: 100%;
633     top: 0;
634     left: 0;
637 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
638     background: url('[[pix:theme|fp/link]]') no-repeat;
639     /*rtl:raw:
640     transform: scaleX(-1);
641     */
642     /*rtl:ignore*/
643     background-position: bottom right;
646 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
647     background: url('[[pix:theme|fp/alias]]') no-repeat;
648     /*rtl:raw:
649     transform: scaleX(-1);
650     */
651     /*rtl:ignore*/
652     background-position: bottom left;
655 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
656     display: none;
659 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
660     background: url([[pix:s/dead]]) no-repeat;
661     background-position: center center;
663 // Table view (File Manager only)
664 .filemanager .yui3-datatable table {
665     border: 0 solid #bbb;
666     width: 100%;
669 /* Override YUI default styling */
670 /* stylelint-disable declaration-no-important */
671 .filemanager {
673     .yui3-datatable-header {
674         background: #fff !important;
675         border-bottom: 1px solid #ccc !important;
676         border-left: 0 solid #fff !important;
677         color: #555 !important;
678     }
680     .yui3-datatable-odd .yui3-datatable-cell {
681         background-color: #f6f6f6 !important;
682         border-left: 0 solid #f6f6f6;
683     }
685     .yui3-datatable-even .yui3-datatable-cell {
686         background-color: #fff !important;
687         border-left: 0 solid #fff;
688     }
690 /* stylelint-enable */
692 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
693     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
694     height: 100%;
695     width: 100%;
696     /*rtl:raw:
697     transform: scaleX(-1);
698     */
699     position: absolute;
700     top: 8px;
701     left: 17px;
704 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
705     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
706     height: 100%;
707     width: 100%;
708     /*rtl:raw:
709     transform: scaleX(-1);
710     */
711     position: absolute;
712     top: 9px;
713     left: -6px;
715 // Folder Context Menu (File Manager only)
716 .filemanager .fp-contextmenu {
717     display: none;
720 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
721     display: block;
722     position: absolute;
723     right: 7px;
724     bottom: 5px;
727 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
728 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
729     display: inline;
730     position: absolute;
731     left: 14px;
732     margin-right: -20px;
733     top: 6px;
735 // Drag and drop support (filemanager and filepicker form elements)
736 .filepicker-filelist .filepicker-container,
737 .filemanager.fm-noitems .fm-empty-container {
738     display: block;
739     position: absolute;
740     top: 10px;
741     bottom: 10px;
742     left: 10px;
743     right: 10px;
744     border: 2px dashed #bbb;
745     padding-top: 85px;
746     text-align: center;
749 .filepicker-filelist .dndupload-target,
750 .filemanager-container .dndupload-target {
751     background: #fff;
752     position: absolute;
753     top: 10px;
754     bottom: 10px;
755     left: 10px;
756     right: 10px;
757     border: 2px dashed #fb7979;
758     padding-top: 85px;
759     text-align: center;
761     @include box-shadow(0 0 0 10px #fff);
764 .filepicker-filelist.dndupload-over .dndupload-target,
765 .filemanager-container.dndupload-over .dndupload-target {
766     background: #fff;
767     position: absolute;
768     top: 10px;
769     bottom: 10px;
770     left: 10px;
771     right: 10px;
772     border: 2px dashed #6c8cd3;
773     padding-top: 85px;
774     text-align: center;
777 .dndupload-message {
778     display: none;
781 .dndsupported .dndupload-message {
782     display: inline;
785 .dnduploadnotsupported-message {
786     display: none;
789 .dndnotsupported .dnduploadnotsupported-message {
790     display: inline;
793 .dndupload-target {
794     display: none;
797 .dndsupported .dndupload-ready .dndupload-target {
798     display: block;
801 .dndupload-uploadinprogress {
802     display: none;
803     text-align: center;
806 .dndupload-uploading .dndupload-uploadinprogress {
807     display: block;
810 .dndupload-arrow {
811     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
812     width: 100%;
813     height: 80px;
814     position: absolute;
815     top: 5px;
818 .fitem.disabled .filepicker-container,
819 .fitem.disabled .fm-empty-container {
820     display: none;
823 .dndupload-progressbars {
824     padding: 10px;
825     display: none;
828 .dndupload-inprogress .dndupload-progressbars {
829     display: block;
832 .dndupload-inprogress .fp-content {
833     display: none;
836 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
837     display: none;
840 .filepicker-filelist.dndupload-inprogress .filepicker-container {
841     display: none;
844 .filepicker-filelist.dndupload-inprogress a {
845     display: none;
847 // Select Dialogue (File Manager only)
848 .filemanager.fp-select .fp-select-loading {
849     display: none;
852 .filemanager.fp-select.loading .fp-select-loading {
853     display: block;
856 .filemanager.fp-select.loading form {
857     display: none;
860 .filemanager.fp-select.fp-folder .fp-license,
861 .filemanager.fp-select.fp-folder .fp-author,
862 .filemanager.fp-select.fp-file .fp-file-unzip,
863 .filemanager.fp-select.fp-folder .fp-file-unzip,
864 .filemanager.fp-select.fp-file .fp-file-zip,
865 .filemanager.fp-select.fp-zip .fp-file-zip {
866     display: none;
869 .filemanager.fp-select .fp-file-setmain,
870 .filemanager.fp-select .fp-file-setmain-help {
871     display: none;
874 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
875 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
876     display: inline-block;
879 .filemanager .fp-mainfile .fp-filename {
880     font-weight: bold;
883 .filemanager.fp-select.fp-folder .fp-file-download {
884     display: none;
886 // to be implemented
887 .fm-operation {
888     font-weight: bold;
891 .filemanager.fp-select .fp-original.fp-unknown,
892 .filemanager.fp-select .fp-original .fp-originloading {
893     display: none;
896 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
897     display: inline;
900 .filemanager.fp-select .fp-reflist.fp-unknown,
901 .filemanager.fp-select .fp-reflist .fp-reflistloading {
902     display: none;
905 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
906     display: inline;
909 .filemanager.fp-select .fp-reflist .fp-value {
910     background: #f9f9f9;
911     border: 1px solid #bbb;
912     padding: 8px 7px;
913     margin: 0;
914     max-height: 75px;
915     overflow: auto;
918 .filemanager.fp-select .fp-reflist .fp-value li {
919     padding-bottom: 7px;
921 // Create folder dialogue (File Manager only)
922 .filemanager.fp-mkdir-dlg {
923     text-align: center;
926 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
927     text-align: left;
928     margin: 20px;
930 // Confirm dialogue for delete (File Manager only)
931 .filemanager.fp-dlg {
932     text-align: center;
934 // file picker search dialog
935 .file-picker div.bd {
936     text-align: left;
939 // Upload form for file picker.
940 .fp-formset {
941     padding: 10px;
943     input[type="file"] {
944         line-height: inherit;
945     }
948 .fp-forminset {
949     padding: 0 10px;
952 .fp-fileinfo .fp-value {
953     display: inline-block;
954     padding-left: 5px;