rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

add custom file vars, fix up custom select var

Browse Source
This commit is contained in:
Mark Otto 2016-01-17 15:21:16 -08:00
parent 6b318ef176
commit 5c12d5e469
2 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
scss/_custom-forms.scss
View File

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

19
scss/_variables.scss
View File

@ -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-padding-y: .2rem !default;
$custom-select-sm-font-size: 75% !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 validation icons
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default; $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default; $form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;