Browse Source

Updates to release v4.4.5 fixes #1086 fixes #1087

Kartik Visweswaran 7 years ago
parent
commit
3720e21c0f
66 changed files with 903 additions and 448 deletions
  1. 9 0
      CHANGE.md
  2. 1 1
      README.md
  3. 1 1
      bower.json
  4. 11 1
      css/fileinput-rtl.css
  5. 2 2
      css/fileinput-rtl.min.css
  6. 26 7
      css/fileinput.css
  7. 1 1
      css/fileinput.min.css
  8. 1 1
      examples/index.html
  9. 59 38
      js/fileinput.js
  10. 1 1
      js/fileinput.min.js
  11. 1 0
      js/locales/LANG.js
  12. 1 0
      js/locales/ar.js
  13. 1 0
      js/locales/az.js
  14. 1 0
      js/locales/bg.js
  15. 1 0
      js/locales/ca.js
  16. 1 0
      js/locales/cr.js
  17. 1 0
      js/locales/cz.js
  18. 1 0
      js/locales/da.js
  19. 1 0
      js/locales/de.js
  20. 1 0
      js/locales/el.js
  21. 1 0
      js/locales/es.js
  22. 1 0
      js/locales/et.js
  23. 1 0
      js/locales/fa.js
  24. 1 0
      js/locales/fr.js
  25. 1 0
      js/locales/gl.js
  26. 1 0
      js/locales/hu.js
  27. 1 0
      js/locales/id.js
  28. 1 0
      js/locales/it.js
  29. 1 0
      js/locales/ja.js
  30. 1 0
      js/locales/kr.js
  31. 1 0
      js/locales/kz.js
  32. 1 0
      js/locales/lt.js
  33. 1 0
      js/locales/nl.js
  34. 1 0
      js/locales/no.js
  35. 1 0
      js/locales/pl.js
  36. 1 0
      js/locales/pt-BR.js
  37. 1 0
      js/locales/pt.js
  38. 1 0
      js/locales/ro.js
  39. 1 0
      js/locales/ru.js
  40. 1 0
      js/locales/sk.js
  41. 1 0
      js/locales/sl.js
  42. 1 0
      js/locales/sv.js
  43. 1 0
      js/locales/th.js
  44. 1 0
      js/locales/tr.js
  45. 1 0
      js/locales/uk.js
  46. 1 0
      js/locales/vi.js
  47. 1 0
      js/locales/zh-TW.js
  48. 1 0
      js/locales/zh.js
  49. 1 1
      nuget/Package.nuspec
  50. 1 1
      package.json
  51. 102 0
      sass/fileinput-rtl.scss
  52. 301 381
      sass/fileinput.scss
  53. 168 0
      sass/themes/explorer-fa/theme.scss
  54. 168 0
      sass/themes/explorer/theme.scss
  55. 1 1
      themes/explorer-fa/theme.css
  56. 1 1
      themes/explorer-fa/theme.js
  57. 1 1
      themes/explorer-fa/theme.min.css
  58. 1 1
      themes/explorer-fa/theme.min.js
  59. 1 1
      themes/explorer/theme.css
  60. 1 1
      themes/explorer/theme.js
  61. 1 1
      themes/explorer/theme.min.css
  62. 1 1
      themes/explorer/theme.min.js
  63. 1 1
      themes/fa/theme.js
  64. 1 1
      themes/fa/theme.min.js
  65. 1 1
      themes/gly/theme.js
  66. 1 1
      themes/gly/theme.min.js

+ 9 - 0
CHANGE.md

