Fix #1093: Revamp SCSS with better variables and extensions

CHANGE.md

@@ -3,8 +3,9 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.4.5 (_under development_)
 
-**Date:** 29-Sep-2017
+**Date:** 30-Sep-2017
 
+- (enh #1093): Revamp SCSS with better variables and extensions.
 - (enh #1091): Set default button type for close button markup template.
 - (enh #1090): Auto detect intelligently the preview type based on file content.
 - (enh #1087): Enhance SCSS/SASS styling configurations.

css/fileinput-rtl.css

@@ -10,106 +10,73 @@
  * 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 {
     direction: rtl;
 }
-
-.kv-rtl .kv-zoom-actions .btn-kv, .kv-rtl .floating-buttons .btn-kv {
+.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;
     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: none repeat scroll 100% 0 transparent;
-}
-
-.kv-rtl .file-zoom-dialog {
-    text-align: right;
-}
-
-.kv-rtl .file-error-message pre,
-.kv-rtl .file-error-message ul {
-    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-right, .kv-rtl .float-right {
+    float: left !important;
 }
-
-.kv-rtl .pull-left {
-    float: right!important;
+.kv-rtl .pull-left, .kv-rtl .float-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 .kv-zoom-actions .btn-kv {
+    margin-left: 0;
+    margin-right: 3px;
 }
-
-.kv-rtl .krajee-default .file-drag-handle, .kv-rtl .krajee-default .file-upload-indicator {
-    float: right;
+.kv-rtl .file-caption.icon-visible .file-caption-name {
+    padding-left: 0;
+    padding-right: 15px;
+}
+.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: none repeat scroll 100% 0 transparent;
 }

css/fileinput-rtl.min.css

@@ -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 .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}
+ */.kv-rtl .close,.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,.kv-rtl .krajee-default.file-preview-frame{float:right}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.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;right:8px}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .float-right,.kv-rtl .pull-right{float:left!important}.kv-rtl .float-left,.kv-rtl .pull-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:15px}.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}

css/fileinput.css

@@ -10,75 +10,95 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
-.kv-hidden {
+.file-loading input[type=file], input[type=file].file-loading {
+    width: 0;
+    height: 0;
+}
+.kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content {
     display: none;
 }
-
-/* exif orientations */
+.btn-file input[type=file], .file-caption-icon, .file-preview .fileinput-remove, .krajee-default .file-thumb-progress, .file-zoom-dialog .btn-navigate, .file-zoom-dialog .floating-buttons {
+    position: absolute;
+}
+.file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
+    position: relative;
+}
+.file-error-message pre, .file-error-message ul, .krajee-default .file-actions, .krajee-default .file-other-error {
+    text-align: left;
+}
+.file-error-message pre, .file-error-message ul {
+    margin: 0;
+}
+.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
+    float: left;
+    margin: 5px 0 -5px;
+    width: 16px;
+    height: 16px;
+}
+.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
+    height: 11px;
+    font-size: 9px;
+    line-height: 10px;
+}
+.krajee-default .file-caption-info, .krajee-default .file-size-info {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 160px;
+    height: 15px;
+    margin: auto;
+}
+.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash, .file-zoom-content > .file-object.type-image {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+}
+.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash {
+    height: 100%;
+}
+.file-zoom-content > .file-object.type-pdf, .file-zoom-content > .file-object.type-html, .file-zoom-content > .file-object.type-text, .file-zoom-content > .file-object.type-default {
+    width: 100%;
+}
 .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, .file-loading input[type=file] {
-    width: 0;
-    height: 0;
-}
-
 .file-loading:before {
     content: " Loading...";
     display: inline-block;
-    position: relative;
     padding-left: 20px;
     line-height: 16px;
     font-size: 13px;
     font-variant: small-caps;
     color: #999;
-    background: transparent url('../img/loading.gif') top left no-repeat;
-}
-
-.file-loading[dir=rtl]:before {
-    background: transparent url('../img/loading.gif') top right no-repeat;
-    padding-left: 0;
-    padding-right: 20px;
+    background: transparent url(../img/loading.gif) top left no-repeat;
 }
-
 .file-object {
     margin: 0 0 -5px 0;
     padding: 0;
 }
-
 .btn-file {
-    position: relative;
     overflow: hidden;
 }
