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

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto 2017-12-26 22:28:14 -08:00
commit cf5e99e172
7 changed files with 90 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/4.0/components/forms.md
View File

@ -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>
<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

2
docs/4.0/migration.md
View File

@ -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.

68
scss/_button-group.scss
View File

@ -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) {
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@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);
}
// 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) {
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-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);
}
}

42
scss/_custom-forms.scss
View File

@ -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;
}
}
}

46
scss/_input-group.scss
View File

@ -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 {
.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);
}
}

5
scss/_variables.scss
View File

@ -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"
)
) !default;

17
scss/mixins/_forms.scss
View File

@ -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);
}
}