@@ -1,6 +1,15 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
+## version 4.4.5 (_under development_)
+
+**Date:** 24-Sep-2017
+
+- (enh #1087): Enhance SCSS/SASS styling configurations.
+- (enh #1086): New placeholder property and various caption rendering enhancements.
+- (enh #1085): Update Slovak Translations.
+- (enh #1084): Update Czech Translations.
+
 ## version 4.4.4
 
 **Date:** 21-Sep-2017

+ 1 - 1
README.md

@@ -27,7 +27,7 @@ View the [plugin documentation](http://plugins.krajee.com/file-input) and [plugi
 4. With release 4.0, AJAX uploads are supported. AJAX uploads require that the browser support HTML5 FormData and XHR2 (XMLHttpRequest 2). Most modern browsers support FormData and XHR2. The plugin will automatically degrade to normal form based submission for browsers not supporting AJAX uploads
 
 > NOTE: 
-> - The latest version of the plugin is v4.4.4. Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
+> - The latest version of the plugin is v4.4.5. Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
 > - You can use the [sass branch](https://github.com/kartik-v/bootstrap-fileinput/tree/sass) for installation using `bootstrap-sass` dependency.
 The [master branch](https://github.com/kartik-v/bootstrap-fileinput/tree/master) can be used for installation using plain `bootstrap` dependency.
 

+ 1 - 1
bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.4.4",
+    "version": "4.4.5",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

+ 11 - 1
css/fileinput-rtl.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
@@ -19,6 +19,16 @@
     margin-right: 3px;
 }
 
+.kv-rtl .file-caption-icon {
+    left: auto;
+    right: 8px;
+}
+
+.kv-rtl .file-caption.icon-visible .file-caption-name {
+    padding-left: 0;
+    padding-right: 15px;
+}
+
 .kv-rtl .close {
     float: left;
 }

+ 2 - 2
css/fileinput-rtl.min.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */.kv-rtl{direction:rtl}.kv-rtl .floating-buttons .btn-kv,.kv-rtl .kv-zoom-actions .btn-kv{margin-left:0;margin-right:3px}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .float-right{float:left!important}.kv-rtl .float-left{float:right!important}.kv-rtl .kv-zoom-title{direction:ltr}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{float:right}
+ */.kv-rtl{direction:rtl}.kv-rtl .floating-buttons .btn-kv,.kv-rtl .kv-zoom-actions .btn-kv{margin-left:0;margin-right:3px}.kv-rtl .file-caption-icon{left:auto;right:8px}.kv-rtl .file-caption.icon-visible .file-caption-name{padding-left:0;padding-right:15px}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .float-right{float:left!important}.kv-rtl .float-left{float:right!important}.kv-rtl .kv-zoom-title{direction:ltr}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{float:right}

+ 26 - 7
css/fileinput.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -90,15 +90,33 @@ input[type=file].file-loading, .file-loading input[type=file] {
     display: block;
 }
 
-.file-caption-name {
+.file-caption {
+    position: relative;
+}
+
+.file-caption .file-caption-name {
+    width: 100%;
+    margin:0;
+    padding:0;
+    box-shadow: none;
+    border: none;
+    background: none;
+    outline: none;
+}
+
+.file-caption-icon {
+    display: none;
+    position: absolute;
+    line-height: 1;
+    left: 8px;
+}
+
+.file-caption.icon-visible .file-caption-icon {
     display: inline-block;
-    overflow: hidden;
-    height: 20px;
-    word-break: break-all;
 }
 
-.input-group-lg .file-caption-name {
-    height: 25px;
+.file-caption.icon-visible .file-caption-name {
+    padding-left: 15px;
 }
 
 .file-error-message {
@@ -546,6 +564,7 @@ input[type=file].file-loading, .file-loading input[type=file] {
     text-overflow: ellipsis;
 }
 
+
 @media screen and (max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;

File diff suppressed because it is too large
+ 1 - 1
css/fileinput.min.css


+ 1 - 1
examples/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- release v4.4.4, copyright 2014 - 2017 Kartik Visweswaran -->
+<!-- release v4.4.5, copyright 2014 - 2017 Kartik Visweswaran -->
 <!--suppress JSUnresolvedLibraryURL -->
 <html lang="en">
 <head>

+ 59 - 38
js/fileinput.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Author: Kartik Visweswaran
@@ -374,7 +374,7 @@
             self.cancelling = false;
         },
         _init: function (options, refreshMode) {
-            var self = this, $el = self.$element, $cont, t, tmp;
+            var self = this, f, $el = self.$element, $cont, t, tmp;
             self.options = options;
             $.each(options, function (key, value) {
                 switch (key) {
@@ -445,11 +445,17 @@
             self.$btnUpload = $cont.find('.fileinput-upload');
             self.$captionContainer = $h.getElement(options, 'elCaptionContainer', $cont.find('.file-caption'));
             self.$caption = $h.getElement(options, 'elCaptionText', $cont.find('.file-caption-name'));
+            if (!$h.isEmpty(self.msgPlaceholder)) {
+                f = $el.attr('multiple') ? self.filePlural : self.fileSingle;
+                self.$caption.attr('placeholder', self.msgPlaceholder.replace('{files}', f));
+            }
+            self.$captionIcon = self.$captionContainer.find('.file-caption-icon');
             self.$previewContainer = $h.getElement(options, 'elPreviewContainer', $cont.find('.file-preview'));
             self.$preview = $h.getElement(options, 'elPreviewImage', $cont.find('.file-preview-thumbnails'));
             self.$previewStatus = $h.getElement(options, 'elPreviewStatus', $cont.find('.file-preview-status'));
             self.$errorContainer = $h.getElement(options, 'elErrorContainer',
                 self.$previewContainer.find('.kv-fileinput-error'));
+            self._validateDisabled();
             if (!$h.isEmpty(self.msgErrorClass)) {
                 $h.addCss(self.$errorContainer, self.msgErrorClass);
             }
@@ -481,30 +487,31 @@
             tMain1 = '{preview}\n' +
                 '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n' +
                 '<div class="input-group {class}">\n' +
-                '   {caption}\n' +
-                '   <div class="input-group-btn">\n' +
-                '       {remove}\n' +
-                '       {cancel}\n' +
-                '       {upload}\n' +
-                '       {browse}\n' +
-                '   </div>\n' +
+                '  {caption}\n' +
+                '  <div class="input-group-btn">\n' +
+                '    {remove}\n' +
+                '    {cancel}\n' +
+                '    {upload}\n' +
+                '    {browse}\n' +
+                '  </div>\n' +
                 '</div>';
             tMain2 = '{preview}\n<div class="kv-upload-progress kv-hidden"></div>\n<div class="clearfix"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n';
             tPreview = '<div class="file-preview {class}">\n' +
-                '    {close}' +
-                '    <div class="{dropClass}">\n' +
+                '  {close}' +
+                '  <div class="{dropClass}">\n' +
                 '    <div class="file-preview-thumbnails">\n' +
                 '    </div>\n' +
                 '    <div class="clearfix"></div>' +
                 '    <div class="file-preview-status text-center text-success"></div>\n' +
                 '    <div class="kv-fileinput-error"></div>\n' +
-                '    </div>\n' +
+                '  </div>\n' +
                 '</div>';
             tClose = '<button type="button" class="close fileinput-remove">&times;</button>\n';
-            tFileIcon = '<i class="glyphicon glyphicon-file kv-caption-icon"></i>';
-            tCaption = '<div tabindex="500" class="form-control file-caption {class}">\n' +
-                '   <div class="file-caption-name"></div>\n' +
-                '</div>\n';
+            tFileIcon = '<i class="glyphicon glyphicon-file"></i>';
+            tCaption = '<div class="file-caption form-control {class}" tabindex="500">\n' +
+                '  <span class="file-caption-icon"></span>\n' +
+                '  <input class="file-caption-name" onkeydown="return false;" onpaste="return false;">\n' +
+                '</div>';
             //noinspection HtmlUnknownAttribute
             tBtnDefault = '<button type="{type}" tabindex="500" title="{title}" class="{css}" ' +
                 '{status}>{icon} {label}</button>';
@@ -996,10 +1003,17 @@
                 });
             }
         },
+        _setValidationError: function(css) {
+            var self = this;
+            css = (css ? css + ' ' : '') + 'has-error';
+            self.$container.removeClass(css).addClass('has-error');
+            $h.addCss(self.$captionContainer, 'is-invalid');
+        },
         _resetErrors: function (fade) {
             var self = this, $error = self.$errorContainer;
             self.isError = false;
             self.$container.removeClass('has-error');
+            self.$captionContainer.removeClass('is-invalid');
             $error.html('');
             if (fade) {
                 $error.fadeOut('slow');
@@ -1014,7 +1028,7 @@
             }
             msg = self.msgFoldersNotAllowed.replace('{n}', folders);
             self._addError(msg);
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError();
             $error.fadeIn(800);
             self._raise('filefoldererror', [folders, msg]);
         },
@@ -1028,8 +1042,7 @@
             }
             $error.fadeIn(800);
             self._raise(ev, [params, msg]);
-            self.$container.removeClass('file-input-new');
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError('file-input-new');
             return true;
         },
         _showError: function (msg, params, event) {
@@ -1042,8 +1055,7 @@
             if (!self.isAjaxUpload) {
                 self._clearFileInput();
             }
-            self.$container.removeClass('file-input-new');
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError('file-input-new');
             self.$btnUpload.attr('disabled', true);
             return true;
         },
@@ -1057,7 +1069,7 @@
             $error.fadeIn(800);
             self._raise('fileerror', [params, msg]);
             self._clearFileInput();
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError();
         },
         _parseError: function (operation, jqXHR, errorThrown, fileName) {
             /** @namespace jqXHR.responseJSON */
@@ -2498,12 +2510,14 @@
             });
         },
         _hideFileIcon: function () {
-            if (this.overwriteInitial) {
-                this.$captionContainer.find('.kv-caption-icon').hide();
+            var self = this;
+            if (self.overwriteInitial) {
+                self.$captionContainer.removeClass('icon-visible');
             }
         },
         _showFileIcon: function () {
-            this.$captionContainer.find('.kv-caption-icon').show();
+            var self = this;
+            $h.addCss(self.$captionContainer, 'icon-visible');
         },
         _getSize: function (bytes) {
             var self = this, size = parseFloat(bytes), i, func = self.fileSizeGetter, sizes, out;
@@ -2875,7 +2889,7 @@
             if (self.isError) {
                 self.$previewContainer.removeClass('file-thumb-loading');
                 self.$previewStatus.html('');
-                self.$captionContainer.find('.kv-caption-icon').hide();
+                self.$captionContainer.removeClass('icon-visible');
             } else {
                 self._showFileIcon();
             }
@@ -3189,17 +3203,18 @@
         _initCaption: function () {
             var self = this, cap = self.initialCaption || '';
             if (self.overwriteInitial || $h.isEmpty(cap)) {
-                self.$caption.html('');
+                self.$caption.val('');
                 return false;
             }
             self._setCaption(cap);
             return true;
         },
         _setCaption: function (content, isError) {
-            var self = this, title, out, n, cap, stack = self.getFileStack();
+            var self = this, title, out, icon, n, cap, stack = self.getFileStack();
             if (!self.$caption.length) {
                 return;
             }
+            self.$captionContainer.removeClass('icon-visible');
             if (isError) {
                 title = $('<div>' + self.msgValidationError + '</div>').text();
                 n = stack.length;
@@ -3208,18 +3223,19 @@
                 } else {
                     cap = self._getMsgSelected(self.msgNo);
                 }
-                out = '<span class="' + self.msgValidationErrorClass + '">' + self.msgValidationErrorIcon +
-                    ($h.isEmpty(content) ? cap : content) + '</span>';
+                out = $h.isEmpty(content) ? cap : content;
+                icon = '<span class="' + self.msgValidationErrorClass + '">' + self.msgValidationErrorIcon + '</span>';
             } else {
                 if ($h.isEmpty(content)) {
                     return;
                 }
                 title = $('<div>' + content + '</div>').text();
-                out = self._getLayoutTemplate('fileIcon') + title;
+                out = title;
+                icon = self._getLayoutTemplate('fileIcon');
             }
-            self.$caption.html(out);
-            self.$caption.attr('title', title);
-            self.$captionContainer.find('.file-caption-ellipsis').attr('title', title);
+            self.$captionContainer.addClass('icon-visible');
+            self.$caption.attr('title', title).val(out);
+            self.$captionIcon.html(icon);
         },
         _createContainer: function () {
             var self = this, attribs = {"class": 'file-input file-input-new' + (self.rtl ? ' kv-rtl' : '')},
@@ -3236,6 +3252,11 @@
             $container.before(self.$element);
             $container.html(self._renderMain());
             self._initBrowse($container);
+            self._validateDisabled();
+        },
+        _validateDisabled: function() {
+            var self = this;
+            self.$caption.attr({readonly: self.isDisabled});
         },
         _renderMain: function () {
             var self = this,
@@ -3478,7 +3499,7 @@
                     n = (self.autoReplace && len > self.maxFileCount) ? len : total;
                     msg = self.msgFilesTooMany.replace('{m}', self.maxFileCount).replace('{n}', n);
                     self.isError = throwError(msg, null, null, null);
-                    self.$captionContainer.find('.kv-caption-icon').hide();
+                    self.$captionContainer.removeClass('icon-visible');
                     self._setCaption('', true);
                     self.$container.removeClass('file-input-new file-input-ajax-new');
                     return;
@@ -3665,14 +3686,13 @@
                 }
                 self.$preview.html('');
                 cap = (!self.overwriteInitial && self.initialCaption.length > 0) ? self.initialCaption : '';
-                self.$caption.html(cap);
-                self.$caption.attr('title', '');
+                self.$caption.attr('title', '').val(cap);
                 $h.addCss(self.$container, 'file-input-new');
                 self._validateDefaultPreview();
             }
             if (self.$container.find($h.FRAMES).length === 0) {
                 if (!self._initCaption()) {
-                    self.$captionContainer.find('.kv-caption-icon').hide();
+                    self.$captionContainer.removeClass('icon-visible');
                 }
             }
             self._hideFileIcon();
@@ -4004,6 +4024,7 @@
         msgNo: 'No',
         msgNoFilesSelected: 'No files selected',
         msgCancelled: 'Cancelled',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailed Preview',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

File diff suppressed because it is too large
+ 1 - 1
js/fileinput.min.js


+ 1 - 0
js/locales/LANG.js

@@ -24,6 +24,7 @@
         msgNo: 'No',
         msgNoFilesSelected: 'No files selected',
         msgCancelled: 'Cancelled',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailed Preview',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/ar.js

@@ -25,6 +25,7 @@
         msgNo: 'لا',
         msgNoFilesSelected: '',
         msgCancelled: 'ألغيت',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'معاينة تفصيلية',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/az.js

@@ -25,6 +25,7 @@
         msgNo: 'xeyir',
         msgNoFilesSelected: 'Heç bir fayl seçilməmişdir',
         msgCancelled: 'İmtina edildi',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'İlkin baxış',
         msgFileRequired: 'Yükləmə üçün fayl seçməlisiniz.',
         msgSizeTooSmall: 'Seçdiyiniz "{name}" faylının həcmi (<b>{size} KB</b>)-dır,  minimum <b>{minSize} KB</b> olmalıdır.',

+ 1 - 0
js/locales/bg.js

@@ -24,6 +24,7 @@
         msgNo: 'Не',
         msgNoFilesSelected: '',
         msgCancelled: 'Отменен',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Детайлен преглед',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/ca.js

@@ -24,6 +24,7 @@
         msgNo: 'No',
         msgNoFilesSelected: '',
         msgCancelled: 'cancel·lat',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Vista prèvia detallada',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/cr.js

@@ -25,6 +25,7 @@
         msgNo: 'Ne',
         msgNoFilesSelected: '',
         msgCancelled: 'Otkazan',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detaljni pregled',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/cz.js

@@ -24,6 +24,7 @@
         msgNo: 'Ne',
         msgNoFilesSelected: 'Nevybrány žádné soubory',
         msgCancelled: 'Zrušeno',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailní náhled',
         msgFileRequired: 'Musíte vybrat soubor, který chcete nahrát.',
         msgSizeTooSmall: 'Soubor "{name}" (<b>{size} KB</b>) je příliš malý, musí mít velikost nejméně <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/da.js

@@ -24,6 +24,7 @@
         msgNo: 'Ingen',
         msgNoFilesSelected: '',
         msgCancelled: 'aflyst',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detaljeret visning',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/de.js

@@ -22,6 +22,7 @@
         msgNo: 'Keine',
         msgNoFilesSelected: 'Keine Dateien ausgewählt',
         msgCancelled: 'Abgebrochen',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'ausführliche Vorschau',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/el.js

@@ -24,6 +24,7 @@
         msgNo: 'Όχι',
         msgNoFilesSelected: 'Δεν επιλέχθηκαν αρχεία',
         msgCancelled: 'Ακυρώθηκε',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Λεπτομερής Προεπισκόπηση',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'Το "{name}" (<b>{size} KB</b>) είναι πολύ μικρό, πρέπει να είναι μεγαλύτερο από <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/es.js

@@ -24,6 +24,7 @@
         msgNo: 'No',
         msgNoFilesSelected: 'No hay archivos seleccionados',
         msgCancelled: 'Cancelado',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Vista previa detallada',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'El archivo "{name}" (<b>{size} KB</b>) es demasiado pequeño y debe ser mayor de <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/et.js

@@ -24,6 +24,7 @@
         msgNo: 'No',
         msgNoFilesSelected: 'No files selected',
         msgCancelled: 'Cancelled',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailed Preview',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/fa.js

@@ -25,6 +25,7 @@
         msgNo: 'نه',
         msgNoFilesSelected: 'هیچ فایلی انتخاب نشده است',
         msgCancelled: 'لغو شد',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'نمایش با جزییات',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'فایل "{name}" (<b>{size} کیلوبایت</b>) خیلی کوچک است و باید از <b>{minSize} کیلوبایت بزرگتر باشد</b>.',

+ 1 - 0
js/locales/fr.js

@@ -24,6 +24,7 @@
         msgNo: 'Non',
         msgNoFilesSelected: '',
         msgCancelled: 'Annulé',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Aperçu détaillé',
         msgFileRequired: 'Vous devez sélectionner un fichier à uploader.',
         msgSizeTooSmall: 'Le fichier "{name}" (<b>{size} KB</b>) est inférieur à la taille minimale de <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/gl.js

@@ -24,6 +24,7 @@
         msgNo: 'Non',
         msgNoFilesSelected: 'Non hay arquivos seleccionados',
         msgCancelled: 'Cancelado',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Vista previa detallada',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'O arquivo "{name}" (<b>{size} KB</b>) é demasiado pequeño e debe ser maior de <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/hu.js

@@ -24,6 +24,7 @@
         msgNo: 'Nem',
         msgNoFilesSelected: 'Nincs fájl kiválasztva',
         msgCancelled: 'Megszakítva',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Részletes Előnézet',
         msgFileRequired: 'Kötelező fájlt kiválasztani a feltöltéshez.',
         msgSizeTooSmall: 'A fájl: "{name}" (<b>{size} KB</b>) mérete túl kicsi, nagyobbnak kell lennie, mint <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/id.js

@@ -25,6 +25,7 @@
         msgNo: 'Tidak',
         msgNoFilesSelected: '',
         msgCancelled: 'Dibatalkan',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Pratinjau terperinci',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/it.js

@@ -26,6 +26,7 @@
         msgNo: 'No',
         msgNoFilesSelected: '',
         msgCancelled: 'Annullato',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Anteprima dettagliata',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/ja.js

@@ -31,6 +31,7 @@
         msgNo: 'いいえ',
         msgNoFilesSelected: 'ファイルが選択されていません',
         msgCancelled: 'キャンセル',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'プレビュー',
         msgFileRequired: 'ファイルを選択してください',
         msgSizeTooSmall: 'ファイル"{name}" (<b>{size} KB</b>)はアップロード可能な下限容量<b>{minSize} KB</b>より小さいです',

+ 1 - 0
js/locales/kr.js

@@ -24,6 +24,7 @@
         msgNo: '아니요',
         msgNoFilesSelected: '선택한 파일이 없습니다.',
         msgCancelled: '취소되었습니다.',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: '자세한 미리보기',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: '파일 "{name}" (<b>{size} KB</b>)이 너무 작습니다. <b>{minSize} KB</b>보다 용량이 커야 합니다..',

+ 1 - 0
js/locales/kz.js

@@ -25,6 +25,7 @@
         msgNo: 'жоқ',
         msgNoFilesSelected: 'Файл таңдалмады',
         msgCancelled: 'Күші жойылған',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Алдын ала толық көру',
         msgSizeTooLarge: 'Файл "{name}" (<b>{size} KB</b>) ең үлкен <b>{maxSize} KB</b> өлшемінен асады.',
         msgFilesTooLess: 'Жүктеу үшіy кемінде <b>{n}</b> {files} таңдау керек.',

+ 1 - 0
js/locales/lt.js

@@ -25,6 +25,7 @@
         msgNo: 'Ne',
         msgNoFilesSelected: 'Nepasirinkta jokių failų',
         msgCancelled: 'Atšaukta',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detali Peržiūra',
         msgFileRequired: 'Pasirinkite failą įkėlimui.',
         msgSizeTooSmall: 'Failas "{name}" (<b>{size} KB</b>) yra per mažas ir turi būti didesnis nei <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/nl.js

@@ -24,6 +24,7 @@
         msgNo: 'Nee',
         msgNoFilesSelected: '',
         msgCancelled: 'Geannuleerd',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Gedetailleerd voorbeeld',
         msgFileRequired: 'U moet een bestand kiezen om te uploaden.',
         msgSizeTooSmall: 'Bestand "{name}" (<b>{size} KB</b>) is te klein en moet groter zijn dan <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/no.js

@@ -24,6 +24,7 @@
         msgNo: 'Nei',
         msgNoFilesSelected: 'Ingen filer er valgt',
         msgCancelled: 'Avbrutt',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detaljert visning',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'Filen "{name}" (<b>{size} KB</b>) er for liten og må være større enn <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/pl.js

@@ -24,6 +24,7 @@
         msgNo: 'Nie',
         msgNoFilesSelected: 'Brak zaznaczonych plików',
         msgCancelled: 'Odwołany',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Szczegółowy podgląd',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'Plik "{name}" (<b>{size} KB</b>) jest zbyt mały i musi być większy niż <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/pt-BR.js

@@ -24,6 +24,7 @@
         msgNo: 'Não',
         msgNoFilesSelected: 'Nenhum arquivo selecionado',
         msgCancelled: 'Cancelado',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Pré-visualização detalhada',
         msgFileRequired: 'Você deve selecionar um arquivo para enviar.',
         msgSizeTooSmall: 'O arquivo "{name}" (<b>{size} KB</b>) é muito pequeno e deve ser maior que <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/pt.js

@@ -24,6 +24,7 @@
         msgNo: 'Não',
         msgNoFilesSelected: '',
         msgCancelled: 'Cancelado',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Pré-visualização detalhada',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/ro.js

@@ -25,6 +25,7 @@
         msgNo: 'Nu',
         msgNoFilesSelected: '',
         msgCancelled: 'Anulat',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Previzualizare detaliată',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/ru.js

@@ -25,6 +25,7 @@
         msgNo: 'нет',
         msgNoFilesSelected: '',
         msgCancelled: 'Отменено',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Подробное превью',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'Файл "{name}" (<b>{size} KB</b>) имеет слишком маленький размер и должен быть больше <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/sk.js

@@ -24,6 +24,7 @@
         msgNo: 'Nie',
         msgNoFilesSelected: '',
         msgCancelled: 'Zrušené',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailný náhľad',
         msgFileRequired: 'Musíte vybrať súbor, ktorý chcete nahrať.',
         msgSizeTooSmall: 'Súbor "{name}" (<b>{size} KB</b>) je príliš malý, musí mať veľkosť najmenej <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/sl.js

@@ -25,6 +25,7 @@
         msgNo: 'Ne',
         msgNoFilesSelected: 'Nobena datoteka ni izbrana',
         msgCancelled: 'Preklicano',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Podroben predogled',
         msgSizeTooLarge: 'Datoteka "{name}" (<b>{size} KB</b>) presega največjo dovoljeno velikost za nalaganje <b>{maxSize} KB</b>.',
         msgFilesTooLess: 'Za nalaganje morate izbrati vsaj <b>{n}</b> {files}.',

+ 1 - 0
js/locales/sv.js

@@ -24,6 +24,7 @@
         msgNo: 'Nej',
         msgNoFilesSelected: 'Inga filer valda',
         msgCancelled: 'Avbruten',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'detaljerad förhandsgranskning',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'Filen "{name}" (<b>{size} KB</b>) är för liten och måste vara större än <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/th.js

@@ -24,6 +24,7 @@
         msgNo: 'ไม่',
         msgNoFilesSelected: '',
         msgCancelled: 'ยกเลิก',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'ตัวอย่างละเอียด',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/tr.js

@@ -24,6 +24,7 @@
         msgNo: 'Hayır',
         msgNoFilesSelected: '',
         msgCancelled: 'İptal edildi',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detaylı Önizleme',
         msgFileRequired: 'Yüklemek için bir dosya seçmelisiniz.',
         msgSizeTooSmall: '"{name}"(<b>{size} KB</b>) dosyası çok küçük  ve <b>{minSize} KB</b> boyutundan büyük olmalıdır.',

+ 1 - 0
js/locales/uk.js

@@ -25,6 +25,7 @@
         msgNo: 'Немає',
         msgNoFilesSelected: '',
         msgCancelled: 'Cкасовано',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Детальний превью',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/vi.js

@@ -25,6 +25,7 @@
         msgNo: 'Không',
         msgNoFilesSelected: 'Không tập tin nào được chọn',
         msgCancelled: 'Đã hủy',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Chi tiết xem trước',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/zh-TW.js

@@ -26,6 +26,7 @@
         msgNoFilesSelected: '',
         msgCancelled: '取消',
         zoomTitle: '詳細資料',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: '內容預覽',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',

+ 1 - 0
js/locales/zh.js

@@ -25,6 +25,7 @@
         msgNo: '没有',
         msgNoFilesSelected: '',
         msgCancelled: '取消',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: '详细预览',
         msgFileRequired: '必须选择一个文件上传.',
         msgSizeTooSmall: '文件 "{name}" (<b>{size} KB</b>) 必须大于限定大小 <b>{minSize} KB</b>.',

+ 1 - 1
nuget/Package.nuspec

@@ -3,7 +3,7 @@
   <metadata>
     <id>bootstrap-fileinput</id>
 	<title>bootstrap-fileinput</title>
-    <version>4.4.4</version>
+    <version>4.4.5</version>
     <authors>Kartik Visweswaran</authors>
     <owners>Kartik Visweswaran</owners>
     <licenseUrl>https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md</licenseUrl>

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.4.4",
+    "version": "4.4.5",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

+ 102 - 0
sass/fileinput-rtl.scss

@@ -0,0 +1,102 @@
+/*!
+ * bootstrap-fileinput v4.4.5
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+
+.kv-rtl {
+  direction: rtl;
+  .kv-zoom-actions .btn-kv, .floating-buttons .btn-kv {
+    margin-left: 0;
+    margin-right: 3px;
+  }
+  .file-caption-icon {
+    left: auto;
+    right: 10px;
+    margin: 0 0 0 10px;
+  }
+  .file-caption.icon-visible {
+    .file-caption-name {
+      padding-left: 0;
+      padding-right: 30px;
+    }
+    .input-group-lg .file-caption-name {
+      padding-right: 34px;
+    }
+  }
+  .close {
+    float: left;
+  }
+  .input-group-btn:last-child > .btn {
+    border-radius: 4px 0 0 4px;
+  }
+  .input-group .form-control:first-child {
+    border-radius: 0 4px 4px 0;
+  }
+  .btn-file input[type=file] {
+    right: auto;
+    left: 0;
+    text-align: left;
+    background: none repeat scroll 100% 0 transparent;
+  }
+  .file-zoom-dialog {
+    text-align: right;
+  }
+  .file-error-message {
+    pre, ul {
+      text-align: right;
+    }
+  }
+  .file-drop-zone {
+    margin: 12px 12px 12px 15px;
+  }
+  .floating-buttons {
+    left: 10px;
+    right: auto;
+  }
+  .btn-prev {
+    right: 1px;
+    left: auto;
+  }
+  .btn-next {
+    left: 1px;
+    right: auto;
+  }
+  .pull-right {
+    float: left !important;
+  }
+  .pull-left {
+    float: right !important;
+  }
+  .float-right {
+    float: left !important;
+  }
+  .float-left {
+    float: right !important;
+  }
+  .kv-zoom-title {
+    direction: ltr;
+  }
+  .krajee-default {
+    &.file-preview-frame {
+      box-shadow: -1px 1px 5px 0 #a2958a;
+      float: right;
+      &:not(.file-preview-error):hover {
+        box-shadow: -3px 3px 5px 0 #333;
+      }
+    }
+    .file-actions, .file-other-error {
+      float: left;
+    }
+    .file-drag-handle, .file-upload-indicator {
+      float: right;
+    }
+  }
+}

+ 301 - 381
sass/fileinput.scss

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -11,31 +11,40 @@
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
 
-// Default Variables
-// --------------------------
-
-$bootstrap-fileinput-img-path: "../img" !default;
-
-// COMMON STYLES
-// --------------------------
-$color_1: #999;
-$color_2: #a94442;
-$color_3: green;
-$color_4: #428bca;
-$color_5: #777;
-$color_6: #000;
-$color_7: #aaa;
-$color_8: #1c94c4;
-$font_family_1: Menlo, Monaco, Consolas, "Courier New", monospace;
-$background_color_1: #f2dede;
-$background_color_2: #eeeeee;
-$background_color_3: #f0f0f0;
-$background_color_4: #d9edf7;
-
 .kv-hidden {
   display: none;
 }
 
+// exif orientations
+.rotate-2 {
+  transform: rotateY(180deg);
+}
+
+.rotate-3 {
+  transform: rotate(180deg);
+}
+
+.rotate-4 {
+  transform: rotate(180deg) rotateY(180deg);
+}
+
+.rotate-5 {
+  transform: rotate(270deg) rotateY(180deg);
+}
+
+.rotate-6 {
+  transform: rotate(90deg);
+}
+
+.rotate-7 {
+  transform: rotate(90deg) rotateY(180deg);
+}
+
+.rotate-8 {
+  transform: rotate(270deg);
+}
+
+// other styles
 input[type=file].file-loading {
   width: 0;
   height: 0;
@@ -54,13 +63,10 @@ input[type=file].file-loading {
     line-height: 16px;
     font-size: 13px;
     font-variant: small-caps;
-    color: $color_1;
-    background: transparent url('#{$bootstrap-fileinput-img-path}/loading.gif') top left no-repeat;
+    color: #999;
+    background: transparent url('../img/loading.gif') top left no-repeat;
   }
-}
-
-.file-loading[dir=rtl] {
-  &:before {
+  &[dir=rtl]:before {
     background: transparent url('../img/loading.gif') top right no-repeat;
     padding-left: 0;
     padding-right: 20px;
@@ -87,104 +93,110 @@ input[type=file].file-loading {
     cursor: inherit;
     display: block;
   }
-  &::-ms-browse {
-    font-size: 10000px;
-    width: 100%;
-    height: 100%;
-  }
 }
 
-.file-preview {
-  .btn-xs {
-    padding: 1px 5px;
-    font-size: 12px;
-    line-height: 1.5;
-    border-radius: 3px;
-  }
-  border-radius: 5px;
-  border: 1px solid #ddd;
-  padding: 5px;
-  width: 100%;
-  margin-bottom: 5px;
-  .clickable {
-    cursor: pointer;
+.file-caption {
+  position: relative;
+  .file-caption-name {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border: none;
+    background: none;
+    outline: none;
   }
 }
 
-.file-caption-name {
-  display: inline-block;
-  overflow: hidden;
-  height: 20px;
-  word-break: break-all;
+.file-caption-icon {
+  display: none;
+  position: absolute;
+  line-height: 1;
+  left: 8px;
 }
 
-.input-group-lg {
+.file-caption.icon-visible {
+  .file-caption-icon {
+    display: inline-block;
+  }
   .file-caption-name {
-    height: 25px;
+    padding-left: 15px;
   }
 }
 
 .file-error-message {
-  color: $color_2;
-  background-color: $background_color_1;
+  color: #a94442;
+  background-color: #f2dede;
   margin: 5px;
   border: 1px solid #ebccd1;
   border-radius: 4px;
   padding: 15px;
-  //noinspection CssOverwrittenProperties
-  pre {
+  pre, ul {
     margin: 0;
     text-align: left;
-    margin: 5px 0;
   }
-  ul {
-    margin: 0;
-    text-align: left;
+  pre {
+    margin: 5px 0;
   }
 }
 
 .file-caption-disabled {
-  background-color: $background_color_2;
+  background-color: #eeeeee;
   cursor: not-allowed;
   opacity: 1;
 }
 
-.file-preview-image {
-  font: 40px Impact, Charcoal, sans-serif;
-  color: $color_3;
-}
-
-.krajee-default.file-preview-frame {
-  position: relative;
-  display: table;
-  margin: 8px;
+.file-preview {
+  border-radius: 5px;
   border: 1px solid #ddd;
-  box-shadow: 1px 1px 5px 0 #a2958a;
-  padding: 6px;
-  float: left;
-  text-align: center;
-  &:not(.file-preview-error) {
-    &:hover {
-      box-shadow: 3px 3px 5px 0 #333;
-    }
-  }
-  .kv-file-content {
-    height: 170px;
+  padding: 8px;
+  width: 100%;
+  margin-bottom: 5px;
+  position: relative;
+  .btn-xs {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
   }
-  .file-thumbnail-footer {
-    height: 70px;
+  .fileinput-remove {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    line-height: 10px;
   }
 }
 
+.file-preview-image {
+  font: 40px Impact, Charcoal, sans-serif;
+  color: green;
+}
+
 .krajee-default {
-  .file-preview-image {
-    vertical-align: middle;
+  &.file-preview-frame {
+    position: relative;
+    margin: 8px;
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 5px 0 #a2958a;
+    padding: 6px;
+    float: left;
+    text-align: center;
+    &:not(.file-preview-error):hover {
+      box-shadow: 3px 3px 5px 0 #333;
+    }
+    .kv-file-content {
+      width: 213px;
+      height: 160px;
+    }
+    .file-thumbnail-footer {
+      height: 70px;
+    }
   }
   .file-preview-text {
     display: block;
-    color: $color_4;
+    color: #428bca;
     border: 1px solid #ddd;
-    font-family: $font_family_1;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     outline: none;
     padding: 8px;
     resize: none;
@@ -194,28 +206,10 @@ input[type=file].file-loading {
     padding: 8px;
     overflow: auto;
   }
-  .file-preview-audio {
-    audio {
-      vertical-align: middle;
-    }
-  }
-  .file-preview-other {
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    text-align: center;
-    vertical-align: middle;
-    padding: 10px;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  .file-actions {
-    text-align: left;
+  .file-preview-other:hover {
+    opacity: 0.8;
   }
-  .file-other-error {
+  .file-actions, .file-other-error {
     text-align: left;
   }
   .file-other-icon {
@@ -229,29 +223,17 @@ input[type=file].file-loading {
     text-align: center;
     padding-top: 4px;
     font-size: 11px;
-    color: $color_5;
+    color: #777;
     margin-bottom: 15px;
   }
   .file-preview-error {
     opacity: 0.65;
     box-shadow: none;
   }
-  .file-preview-frame {
-    &:not(.file-preview-error) {
-      .file-footer-caption {
-        &:hover {
-          color: $color_6;
-        }
-      }
-    }
+  .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
+    color: #000;
   }
-  .file-drag-handle {
-    float: left;
-    margin: 5px 0 -5px 0;
-    width: 16px;
-    height: 16px;
-  }
-  .file-upload-indicator {
+  .file-drag-handle, .file-upload-indicator {
     float: left;
     margin: 5px 0 -5px 0;
     width: 16px;
@@ -259,16 +241,7 @@ input[type=file].file-loading {
   }
   .file-thumb-progress {
     height: 11px;
-    position: absolute;
-    top: 37px;
-    left: 0;
-    right: 0;
-    .progress {
-      height: 11px;
-      font-size: 9px;
-      line-height: 10px;
-    }
-    .progress-bar {
+    .progress, .progress-bar {
       height: 11px;
       font-size: 9px;
       line-height: 10px;
@@ -277,16 +250,13 @@ input[type=file].file-loading {
   .file-thumbnail-footer {
     position: relative;
   }
-  .file-caption-info {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
-    height: 15px;
-    margin: auto;
+  .file-thumb-progress {
+    position: absolute;
+    top: 37px;
+    left: 0;
+    right: 0;
   }
-  .file-size-info {
+  .file-caption-info, .file-size-info {
     display: block;
     white-space: nowrap;
     overflow: hidden;
@@ -295,170 +265,65 @@ input[type=file].file-loading {
     height: 15px;
     margin: auto;
   }
-}
-
-.krajee-default[data-template="audio"] {
-  .file-preview-audio {
-    display: table-cell;
-    vertical-align: middle;
-    height: 170px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+  &.kvsortable-ghost {
+    background: #e1edf7;
+    border: 2px solid #a1abff;
   }
 }
 
-.krajee-default.kvsortable-ghost {
-  background: #e1edf7;
-  border: 2px solid #a1abff;
-}
-
 .kv-upload-progress {
-  .progress {
+  .progress, .progress-bar {
     height: 20px;
     line-height: 20px;
+  }
+  .progress {
     margin: 10px 0;
     overflow: hidden;
   }
-  .progress-bar {
-    height: 20px;
-    line-height: 20px;
-  }
 }
 
-//noinspection CssOverwrittenProperties
-.file-zoom-dialog {
-  .file-other-icon {
-    font-size: 22em;
-    font-size: 50vmin;
-  }
-  .modal-dialog {
-    position: relative;
-    width: auto;
-  }
-  .modal-header {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    &:before {
-      display: none;
-    }
-    &:after {
-      display: none;
-    }
-  }
-  .btn-navigate {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    text-decoration: none;
-    outline: none;
-    opacity: 0.7;
-    top: 45%;
-    font-size: 4em;
-    color: $color_8;
-    &:not([disabled]) {
-      &:hover {
-        outline: none;
-        box-shadow: none;
-        opacity: 0.5;
-      }
-      &:focus {
-        outline: none;
-        box-shadow: none;
-        opacity: 0.5;
-      }
-    }
-  }
-  .floating-buttons {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-  }
-  .kv-zoom-actions {
-    .btn {
-      margin-left: 3px;
-    }
-  }
-  .btn-navigate[disabled] {
-    opacity: 0.3;
-  }
-  .btn-prev {
-    left: 1px;
-  }
-  .btn-next {
-    right: 1px;
-  }
-  .kv-zoom-title {
-    font-weight: 300;
-    color: $color_1;
-  }
+.file-zoom-dialog .file-other-icon {
+  //noinspection CssOverwrittenProperties
+  font-size: 22em;
+  //noinspection CssOverwrittenProperties
+  font-size: 50vmin;
 }
 
 .file-input-new {
-  .file-preview {
-    display: none;
-  }
-  .close {
-    display: none;
-  }
-  .glyphicon-file {
-    display: none;
-  }
-  .fileinput-remove-button {
-    display: none;
-  }
-  .fileinput-upload-button {
+  .file-preview, .close, .glyphicon-file, .fileinput-remove-button, .fileinput-upload-button {
     display: none;
   }
-  .no-browse {
-    .input-group-btn {
-      display: none;
-    }
-    .form-control {
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-  }
 }
 
 .file-input-ajax-new {
-  .fileinput-remove-button {
+  .fileinput-remove-button, .fileinput-upload-button {
     display: none;
   }
-  .fileinput-upload-button {
-    display: none;
-  }
-  .no-browse {
-    .input-group-btn {
-      display: none;
-    }
-    .form-control {
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-  }
 }
 
 .file-caption-main {
   width: 100%;
 }
 
+.file-input-ajax-new .no-browse .input-group-btn, .file-input-new .no-browse .input-group-btn {
+  display: none;
+}
+
+.file-input-ajax-new .no-browse .form-control, .file-input-new .no-browse .form-control {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
 .file-thumb-loading {
-  background: transparent url('#{$bootstrap-fileinput-img-path}/loading.gif') no-repeat scroll center center content-box !important;
+  background: transparent url('../img/loading.gif') no-repeat scroll center center content-box !important;
 }
 
-.file-sortable {
-  .file-drag-handle {
-    cursor: move;
-    cursor: -webkit-grabbing;
-    opacity: 1;
-    &:hover {
-      opacity: 0.7;
-    }
+.file-sortable .file-drag-handle {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  opacity: 1;
+  &:hover {
+    opacity: 0.7;
   }
 }
 
@@ -470,52 +335,81 @@ input[type=file].file-loading {
   vertical-align: middle;
   margin: 12px 15px 12px 12px;
   padding: 5px;
-  .file-preview-thumbnails {
-    cursor: default;
-  }
 }
 
 .file-drop-zone-title {
-  color: $color_7;
+  color: #aaa;
   font-size: 1.6em;
   padding: 85px 10px;
   cursor: default;
 }
 
-.clickable {
-  .file-drop-zone-title {
-    cursor: pointer;
-  }
+.file-preview .clickable, .clickable .file-drop-zone-title {
+  cursor: pointer;
 }
 
-.file-drop-zone.clickable {
-  &:hover {
-    border: 2px dashed #999;
+.file-drop-zone {
+  &.clickable {
+    &:hover {
+      border: 2px dashed #999;
+    }
+    &:focus {
+      border: 2px solid #5acde2;
+    }
   }
-  &:focus {
-    border: 2px solid #5acde2;
+  .file-preview-thumbnails {
+    cursor: default;
   }
 }
 
 .file-highlighted {
   border: 2px dashed #999 !important;
-  background-color: $background_color_3;
+  background-color: #f0f0f0;
 }
 
 .file-uploading {
-  background: url('#{$bootstrap-fileinput-img-path}/loading-sm.gif') no-repeat center bottom 10px;
+  background: url('../img/loading-sm.gif') no-repeat center bottom 10px;
   opacity: 0.65;
 }
 
-.file-zoom-fullscreen.modal {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.file-zoom-dialog {
+  .modal-dialog {
+    position: relative;
+    width: auto;
+  }
+  .modal-header {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    &:before, &:after {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .file-zoom-dialog .modal-dialog {
+    max-width: 500px;
+  }
+}
+
+@media (min-width: 992px) {
+  .file-zoom-dialog .modal-lg {
+    max-width: 800px;
+  }
 }
 
 .file-zoom-fullscreen {
+  &.modal {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
   .modal-dialog {
     position: fixed;
     margin: 0;
@@ -534,114 +428,140 @@ input[type=file].file-loading {
   }
 }
 
-.floating-buttons {
-  z-index: 3000;
-  .btn {
-    z-index: 3000;
-    margin-left: 3px;
+.file-zoom-dialog {
+  .btn-navigate {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    opacity: 0.7;
+    top: 45%;
+    font-size: 4em;
+    color: #1c94c4;
+  }
+  .floating-buttons {
+    position: absolute;
+    top: 5px;
+    right: 10px;
   }
 }
 
-.file-zoom-content {
-  height: 480px;
+.btn-kv {
+  display: inline-block;
   text-align: center;
-  .file-preview-image {
-    max-height: 100%;
-  }
-  .file-preview-video {
-    max-height: 100%;
-  }
-  > .file-object.type-image {
-    width: auto;
-    height: auto;
-    min-height: inherit;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  > .file-object.type-video {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  > .file-object.type-flash {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  > .file-object.type-audio {
-    width: auto;
-    height: 30px;
-  }
-  > .file-object.type-pdf {
-    width: 100%;
-  }
-  > .file-object.type-html {
-    width: 100%;
-  }
-  > .file-object.type-text {
-    width: 100%;
-  }
-  > .file-object.type-default {
-    width: 100%;
-  }
-  .is-portrait-gt4 {
-    margin-top: 60px;
-  }
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0;
+  font-size: 0.875rem;
+  border-radius: 0.2rem;
 }
 
-.file-preview-initial.sortable-chosen {
-  background-color: $background_color_4;
+.kv-zoom-actions .btn-kv {
+  margin-left: 3px;
 }
 
-.hide-content {
-  .kv-file-content {
-    display: none;
+.floating-buttons {
+  .btn-kv {
+    margin-left: 3px;
+    z-index: 3000;
   }
+  z-index: 3000;
 }
 
-/* exif orientations */
-.rotate-2 {
-  transform: rotateY(180deg);
+.file-zoom-dialog {
+  .btn-navigate {
+    &:not([disabled]):hover {
+      outline: none;
+      box-shadow: none;
+      opacity: 0.6;
+    }
+    &[disabled] {
+      opacity: 0.3;
+    }
+  }
+  .btn-prev {
+    left: 1px;
+  }
+  .btn-next {
+    right: 1px;
+  }
 }
 
-.rotate-3 {
-  transform: rotate(180deg);
+.file-zoom-content {
+  height: 480px;
+  text-align: center;
+  .file-preview-image, .file-preview-video {
+    max-height: 100%;
+  }
+  > .file-object {
+    &.type-image {
+      width: auto;
+      height: auto;
+      min-height: inherit;
+      max-width: 100%;
+      max-height: 100%;
+    }
+    &.type-video, &.type-flash {
+      width: auto;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+    }
+    &.type-audio {
+      width: auto;
+      height: 30px;
+    }
+    &.type-pdf, &.type-html, &.type-text, &.type-default {
+      width: 100%;
+    }
+  }
 }
 
-.rotate-4 {
-  transform: rotate(180deg) rotateY(180deg);
+.file-preview-initial.sortable-chosen {
+  background-color: #d9edf7;
 }
 
-.rotate-5 {
-  transform: rotate(270deg) rotateY(180deg);
+.hide-content .kv-file-content {
+  display: none;
 }
 
-.rotate-6 {
-  transform: rotate(90deg);
+// IE 10 fix
+.btn-file ::-ms-browse {
+  font-size: 10000px;
+  width: 100%;
+  height: 100%;
 }
 
-.rotate-7 {
-  transform: rotate(90deg) rotateY(180deg);
+.file-zoom-content .is-portrait-gt4 {
+  margin-top: 60px;
 }
 
-.rotate-8 {
-  transform: rotate(270deg);
+.file-zoom-dialog .kv-zoom-title {
+  font-weight: 300;
+  color: #999;
+  max-width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-@media (min-width: 576px) {
-  .file-zoom-dialog {
-    .modal-dialog {
-      max-width: 500px;
-    }
+@media screen and (max-width: 767px) {
+  .file-preview-thumbnails {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .file-zoom-dialog .modal-header {
+    flex-direction: column;
   }
 }
 
-@media (min-width: 992px) {
-  .file-zoom-dialog {
-    .modal-lg {
-      max-width: 800px;
-    }
+@media screen and (max-width: 350px) {
+  .krajee-default.file-preview-frame .kv-file-content {
+    width: 160px;
   }
 }

+ 168 - 0
sass/themes/explorer-fa/theme.scss

@@ -0,0 +1,168 @@
+/*!
+ * bootstrap-fileinput v4.4.5
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput.
+ * Load this theme file after loading `fileinput.css`. Ensure that
+ * font awesome assets and CSS are loaded on the page as well.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+
+.theme-explorer-fa {
+  .file-preview .table {
+    margin: 0;
+  }
+  .explorer-frame td {
+    vertical-align: middle;
+    text-align: left;
+  }
+}
+
+.explorer-frame {
+  .file-preview-text {
+    display: inline-block;
+    color: #428bca;
+    border: 1px solid #ddd;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    outline: none;
+    padding: 8px;
+    resize: none;
+  }
+  .file-preview-html {
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
+  }
+  .file-preview-other {
+    text-align: center;
+  }
+  .file-other-icon {
+    font-size: 2.6em;
+  }
+}
+
+/* noinspection CssOverwrittenProperties */
+
+.file-zoom-dialog .explorer-frame .file-other-icon {
+  font-size: 22em;
+  font-size: 50vmin;
+}
+
+.theme-explorer-fa {
+  .explorer-frame .kv-file-content {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    text-align: center;
+  }
+  .file-actions-cell {
+    width: 120px;
+    padding: 0;
+  }
+  .file-thumb-progress {
+    .progress {
+      display: block;
+      margin-top: 5px;
+      height: 13px;
+      font-size: 11px;
+      line-height: 13px;
+    }
+    .progress-bar {
+      height: 13px;
+      font-size: 11px;
+      line-height: 13px;
+    }
+  }
+  .file-actions-cell {
+    position: relative;
+  }
+  .file-upload-indicator, .file-drag-handle {
+    position: absolute;
+    display: inline-block;
+    text-align: center;
+    top: 0;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+  .explorer-caption {
+    display: block;
+    color: #777;
+  }
+  .file-actions {
+    text-align: center;
+  }
+  .kvsortable-ghost {
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
+  }
+  .file-error-message ul {
+    padding: 5px 0 0 20px;
+  }
+}
+
+/*
+ * mobile responsive styling
+ */
+@media only screen and (max-width: 767px) {
+  .theme-explorer-fa {
+    .table {
+      display: block;
+      width: 100% !important;
+      tbody, tr, td {
+        display: block;
+        width: 100% !important;
+      }
+      border: none;
+      tr {
+        margin-top: 5px;
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+      td {
+        text-align: center;
+      }
+      .kv-file-content {
+        border-bottom: none;
+        padding: 4px;
+        margin: 0;
+        .file-preview-image {
+          max-width: 100%;
+          font-size: 20px;
+        }
+      }
+    }
+    .file-details-cell {
+      border-top: none;
+      border-bottom: none;
+      padding-top: 0;
+      margin: 0;
+    }
+    .file-actions-cell {
+      border-top: none;
+      padding-bottom: 4px;
+    }
+    .explorer-frame .explorer-caption {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+    .file-upload-indicator, .file-drag-handle {
+      right: 3px;
+      bottom: 10px;
+      top: auto;
+    }
+  }
+}

+ 168 - 0
sass/themes/explorer/theme.scss

@@ -0,0 +1,168 @@
+/*!
+ * bootstrap-fileinput v4.4.5
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
+ *
+ * Author: Kartik Visweswaran
+ * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
+ *
+ * Licensed under the BSD 3-Clause
+ * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
+ */
+
+.theme-explorer {
+  .file-preview .table {
+    margin: 0;
+  }
+  .explorer-frame td {
+    vertical-align: middle;
+    text-align: left;
+  }
+}
+
+.explorer-frame {
+  .file-preview-text {
+    display: inline-block;
+    color: #428bca;
+    border: 1px solid #ddd;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    outline: none;
+    padding: 8px;
+    resize: none;
+  }
+  .file-preview-html {
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
+  }
+  .file-preview-other {
+    text-align: center;
+  }
+  .file-other-icon {
+    font-size: 2.6em;
+  }
+}
+
+/* noinspection CssOverwrittenProperties */
+
+.file-zoom-dialog .explorer-frame .file-other-icon {
+  font-size: 22em;
+  font-size: 50vmin;
+}
+
+.theme-explorer {
+  .explorer-frame .kv-file-content {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    text-align: center;
+  }
+  .file-actions-cell {
+    width: 120px;
+    padding: 0;
+  }
+  .file-thumb-progress {
+    .progress {
+      display: block;
+      margin-top: 5px;
+      height: 13px;
+      font-size: 11px;
+      line-height: 13px;
+    }
+    .progress-bar {
+      height: 13px;
+      font-size: 11px;
+      line-height: 13px;
+    }
+  }
+  .file-actions-cell {
+    position: relative;
+  }
+  .file-upload-indicator, .file-drag-handle {
+    position: absolute;
+    display: inline-block;
+    text-align: center;
+    top: 0;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+  .explorer-caption {
+    display: block;
+    color: #777;
+  }
+  .file-actions {
+    text-align: center;
+  }
+  .kvsortable-ghost {
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
+  }
+  .file-error-message ul {
+    padding: 5px 0 0 20px;
+  }
+}
+
+/*
+ * mobile responsive styling
+ */
+@media only screen and (max-width: 767px) {
+  .theme-explorer {
+    .table {
+      display: block;
+      width: 100% !important;
+      tbody, tr, td {
+        display: block;
+        width: 100% !important;
+      }
+      border: none;
+      tr {
+        margin-top: 5px;
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+      td {
+        text-align: center;
+      }
+      .kv-file-content {
+        border-bottom: none;
+        padding: 4px;
+        margin: 0;
+        .file-preview-image {
+          max-width: 100%;
+          font-size: 20px;
+        }
+      }
+    }
+    .file-details-cell {
+      border-top: none;
+      border-bottom: none;
+      padding-top: 0;
+      margin: 0;
+    }
+    .file-actions-cell {
+      border-top: none;
+      padding-bottom: 4px;
+    }
+    .explorer-frame .explorer-caption {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+  }
+  .theme-explorer-fa {
+    .file-upload-indicator, .file-drag-handle {
+      right: 3px;
+      bottom: 10px;
+      top: auto;
+    }
+  }
+}

+ 1 - 1
themes/explorer-fa/theme.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer Font Awesome theme style for bootstrap-fileinput.

+ 1 - 1
themes/explorer-fa/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer Font Awesome theme configuration for bootstrap-fileinput. 

+ 1 - 1
themes/explorer-fa/theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer Font Awesome theme style for bootstrap-fileinput.

+ 1 - 1
themes/explorer-fa/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer Font Awesome theme configuration for bootstrap-fileinput.

+ 1 - 1
themes/explorer/theme.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.

+ 1 - 1
themes/explorer/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme configuration for bootstrap-fileinput. Load this theme file after loading `fileinput.js`.

+ 1 - 1
themes/explorer/theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.

+ 1 - 1
themes/explorer/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme configuration for bootstrap-fileinput. Load this theme file after loading `fileinput.js`.

+ 1 - 1
themes/fa/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.

+ 1 - 1
themes/fa/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.

+ 1 - 1
themes/gly/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Glyphicon (default) theme configuration for bootstrap-fileinput.

+ 1 - 1
themes/gly/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Glyphicon (default) theme configuration for bootstrap-fileinput.

Some files were not shown because too many files changed in this diff