Fix #1730: Enhancements for bootstrap input group styles

CHANGE.md

@@ -5,6 +5,10 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1730): Enhancements for bootstrap input group styles.
+  - New plugin option `inputGroupClass` - defaults to empty string
+  - Can be set to `input-group-lg` or `input-group-sm` to get bootstrap input group styles
+  - Enhanced caption icon styling to match the bootstrap input group styles
 - (enh #1727): Correct zoom navigation for reverse preview order.
 - (enh #1726): Update Chinese translations.
 - (enh #1722): Enhance zoom cache rendering and carousel navigation indicators.

css/fileinput.css

@@ -197,6 +197,15 @@ input[type=file].file-loading {
     left: 4px;
 }
 
+.input-group-lg .file-caption-icon {
+    font-size: 1.25rem;
+    padding: 0.9rem 0.9rem 0 0.2rem;
+}
+
+.input-group-sm .file-caption-icon {
+    font-size: 0.875rem;
+}
+
 .file-error-message {
     color: #a94442;
     background-color: #f2dede;

js/fileinput.js

@@ -1678,8 +1678,8 @@
             tMain1 = '{preview}\n' +
                 '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n' +
                 '<div class="file-caption {class}">\n' +
-                '  <span class="file-caption-icon"></span>\n' +
-                '  <div class="input-group">\n' + '{caption}\n' +
+                '  <div class="input-group {inputGroupClass}">\n' +
+                '      {caption}\n<span class="file-caption-icon"></span>\n' +
                 ($h.isBs(5) ? '' : '<div class="input-group-btn input-group-append">\n') +
                 '      {remove}\n' +
                 '      {cancel}\n' +
@@ -4867,6 +4867,7 @@
             caption = self._setTabIndex('caption', caption);
             return self.mainTemplate.setTokens({
                 'class': self.mainClass + (!self.showBrowse && self.showCaption ? ' no-browse' : ''),
+                'inputGroupClass': self.inputGroupClass,
                 'preview': preview,
                 'close': close,
                 'caption': caption,
@@ -5990,6 +5991,7 @@
         captionClass: '',
         frameClass: 'krajee-default',
         mainClass: '',
+        inputGroupClass: '',
         mainTemplate: null,
         fileSizeGetter: null,
         initialCaption: '',

scss/fileinput.scss

@@ -238,6 +238,16 @@ input[type=file].file-loading {
     @extend %set-hidden;
     @extend %set-absolute;
     left: multiply($pad, 1.6);
+    padding: 0.5rem;
+}
+
+.input-group-lg .file-caption-icon {
+    font-size: 1.25rem;
+    padding: 0.9rem 0.9rem 0 0.2rem;
+}
+
+.input-group-sm .file-caption-icon {
+    font-size: 0.875rem;
 }
 
 .file-error-message {