Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

docs/javascript/overview.md

@@ -81,8 +81,6 @@ $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Boot
 
 Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
 
-As of 3.0.0, all Bootstrap events are namespaced.
-
 All infinitive events provide `preventDefault` functionality. This provides the ability to stop the execution of an action before it starts.
 
 {% highlight js %}

docs/javascript/popovers.md

@@ -43,24 +43,24 @@ $(function () {
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bs-example bs-example-popover">
-  <div class="popover top">
-    <div class="arrow"></div>
+  <div class="popover popover-top">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover right">
-    <div class="arrow"></div>
+  <div class="popover popover-right">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover bottom">
-    <div class="arrow"></div>
+  <div class="popover popover-bottom">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
 
     <div class="popover-content">
@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover left">
-    <div class="arrow"></div>
+  <div class="popover popover-left">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <tr>
         <td>template</td>
         <td>string</td>
-        <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+        <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
         <td>
           <p>Base HTML to use when creating the popover.</p>
           <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
           <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-          <p><code>.arrow</code> will become the popover's arrow.</p>
+          <p><code>.popover-arrow</code> will become the popover's arrow.</p>
           <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
         </td>
       </tr>

grunt/bs-sass-compile/libsass.js

+// Compile Bootstrap with [libsass][1] using [grunt-sass][2]
+// [1]: https://github.com/sass/libsass
+// [2]: https://github.com/sindresorhus/grunt-sass
+module.exports = function configureLibsass(grunt) {
+  grunt.config.merge({
+    sass: {
+      options: {
+        includePaths: ['scss'],
+        precision: 6,
+        sourceComments: false,
+        sourceMap: true
+      },
+      core: {
+        files: {
+          'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
+        }
+      },
+      docs: {
+        files: {
+          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
+        }
+      }
+    }
+  });
+  grunt.loadNpmTasks('grunt-sass');
+};

grunt/bs-sass-compile/sass.js

+// Compile Bootstrap with [Ruby Sass][1] using [grunt-contrib-sass][2]
+// [1]: https://github.com/sass/sass
+// [2]: https://github.com/gruntjs/grunt-contrib-sass
+module.exports = function configureRubySass(grunt) {
+  var options = {
+    loadPath: ['scss'],
+    precision: 6,
+    sourcemap: 'auto',
+    style: 'expanded',
+    trace: true,
+    bundleExec: true
+  };
+  grunt.config.merge({
+    sass: {
+      core: {
+        options: options,
+        files: {
+          'dist/css/<%= pkg.name %>.css': 'scss/<%= pkg.name %>.scss'
+        }
+      },
+      docs: {
+        options: options,
+        files: {
+          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
+        }
+      }
+    }
+  });
+  grunt.loadNpmTasks('grunt-contrib-sass');
+};

js/.jscsrc

@@ -22,6 +22,7 @@
   "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
   "requireSpaceAfterLineComment": true,
   "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
+  "requireSpaceBetweenArguments": true,
   "requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true, "beforeOpeningRoundBrace": true },
   "requireSpacesInConditionalExpression": true,
   "requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true },

js/popover.js

@@ -25,7 +25,7 @@
     placement: 'right',
     trigger: 'click',
     content: '',
-    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
   })
 
 
@@ -50,7 +50,7 @@
       this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
     ](content)
 
-    $tip.removeClass('fade top bottom left right in')
+    $tip.removeClass('fade popover-top popover-bottom popover-left popover-right in')
 
     // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
     // this manually by checking the contents.
