MDL-64230 files: Display long file/folder names with ellipsis
[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;
199     // Undo truncating of text on hover.
200     &:hover {
201         overflow: inherit;
202         white-space: normal;
203         text-overflow: inherit;
204     }
206 // Table view (File Picker only)
207 .file-picker .yui3-datatable table {
208     border: 0 solid #bbb;
209     width: 100%;
211 // Tree view (File Manager only)
213 // first or middle sibling, no children
214 .file-picker .ygtvtn,
215 .filemanager .ygtvtn {
216     /*rtl:remove*/
217     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
218     /*rtl:raw:
219     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
220     */
221     width: 19px;
222     height: 32px;
224 // first or middle sibling, collapsable
225 .file-picker .ygtvtm,
226 .filemanager .ygtvtm {
227     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
228     /*rtl:raw:
229         background-position: 2px 10px;
230     */
231     width: 13px;
232     height: 12px;
233     cursor: pointer;
235 // first or middle sibling, collapsable, hover
236 .file-picker .ygtvtmh,
237 .filemanager .ygtvtmh {
238     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
239     /*rtl:raw:
240         background-position: 2px 10px;
241     */
242     width: 13px;
243     height: 12px;
244     cursor: pointer;
246 // first or middle sibling, expandable
247 .file-picker .ygtvtp,
248 .filemanager .ygtvtp {
249     /*rtl:remove*/
250     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
251     /*rtl:raw:
252     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
253     */
254     width: 13px;
255     height: 12px;
256     cursor: pointer;
258 // first or middle sibling, expandable, hover
259 .file-picker .ygtvtph,
260 .filemanager .ygtvtph {
261     /*rtl:remove*/
262     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
263     /*rtl:raw:
264     background: url('[[pix:moodle|y/tp_rtl]]') 2px 10px no-repeat;
265     */
266     width: 13px;
267     height: 22px;
268     cursor: pointer;
270 // last sibling, no children
271 .file-picker .ygtvln,
272 .filemanager .ygtvln {
273     /*rtl:remove*/
274     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
275     /*rtl:raw:
276     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
277     */
278     width: 19px;
279     height: 32px;
281 // Last sibling, collapsable
282 .file-picker .ygtvlm,
283 .filemanager .ygtvlm {
284     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
285     /*rtl:raw:
286         background-position: 2px 10px;
287     */
288     width: 13px;
289     height: 12px;
290     cursor: pointer;
292 // Last sibling, collapsable, hover
293 .file-picker .ygtvlmh,
294 .filemanager .ygtvlmh {
295     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
296     /*rtl:raw:
297         background-position: 2px 10px;
298     */
299     width: 13px;
300     height: 12px;
301     cursor: pointer;
303 // Last sibling, expandable
304 .file-picker .ygtvlp,
305 .filemanager .ygtvlp {
306     /*rtl:remove*/
307     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
308     /*rtl:raw:
309     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
310     */
311     width: 13px;
312     height: 12px;
313     cursor: pointer;
315 // Last sibling, expandable, hover
316 .file-picker .ygtvlph,
317 .filemanager .ygtvlph {
318     /*rtl:remove*/
319     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
320     /*rtl:raw:
321     background: url('[[pix:moodle|y/lp_rtl]]') 2px 10px no-repeat;
322     */
323     width: 13px;
324     height: 12px;
325     cursor: pointer;
327 // Loading icon
328 .file-picker .ygtvloading,
329 .filemanager .ygtvloading {
330     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
331     width: 16px;
332     height: 22px;
334 // the style for the empty cells that are used for rendering the depth of the node
335 .file-picker .ygtvdepthcell,
336 .filemanager .ygtvdepthcell {
337     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
338     /*rtl:raw:
339     background-position: 0 0;
340     */
341     width: 17px;
342     height: 32px;
345 .file-picker .ygtvblankdepthcell,
346 .filemanager .ygtvblankdepthcell {
347     width: 17px;
348     height: 22px;
351 a.ygtvspacer:hover {
352     color: transparent;
353     text-decoration: none;
356 .ygtvlabel,
357 .ygtvlabel:link,
358 .ygtvlabel:visited,
359 .ygtvlabel:hover {
360     background-color: transparent;
361     cursor: pointer;
362     margin-left: 2px;
363     text-decoration: none;
366 .file-picker .ygtvfocus,
367 .filemanager .ygtvfocus {
368     background-color: #eee;
371 .fp-filename-icon {
372     margin-top: 10px;
373     display: block;
374     position: relative;
377 .fp-icon {
378     float: left;
379     margin-top: -7px;
380     width: 24px;
381     height: 24px;
382     margin-right: 10px;
383     text-align: center;
384     line-height: 24px;
387 .fp-icon img {
388     max-height: 24px;
389     max-width: 24px;
390     vertical-align: middle;
393 .fp-filename {
394     padding-right: 10px;
396 // Repositories Login on fp-content (File Picker only)
398 .file-picker .fp-login-form {
399     height: 100%;
400     width: 100%;
401     display: table;
403 // Upload on fp-content (File Picker only)
404 .file-picker .fp-upload-form {
405     height: 100%;
406     width: 100%;
407     display: table;
410 .file-picker .fp-upload-form table {
411     margin: 0 auto;
413 // File exists dialogue on Upload (File Picker only)
414 .file-picker.fp-dlg {
415     text-align: center;
418 .file-picker.fp-dlg .fp-dlg-buttons {
419     margin: 0 20px;
421 // Error dialogue on Upload (File Picker only)
422 .file-picker.fp-msg {
423     text-align: center;
425 // Error on fp-content (File Picker only)
426 .file-picker .fp-content-error {
427     height: 100%;
428     width: 100%;
429     display: table;
430     text-align: center;
432 // Lazy loading on fp-content (File Picker only)
433 .file-picker .fp-nextpage {
434     clear: both;
437 .file-picker .fp-nextpage .fp-nextpage-loading {
438     display: none;
441 .file-picker .fp-nextpage.loading .fp-nextpage-link {
442     display: none;
445 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
446     display: block;
447     text-align: center;
448     height: 100px;
449     padding-top: 50px;
451 // Select Dialogue (File Picker and File Manager)
452 .fp-select .fp-select-loading {
453     text-align: center;
454     margin-top: 20px;
457 .fp-select table {
458     padding: 0 0 10px;
461 .fp-select table .mdl-right {
462     min-width: 84px;
465 .fp-select .fp-reflist .mdl-right {
466     vertical-align: top;
469 .fp-select .fp-select-buttons {
470     float: right;
473 .fp-select .fp-info {
474     font-size: $font-size-xs;
477 .fp-select .fp-thumbnail {
478     float: left;
479     min-width: 110px;
480     min-height: 110px;
481     line-height: 110px;
482     text-align: center;
483     margin: 10px 20px 0 0;
484     background: #fff;
485     border: 1px solid #ddd;
487     @include box-shadow(inset 0 0 10px 0 #ccc);
490 .fp-select .fp-thumbnail img {
491     border: 1px solid #ddd;
492     padding: 3px;
493     vertical-align: middle;
494     margin: 10px;
497 .fp-select .fp-fileinfo {
498     display: inline-block;
499     margin-top: 10px;
502 .file-picker.fp-select .fp-fileinfo {
503     max-width: 240px;
506 .fp-select .fp-fileinfo div {
507     padding-bottom: 5px;
510 .file-picker.fp-select .uneditable {
511     display: none;
514 .file-picker.fp-select .fp-select-loading {
515     display: none;
518 .file-picker.fp-select.loading .fp-select-loading {
519     display: block;
522 .file-picker.fp-select.loading form {
523     display: none;
526 .fp-select .fp-dimensions.fp-unknown {
527     display: none;
530 .fp-select .fp-size.fp-unknown {
531     display: none;
533 // File Manager
534 .filemanager-loading {
535     display: none;
538 .jsenabled .filemanager-loading {
539     display: block;
540     margin-top: 100px;
543 .filemanager.fm-loading .filemanager-toolbar,
544 .filemanager.fm-loading .fp-pathbar,
545 .filemanager.fm-loading .filemanager-container,
546 .filemanager.fm-loaded .filemanager-loading,
547 .filemanager.fm-maxfiles .fp-btn-add,
548 .filemanager.fm-maxfiles .dndupload-message,
549 .filemanager.fm-noitems .fp-btn-download,
550 .filemanager .fm-empty-container,
551 .filemanager.fm-noitems .filemanager-container .fp-content {
552     display: none;
555 .filemanager .fp-img-downloading {
556     display: none;
557     padding-top: 7px;
560 .filemanager .filemanager-updating {
561     display: none;
562     text-align: center;
565 .filemanager.fm-updating .filemanager-updating {
566     display: block;
567     margin-top: 37px;
570 .filemanager.fm-updating .fm-content-wrapper,
571 .filemanager.fm-nomkdir .fp-btn-mkdir,
572 .fitem.disabled .filemanager .filemanager-toolbar,
573 .fitem.disabled .filemanager .fp-pathbar,
574 .fitem.disabled .filemanager .fp-restrictions,
575 .fitem.disabled .filemanager .fm-content-wrapper {
576     display: none;
578 // File Manager layout
579 .filemanager {
580     .fp-restrictions {
581         text-align: right;
582     }
585 .filemanager-toolbar {
586     padding: 4px;
587     overflow: hidden;
590 .filemanager .fp-pathbar.empty {
591     display: none;
594 .filepicker-filelist,
595 .filemanager-container {
596     min-height: 140px;
597     border-top: 0;
600 .filemanager .fp-content {
601     overflow: auto;
602     max-height: 472px;
603     min-height: 157px;
606 .filemanager-container,
607 .filepicker-filelist {
608     overflow: hidden;
611 .file-picker .yui3-datatable-header {
612     background: initial;
615 .fitem.disabled .filepicker-filelist,
616 .fitem.disabled .filemanager-container {
617     background-color: #ebebe4;
620 .fitem.disabled .fp-btn-choose {
621     @extend .text-muted;
624 .fitem.disabled .filepicker-filelist .filepicker-filename {
625     display: none;
627 // Icon view (File Manager only)
628 .fp-iconview .fp-reficons1 {
629     position: absolute;
630     height: 100%;
631     width: 100%;
632     top: 0;
633     left: 0;
636 .fp-iconview .fp-reficons2 {
637     position: absolute;
638     height: 100%;
639     width: 100%;
640     top: 0;
641     left: 0;
644 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
645     background: url('[[pix:theme|fp/link]]') no-repeat;
646     /*rtl:raw:
647     transform: scaleX(-1);
648     */
649     /*rtl:ignore*/
650     background-position: bottom right;
651     background-size: 16px 16px;
654 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
655     background: url('[[pix:theme|fp/alias]]') no-repeat;
656     /*rtl:raw:
657     transform: scaleX(-1);
658     */
659     /*rtl:ignore*/
660     background-position: bottom left;
661     background-size: 16px 16px;
664 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
665     display: none;
668 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
669     background: url([[pix:s/dead]]) no-repeat;
670     background-position: center center;
672 // Table view (File Manager only)
673 .filemanager .yui3-datatable table {
674     border: 0 solid #bbb;
675     width: 100%;
678 /* Override YUI default styling */
679 /* stylelint-disable declaration-no-important */
680 .filemanager {
682     .yui3-datatable-header {
683         background: #fff !important;
684         border-bottom: 1px solid #ccc !important;
685         border-left: 0 solid #fff !important;
686         color: #555 !important;
687     }
689     .yui3-datatable-odd .yui3-datatable-cell {
690         background-color: #f6f6f6 !important;
691         border-left: 0 solid #f6f6f6;
692     }
694     .yui3-datatable-even .yui3-datatable-cell {
695         background-color: #fff !important;
696         border-left: 0 solid #fff;
697     }
699 /* stylelint-enable */
701 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1 {
702     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
703     height: 100%;
704     width: 100%;
705     /*rtl:raw:
706     transform: scaleX(-1);
707     */
708     position: absolute;
709     top: 8px;
710     left: 17px;
711     background-size: 16px 16px;
714 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
715     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
716     height: 100%;
717     width: 100%;
718     /*rtl:raw:
719     transform: scaleX(-1);
720     */
721     position: absolute;
722     top: 9px;
723     left: -6px;
724     background-size: 16px 16px;
726 // Folder Context Menu (File Manager only)
727 .filemanager .fp-contextmenu {
728     display: none;
731 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
732     display: block;
733     position: absolute;
734     right: 7px;
735     bottom: 5px;
738 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
739 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
740     display: inline;
741     position: absolute;
742     left: 14px;
743     margin-right: -20px;
744     top: 6px;
746 // Drag and drop support (filemanager and filepicker form elements)
747 .filepicker-filelist .filepicker-container,
748 .filemanager.fm-noitems .fm-empty-container {
749     display: block;
750     position: absolute;
751     top: 10px;
752     bottom: 10px;
753     left: 10px;
754     right: 10px;
755     border: 2px dashed #bbb;
756     padding-top: 85px;
757     text-align: center;
760 .filepicker-filelist .dndupload-target,
761 .filemanager-container .dndupload-target {
762     background: #fff;
763     position: absolute;
764     top: 10px;
765     bottom: 10px;
766     left: 10px;
767     right: 10px;
768     border: 2px dashed #fb7979;
769     padding-top: 85px;
770     text-align: center;
772     @include box-shadow(0 0 0 10px #fff);
775 .filepicker-filelist.dndupload-over .dndupload-target,
776 .filemanager-container.dndupload-over .dndupload-target {
777     background: #fff;
778     position: absolute;
779     top: 10px;
780     bottom: 10px;
781     left: 10px;
782     right: 10px;
783     border: 2px dashed #6c8cd3;
784     padding-top: 85px;
785     text-align: center;
788 .dndupload-message {
789     display: none;
792 .dndsupported .dndupload-message {
793     display: inline;
796 .dnduploadnotsupported-message {
797     display: none;
800 .dndnotsupported .dnduploadnotsupported-message {
801     display: inline;
804 .dndupload-target {
805     display: none;
808 .dndsupported .dndupload-ready .dndupload-target {
809     display: block;
812 .dndupload-uploadinprogress {
813     display: none;
814     text-align: center;
817 .dndupload-uploading .dndupload-uploadinprogress {
818     display: block;
821 .dndupload-arrow {
822     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
823     width: 100%;
824     height: 80px;
825     position: absolute;
826     top: 5px;
829 .fitem.disabled .filepicker-container,
830 .fitem.disabled .fm-empty-container {
831     display: none;
834 .dndupload-progressbars {
835     padding: 10px;
836     display: none;
839 .dndupload-inprogress .dndupload-progressbars {
840     display: block;
843 .dndupload-inprogress .fp-content {
844     display: none;
847 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
848     display: none;
851 .filepicker-filelist.dndupload-inprogress .filepicker-container {
852     display: none;
855 .filepicker-filelist.dndupload-inprogress a {
856     display: none;
858 // Select Dialogue (File Manager only)
859 .filemanager.fp-select .fp-select-loading {
860     display: none;
863 .filemanager.fp-select.loading .fp-select-loading {
864     display: block;
867 .filemanager.fp-select.loading form {
868     display: none;
871 .filemanager.fp-select.fp-folder .fp-license,
872 .filemanager.fp-select.fp-folder .fp-author,
873 .filemanager.fp-select.fp-file .fp-file-unzip,
874 .filemanager.fp-select.fp-folder .fp-file-unzip,
875 .filemanager.fp-select.fp-file .fp-file-zip,
876 .filemanager.fp-select.fp-zip .fp-file-zip {
877     display: none;
880 .filemanager.fp-select .fp-file-setmain,
881 .filemanager.fp-select .fp-file-setmain-help {
882     display: none;
885 .filemanager.fp-select.fp-cansetmain .fp-file-setmain,
886 .filemanager.fp-select.fp-cansetmain .fp-file-setmain-help {
887     display: inline-block;
890 .filemanager .fp-mainfile .fp-filename {
891     font-weight: bold;
894 .filemanager.fp-select.fp-folder .fp-file-download {
895     display: none;
897 // to be implemented
898 .fm-operation {
899     font-weight: bold;
902 .filemanager.fp-select .fp-original.fp-unknown,
903 .filemanager.fp-select .fp-original .fp-originloading {
904     display: none;
907 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
908     display: inline;
911 .filemanager.fp-select .fp-reflist.fp-unknown,
912 .filemanager.fp-select .fp-reflist .fp-reflistloading {
913     display: none;
916 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
917     display: inline;
920 .filemanager.fp-select .fp-reflist .fp-value {
921     background: #f9f9f9;
922     border: 1px solid #bbb;
923     padding: 8px 7px;
924     margin: 0;
925     max-height: 75px;
926     overflow: auto;
929 .filemanager.fp-select .fp-reflist .fp-value li {
930     padding-bottom: 7px;
932 // Create folder dialogue (File Manager only)
933 .filemanager.fp-mkdir-dlg {
934     text-align: center;
937 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
938     text-align: left;
939     margin: 20px;
941 // Confirm dialogue for delete (File Manager only)
942 .filemanager.fp-dlg {
943     text-align: center;
945 // file picker search dialog
946 .file-picker div.bd {
947     text-align: left;
950 // Upload form for file picker.
951 .fp-formset {
952     padding: 10px;
954     input[type="file"] {
955         line-height: inherit;
956     }
959 .fp-forminset {
960     padding: 0 10px;
963 .fp-fileinfo .fp-value {
964     display: inline-block;
965     padding-left: 5px;