mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-03 05:14:16 +03:00
styled custom file input
This commit is contained in:
parent
6660defe36
commit
88d703e09d
|
@ -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 %}
|
||||
|
||||
|
|
|
@ -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
10
scss/_custom-forms.scss
Normal 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);
|
||||
}
|
||||
}
|
|
@ -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
5
scss/variables/bootstrap/_custom-forms.scss
Normal 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;
|
Loading…
Reference in New Issue
Block a user