Fix custom-file-input theme styles

Author: Fajfa

client/web/compose/src/components/Admin/Import.vue

@@ -20,7 +20,6 @@
           <b-form-file
             :placeholder="$t('label.importPlaceholder')"
             :browse-text="$t('label.browse')"
-            class="font-wight-normal pointer"
             @change="loadFile"
           />
 
@@ -199,26 +198,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-$input-height: 42px;
-$line-height: 30px;
-
-.custom-file-input {
-  height: $input-height;
-}
-
-.custom-file-label {
-  height: $input-height;
-  font-family: var(--font-regular);
-
-  &::after {
-    height: 100%;
-    font-family: var(--btn-font-family);
-    line-height: $line-height;
-    background-color: var(--light);
-    color: var(--dark);
-    font-weight: 400;
-    padding: var(btn-padding-y) var(--btn-padding-x);
-  }
-}
-</style>

server/assets/src/scss/main/18184031_custom-forms.scss

@@ -326,6 +326,7 @@
   &[disabled] ~ .custom-file-label,
   &:disabled ~ .custom-file-label {
     background-color: $custom-file-disabled-bg;
+    cursor: not-allowed
   }
 
   @each $lang, $value in $custom-file-text {
@@ -340,6 +341,7 @@
 }
 
 .custom-file-label {
+  cursor: pointer;
   position: absolute;
   top: 0;
   right: 0;
@@ -365,12 +367,13 @@
     display: block;
     height: $custom-file-height-inner;
     padding: $custom-file-padding-y $custom-file-padding-x;
+    font-family: $btn-font-family;
     line-height: $custom-file-line-height;
     color: $custom-file-button-color;
     content: "Browse";
     @include gradient-bg($custom-file-button-bg);
     border-left: inherit;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+    border-radius: 0;
   }
 }
 

server/assets/src/scss/theme/theme-specific.scss

@@ -955,6 +955,20 @@
         text-shadow: 0 0 0 $custom-select-color;
       }
     }
+
+    .custom-file-input {
+      &:focus ~ .custom-file-label {
+        border-color: $custom-file-focus-border-color;
+        box-shadow: $custom-file-focus-box-shadow;
+      }
+
+      // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+      &[disabled] ~ .custom-file-label,
+      &:disabled ~ .custom-file-label {
+        background-color: $custom-file-disabled-bg;
+      }
+    }
+
     .custom-file-label {
       font-family: $custom-file-font-family;
       font-weight: $custom-file-font-weight;
@@ -966,12 +980,10 @@
       @include box-shadow($custom-file-box-shadow);
 
       &::after {
+        font-family: $btn-font-family;
         line-height: $custom-file-line-height;
         color: $custom-file-button-color;
         @include gradient-bg($custom-file-button-bg);
-        @include border-radius(
-          0 $custom-file-border-radius $custom-file-border-radius 0
-        );
       }
     }
     .custom-range {
@@ -991,10 +1003,6 @@
         }
       }
 
-      &::-moz-focus-outer {
-        border: 0;
-      }
-
       &::-webkit-slider-thumb {
         @include gradient-bg($custom-range-thumb-bg);
         border: $custom-range-thumb-border;

server/assets/src/scss/variables/18182031_webapp_variable.scss

@@ -148,6 +148,7 @@ $pagination-active-bg:    $primary !default;
 $pagination-border-width: 0 !default;
 
 // Forms
+$input-font-family: $font-regular !default;
 $input-color: $black !default;
 $input-disabled-bg: $light !default;