0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

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

This commit is contained in:
Mark Otto 2017-11-24 17:02:01 -08:00
commit babdf36c42
14 changed files with 124 additions and 50 deletions

View File

@ -1,14 +1,14 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{ page.description | default: site.description }}">
<meta name="description" content="{{ page.description | default: site.description | smartify }}">
<meta name="author" content="{{ site.authors }}">
<meta name="generator" content="Jekyll v{{ jekyll.version }}">
<title>
{%- if page.title -%}
{{ page.title }} · {{ site.title }}
{{ page.title | smartify }} · {{ site.title | smartify }}
{%- else -%}
{{ site.title }} · {{ site.description }}
{{ site.title | smartify }} · {{ site.description | smartify }}
{%- endif -%}
</title>

View File

@ -2,14 +2,14 @@
<meta name="twitter:card" content="{% if page.title %}summary{% else %}summary_large_image{% endif %}">
<meta name="twitter:site" content="@{{ site.twitter }}">
<meta name="twitter:creator" content="@{{ site.twitter }}">
<meta name="twitter:title" content="{{ page.title | default: site.title }}">
<meta name="twitter:description" content="{{ page.description | default: site.description }}">
<meta name="twitter:title" content="{{ page.title | default: site.title | smartify }}">
<meta name="twitter:description" content="{{ page.description | default: site.description | smartify }}">
<meta name="twitter:image" content="{% if page.title %}{{ site.url | append: site.social_logo_path }}{% else %}{{ site.url | append: site.social_image_path }}{% endif %}">
<!-- Facebook -->
<meta property="og:url" content="{{ site.url | append: page.url }}">
<meta property="og:title" content="{{ page.title | default: site.title }}">
<meta property="og:description" content="{{ page.description | default: site.description }}">
<meta property="og:title" content="{{ page.title | default: site.title | smartify }}">
<meta property="og:description" content="{{ page.description | default: site.description | smartify }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' | append: site.social_image_path }}">
<meta property="og:image:secure_url" content="{{ site.url | append: site.social_image_path }}">

View File

@ -25,8 +25,8 @@
{% endif %}
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">{{ page.title }}</h1>
<p class="bd-lead">{{ page.description }}</p>
<h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
<p class="bd-lead">{{ page.description | smartify }}</p>
{% include ads.html %}
{{ content }}
</main>

View File

@ -4,8 +4,8 @@ layout: default
<div class="container my-5">
<main class="bd-content" role="main">
<h1 class="bd-title" id="content">{{ page.title }}</h1>
<p class="bd-lead">{{ page.description }}</p>
<h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
<p class="bd-lead">{{ page.description | smartify }}</p>
{% include ads.html %}
{{ content }}
</main>

View File

@ -1018,6 +1018,46 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
</select>
{% endexample %}
You may also choose from small and large custom selects to match our similarly sized text inputs.
{% example html %}
<select class="custom-select custom-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
The `multiple` attribute is also supported:
{% example html %}
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
As is the `size` attribute:
{% example html %}
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
### 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.

View File

@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
### Vertically centered
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">

View File

