fix: hover jitter cause by border

css/fileinput-rtl.css

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

css/fileinput.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v5.5.3
+ * bootstrap-fileinput vh.1.0.0 from v5.5.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -278,12 +278,12 @@ input[type=file].file-loading {
     padding: 6px;
     float: left;
     text-align: center;
-
+    height: 244px;
 }
 
 .krajee-default.file-preview-frame .kv-file-content {
     width: 213px;
-    height: 160px;
+    height: 140px;
 }
 
 .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
@@ -484,21 +484,60 @@ input[type=file].file-loading {
 
 .file-drop-zone {
     border: 1px dashed #aaa;
-    min-height: 260px;
+    min-height: 272px;
     border-radius: 4px;
     text-align: center;
     vertical-align: middle;
     margin: 12px 15px 12px 12px;
     padding: 5px;
+    user-select: none;
+}
+.file-drop-zone.clickable {
+    will-change: margin-top;
+}
+.file-drop-zone.clickable .file-preview-thumbnails {
+    cursor: pointer;
+}
+.file-drop-zone.clearfix.clickable:has(.file-preview-frame):hover {
+    padding-bottom: 6px;
 }
 
-.file-drop-zone.clickable:hover {
+.file-input .file-drop-zone.clickable:hover {
     border: 2px dashed #999;
+    margin-top: 11px;
+    margin-bottom: 11px;
 }
 
-.file-drop-zone.clickable:focus {
-    border: 2px solid #5acde2;
+.file-input.file-thumb-loading .file-drop-zone:hover .file-preview-status{
+    margin-top: -1px;
+}
+
+.file-input.file-thumb-loading .file-drop-zone:hover{
+    padding-bottom: 6px;
+}
+
+.file-input.file-thumb-loading  .file-preview-status, .file-drop-zone-title{
+    height: 260px;
 }
+.file-drop-zone *:first-child:is(.file-preview-thumbnails):has(.file-preview-frame) + .file-preview-status {
+    position: absolute;
+    left: 50%;
+    top: 25px;
+    transform: translateX(-50%);
+}
+
+.file-drop-zone:not(:has(input[type=file][multiple])), .file-drop-zone:not(:has(input[type=file][multiple=true])) {
+    display: flex;
+    justify-content: center;
+}
+
+.file-drop-zone.clickable:hover .krajee-default.file-preview-frame {
+    margin-left: 7px;
+    margin-bottom: 7px;
+}
+/* .file-drop-zone.clickable:focus {
+    border: 2px solid #5acde2;
+} */
 
 .file-drop-zone .file-preview-thumbnails {
     cursor: default;

scss/fileinput.scss

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v5.5.3
+ * bootstrap-fileinput vh.1.0.0 from v5.5.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -54,6 +54,10 @@ $radius: 4px !default;
 $pad: 5px !default;
 $border: 1px !default;
 
+$caption-name-padding-left: 25px;
+$caption-lg-name-padding-left: 30px;
+$caption-sm-name-padding-left: 22px;
+
 //operations
 @function multiply($pixels, $multiplier) {
   @return $pixels * $multiplier;
@@ -207,31 +211,21 @@ input[type=file].file-loading {
     align-items: center;
   }
 
-  .file-caption-name {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    border: none;
-    background: none;
-    outline: none;
-  }
-
   &.icon-visible {
     .file-caption-icon {
       display: inline-block;
     }
 
     .file-caption-name {
-      padding-left: 1.875rem;
+      padding-left: $caption-name-padding-left;
     }
 
     > .input-group-lg .file-caption-name {
-      padding-left: 2.1rem;
+      padding-left: $caption-lg-name-padding-left;
     }
 
     > .input-group-sm .file-caption-name {
-      padding-left: 1.5rem;
+      padding-left: $caption-sm-name-padding-left;
     }
   }
 }
@@ -239,8 +233,8 @@ input[type=file].file-loading {
 .file-caption-icon {
   @extend %set-hidden;
   @extend %set-absolute;
-  left: multiply($pad, 1.6);
-  padding: 0.5rem;
+  left: multiply($pad, 0.8);
+  padding: $pad + 2px $pad;
 }
 
 .input-group-lg .file-caption-icon {
@@ -325,10 +319,11 @@ input[type=file].file-loading {
     padding: multiply($pad, 1.2);
     float: left;
     text-align: center;
+    height: 244px;
 
     .kv-file-content {
       width: multiply($pad, 42.6);
-      height: multiply($pad, 32);
+      height: multiply($pad, 28);
 
       &.kv-pdf-rendered {
         width: 400px;
@@ -351,19 +346,14 @@ input[type=file].file-loading {
   }
 
   .file-preview-text {
-    display: block;
     color: $boston-blue;
     border: $border solid $alto;
-    font-family: $font-3, $font-4, $font-5, $font-6, $font-7;
     outline: none;
-    padding: multiply($pad, 1.6);
     resize: none;
   }
 
   .file-preview-html {
     border: $border solid $alto;
-    padding: multiply($pad, 1.6);
-    overflow: auto;
   }
 
   .file-actions {
@@ -389,7 +379,7 @@ input[type=file].file-loading {
     padding-top: multiply($pad, 0.8);
     font-size: multiply($pad, 2.2);
     color: $mountain-mist;
-    margin-bottom: multiply($pad, 3);
+    margin-bottom: multiply($pad, 6);
   }
 
   .file-preview-error {
@@ -407,7 +397,6 @@ input[type=file].file-loading {
 
   .file-thumb-progress {
     @extend %set-absolute;
-    height: multiply($pad, 2.2);
     top: multiply($pad, 7.4);
     left: 0;
     right: 0;
@@ -450,7 +439,7 @@ input[type=file].file-loading {
 }
 
 .file-upload-stats {
-  font-size: 9px;
+  font-size: 10px;
   text-align: center;
   width: 100%;
 }
@@ -470,7 +459,7 @@ input[type=file].file-loading {
   }
 
   .file-upload-stats {
-    font-size: 11px;
+    font-size: 12px;
     margin: -10px 0 5px;
   }
 }
@@ -515,7 +504,7 @@ input[type=file].file-loading {
 
   .btn-navigate {
     @extend %set-absolute;
-    margin: -1.2rem 0.1rem 0;
+    margin: 0 0.1rem;
     padding: 0;
     font-size: 1.2rem;
     width: 2.4rem;
@@ -548,7 +537,7 @@ input[type=file].file-loading {
   }
 
   .kv-zoom-body {
-    padding: 0.25rem 0.5rem 0.25rem 0;
+    padding: 0.25rem;
   }
 
   .kv-zoom-description {
@@ -633,43 +622,79 @@ input[type=file].file-loading {
   }
 }
 
-.file-caption-main {
-  width: 100%;
-}
-
 .file-thumb-loading {
-  background: transparent $url-0 no-repeat scroll center center content-box !important;
+  &:not(:has(.file-preview-thumbnails .file-preview-frame)) {
+    background: transparent $url-0 no-repeat scroll center center content-box !important;
+  }
+  .file-drop-zone:hover {
+    padding-bottom: $pad + multiply($border, 1);
+    .file-preview-status {
+      margin-top: multiply($border, 1) * -1;
+    }
+  }
+  .file-drop-zone *:first-child:is(.file-preview-thumbnails):has(.file-preview-frame) + .file-preview-status {
+    background: rgba(255, 255, 255, 0.38) $url-0 no-repeat scroll center center content-box !important;
+    width: calc(100% - (multiply($pad, 5.6) + multiply($border, 2)) * 2);
+  }
 }
 
 .file-drop-zone {
   border: $border dashed $silver-chalice;
   border-radius: $radius;
-  min-height: multiply($pad, 52);
+  min-height: multiply($pad, 54.4);
   text-align: center;
   vertical-align: middle;
   margin: multiply($pad, 2.4) multiply($pad, 3) multiply($pad, 2.4) multiply($pad, 2.4);
   padding: $pad;
+  user-select: none;
 
   &.clickable {
     &:hover {
       border: multiply($border, 2) dashed $mountain-mist;
+      margin-top: multiply($pad, 2.4) - multiply($border, 1);
+      margin-bottom: multiply($pad, 2.4) - multiply($border, 1);
+      .file-preview-frame {
+        margin-left: multiply($pad, 1.6) - multiply($border, 1);
+        margin-bottom: multiply($pad, 1.6) - multiply($border, 1);
+      }
     }
 
     &:focus {
-      border: multiply($border, 2) solid $viking;
+      //border: multiply($border, 2) solid $viking;
+    }
+    &:has(.file-preview-frame):hover {
+      padding-bottom: $pad + $border;
+    }
+
+    .file-preview-thumbnails {
+      cursor: pointer;
     }
   }
 
-  .file-preview-thumbnails {
-    cursor: default;
+  &:not(:has(input[type=file][multiple])), &:not(:has(input[type=file][multiple=true])) {
+    display: flex;
+    justify-content: center;
+  }
+
+  *:first-child:is(.file-preview-thumbnails):has(.file-preview-frame) + .file-preview-status {
+    position: absolute;
+    left: 50%;
+    top: multiply($pad, 5);
+    transform: translateX(-50%);
+  }
+
+  .file-preview-status {
+    height: multiply($pad, 52);
   }
 }
 
 .file-drop-zone-title {
+  height: multiply($pad, 52);
   color: $silver-chalice;
   font-size: 1.6em;
   padding: multiply($pad, 17) multiply($pad, 2);
   cursor: default;
+  text-align: center;
 }
 
 .file-highlighted {
@@ -885,4 +910,4 @@ input[type=file].file-loading {
 
 .kv-overflow-hidden {
   overflow: hidden;
-}
+}