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 'twbs/v4-dev' into dropdown-keyboard

Browse Source
This commit is contained in:
Pierre-Denis Vanduynslager 2017-01-16 15:31:38 -05:00
commit 8da2815e47
15 changed files with 28 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/nav-docs.html
View File

@ -1,5 +1,5 @@
<form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
<input type="search" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
<div class="dropdown-menu bd-search-results" id="search-results"></div>
</form>

2
docs/assets/scss/_component-examples.scss
View File

@ -83,7 +83,7 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem -1rem;
margin: 1rem (-$grid-gutter-width-base / 2);
border: solid #f7f7f9;
border-width: .2rem 0 0;
@include clearfix();

3
docs/components/alerts.md
View File

@ -55,12 +55,13 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
### Additional content
Alerts can also contain additional HTML elements like headings and paragraphs.
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
{% example html %}
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}

13
docs/components/badge.md
View File

@ -53,3 +53,16 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
{% endexample %}
## Links
Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
{% example html %}
<a href="#" class="badge badge-default">Default</a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
{% endexample %}

2
docs/components/collapse.md
View File

@ -40,7 +40,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
## Accordion example
Extend the default collapse behavior to create an accordion.
Using the [card]({{ site.baseurl }}/components/card) component, you can extend the default collapse behavior to create an accordion.
{% example html %}
<div id="accordion" role="tablist">

4
docs/content/images.md
View File

@ -25,9 +25,9 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
{% endhighlight %}
{% callout warning %}
#### SVG images and IE 9-10
#### SVG images and IE 10
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %}
## Image thumbnails

2
docs/getting-started/accessibility.md
View File

@ -48,7 +48,7 @@ Note that this bug will also affect any other in-page links your site may be usi
When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessibility](http://accessibility.psu.edu/headings/).
## Additional resources

1
docs/layout/overview.md
View File

@ -169,7 +169,6 @@ We don't encourage customization of these values; should you change one, you lik
```scss
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-fixed: 1030 !default;
$zindex-sticky: 1030 !default;

4
docs/layout/responsive-utilities.md
View File

@ -28,11 +28,11 @@ Try to use these on a limited basis and avoid creating entirely different versio
<th></th>
<th>
Extra small devices
<small>Portrait phones (&lt;544px)</small>
<small>Portrait phones (&lt;576px)</small>
</th>
<th>
Small devices
<small>Landscape phones (&ge;544px - &lt;768px)</small>
<small>Landscape phones (&ge;576px - &lt;768px)</small>
</th>
<th>
Medium devices

8
docs/migration.md
View File

@ -170,11 +170,11 @@ The navbar has been entirely rewritten in flexbox with improved support for alig
- An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
### Labels, badges, and tags
### Labels and badges
- Renamed `.label` to `.tag` to disambiguate from the `<label>` element.
- Dropped the `.badge` component as it was nearly identical to labels/tags. Use the `.tag-pill` modifier together with the label component instead for that rounded look.
- Tags are no longer floated automatically in list groups and other components. Utility classes are now required for that.
- Renamed `.label` to `.badge` to disambiguate from the `<label>` element.
- Dropped the `.badge` component as it was nearly identical to labels. Use the `.badge-pill` modifier together with the label component instead for that rounded look.
- Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
### Panels, thumbnails, and wells

1
scss/_custom-forms.scss
View File

@ -208,7 +208,6 @@
max-width: 100%;
height: $custom-file-height;
margin: 0;
filter: alpha(opacity = 0);
opacity: 0;
&:focus ~ .custom-file-control {

23
scss/_list-group.scss
View File

@ -22,10 +22,6 @@
color: $list-group-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
@ -73,14 +69,6 @@
color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: $list-group-disabled-text-color;
}
}
// Include both here for `<a>`s and `<button>`s
@ -89,17 +77,6 @@
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: $list-group-active-text-color;
}
}
}

2
scss/_reboot.scss
View File

@ -164,7 +164,7 @@ a {
color: $link-color;
text-decoration: $link-decoration;
@include hover-focus {
@include hover {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}

25
scss/_variables.scss
View File

@ -183,9 +183,6 @@ $sizes: (
$body-bg: $white !default;
$body-color: $gray-dark !default;
$inverse-bg: $gray-dark !default;
$inverse-color: $gray-lighter !default;
// Links
//
@ -245,7 +242,6 @@ $grid-gutter-widths: (
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
@ -291,8 +287,6 @@ $small-font-size: 80% !default;
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
@ -400,7 +394,6 @@ $btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-block-spacing-y: .5rem !default;
$btn-toolbar-margin: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
@ -469,7 +462,6 @@ $custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
$custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
@ -517,7 +509,6 @@ $custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: lighten($brand-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-sm-padding-y: .2rem !default;
$custom-select-sm-font-size: 75% !default;
$custom-file-height: 2.5rem !default;
@ -589,7 +580,6 @@ $dropdown-header-color: $gray-light !default;
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-fixed: 1030 !default;
$zindex-sticky: 1030 !default;
@ -598,15 +588,11 @@ $zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// Navbar
$navbar-border-radius: $border-radius !default;
$navbar-padding-x: $spacer !default;
$navbar-padding-y: ($spacer / 2) !default;
$navbar-brand-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
@ -628,10 +614,7 @@ $navbar-light-toggler-border: rgba($black,.1) !default;
// Navs
$nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
@ -641,8 +624,6 @@ $nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
@ -871,14 +852,11 @@ $list-group-hover-bg: $gray-lightest !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: $gray !default;
$list-group-link-heading-color: $gray-dark !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-active-color: $list-group-color !default;
@ -943,7 +921,6 @@ $close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// Code
$code-font-size: 90% !default;
@ -955,7 +932,5 @@ $code-bg: $gray-lightest !default;
$kbd-color: $white !default;
$kbd-bg: $gray-dark !default;
$pre-bg: $gray-lightest !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;

4
scss/mixins/_list-group.scss
View File

@ -10,10 +10,6 @@
button.list-group-item-#{$state} {
color: $color;
.list-group-item-heading {
color: inherit;
}
@include hover-focus {
color: $color;
background-color: darken($background, 5%);