@@ -72,7 +72,7 @@
   }
 
   Popover.prototype.arrow = function () {
-    return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
+    return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow'))
   }
 
   Popover.prototype.tip = function () {

js/tests/unit/popover.js

@@ -141,7 +141,7 @@ $(function () {
       .bootstrapPopover({
         title: 'Test',
         content: 'Test',
-        template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
+        template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
       })
 
     $popover.bootstrapPopover('show')

js/tests/unit/tooltip.js

@@ -85,7 +85,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'bottom' })
 
     $tooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $tooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed')
@@ -300,8 +300,8 @@ $(function () {
 
   test('should add position class before positioning so that position-specific styles are taken into account', function () {
     var styles = '<style>'
-        + '.tooltip.right { white-space: nowrap; }'
-        + '.tooltip.right .tooltip-inner { max-width: none; }'
+        + '.tooltip.tooltip-right { white-space: nowrap; }'
+        + '.tooltip.tooltip-right .tooltip-inner { max-width: none; }'
         + '</style>'
     var $styles = $(styles).appendTo('head')
 
@@ -384,7 +384,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'auto' })
 
     $topTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $topTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
@@ -394,7 +394,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'right auto' })
 
     $rightTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
+    ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left')
 
     $rightTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
@@ -404,7 +404,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'auto left' })
 
     $leftTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
+    ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right')
 
     $leftTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
