rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

File chooser size (#30040)

Browse Source 
Co-authored-by: David Van Doninck <david.vandoninck@intracto.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
This commit is contained in:
Zedicius 2020-03-23 18:36:54 +01:00 committed by GitHub
parent 8f84d4051b
commit 64a5987cc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/_variables.scss
View File

@ -747,6 +747,16 @@ $form-file-box-shadow: $input-box-shadow !default;
$form-file-button-color: $form-file-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
$form-file-padding-y-sm: $input-padding-y-sm !default;
$form-file-padding-x-sm: $input-padding-x-sm !default;
$form-file-font-size-sm: $input-font-size-sm !default;
$form-file-height-sm: $input-height-sm !default;
$form-file-padding-y-lg: $input-padding-y-lg !default;
$form-file-padding-x-lg: $input-padding-x-lg !default;
$form-file-font-size-lg: $input-font-size-lg !default;
$form-file-height-lg: $input-height-lg !default;
// Form validation

24
scss/forms/_form-file.scss
View File

@ -7,7 +7,7 @@
position: relative;
z-index: 2;
width: 100%;
height: $form-file-height;
height: 100%;
margin: 0;
opacity: 0;
@ -32,7 +32,7 @@
left: 0;
z-index: 1;
display: flex;
height: $form-file-height;
height: 100%;
border-color: $form-file-border-color;
@include border-radius($form-file-border-radius);
@include box-shadow($form-file-box-shadow);
@ -69,3 +69,23 @@
border-width: $form-file-border-width;
@include border-right-radius(inherit);
}
.form-file-sm {
height: $form-file-height-sm;
@include font-size($form-file-font-size-sm);
.form-file-text,
.form-file-button {
padding: $form-file-padding-y-sm $form-file-padding-x-sm;
}
}
.form-file-lg {
height: $form-file-height-lg;
@include font-size($form-file-font-size-lg);
.form-file-text,
.form-file-button {
padding: $form-file-padding-y-lg $form-file-padding-x-lg;
}
}

28
site/content/docs/4.3/forms/file.md
View File

@ -3,13 +3,15 @@ layout: docs
title: File browser
description: Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.
group: forms
toc: false
toc: true
---
{{< callout info >}}
The recommended plugin to animate custom file input: [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input), that's what we are using currently here in our docs.
The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs.
{{< /callout >}}
## Default
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
{{< example >}}
@ -47,3 +49,25 @@ Longer placeholder text is truncated and an ellipsis is added when there's not e
{{< /example >}}
We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
## Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
{{< example >}}
<div class="form-file form-file-lg mb-3">
<input type="file" class="form-file-input" id="customFileLg">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-sm">
<input type="file" class="form-file-input" id="customFileSm">
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
{{< /example >}}