mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-03-12 15:55:46 +03:00
bs4 sync - #871 need to review line-height effects on buttons and form-controls
This commit is contained in:
Kevin Ross
parent
9f919a4653
commit
2b251ef7da
|
|
@ -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
|
||||
|
|
|
|||
2
Gemfile
2
Gemfile
|
|
@ -1,7 +1,7 @@
|
|||
source 'https://rubygems.org'
|
||||
|
||||
group :development, :test do
|
||||
gem 'jekyll', '~> 3.1.0'
|
||||
gem 'jekyll', '~> 3.1.1'
|
||||
gem 'jekyll-redirect-from', '~> 0.9.1'
|
||||
gem 'jekyll-seo-tag', '~> 0.1.3'
|
||||
gem 'jekyll-sitemap', '~> 0.10.0'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ GEM
|
|||
specs:
|
||||
colorator (0.1)
|
||||
ffi (1.9.10)
|
||||
jekyll (3.1.0)
|
||||
jekyll (3.1.1)
|
||||
colorator (~> 0.1)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
|
|
@ -29,7 +29,7 @@ GEM
|
|||
mercenary (0.3.5)
|
||||
rake (10.5.0)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.5)
|
||||
rb-inotify (0.9.6)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.10.1)
|
||||
safe_yaml (1.0.4)
|
||||
|
|
@ -42,7 +42,7 @@ PLATFORMS
|
|||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.1.0)
|
||||
jekyll (~> 3.1.1)
|
||||
jekyll-redirect-from (~> 0.9.1)
|
||||
jekyll-seo-tag (~> 0.1.3)
|
||||
jekyll-sitemap (~> 0.10.0)
|
||||
|
|
|
|||
26
Gruntfile.js
26
Gruntfile.js
|
|
@ -261,28 +261,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/dist/css/docs.css',
|
||||
dest: 'docs/dist/css/docs.css'
|
||||
}
|
||||
},
|
||||
|
||||
copy: {
|
||||
'dist-to-docs': { // for example templates
|
||||
expand: true,
|
||||
|
|
@ -587,7 +565,6 @@ module.exports = function (grunt) {
|
|||
'clean:dist-css',
|
||||
'sass-compile',
|
||||
'postcss:core',
|
||||
'csscomb:dist',
|
||||
'cssmin:core',
|
||||
'copy:dist-to-docs'
|
||||
]);
|
||||
|
|
@ -599,8 +576,6 @@ module.exports = function (grunt) {
|
|||
'sass:docs',
|
||||
'postcss:docs',
|
||||
'postcss:examples',
|
||||
'csscomb:docs',
|
||||
'csscomb:examples',
|
||||
'cssmin:docs'
|
||||
]);
|
||||
|
||||
|
|
@ -629,6 +604,7 @@ module.exports = function (grunt) {
|
|||
//------
|
||||
// Release and publish
|
||||
grunt.registerTask('prep-release', [
|
||||
//'update-shrinkwrap',
|
||||
'dist',
|
||||
'jekyll:github' // build site from scratch
|
||||
//'compress' // compress zip
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
|
|
|||
|
|
@ -12,13 +12,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;
|
||||
}
|
||||
|
|
@ -33,6 +36,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,13 +1,18 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// 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;
|
||||
|
|
@ -15,6 +20,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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable IdSelector
|
||||
// scss-lint:disable IdSelector, NestingDepth, SelectorDepth
|
||||
|
||||
//
|
||||
// Automatically style Markdown-based tables like a Bootstrap `.table`.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-pageheader {
|
||||
padding: 2rem ($grid-gutter-width / 2);
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
//
|
||||
// Responsive tests
|
||||
//
|
||||
|
|
@ -22,11 +24,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
.hll { background-color: #ffc; }
|
||||
.c { color: #999; }
|
||||
.err { color: #a00; background-color: #faa; }
|
||||
.k { color: #069; }
|
||||
.o { color: #555; }
|
||||
.cm { color: #999; }
|
||||
|
|
|
|||
|
|
@ -127,7 +127,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. In browsers which support that property, 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>
|
||||
|
|
|
|||
|
|
@ -645,7 +645,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 setting the variables to `none` or commenting out the source Sass.
|
||||
|
||||
{% comment %}
|
||||
{% callout warning %}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ Easily extend form controls by adding text, buttons, or button groups on either
|
|||
|
||||
## Basic example
|
||||
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple add-ons on a single side, nor multiple form-controls in a single input group.**
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
|
||||
|
||||
{% example html %}
|
||||
<div class="input-group">
|
||||
|
|
@ -48,6 +48,12 @@ Place one add-on or button on either side of an input. You may also place one on
|
|||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sizing
|
||||
|
|
@ -64,11 +70,6 @@ Add the relative form sizing classes to the `.input-group` itself and contents w
|
|||
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes and radio addons
|
||||
|
|
@ -96,6 +97,32 @@ Place any checkbox or radio option within an input group's addon instead of text
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Multiple addons
|
||||
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||
</span>
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<span class="input-group-addon">0.00</span>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Button addons
|
||||
|
||||
Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
|
||||
|
|
|
|||
|
|
@ -56,36 +56,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.
|
||||
|
|
@ -102,16 +72,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 %}
|
||||
<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 %}
|
||||
|
||||
|
|
@ -121,16 +121,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>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,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 sizes 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>
|
||||
|
|
|
|||
|
|
@ -71,8 +71,20 @@ 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`.
|
||||
### Horizontal centering
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally 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
|
||||
|
||||
|
|
@ -202,27 +214,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.
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,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.
|
||||
|
|
|
|||
|
|
@ -26,13 +26,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.
|
||||
|
|
@ -147,6 +147,10 @@ Styling for common inline HTML5 elements.
|
|||
|
||||
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]({{ site.baseurl }}/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.
|
||||
|
|
@ -239,7 +243,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>
|
||||
|
|
@ -250,8 +254,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>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.1",
|
||||
"babel-eslint": "^4.1.8",
|
||||
"babel-polyfill": "^6.3",
|
||||
"babel-eslint": "^5.0.0-beta10",
|
||||
"babel-polyfill": "^6.5",
|
||||
"babel-preset-es2015-rollup": "^1.1.1",
|
||||
"btoa": "~1.1.2",
|
||||
"glob": "~6.0.4",
|
||||
|
|
@ -51,10 +51,9 @@
|
|||
"grunt-contrib-connect": "~0.11.2",
|
||||
"grunt-contrib-copy": "~0.8.2",
|
||||
"grunt-contrib-cssmin": "~0.14.0",
|
||||
"grunt-contrib-qunit": "~1.0.0",
|
||||
"grunt-contrib-qunit": "~1.0.1",
|
||||
"grunt-contrib-uglify": "~0.11.1",
|
||||
"grunt-contrib-watch": "~0.6.1",
|
||||
"grunt-csscomb": "~3.1.0",
|
||||
"grunt-eslint": "^17.3.1",
|
||||
"grunt-exec": "~0.4.6",
|
||||
"grunt-html": "~6.0.0",
|
||||
|
|
|
|||
|
|
@ -106,13 +106,6 @@ linters:
|
|||
"-moz-box-sizing",
|
||||
"box-sizing",
|
||||
"display",
|
||||
"float",
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
"flex",
|
||||
"flex-direction",
|
||||
"flex-basis",
|
||||
|
|
@ -123,9 +116,16 @@ linters:
|
|||
"flex-align",
|
||||
"flex-shrink",
|
||||
"flex-grow",
|
||||
"justify-content",
|
||||
"float",
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"justify-content",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
|
|
|
|||
|
|
@ -154,11 +154,11 @@
|
|||
// Size variations
|
||||
&.btn-lg,
|
||||
.btn-group-lg & {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $mdb-btn-font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $mdb-btn-font-size-lg, $btn-border-radius-lg);
|
||||
}
|
||||
&.btn-sm,
|
||||
.btn-group-sm & {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $mdb-btn-font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $mdb-btn-font-size-sm, $btn-border-radius-sm);
|
||||
font-size: $mdb-btn-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@
|
|||
z-index: 5; // over a header and content
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
max-height: 100%;
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
font-size: .875rem;
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@
|
|||
.dropdown-item {
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
min-width: $mdb-menu-item-min-width;
|
||||
max-width: $mdb-menu-item-max-width;
|
||||
min-height: $mdb-menu-item-min-height;
|
||||
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
padding-top: $mdb-menu-item-padding-top;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
.mdb-layout-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column; // allows for sticky header and footer
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column; // allows for sticky header and footer
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
.mdb-layout-header {
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
transform: translateZ(0); // mobile webkit smooth scrolling
|
||||
@include material-animation-default();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@
|
|||
|
||||
.mdb-list-group-col {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
//flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,19 +86,19 @@
|
|||
&.form-control-success {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, url($form-icon-success);
|
||||
background-image: $underline-background-image, $form-icon-success;
|
||||
}
|
||||
}
|
||||
&.form-control-warning {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, url($form-icon-warning);
|
||||
background-image: $underline-background-image, $form-icon-warning;
|
||||
}
|
||||
}
|
||||
&.form-control-danger {
|
||||
&,
|
||||
.is-focused & {
|
||||
background-image: $underline-background-image, url($form-icon-danger);
|
||||
background-image: $underline-background-image, $form-icon-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
&.form-control-success,
|
||||
&.form-control-warning,
|
||||
&.form-control-danger {
|
||||
$icon-bg-size: ($variant-input-height * .65) ($variant-input-height * .65);
|
||||
$icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
|
||||
background-size: $mdb-form-control-bg-size, $icon-bg-size;
|
||||
|
||||
&,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ $mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
|
|||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
$btn-padding-x: 1rem !default; // 1rem
|
||||
$btn-padding-y: .46875rem !default; // .375rem achieve a 36dp height
|
||||
$btn-padding-y: .46875rem !default; // .5rem achieve a 36dp height
|
||||
//$btn-line-height: 1 !default; //1.25
|
||||
$btn-font-weight: 500 !default; // normal
|
||||
$btn-box-shadow: none !default;
|
||||
$btn-active-box-shadow: none !default; // inset 0 3px 5px rgba(0,0,0,.125)
|
||||
|
|
@ -63,10 +64,10 @@ $btn-secondary-bg: $body-bg !default; // #fff
|
|||
//
|
||||
//$btn-link-disabled-color: $gray-light !default;
|
||||
//
|
||||
//$btn-padding-x-sm: .75rem !default;
|
||||
//$btn-padding-x-sm: .5rem !default;
|
||||
$btn-padding-y-sm: .40625rem !default; // achieve a 32dp height was .25rem
|
||||
//
|
||||
//$btn-padding-x-lg: 1.25rem !default;
|
||||
//$btn-padding-x-lg: 1.5rem !default;
|
||||
//$btn-padding-y-lg: .75rem !default;
|
||||
//
|
||||
//// Allows for customizing button radius independently from global border radius
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user