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:
commit
babdf36c42
@ -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>
|
||||
|
||||
|
@ -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 }}">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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.
|
||||
|
@ -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">
|
||||
|
@ -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 it’s 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">
|
||||
|
@ -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
|
||||
|
14
package.json
14
package.json
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user