mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
This commit is contained in:
Mark Otto
commit
cf5e99e172
@ -899,31 +899,37 @@ Our example forms show native textual `<input>`s above, but form validation styl
|
||||
|
||||
{% example html %}
|
||||
<form class="was-validated">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<div class="custom-control custom-checkbox mb-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
|
||||
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
|
||||
<div class="invalid-feedback">Example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
|
||||
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<div class="custom-control custom-radio mb-3">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
|
||||
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
|
||||
<div class="invalid-feedback">More example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<select class="custom-select d-block my-3" required>
|
||||
<option value="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="form-group">
|
||||
<select class="custom-select" required>
|
||||
<option value="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Example invalid custom select feedback</div>
|
||||
</div>
|
||||
|
||||
<label class="custom-file">
|
||||
<input type="file" id="file" class="custom-file-input" required>
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
|
||||
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
|
||||
<div class="invalid-feedback">Example invalid custom file feedback</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@ -1062,24 +1068,16 @@ As is the `size` attribute:
|
||||
|
||||
### File browser
|
||||
|
||||
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
|
||||
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 html %}
|
||||
<label class="custom-file">
|
||||
<input type="file" id="file2" class="custom-file-input">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile">
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Here's how it works:
|
||||
|
||||
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
|
||||
- We hide the default file `<input>` via `opacity`.
|
||||
- We use `::after` to generate a custom background and directive (*Choose file...*).
|
||||
- We use `::before` to generate and position the *Browse* button.
|
||||
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
|
||||
|
||||
In other words, it's an entirely custom element, all generated via CSS.
|
||||
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
|
||||
|
||||
|
||||
@ -35,8 +35,6 @@ While Beta 2 saw the bulk of our breaking changes during the beta phase, but we
|
||||
|
||||
- Sizing classes must be on the parent `.input-group` and not the individual form elements.
|
||||
|
||||
- Due to limitations in how CSS selectors work, all buttons must be the same element (e.g., `<a>` or `<button>`).
|
||||
|
||||
## Beta 2 changes
|
||||
|
||||
While in beta, we aim to have no breaking changes. However, things don't always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.
|
||||
|
||||
@ -44,46 +44,18 @@
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group
|
||||
// and we need :first-child and :last-child to both match
|
||||
> .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
||||
// immediately after it
|
||||
> .btn:last-child:not(:first-child),
|
||||
> .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||
// dropdown buttons within a btn-group)
|
||||
> .btn-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
@ -154,32 +126,14 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -225,7 +225,9 @@
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
@ -238,49 +240,43 @@
|
||||
border-color: $custom-file-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@each $lang, $value in $custom-file-text {
|
||||
&:lang(#{$lang}) ~ .custom-file-label::after {
|
||||
content: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-control {
|
||||
.custom-file-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
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);
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||
&:lang(#{$lang}):empty::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
|
||||
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: $custom-file-border-width solid $custom-file-border-color;
|
||||
border-left: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||
&:lang(#{$lang})::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,9 +33,8 @@
|
||||
|
||||
.form-control,
|
||||
.custom-select {
|
||||
&:not(:first-child):not(:last-of-type) { @include border-radius(0); }
|
||||
&:first-child { @include border-right-radius(0); }
|
||||
&:last-of-type:not(:first-child) { @include border-left-radius(0); }
|
||||
&:not(:last-child) { @include border-right-radius(0); }
|
||||
&:not(:first-child) { @include border-left-radius(0); }
|
||||
}
|
||||
|
||||
// Custom file inputs have more complex markup, thus requiring different
|
||||
@ -44,12 +43,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child):not(:last-of-type) .custom-file-control,
|
||||
&:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
|
||||
&:first-child .custom-file-control,
|
||||
&:first-child .custom-file-control::before { @include border-right-radius(0); }
|
||||
&:last-of-type:not(:first-child) .custom-file-control,
|
||||
&:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
|
||||
&:not(:last-child) .custom-file-control,
|
||||
&:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
|
||||
&:not(:first-child) .custom-file-control,
|
||||
&:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,28 +136,21 @@
|
||||
// border-radius values when extending. They're more specific than we'd like
|
||||
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
||||
|
||||
|
||||
.input-group > .input-group-prepend > .btn,
|
||||
.input-group > .input-group-prepend > .input-group-text {
|
||||
// All prepended buttons have no right border-radius
|
||||
.input-group > .input-group-prepend > .input-group-text,
|
||||
.input-group > .input-group-append:not(:last-child) > .btn,
|
||||
.input-group > .input-group-append:not(:last-child) > .input-group-text,
|
||||
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
|
||||
@include border-right-radius(0);
|
||||
|
||||
+ .btn,
|
||||
+ .input-group-text {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// We separate out the button and input resets here because `.input-group-text`
|
||||
// can be any HTML element, but buttons are always inputs, buttons, or anchors.
|
||||
.input-group > .input-group-append {
|
||||
// Everything but the last one have no rounded corners
|
||||
.btn:not(:last-of-type),
|
||||
.input-group-text:not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.btn:last-of-type,
|
||||
.input-group-text:last-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.input-group > .input-group-append > .btn,
|
||||
.input-group > .input-group-append > .input-group-text,
|
||||
.input-group > .input-group-prepend:not(:first-child) > .btn,
|
||||
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
|
||||
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
|
||||
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
@ -509,12 +509,7 @@ $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: (
|
||||
placeholder: (
|
||||
en: "Choose file..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse"
|
||||
)
|
||||
en: "Browse"
|
||||
) !default;
|
||||
|
||||
|
||||
|
||||
@ -88,11 +88,18 @@
|
||||
background-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
@include gradient-bg(lighten($color, 10%));
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
|
||||
@ -105,13 +112,19 @@
|
||||
.custom-file-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-file-control {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
|
||||
&::before { border-color: inherit; }
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-file-control {
|
||||
~ .custom-file-label {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user