mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-16 19:50:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

styled custom file input

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/forms.md
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 %}

1
scss/_core.scss
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);
}
}

1
scss/_variables.scss
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";

5
scss/variables/bootstrap/_custom-forms.scss Normal file
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;