@@ -430,7 +430,7 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
+    ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -455,7 +455,7 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -481,7 +481,7 @@ $(function () {
     $('#scrollable-div').scrollTop(100)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -507,7 +507,7 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -537,7 +537,7 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -563,7 +563,7 @@ $(function () {
     $('#scrollable-div').scrollTop(400)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')

js/tooltip.js

@@ -177,7 +177,7 @@
       $tip
         .detach()
         .css({ top: 0, left: 0, display: 'block' })
-        .addClass(placement)
+        .addClass(this.type + '-' + placement)
         .data('bs.' + this.type, this)
 
       this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@@ -187,7 +187,7 @@
       var actualHeight = $tip[0].offsetHeight
 
       if (autoPlace) {
-        var orgPlacement = placement
+        var origPlacement = placement
         var $container   = this.options.container ? $(this.options.container) : this.$element.parent()
         var containerDim = this.getPosition($container)
 
@@ -198,8 +198,8 @@
                     placement
 
         $tip
-          .removeClass(orgPlacement)
-          .addClass(placement)
+          .removeClass(this.type + '-' + origPlacement)
+          .addClass(this.type + '-' + placement)
       }
 
       var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
@@ -283,7 +283,7 @@
     var title = this.getTitle()
 
     $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
-    $tip.removeClass('fade in top bottom left right')
+    $tip.removeClass('fade in tooltip-top tooltip-bottom tooltip-left tooltip-right')
   }
 
   Tooltip.prototype.hide = function (callback) {

package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "btoa": "~1.1.2",
-    "glob": "~4.2.1",
+    "glob": "~4.3.1",
     "grunt": "~0.4.5",
     "grunt-autoprefixer": "~2.0.0",
     "grunt-banner": "~0.2.3",
@@ -42,23 +42,24 @@
     "grunt-contrib-copy": "~0.7.0",
     "grunt-contrib-csslint": "~0.3.1",
     "grunt-contrib-cssmin": "~0.10.0",
-    "grunt-contrib-jade": "~0.13.0",
+    "grunt-contrib-jade": "~0.14.0",
     "grunt-contrib-jshint": "~0.10.0",
     "grunt-contrib-qunit": "~0.5.2",
-    "grunt-contrib-uglify": "~0.6.0",
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-uglify": "~0.7.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-csscomb": "~3.0.0",
     "grunt-exec": "~0.4.6",
     "grunt-html-validation": "~0.1.18",
     "grunt-jekyll": "~0.4.2",
-    "grunt-jscs": "~1.0.0",
+    "grunt-jscs": "~1.1.0",
     "grunt-sass": "~0.17.0",
-    "grunt-saucelabs": "~8.3.3",
+    "grunt-saucelabs": "~8.4.0",
     "grunt-scss-lint": "^0.3.4",
     "grunt-sed": "~0.1.1",
-    "load-grunt-tasks": "~1.0.0",
-    "npm-shrinkwrap": "5.0.0",
-    "remarkable": "~1.4.2",
+    "load-grunt-tasks": "~2.0.0",
+    "npm-shrinkwrap": "^200.0.0",
+    "remarkable": "~1.6.0",
     "time-grunt": "~1.0.0"
   },
   "engines": {

scss/_alert.scss

@@ -12,17 +12,6 @@
   border: 1px solid transparent;
   @include border-radius($alert-border-radius);
 
-  // Headings for larger alerts
-  h4 {
-    margin-top: 0;
-    // Specified for the h4 to prevent conflicts of changing $headings-color
-    color: inherit;
-  }
-  // Provide class for links that match alerts
-  .alert-link {
-    font-weight: $alert-link-font-weight;
-  }
-
   // Improve alignment and spacing of inner content
   > p,
   > ul {
@@ -33,6 +22,18 @@
   }
 }
 
+// Headings for larger alerts
+.alert-heading {
+  margin-top: 0;
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
 // Dismissible alerts
 //
 // Expand the right padding and account for the close button's positioning.

scss/_forms.scss

@@ -540,14 +540,14 @@ input[type="checkbox"] {
   // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
   // inputs and labels within a `.form-group`.
   .form-group-lg {
-    @media (min-width: $screen-sm-min) {
+    @include media-sm {
       .control-label {
         padding-top: $padding-lg-vertical;
       }
     }
   }
   .form-group-sm {
-    @media (min-width: $screen-sm-min) {
+    @include media-sm {
       .control-label {
         padding-top: ($padding-sm-vertical + .1);
       }

scss/_grid.scss

@@ -10,14 +10,11 @@
 .container {
   @include make-container();
 
-  @media (min-width: $screen-sm-min) {
-    max-width: $container-sm;
-  }
-  @media (min-width: $screen-md-min) {
-    max-width: $container-md;
-  }
-  @media (min-width: $screen-lg-min) {
-    max-width: $container-lg;
+  // For each breakpoint, define the maximum width of the container in a media query
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @include media-breakpoint-min($breakpoint) {
+      max-width: $container-max-width;
+    }
   }
 }
 
@@ -47,47 +44,3 @@
 
 @include make-grid-columns();
 
-
-// Extra small grid
-//
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
-
-@include make-grid(xs);
-
-
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
-
-@include media-sm {
-  @include make-grid(sm);
-}
-
-
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
-
-@include media-md {
-  @include make-grid(md);
-}
-
-
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@include media-lg {
-  @include make-grid(lg);
-}
-
-
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
-
-@include media-lg {
-  @include make-grid(xl);
-}

scss/_mixins.scss

@@ -24,6 +24,7 @@
 }
 
 // Utilities
+@import "mixins/breakpoints";
 @import "mixins/media-queries";
 @import "mixins/hide-text";
 @import "mixins/image";
@@ -57,3 +58,4 @@
 // @import "mixins/navbar-align";
 @import "mixins/grid-framework";
 @import "mixins/grid";
+@import "mixins/pulls";

scss/_modal.scss

@@ -126,7 +126,7 @@
 }
 
 // Scale up the modal
-@media (min-width: $screen-sm-min) {
+@include media-sm {
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: $modal-md;
@@ -140,6 +140,6 @@
   .modal-sm { width: $modal-sm; }
 }
 
-@media (min-width: $screen-md-min) {
+@include media-md {
   .modal-lg { width: $modal-lg; }
 }

scss/_navbar.scss

@@ -199,10 +199,10 @@
 
 @include media-sm {
   .navbar-left {
-    @extend .pull-left;
+    @include pull-left();
   }
   .navbar-right {
-    @extend .pull-right;
+    @include pull-right();
     margin-right: -$navbar-padding-horizontal;
 
     ~ .navbar-right {

scss/_popover.scss

@@ -24,14 +24,14 @@
   border: 1px solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
-
-  // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -$popover-arrow-width; }
-  &.right   { margin-left: $popover-arrow-width; }
-  &.bottom  { margin-top: $popover-arrow-width; }
-  &.left    { margin-left: -$popover-arrow-width; }
 }
 
+// Offset the popover to account for the popover arrow
+.popover-top     { margin-top: -$popover-arrow-width; }
+.popover-right   { margin-left: $popover-arrow-width; }
+.popover-bottom  { margin-top: $popover-arrow-width; }
+.popover-left    { margin-left: -$popover-arrow-width; }
+
 .popover-title {
   padding: 8px 14px;
   margin: 0; // reset heading margin
@@ -47,9 +47,9 @@
 
 // Arrows
 //
-// .arrow is outer, .arrow:after is inner
+// .popover-arrow is outer, .popover-arrow:after is inner
 
-.popover > .arrow {
+.popover-arrow {
   &,
   &:after {
     position: absolute;
@@ -60,70 +60,68 @@
     border-style: solid;
   }
 }
-.popover > .arrow {
+.popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover > .arrow:after {
+.popover-arrow:after {
   content: "";
   border-width: $popover-arrow-width;
 }
 
-.popover {
-  &.top > .arrow {
-    bottom: -$popover-arrow-outer-width;
-    left: 50%;
-    margin-left: -$popover-arrow-outer-width;
-    border-top-color: $popover-arrow-outer-color;
+.popover-top > .popover-arrow {
+  bottom: -$popover-arrow-outer-width;
+  left: 50%;
+  margin-left: -$popover-arrow-outer-width;
+  border-top-color: $popover-arrow-outer-color;
+  border-bottom-width: 0;
+  &:after {
+    bottom: 1px;
+    margin-left: -$popover-arrow-width;
+    content: "";
+    border-top-color: $popover-arrow-color;
     border-bottom-width: 0;
-    &:after {
-      bottom: 1px;
-      margin-left: -$popover-arrow-width;
-      content: "";
-      border-top-color: $popover-arrow-color;
-      border-bottom-width: 0;
-    }
   }
-  &.right > .arrow {
-    top: 50%;
-    left: -$popover-arrow-outer-width;
-    margin-top: -$popover-arrow-outer-width;
-    border-right-color: $popover-arrow-outer-color;
+}
+.popover-right > .popover-arrow {
+  top: 50%;
+  left: -$popover-arrow-outer-width;
+  margin-top: -$popover-arrow-outer-width;
+  border-right-color: $popover-arrow-outer-color;
+  border-left-width: 0;
+  &:after {
+    bottom: -$popover-arrow-width;
+    left: 1px;
+    content: "";
+    border-right-color: $popover-arrow-color;
     border-left-width: 0;
-    &:after {
-      bottom: -$popover-arrow-width;
-      left: 1px;
-      content: "";
-      border-right-color: $popover-arrow-color;
-      border-left-width: 0;
-    }
   }
-  &.bottom > .arrow {
-    top: -$popover-arrow-outer-width;
-    left: 50%;
-    margin-left: -$popover-arrow-outer-width;
+}
+.popover-bottom > .popover-arrow {
+  top: -$popover-arrow-outer-width;
+  left: 50%;
+  margin-left: -$popover-arrow-outer-width;
+  border-top-width: 0;
+  border-bottom-color: $popover-arrow-outer-color;
+  &:after {
+    top: 1px;
+    margin-left: -$popover-arrow-width;
+    content: "";
     border-top-width: 0;
-    border-bottom-color: $popover-arrow-outer-color;
-    &:after {
-      top: 1px;
-      margin-left: -$popover-arrow-width;
-      content: "";
-      border-top-width: 0;
-      border-bottom-color: $popover-arrow-color;
-    }
+    border-bottom-color: $popover-arrow-color;
   }
+}
 
-  &.left > .arrow {
-    top: 50%;
-    right: -$popover-arrow-outer-width;
-    margin-top: -$popover-arrow-outer-width;
+.popover-left > .popover-arrow {
+  top: 50%;
+  right: -$popover-arrow-outer-width;
+  margin-top: -$popover-arrow-outer-width;
+  border-right-width: 0;
+  border-left-color: $popover-arrow-outer-color;
+  &:after {
+    right: 1px;
+    bottom: -$popover-arrow-width;
+    content: "";
     border-right-width: 0;
-    border-left-color: $popover-arrow-outer-color;
-    &:after {
-      right: 1px;
-      bottom: -$popover-arrow-width;
-      content: "";
-      border-right-width: 0;
-      border-left-color: $popover-arrow-color;
-    }
+    border-left-color: $popover-arrow-color;
   }
 }

scss/_tooltip.scss

@@ -17,26 +17,23 @@
   opacity: 0;
 
   &.in { opacity: $tooltip-opacity; }
+}
 
-  &.top {
-    padding: $tooltip-arrow-width 0;
-    margin-top: -3px;
-  }
-
-  &.right {
-    padding: 0 $tooltip-arrow-width;
-    margin-left: 3px;
-  }
-
-  &.bottom {
-    padding: $tooltip-arrow-width 0;
-    margin-top: 3px;
-  }
-
-  &.left {
-    padding: 0 $tooltip-arrow-width;
-    margin-left: -3px;
-  }
+.tooltip-top {
+  padding: $tooltip-arrow-width 0;
+  margin-top: -3px;
+}
+.tooltip-right {
+  padding: 0 $tooltip-arrow-width;
+  margin-left: 3px;
+}
+.tooltip-bottom {
+  padding: $tooltip-arrow-width 0;
+  margin-top: 3px;
+}
+.tooltip-left {
+  padding: 0 $tooltip-arrow-width;
+  margin-left: -3px;
 }
 
 // Wrapper for the tooltip content
@@ -58,62 +55,31 @@
   border-color: transparent;
   border-style: solid;
 }
-// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
-.tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-top-color: $tooltip-arrow-color;
-  }
-  &.top-left .tooltip-arrow {
-    right: $tooltip-arrow-width;
-    bottom: 0;
-    margin-bottom: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-top-color: $tooltip-arrow-color;
-  }
-  &.top-right .tooltip-arrow {
-    bottom: 0;
-    left: $tooltip-arrow-width;
-    margin-bottom: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-top-color: $tooltip-arrow-color;
-  }
-  &.right .tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-right-color: $tooltip-arrow-color;
-  }
-  &.left .tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-left-color: $tooltip-arrow-color;
-  }
-  &.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -$tooltip-arrow-width;
-    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-bottom-color: $tooltip-arrow-color;
-  }
-  &.bottom-left .tooltip-arrow {
-    top: 0;
-    right: $tooltip-arrow-width;
-    margin-top: -$tooltip-arrow-width;
-    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-bottom-color: $tooltip-arrow-color;
-  }
-  &.bottom-right .tooltip-arrow {
-    top: 0;
-    left: $tooltip-arrow-width;
-    margin-top: -$tooltip-arrow-width;
-    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-bottom-color: $tooltip-arrow-color;
-  }
+.tooltip-top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-top-color: $tooltip-arrow-color;
+}
+.tooltip-right .tooltip-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-right-color: $tooltip-arrow-color;
+}
+.tooltip-left .tooltip-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-left-color: $tooltip-arrow-color;
+}
+.tooltip-bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -$tooltip-arrow-width;
+  border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-bottom-color: $tooltip-arrow-color;
 }

scss/_type.scss

@@ -116,7 +116,7 @@ ol {
 
 // Inline turns list items into inline-block
 .list-inline {
-  @extend list-unstyled();
+  @extend .list-unstyled;
   margin-left: -5px;
 
   > li {

scss/_utilities.scss

@@ -10,11 +10,12 @@
 .center-block {
   @include center-block();
 }
+
 .pull-right {
-  float: right !important;
+  @include pull-right();
 }
 .pull-left {
-  float: left !important;
+  @include pull-left();
 }