c2cce748414866804180575c5a643546f76ebf24
[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: 22px;
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: -20px;
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;
388     margin-top: -18px;
389     position: fixed;
391 // Repositories Login on fp-content (File Picker only)
393 .file-picker .fp-login-form {
394     height: 100%;
395     width: 100%;
396     display: table;
398 // Upload on fp-content (File Picker only)
399 .file-picker .fp-upload-form {
400     height: 100%;
401     width: 100%;
402     display: table;
405 .file-picker .fp-upload-form table {
406     margin: 0 auto;
408 // File exists dialogue on Upload (File Picker only)
409 .file-picker.fp-dlg {
410     text-align: center;
413 .file-picker.fp-dlg .fp-dlg-buttons {
414     margin: 0 20px;
416 // Error dialogue on Upload (File Picker only)
417 .file-picker.fp-msg {
418     text-align: center;
420 // Error on fp-content (File Picker only)
421 .file-picker .fp-content-error {
422     height: 100%;
423     width: 100%;
424     display: table;
425     text-align: center;
427 // Lazy loading on fp-content (File Picker only)
428 .file-picker .fp-nextpage {
429     clear: both;
432 .file-picker .fp-nextpage .fp-nextpage-loading {
433     display: none;
436 .file-picker .fp-nextpage.loading .fp-nextpage-link {
437     display: none;
440 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
441     display: block;
442     text-align: center;
443     height: 100px;
444     padding-top: 50px;
446 // Select Dialogue (File Picker and File Manager)
447 .fp-select .fp-select-loading {
448     text-align: center;
449     margin-top: 20px;
452 .fp-select table {
453     padding: 0 0 10px;
456 .fp-select table .mdl-right {
457     min-width: 84px;
460 .fp-select .fp-reflist .mdl-right {
461     vertical-align: top;
464 .fp-select .fp-select-buttons {
465     float: right;
468 .fp-select .fp-info {
469     font-size: $font-size-xs;
472 .fp-select .fp-thumbnail {
473     float: left;
474     min-width: 110px;
475     min-height: 110px;
476     line-height: 110px;
477     text-align: center;
478     margin: 10px 20px 0 0;
479     background: #fff;
480     border: 1px solid #ddd;
482     @include box-shadow(inset 0 0 10px 0 #ccc);
485 .fp-select .fp-thumbnail img {
486     border: 1px solid #ddd;
487     padding: 3px;
488     vertical-align: middle;
489     margin: 10px;
492 .fp-select .fp-fileinfo {
493     display: inline-block;
494     margin-top: 10px;
497 .file-picker.fp-select .fp-fileinfo {
498     max-width: 240px;
501 .fp-select .fp-fileinfo div {
502     padding-bottom: 5px;
505 .file-picker.fp-select .uneditable {
506     display: none;
509 .file-picker.fp-select .fp-select-loading {
510     display: none;
513 .file-picker.fp-select.loading .fp-select-loading {
514     display: block;
517 .file-picker.fp-select.loading form {
518     display: none;
521 .fp-select .fp-dimensions.fp-unknown {
522     display: none;
525 .fp-select .fp-size.fp-unknown {
526     display: none;
528 // File Manager
529 .filemanager-loading {
530     display: none;
533 .jsenabled .filemanager-loading {
534     display: block;
535     margin-top: 100px;
538 .filemanager.fm-loading .filemanager-toolbar,
539 .filemanager.fm-loading .fp-pathbar,
540 .filemanager.fm-loading .filemanager-container,
541 .filemanager.fm-loaded .filemanager-loading,
542 .filemanager.fm-maxfiles .fp-btn-add,
543 .filemanager.fm-maxfiles .dndupload-message,
544 .filemanager.fm-noitems .fp-btn-download,
545 .filemanager .fm-empty-container,
546 .filemanager.fm-noitems .filemanager-container .fp-content {
547     display: none;
550 .filemanager .fp-img-downloading {
551     display: none;
552     padding-top: 7px;
555 .filemanager .filemanager-updating {
556     display: none;
557     text-align: center;
560 .filemanager.fm-updating .filemanager-updating {
561     display: block;
562     margin-top: 37px;
565 .filemanager.fm-updating .fm-content-wrapper,
566 .filemanager.fm-nomkdir .fp-btn-mkdir,
567 .fitem.disabled .filemanager .filemanager-toolbar,
568 .fitem.disabled .filemanager .fp-pathbar,
569 .fitem.disabled .filemanager .fp-restrictions,
570 .fitem.disabled .filemanager .fm-content-wrapper {
571     display: none;
573 // File Manager layout
574 .filemanager {
575     .fp-restrictions {
576         text-align: right;
577     }
580 .filemanager-toolbar {
581     padding: 4px;
582     overflow: hidden;
585 .filemanager .fp-pathbar.empty {
586     display: none;
589 .filepicker-filelist,
590 .filemanager-container {
591     min-height: 140px;
592     border-top: 0;
595 .filemanager .fp-content {
596     overflow: auto;
597     max-height: 472px;
598     min-height: 157px;
601 .filemanager-container,
602 .filepicker-filelist {
603     overflow: hidden;
606 .file-picker .yui3-datatable-header {
607     background: initial;
610 .fitem.disabled .filepicker-filelist,
611 .fitem.disabled .filemanager-container {
612     background-color: #ebebe4;
615 .fitem.disabled .fp-btn-choose {
616     @extend .text-muted;
619 .fitem.disabled .filepicker-filelist .filepicker-filename {
620     display: none;
622 // Icon view (File Manager only)
623 .fp-iconview .fp-reficons1 {
624     position: absolute;
625     height: 100%;
626     width: 100%;
627     top: 0;
628     left: 0;
631 .fp-iconview .fp-reficons2 {
632     position: absolute;
633     height: 100%;
634     width: 100%;
635     top: 0;
636     left: 0;
639 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
640     background: url('[[pix:theme|fp/link]]') no-repeat;
641     /*rtl:raw:
642     transform: scaleX(-1);
643     */
644     /*rtl:ignore*/
645     background-position: bottom right;
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;
657 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
658     display: none;
661 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
662     background: url([[pix:s/dead]]) no-repeat;
663     background-position: center center;
665 // Table view (File Manager only)
666 .filemanager .yui3-datatable table {
667     border: 0 solid #bbb;
668     width: 100%;
671 /* Override YUI default styling */
672 /* stylelint-disable declaration-no-important */
673 .filemanager {
675     .yui3-datatable-header {
676         background: #fff !important;
677         border-bottom: 1px solid #ccc !important;
678         border-left: 0 solid #fff !important;
679         color: #555 !important;
680     }
682     .yui3-datatable-odd .yui3-datatable-cell {
683         background-color: #f6f6f6 !important;
684         border-left: 0 solid #f6f6f6;
685     }
687     .yui3-datatable-even .yui3-datatable-cell {
688         background-color: #fff !important;
689         border-left: 0 solid #fff;
690     }
692 /* stylelint-enable */
694 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
695     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
696     height: 100%;
697     width: 100%;
698     /*rtl:raw:
699     transform: scaleX(-1);
700     */
701     position: absolute;
702     top: 8px;
703     left: 17px;
704     z-index: 1000;
707 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
708     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
709     height: 100%;
710     width: 100%;
711     /*rtl:raw:
712     transform: scaleX(-1);
713     */
714     position: absolute;
715     top: 9px;
716     left: -6px;
718 // Folder Context Menu (File Manager only)
719 .filemanager .fp-contextmenu {
720     display: none;
723 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
724     display: block;
725     position: absolute;
726     right: 7px;
727     bottom: 5px;
730 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
731 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
732     display: inline;
733     position: absolute;
734     left: 14px;
735     margin-right: -20px;
736     top: 6px;
738 // Drag and drop support (filemanager and filepicker form elements)
739 .filepicker-filelist .filepicker-container,
740 .filemanager.fm-noitems .fm-empty-container {
741     display: block;
742     position: absolute;
743     top: 10px;
744     bottom: 10px;
745     left: 10px;
746     right: 10px;
747     border: 2px dashed #bbb;
748     padding-top: 85px;
749     text-align: center;
752 .filepicker-filelist .dndupload-target,
753 .filemanager-container .dndupload-target {
754     background: #fff;
755     position: absolute;
756     top: 10px;
757     bottom: 10px;
758     left: 10px;
759     right: 10px;
760     border: 2px dashed #fb7979;
761     padding-top: 85px;
762     text-align: center;
764     @include box-shadow(0 0 0 10px #fff);
767 .filepicker-filelist.dndupload-over .dndupload-target,
768 .filemanager-container.dndupload-over .dndupload-target {
769     background: #fff;
770     position: absolute;
771     top: 10px;
772     bottom: 10px;
773     left: 10px;
774     right: 10px;
775     border: 2px dashed #6c8cd3;
776     padding-top: 85px;
777     text-align: center;
780 .dndupload-message {
781     display: none;
784 .dndsupported .dndupload-message {
785     display: inline;
788 .dnduploadnotsupported-message {
789     display: none;
792 .dndnotsupported .dnduploadnotsupported-message {
793     display: inline;
796 .dndupload-target {
797     display: none;
800 .dndsupported .dndupload-ready .dndupload-target {
801     display: block;
804 .dndupload-uploadinprogress {
805     display: none;
806     text-align: center;
809 .dndupload-uploading .dndupload-uploadinprogress {
810     display: block;
813 .dndupload-arrow {
814     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
815     width: 100%;
816     height: 80px;
817     position: absolute;
818     top: 5px;
821 .fitem.disabled .filepicker-container,
822 .fitem.disabled .fm-empty-container {
823     display: none;
826 .dndupload-progressbars {
827     padding: 10px;
828     display: none;
831 .dndupload-inprogress .dndupload-progressbars {
832     display: block;
835 .dndupload-inprogress .fp-content {
836     display: none;
839 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
840     display: none;
843 .filepicker-filelist.dndupload-inprogress .filepicker-container {
844     display: none;
847 .filepicker-filelist.dndupload-inprogress a {
848     display: none;
850 // Select Dialogue (File Manager only)
851 .filemanager.fp-select .fp-select-loading {
852     display: none;
855 .filemanager.fp-select.loading .fp-select-loading {
856     display: block;
859 .filemanager.fp-select.loading form {
860     display: none;
863 .filemanager.fp-select.fp-folder .fp-license,
864 .filemanager.fp-select.fp-folder .fp-author,
865 .filemanager.fp-select.fp-file .fp-file-unzip,
866 .filemanager.fp-select.fp-folder .fp-file-unzip,
867 .filemanager.fp-select.fp-file .fp-file-zip,
868 .filemanager.fp-select.fp-zip .fp-file-zip {
869     display: none;
872 .filemanager.fp-select .fp-file-setmain,
873 .filemanager.fp-select .fp-file-setmain-help {
874     display: none;
877 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
878 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
879     display: inline-block;
882 .filemanager .fp-mainfile .fp-filename {
883     font-weight: bold;
886 .filemanager.fp-select.fp-folder .fp-file-download {
887     display: none;
889 // to be implemented
890 .fm-operation {
891     font-weight: bold;
894 .filemanager.fp-select .fp-original.fp-unknown,
895 .filemanager.fp-select .fp-original .fp-originloading {
896     display: none;
899 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
900     display: inline;
903 .filemanager.fp-select .fp-reflist.fp-unknown,
904 .filemanager.fp-select .fp-reflist .fp-reflistloading {
905     display: none;
908 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
909     display: inline;
912 .filemanager.fp-select .fp-reflist .fp-value {
913     background: #f9f9f9;
914     border: 1px solid #bbb;
915     padding: 8px 7px;
916     margin: 0;
917     max-height: 75px;
918     overflow: auto;
921 .filemanager.fp-select .fp-reflist .fp-value li {
922     padding-bottom: 7px;
924 // Create folder dialogue (File Manager only)
925 .filemanager.fp-mkdir-dlg {
926     text-align: center;
929 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
930     text-align: left;
931     margin: 20px;
933 // Confirm dialogue for delete (File Manager only)
934 .filemanager.fp-dlg {
935     text-align: center;
937 // file picker search dialog
938 .file-picker div.bd {
939     text-align: left;
942 // Upload form for file picker.
943 .fp-formset {
944     padding: 10px;
946     input[type="file"] {
947         line-height: inherit;
948     }
951 .fp-forminset {
952     padding: 0 10px;
955 .fp-fileinfo .fp-value {
956     display: inline-block;
957     padding-left: 5px;