-
 .btn-file input[type=file] {
-    position: absolute;
     top: 0;
     right: 0;
     min-width: 100%;
@@ -89,36 +109,30 @@ input[type=file].file-loading, .file-loading input[type=file] {
     cursor: inherit;
     display: block;
 }
-
-.file-caption {
-    position: relative;
+.btn-file ::-ms-browse {
+    font-size: 10000px;
+    width: 100%;
+    height: 100%;
 }
-
 .file-caption .file-caption-name {
     width: 100%;
-    margin:0;
-    padding:0;
+    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;
 }
-
 .file-caption.icon-visible .file-caption-name {
     padding-left: 15px;
 }
-
+.file-caption-icon {
+    line-height: 1;
+    left: 8px;
+}
 .file-error-message {
     color: #a94442;
     background-color: #f2dede;
@@ -127,52 +141,40 @@ input[type=file].file-loading, .file-loading input[type=file] {
     border-radius: 4px;
     padding: 15px;
 }
-
-.file-error-message pre, .file-error-message ul {
-    margin: 0;
-    text-align: left;
-}
-
 .file-error-message pre {
     margin: 5px 0;
 }
-
 .file-caption-disabled {
-    background-color: #eeeeee;
+    background-color: #eee;
     cursor: not-allowed;
     opacity: 1;
 }
-
 .file-preview {
     border-radius: 5px;
     border: 1px solid #ddd;
     padding: 8px;
     width: 100%;
     margin-bottom: 5px;
-    position: relative;
 }
-
 .file-preview .btn-xs {
     padding: 1px 5px;
     font-size: 12px;
     line-height: 1.5;
     border-radius: 3px;
 }
-
 .file-preview .fileinput-remove {
-    position: absolute;
     top: 1px;
     right: 1px;
     line-height: 10px;
 }
-
+.file-preview .clickable {
+    cursor: pointer;
+}
 .file-preview-image {
     font: 40px Impact, Charcoal, sans-serif;
-    color: green;
+    color: #008000;
 }
-
 .krajee-default.file-preview-frame {
-    position: relative;
     margin: 8px;
     border: 1px solid #ddd;
     box-shadow: 1px 1px 5px 0 #a2958a;
@@ -180,20 +182,16 @@ input[type=file].file-loading, .file-loading input[type=file] {
     float: left;
     text-align: center;
 }
-
-.krajee-default.file-preview-frame:not(.file-preview-error):hover {
-    box-shadow: 3px 3px 5px 0 #333;
-}
-
 .krajee-default.file-preview-frame .kv-file-content {
     width: 213px;
     height: 160px;
 }
-
 .krajee-default.file-preview-frame .file-thumbnail-footer {
     height: 70px;
 }
-
+.krajee-default.file-preview-frame:not(.file-preview-error):hover {
+    box-shadow: 3px 3px 5px 0 #333;
+}
 .krajee-default .file-preview-text {
     display: block;
     color: #428bca;
@@ -203,29 +201,17 @@ input[type=file].file-loading, .file-loading input[type=file] {
     padding: 8px;
     resize: none;
 }
-
 .krajee-default .file-preview-html {
     border: 1px solid #ddd;
     padding: 8px;
     overflow: auto;
 }
-
-.krajee-default .file-preview-other:hover {
-    opacity: 0.8;
-}
-
-.krajee-default .file-actions, .krajee-default .file-other-error {
-    text-align: left;
-}
-
 .krajee-default .file-other-icon {
     font-size: 6em;
 }
-
 .krajee-default .file-footer-buttons {
     float: right;
 }
-
 .krajee-default .file-footer-caption {
     display: block;
     text-align: center;
@@ -234,112 +220,100 @@ input[type=file].file-loading, .file-loading input[type=file] {
     color: #777;
     margin-bottom: 15px;
 }
-
 .krajee-default .file-preview-error {
     opacity: 0.65;
     box-shadow: none;
 }
-
-.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
-    color: #000;
-}
-
-.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
-    float: left;
-    margin: 5px 0 -5px 0;
-    width: 16px;
-    height: 16px;
-}
-
 .krajee-default .file-thumb-progress {
     height: 11px;
-}
-
-.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
-    height: 11px;
-    font-size: 9px;
-    line-height: 10px;
-}
-
-.krajee-default .file-thumbnail-footer {
-    position: relative;
-}
-
-.krajee-default .file-thumb-progress {
-    position: absolute;
     top: 37px;
     left: 0;
     right: 0;
 }
-
-.krajee-default .file-caption-info,
-.krajee-default .file-size-info {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
-    height: 15px;
-    margin: auto;
-}
-
 .krajee-default.kvsortable-ghost {
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
-
-.kv-upload-progress .progress,
-.kv-upload-progress .progress-bar {
-    height: 20px;
-    line-height: 20px;
+.krajee-default .file-preview-other:hover {
+    opacity: 0.8;
+}
+.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
+    color: #000;
 }
-
 .kv-upload-progress .progress {
+    height: 20px;
+    line-height: 20px;
     margin: 10px 0;
     overflow: hidden;
 }
-
-/* noinspection CssOverwrittenProperties */
+.kv-upload-progress .progress-bar {
+    height: 20px;
+    line-height: 20px;
+}
+/*noinspection CssOverwrittenProperties*/
 .file-zoom-dialog .file-other-icon {
     font-size: 22em;
     font-size: 50vmin;
 }
-
-.file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file,
-.file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button,
-.file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button {
-    display: none;
+.file-zoom-dialog .modal-dialog {
+    width: auto;
 }
-
-.file-caption-main {
-    width: 100%;
+.file-zoom-dialog .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
-
-.file-input-ajax-new .no-browse .input-group-btn,
-.file-input-new .no-browse .input-group-btn {
-    display: none;
+.file-zoom-dialog .btn-navigate {
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    opacity: 0.7;
+    top: 45%;
+    font-size: 4em;
+    color: #1c94c4;
+}
+.file-zoom-dialog .btn-navigate:not([disabled]):hover {
+    outline: none;
+    box-shadow: none;
+    opacity: 0.6;
+}
+.file-zoom-dialog .floating-buttons {
+    top: 5px;
+    right: 10px;
+}
+.file-zoom-dialog .btn-navigate[disabled] {
+    opacity: 0.3;
+}
+.file-zoom-dialog .btn-prev {
+    left: 1px;
+}
+.file-zoom-dialog .btn-next {
+    right: 1px;
+}
+.file-zoom-dialog .kv-zoom-title {
+    font-weight: 300;
+    color: #999;
+    max-width: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
-
-.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('../img/loading.gif') no-repeat scroll center center content-box !important;
+.file-input-ajax-new .no-browse .form-control {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
 }
-
-.file-sortable .file-drag-handle {
-    cursor: move;
-    cursor: -webkit-grabbing;
-    opacity: 1;
+.file-caption-main {
+    width: 100%;
 }
-
-.file-sortable .file-drag-handle:hover {
-    opacity: 0.7;
+.file-thumb-loading {
+    background: transparent url(../img/loading.gif) no-repeat scroll center center content-box !important;
 }
-
 .file-drop-zone {
     border: 1px dashed #aaa;
     border-radius: 4px;
@@ -349,72 +323,39 @@ input[type=file].file-loading, .file-loading input[type=file] {
     margin: 12px 15px 12px 12px;
     padding: 5px;
 }
-
-.file-drop-zone-title {
-    color: #aaa;
-    font-size: 1.6em;
-    padding: 85px 10px;
-    cursor: default;
-}
-
-.file-preview .clickable,
-.clickable .file-drop-zone-title {
-    cursor: pointer;
-}
-
 .file-drop-zone.clickable:hover {
     border: 2px dashed #999;
 }
-
 .file-drop-zone.clickable:focus {
     border: 2px solid #5acde2;
 }
-
 .file-drop-zone .file-preview-thumbnails {
     cursor: default;
 }
-
+.file-drop-zone-title {
+    color: #aaa;
+    font-size: 1.6em;
+    padding: 85px 10px;
+    cursor: default;
+}
 .file-highlighted {
     border: 2px dashed #999 !important;
-    background-color: #f0f0f0;
+    background-color: #eee;
 }
-
 .file-uploading {
-    background: url('../img/loading-sm.gif') no-repeat center bottom 10px;
+    background: url(../img/loading-sm.gif) no-repeat center bottom 10px;
     opacity: 0.65;
 }
-
-.file-zoom-dialog .modal-dialog {
-    position: relative;
-    width: auto;
-}
-
-.file-zoom-dialog .modal-header {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-.file-zoom-dialog .modal-header:before,
-.file-zoom-dialog .modal-header: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;
@@ -422,45 +363,22 @@ input[type=file].file-loading, .file-loading input[type=file] {
     bottom: 0;
     left: 0;
 }
-
 .file-zoom-fullscreen .modal-dialog {
     position: fixed;
     margin: 0;
+    padding: 0;
     width: 100%;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
-    padding: 0;
 }
-
 .file-zoom-fullscreen .modal-content {
     border-radius: 0;
     box-shadow: none;
 }
-
 .file-zoom-fullscreen .modal-body {
     overflow-y: auto;
 }
-
-.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;
-}
-
-.file-zoom-dialog .floating-buttons {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-}
-
 .btn-kv {
     display: inline-block;
     text-align: center;
@@ -471,100 +389,34 @@ input[type=file].file-loading, .file-loading input[type=file] {
     font-size: 0.875rem;
     border-radius: 0.2rem;
 }
-
-.kv-zoom-actions .btn-kv, .floating-buttons .btn-kv {
-    margin-left: 3px;
-}
-
-.floating-buttons, .floating-buttons .btn-kv {
+.floating-buttons {
     z-index: 3000;
 }
-
-.file-zoom-dialog .btn-navigate:not([disabled]):hover {
-    outline: none;
-    box-shadow: none;
-    opacity: 0.6;
-}
-
-.file-zoom-dialog .btn-navigate[disabled] {
-    opacity: 0.3;
-}
-
-.file-zoom-dialog .btn-prev {
-    left: 1px;
-}
-
-.file-zoom-dialog .btn-next {
-    right: 1px;
+.floating-buttons .btn-kv {
+    margin-left: 3px;
+    z-index: 3000;
 }
-
 .file-zoom-content {
     height: 480px;
     text-align: center;
 }
-
-.file-zoom-content .file-preview-image,
+.file-zoom-content .file-preview-image {
+    max-height: 100%;
+}
 .file-zoom-content .file-preview-video {
-    max-height: 100%
+    max-height: 100%;
+}
+.file-zoom-content .is-portrait-gt4 {
+    margin-top: 60px;
 }
-
 .file-zoom-content > .file-object.type-image {
-    width: auto;
     height: auto;
     min-height: inherit;
-    max-width: 100%;
-    max-height: 100%;
 }
-
-.file-zoom-content > .file-object.type-video,
-.file-zoom-content > .file-object.type-flash {
-    width: auto;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-}
-
 .file-zoom-content > .file-object.type-audio {
     width: auto;
     height: 30px;
 }
-
-.file-zoom-content > .file-object.type-pdf,
-.file-zoom-content > .file-object.type-html,
-.file-zoom-content > .file-object.type-text,
-.file-zoom-content > .file-object.type-default {
-    width: 100%;
-}
-
-.file-preview-initial.sortable-chosen {
-    background-color: #d9edf7;
-}
-
-.hide-content .kv-file-content {
-    display: none;
-}
-
-/* IE 10 fix */
-.btn-file ::-ms-browse {
-    font-size: 10000px;
-    width: 100%;
-    height: 100%;
-}
-
-.file-zoom-content .is-portrait-gt4 {
-    margin-top: 60px;
-}
-
-.file-zoom-dialog .kv-zoom-title {
-    font-weight: 300;
-    color: #999;
-    max-width: 50%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-
 @media screen and (max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;
@@ -572,14 +424,33 @@ input[type=file].file-loading, .file-loading input[type=file] {
         align-items: center;
         flex-direction: column;
     }
-
     .file-zoom-dialog .modal-header {
         flex-direction: column;
     }
 }
-
 @media screen and (max-width: 350px) {
     .krajee-default.file-preview-frame .kv-file-content {
         width: 160px;
     }
+}
+.file-loading[dir=rtl]:before {
+    background: transparent url(../img/loading.gif) top right no-repeat;
+    padding-left: 0;
+    padding-right: 20px;
+}
+.file-sortable .file-drag-handle {
+    cursor: move;
+    opacity: 1;
+}
+.file-sortable .file-drag-handle:hover {
+    opacity: 0.7;
+}
+.clickable .file-drop-zone-title {
+    cursor: pointer;
+}
+.kv-zoom-actions .btn-kv {
+    margin-left: 3px;
+}
+.file-preview-initial.sortable-chosen {
+    background-color: #d9edf7;
 }

sass/fileinput-rtl.scss

@@ -11,92 +11,126 @@
  * 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 {
+//colors
+$zorba: #a2958a;
+$mine_shaft: #333;
+
+//standard measures
+$radius: 4px;
+$pad: 5px;
+$border: 1px;
+
+//operations
+@function multiply($pixels, $multiplier) {
+    @return $pixels * $multiplier;
+}
+
+//@extend-elements
+%set_float_left {
     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 {
+}
+
+%set_float_right {
+    float: right;
+}
+
+%set_text_right {
     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;
-    }
-  }
+}
+
+.kv-rtl {
+    direction: rtl;
+    .floating-buttons {
+        left: multiply($pad, 2);
+        right: auto;
+        .btn-kv {
+            margin-left: 0;
+            margin-right: multiply($pad, 0.6);
+        }
+    }
+    .file-caption-icon {
+        left: auto;
+        right: multiply($pad, 1.6);
+    }
+    .close {
+        @extend %set_float_left;
+    }
+    .file-zoom-dialog {
+        @extend %set_text_right;
+    }
+    .file-error-message {
+        pre {
+            @extend %set_text_right;
+        }
+        ul {
+            @extend %set_text_right;
+        }
+    }
+    .file-drop-zone {
+        margin: multiply($pad, 2.4) multiply($pad, 2.4) multiply($pad, 2.4) multiply($pad, 3);
+    }
+    .btn-prev {
+        right: multiply($pad, 0.2);
+        left: auto;
+    }
+    .btn-next {
+        left: multiply($pad, 0.2);
+        right: auto;
+    }
+    .pull-right {
+        float: left !important;
+    }
+    .pull-left {
+        float: right !important;
+    }
+    .float-right {
+        @extend .pull-right;
+    }
+    .float-left {
+        @extend .pull-left;
+    }
+    .kv-zoom-title {
+        direction: ltr;
+    }
+    .krajee-default {
+        &.file-preview-frame {
+            @extend %set_float_right;
+            box-shadow: (-$border) $border multiply($border, 5) 0 $zorba;
+            &:not(.file-preview-error):hover {
+                box-shadow: multiply($border, -3) multiply($border, 3) multiply($border, 5) 0 $mine_shaft;
+            }
+        }
+        .file-actions {
+            @extend %set_float_left;
+        }
+        .file-other-error {
+            @extend %set_float_left;
+        }
+        .file-drag-handle {
+            @extend %set_float_right;
+        }
+        .file-upload-indicator {
+            @extend %set_float_right;
+        }
+    }
+    .kv-zoom-actions .btn-kv {
+        margin-left: 0;
+        margin-right: multiply($pad, 0.6);
+    }
+    .file-caption.icon-visible .file-caption-name {
+        padding-left: 0;
+        padding-right: multiply($pad, 3);
+    }
+    .input-group-btn:last-child > .btn {
+        border-radius: $radius 0 0 $radius;
+    }
+    .input-group .form-control:first-child {
+        border-radius: 0 $radius $radius 0;
+    }
+    .btn-file input[type=file] {
+        right: auto;
+        left: 0;
+        text-align: left;
+        background: none repeat scroll 100% 0 transparent;
+    }
 }

sass/fileinput.scss

@@ -10,558 +10,682 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+//colors
+$mountain_mist: #999;
+$apple_blossom: #a94442;
+$vanilla_ice: #f2dede;
+$oyster_pink: #ebccd1;
+$gallery: #eee;
+$alto: #ddd;
+$green: #008000;
+$zorba: #a2958a;
+$mine_shaft: #333;
+$boston_blue: #428bca;
+$tapa: #777;
+$black: #000;
+$mystic: #e1edf7;
+$perano: #a1abff;
+$silver_chalice: #aaa;
+$viking: #5acde2;
+$curious_blue: #1c94c4;
+$link_water: #d9edf7;
+
+//fonts
+$font_0: Impact;
+$font_1: Charcoal;
+$font_2: sans-serif;
+$font_3: Menlo;
+$font_4: Monaco;
+$font_5: Consolas;
+$font_6: "Courier New";
+$font_7: monospace;
+
+//urls
+$url_0: url(../img/loading.gif);
+$url_1: url(../img/loading-sm.gif);
+
+//standard measures
+$radius: 4px;
+$pad: 5px;
+$border: 1px;
+
+//operations
+@function multiply($pixels, $multiplier) {
+    @return $pixels * $multiplier;
+}
+
+//@extend-elements
+%set_invisible {
+    width: 0;
+    height: 0;
+}
+
+%set_hidden {
+    display: none;
+}
+
+%set_absolute {
+    position: absolute;
+}
+
+%set_relative {
+    position: relative;
+}
+
+%set_text_left {
+    text-align: left;
+}
+
+%set_error {
+    @extend %set_text_left;
+    margin: 0;
+}
+
+%set_indicator {
+    margin: $pad 0 (-$pad);
+    width: multiply($pad, 3.2);
+    height: multiply($pad, 3.2);
+}
+
+%set_progress {
+    height: multiply($pad, 2.2);
+    font-size: multiply($pad, 1.8);
+    line-height: multiply($pad, 2);
+}
+
+%set_caption {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: multiply($pad, 32);
+    height: multiply($pad, 3);
+    margin: auto;
+}
+
+%set_object {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+}
+
+%set_object_video {
+    @extend %set_object;
+    height: 100%;
+}
+
+%set_object_default {
+    width: 100%;
+}
 
 .kv-hidden {
-  display: none;
+    @extend %set_hidden;
 }
 
-// exif orientations
 .rotate-2 {
-  transform: rotateY(180deg);
+    transform: rotateY(180deg);
 }
 
 .rotate-3 {
-  transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 
 .rotate-4 {
-  transform: rotate(180deg) rotateY(180deg);
+    transform: rotate(180deg) rotateY(180deg);
 }
 
 .rotate-5 {
-  transform: rotate(270deg) rotateY(180deg);
+    transform: rotate(270deg) rotateY(180deg);
 }
 
 .rotate-6 {
-  transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 .rotate-7 {
-  transform: rotate(90deg) rotateY(180deg);
+    transform: rotate(90deg) rotateY(180deg);
 }
 
 .rotate-8 {
-  transform: rotate(270deg);
-}
-
-// other styles
-input[type=file].file-loading {
-  width: 0;
-  height: 0;
+    transform: rotate(270deg);
 }
 
 .file-loading {
-  input[type=file] {
-    width: 0;
-    height: 0;
-  }
-  &:before {
-    content: " Loading...";
-    display: inline-block;
-    position: relative;
-    padding-left: 20px;
-    line-height: 16px;
-    font-size: 13px;
-    font-variant: small-caps;
-    color: #999;
-    background: transparent url('../img/loading.gif') top left no-repeat;
-  }
-  &[dir=rtl]:before {
-    background: transparent url('../img/loading.gif') top right no-repeat;
-    padding-left: 0;
-    padding-right: 20px;
-  }
+    input[type=file] {
+        @extend %set_invisible;
+    }
+    &:before {
+        @extend %set_relative;
+        content: " Loading...";
+        display: inline-block;
+        padding-left: multiply($pad, 4);
+        line-height: multiply($pad, 3.2);
+        font-size: multiply($pad, 2.6);
+        font-variant: small-caps;
+        color: $mountain_mist;
+        background: transparent $url_0 top left no-repeat;
+    }
 }
 
 .file-object {
-  margin: 0 0 -5px 0;
-  padding: 0;
+    margin: 0 0 (-$pad) 0;
+    padding: 0;
 }
 
 .btn-file {
-  position: relative;
-  overflow: hidden;
-  input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 100%;
-    min-height: 100%;
-    text-align: right;
-    opacity: 0;
-    background: none repeat scroll 0 0 transparent;
-    cursor: inherit;
-    display: block;
-  }
+    @extend %set_relative;
+    overflow: hidden;
+    input[type=file] {
+        @extend %set_absolute;
+        top: 0;
+        right: 0;
+        min-width: 100%;
+        min-height: 100%;
+        text-align: right;
+        opacity: 0;
+        background: none repeat scroll 0 0 transparent;
+        cursor: inherit;
+        display: block;
+    }
+    ::-ms-browse {
+        font-size: multiply($pad, 2000);
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .file-caption {
-  position: relative;
-  .file-caption-name {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    border: none;
-    background: none;
-    outline: none;
-  }
+    @extend %set_relative;
+    .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: multiply($pad, 3);
+        }
+    }
 }
 
 .file-caption-icon {
-  display: none;
-  position: absolute;
-  line-height: 1;
-  left: 8px;
-}
-
-.file-caption.icon-visible {
-  .file-caption-icon {
-    display: inline-block;
-  }
-  .file-caption-name {
-    padding-left: 15px;
-  }
+    @extend %set_hidden;
+    @extend %set_absolute;
+    line-height: 1;
+    left: multiply($pad, 1.6);
 }
 
 .file-error-message {
-  color: #a94442;
-  background-color: #f2dede;
-  margin: 5px;
-  border: 1px solid #ebccd1;
-  border-radius: 4px;
-  padding: 15px;
-  pre, ul {
-    margin: 0;
-    text-align: left;
-  }
-  pre {
-    margin: 5px 0;
-  }
+    color: $apple_blossom;
+    background-color: $vanilla_ice;
+    margin: $pad;
+    border: $border solid $oyster_pink;
+    border-radius: $radius;
+    padding: multiply($pad, 3);
+    pre {
+        @extend %set_error;
+        margin: $pad 0;
+    }
+    ul {
+        @extend %set_error;
+    }
 }
 
 .file-caption-disabled {
-  background-color: #eeeeee;
-  cursor: not-allowed;
-  opacity: 1;
+    background-color: $gallery;
+    cursor: not-allowed;
+    opacity: 1;
 }
 
 .file-preview {
-  border-radius: 5px;
-  border: 1px solid #ddd;
-  padding: 8px;
-  width: 100%;
-  margin-bottom: 5px;
-  position: relative;
-  .btn-xs {
-    padding: 1px 5px;
-    font-size: 12px;
-    line-height: 1.5;
-    border-radius: 3px;
-  }
-  .fileinput-remove {
-    position: absolute;
-    top: 1px;
-    right: 1px;
-    line-height: 10px;
-  }
+    @extend %set_relative;
+    border-radius: multiply($radius, 1.25);
+    border: $border solid $alto;
+    padding: multiply($pad, 1.6);
+    width: 100%;
+    margin-bottom: $pad;
+    .btn-xs {
+        padding: multiply($pad, 0.2) $pad;
+        font-size: multiply($pad, 2.4);
+        line-height: 1.5;
+        border-radius: multiply($radius, 0.75);
+    }
+    .fileinput-remove {
+        @extend %set_absolute;
+        top: multiply($pad, 0.2);
+        right: multiply($pad, 0.2);
+        line-height: multiply($pad, 2);
+    }
+    .clickable {
+        cursor: pointer;
+    }
 }
 
 .file-preview-image {
-  font: 40px Impact, Charcoal, sans-serif;
-  color: green;
+    font: multiply($pad, 8) $font_0, $font_1, $font_2;
+    color: $green;
 }
 
 .krajee-default {
-  &.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;
+    &.file-preview-frame {
+        @extend %set_relative;
+        margin: multiply($pad, 1.6);
+        border: $border solid $alto;
+        box-shadow: $border $border $pad 0 $zorba;
+        padding: multiply($pad, 1.2);
+        float: left;
+        text-align: center;
+        .kv-file-content {
+            width: multiply($pad, 42.6);
+            height: multiply($pad, 32);
+        }
+        .file-thumbnail-footer {
+            height: multiply($pad, 14);
+        }
+        &:not(.file-preview-error):hover {
+            box-shadow: multiply($pad, 0.6) multiply($pad, 0.6) $pad 0 $mine_shaft;
+        }
     }
-    .kv-file-content {
-      width: 213px;
-      height: 160px;
+    .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 {
+        @extend %set_text_left;
+    }
+    .file-other-error {
+        @extend %set_text_left;
+    }
+    .file-other-icon {
+        font-size: 6em;
+    }
+    .file-footer-buttons {
+        float: right;
+    }
+    .file-footer-caption {
+        display: block;
+        text-align: center;
+        padding-top: multiply($pad, 0.8);
+        font-size: multiply($pad, 2.2);
+        color: $tapa;
+        margin-bottom: multiply($pad, 3);
+    }
+    .file-preview-error {
+        opacity: 0.65;
+        box-shadow: none;
+    }
+    .file-drag-handle {
+        @extend %set_indicator;
+    }
+    .file-upload-indicator {
+        @extend %set_indicator;
+    }
+    .file-thumb-progress {
+        @extend %set_absolute;
+        height: multiply($pad, 2.2);
+        top: multiply($pad, 7.4);
+        left: 0;
+        right: 0;
+        .progress {
+            @extend %set_progress;
+        }
+        .progress-bar {
+            @extend %set_progress;
+        }
     }
     .file-thumbnail-footer {
-      height: 70px;
+        @extend %set_relative;
+    }
+    .file-caption-info {
+        @extend %set_caption;
+    }
+    .file-size-info {
+        @extend %set_caption;
+    }
+    &.kvsortable-ghost {
+        background: $mystic;
+        border: multiply($border, 2) solid $perano;
+    }
+    .file-preview-other:hover {
+        opacity: 0.8;
+    }
+    .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
+        color: $black;
     }
-  }
-  .file-preview-text {
-    display: block;
-    color: #428bca;
-    border: 1px solid #ddd;
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    outline: none;
-    padding: 8px;
-    resize: none;
-  }
-  .file-preview-html {
-    border: 1px solid #ddd;
-    padding: 8px;
-    overflow: auto;
-  }
-  .file-preview-other:hover {
-    opacity: 0.8;
-  }
-  .file-actions, .file-other-error {
-    text-align: left;
-  }
-  .file-other-icon {
-    font-size: 6em;
-  }
-  .file-footer-buttons {
-    float: right;
-  }
-  .file-footer-caption {
-    display: block;
-    text-align: center;
-    padding-top: 4px;
-    font-size: 11px;
-    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: #000;
-  }
-  .file-drag-handle, .file-upload-indicator {
-    float: left;
-    margin: 5px 0 -5px 0;
-    width: 16px;
-    height: 16px;
-  }
-  .file-thumb-progress {
-    height: 11px;
-    .progress, .progress-bar {
-      height: 11px;
-      font-size: 9px;
-      line-height: 10px;
-    }
-  }
-  .file-thumbnail-footer {
-    position: relative;
-  }
-  .file-thumb-progress {
-    position: absolute;
-    top: 37px;
-    left: 0;
-    right: 0;
-  }
-  .file-caption-info, .file-size-info {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 160px;
-    height: 15px;
-    margin: auto;
-  }
-  &.kvsortable-ghost {
-    background: #e1edf7;
-    border: 2px solid #a1abff;
-  }
 }
 
 .kv-upload-progress {
-  .progress, .progress-bar {
-    height: 20px;
-    line-height: 20px;
-  }
-  .progress {
-    margin: 10px 0;
-    overflow: hidden;
-  }
+    .progress {
+        height: multiply($pad, 4);
+        line-height: multiply($pad, 4);
+        margin: multiply($pad, 2) 0;
+        overflow: hidden;
+    }
+    .progress-bar {
+        height: multiply($pad, 4);
+        line-height: multiply($pad, 4);
+    }
 }
 
-.file-zoom-dialog .file-other-icon {
-  //noinspection CssOverwrittenProperties
-  font-size: 22em;
-  //noinspection CssOverwrittenProperties
-  font-size: 50vmin;
+.file-zoom-dialog {
+    .file-other-icon {
+        //noinspection CssOverwrittenProperties
+        font-size: 22em;
+        //noinspection CssOverwrittenProperties
+        font-size: 50vmin;
+    }
+    .modal-dialog {
+        @extend %set_relative;
+        width: auto;
+    }
+    .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &:before {
+            @extend %set_hidden;
+        }
+        &:after {
+            @extend %set_hidden;
+        }
+    }
+    .btn-navigate {
+        @extend %set_absolute;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        text-decoration: none;
+        outline: none;
+        opacity: 0.7;
+        top: 45%;
+        font-size: 4em;
+        color: $curious_blue;
+        &:not([disabled]):hover {
+            outline: none;
+            box-shadow: none;
+            opacity: 0.6;
+        }
+    }
+    .floating-buttons {
+        @extend %set_absolute;
+        top: $pad;
+        right: multiply($pad, 2);
+    }
+    .btn-navigate[disabled] {
+        opacity: 0.3;
+    }
+    .btn-prev {
+        left: multiply($pad, 0.2);
+    }
+    .btn-next {
+        right: multiply($pad, 0.2);
+    }
+    .kv-zoom-title {
+        font-weight: 300;
+        color: $mountain_mist;
+        max-width: 50%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 }
 
 .file-input-new {
-  .file-preview, .close, .glyphicon-file, .fileinput-remove-button, .fileinput-upload-button {
-    display: none;
-  }
+    .file-preview {
+        @extend %set_hidden;
+    }
+    .close {
+        @extend %set_hidden;
+    }
+    .glyphicon-file {
+        @extend %set_hidden;
+    }
+    .fileinput-remove-button {
+        @extend %set_hidden;
+    }
+    .fileinput-upload-button {
+        @extend %set_hidden;
+    }
+    .no-browse {
+        .input-group-btn {
+            @extend %set_hidden;
+        }
+        .form-control {
+            border-top-right-radius: $radius;
+            border-bottom-right-radius: $radius;
+        }
+    }
 }
 
 .file-input-ajax-new {
-  .fileinput-remove-button, .fileinput-upload-button {
-    display: none;
-  }
+    .fileinput-remove-button {
+        @extend %set_hidden;
+    }
+    .fileinput-upload-button {
+        @extend %set_hidden;
+    }
+    .no-browse {
+        .input-group-btn {
+            @extend %set_hidden;
+        }
+        .form-control {
+            border-top-right-radius: $radius;
+            border-bottom-right-radius: $radius;
+        }
+    }
 }
 
 .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;
+    width: 100%;
 }
 
 .file-thumb-loading {
-  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;
-  }
+    background: transparent $url_0 no-repeat scroll center center content-box !important;
 }
 
 .file-drop-zone {
-  border: 1px dashed #aaa;
-  border-radius: 4px;
-  height: 100%;
-  text-align: center;
-  vertical-align: middle;
-  margin: 12px 15px 12px 12px;
-  padding: 5px;
+    border: $border dashed $silver_chalice;
+    border-radius: $radius;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+    margin: multiply($pad, 2.4) multiply($pad, 3) multiply($pad, 2.4) multiply($pad, 2.4);
+    padding: $pad;
+    &.clickable {
+        &:hover {
+            border: multiply($border, 2) dashed $mountain_mist;
+        }
+        &:focus {
+            border: multiply($border, 2) solid $viking;
+        }
+    }
+    .file-preview-thumbnails {
+        cursor: default;
+    }
 }
 
 .file-drop-zone-title {
-  color: #aaa;
-  font-size: 1.6em;
-  padding: 85px 10px;
-  cursor: default;
-}
-
-.file-preview .clickable, .clickable .file-drop-zone-title {
-  cursor: pointer;
-}
-
-.file-drop-zone {
-  &.clickable {
-    &:hover {
-      border: 2px dashed #999;
-    }
-    &:focus {
-      border: 2px solid #5acde2;
-    }
-  }
-  .file-preview-thumbnails {
+    color: $silver_chalice;
+    font-size: 1.6em;
+    padding: multiply($pad, 17) multiply($pad, 2);
     cursor: default;
-  }
 }
 
 .file-highlighted {
-  border: 2px dashed #999 !important;
-  background-color: #f0f0f0;
+    border: multiply($border, 2) dashed $mountain_mist !important;
+    background-color: $gallery;
 }
 
 .file-uploading {
-  background: url('../img/loading-sm.gif') no-repeat center bottom 10px;
-  opacity: 0.65;
+    background: $url_1 no-repeat center bottom multiply($pad, 2);
+    opacity: 0.65;
 }
 
-.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: 576px) {
-  .file-zoom-dialog .modal-dialog {
-    max-width: 500px;
-  }
 }
 
-@media (min-width: 992px) {
-  .file-zoom-dialog .modal-lg {
-    max-width: 800px;
-  }
+@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;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    padding: 0;
-  }
-  .modal-content {
-    border-radius: 0;
-    box-shadow: none;
-  }
-  .modal-body {
-    overflow-y: auto;
-  }
-}
-
-.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;
-  }
+    &.modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+    .modal-dialog {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+    .modal-content {
+        border-radius: 0;
+        box-shadow: none;
+    }
+    .modal-body {
+        overflow-y: auto;
+    }
 }
 
 .btn-kv {
-  display: inline-block;
-  text-align: center;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0;
-  font-size: 0.875rem;
-  border-radius: 0.2rem;
-}
-
-.kv-zoom-actions .btn-kv {
-  margin-left: 3px;
+    display: inline-block;
+    text-align: center;
+    width: multiply($pad, 6);
+    height: multiply($pad, 6);
+    line-height: multiply($pad, 6);
+    padding: 0;
+    font-size: 0.875rem;
+    border-radius: 0.2rem;
 }
 
 .floating-buttons {
-  .btn-kv {
-    margin-left: 3px;
     z-index: 3000;
-  }
-  z-index: 3000;
+    .btn-kv {
+        margin-left: multiply($pad, 0.6);
+        z-index: 3000;
+    }
 }
 
-.file-zoom-dialog {
-  .btn-navigate {
-    &:not([disabled]):hover {
-      outline: none;
-      box-shadow: none;
-      opacity: 0.6;
+.file-zoom-content {
+    height: multiply($pad, 96);
+    text-align: center;
+    .file-preview-image {
+        max-height: 100%;
+    }
+    .file-preview-video {
+        max-height: 100%;
+    }
+    .is-portrait-gt4 {
+        margin-top: multiply($pad, 12);
     }
-    &[disabled] {
-      opacity: 0.3;
+    > .file-object {
+        &.type-image {
+            @extend %set_object;
+            height: auto;
+            min-height: inherit;
+        }
+        &.type-video {
+            @extend %set_object_video;
+        }
+        &.type-flash {
+            @extend %set_object_video;
+        }
+        &.type-audio {
+            width: auto;
+            height: multiply($pad, 6);
+        }
+        &.type-pdf {
+            @extend %set_object_default;
+        }
+        &.type-html {
+            @extend %set_object_default;
+        }
+        &.type-text {
+            @extend %set_object_default;
+        }
+        &.type-default {
+            @extend %set_object_default;
+        }
     }
-  }
-  .btn-prev {
-    left: 1px;
-  }
-  .btn-next {
-    right: 1px;
-  }
 }
 
-.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%;
+@media screen and(max-width: 767px) {
+    .file-preview-thumbnails {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
     }
-    &.type-audio {
-      width: auto;
-      height: 30px;
+    .file-zoom-dialog .modal-header {
+        flex-direction: column;
     }
-    &.type-pdf, &.type-html, &.type-text, &.type-default {
-      width: 100%;
+}
+
+@media screen and(max-width: 350px) {
+    .krajee-default.file-preview-frame .kv-file-content {
+        width: multiply($pad, 32);
     }
-  }
 }
 
-.file-preview-initial.sortable-chosen {
-  background-color: #d9edf7;
+input[type=file].file-loading {
+    @extend %set_invisible;
 }
 
-.hide-content .kv-file-content {
-  display: none;
+.file-loading[dir=rtl]:before {
+    background: transparent $url_0 top right no-repeat;
+    padding-left: 0;
+    padding-right: multiply($pad, 4);
 }
 
-// IE 10 fix
-.btn-file ::-ms-browse {
-  font-size: 10000px;
-  width: 100%;
-  height: 100%;
+.file-sortable .file-drag-handle {
+    cursor: move;
+    opacity: 1;
+    &:hover {
+        opacity: 0.7;
+    }
 }
 
-.file-zoom-content .is-portrait-gt4 {
-  margin-top: 60px;
+.clickable .file-drop-zone-title {
+    cursor: pointer;
 }
 
-.file-zoom-dialog .kv-zoom-title {
-  font-weight: 300;
-  color: #999;
-  max-width: 50%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.kv-zoom-actions .btn-kv {
+    margin-left: multiply($pad, 0.6);
 }
 
-@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;
-  }
+.file-preview-initial.sortable-chosen {
+    background-color: $link_water;
 }
 
-@media screen and (max-width: 350px) {
-  .krajee-default.file-preview-frame .kv-file-content {
-    width: 160px;
-  }
+.hide-content .kv-file-content {
+    @extend %set_hidden;
 }

sass/themes/explorer-fa/theme.scss

@@ -2,9 +2,7 @@
  * 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.
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
@@ -12,157 +10,192 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+//colors
+$boston_blue: #428bca;
+$alto: #ddd;
+$tapa: #777;
+$mystic: #e1edf7;
+$perano: #a1abff;
 
-.theme-explorer-fa {
-  .file-preview .table {
-    margin: 0;
-  }
-  .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
-  }
+//fonts
+$font_0: Menlo;
+$font_1: Monaco;
+$font_2: Consolas;
+$font_3: "Courier New";
+$font_4: monospace;
+
+//standard measures
+$pad: 5px;
+$border: 1px;
+$tablet: 767px;
+
+//operations
+@function multiply($pixels, $multiplier) {
+    @return $pixels * $multiplier;
 }
 
-.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 {
+//@extend-elements
+%set_text_center {
     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;
+%set_progress {
+    height: multiply($pad, 2.6);
+    font-size: multiply($pad, 2.2);
+    line-height: multiply($pad, 2.6);
 }
 
-.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 {
+%set_indicator {
     position: absolute;
     display: inline-block;
-    text-align: center;
     top: 0;
-    right: 3px;
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-  }
-  .explorer-caption {
+    right: multiply($pad, 0.6);
+    width: multiply($pad, 3.2);
+    height: multiply($pad, 3.2);
+    font-size: multiply($pad, 3.2);
+    @extend %set_text_center;
+}
+
+%set_block {
     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 {
+.theme-explorer-fa {
+    .explorer-frame {
+        td {
+            vertical-align: middle;
+            text-align: left;
+        }
+        .kv-file-content {
+            width: multiply($pad, 16);
+            height: multiply($pad, 16);
+            padding: $pad;
+            @extend %set_text_center;
+        }
+    }
+    .file-actions-cell {
+        position: relative;
+        width: multiply($pad, 24);
+        padding: 0;
+    }
+    .file-thumb-progress {
+        .progress {
+            @extend %set_block;
+            @extend %set_progress;
+            margin-top: $pad;
+        }
+        .progress-bar {
+            @extend %set_progress;
+        }
+    }
+    .file-upload-indicator {
+        @extend %set_indicator;
+    }
+    .file-drag-handle {
+        @extend %set_indicator;
+    }
+    .explorer-caption {
+        @extend %set_block;
+        color: $tapa;
+    }
+    .file-actions {
+        @extend %set_text_center;
+    }
+    .kvsortable-ghost {
+        opacity: 0.6;
+        background: $mystic;
+        border: multiply($border, 2) solid $perano;
+    }
+    .file-preview .table {
+        margin: 0;
+    }
+    .file-error-message ul {
+        padding: $pad 0 0 multiply($pad, 4);
+    }
+}
+
+.explorer-frame {
+    .file-preview-text {
+        display: inline-block;
+        color: $boston_blue;
+        border: $border solid $alto;
+        font-family: $font_0, $font_1, $font_2, $font_3, $font_4;
+        outline: none;
+        padding: multiply($pad, 1.6);
+        resize: none;
+    }
+    .file-preview-html {
+        display: inline-block;
+        border: $border solid $alto;
+        padding: multiply($pad, 1.6);
+        overflow: auto;
+    }
+    .file-preview-other {
+        @extend %set_text_center;
+    }
+    .file-other-icon {
+        font-size: 2.6em;
+    }
+}
+
+@media only screen and(max-width: $tablet) {
+    //@extend-elements
+    %set_block_full {
         display: block;
         width: 100% !important;
-      }
-      border: none;
-      tr {
-        margin-top: 5px;
-        &:first-child {
-          margin-top: 0;
+    }
+    .theme-explorer-fa {
+        .table {
+            @extend %set_block_full;
+            border: none;
+            tbody {
+                @extend %set_block_full;
+            }
+            tr {
+                @extend %set_block_full;
+                margin-top: $pad;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+            td {
+                @extend %set_block_full;
+                @extend %set_text_center;
+            }
+            .kv-file-content {
+                border-bottom: none;
+                padding: multiply($pad, 0.8);
+                margin: 0;
+                .file-preview-image {
+                    max-width: 100%;
+                    font-size: multiply($pad, 4);
+                }
+            }
         }
-      }
-      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: multiply($pad, 0.8);
+        }
+        .explorer-frame .explorer-caption {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            left: 0;
+            right: 0;
+            margin: auto;
         }
-      }
-    }
-    .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;
-    }
-  }
+}
+
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    //noinspection CssOverwrittenProperties
+    font-size: 22em;
+    //noinspection CssOverwrittenProperties
+    font-size: 50vmin;
 }

sass/themes/explorer/theme.scss

@@ -2,7 +2,7 @@
  * 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`.
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
@@ -10,159 +10,192 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+//colors
+$boston_blue: #428bca;
+$alto: #ddd;
+$tapa: #777;
+$mystic: #e1edf7;
+$perano: #a1abff;
 
-.theme-explorer {
-  .file-preview .table {
-    margin: 0;
-  }
-  .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
-  }
+//fonts
+$font_0: Menlo;
+$font_1: Monaco;
+$font_2: Consolas;
+$font_3: "Courier New";
+$font_4: monospace;
+
+//standard measures
+$pad: 5px;
+$border: 1px;
+$tablet: 767px;
+
+//operations
+@function multiply($pixels, $multiplier) {
+    @return $pixels * $multiplier;
 }
 
-.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 {
+//@extend-elements
+%set_text_center {
     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;
+%set_progress {
+    height: multiply($pad, 2.6);
+    font-size: multiply($pad, 2.2);
+    line-height: multiply($pad, 2.6);
 }
 
-.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 {
+%set_indicator {
     position: absolute;
     display: inline-block;
-    text-align: center;
     top: 0;
-    right: 3px;
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-  }
-  .explorer-caption {
+    right: multiply($pad, 0.6);
+    width: multiply($pad, 3.2);
+    height: multiply($pad, 3.2);
+    font-size: multiply($pad, 3.2);
+    @extend %set_text_center;
+}
+
+%set_block {
     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 {
+.theme-explorer {
+    .explorer-frame {
+        td {
+            vertical-align: middle;
+            text-align: left;
+        }
+        .kv-file-content {
+            width: multiply($pad, 16);
+            height: multiply($pad, 16);
+            padding: $pad;
+            @extend %set_text_center;
+        }
+    }
+    .file-actions-cell {
+        position: relative;
+        width: multiply($pad, 24);
+        padding: 0;
+    }
+    .file-thumb-progress {
+        .progress {
+            @extend %set_block;
+            @extend %set_progress;
+            margin-top: $pad;
+        }
+        .progress-bar {
+            @extend %set_progress;
+        }
+    }
+    .file-upload-indicator {
+        @extend %set_indicator;
+    }
+    .file-drag-handle {
+        @extend %set_indicator;
+    }
+    .explorer-caption {
+        @extend %set_block;
+        color: $tapa;
+    }
+    .file-actions {
+        @extend %set_text_center;
+    }
+    .kvsortable-ghost {
+        opacity: 0.6;
+        background: $mystic;
+        border: multiply($border, 2) solid $perano;
+    }
+    .file-preview .table {
+        margin: 0;
+    }
+    .file-error-message ul {
+        padding: $pad 0 0 multiply($pad, 4);
+    }
+}
+
+.explorer-frame {
+    .file-preview-text {
+        display: inline-block;
+        color: $boston_blue;
+        border: $border solid $alto;
+        font-family: $font_0, $font_1, $font_2, $font_3, $font_4;
+        outline: none;
+        padding: multiply($pad, 1.6);
+        resize: none;
+    }
+    .file-preview-html {
+        display: inline-block;
+        border: $border solid $alto;
+        padding: multiply($pad, 1.6);
+        overflow: auto;
+    }
+    .file-preview-other {
+        @extend %set_text_center;
+    }
+    .file-other-icon {
+        font-size: 2.6em;
+    }
+}
+
+@media only screen and(max-width: $tablet) {
+    //@extend-elements
+    %set_block_full {
         display: block;
         width: 100% !important;
-      }
-      border: none;
-      tr {
-        margin-top: 5px;
-        &:first-child {
-          margin-top: 0;
+    }
+    .theme-explorer {
+        .table {
+            @extend %set_block_full;
+            border: none;
+            tbody {
+                @extend %set_block_full;
+            }
+            tr {
+                @extend %set_block_full;
+                margin-top: $pad;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+            td {
+                @extend %set_block_full;
+                @extend %set_text_center;
+            }
+            .kv-file-content {
+                border-bottom: none;
+                padding: multiply($pad, 0.8);
+                margin: 0;
+                .file-preview-image {
+                    max-width: 100%;
+                    font-size: multiply($pad, 4);
+                }
+            }
         }
-      }
-      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: multiply($pad, 0.8);
+        }
+        .explorer-frame .explorer-caption {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            left: 0;
+            right: 0;
+            margin: auto;
         }
-      }
-    }
-    .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;
-    }
-  }
+}
+
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    //noinspection CssOverwrittenProperties
+    font-size: 22em;
+    //noinspection CssOverwrittenProperties
+    font-size: 50vmin;
 }

themes/explorer-fa/theme.css

@@ -2,9 +2,7 @@
  * 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.
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
@@ -12,151 +10,108 @@
  * 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;
-}
-
-.theme-explorer-fa .explorer-frame td {
-    vertical-align: middle;
-    text-align: left;
+.theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle, .theme-explorer-fa .explorer-frame .kv-file-content, .theme-explorer-fa .file-actions, .explorer-frame .file-preview-other, .theme-explorer-fa .table td {
+    text-align: center;
 }
-
-.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;
+.theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .file-thumb-progress .progress-bar {
+    height: 13px;
+    font-size: 11px;
+    line-height: 13px;
 }
-
-.explorer-frame .file-preview-html {
+.theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
+    position: absolute;
     display: inline-block;
-    border: 1px solid #ddd;
-    padding: 8px;
-    overflow: auto;
-}
-
-.explorer-frame .file-preview-other {
-    text-align: center;
+    top: 0;
+    right: 3px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
 }
-
-.explorer-frame .file-other-icon {
-    font-size: 2.6em;
+.theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .explorer-caption {
+    display: block;
 }
-
-/* noinspection CssOverwrittenProperties */
-.file-zoom-dialog .explorer-frame .file-other-icon {
-    font-size: 22em;
-    font-size: 50vmin;
+.theme-explorer-fa .explorer-frame td {
+    vertical-align: middle;
+    text-align: left;
 }
-
 .theme-explorer-fa .explorer-frame .kv-file-content {
     width: 80px;
     height: 80px;
     padding: 5px;
-    text-align: center;
 }
-
 .theme-explorer-fa .file-actions-cell {
+    position: relative;
     width: 120px;
     padding: 0;
 }
-
 .theme-explorer-fa .file-thumb-progress .progress {
-    display: block;
     margin-top: 5px;
 }
-
-.theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .file-thumb-progress .progress-bar {
-    height: 13px;
-    font-size: 11px;
-    line-height: 13px;
-}
-
-.theme-explorer-fa .file-actions-cell {
-    position: relative;
-}
-
-.theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
-    position: absolute;
-    display: inline-block;
-    text-align: center;
-    top: 0;
-    right: 3px;
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-}
-
 .theme-explorer-fa .explorer-caption {
-    display: block;
     color: #777;
 }
-
-.theme-explorer-fa .file-actions {
-    text-align: center;
-}
-
 .theme-explorer-fa .kvsortable-ghost {
     opacity: 0.6;
     background: #e1edf7;
     border: 2px solid #a1abff;
 }
-
+.theme-explorer-fa .file-preview .table {
+    margin: 0;
+}
 .theme-explorer-fa .file-error-message ul {
     padding: 5px 0 0 20px;
 }
-
-/*
- * mobile responsive styling
- */
+.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;
+}
+.explorer-frame .file-preview-html {
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
+}
+.explorer-frame .file-other-icon {
+    font-size: 2.6em;
+}
 @media only screen and (max-width: 767px) {
     .theme-explorer-fa .table, .theme-explorer-fa .table tbody, .theme-explorer-fa .table tr, .theme-explorer-fa .table td {
         display: block;
         width: 100% !important;
     }
-
     .theme-explorer-fa .table {
         border: none;
     }
-
     .theme-explorer-fa .table tr {
         margin-top: 5px;
     }
-
     .theme-explorer-fa .table tr:first-child {
         margin-top: 0;
     }
-
-    .theme-explorer-fa .table td {
-        text-align: center;
-    }
-
     .theme-explorer-fa .table .kv-file-content {
         border-bottom: none;
         padding: 4px;
         margin: 0;
     }
-
     .theme-explorer-fa .table .kv-file-content .file-preview-image {
         max-width: 100%;
         font-size: 20px;
     }
-
     .theme-explorer-fa .file-details-cell {
         border-top: none;
         border-bottom: none;
         padding-top: 0;
         margin: 0;
     }
-
     .theme-explorer-fa .file-actions-cell {
         border-top: none;
         padding-bottom: 4px;
     }
-
     .theme-explorer-fa .explorer-frame .explorer-caption {
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -165,10 +120,9 @@
         right: 0;
         margin: auto;
     }
-
-    .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
-        right: 3px;
-        bottom: 10px;
-        top: auto;
-    }
-}
+}
+/*noinspection CssOverwrittenProperties*/
+.file-zoom-dialog .explorer-frame .file-other-icon {
+    font-size: 22em;
+    font-size: 50vmin;
+}

themes/explorer/theme.css

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