mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

rewrite custom file input component to use classes over nested elements

Browse Source
This commit is contained in:
Mark Otto
2016-01-05 23:45:44 -08:00
parent ac446058ff
commit d8d67eaa6a
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
scss/_custom-forms.scss
View File

@@ -184,21 +184,27 @@
//
// Custom file input.
.file {
.custom-file {
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
}
.file input {
.custom-file-input {
min-width: 14rem;
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);
}
}
.file-custom {
.custom-file-control {
position: absolute;
top: 0;
right: 0;
@@ -213,28 +219,25 @@
border: $input-btn-border-width solid #ddd;
border-radius: .25rem;
@include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
}
.file-custom::after {
content: "Choose file...";
}
.file-custom::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
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;
}
// Focus state
.file input:focus ~ .file-custom {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
&::after {
content: "Choose file...";
}
&::before {
position: absolute;
top: -.075rem;
right: -.075rem;
bottom: -.075rem;
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;
}
}