rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Change custom file markup

Browse Source
This commit is contained in:
ysds 2019-04-27 03:26:10 +09:00 committed by XhmikosR
parent 99eff2f58f
commit a454ea7cf7
4 changed files with 55 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
scss/_custom-forms.scss
View File

@ -315,16 +315,6 @@
&[disabled] ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}
~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}
.custom-file-label {
@ -333,33 +323,43 @@
right: 0;
left: 0;
z-index: 1;
display: flex;
height: $custom-file-height;
border-color: $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
}
.custom-file-text {
display: block;
flex-grow: 1;
padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
text-overflow: ellipsis;
white-space: nowrap;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-left-radius(inherit);
}
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
.custom-file-button {
display: block;
flex-shrink: 0;
padding: $custom-file-padding-y $custom-file-padding-x;
margin-left: -$custom-file-border-width;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
@include gradient-bg($custom-file-button-bg);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-right-radius(inherit);
}
// Range
@ -507,6 +507,8 @@
.custom-control-label::before,
.custom-file-label,
.custom-file-text,
.custom-file-button,
.custom-select {
@include transition($custom-forms-transition);
}

4
scss/_variables.scss
View File

@ -622,7 +622,6 @@ $custom-range-thumb-active-bg: lighten($component-active-bg, 35%)
$custom-range-thumb-disabled-bg: $gray-500 !default;
$custom-file-height: $input-height !default;
$custom-file-height-inner: $input-height-inner !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-focus-box-shadow !default;
$custom-file-disabled-bg: $input-disabled-bg !default;
@ -640,9 +639,6 @@ $custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
en: "Browse"
) !default;
// Form validation

43
site/content/docs/4.3/components/forms.md
View File

@ -1011,7 +1011,10 @@ Validation styles are available for the following form controls and components:
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<label class="custom-file-label" for="validatedCustomFile">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</form>
@ -1293,41 +1296,11 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
<label class="custom-file-label" for="customFile">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
{{< /example >}}
We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
#### Translating or customizing the strings with SCSS
The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):
{{< highlight scss >}}
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
{{< /highlight >}}
Here's `lang(es)` in action on the custom file input for a Spanish translation:
{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
{{< /example >}}
You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.
#### Translating or customizing the strings with HTML
Bootstrap also provides a way to translate the "Browse" text in HTML with the `data-browse` attribute which can be added to the custom input label (example in Dutch):
{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>
{{< /example >}}

20
site/content/docs/4.3/components/input-group.md
View File

@ -322,14 +322,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
<label class="custom-file-label" for="inputGroupFile01">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
@ -342,14 +348,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
<label class="custom-file-label" for="inputGroupFile03">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
<label class="custom-file-label" for="inputGroupFile04">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>