diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index c384775dafc2000de82a6bce0d6ead7b6ad1f249..205f65fabffbcdaf5b557a4549bb967fc4109014 100644 --- 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 --- 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;