/* ------------------------------------------------------------------------------ * * # Plupload multiple file uploader * * Multi runtime single and multiple file uploader * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Layout // ------------------------------ // Wrapper .plupload_wrapper { width: 100%; border: 2px dashed @panel-default-border; border-radius: @border-radius-base; .panel > div > & { border: 0; } .panel.panel-flat > div > & { border-top: 1px solid @panel-default-border; } } // Common icon styles .plupload_header:after, .plupload_filelist:empty:before, .plupload_filelist li.plupload_droptext:before, .plupload_file_action:after, .plupload_delete a:after, .plupload_failed a:after, .plupload_done a:after { font-family: 'icomoon'; display: inline-block; font-size: @icon-font-size; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Header (hidden by default) .plupload_header { display: none; position: relative; background-color: @color-info-700; margin: -1px -1px 0 -1px; .border-top-radius(@border-radius-base); &:after { content: '\ec78'; color: #fff; font-size: (@icon-font-size * 2); position: absolute; top: 50%; left: @content-padding-large; margin-top: -(@icon-font-size); } } .plupload_header_content { padding: @content-padding-base @content-padding-large; padding-left: ((@content-padding-large * 2 ) + (@icon-font-size * 2)); color: #fff; } .plupload_header_title { font-size: @font-size-h6; font-weight: 500; } .plupload_header_text { font-size: @font-size-mini; line-height: @line-height-mini; } // Helpers .plupload_clear, .plupload_clearer { clear: both; } .plupload_clearer, .plupload_progress_bar { display: block; font-size: 0; line-height: 0; } // Buttons // ------------------------------ // Action buttons .plupload_button { display: inline-block; color: #fff; background-color: @brand-primary; border: 1px solid transparent; padding: @padding-small-vertical @padding-small-horizontal; border-radius: @border-radius-small; margin-right: 5px; &:hover, &:focus { color: #fff; .opacity(0.9); } &:active { .opacity(1); } } // Disabled button a.plupload_disabled { &, &:hover, &:focus { color: @text-muted; box-shadow: none; border-color: #ddd; background: #fcfcfc; cursor: default; .opacity(1); } } // Start upload button .plupload_start { background-color: @color-teal-400; } // File list // ------------------------------ // Itself .plupload_filelist { margin: 0; padding: 0; list-style: none; // Scrollable area .plupload_scroll & { height: 250px; background: #fff; overflow-y: auto; @media (max-width: @screen-xs-max) { height: 200px; } } // List item li { padding: 12px @content-padding-large; background-color: #fff; &:hover { background-color: @dropdown-link-hover-bg; } &.plupload_droptext:hover { background-color: transparent; } } // Add background icon with text &:empty, li.plupload_droptext { position: relative; height: 250px; text-align: center; background-color: transparent; text-indent: -99999px; // Icon &:before { content: '\ea0e'; font-size: (@icon-font-size * 5); padding-top: 65px; position: absolute; top: 0; width: (@icon-font-size * 5); height: (@icon-font-size * 5); left: 50%; margin-left: -(@icon-font-size * 2.5); z-index: 2; color: #ddd; text-indent: 0; font-weight: normal; } // Text label &:after { content: 'Drag files to upload'; font-size: @font-size-h4; position: absolute; top: 50%; padding-top: 145px; left: 50%; margin: -100px 0 0 -150px; width: 300px; height: 200px; color: #bbb; text-indent: 0; } @media (max-width: @screen-xs-max) { height: 200px; &:before, &:after { width: 100%; height: 200px; left: 0; margin: 0; top: 0; } &:before { font-size: (@icon-font-size * 4); padding-top: 40px; } &:after { font-size: @font-size-h5; border-width: 3px 0; padding-top: 120px; } } } &:empty:after { content: 'Add files to upload'; } } // Header .plupload_filelist_header { padding: @content-padding-base @content-padding-large; .plupload_file_name, .plupload_file_size, .plupload_file_status, .plupload_file_action { font-weight: 500; } } // Footer .plupload_filelist_footer { padding: @content-padding-base @content-padding-large; .plupload_file_size, .plupload_file_status, .plupload_upload_status { padding: @padding-base-vertical 0; font-weight: 500; } @media (max-width: @screen-xs-max) { .plupload_file_action, .plupload_file_status, .plupload_file_size, .plupload_progress { display: none; } } } // Indicators // ------------------------------ // File action indicator .plupload_file_action { position: relative; float: right; margin-left: 30px; margin-top: 2px; color: @gray-light; width: @icon-font-size; height: @icon-font-size; * { display: none; } // Add icon to the header and footer &:after { content: '\ec67'; position: absolute; left: 0; top: 0; } // Extra margin at the bottom because of the buttons .plupload_filelist_footer & { margin-top: 9px; } // Remove icons in the file list .plupload_filelist &:after { content: none; } // Delete button .plupload_delete & { > a { color: @text-color; line-height: 1; .opacity(0.5); &:hover { .opacity(1); } } } } // Uploading indicator .plupload_uploading { background-color: @color-success-50; } // Delete button .plupload_delete a:after { content: '\ed6b'; } // Failed indicator .plupload_failed a { color: @brand-danger; cursor: default; &:after { content: '\e9cf'; } } // Done indicator .plupload_done { color: @gray-light; a { color: @color-teal-300; cursor: default; &:after { content: '\e9db'; } } } // Progress indicators .plupload_progress, .plupload_upload_status { display: none; } .plupload_progress_container { margin-top: 14px; background-color: @gray-lighter; } .plupload_progress_bar { width: 0px; height: 4px; background: @color-teal-300; border-radius: @border-radius-large; } // Responsive styles // ------------------------------ @media (min-width: @screen-sm) { .plupload_file_name { float: left; overflow: hidden; .plupload_filelist & { width: 205px; white-space: nowrap; text-overflow: ellipsis; } } .plupload_file_size, .plupload_file_status, .plupload_progress { float: right; width: 80px; } .plupload_file_size, .plupload_file_status, .plupload_file_action { text-align: right; } }