Custom File padding-x and padding-y values are reversed (#23067)

Custom File `$custom-file-focus-box-shadow` should show even if box shadows are disabled

Custom File variables should inherit from inputs

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index ceb0278f4ab61eaadebc3205b5f362485e554a12..1bf268b835b78186ab70bd0620940b470a3a36f1 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -204,7 +204,7 @@
   opacity: 0;
 
   &:focus ~ .custom-file-control {
-    @include box-shadow($custom-file-focus-box-shadow);
+    box-shadow: $custom-file-focus-box-shadow;
   }
 }
 
@@ -215,7 +215,7 @@
   left: 0;
   z-index: 5;
   height: $custom-file-height;
-  padding: $custom-file-padding-x $custom-file-padding-y;
+  padding: $custom-file-padding-y $custom-file-padding-x;
   overflow: hidden;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
@@ -240,7 +240,7 @@
     z-index: 6;
     display: block;
     height: $custom-file-height;
-    padding: $custom-file-padding-x $custom-file-padding-y;
+    padding: $custom-file-padding-y $custom-file-padding-x;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
     background-color: $custom-file-button-bg;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 23e1cf3f52a01dcd96e334d046257dce0d49a4ea..b57c15f0102cede5a349708dbf91d4e6c078bba2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -465,21 +465,21 @@ $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px r
 $custom-select-font-size-sm:  75% !default;
 $custom-select-height-sm: $input-height-sm !default;
 
-$custom-file-height:           2.5rem !default;
+$custom-file-height:           $input-height !default;
 $custom-file-width:            14rem !default;
 $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
 
-$custom-file-padding-y:     1rem !default;
-$custom-file-padding-x:     .5rem !default;
-$custom-file-line-height:   1.5 !default;
-$custom-file-color:         $gray-700 !default;
-$custom-file-bg:            $white !default;
-$custom-file-border-width:  $border-width !default;
+$custom-file-padding-y:     $input-btn-padding-y !default;
+$custom-file-padding-x:     $input-btn-padding-x !default;
+$custom-file-line-height:   $input-btn-line-height !default;
+$custom-file-color:         $input-color !default;
+$custom-file-bg:            $input-bg !default;
+$custom-file-border-width:  $input-btn-border-width !default;
 $custom-file-border-color:  $input-border-color !default;
-$custom-file-border-radius: $border-radius !default;
-$custom-file-box-shadow:    inset 0 .2rem .4rem rgba($black,.05) !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow:    $input-box-shadow !default;
 $custom-file-button-color:  $custom-file-color !default;
-$custom-file-button-bg:     $gray-200 !default;
+$custom-file-button-bg:     $input-group-addon-bg !default;
 $custom-file-text: (
   placeholder: (
     en: "Choose file..."