Fix #1754: Default button styling & Explorer theme enhancements

CHANGE.md

@@ -3,8 +3,9 @@ Change Log: `bootstrap-fileinput`
 
 ## version 5.2.4
 
-**Date**: _under development_
+**Date**: 17-Sep-2021
 
+- (enh #1754): Default button styling & Explorer theme enhancements.
 - (enh #1753): Enhance NPM module handling.
 - (enh #1752): Enhance exif properties validation .
 - (enh #1750): Enhancements to file caption icon and input group styling.

README.md

@@ -46,7 +46,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: 
-> - Bootstrap 5.x is supported in addition to Bootstrap 3.x since release v5.2.0. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
+> - Bootstrap 5.x is supported in addition to Bootstrap 3.x and 4.x since release v5.2.0. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
 > - 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.
@@ -93,34 +93,34 @@ Step 1: Load the following assets on your page in the order mentioned.
 <!-- link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous" -->
 
 <!-- the fileinput plugin styling CSS file -->
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
 
 <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
-<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
+<!-- link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
 
 <!-- the jQuery Library -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
 
 <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
     wish to resize images before upload. This must be loaded before fileinput.min.js -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/js/plugins/piexif.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/js/plugins/piexif.min.js" type="text/javascript"></script>
 
 <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
     This must be loaded before fileinput.min.js -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/js/plugins/sortable.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/js/plugins/sortable.min.js" type="text/javascript"></script>
 
 <!-- bootstrap.bundle.min.js below is needed if you wish to zoom and preview file content in a detail modal
     dialog. bootstrap 5.x or 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
 <!-- the main fileinput plugin script JS file -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/js/fileinput.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/js/fileinput.min.js"></script>
 
 <!-- following theme script is needed to use the Font Awesome 5.x theme (`fas`). Uncomment if needed. -->
-<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/themes/fas/theme.min.js"></script -->
+<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/themes/fas/theme.min.js"></script -->
 
 <!-- optionally if you need translation for your language then include the locale file as mentioned below (replace LANG.js with your language locale) -->
-<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].3/js/locales/LANG.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected].4/js/locales/LANG.js"></script>
 ```
 With v5.2.1, the plugin is able to automatically detect the bootstrap library version and deliver the relevant bootstrap specific functionality (if you have loaded the bootstrap.min.js before fileinput.min.js). In case of any issues - you can explicitly set the bootstrap version by setting the following variable before the plugin initialization script.
 

js/fileinput.js

@@ -5987,7 +5987,7 @@
     };
 
     var IFRAME_ATTRIBS = 'class="kv-preview-data file-preview-pdf" src="{renderer}?file={data}" {style}',
-        defBtnCss1 = 'btn btn-sm btn-kv ' + $h.defaultButtonCss(), defBtnCss2 = 'btn ' + $h.defaultButtonCss(true);
+        defBtnCss1 = 'btn btn-sm btn-kv ' + $h.defaultButtonCss(), defBtnCss2 = 'btn ' + $h.defaultButtonCss();
 
     $.fn.fileinput.defaults = {
         language: 'en',

scss/themes/explorer-fa/theme.scss

@@ -151,7 +151,7 @@ $pad: 5px !default;
     font-size: 2.6em;
   }
 
-  &:hover {
+  &:not(.kv-zoom-body):hover {
     background-color: $white-smoke;
   }
 }

scss/themes/explorer-fas/theme.scss

@@ -151,7 +151,7 @@ $pad: 5px !default;
         font-size: 2.6em;
     }
 
-    &:hover {
+    &:not(.kv-zoom-body):hover {
         background-color: $white-smoke;
     }
 }

scss/themes/explorer/theme.scss

@@ -150,7 +150,7 @@ $pad: 5px !default;
     font-size: 2.6em;
   }
 
-  &:hover {
+  &:not(.kv-zoom-body):hover {
     background-color: $white-smoke;
   }
 }

themes/explorer-fa/theme.css

@@ -81,7 +81,7 @@
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-.explorer-frame:hover {
+.explorer-frame:not(.kv-zoom-body):hover {
     background-color: #f5f5f5;
 }
 .theme-explorer-fa .file-preview-frame samp {

themes/explorer-fas/theme.css

@@ -81,7 +81,7 @@
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-.explorer-frame:hover {
+.explorer-frame:not(.kv-zoom-body):hover {
     background-color: #f5f5f5;
 }
 .theme-explorer-fas .file-preview-frame samp {

themes/explorer/theme.css

@@ -80,7 +80,7 @@
 .explorer-frame .file-other-icon {
     font-size: 2.6em;
 }
-.explorer-frame:hover {
+.explorer-frame:not(.kv-zoom-body):hover {
     background-color: #f5f5f5;
 }
 .theme-explorer .file-preview-frame samp {