3b0ea737634a4e749cb2adc62159101803aa87a3
[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]]') left 3px no-repeat;
136     background-size: 12px 12px;
137     height: 12px;
138     margin-left: 12px;
141 /*rtl:raw:
142 .fp-pathbar .fp-path-folder {
143     background-image: url('[[pix:theme|fp/path_folder_rtl]]');
145 */
147 .fp-pathbar .fp-path-folder-name {
148     margin-left: 24px;
150 // Icon view (File Picker and File Manager)
151 .fp-iconview .fp-file {
152     float: left;
153     text-align: center;
154     position: relative;
155     margin: 10px 10px 35px;
158 .fp-iconview .fp-thumbnail {
159     min-width: 110px;
160     min-height: 110px;
161     line-height: 110px;
162     text-align: center;
163     border: 1px solid #fff;
164     display: block;
167 .fp-iconview .fp-thumbnail img {
168     border: 1px solid #ddd;
169     padding: 3px;
170     vertical-align: middle;
172     @include box-shadow(1px 1px 2px 0 #ccc);
175 .fp-iconview .fp-thumbnail:hover {
176     background: #fff;
177     border: 1px solid #ddd;
179     @include box-shadow(inset 0 0 10px0 #ccc);
182 .fp-iconview .fp-filename-field {
183     height: 33px;
184     word-wrap: break-word;
185     overflow: hidden;
186     position: absolute;
189 .fp-iconview .fp-filename-field:hover {
190     overflow: visible;
191     z-index: 1000;
194 .fp-iconview .fp-filename-field .fp-filename {
195     background: #fff;
196     padding-top: 5px;
197     padding-bottom: 12px;
198     min-width: 112px;
200 // Table view (File Picker only)
201 .file-picker .yui3-datatable table {
202     border: 0 solid #bbb;
203     width: 100%;
205 // Tree view (File Manager only)
207 // first or middle sibling, no children
208 .file-picker .ygtvtn,
209 .filemanager .ygtvtn {
210     /*rtl:remove*/
211     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
212     /*rtl:raw:
213     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
214     */
215     width: 19px;
216     height: 32px;
218 // first or middle sibling, collapsable
219 .file-picker .ygtvtm,
220 .filemanager .ygtvtm {
221     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
222     /*rtl:raw:
223         background-position: 2px 10px;
224     */
225     width: 13px;
226     height: 12px;
227     cursor: pointer;
229 // first or middle sibling, collapsable, hover
230 .file-picker .ygtvtmh,
231 .filemanager .ygtvtmh {
232     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
233     /*rtl:raw:
234         background-position: 2px 10px;
235     */
236     width: 13px;
237     height: 12px;
238     cursor: pointer;
240 // first or middle sibling, expandable
241 .file-picker .ygtvtp,
242 .filemanager .ygtvtp {
243     /*rtl:remove*/
244     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
245     /*rtl:raw:
246     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
247     */
248     width: 13px;
249     height: 12px;
250     cursor: pointer;
252 // first or middle sibling, expandable, hover
253 .file-picker .ygtvtph,
254 .filemanager .ygtvtph {
255     /*rtl:remove*/
256     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
257     /*rtl:raw:
258     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
259     */
260     width: 13px;
261     height: 22px;
262     cursor: pointer;
264 // last sibling, no children
265 .file-picker .ygtvln,
266 .filemanager .ygtvln {
267     /*rtl:remove*/
268     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
269     /*rtl:raw:
270     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
271     */
272     width: 19px;
273     height: 32px;
275 // Last sibling, collapsable
276 .file-picker .ygtvlm,
277 .filemanager .ygtvlm {
278     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
279     /*rtl:raw:
280         background-position: 2px 10px;
281     */
282     width: 13px;
283     height: 12px;
284     cursor: pointer;
286 // Last sibling, collapsable, hover
287 .file-picker .ygtvlmh,
288 .filemanager .ygtvlmh {
289     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
290     /*rtl:raw:
291         background-position: 2px 10px;
292     */
293     width: 13px;
294     height: 12px;
295     cursor: pointer;
297 // Last sibling, expandable
298 .file-picker .ygtvlp,
299 .filemanager .ygtvlp {
300     /*rtl:remove*/
301     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
302     /*rtl:raw:
303     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
304     */
305     width: 13px;
306     height: 12px;
307     cursor: pointer;
309 // Last sibling, expandable, hover
310 .file-picker .ygtvlph,
311 .filemanager .ygtvlph {
312     /*rtl:remove*/
313     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
314     /*rtl:raw:
315     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
316     */
317     width: 13px;
318     height: 12px;
319     cursor: pointer;
321 // Loading icon
322 .file-picker .ygtvloading,
323 .filemanager .ygtvloading {
324     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
325     width: 16px;
326     height: 22px;
328 // the style for the empty cells that are used for rendering the depth of the node
329 .file-picker .ygtvdepthcell,
330 .filemanager .ygtvdepthcell {
331     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
332     /*rtl:raw:
333     background-position: 0 0;
334     */
335     width: 17px;
336     height: 32px;
339 .file-picker .ygtvblankdepthcell,
340 .filemanager .ygtvblankdepthcell {
341     width: 17px;
342     height: 22px;
345 a.ygtvspacer:hover {
346     color: transparent;
347     text-decoration: none;
350 .ygtvlabel,
351 .ygtvlabel:link,
352 .ygtvlabel:visited,
353 .ygtvlabel:hover {
354     background-color: transparent;
355     cursor: pointer;
356     margin-left: 2px;
357     text-decoration: none;
360 .file-picker .ygtvfocus,
361 .filemanager .ygtvfocus {
362     background-color: #eee;
365 .fp-filename-icon {
366     margin-top: 10px;
367     display: block;
368     position: relative;
371 .fp-icon {
372     float: left;
373     margin-top: -7px;
374     width: 24px;
375     height: 24px;
376     margin-right: 10px;
377     text-align: center;
378     line-height: 24px;
381 .fp-icon img {
382     max-height: 24px;
383     max-width: 24px;
384     vertical-align: middle;
387 .fp-filename {
388     padding-right: 10px;
390 // Repositories Login on fp-content (File Picker only)
392 .file-picker .fp-login-form {
393     height: 100%;
394     width: 100%;
395     display: table;
397 // Upload on fp-content (File Picker only)
398 .file-picker .fp-upload-form {
399     height: 100%;
400     width: 100%;
401     display: table;
404 .file-picker .fp-upload-form table {
405     margin: 0 auto;
407 // File exists dialogue on Upload (File Picker only)
408 .file-picker.fp-dlg {
409     text-align: center;
412 .file-picker.fp-dlg .fp-dlg-buttons {
413     margin: 0 20px;
415 // Error dialogue on Upload (File Picker only)
416 .file-picker.fp-msg {
417     text-align: center;
419 // Error on fp-content (File Picker only)
420 .file-picker .fp-content-error {
421     height: 100%;
422     width: 100%;
423     display: table;
424     text-align: center;
426 // Lazy loading on fp-content (File Picker only)
427 .file-picker .fp-nextpage {
428     clear: both;
431 .file-picker .fp-nextpage .fp-nextpage-loading {
432     display: none;
435 .file-picker .fp-nextpage.loading .fp-nextpage-link {
436     display: none;
439 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
440     display: block;
441     text-align: center;
442     height: 100px;
443     padding-top: 50px;
445 // Select Dialogue (File Picker and File Manager)
446 .fp-select .fp-select-loading {
447     text-align: center;
448     margin-top: 20px;
451 .fp-select table {
452     padding: 0 0 10px;
455 .fp-select table .mdl-right {
456     min-width: 84px;
459 .fp-select .fp-reflist .mdl-right {
460     vertical-align: top;
463 .fp-select .fp-select-buttons {
464     float: right;
467 .fp-select .fp-info {
468     font-size: $font-size-xs;
471 .fp-select .fp-thumbnail {
472     float: left;
473     min-width: 110px;
474     min-height: 110px;
475     line-height: 110px;
476     text-align: center;
477     margin: 10px 20px 0 0;
478     background: #fff;
479     border: 1px solid #ddd;
481     @include box-shadow(inset 0 0 10px 0 #ccc);
484 .fp-select .fp-thumbnail img {
485     border: 1px solid #ddd;
486     padding: 3px;
487     vertical-align: middle;
488     margin: 10px;
491 .fp-select .fp-fileinfo {
492     display: inline-block;
493     margin-top: 10px;
496 .file-picker.fp-select .fp-fileinfo {
497     max-width: 240px;
500 .fp-select .fp-fileinfo div {
501     padding-bottom: 5px;
504 .file-picker.fp-select .uneditable {
505     display: none;
508 .file-picker.fp-select .fp-select-loading {
509     display: none;
512 .file-picker.fp-select.loading .fp-select-loading {
513     display: block;
516 .file-picker.fp-select.loading form {
517     display: none;
520 .fp-select .fp-dimensions.fp-unknown {
521     display: none;
524 .fp-select .fp-size.fp-unknown {
525     display: none;
527 // File Manager
528 .filemanager-loading {
529     display: none;
532 .jsenabled .filemanager-loading {
533     display: block;
534     margin-top: 100px;
537 .filemanager.fm-loading .filemanager-toolbar,
538 .filemanager.fm-loading .fp-pathbar,
539 .filemanager.fm-loading .filemanager-container,
540 .filemanager.fm-loaded .filemanager-loading,
541 .filemanager.fm-maxfiles .fp-btn-add,
542 .filemanager.fm-maxfiles .dndupload-message,
543 .filemanager.fm-noitems .fp-btn-download,
544 .filemanager .fm-empty-container,
545 .filemanager.fm-noitems .filemanager-container .fp-content {
546     display: none;
549 .filemanager .fp-img-downloading {
550     display: none;
551     padding-top: 7px;
554 .filemanager .filemanager-updating {
555     display: none;
556     text-align: center;
559 .filemanager.fm-updating .filemanager-updating {
560     display: block;
561     margin-top: 37px;
564 .filemanager.fm-updating .fm-content-wrapper,
565 .filemanager.fm-nomkdir .fp-btn-mkdir,
566 .fitem.disabled .filemanager .filemanager-toolbar,
567 .fitem.disabled .filemanager .fp-pathbar,
568 .fitem.disabled .filemanager .fp-restrictions,
569 .fitem.disabled .filemanager .fm-content-wrapper {
570     display: none;
572 // File Manager layout
573 .filemanager {
574     .fp-restrictions {
575         text-align: right;
576     }
579 .filemanager-toolbar {
580     padding: 4px;
581     overflow: hidden;
584 .filemanager .fp-pathbar.empty {
585     display: none;
588 .filepicker-filelist,
589 .filemanager-container {
590     min-height: 140px;
591     border-top: 0;
594 .filemanager .fp-content {
595     overflow: auto;
596     max-height: 472px;
597     min-height: 157px;
600 .filemanager-container,
601 .filepicker-filelist {
602     overflow: hidden;
605 .file-picker .yui3-datatable-header {
606     background: initial;
609 .fitem.disabled .filepicker-filelist,
610 .fitem.disabled .filemanager-container {
611     background-color: #ebebe4;
614 .fitem.disabled .fp-btn-choose {
615     @extend .text-muted;
618 .fitem.disabled .filepicker-filelist .filepicker-filename {
619     display: none;
621 // Icon view (File Manager only)
622 .fp-iconview .fp-reficons1 {
623     position: absolute;
624     height: 100%;
625     width: 100%;
626     top: 0;
627     left: 0;
630 .fp-iconview .fp-reficons2 {
631     position: absolute;
632     height: 100%;
633     width: 100%;
634     top: 0;
635     left: 0;
638 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
639     background: url('[[pix:theme|fp/link]]') no-repeat;
640     /*rtl:raw:
641     transform: scaleX(-1);
642     */
643     /*rtl:ignore*/
644     background-position: bottom right;
645     background-size: 16px 16px;
648 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
649     background: url('[[pix:theme|fp/alias]]') no-repeat;
650     /*rtl:raw:
651     transform: scaleX(-1);
652     */
653     /*rtl:ignore*/
654     background-position: bottom left;
655     background-size: 16px 16px;
658 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
659     display: none;
662 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
663     background: url([[pix:s/dead]]) no-repeat;
664     background-position: center center;
666 // Table view (File Manager only)
667 .filemanager .yui3-datatable table {
668     border: 0 solid #bbb;
669     width: 100%;
672 /* Override YUI default styling */
673 /* stylelint-disable declaration-no-important */
674 .filemanager {
676     .yui3-datatable-header {
677         background: #fff !important;
678         border-bottom: 1px solid #ccc !important;
679         border-left: 0 solid #fff !important;
680         color: #555 !important;
681     }
683     .yui3-datatable-odd .yui3-datatable-cell {
684         background-color: #f6f6f6 !important;
685         border-left: 0 solid #f6f6f6;
686     }
688     .yui3-datatable-even .yui3-datatable-cell {
689         background-color: #fff !important;
690         border-left: 0 solid #fff;
691     }
693 /* stylelint-enable */
695 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
696     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
697     height: 100%;
698     width: 100%;
699     /*rtl:raw:
700     transform: scaleX(-1);
701     */
702     position: absolute;
703     top: 8px;
704     left: 17px;
705     background-size: 16px 16px;
708 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
709     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
710     height: 100%;
711     width: 100%;
712     /*rtl:raw:
713     transform: scaleX(-1);
714     */
715     position: absolute;
716     top: 9px;
717     left: -6px;
718     background-size: 16px 16px;
720 // Folder Context Menu (File Manager only)
721 .filemanager .fp-contextmenu {
722     display: none;
725 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
726     display: block;
727     position: absolute;
728     right: 7px;
729     bottom: 5px;
732 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
733 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
734     display: inline;
735     position: absolute;
736     left: 14px;
737     margin-right: -20px;
738     top: 6px;
740 // Drag and drop support (filemanager and filepicker form elements)
741 .filepicker-filelist .filepicker-container,
742 .filemanager.fm-noitems .fm-empty-container {
743     display: block;
744     position: absolute;
745     top: 10px;
746     bottom: 10px;
747     left: 10px;
748     right: 10px;
749     border: 2px dashed #bbb;
750     padding-top: 85px;
751     text-align: center;
754 .filepicker-filelist .dndupload-target,
755 .filemanager-container .dndupload-target {
756     background: #fff;
757     position: absolute;
758     top: 10px;
759     bottom: 10px;
760     left: 10px;
761     right: 10px;
762     border: 2px dashed #fb7979;
763     padding-top: 85px;
764     text-align: center;
766     @include box-shadow(0 0 0 10px #fff);
769 .filepicker-filelist.dndupload-over .dndupload-target,
770 .filemanager-container.dndupload-over .dndupload-target {
771     background: #fff;
772     position: absolute;
773     top: 10px;
774     bottom: 10px;
775     left: 10px;
776     right: 10px;
777     border: 2px dashed #6c8cd3;
778     padding-top: 85px;
779     text-align: center;
782 .dndupload-message {
783     display: none;
786 .dndsupported .dndupload-message {
787     display: inline;
790 .dnduploadnotsupported-message {
791     display: none;
794 .dndnotsupported .dnduploadnotsupported-message {
795     display: inline;
798 .dndupload-target {
799     display: none;
802 .dndsupported .dndupload-ready .dndupload-target {
803     display: block;
806 .dndupload-uploadinprogress {
807     display: none;
808     text-align: center;
811 .dndupload-uploading .dndupload-uploadinprogress {
812     display: block;
815 .dndupload-arrow {
816     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
817     width: 100%;
818     height: 80px;
819     position: absolute;
820     top: 5px;
823 .fitem.disabled .filepicker-container,
824 .fitem.disabled .fm-empty-container {
825     display: none;
828 .dndupload-progressbars {
829     padding: 10px;
830     display: none;
833 .dndupload-inprogress .dndupload-progressbars {
834     display: block;
837 .dndupload-inprogress .fp-content {
838     display: none;
841 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
842     display: none;
845 .filepicker-filelist.dndupload-inprogress .filepicker-container {
846     display: none;
849 .filepicker-filelist.dndupload-inprogress a {
850     display: none;
852 // Select Dialogue (File Manager only)
853 .filemanager.fp-select .fp-select-loading {
854     display: none;
857 .filemanager.fp-select.loading .fp-select-loading {
858     display: block;
861 .filemanager.fp-select.loading form {
862     display: none;
865 .filemanager.fp-select.fp-folder .fp-license,
866 .filemanager.fp-select.fp-folder .fp-author,
867 .filemanager.fp-select.fp-file .fp-file-unzip,
868 .filemanager.fp-select.fp-folder .fp-file-unzip,
869 .filemanager.fp-select.fp-file .fp-file-zip,
870 .filemanager.fp-select.fp-zip .fp-file-zip {
871     display: none;
874 .filemanager.fp-select .fp-file-setmain,
875 .filemanager.fp-select .fp-file-setmain-help {
876     display: none;
879 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
880 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
881     display: inline-block;
884 .filemanager .fp-mainfile .fp-filename {
885     font-weight: bold;
888 .filemanager.fp-select.fp-folder .fp-file-download {
889     display: none;
891 // to be implemented
892 .fm-operation {
893     font-weight: bold;
896 .filemanager.fp-select .fp-original.fp-unknown,
897 .filemanager.fp-select .fp-original .fp-originloading {
898     display: none;
901 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
902     display: inline;
905 .filemanager.fp-select .fp-reflist.fp-unknown,
906 .filemanager.fp-select .fp-reflist .fp-reflistloading {
907     display: none;
910 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
911     display: inline;
914 .filemanager.fp-select .fp-reflist .fp-value {
915     background: #f9f9f9;
916     border: 1px solid #bbb;
917     padding: 8px 7px;
918     margin: 0;
919     max-height: 75px;
920     overflow: auto;
923 .filemanager.fp-select .fp-reflist .fp-value li {
924     padding-bottom: 7px;
926 // Create folder dialogue (File Manager only)
927 .filemanager.fp-mkdir-dlg {
928     text-align: center;
931 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
932     text-align: left;
933     margin: 20px;
935 // Confirm dialogue for delete (File Manager only)
936 .filemanager.fp-dlg {
937     text-align: center;
939 // file picker search dialog
940 .file-picker div.bd {
941     text-align: left;
944 // Upload form for file picker.
945 .fp-formset {
946     padding: 10px;
948     input[type="file"] {
949         line-height: inherit;
950     }
953 .fp-forminset {
954     padding: 0 10px;
957 .fp-fileinfo .fp-value {
958     display: inline-block;
959     padding-left: 5px;