Merge branch 'v4-dev' into v4-split-buttons
This commit is contained in:
Mark Otto
commit
d7d0e186bd
|
|
@ -1,6 +1,10 @@
|
|||
javascript:
|
||||
enabled: false
|
||||
scss:
|
||||
config_file: scss/.scss-lint.yml
|
||||
enabled: true
|
||||
ignore_file: scss/_normalize.scss
|
||||
|
||||
javascript:
|
||||
enabled: false
|
||||
|
||||
ruby:
|
||||
enabled: false
|
||||
|
|
|
|||
12
.travis.yml
12
.travis.yml
|
|
@ -6,6 +6,8 @@ node_js:
|
|||
- "4"
|
||||
- "5"
|
||||
before_install:
|
||||
# Remove ./node_modules/.bin from PATH so node-which doesn't replace Unix which and cause RVM to barf. See https://github.com/travis-ci/travis-ci/issues/5092
|
||||
- export PATH=$(python -c 'from sys import argv;from collections import OrderedDict as od;print(":".join(od((p,None) for p in argv[1].split(":") if p.startswith("/")).keys()))' "$PATH")
|
||||
- rvm install 2.2
|
||||
- rvm use 2.2 --fuzzy
|
||||
- export GEMDIR=$(rvm gemdir)
|
||||
|
|
@ -19,13 +21,13 @@ install:
|
|||
- cp grunt/npm-shrinkwrap.json ./
|
||||
- npm install -g grunt-cli
|
||||
- npm install
|
||||
# Caching disabled due to https://github.com/travis-ci/travis-ci/issues/5092
|
||||
#cache:
|
||||
# directories:
|
||||
# - node_modules
|
||||
# - vendor/bundle
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
- vendor/bundle
|
||||
env:
|
||||
global:
|
||||
- NPM_CONFIG_PROGRESS="false"
|
||||
- SAUCE_USERNAME="bootstrap"
|
||||
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||
- secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
|
||||
|
|
|
|||
13
Gemfile
13
Gemfile
|
|
@ -1,12 +1,9 @@
|
|||
# Ruby Gems for building and testing Bootstrap
|
||||
# Run `grunt update-gemfile-lock` to update to the latest compatible versions
|
||||
|
||||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.0.1'
|
||||
gem 'jekyll-redirect-from', '~> 0.9.0'
|
||||
gem 'jekyll-sitemap', '~> 0.9.0'
|
||||
gem 'sass', '~> 3.4.19'
|
||||
gem 'scss_lint', '~> 0.43'
|
||||
gem 'jekyll', '~> 3.1.1'
|
||||
gem 'jekyll-redirect-from', '~> 0.9.1'
|
||||
gem 'jekyll-sitemap', '~> 0.10.0'
|
||||
gem 'sass', '~> 3.4.21'
|
||||
gem 'scss_lint', '~> 0.44.0'
|
||||
end
|
||||
|
|
|
|||
36
Gemfile.lock
36
Gemfile.lock
|
|
@ -4,7 +4,7 @@ GEM
|
|||
colorator (0.1)
|
||||
ffi (1.9.10)
|
||||
ffi (1.9.10-x64-mingw32)
|
||||
jekyll (3.0.1)
|
||||
jekyll (3.1.1)
|
||||
colorator (~> 0.1)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
|
|
@ -13,12 +13,12 @@ GEM
|
|||
mercenary (~> 0.3.3)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-redirect-from (0.9.0)
|
||||
jekyll-redirect-from (0.9.1)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.3.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-sitemap (0.9.0)
|
||||
jekyll-watch (1.3.0)
|
||||
jekyll-sass-converter (1.4.0)
|
||||
sass (~> 3.4)
|
||||
jekyll-sitemap (0.10.0)
|
||||
jekyll-watch (1.3.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.9.0)
|
||||
liquid (3.0.6)
|
||||
|
|
@ -26,15 +26,15 @@ GEM
|
|||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.5)
|
||||
rainbow (2.0.0)
|
||||
rb-fsevent (0.9.6)
|
||||
rb-inotify (0.9.5)
|
||||
rake (10.5.0)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.6)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.10.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.19)
|
||||
scss_lint (0.43.2)
|
||||
rainbow (~> 2.0)
|
||||
sass (3.4.21)
|
||||
scss_lint (0.44.0)
|
||||
rake (~> 10.0)
|
||||
sass (~> 3.4.15)
|
||||
|
||||
PLATFORMS
|
||||
|
|
@ -42,11 +42,11 @@ PLATFORMS
|
|||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.0.1)
|
||||
jekyll-redirect-from (~> 0.9.0)
|
||||
jekyll-sitemap (~> 0.9.0)
|
||||
sass (~> 3.4.19)
|
||||
scss_lint (~> 0.43)
|
||||
jekyll (~> 3.1.1)
|
||||
jekyll-redirect-from (~> 0.9.1)
|
||||
jekyll-sitemap (~> 0.10.0)
|
||||
sass (~> 3.4.21)
|
||||
scss_lint (~> 0.44.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.10.6
|
||||
1.11.2
|
||||
|
|
|
|||
30
Gruntfile.js
30
Gruntfile.js
|
|
@ -279,28 +279,6 @@ module.exports = function (grunt) {
|
|||
}
|
||||
},
|
||||
|
||||
csscomb: {
|
||||
options: {
|
||||
config: 'scss/.csscomb.json'
|
||||
},
|
||||
dist: {
|
||||
expand: true,
|
||||
cwd: 'dist/css/',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'dist/css/'
|
||||
},
|
||||
examples: {
|
||||
expand: true,
|
||||
cwd: 'docs/examples/',
|
||||
src: '**/*.css',
|
||||
dest: 'docs/examples/'
|
||||
},
|
||||
docs: {
|
||||
src: 'docs/assets/css/src/docs.css',
|
||||
dest: 'docs/assets/css/src/docs.css'
|
||||
}
|
||||
},
|
||||
|
||||
copy: {
|
||||
docs: {
|
||||
expand: true,
|
||||
|
|
@ -343,12 +321,14 @@ module.exports = function (grunt) {
|
|||
'Attribute “autocomplete” not allowed on element “button” at this point.',
|
||||
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
|
||||
'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
|
||||
'The “datetime” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “date” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
|
||||
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'Attribute “integrity” not allowed on element “script” at this point.' // Until https://github.com/jzaefferer/grunt-html/issues/86 gets fixed
|
||||
]
|
||||
},
|
||||
src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
|
||||
|
|
@ -482,7 +462,7 @@ module.exports = function (grunt) {
|
|||
// grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
|
||||
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
|
||||
|
||||
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
|
||||
grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'cssmin:core', 'cssmin:docs']);
|
||||
|
||||
// Full distribution task.
|
||||
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js']);
|
||||
|
|
@ -501,7 +481,7 @@ module.exports = function (grunt) {
|
|||
});
|
||||
|
||||
// Docs task.
|
||||
grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
|
||||
grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'cssmin:docs']);
|
||||
grunt.registerTask('lint-docs-css', ['scsslint:docs']);
|
||||
grunt.registerTask('docs-js', ['uglify:docsJs']);
|
||||
grunt.registerTask('lint-docs-js', ['jscs:assets']);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
[](https://bootstrap-slack.herokuapp.com)
|
||||
|
||||
[](https://www.npmjs.com/package/bootstrap)
|
||||
[](https://rubygems.org/gems/bootstrap)
|
||||
[](https://travis-ci.org/twbs/bootstrap)
|
||||
[](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||
[](https://atmospherejs.com/twbs/bootstrap)
|
||||
|
|
|
|||
|
|
@ -42,4 +42,6 @@ cdn:
|
|||
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js
|
||||
js_hash: "sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
|
||||
jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
|
||||
jquery_hash: "sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx"
|
||||
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js
|
||||
tether_hash: "sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2421,7 +2421,7 @@ var ScrollSpy = (function ($) {
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,26 @@
|
|||
origin: >
|
||||
Bootstrap#18504
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
summary: >
|
||||
`@-ms-viewport{width: device-width;}` has side-effect of making scrollbars auto-hide
|
||||
upstream_bug: >
|
||||
IE#2256049
|
||||
origin: >
|
||||
Bootstrap#18543
|
||||
|
||||
-
|
||||
browser: >
|
||||
Internet Explorer 11 & Microsoft Edge
|
||||
summary: >
|
||||
Background color from lower layer bleeds through transparent border in some cases
|
||||
upstream_bug: >
|
||||
IE#2263132
|
||||
origin: >
|
||||
Bootstrap#18228
|
||||
|
||||
-
|
||||
browser: >
|
||||
Firefox
|
||||
|
|
@ -198,16 +218,6 @@
|
|||
origin: >
|
||||
Bootstrap#16372
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari
|
||||
summary: >
|
||||
Incorrect placement of `position: fixed` element when it's a child of a `position: relative; left: X%;` element.
|
||||
upstream_bug: >
|
||||
WebKit#147284, Safari#21993128
|
||||
origin: >
|
||||
Bootstrap#16814
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
|
|
@ -312,13 +322,43 @@
|
|||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS 9+)
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Sometimes excessive automatic zoom is applied after opening a modal, and the user isn't allowed to zoom out
|
||||
`position:fixed` is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari
|
||||
upstream_bug: >
|
||||
WebKit#150715
|
||||
WebKit#153056
|
||||
origin: >
|
||||
WebKit#138201
|
||||
Bootstrap#18859
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Tapping into an `<input>` within a `position:fixed` element scrolls to the top of the page
|
||||
upstream_bug: >
|
||||
WebKit#153224, Safari#24235301
|
||||
origin: >
|
||||
Bootstrap#17497
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
`<body>` with `overflow:hidden` CSS is scrollable on iOS
|
||||
upstream_bug: >
|
||||
WebKit#153852
|
||||
origin: >
|
||||
Bootstrap#14839
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (iOS)
|
||||
summary: >
|
||||
Scroll gesture in text field in `position:fixed` element sometimes scrolls `<body>` instead of scrollable ancestor
|
||||
upstream_bug: >
|
||||
WebKit#153856
|
||||
origin: >
|
||||
Bootstrap#14839
|
||||
|
||||
-
|
||||
browser: >
|
||||
|
|
|
|||
|
|
@ -2,16 +2,20 @@
|
|||
pages:
|
||||
- title: Introduction
|
||||
- title: Download
|
||||
- title: Contents
|
||||
- title: Browsers & devices
|
||||
- title: JavaScript
|
||||
- title: Options
|
||||
- title: Flexbox
|
||||
- title: Build tools
|
||||
- title: Best practices
|
||||
- title: Accessibility
|
||||
|
||||
- title: Layout
|
||||
pages:
|
||||
- title: Overview
|
||||
- title: Grid
|
||||
- title: Flexbox grid
|
||||
- title: Media object
|
||||
- title: Responsive utilities
|
||||
|
||||
|
|
@ -59,7 +63,6 @@
|
|||
pages:
|
||||
- title: History
|
||||
- title: Team
|
||||
- title: Accessibility
|
||||
- title: Brand
|
||||
- title: License
|
||||
- title: Translations
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="{{ site.cdn.jquery }}"></script>
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<script src="{{ site.baseurl }}/assets/js/vendor/tether.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<ul class="nav bd-sidenav">
|
||||
{% for doc in group.pages %}
|
||||
{% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
|
||||
{% capture slug %}/{{ slug }}{% endcapture %}
|
||||
{% assign active = nil %}
|
||||
|
||||
{% if page.url contains slug %}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,61 @@
|
|||
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.current_version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="#">v4.0.0-alpha.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.5</a>
|
||||
<a class="dropdown-item" href="#">v3.3.4</a>
|
||||
<a class="dropdown-item" href="#">v3.3.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.1</a>
|
||||
<a class="dropdown-item" href="#">v3.3.0</a>
|
||||
<a class="dropdown-item" href="#">v3.2.0</a>
|
||||
<a class="dropdown-item" href="#">v3.1.1</a>
|
||||
<a class="dropdown-item" href="#">v3.1.0</a>
|
||||
<a class="dropdown-item" href="#">v3.0.3</a>
|
||||
<a class="dropdown-item" href="#">v3.0.2</a>
|
||||
<a class="dropdown-item" href="#">v3.0.1</a>
|
||||
<a class="dropdown-item" href="#">v3.0.0</a>
|
||||
<div class="container">
|
||||
{% comment %}
|
||||
<nav class="nav navbar-nav pull-xs-right">
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v{{ site.current_version }}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item" href="#">v4.0.0-alpha.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.5</a>
|
||||
<a class="dropdown-item" href="#">v3.3.4</a>
|
||||
<a class="dropdown-item" href="#">v3.3.2</a>
|
||||
<a class="dropdown-item" href="#">v3.3.1</a>
|
||||
<a class="dropdown-item" href="#">v3.3.0</a>
|
||||
<a class="dropdown-item" href="#">v3.2.0</a>
|
||||
<a class="dropdown-item" href="#">v3.1.1</a>
|
||||
<a class="dropdown-item" href="#">v3.1.0</a>
|
||||
<a class="dropdown-item" href="#">v3.0.3</a>
|
||||
<a class="dropdown-item" href="#">v3.0.2</a>
|
||||
<a class="dropdown-item" href="#">v3.0.1</a>
|
||||
<a class="dropdown-item" href="#">v3.0.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcomment %}
|
||||
</nav>
|
||||
{% endcomment %}
|
||||
|
||||
<nav>
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-push-9 bd-sidebar">
|
||||
<div class="col-xs-12 col-md-3 push-md-9 bd-sidebar">
|
||||
{% include nav-docs.html %}
|
||||
</div>
|
||||
<div class="col-md-9 col-md-pull-3 bd-content">
|
||||
<div class="col-xs-12 col-md-9 pull-md-3 bd-content">
|
||||
<h1 class="bd-title" id="content">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
|
|
|||
|
|
@ -10,13 +10,16 @@
|
|||
border-left-width: .25rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
|
@ -31,6 +34,7 @@
|
|||
|
||||
h4 { color: $color; }
|
||||
}
|
||||
.bd-callout-info { @include bs-callout-variant($bd-info); }
|
||||
|
||||
.bd-callout-info { @include bs-callout-variant($bd-info); }
|
||||
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
|
||||
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
|
||||
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
margin-bottom: 1rem;
|
||||
.row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
|
|
@ -13,6 +18,18 @@
|
|||
border: 1px solid rgba(86,61,124,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.flex-items-xs-top,
|
||||
.flex-items-xs-middle,
|
||||
.flex-items-xs-bottom {
|
||||
min-height: 6rem;
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -203,11 +220,6 @@
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Pager
|
||||
.bd-example > .pager {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.bd-example-modal {
|
||||
background-color: #f5f5f5;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// scss-lint:disable IdSelector
|
||||
// scss-lint:disable IdSelector, NestingDepth, SelectorDepth
|
||||
|
||||
//
|
||||
// Automatically style Markdown-based tables like a Bootstrap `.table`.
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
> th,
|
||||
> td {
|
||||
padding: $table-cell-padding;
|
||||
line-height: $line-height;
|
||||
vertical-align: top;
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-pageheader {
|
||||
padding: 2rem ($grid-gutter-width / 2);
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable ImportantRule
|
||||
|
||||
//
|
||||
// Responsive tests
|
||||
//
|
||||
|
|
@ -20,11 +22,11 @@
|
|||
.responsive-utilities td {
|
||||
text-align: center;
|
||||
}
|
||||
.responsive-utilities td.is-visible {
|
||||
.responsive-utilities .is-visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8 !important;
|
||||
}
|
||||
.responsive-utilities td.is-hidden {
|
||||
.responsive-utilities .is-hidden {
|
||||
color: #ccc;
|
||||
background-color: #f9f9f9 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.hll { background-color: #ffc; }
|
||||
.c { color: #999; }
|
||||
.err { color: #a00; background-color: #faa; }
|
||||
.k { color: #069; }
|
||||
.o { color: #555; }
|
||||
.cm { color: #999; }
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
// Doing so gives us access to the same core utilities provided by Bootstrap.
|
||||
// For example, consistent media queries through those mixins.
|
||||
//
|
||||
// - Bootstrap's **docs variables** are prefixed with `%bd-`.
|
||||
// - Bootstrap's **docs variables** are prefixed with `$bd-`.
|
||||
// These custom colors avoid collision with the components Bootstrap provides.
|
||||
//
|
||||
// - Classes are prefixed with `.bd-`.
|
||||
|
|
|
|||
|
|
@ -49,6 +49,19 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Additional content
|
||||
|
||||
Alerts can also contain additional HTML elements like headings and paragraphs.
|
||||
|
||||
{% 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>
|
||||
<p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Dismissing
|
||||
|
||||
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
|
||||
|
|
|
|||
|
|
@ -116,7 +116,11 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
|
|||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||
{% endexample %}
|
||||
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it. In addition, include the `aria-disabled="true"` attribute, to indicate the state of the element to assistive technologies.
|
||||
Disabled buttons using the `<a>` element behave a bit different:
|
||||
|
||||
- `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
|
||||
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. For browsers that support that proper, you won't see the disabled cursor at all.
|
||||
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
|
||||
|
|
|
|||
|
|
@ -211,6 +211,56 @@ Add an optional header and/or footer within a card.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Header nav
|
||||
|
||||
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment.
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image caps
|
||||
|
||||
Similar to headers and footers, cards include top and bottom image caps.
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
</form>
|
||||
{% endexample %}
|
||||
|
||||
Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
|
||||
Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -271,7 +271,7 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
|
|||
|
||||
### Inline forms
|
||||
|
||||
Use the `.form-inline` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
|
||||
Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
|
||||
|
||||
- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
|
||||
- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
|
||||
|
|
@ -634,7 +634,12 @@ Block help text—for below inputs or for longer lines of help text—can be eas
|
|||
|
||||
## Validation
|
||||
|
||||
Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
|
||||
Bootstrap includes validation styles for danger, warning, and success states on form controls.
|
||||
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
|
||||
- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
|
||||
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
|
||||
- Icons can also be disabled entirely by changing the variables to `non` or commenting out the source Sass.
|
||||
|
||||
{% comment %}
|
||||
{% callout warning %}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ List groups are a flexible and powerful component for displaying not only simple
|
|||
{:toc}
|
||||
|
||||
## Basic example
|
||||
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
|
||||
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
|
|
@ -45,36 +45,6 @@ Add labels to any list group item to show unread counts, activity, etc.
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
## Linked items
|
||||
|
||||
Linkify list group items by using anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element.
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Button items
|
||||
|
||||
List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item">Cras justo odio</button>
|
||||
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item">Vestibulum at eros</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled items
|
||||
|
||||
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
||||
|
|
@ -91,22 +61,46 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Anchors and buttons
|
||||
|
||||
Use anchors or buttons to create actionable list group items with hover, disabled, and active states by adding `.list-group-item-action`. This separate class contains a few overrides to add compatibility for `<a>`s and `<button>`s, as well as the hover and focus states.
|
||||
|
||||
Be sure to **not use the standard `.btn` classes here**.
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item list-group-item-action disabled">Vestibulum at eros</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual classes
|
||||
|
||||
Use contextual classes to style list items, default or linked. Also includes `.active` state.
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
|
||||
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
|
||||
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -116,16 +110,16 @@ Add nearly any HTML within, even for linked list groups like the one below.
|
|||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<h5 class="list-group-item-heading">List group item heading</h5>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
|
|||
|
||||
## Optional sizes
|
||||
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These size kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Pagination
|
|||
group: components
|
||||
---
|
||||
|
||||
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pager).
|
||||
Provide pagination links for your site or app with the multi-page pagination component.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
|
|||
|
|
@ -268,7 +268,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td>offsets</td>
|
||||
<td>string</td>
|
||||
<td>'0 0'</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
|
||||
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -60,8 +60,19 @@ Here are some representative examples of these classes:
|
|||
}
|
||||
{% endhighlight %}
|
||||
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`.
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for centering fixed-width block level content by setting the horizontal margins to `auto`.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
Centered element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="m-x-auto" style="width: 200px;"">
|
||||
Centered element
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
## Text alignment
|
||||
|
||||
|
|
@ -191,27 +202,7 @@ Two similar non-responsive mixins (`pull-left` and `pull-right`) are also availa
|
|||
}
|
||||
{% endhighlight %}
|
||||
|
||||
## Center content
|
||||
|
||||
Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
|
||||
|
||||
{% example html %}
|
||||
<div class="center-block">Centered block</div>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Class
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Usage as a mixin
|
||||
.element {
|
||||
@include center-block;
|
||||
}
|
||||
{% endhighlight %}
|
||||
## Clearfix
|
||||
|
||||
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
|
||||
|
||||
|
|
@ -254,7 +245,7 @@ The `.invisible` class can be used to toggle only the visibility of an element,
|
|||
|
||||
// Usage as a mixin
|
||||
.element {
|
||||
.invisible();
|
||||
@include invisible;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,30 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
|
|||
- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
|
||||
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
|
||||
|
||||
## Native font stack
|
||||
|
||||
The default web (Helvetica Neue, Helvetica, and Arial) fonts have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this Smashing Magazine article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
|
||||
|
||||
{% highlight sass %}
|
||||
$font-family-sans-serif:
|
||||
// Safari for OS X and iOS (San Francisco)
|
||||
-apple-system,
|
||||
// Chrome for OS X (San Francisco) and Windows (Segoe UI)
|
||||
BlinkMacSystemFont,
|
||||
// Windows
|
||||
"Segoe UI",
|
||||
// Android
|
||||
"Roboto",
|
||||
// Linux distros
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
// Older Android
|
||||
"Droid Sans",
|
||||
// Basic web fallback
|
||||
"Helvetica Neue", Arial, sans-serif !default;
|
||||
{% endhighlight %}
|
||||
|
||||
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
|
||||
|
||||
## Headings and paragraphs
|
||||
|
||||
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@ Bootstrap includes simple and easily customized typography for headings, body te
|
|||
|
||||
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
|
||||
|
||||
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default)
|
||||
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base
|
||||
- Set the global link color via `$link-color` and apply link underlines only on `:hover`
|
||||
- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
|
||||
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
|
||||
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
|
||||
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
|
||||
|
||||
These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`.
|
||||
|
||||
|
||||
## Headings
|
||||
|
||||
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
|
||||
|
|
@ -132,8 +132,14 @@ Styling for common inline HTML5 elements.
|
|||
<p><em>This line rendered as italicized text.</em></p>
|
||||
{% endexample %}
|
||||
|
||||
`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.
|
||||
|
||||
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc.
|
||||
|
||||
## Text utilities
|
||||
|
||||
Change text alignment, transform, style, weight, and color with our [text utilities](http://localhost:9001/components/utilities/#text-alignment).
|
||||
|
||||
## Abbreviations
|
||||
|
||||
Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.
|
||||
|
|
@ -226,7 +232,7 @@ Align terms and descriptions horizontally by using our grid system's predefined
|
|||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
||||
<dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
<dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
|
@ -237,8 +243,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
|
|||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Nested definition list</dt>
|
||||
<dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2421,7 +2421,7 @@ var ScrollSpy = (function ($) {
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,9 +115,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
|
||||
<div class="col-sm-3 offset-sm-1 blog-sidebar">
|
||||
<div class="sidebar-module sidebar-module-inset">
|
||||
<h4>About</h4>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
|
|
@ -158,9 +158,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -136,11 +136,11 @@
|
|||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 col-md-push-5">
|
||||
<div class="col-md-7 push-md-5">
|
||||
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
|
||||
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
|
||||
</div>
|
||||
<div class="col-md-5 col-md-pull-7">
|
||||
<div class="col-md-5 pull-md-7">
|
||||
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -174,9 +174,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<li><a href="">Another nav item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
|
||||
<div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
|
||||
<h1 class="page-header">Dashboard</h1>
|
||||
|
||||
<div class="row placeholders">
|
||||
|
|
@ -224,9 +224,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
<hr>
|
||||
|
||||
<h3>Mixed: mobile and desktop</h3>
|
||||
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
|
|
@ -159,11 +159,11 @@
|
|||
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
|
||||
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
|
||||
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
|
||||
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -75,9 +75,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
<div class="header clearfix">
|
||||
<nav>
|
||||
<ul class="nav nav-pills pull-xs-right">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
|
|
|
|||
|
|
@ -45,9 +45,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -104,9 +104,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -73,9 +73,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" integrity="sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" integrity="sha384-MWq1Lnqj72tmjGdOKuNBn3E0gj3vWfy/1EmR5TVL8d8nGvwgy32YkCpKpTUhwBVv" crossorigin="anonymous"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/vendor/tether.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
|
|||
If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
|
||||
|
||||
{% callout danger %}
|
||||
Due to long-standing shortcomings/bugs in Chrome (see [issue 262171 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=262171 "Chromium bug tracker - Issue 262171: Focus should cycle from named anchor")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
|
||||
Due to long-standing shortcomings/bugs in Chrome (see [issue 454172 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=454172 "Chromium bug tracker - Issue 454172: Focus Link Target (sequential focus navigation starting point)")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
|
||||
|
||||
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
|
||||
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ As a heads up, we include this in all of Bootstrap's documentation and examples
|
|||
|
||||
### Overflow and scrolling
|
||||
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll.
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
|
||||
### Virtual keyboards
|
||||
|
||||
|
|
@ -218,9 +218,13 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
|
|||
|
||||
Even in some modern browsers, printing can be quirky.
|
||||
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) for some details. Suggested workarounds:
|
||||
|
||||
Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:
|
||||
* Embrace the extra-small grid and make sure your page looks acceptable under it.
|
||||
* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small.
|
||||
* Add custom media queries to change the grid size breakpoints for print media only.
|
||||
|
||||
Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) for more details. One potential workaround is the following CSS:
|
||||
|
||||
{% highlight css %}
|
||||
@media print {
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
|
|||
Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Tether first, as our code depends on them.
|
||||
|
||||
{% highlight html %}
|
||||
<script src="{{ site.cdn.jquery }}"></script>
|
||||
<script src="{{ site.cdn.tether }}"></script>
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -60,8 +60,8 @@ Put it all together and your pages should look like this:
|
|||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- jQuery first, then Tether, then Bootstrap JS. -->
|
||||
<script src="{{ site.cdn.jquery }}"></script>
|
||||
<script src="{{ site.cdn.tether }}"></script>
|
||||
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,29 @@ title: Customization options
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
With Bootstrap 4, we've added a handful of global options for easily customizing all the components in your project. These options are handled by Sass variables. Simply change a variable's value and recompile with the included Gruntfile.
|
||||
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed.
|
||||
|
||||
## Available variables
|
||||
## Customizing variables
|
||||
|
||||
You can find and customize these variables in our `_variables.scss` file.
|
||||
Bootstrap 4 ships with a `_custom.scss` file for easy variable overrides. Copy and paste relevant lines from `_variables.scss` into the custom file and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
|
||||
|
||||
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
|
||||
|
||||
{% highlight scss %}
|
||||
// Bootstrap overrides
|
||||
//
|
||||
// Copy variables from `_variables.scss` to this file to override default values
|
||||
// without modifying source files.
|
||||
|
||||
$body-bg: $gray-dark;
|
||||
$body-color: $gray-light;
|
||||
{% endhighlight %}
|
||||
|
||||
Do the same for any variable you need to override, including the global options listed below.
|
||||
|
||||
## Global options
|
||||
|
||||
You can find and customize these variables for key global options in our `_variables.scss` file.
|
||||
|
||||
| Variable | Values | Description |
|
||||
| --------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
|
||||
|
|
@ -16,6 +34,6 @@ You can find and customize these variables in our `_variables.scss` file.
|
|||
| `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` various components. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
|
||||
|
|
|
|||
|
|
@ -53,17 +53,17 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||
|
||||
<div class="row">
|
||||
<div class="col-sm-4 m-b-3">
|
||||
<img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
|
||||
<img src="{{ site.baseurl }}/assets/img/sass.png" alt="Sass support" class="img-fluid">
|
||||
<h4>Preprocessor</h4>
|
||||
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 m-b-3">
|
||||
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
|
||||
<img src="{{ site.baseurl }}/assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
|
||||
<h4>One framework, every device.</h4>
|
||||
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 m-b-3">
|
||||
<img src="assets/img/components.png" alt="Components" class="img-fluid">
|
||||
<img src="{{ site.baseurl }}/assets/img/components.png" alt="Components" class="img-fluid">
|
||||
<h4>Full of features</h4>
|
||||
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,212 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Flexbox grid system
|
||||
group: layout
|
||||
---
|
||||
|
||||
Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
|
||||
|
||||
Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
|
||||
|
||||
{% callout warning %}
|
||||
**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
|
||||
{% endcallout %}
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## How it works
|
||||
|
||||
The flexbox grid system behaves similar to our default grid system, but with a few notable differences:
|
||||
|
||||
- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise.
|
||||
- Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
|
||||
- Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide.
|
||||
- Flexbox grid columns have significantly more alignment options available, including vertical alignment.
|
||||
- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier.
|
||||
|
||||
Chill? Awesome—keep reading for more information and some code snippets.
|
||||
|
||||
## Auto-layout columns
|
||||
|
||||
When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
1 of 2
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
1 of 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
1 of 3
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
1 of 3
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
1 of 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
1 of 3
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
2 of 3 (wider)
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
3 of 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
## Responsive flexbox
|
||||
|
||||
Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
1 of 2 (stacked on mobile)
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
1 of 2 (stacked on mobile)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
## Vertical alignment
|
||||
|
||||
Use the flexbox alignment utilities to vertically align columns.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row flex-items-xs-top">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-middle">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-bottom">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example-row bd-example-row-flex-cols">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs flex-xs-top">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs flex-xs-middle">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col-xs flex-xs-bottom">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
## Horizontal alignment
|
||||
|
||||
Flexbox utilities for horizontal alignment also exist for a number of layout options.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row flex-items-xs-left">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-center">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-right">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-around">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-between">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
|
@ -52,8 +52,7 @@ The above example creates three equal-width columns on small, medium, large, and
|
|||
|
||||
## Grid options
|
||||
|
||||
While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
|
||||
This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
|
||||
While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
|
||||
|
||||
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
||||
|
||||
|
|
@ -136,9 +135,12 @@ When using Bootstrap's source Sass files, you have the option of using Sass vari
|
|||
|
||||
### Variables
|
||||
|
||||
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
|
||||
Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
|
||||
|
||||
{% highlight scss %}
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 15px;
|
||||
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
xs: 0,
|
||||
|
|
@ -152,9 +154,12 @@ $grid-breakpoints: (
|
|||
xl: 1200px
|
||||
);
|
||||
|
||||
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 1.875rem;
|
||||
$container-max-widths: (
|
||||
sm: 576px,
|
||||
md: 720px,
|
||||
lg: 940px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
{% endhighlight %}
|
||||
|
||||
### Mixins
|
||||
|
|
@ -164,23 +169,40 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
|
|||
{% highlight scss %}
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
} @else {
|
||||
@include clearfix();
|
||||
}
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Make the element grid-ready (applying everything but the width)
|
||||
@mixin make-col($gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
float: left;
|
||||
@if $enable-flex {
|
||||
flex: 1;
|
||||
} @else {
|
||||
float: left;
|
||||
}
|
||||
min-height: 1px;
|
||||
padding-left: ($gutter / 2);
|
||||
padding-right: ($gutter / 2);
|
||||
}
|
||||
|
||||
// Set a width (to be used in or out of media queries)
|
||||
@mixin make-col-span($columns) {
|
||||
width: percentage(($columns / $grid-columns));
|
||||
@mixin make-col-span($size, $columns: $grid-columns) {
|
||||
// Set a width (to be used in or out of media queries)
|
||||
@if $enable-flex {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
} @else {
|
||||
width: percentage($size / $columns);
|
||||
}
|
||||
}
|
||||
|
||||
// Get fancy by offsetting, or changing the sort order
|
||||
|
|
@ -246,36 +268,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu
|
|||
|
||||
### Example: Stacked-to-horizontal
|
||||
|
||||
Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.
|
||||
Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-8">md-8</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">md-6</div>
|
||||
<div class="col-md-6">md-6</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
|
@ -366,32 +388,32 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
|
|||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
|
||||
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
|
||||
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
|
||||
<div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
|
||||
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
### Example: Offsetting columns
|
||||
|
||||
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
|
||||
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
|
@ -425,8 +447,30 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
|
|||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||
<div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
|
||||
<div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
## Customizing the grid
|
||||
|
||||
Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
|
||||
|
||||
For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
|
||||
|
||||
{% highlight scss %}
|
||||
$grid-breakpoints: (
|
||||
sm: 480px,
|
||||
md: 768px,
|
||||
lg: 1024px
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 420px,
|
||||
md: 720px,
|
||||
lg: 940px
|
||||
) !default;
|
||||
{% endhighlight %}
|
||||
|
||||
Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.
|
||||
|
|
|
|||
|
|
@ -22,11 +22,21 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
|
|||
### Global changes
|
||||
|
||||
- Switched from [Less](http://lesscss.org/) to [Sass](http://sass-lang.com/) for our source CSS files.
|
||||
- Switched from `px` to `rem` as our primary CSS unit, though pixels are still used for media queries and more as viewports are not affected by type size.
|
||||
- Switched from `px` to `rem` as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.
|
||||
- Global font-size increased from `14px` to `16px`.
|
||||
- Added a new grid tier for ~`480px` and below.
|
||||
- Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`).
|
||||
|
||||
### Grid system
|
||||
|
||||
- Added support for flexbox (set `$enable-flex: true` and recompile) in the grid mixins and predefined classes.
|
||||
- As part of flexbox, included support for vertical and horizontal alignment classes.
|
||||
- Overhauled grid mixins to merge `make-col-span` into `make-col` for a singular mixin.
|
||||
- Added a new `sm` grid tier below `768px` for more granular control. We now have `xs`, `sm`, `md`, `lg`, and `xl`. This also means every tier has been bumped up one level (so `.col-md-6` in v3 is now `.col-lg-6` in v4).
|
||||
- Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by `12` at their max width.
|
||||
- Grid breakpoints and container widths are now handled via Sass maps instead of a handful of separate variables. These replace the `@screen-*` variables entirely and allow you to fully customize the grid tiers.
|
||||
- Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have `@include media-breakpoint-up/down/only`. Now, instead of writing `@media (min-width: @screen-sm-min) { ... }`, you can write `@include media-breakpoint-up(sm) { ... }`.
|
||||
|
||||
### Components
|
||||
|
||||
- Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
|
||||
|
|
@ -107,10 +117,6 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
|
|||
|
||||
- Dropped the `.navbar-form` class entirely. It's no longer necessary.
|
||||
|
||||
### Pager
|
||||
|
||||
- Renamed `.previous` and `.next` to `.pager-prev` and `.pager-next`.
|
||||
|
||||
### Pagination
|
||||
|
||||
- Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s
|
||||
|
|
@ -148,8 +154,14 @@ Dropped entirely for the new card component.
|
|||
|
||||
### Utilities
|
||||
|
||||
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats
|
||||
- Removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`
|
||||
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
|
||||
- Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
|
||||
- Dropped `.center-block` for the new `.m-x-auto` class.
|
||||
|
||||
### Vendor prefix mixins
|
||||
Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
|
||||
|
||||
Removed the following mixins: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-timing-function`, `backface-visibility`, `box-sizing`, `content-columns`, `hyphens`, `opacity`, `perspective`, `perspective-origin`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `skew`, `transform-origin`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`, `transition-transform`, `translate`, `translate3d`, `user-select`
|
||||
|
||||
## Documentation
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -241,7 +241,7 @@ var ScrollSpy = (function ($) {
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
|
||||
$link.addClass(ClassName.ACTIVE);
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -249,7 +249,7 @@ const ScrollSpy = (($) => {
|
|||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
|
||||
$link.addClass(ClassName.ACTIVE)
|
||||
} else {
|
||||
// todo (fat) this is kinda sus…
|
||||
// todo (fat) this is kinda sus...
|
||||
// recursively add actives to tested nav-links
|
||||
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,16 +42,15 @@
|
|||
"grunt-contrib-connect": "~0.11.2",
|
||||
"grunt-contrib-copy": "~0.8.1",
|
||||
"grunt-contrib-cssmin": "~0.14.0",
|
||||
"grunt-contrib-qunit": "~0.7.0",
|
||||
"grunt-contrib-qunit": "~1.0.1",
|
||||
"grunt-contrib-sass": "^0.9.2",
|
||||
"grunt-contrib-uglify": "~0.11.0",
|
||||
"grunt-contrib-watch": "~0.6.1",
|
||||
"grunt-csscomb": "~3.1.0",
|
||||
"grunt-eslint": "^17.1.0",
|
||||
"grunt-exec": "~0.4.6",
|
||||
"grunt-html": "~5.0.0",
|
||||
"grunt-jekyll": "~0.4.2",
|
||||
"grunt-jscs": "~2.5.0",
|
||||
"grunt-jscs": "~2.7.0",
|
||||
"grunt-line-remover": "0.0.2",
|
||||
"grunt-postcss": "^0.7.0",
|
||||
"grunt-sass": "^1.0.0",
|
||||
|
|
@ -63,7 +62,7 @@
|
|||
"markdown-it": "^5.0.0",
|
||||
"mq4-hover-shim": "^0.3.0",
|
||||
"npm-shrinkwrap": "^200.1.0",
|
||||
"shelljs": "^0.5.3",
|
||||
"shelljs": "^0.6.0",
|
||||
"time-grunt": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,16 @@
|
|||
scss_files: "scss/*.scss"
|
||||
# Default application configuration that all configurations inherit from.
|
||||
scss_files:
|
||||
- "**/*.scss"
|
||||
- "docs/assets/scss/**/*.scss"
|
||||
|
||||
plugin_directories: ['.scss-linters']
|
||||
|
||||
# List of gem names to load custom linters from (make sure they are already
|
||||
# installed)
|
||||
plugin_gems: []
|
||||
|
||||
# Default severity of all linters.
|
||||
severity: warning
|
||||
|
||||
linters:
|
||||
BangFormat:
|
||||
|
|
@ -6,8 +18,16 @@ linters:
|
|||
space_before_bang: true
|
||||
space_after_bang: false
|
||||
|
||||
BemDepth:
|
||||
enabled: false
|
||||
max_elements: 1
|
||||
|
||||
BorderZero:
|
||||
enabled: true
|
||||
convention: zero # or `none`
|
||||
|
||||
ChainedClasses:
|
||||
enabled: false
|
||||
|
||||
ColorKeyword:
|
||||
enabled: true
|
||||
|
|
@ -17,7 +37,10 @@ linters:
|
|||
|
||||
Comment:
|
||||
enabled: true
|
||||
exclude: ['_normalize.scss', 'bootstrap.scss']
|
||||
exclude:
|
||||
- _normalize.scss
|
||||
- bootstrap.scss
|
||||
style: silent
|
||||
|
||||
DebugStatement:
|
||||
enabled: true
|
||||
|
|
@ -25,9 +48,11 @@ linters:
|
|||
DeclarationOrder:
|
||||
enabled: false
|
||||
|
||||
DisableLinterReason:
|
||||
enabled: false
|
||||
|
||||
DuplicateProperty:
|
||||
enabled: true
|
||||
exclude: ['mixins/_tab-focus.scss', '_reboot.scss']
|
||||
|
||||
ElsePlacement:
|
||||
enabled: true
|
||||
|
|
@ -40,6 +65,9 @@ linters:
|
|||
EmptyRule:
|
||||
enabled: true
|
||||
|
||||
ExtendDirective:
|
||||
enabled: false
|
||||
|
||||
FinalNewline:
|
||||
enabled: true
|
||||
present: true
|
||||
|
|
@ -59,7 +87,7 @@ linters:
|
|||
enabled: true
|
||||
|
||||
ImportantRule:
|
||||
enabled: false
|
||||
enabled: true
|
||||
|
||||
ImportPath:
|
||||
enabled: true
|
||||
|
|
@ -68,11 +96,12 @@ linters:
|
|||
|
||||
Indentation:
|
||||
enabled: true
|
||||
allow_non_nested_indentation: false
|
||||
character: space # or 'tab'
|
||||
width: 2
|
||||
|
||||
LeadingZero:
|
||||
enabled: false
|
||||
enabled: true
|
||||
style: exclude_zero # or 'include_zero'
|
||||
|
||||
MergeableSelector:
|
||||
|
|
@ -82,326 +111,350 @@ linters:
|
|||
NameFormat:
|
||||
enabled: true
|
||||
allow_leading_underscore: true
|
||||
convention: hyphenated_lowercase # or 'BEM', or a regex pattern
|
||||
convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
|
||||
|
||||
NestingDepth:
|
||||
enabled: false
|
||||
enabled: true
|
||||
max_depth: 4
|
||||
ignore_parent_selectors: false
|
||||
|
||||
PlaceholderInExtend:
|
||||
enabled: false
|
||||
|
||||
PropertyCount:
|
||||
enabled: false
|
||||
include_nested: false
|
||||
max_properties: 10
|
||||
|
||||
PropertySortOrder:
|
||||
enabled: true
|
||||
ignore_unspecified: false
|
||||
severity: warning
|
||||
exclude: ['_normalize.scss']
|
||||
order: [
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"z-index",
|
||||
"-webkit-box-sizing",
|
||||
"-moz-box-sizing",
|
||||
"box-sizing",
|
||||
"display",
|
||||
"float",
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
"flex",
|
||||
"flex-direction",
|
||||
"flex-flow",
|
||||
"flex-order",
|
||||
"flex-pack",
|
||||
"flex-align",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"-webkit-overflow-scrolling",
|
||||
"-ms-overflow-x",
|
||||
"-ms-overflow-y",
|
||||
"-ms-overflow-style",
|
||||
"clip",
|
||||
"clear",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-style",
|
||||
"font-weight",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-effect",
|
||||
"font-emphasize",
|
||||
"font-emphasize-position",
|
||||
"font-emphasize-style",
|
||||
"font-smooth",
|
||||
"-webkit-hyphens",
|
||||
"-moz-hyphens",
|
||||
"hyphens",
|
||||
"line-height",
|
||||
"color",
|
||||
"text-align",
|
||||
"-webkit-text-align-last",
|
||||
"-moz-text-align-last",
|
||||
"-ms-text-align-last",
|
||||
"text-align-last",
|
||||
"text-emphasis",
|
||||
"text-emphasis-color",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-position",
|
||||
"text-decoration",
|
||||
"text-indent",
|
||||
"text-justify",
|
||||
"text-outline",
|
||||
"-ms-text-overflow",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"text-shadow",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"-webkit-text-size-adjust",
|
||||
"-ms-text-size-adjust",
|
||||
"letter-spacing",
|
||||
"-ms-word-break",
|
||||
"word-break",
|
||||
"word-spacing",
|
||||
"-ms-word-wrap",
|
||||
"word-wrap",
|
||||
"-moz-tab-size",
|
||||
"-o-tab-size",
|
||||
"tab-size",
|
||||
"white-space",
|
||||
"vertical-align",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"pointer-events",
|
||||
"-ms-touch-action",
|
||||
"touch-action",
|
||||
"cursor",
|
||||
"visibility",
|
||||
"zoom",
|
||||
"table-layout",
|
||||
"empty-cells",
|
||||
"caption-side",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"content",
|
||||
"quotes",
|
||||
"counter-reset",
|
||||
"counter-increment",
|
||||
"resize",
|
||||
"-webkit-user-select",
|
||||
"-moz-user-select",
|
||||
"-ms-user-select",
|
||||
"-o-user-select",
|
||||
"user-select",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"background",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
|
||||
"filter:progid:DXImageTransform.Microsoft.gradient",
|
||||
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||
"filter",
|
||||
"background-repeat",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"-webkit-background-clip",
|
||||
"-moz-background-clip",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"-webkit-background-size",
|
||||
"-moz-background-size",
|
||||
"-o-background-size",
|
||||
"background-size",
|
||||
"border",
|
||||
"border-color",
|
||||
"border-style",
|
||||
"border-width",
|
||||
"border-top",
|
||||
"border-top-color",
|
||||
"border-top-style",
|
||||
"border-top-width",
|
||||
"border-right",
|
||||
"border-right-color",
|
||||
"border-right-style",
|
||||
"border-right-width",
|
||||
"border-bottom",
|
||||
"border-bottom-color",
|
||||
"border-bottom-style",
|
||||
"border-bottom-width",
|
||||
"border-left",
|
||||
"border-left-color",
|
||||
"border-left-style",
|
||||
"border-left-width",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"-webkit-border-image",
|
||||
"-moz-border-image",
|
||||
"-o-border-image",
|
||||
"border-image",
|
||||
"-webkit-border-image-source",
|
||||
"-moz-border-image-source",
|
||||
"-o-border-image-source",
|
||||
"border-image-source",
|
||||
"-webkit-border-image-slice",
|
||||
"-moz-border-image-slice",
|
||||
"-o-border-image-slice",
|
||||
"border-image-slice",
|
||||
"-webkit-border-image-width",
|
||||
"-moz-border-image-width",
|
||||
"-o-border-image-width",
|
||||
"border-image-width",
|
||||
"-webkit-border-image-outset",
|
||||
"-moz-border-image-outset",
|
||||
"-o-border-image-outset",
|
||||
"border-image-outset",
|
||||
"-webkit-border-image-repeat",
|
||||
"-moz-border-image-repeat",
|
||||
"-o-border-image-repeat",
|
||||
"border-image-repeat",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"-webkit-box-shadow",
|
||||
"-moz-box-shadow",
|
||||
"box-shadow",
|
||||
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||
"opacity",
|
||||
"-ms-interpolation-mode",
|
||||
"-webkit-transition",
|
||||
"-moz-transition",
|
||||
"-ms-transition",
|
||||
"-o-transition",
|
||||
"transition",
|
||||
"-webkit-transition-delay",
|
||||
"-moz-transition-delay",
|
||||
"-ms-transition-delay",
|
||||
"-o-transition-delay",
|
||||
"transition-delay",
|
||||
"-webkit-transition-timing-function",
|
||||
"-moz-transition-timing-function",
|
||||
"-ms-transition-timing-function",
|
||||
"-o-transition-timing-function",
|
||||
"transition-timing-function",
|
||||
"-webkit-transition-duration",
|
||||
"-moz-transition-duration",
|
||||
"-ms-transition-duration",
|
||||
"-o-transition-duration",
|
||||
"transition-duration",
|
||||
"-webkit-transition-property",
|
||||
"-moz-transition-property",
|
||||
"-ms-transition-property",
|
||||
"-o-transition-property",
|
||||
"transition-property",
|
||||
"-webkit-transform",
|
||||
"-moz-transform",
|
||||
"-ms-transform",
|
||||
"-o-transform",
|
||||
"transform",
|
||||
"-webkit-transform-origin",
|
||||
"-moz-transform-origin",
|
||||
"-ms-transform-origin",
|
||||
"-o-transform-origin",
|
||||
"transform-origin",
|
||||
"-webkit-animation",
|
||||
"-moz-animation",
|
||||
"-ms-animation",
|
||||
"-o-animation",
|
||||
"animation",
|
||||
"-webkit-animation-name",
|
||||
"-moz-animation-name",
|
||||
"-ms-animation-name",
|
||||
"-o-animation-name",
|
||||
"animation-name",
|
||||
"-webkit-animation-duration",
|
||||
"-moz-animation-duration",
|
||||
"-ms-animation-duration",
|
||||
"-o-animation-duration",
|
||||
"animation-duration",
|
||||
"-webkit-animation-play-state",
|
||||
"-moz-animation-play-state",
|
||||
"-ms-animation-play-state",
|
||||
"-o-animation-play-state",
|
||||
"animation-play-state",
|
||||
"-webkit-animation-timing-function",
|
||||
"-moz-animation-timing-function",
|
||||
"-ms-animation-timing-function",
|
||||
"-o-animation-timing-function",
|
||||
"animation-timing-function",
|
||||
"-webkit-animation-delay",
|
||||
"-moz-animation-delay",
|
||||
"-ms-animation-delay",
|
||||
"-o-animation-delay",
|
||||
"animation-delay",
|
||||
"-webkit-animation-iteration-count",
|
||||
"-moz-animation-iteration-count",
|
||||
"-ms-animation-iteration-count",
|
||||
"-o-animation-iteration-count",
|
||||
"animation-iteration-count",
|
||||
"-webkit-animation-direction",
|
||||
"-moz-animation-direction",
|
||||
"-ms-animation-direction",
|
||||
"-o-animation-direction",
|
||||
"animation-direction"
|
||||
]
|
||||
min_properties: 2
|
||||
separate_groups: false
|
||||
order:
|
||||
- position
|
||||
- top
|
||||
- right
|
||||
- bottom
|
||||
- left
|
||||
- z-index
|
||||
- -webkit-box-sizing
|
||||
- -moz-box-sizing
|
||||
- box-sizing
|
||||
- display
|
||||
- flex
|
||||
- flex-align
|
||||
- flex-basis
|
||||
- flex-direction
|
||||
- flex-flow
|
||||
- flex-grow
|
||||
- flex-order
|
||||
- flex-pack
|
||||
- float
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
- height
|
||||
- min-height
|
||||
- max-height
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
- overflow
|
||||
- overflow-x
|
||||
- overflow-y
|
||||
- -webkit-overflow-scrolling
|
||||
- -ms-overflow-x
|
||||
- -ms-overflow-y
|
||||
- -ms-overflow-style
|
||||
- clip
|
||||
- clear
|
||||
- font
|
||||
- font-family
|
||||
- font-size
|
||||
- font-style
|
||||
- font-weight
|
||||
- font-variant
|
||||
- font-size-adjust
|
||||
- font-stretch
|
||||
- font-effect
|
||||
- font-emphasize
|
||||
- font-emphasize-position
|
||||
- font-emphasize-style
|
||||
- font-smooth
|
||||
- -webkit-hyphens
|
||||
- -moz-hyphens
|
||||
- hyphens
|
||||
- line-height
|
||||
- color
|
||||
- text-align
|
||||
- -webkit-text-align-last
|
||||
- -moz-text-align-last
|
||||
- -ms-text-align-last
|
||||
- text-align-last
|
||||
- text-emphasis
|
||||
- text-emphasis-color
|
||||
- text-emphasis-style
|
||||
- text-emphasis-position
|
||||
- text-decoration
|
||||
- text-indent
|
||||
- text-justify
|
||||
- text-outline
|
||||
- -ms-text-overflow
|
||||
- text-overflow
|
||||
- text-overflow-ellipsis
|
||||
- text-overflow-mode
|
||||
- text-shadow
|
||||
- text-transform
|
||||
- text-wrap
|
||||
- -webkit-text-size-adjust
|
||||
- -ms-text-size-adjust
|
||||
- letter-spacing
|
||||
- -ms-word-break
|
||||
- word-break
|
||||
- word-spacing
|
||||
- -ms-word-wrap
|
||||
- word-wrap
|
||||
- -moz-tab-size
|
||||
- -o-tab-size
|
||||
- tab-size
|
||||
- white-space
|
||||
- vertical-align
|
||||
- list-style
|
||||
- list-style-position
|
||||
- list-style-type
|
||||
- list-style-image
|
||||
- pointer-events
|
||||
- -ms-touch-action
|
||||
- touch-action
|
||||
- cursor
|
||||
- visibility
|
||||
- zoom
|
||||
- table-layout
|
||||
- empty-cells
|
||||
- caption-side
|
||||
- border-spacing
|
||||
- border-collapse
|
||||
- content
|
||||
- quotes
|
||||
- counter-reset
|
||||
- counter-increment
|
||||
- resize
|
||||
- -webkit-user-select
|
||||
- -moz-user-select
|
||||
- -ms-user-select
|
||||
- -o-user-select
|
||||
- user-select
|
||||
- nav-index
|
||||
- nav-up
|
||||
- nav-right
|
||||
- nav-down
|
||||
- nav-left
|
||||
- background
|
||||
- background-color
|
||||
- background-image
|
||||
- -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient
|
||||
- filter:progid:DXImageTransform.Microsoft.gradient
|
||||
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
|
||||
- filter
|
||||
- background-repeat
|
||||
- background-attachment
|
||||
- background-position
|
||||
- background-position-x
|
||||
- background-position-y
|
||||
- -webkit-background-clip
|
||||
- -moz-background-clip
|
||||
- background-clip
|
||||
- background-origin
|
||||
- -webkit-background-size
|
||||
- -moz-background-size
|
||||
- -o-background-size
|
||||
- background-size
|
||||
- border
|
||||
- border-color
|
||||
- border-style
|
||||
- border-width
|
||||
- border-top
|
||||
- border-top-color
|
||||
- border-top-style
|
||||
- border-top-width
|
||||
- border-right
|
||||
- border-right-color
|
||||
- border-right-style
|
||||
- border-right-width
|
||||
- border-bottom
|
||||
- border-bottom-color
|
||||
- border-bottom-style
|
||||
- border-bottom-width
|
||||
- border-left
|
||||
- border-left-color
|
||||
- border-left-style
|
||||
- border-left-width
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-right-radius
|
||||
- border-bottom-left-radius
|
||||
- -webkit-border-image
|
||||
- -moz-border-image
|
||||
- -o-border-image
|
||||
- border-image
|
||||
- -webkit-border-image-source
|
||||
- -moz-border-image-source
|
||||
- -o-border-image-source
|
||||
- border-image-source
|
||||
- -webkit-border-image-slice
|
||||
- -moz-border-image-slice
|
||||
- -o-border-image-slice
|
||||
- border-image-slice
|
||||
- -webkit-border-image-width
|
||||
- -moz-border-image-width
|
||||
- -o-border-image-width
|
||||
- border-image-width
|
||||
- -webkit-border-image-outset
|
||||
- -moz-border-image-outset
|
||||
- -o-border-image-outset
|
||||
- border-image-outset
|
||||
- -webkit-border-image-repeat
|
||||
- -moz-border-image-repeat
|
||||
- -o-border-image-repeat
|
||||
- border-image-repeat
|
||||
- outline
|
||||
- outline-width
|
||||
- outline-style
|
||||
- outline-color
|
||||
- outline-offset
|
||||
- -webkit-box-shadow
|
||||
- -moz-box-shadow
|
||||
- box-shadow
|
||||
- filter:progid:DXImageTransform.Microsoft.Alpha(Opacity
|
||||
- -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha
|
||||
- opacity
|
||||
- -ms-interpolation-mode
|
||||
- -webkit-transition
|
||||
- -moz-transition
|
||||
- -ms-transition
|
||||
- -o-transition
|
||||
- transition
|
||||
- -webkit-transition-delay
|
||||
- -moz-transition-delay
|
||||
- -ms-transition-delay
|
||||
- -o-transition-delay
|
||||
- transition-delay
|
||||
- -webkit-transition-timing-function
|
||||
- -moz-transition-timing-function
|
||||
- -ms-transition-timing-function
|
||||
- -o-transition-timing-function
|
||||
- transition-timing-function
|
||||
- -webkit-transition-duration
|
||||
- -moz-transition-duration
|
||||
- -ms-transition-duration
|
||||
- -o-transition-duration
|
||||
- transition-duration
|
||||
- -webkit-transition-property
|
||||
- -moz-transition-property
|
||||
- -ms-transition-property
|
||||
- -o-transition-property
|
||||
- transition-property
|
||||
- -webkit-transform
|
||||
- -moz-transform
|
||||
- -ms-transform
|
||||
- -o-transform
|
||||
- transform
|
||||
- -webkit-transform-origin
|
||||
- -moz-transform-origin
|
||||
- -ms-transform-origin
|
||||
- -o-transform-origin
|
||||
- transform-origin
|
||||
- -webkit-animation
|
||||
- -moz-animation
|
||||
- -ms-animation
|
||||
- -o-animation
|
||||
- animation
|
||||
- -webkit-animation-name
|
||||
- -moz-animation-name
|
||||
- -ms-animation-name
|
||||
- -o-animation-name
|
||||
- animation-name
|
||||
- -webkit-animation-duration
|
||||
- -moz-animation-duration
|
||||
- -ms-animation-duration
|
||||
- -o-animation-duration
|
||||
- animation-duration
|
||||
- -webkit-animation-play-state
|
||||
- -moz-animation-play-state
|
||||
- -ms-animation-play-state
|
||||
- -o-animation-play-state
|
||||
- animation-play-state
|
||||
- -webkit-animation-timing-function
|
||||
- -moz-animation-timing-function
|
||||
- -ms-animation-timing-function
|
||||
- -o-animation-timing-function
|
||||
- animation-timing-function
|
||||
- -webkit-animation-delay
|
||||
- -moz-animation-delay
|
||||
- -ms-animation-delay
|
||||
- -o-animation-delay
|
||||
- animation-delay
|
||||
- -webkit-animation-iteration-count
|
||||
- -moz-animation-iteration-count
|
||||
- -ms-animation-iteration-count
|
||||
- -o-animation-iteration-count
|
||||
- animation-iteration-count
|
||||
- -webkit-animation-direction
|
||||
- -moz-animation-direction
|
||||
- -ms-animation-direction
|
||||
- -o-animation-direction
|
||||
|
||||
|
||||
PropertySpelling:
|
||||
enabled: true
|
||||
extra_properties: []
|
||||
disabled_properties: []
|
||||
|
||||
PropertyUnits:
|
||||
enabled: true
|
||||
global: [
|
||||
'ch', 'em', 'ex', 'rem', # Font-relative lengths
|
||||
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
|
||||
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
|
||||
'deg', 'grad', 'rad', 'turn', # Angle
|
||||
'ms', 's', # Duration
|
||||
'Hz', 'kHz', # Frequency
|
||||
'dpi', 'dpcm', 'dppx', # Resolution
|
||||
'%'] # Other
|
||||
properties: {}
|
||||
|
||||
PseudoElement:
|
||||
enabled: true
|
||||
|
||||
QualifyingElement:
|
||||
enabled: false
|
||||
enabled: true
|
||||
allow_element_with_attribute: false
|
||||
allow_element_with_class: false
|
||||
allow_element_with_id: false
|
||||
|
||||
SelectorDepth:
|
||||
enabled: false
|
||||
enabled: true
|
||||
max_depth: 4
|
||||
|
||||
SelectorFormat:
|
||||
enabled: true
|
||||
convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
|
||||
enabled: false
|
||||
convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
|
||||
|
||||
Shorthand:
|
||||
enabled: true
|
||||
allowed_shorthands: [1, 2, 3]
|
||||
|
||||
SingleLinePerProperty:
|
||||
enabled: true
|
||||
enabled: false
|
||||
allow_single_line_rule_sets: true
|
||||
|
||||
SingleLinePerSelector:
|
||||
|
|
@ -409,6 +462,7 @@ linters:
|
|||
|
||||
SpaceAfterComma:
|
||||
enabled: false
|
||||
style: one_space # or 'no_space', or 'at_least_one_space'
|
||||
|
||||
SpaceAfterPropertyColon:
|
||||
enabled: true
|
||||
|
|
@ -417,10 +471,17 @@ linters:
|
|||
SpaceAfterPropertyName:
|
||||
enabled: true
|
||||
|
||||
SpaceAfterVariableName:
|
||||
enabled: true
|
||||
|
||||
SpaceAroundOperator:
|
||||
enabled: true
|
||||
style: one_space # or 'at_least_one_space', or 'no_space'
|
||||
|
||||
SpaceBeforeBrace:
|
||||
enabled: true
|
||||
style: space
|
||||
allow_single_line_padding: true
|
||||
style: space # or 'new_line'
|
||||
allow_single_line_padding: false
|
||||
|
||||
SpaceBetweenParens:
|
||||
enabled: true
|
||||
|
|
@ -428,14 +489,20 @@ linters:
|
|||
|
||||
StringQuotes:
|
||||
enabled: true
|
||||
style: double_quotes
|
||||
style: double_quotes # or double_quotes
|
||||
|
||||
TrailingSemicolon:
|
||||
enabled: true
|
||||
|
||||
TrailingWhitespace:
|
||||
enabled: true
|
||||
|
||||
TrailingZero:
|
||||
enabled: false
|
||||
|
||||
TransitionAll:
|
||||
enabled: false
|
||||
|
||||
UnnecessaryMantissa:
|
||||
enabled: true
|
||||
|
||||
|
|
@ -448,11 +515,17 @@ linters:
|
|||
UrlQuotes:
|
||||
enabled: true
|
||||
|
||||
VendorPrefixes:
|
||||
VariableForProperty:
|
||||
enabled: false
|
||||
properties: []
|
||||
|
||||
VendorPrefix:
|
||||
enabled: true
|
||||
identifier_list: base
|
||||
include: []
|
||||
exclude: ['_normalize.scss']
|
||||
additional_identifiers: []
|
||||
excluded_identifiers: []
|
||||
exclude:
|
||||
- _normalize.scss
|
||||
|
||||
ZeroUnit:
|
||||
enabled: true
|
||||
|
|
|
|||
|
|
@ -7,15 +7,6 @@
|
|||
margin-bottom: $spacer-y;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
|
||||
// Improve alignment and spacing of inner content
|
||||
> p,
|
||||
> ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
|
|
@ -35,7 +26,7 @@
|
|||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: ($alert-padding + 20);
|
||||
padding-right: ($alert-padding + 20px);
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,28 @@
|
|||
.breadcrumb-item {
|
||||
float: left;
|
||||
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: "#{$breadcrumb-divider}";
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
|
|
@ -121,7 +123,7 @@
|
|||
// The clickable button for toggling the menu
|
||||
// Remove the gradient and set the same inset shadow as the :active state
|
||||
.btn-group.open .dropdown-toggle {
|
||||
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
|
|
@ -183,11 +185,9 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
&:first-child:not(:last-child) {
|
||||
border-top-right-radius: $btn-border-radius;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: $btn-border-radius;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
|
@ -11,7 +13,7 @@
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: $input-btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
||||
@include transition(all .2s ease-in-out);
|
||||
|
||||
&,
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
&.active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
display: block;
|
||||
margin-bottom: $card-spacer-y;
|
||||
background-color: $card-bg;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
// border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
// Doesn't use mixin so that cards always have a "border"
|
||||
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
|
||||
}
|
||||
|
||||
.card-block {
|
||||
|
|
@ -72,7 +74,9 @@
|
|||
@include clearfix;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
// border-bottom: $card-border-width solid $card-border-color;
|
||||
// Doesn't use mixin so that cards always have a "border"
|
||||
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
|
||||
|
|
@ -83,7 +87,9 @@
|
|||
@include clearfix;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
// border-top: $card-border-width solid $card-border-color;
|
||||
// Doesn't use mixin so that cards always have a "border"
|
||||
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
|
||||
|
|
@ -91,6 +97,27 @@
|
|||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Background variations
|
||||
//
|
||||
|
|
|
|||
|
|
@ -102,12 +102,12 @@
|
|||
|
||||
// Set gradients for backgrounds
|
||||
&.left {
|
||||
@include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
|
||||
@include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
@include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
|
||||
@include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Hover/focus state
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -26,3 +28,4 @@ button.close {
|
|||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ kbd {
|
|||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25));
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
|
|
@ -38,7 +38,6 @@ pre {
|
|||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 90%;
|
||||
line-height: $line-height;
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@
|
|||
.custom-control {
|
||||
position: relative;
|
||||
display: inline;
|
||||
padding-left: 1.5rem;
|
||||
color: #555;
|
||||
padding-left: $custom-control-gutter;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: 1rem;
|
||||
margin-left: $custom-control-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,31 +25,31 @@
|
|||
opacity: 0;
|
||||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
@include box-shadow(none);
|
||||
color: $custom-control-checked-indicator-color;
|
||||
background-color: $custom-control-checked-indicator-bg;
|
||||
@include box-shadow($custom-control-checked-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-indicator {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
box-shadow: $custom-control-focus-indicator-box-shadow;
|
||||
}
|
||||
|
||||
&:active ~ .custom-control-indicator {
|
||||
color: #fff;
|
||||
background-color: #84c6ff;
|
||||
@include box-shadow(none);
|
||||
color: $custom-control-active-indicator-color;
|
||||
background-color: $custom-control-active-indicator-bg;
|
||||
@include box-shadow($custom-control-active-indicator-box-shadow);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-indicator {
|
||||
cursor: not-allowed;
|
||||
background-color: $custom-form-bg-color-disabled;
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
background-color: $custom-control-disabled-indicator-bg;
|
||||
}
|
||||
|
||||
~ .custom-control-description {
|
||||
color: $custom-form-description-color-disabled;
|
||||
cursor: not-allowed;
|
||||
color: $custom-control-disabled-description-color;
|
||||
cursor: $custom-control-disabled-cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -64,18 +63,15 @@
|
|||
top: .0625rem;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 65%;
|
||||
line-height: 1rem;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
width: $custom-control-indicator-size;
|
||||
height: $custom-control-indicator-size;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-form-bg-color;
|
||||
background-color: $custom-control-indicator-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 50% 50%;
|
||||
@include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1));
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
|
|
@ -84,17 +80,17 @@
|
|||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
border-radius: .25rem;
|
||||
@include border-radius($custom-checkbox-radius);
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
|
||||
background-image: $custom-checkbox-checked-icon;
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: #0074d9;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
|
||||
@include box-shadow(none);
|
||||
background-color: $custom-checkbox-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indeterminate-icon;
|
||||
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,11 +100,11 @@
|
|||
|
||||
.custom-radio {
|
||||
.custom-control-indicator {
|
||||
border-radius: 50%;
|
||||
border-radius: $custom-radio-radius;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
|
||||
background-image: $custom-radio-checked-icon;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,7 +120,7 @@
|
|||
|
||||
&::after {
|
||||
display: block;
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: $custom-control-spacer-y;
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -145,23 +141,23 @@
|
|||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding: .375rem 1.75rem .375rem .75rem;
|
||||
padding-right: .75rem \9;
|
||||
color: $input-color;
|
||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||
padding-right: $custom-select-padding-x \9;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
|
||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||
background-image: none \9;
|
||||
background-size: 8px 10px;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
@include border-radius($border-radius);
|
||||
background-size: $custom-select-bg-size;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@include border-radius($custom-select-border-radius);
|
||||
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: #51a7e8;
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5));
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
|
|
@ -171,14 +167,14 @@
|
|||
}
|
||||
|
||||
.custom-select-sm {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
padding-top: $custom-select-padding-y;
|
||||
padding-bottom: $custom-select-padding-y;
|
||||
font-size: $custom-select-sm-font-size;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
// &:not([multiple]) {
|
||||
// height: 26px;
|
||||
// min-height: 26px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -190,19 +186,19 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 2.5rem;
|
||||
height: $custom-file-height;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
min-width: 14rem;
|
||||
min-width: $custom-file-width;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
|
||||
@include box-shadow($custom-file-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,34 +208,34 @@
|
|||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: 2.5rem;
|
||||
padding: .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
user-select: none;
|
||||
background-color: #fff;
|
||||
border: $input-btn-border-width solid #ddd;
|
||||
border-radius: .25rem;
|
||||
@include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
|
||||
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);
|
||||
|
||||
&::after {
|
||||
content: "Choose file...";
|
||||
content: $custom-file-placeholder;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -.075rem;
|
||||
right: -.075rem;
|
||||
bottom: -.075rem;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: 2.5rem;
|
||||
padding: .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
content: "Browse";
|
||||
background-color: #eee;
|
||||
border: $input-btn-border-width solid #ddd;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-x $custom-file-padding-y;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
content: $custom-file-button-label;
|
||||
background-color: $custom-file-button-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
// Bootstrap overrides
|
||||
//
|
||||
// Copy variables from `_variables.scss` to this file to override default values
|
||||
// without modifying source files.
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
|
|
@ -69,7 +69,6 @@
|
|||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: $line-height;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
|
|
@ -132,12 +131,7 @@
|
|||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||
// aligned nav component. To enable the undoing of that, we provide an override
|
||||
// to restore the default dropdown menu alignment.
|
||||
//
|
||||
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||
// `.pull-right` nav component.
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
|
|
@ -146,9 +140,8 @@
|
|||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
padding: 5px 20px;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height;
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
|
@ -160,7 +153,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: ($zindex-dropdown - 10);
|
||||
z-index: $zindex-dropdown-backdrop;
|
||||
}
|
||||
|
||||
// Right aligned dropdowns
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// scss-lint:disable QualifyingElement
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
|
@ -9,7 +11,6 @@
|
|||
// height: $input-height;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
|
|
@ -20,14 +21,6 @@
|
|||
@include box-shadow($input-box-shadow);
|
||||
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
|
||||
|
||||
// Make inputs at least the height of their button counterpart (base line-height + padding + border).
|
||||
// Only apply the height to textual inputs and some selects.
|
||||
// &:not(textarea),
|
||||
// &:not(select[size]),
|
||||
// &:not(select[multiple]) {
|
||||
// height: $input-height;
|
||||
// }
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
|
|
@ -61,6 +54,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:not([size], [multiple]) {
|
||||
height: $input-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Make file inputs better match text inputs by forcing them to new lines.
|
||||
.form-control-file,
|
||||
|
|
@ -90,26 +88,25 @@
|
|||
// set a pixel line-height that matches the given height of the input, but only
|
||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
//
|
||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
||||
// Note that as of 8.3, iOS doesn't support `week`.
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
&.form-control {
|
||||
line-height: $input-height;
|
||||
}
|
||||
_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
&.form-control {
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
&.input-sm,
|
||||
.input-group-sm &.form-control {
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
&.input-sm,
|
||||
.input-group-sm &.form-control {
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
|
||||
&.input-lg,
|
||||
.input-group-lg &.form-control {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
&.input-lg,
|
||||
.input-group-lg &.form-control {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +260,7 @@ input[type="checkbox"] {
|
|||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height * .25);
|
||||
background-size: ($input-height * .65) ($input-height * .65);
|
||||
background-size: ($input-height * .5) ($input-height * .50);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
|
|
@ -271,7 +268,7 @@ input[type="checkbox"] {
|
|||
@include form-control-validation($brand-success);
|
||||
|
||||
.form-control-success {
|
||||
background-image: url($form-icon-success);
|
||||
background-image: $form-icon-success;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,7 +276,7 @@ input[type="checkbox"] {
|
|||
@include form-control-validation($brand-warning);
|
||||
|
||||
.form-control-warning {
|
||||
background-image: url($form-icon-warning);
|
||||
background-image: $form-icon-warning;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,7 +284,7 @@ input[type="checkbox"] {
|
|||
@include form-control-validation($brand-danger);
|
||||
|
||||
.form-control-danger {
|
||||
background-image: url($form-icon-danger);
|
||||
background-image: $form-icon-danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
|
@ -38,40 +37,3 @@
|
|||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
|
||||
|
||||
// Flex variation
|
||||
//
|
||||
// Custom styles for additional flex alignment options.
|
||||
|
||||
@if $enable-flex and $enable-grid-classes {
|
||||
|
||||
// Flex column reordering
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.col-#{$breakpoint}-first { order: -1; }
|
||||
.col-#{$breakpoint}-last { order: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment for every column in row
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.row-#{$breakpoint}-top { align-items: flex-start; }
|
||||
.row-#{$breakpoint}-center { align-items: center; }
|
||||
.row-#{$breakpoint}-bottom { align-items: flex-end; }
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment per column
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.col-#{$breakpoint}-top { align-self: flex-start; }
|
||||
.col-#{$breakpoint}-center { align-self: center; }
|
||||
.col-#{$breakpoint}-bottom { align-self: flex-end; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@
|
|||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
line-height: $line-height;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
border-radius: $thumbnail-border-radius;
|
||||
transition: all .2s ease-in-out;
|
||||
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid(inline-block);
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@
|
|||
|
||||
.input-group-addon {
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
|
@ -106,11 +107,13 @@
|
|||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
top: -1px;
|
||||
}
|
||||
|
||||
// scss-lint:disable QualifyingElement
|
||||
// Add hover effects, but only for links
|
||||
a.label {
|
||||
@include hover-focus {
|
||||
|
|
@ -35,6 +36,7 @@ a.label {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
||||
// Pill labels
|
||||
//
|
||||
|
|
|
|||
|
|
@ -22,61 +22,15 @@
|
|||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-width: $list-group-border-width 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
a.list-group-item,
|
||||
button.list-group-item {
|
||||
width: 100%;
|
||||
color: $list-group-link-color;
|
||||
text-align: inherit;
|
||||
|
||||
.list-group-item-heading {
|
||||
color: $list-group-link-heading-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $list-group-link-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
// Disabled state
|
||||
&.disabled {
|
||||
@include plain-hover-focus {
|
||||
color: $list-group-disabled-color;
|
||||
|
|
@ -93,11 +47,11 @@ button.list-group-item {
|
|||
}
|
||||
}
|
||||
|
||||
// Active class on item itself, not parent
|
||||
&.active {
|
||||
@include plain-hover-focus {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
text-decoration: none; // Repeat here because it inherits global a:hover otherwise
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border;
|
||||
|
||||
|
|
@ -114,6 +68,35 @@ button.list-group-item {
|
|||
}
|
||||
}
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
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;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
} @else {
|
||||
.media {
|
||||
margin-top: 15px;
|
||||
margin-top: $media-margin-top;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -61,11 +61,11 @@
|
|||
//
|
||||
|
||||
.media-right {
|
||||
padding-left: 10px;
|
||||
padding-left: $media-alignment-padding-x;
|
||||
}
|
||||
|
||||
.media-left {
|
||||
padding-right: 10px;
|
||||
padding-right: $media-alignment-padding-x;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
.media-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: $media-heading-margin-bottom;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/center-block";
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid $modal-content-border-color;
|
||||
border-radius: $border-radius-lg;
|
||||
@include box-shadow(0 3px 9px rgba(0,0,0,.5));
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($modal-content-xs-box-shadow);
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
|
@ -130,17 +130,17 @@
|
|||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
width: $modal-md;
|
||||
max-width: $modal-md;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||
@include box-shadow($modal-content-sm-up-box-shadow);
|
||||
}
|
||||
|
||||
// Modal sizes
|
||||
.modal-sm { width: $modal-sm; }
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.modal-lg { width: $modal-lg; }
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg { max-width: $modal-lg; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
// Custom override for
|
||||
.navbar-toggleable {
|
||||
&-xs {
|
||||
|
|
@ -135,6 +136,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// scss-lint:enable ImportantRule
|
||||
|
||||
|
||||
// Navigation
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
|
|
@ -37,7 +37,6 @@ figcaption,
|
|||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
|
|
@ -353,13 +352,11 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
}
|
||||
|
||||
//
|
||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
// Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
//
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
box-sizing: content-box; //2
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@
|
|||
float: left; // Collapse white-space
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
margin-left: -1px;
|
||||
line-height: $line-height;
|
||||
color: $pagination-color;
|
||||
text-decoration: none;
|
||||
background-color: $pagination-bg;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue