add custom file vars, fix up custom select var

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index c384775dafc2000de82a6bce0d6ead7b6ad1f249..205f65fabffbcdaf5b557a4549bb967fc4109014 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -185,19 +185,19 @@
   position: relative;
   display: inline-block;
   max-width: 100%;
-  height: 2.5rem;
+  height: $custom-file-height;
   cursor: pointer;
 }
 
 .custom-file-input {
-  min-width: 14rem;
+  min-width: $custom-file-width;
   max-width: 100%;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
 
   &:focus ~ .custom-file-control {
-    @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
+    @include box-shadow($custom-file-focus-box-shadow);
   }
 }
 
@@ -207,34 +207,34 @@
   right: 0;
   left: 0;
   z-index: 5;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
+  height: $custom-file-height;
+  padding: $custom-file-padding-x $custom-file-padding-y;
+  line-height: $custom-file-line-height;
+  color: $custom-file-color;
   user-select: none;
-  background-color: #fff;
-  border: $input-btn-border-width solid #ddd;
-  border-radius: .25rem;
-  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
+  background-color: $custom-file-bg;
+  border: $custom-file-border-width solid $custom-file-border-color;
+  @include border-radius($custom-file-border-radius)
+  @include box-shadow($custom-file-box-shadow);
 
   &::after {
-    content: "Choose file...";
+    content: $custom-file-placeholder;
   }
 
   &::before {
     position: absolute;
-    top: -.075rem;
-    right: -.075rem;
-    bottom: -.075rem;
+    top: -$custom-file-border-width;
+    right: -$custom-file-border-width;
+    bottom: -$custom-file-border-width;
     z-index: 6;
     display: block;
-    height: 2.5rem;
-    padding: .5rem 1rem;
-    line-height: 1.5;
-    color: #555;
-    content: "Browse";
-    background-color: #eee;
-    border: $input-btn-border-width solid #ddd;
-    border-radius: 0 .25rem .25rem 0;
+    height: $custom-file-height;
+    padding: $custom-file-padding-x $custom-file-padding-y;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    content: $custom-file-button-label;
+    background-color: $custom-file-button-bg;
+    border: $custom-file-border-width solid $custom-file-border-color;
+    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 284e4f7e521965f694295ba7f3f33071bc98d9cd..d63e2fac17705c7a6acea7abfc173be8239e0adc 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -373,6 +373,25 @@ $custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px
 $custom-select-sm-padding-y: .2rem !default;
 $custom-select-sm-font-size: 75% !default;
 
+$custom-file-height:           2.5rem !default;
+$custom-file-width:            14rem !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+
+$custom-file-padding-x:     .5rem !default;
+$custom-file-padding-y:     1rem !default;
+$custom-file-line-height:   1.5 !default;
+$custom-file-color:         #555 !default;
+$custom-file-bg:            #fff !default;
+$custom-file-border-width:  $border-width !default;
+$custom-file-border-color:  #ddd !default;
+$custom-file-border-radius: $border-radius !default;
+$custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
+$custom-file-placeholder:   "Choose file..." !default;
+$custom-file-button-label:  "Browse" !default;
+$custom-file-button-color:  $custom-file-color !default;
+$custom-file-button-bg:     #eee !default;
+
+
 // Form validation icons
 $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
 $form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;