Procházet zdrojové kódy

Fix #1731: Enhance RTL Styling for bootstrap 4/5 input groups

Kartik Visweswaran před 3 roky
rodič
revize
48d2b853d8

+ 1 - 0
CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1731): Enhance RTL Styling for bootstrap 4/5 input groups.
 - (enh #1730): Enhancements for bootstrap input group styles.
   - New plugin option `inputGroupClass` - defaults to empty string
   - Can be set to `input-group-lg` or `input-group-sm` to get bootstrap input group styles

+ 21 - 4
css/fileinput-rtl.css

@@ -95,12 +95,29 @@
     padding-right: 30px;
 }
 
-.kv-rtl .input-group-btn > .btn:last-child {
-    border-radius: 4px 0 0 4px;
+.kv-rtl .input-group > .input-group-btn:last-child > .btn:last-child {
+    border-radius: 4px 0 0 4px !important;
 }
 
-.kv-rtl .input-group .form-control:first-child {
-    border-radius: 0 4px 4px 0;
+.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] {

+ 1 - 1
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 .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;padding:.5rem;right:4px}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .btn-kv-prev{right:1px;left:auto}.kv-rtl .btn-kv-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:30px}.kv-rtl .input-group-btn>.btn:last-child{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]{left:auto;right:0;text-align:left;background:100% 0 none}
+ */.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;padding:.5rem;right:4px}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .btn-kv-prev{right:1px;left:auto}.kv-rtl .btn-kv-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: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>.btn:last-child,.kv-rtl .input-group>.form-control:last-child,.kv-rtl .input-group>.input-group-append:last-child>.btn:last-child{border-radius:.25rem 0 0 .25rem!important}.kv-rtl .input-group>.form-control:first-child,.kv-rtl .input-group>.input-group-prepend:first-child>.btn:first-child,.kv-rtl .input-group>.input-group>.btn:first-child{border-radius:0 .25rem .25rem 0!important}.kv-rtl .input-group>.file-caption-icon:first-child~.form-control:last-child{border-radius:.25rem!important}.kv-rtl .btn-file input[type=file]{left:auto;right:0;text-align:left;background:100% 0 none}

+ 10 - 2
css/fileinput.css

@@ -179,7 +179,15 @@ input[type=file].file-loading {
 }
 
 .file-caption.icon-visible .file-caption-name {
-    padding-left: 30px;
+    padding-left: 1.875rem;
+}
+
+.file-caption.icon-visible > .input-group-lg .file-caption-name {
+    padding-left: 2.1rem;
+}
+
+.file-caption.icon-visible > .input-group-sm .file-caption-name {
+    padding-left: 1.5rem;
 }
 
 .file-caption-name:not(.file-caption-disabled) {
@@ -199,11 +207,11 @@ input[type=file].file-loading {
 
 .input-group-lg .file-caption-icon {
     font-size: 1.25rem;
-    padding: 0.9rem 0.9rem 0 0.2rem;
 }
 
 .input-group-sm .file-caption-icon {
     font-size: 0.875rem;
+    padding: 0.25rem;
 }
 
 .file-error-message {

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
css/fileinput.min.css


+ 49 - 5
scss/fileinput-rtl.scss

@@ -40,93 +40,137 @@ $border: 1px !default;
 
 .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-kv-prev {
         right: multiply($pad, 0.2);
         left: auto;
     }
+
     .btn-kv-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 > .btn:last-child {
-        border-radius: $radius 0 0 $radius;
-    }
-    .input-group .form-control:first-child {
-        border-radius: 0 $radius $radius 0;
+
+    .input-group {
+        > .input-group-btn:last-child > .btn:last-child {
+            border-radius: 4px 0 0 4px !important;
+        }
+
+        > .input-group-btn:first-child > .btn:first-child {
+            border-radius: 0 4px 4px 0 !important;
+        }
+
+        > .input-group-append:last-child > .btn:last-child,
+        > .btn:last-child,
+        > .form-control:last-child {
+            border-radius: 0.25rem 0 0 0.25rem !important;
+        }
+
+        > .input-group-prepend:first-child > .btn:first-child,
+        > .input-group > .btn:first-child,
+        > .form-control:first-child {
+            border-radius: 0 0.25rem 0.25rem 0 !important;
+        }
+
+        .file-caption-icon:first-child ~ .form-control:last-child {
+            border-radius: 0.25rem !important;
+        }
     }
+
     .btn-file input[type=file] {
         left: auto;
         right: 0;

+ 10 - 2
scss/fileinput.scss

@@ -229,7 +229,15 @@ input[type=file].file-loading {
         }
 
         .file-caption-name {
-            padding-left: multiply($pad, 3);
+            padding-left: 1.875rem;
+        }
+
+        > .input-group-lg .file-caption-name {
+            padding-left: 2.1rem;
+        }
+
+        > .input-group-sm .file-caption-name {
+            padding-left: 1.5rem;
         }
     }
 }
@@ -243,11 +251,11 @@ input[type=file].file-loading {
 
 .input-group-lg .file-caption-icon {
     font-size: 1.25rem;
-    padding: 0.9rem 0.9rem 0 0.2rem;
 }
 
 .input-group-sm .file-caption-icon {
     font-size: 0.875rem;
+    padding: 0.25rem;
 }
 
 .file-error-message {

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů