bs4 sync - #871 need to review line-height effects on buttons and form-controls

.hound.yml

@@ -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

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'

Gemfile.lock

@@ -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)

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

docs/assets/scss/_ads.scss

@@ -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
 //

docs/assets/scss/_callouts.scss

@@ -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-warning { @include bs-callout-variant($bd-warning); }
 .bd-callout-danger { @include bs-callout-variant($bd-danger); }

docs/assets/scss/_component-examples.scss

@@ -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 {
+  .row + .row {
-    margin-bottom: 1rem;
+    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);
 }
 
 

docs/assets/scss/_content.scss

@@ -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`.

docs/assets/scss/_masthead.scss

@@ -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;

docs/assets/scss/_page-header.scss

@@ -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;

docs/assets/scss/_responsive-tests.scss

@@ -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;
 }

docs/assets/scss/_syntax.scss

@@ -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; }

docs/components/buttons.md

@@ -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>

docs/components/forms.md

@@ -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 %}

docs/components/input-group.md

@@ -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.

docs/components/list-group.md

@@ -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-action 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-action 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-action 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-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">
+  <a href="#" class="list-group-item list-group-item-action active">
-    <h4 class="list-group-item-heading">List group item heading</h4>
+    <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">
+  <a href="#" class="list-group-item list-group-item-action">
-    <h4 class="list-group-item-heading">List group item heading</h4>
+    <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">
+  <a href="#" class="list-group-item list-group-item-action">
-    <h4 class="list-group-item-heading">List group item heading</h4>
+    <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>

docs/components/modal.md

@@ -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>

docs/components/utilities.md

@@ -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
+## Clearfix
-
-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 %}
 
 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.
 

docs/content/reboot.md

@@ -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.

docs/content/typography.md

@@ -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 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
+- 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`
+- 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>
+      <dt class="col-sm-4">Nested definition list</dt>
-      <dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
     </dl>
   </dd>
 </dl>

package.json

@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.3.1",
-    "babel-eslint": "^4.1.8",
+    "babel-eslint": "^5.0.0-beta10",
-    "babel-polyfill": "^6.3",
+    "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",

scss/.scss-lint.yml

@@ -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",

scss/_buttons.scss

@@ -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;
   }
 }

scss/_drawer.scss

@@ -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;

scss/_dropdown.scss

@@ -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;

scss/_layout.scss

@@ -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();
 }

scss/_list-group.scss

@@ -30,8 +30,8 @@
 
 .mdb-list-group-col {
   display: flex;
-  min-width: 0;
   flex-direction: column;
+  min-width: 0;
   //flex-shrink: 0;
 }
 

scss/mixins/_forms.scss

@@ -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;
 
       &,

scss/variables/bootstrap/_buttons.scss

@@ -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