styled custom file input

This commit is contained in:
FezVrasta 2016-08-01 11:34:34 +02:00
parent 6660defe36
commit 88d703e09d
5 changed files with 18 additions and 1 deletions

View File

@ -908,7 +908,7 @@ The file input is the most gnarly of the bunch and require additional JavaScript
{% example html %}
<label class="custom-file">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control"></span>
<span class="custom-file-control" tabindex="0"></span>
</label>
{% endexample %}

View File

@ -8,6 +8,7 @@
@import "layout";
@import "buttons";
@import "checkboxes";
@import "custom-forms";
@import "switches";
@import "radios";
@import "forms";

10
scss/_custom-forms.scss Normal file
View File

@ -0,0 +1,10 @@
.custom-file-control {
@extend .form-control;
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
&::before {
@extend .btn;
position: absolute;
height: calc(100% - 1px);
}
}

View File

@ -20,6 +20,7 @@ $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
// Customized BS variables
@import "variables/bootstrap/components";
@import "variables/bootstrap/custom-forms";
@import "variables/bootstrap/spacing";
@import "variables/bootstrap/body";
@import "variables/bootstrap/brand";

View File

@ -0,0 +1,5 @@
$custom-file-bg: transparent !default;
$custom-file-border-width: 0 !default;
$custom-file-box-shadow: none !default;
$custom-file-border-radius: 0 !default;
$custom-file-line-height: 1.3 !default;