@ -586,7 +586,7 @@ Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `
## Captions
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what its about and decide if they want to read it.
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
{% example html %}
<table class="table">

View File

@ -11,6 +11,8 @@ toc: true
While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
- Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
- The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow.
- Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling.
## Beta 2 changes

View File

@ -126,15 +126,9 @@
"node": ">=6"
},
"files": [
".babelrc",
".eslintignore",
"Gemfile",
"dist",
"build",
"js/.eslintrc.json",
"js/**/*.js",
"js/**/*.js.map",
"scss/**/*.scss"
"dist/",
"js/{src,dist}/",
"scss/"
],
"browserslist": [
"Chrome >= 45",
@ -205,7 +199,7 @@
},
"dependencies": {},
"peerDependencies": {
"jquery": "^3.0.0",
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.9"
}
}

View File

@ -33,7 +33,7 @@
&:active ~ .custom-control-indicator {
color: $custom-control-indicator-active-color;
@include gradient-bg($custom-control-indicator-active-bg);
background-color: $custom-control-indicator-active-bg;
@include box-shadow($custom-control-indicator-active-box-shadow);
}
@ -62,10 +62,17 @@
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
background-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
@include box-shadow($custom-control-indicator-box-shadow);
&::before {
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
}
}
// Checkboxes
@ -78,13 +85,20 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-checkbox-indicator-icon-checked;
@include gradient-bg($custom-control-indicator-checked-bg);
&::before {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: $custom-checkbox-indicator-indeterminate-bg;
background-image: $custom-checkbox-indicator-icon-indeterminate;
@include gradient-bg($custom-control-indicator-checked-bg);
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
&::before {
background-image: $custom-checkbox-indicator-icon-indeterminate;
}
}
}
@ -98,7 +112,11 @@
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-radio-indicator-icon-checked;
@include gradient-bg($custom-control-indicator-checked-bg);
&::before {
background-image: $custom-radio-indicator-icon-checked;
}
}
}
@ -149,7 +167,7 @@
&:focus {
border-color: $custom-select-focus-border-color;
outline: 0;
@include box-shadow($custom-select-focus-box-shadow);
box-shadow: $custom-select-focus-box-shadow;
&::-ms-value {
// For visual consistency with other platforms/browsers,
@ -162,8 +180,10 @@
}
}
&[multiple] {
&[multiple],
&[size]:not([size="1"]) {
height: auto;
padding-right: $custom-select-padding-x;
background-image: none;
}
@ -185,6 +205,13 @@
font-size: $custom-select-font-size-sm;
}
.custom-select-lg {
height: $custom-select-height-lg;
padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-font-size-lg;
}
// File
//
@ -206,7 +233,12 @@
opacity: 0;
&:focus ~ .custom-file-control {
border-color: $custom-file-focus-border-color;
box-shadow: $custom-file-focus-box-shadow;
&::before {
border-color: $custom-file-focus-border-color;
}
}
}

View File

@ -53,9 +53,7 @@
.modal-dialog-centered {
display: flex;
align-items: center;
height: 100%;
margin-top: 0;
margin-bottom: 0;
min-height: calc(100% - (#{$modal-dialog-margin} * 2));
}
// Actual modal
@ -154,8 +152,7 @@
}
.modal-dialog-centered {
margin-top: 0;
margin-bottom: 0;
min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
}
.modal-content {

View File

@ -483,15 +483,19 @@ $custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default;
$custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default;
$custom-select-font-size-lg: 125% !default;
$custom-select-height-lg: $input-height-lg !default;
$custom-file-height: $input-height !default;
$custom-file-width: 14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
$custom-file-padding-y: $input-btn-padding-y !default;
$custom-file-padding-x: $input-btn-padding-x !default;

View File

@ -51,16 +51,16 @@
}
}
@mixin button-outline-variant($color, $color-hover: #fff) {
@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
color: $color;
background-color: transparent;
background-image: none;
border-color: $color;
@include hover {
color: $color-hover;
background-color: $color;
border-color: $color;
&:hover {
color: color-yiq($color);
background-color: $active-background;
border-color: $active-border;
}
&:focus,
@ -77,9 +77,9 @@
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active,
.show > &.dropdown-toggle {
color: $color-hover;
background-color: $color;
border-color: $color;
color: color-yiq($color-hover);
background-color: $active-background;
border-color: $active-border;
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}

View File

@ -84,11 +84,16 @@
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-indicator {
background-color: rgba($color, .4);
background-color: lighten($color, 25%);
}
~ .custom-control-description {
color: $color;
}
&:checked {
~ .custom-control-indicator {
@include gradient-bg(lighten($color, 10%));
}
}
&:focus {
~ .custom-control-indicator {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);