add custom file vars, fix up custom select var

5c12d5e4 · Mark Otto · 6b318ef1 · 5c12d5e4 · 5c12d5e4
Commit 5c12d5e4 authored 9 years ago by Mark Otto
Hide whitespace changes
Inline Side-by-side

Showing

with 42 additions and 23 deletions
+42 -23
--- 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);
  }
 }
--- 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;