Update to BS4 alpha 3

README.md

@@ -21,6 +21,7 @@ http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
 
 ## Changelog
             - **Pre-Release 0.4.6 **
+                  - Update to Bootstrap 4 Alpha 3
                   - Adding basic padding to aligned content images
                   - Adding author.php template with author infos
                   - Correct language file + german translation

bower.json

@@ -27,7 +27,7 @@
     "fontawesome": "~4.6.3",
     "_s": "https://github.com/Automattic/_s.git",
     "OwlCarousel2": "2.1.6",
-    "bootstrap": "v4.0.0-alpha.2",
+    "bootstrap": "v4.0.0-alpha.3",
     "tether": "~1.3.2"
   },
   "_source": "https://github.com/holger1411/understrap.git",

sass/assets/bootstrap4.scss

@@ -5,6 +5,7 @@
  */
 
 // Core variables and mixins
+@import "../../src/sass/bootstrap4/custom";
 @import "../../src/sass/bootstrap4/variables";
 @import "../../src/sass/bootstrap4/mixins";
 
@@ -33,8 +34,7 @@
 @import "../../src/sass/bootstrap4/card";
 @import "../../src/sass/bootstrap4/breadcrumb";
 @import "../../src/sass/bootstrap4/pagination";
-@import "../../src/sass/bootstrap4/pager";
+@import "../../src/sass/bootstrap4/tags";
-@import "../../src/sass/bootstrap4/labels";
 @import "../../src/sass/bootstrap4/jumbotron";
 @import "../../src/sass/bootstrap4/alert";
 @import "../../src/sass/bootstrap4/progress";
@@ -51,6 +51,3 @@
 
 // Utility classes
 @import "../../src/sass/bootstrap4/utilities";
-@import "../../src/sass/bootstrap4/utilities-background";
-@import "../../src/sass/bootstrap4/utilities-spacing";
-@import "../../src/sass/bootstrap4/utilities-responsive";

sass/understrap/understrap.scss

@@ -91,7 +91,7 @@ right: 0px;
 .navbar-toggle {
   position: relative;
   float: right;
-  margin-right: $navbar-padding-horizontal;
+  margin-right: $navbar-padding-x;
   padding: 9px 10px;
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

src/js/bootstrap4/bootstrap.js

@@ -1,6 +1,6 @@
 /*!
- * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Copyright 2011-2016 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
@@ -10,8 +10,8 @@ if (typeof jQuery === 'undefined') {
 
 +function ($) {
   var version = $.fn.jquery.split(' ')[0].split('.')
-  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 3)) {
+  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) {
-    throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v3.0.0')
+    throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')
   }
 }(jQuery);
 
@@ -20,7 +20,7 @@ if (typeof jQuery === 'undefined') {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): util.js
+ * Bootstrap (v4.0.0-alpha.3): util.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -45,6 +45,8 @@ var Util = (function ($) {
 
   var transition = false;
 
+  var MAX_UID = 1000000;
+
   var TransitionEndEvent = {
     WebkitTransition: 'webkitTransitionEnd',
     MozTransition: 'transitionend',
@@ -67,8 +69,9 @@ var Util = (function ($) {
       delegateType: transition.end,
       handle: function handle(event) {
         if ($(event.target).is(this)) {
-          return event.handleObj.handler.apply(this, arguments);
+          return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
         }
+        return undefined;
       }
     };
   }
@@ -129,7 +132,9 @@ var Util = (function ($) {
 
     getUID: function getUID(prefix) {
       do {
-        prefix += ~ ~(Math.random() * 1000000); // "~~" acts like a faster Math.floor() here
+        /* eslint-disable no-bitwise */
+        prefix += ~ ~(Math.random() * MAX_UID); // "~~" acts like a faster Math.floor() here
+        /* eslint-enable no-bitwise */
       } while (document.getElementById(prefix));
       return prefix;
     },
@@ -185,7 +190,7 @@ var Util = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): alert.js
+ * Bootstrap (v4.0.0-alpha.3): alert.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -199,7 +204,7 @@ var Alert = (function ($) {
    */
 
   var NAME = 'alert';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.alert';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -371,7 +376,7 @@ var Alert = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): button.js
+ * Bootstrap (v4.0.0-alpha.3): button.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -385,7 +390,7 @@ var Button = (function ($) {
    */
 
   var NAME = 'button';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.button';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -460,6 +465,8 @@ var Button = (function ($) {
               input.checked = !$(this._element).hasClass(ClassName.ACTIVE);
               $(this._element).trigger('change');
             }
+
+            input.focus();
           }
         } else {
           this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE));
@@ -537,7 +544,7 @@ var Button = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): carousel.js
+ * Bootstrap (v4.0.0-alpha.3): carousel.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -551,12 +558,14 @@ var Carousel = (function ($) {
    */
 
   var NAME = 'carousel';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.carousel';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
   var JQUERY_NO_CONFLICT = $.fn[NAME];
   var TRANSITION_DURATION = 600;
+  var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key
+  var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key
 
   var Default = {
     interval: 5000,
@@ -772,10 +781,12 @@ var Carousel = (function ($) {
         }
 
         switch (event.which) {
-          case 37:
+          case ARROW_LEFT_KEYCODE:
-            this.prev();break;
+            this.prev();
-          case 39:
+            break;
-            this.next();break;
+          case ARROW_RIGHT_KEYCODE:
+            this.next();
+            break;
           default:
             return;
         }
@@ -1009,7 +1020,7 @@ var Carousel = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): collapse.js
+ * Bootstrap (v4.0.0-alpha.3): collapse.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -1023,7 +1034,7 @@ var Collapse = (function ($) {
    */
 
   var NAME = 'collapse';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.collapse';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -1367,7 +1378,7 @@ var Collapse = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): dropdown.js
+ * Bootstrap (v4.0.0-alpha.3): dropdown.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -1381,11 +1392,15 @@ var Dropdown = (function ($) {
    */
 
   var NAME = 'dropdown';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.dropdown';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
   var JQUERY_NO_CONFLICT = $.fn[NAME];
+  var ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key
+  var ARROW_UP_KEYCODE = 38; // KeyboardEvent.which value for up arrow key
+  var ARROW_DOWN_KEYCODE = 40; // KeyboardEvent.which value for down arrow key
+  var RIGHT_MOUSE_BUTTON_WHICH = 3; // MouseEvent.which value for the right button (assuming a right-handed mouse)
 
   var Event = {
     HIDE: 'hide' + EVENT_KEY,
@@ -1520,7 +1535,7 @@ var Dropdown = (function ($) {
     }, {
       key: '_clearMenus',
       value: function _clearMenus(event) {
-        if (event && event.which === 3) {
+        if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) {
           return;
         }
 
@@ -1583,9 +1598,9 @@ var Dropdown = (function ($) {
         var parent = Dropdown._getParentFromElement(this);
         var isActive = $(parent).hasClass(ClassName.OPEN);
 
-        if (!isActive && event.which !== 27 || isActive && event.which === 27) {
+        if (!isActive && event.which !== ESCAPE_KEYCODE || isActive && event.which === ESCAPE_KEYCODE) {
 
-          if (event.which === 27) {
+          if (event.which === ESCAPE_KEYCODE) {
             var toggle = $(parent).find(Selector.DATA_TOGGLE)[0];
             $(toggle).trigger('focus');
           }
@@ -1606,17 +1621,17 @@ var Dropdown = (function ($) {
 
         var index = items.indexOf(event.target);
 
-        if (event.which === 38 && index > 0) {
+        if (event.which === ARROW_UP_KEYCODE && index > 0) {
           // up
           index--;
         }
 
-        if (event.which === 40 && index < items.length - 1) {
+        if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) {
           // down
           index++;
         }
 
-        if (! ~index) {
+        if (index < 0) {
           index = 0;
         }
 
@@ -1654,7 +1669,7 @@ var Dropdown = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): modal.js
+ * Bootstrap (v4.0.0-alpha.3): modal.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -1668,13 +1683,14 @@ var Modal = (function ($) {
    */
 
   var NAME = 'modal';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.modal';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
   var JQUERY_NO_CONFLICT = $.fn[NAME];
   var TRANSITION_DURATION = 300;
   var BACKDROP_TRANSITION_DURATION = 150;
+  var ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key
 
   var Default = {
     backdrop: true,
@@ -1870,6 +1886,7 @@ var Modal = (function ($) {
         }
 
         this._element.style.display = 'block';
+        this._element.removeAttribute('aria-hidden');
         this._element.scrollTop = 0;
 
         if (transition) {
@@ -1906,7 +1923,7 @@ var Modal = (function ($) {
 
         $(document).off(Event.FOCUSIN) // guard against infinite focus loop
         .on(Event.FOCUSIN, function (event) {
-          if (_this9._element !== event.target && !$(_this9._element).has(event.target).length) {
+          if (document !== event.target && _this9._element !== event.target && !$(_this9._element).has(event.target).length) {
             _this9._element.focus();
           }
         });
@@ -1918,7 +1935,7 @@ var Modal = (function ($) {
 
         if (this._isShown && this._config.keyboard) {
           $(this._element).on(Event.KEYDOWN_DISMISS, function (event) {
-            if (event.which === 27) {
+            if (event.which === ESCAPE_KEYCODE) {
               _this10.hide();
             }
           });
@@ -1941,6 +1958,7 @@ var Modal = (function ($) {
         var _this11 = this;
 
         this._element.style.display = 'none';
+        this._element.setAttribute('aria-hidden', 'true');
         this._showBackdrop(function () {
           $(document.body).removeClass(ClassName.OPEN);
           _this11._resetAdjustments();
@@ -2046,7 +2064,7 @@ var Modal = (function ($) {
         }
 
         if (this._isBodyOverflowing && !isModalOverflowing) {
-          this._element.style.paddingRight = this._scrollbarWidth + 'px~';
+          this._element.style.paddingRight = this._scrollbarWidth + 'px';
         }
       }
     }, {
@@ -2058,13 +2076,7 @@ var Modal = (function ($) {
     }, {
       key: '_checkScrollbar',
       value: function _checkScrollbar() {
-        var fullWindowWidth = window.innerWidth;
+        this._isBodyOverflowing = document.body.clientWidth < window.innerWidth;
-        if (!fullWindowWidth) {
-          // workaround for missing window.innerWidth in IE8
-          var documentElementRect = document.documentElement.getBoundingClientRect();
-          fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
-        }
-        this._isBodyOverflowing = document.body.clientWidth < fullWindowWidth;
         this._scrollbarWidth = this._getScrollbarWidth();
       }
     }, {
@@ -2184,7 +2196,7 @@ var Modal = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): scrollspy.js
+ * Bootstrap (v4.0.0-alpha.3): scrollspy.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -2198,7 +2210,7 @@ var ScrollSpy = (function ($) {
    */
 
   var NAME = 'scrollspy';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.scrollspy';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -2313,6 +2325,7 @@ var ScrollSpy = (function ($) {
             // todo (fat): remove sketch reliance on jQuery position/offset
             return [$(target)[offsetMethod]().top + offsetBase, targetSelector];
           }
+          return null;
         }).filter(function (item) {
           return item;
         }).sort(function (a, b) {
@@ -2419,7 +2432,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);
         }
@@ -2498,7 +2511,7 @@ var ScrollSpy = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): tab.js
+ * Bootstrap (v4.0.0-alpha.3): tab.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -2512,7 +2525,7 @@ var Tab = (function ($) {
    */
 
   var NAME = 'tab';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.tab';
   var EVENT_KEY = '.' + DATA_KEY;
   var DATA_API_KEY = '.data-api';
@@ -2757,7 +2770,7 @@ var Tab = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): tooltip.js
+ * Bootstrap (v4.0.0-alpha.3): tooltip.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -2779,7 +2792,7 @@ var Tooltip = (function ($) {
    */
 
   var NAME = 'tooltip';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.tooltip';
   var EVENT_KEY = '.' + DATA_KEY;
   var JQUERY_NO_CONFLICT = $.fn[NAME];
@@ -3368,7 +3381,7 @@ var Tooltip = (function ($) {
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): popover.js
+ * Bootstrap (v4.0.0-alpha.3): popover.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -3382,7 +3395,7 @@ var Popover = (function ($) {
    */
 
   var NAME = 'popover';
-  var VERSION = '4.0.0-alpha';
+  var VERSION = '4.0.0-alpha.3';
   var DATA_KEY = 'bs.popover';
   var EVENT_KEY = '.' + DATA_KEY;
   var JQUERY_NO_CONFLICT = $.fn[NAME];

src/js/core.js

@@ -0,0 +1,481 @@
+/* global Symbol */
+// Defining this global in .eslintrc would create a danger of using the global
+// unguarded in another place, it seems safer to define global only for this module
+
+define( [
+	"./var/arr",
+	"./var/document",
+	"./var/getProto",
+	"./var/slice",
+	"./var/concat",
+	"./var/push",
+	"./var/indexOf",
+	"./var/class2type",
+	"./var/toString",
+	"./var/hasOwn",
+	"./var/fnToString",
+	"./var/ObjectFunctionString",
+	"./var/support",
+	"./core/DOMEval"
+], function( arr, document, getProto, slice, concat, push, indexOf,
+	class2type, toString, hasOwn, fnToString, ObjectFunctionString,
+	support, DOMEval ) {
+
+"use strict";
+
+var
+	version = "3.1.0",
+
+	// Define a local copy of jQuery
+	jQuery = function( selector, context ) {
+
+		// The jQuery object is actually just the init constructor 'enhanced'
+		// Need init if jQuery is called (just allow error to be thrown if not included)
+		return new jQuery.fn.init( selector, context );
+	},
+
+	// Support: Android <=4.0 only
+	// Make sure we trim BOM and NBSP
+	rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
+
+	// Matches dashed string for camelizing
+	rmsPrefix = /^-ms-/,
+	rdashAlpha = /-([a-z])/g,
+
+	// Used by jQuery.camelCase as callback to replace()
+	fcamelCase = function( all, letter ) {
+		return letter.toUpperCase();
+	};
+
+jQuery.fn = jQuery.prototype = {
+
+	// The current version of jQuery being used
+	jquery: version,
+
+	constructor: jQuery,
+
+	// The default length of a jQuery object is 0
+	length: 0,
+
+	toArray: function() {
+		return slice.call( this );
+	},
+
+	// Get the Nth element in the matched element set OR
+	// Get the whole matched element set as a clean array
+	get: function( num ) {
+		return num != null ?
+
+			// Return just the one element from the set
+			( num < 0 ? this[ num + this.length ] : this[ num ] ) :
+
+			// Return all the elements in a clean array
+			slice.call( this );
+	},
+
+	// Take an array of elements and push it onto the stack
+	// (returning the new matched element set)
+	pushStack: function( elems ) {
+
+		// Build a new jQuery matched element set
+		var ret = jQuery.merge( this.constructor(), elems );
+
+		// Add the old object onto the stack (as a reference)
+		ret.prevObject = this;
+
+		// Return the newly-formed element set
+		return ret;
+	},
+
+	// Execute a callback for every element in the matched set.
+	each: function( callback ) {
+		return jQuery.each( this, callback );
+	},
+
+	map: function( callback ) {
+		return this.pushStack( jQuery.map( this, function( elem, i ) {
+			return callback.call( elem, i, elem );
+		} ) );
+	},
+
+	slice: function() {
+		return this.pushStack( slice.apply( this, arguments ) );
+	},
+
+	first: function() {
+		return this.eq( 0 );
+	},
+
+	last: function() {
+		return this.eq( -1 );
+	},
+
+	eq: function( i ) {
+		var len = this.length,
+			j = +i + ( i < 0 ? len : 0 );
+		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
+	},
+
+	end: function() {
+		return this.prevObject || this.constructor();
+	},
+
+	// For internal use only.
+	// Behaves like an Array's method, not like a jQuery method.
+	push: push,
+	sort: arr.sort,
+	splice: arr.splice
+};
+
+jQuery.extend = jQuery.fn.extend = function() {
+	var options, name, src, copy, copyIsArray, clone,
+		target = arguments[ 0 ] || {},
+		i = 1,
+		length = arguments.length,
+		deep = false;
+
+	// Handle a deep copy situation
+	if ( typeof target === "boolean" ) {
+		deep = target;
+
+		// Skip the boolean and the target
+		target = arguments[ i ] || {};
+		i++;
+	}
+
+	// Handle case when target is a string or something (possible in deep copy)
+	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
+		target = {};
+	}
+
+	// Extend jQuery itself if only one argument is passed
+	if ( i === length ) {
+		target = this;
+		i--;
+	}
+
+	for ( ; i < length; i++ ) {
+
+		// Only deal with non-null/undefined values
+		if ( ( options = arguments[ i ] ) != null ) {
+
+			// Extend the base object
+			for ( name in options ) {
+				src = target[ name ];
+				copy = options[ name ];
+
+				// Prevent never-ending loop
+				if ( target === copy ) {
+					continue;
+				}
+
+				// Recurse if we're merging plain objects or arrays
+				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
+					( copyIsArray = jQuery.isArray( copy ) ) ) ) {
+
+					if ( copyIsArray ) {
+						copyIsArray = false;
+						clone = src && jQuery.isArray( src ) ? src : [];
+
+					} else {
+						clone = src && jQuery.isPlainObject( src ) ? src : {};
+					}
+
+					// Never move original objects, clone them
+					target[ name ] = jQuery.extend( deep, clone, copy );
+
+				// Don't bring in undefined values
+				} else if ( copy !== undefined ) {
+					target[ name ] = copy;
+				}
+			}
+		}
+	}
+
+	// Return the modified object
+	return target;
+};
+
+jQuery.extend( {
+
+	// Unique for each copy of jQuery on the page
+	expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
+
+	// Assume jQuery is ready without the ready module
+	isReady: true,
+
+	error: function( msg ) {
+		throw new Error( msg );
+	},
+
+	noop: function() {},
+
+	isFunction: function( obj ) {
+		return jQuery.type( obj ) === "function";
+	},
+
+	isArray: Array.isArray,
+
+	isWindow: function( obj ) {
+		return obj != null && obj === obj.window;
+	},
+
+	isNumeric: function( obj ) {
+
+		// As of jQuery 3.0, isNumeric is limited to
+		// strings and numbers (primitives or objects)
+		// that can be coerced to finite numbers (gh-2662)
+		var type = jQuery.type( obj );
+		return ( type === "number" || type === "string" ) &&
+
+			// parseFloat NaNs numeric-cast false positives ("")
+			// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
+			// subtraction forces infinities to NaN
+			!isNaN( obj - parseFloat( obj ) );
+	},
+
+	isPlainObject: function( obj ) {
+		var proto, Ctor;
+
+		// Detect obvious negatives
+		// Use toString instead of jQuery.type to catch host objects
+		if ( !obj || toString.call( obj ) !== "[object Object]" ) {
+			return false;
+		}
+
+		proto = getProto( obj );
+
+		// Objects with no prototype (e.g., `Object.create( null )`) are plain
+		if ( !proto ) {
+			return true;
+		}
+
+		// Objects with prototype are plain iff they were constructed by a global Object function
+		Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
+		return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
+	},
+
+	isEmptyObject: function( obj ) {
+
+		/* eslint-disable no-unused-vars */
+		// See https://github.com/eslint/eslint/issues/6125
+		var name;
+
+		for ( name in obj ) {
+			return false;
+		}
+		return true;
+	},
+
+	type: function( obj ) {
+		if ( obj == null ) {
+			return obj + "";
+		}
+
+		// Support: Android <=2.3 only (functionish RegExp)
+		return typeof obj === "object" || typeof obj === "function" ?
+			class2type[ toString.call( obj ) ] || "object" :
+			typeof obj;
+	},
+
+	// Evaluates a script in a global context
+	globalEval: function( code ) {
+		DOMEval( code );
+	},
+
+	// Convert dashed to camelCase; used by the css and data modules
+	// Support: IE <=9 - 11, Edge 12 - 13
+	// Microsoft forgot to hump their vendor prefix (#9572)
+	camelCase: function( string ) {
+		return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+	},
+
+	nodeName: function( elem, name ) {
+		return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
+	},
+
+	each: function( obj, callback ) {
+		var length, i = 0;
+
+		if ( isArrayLike( obj ) ) {
+			length = obj.length;
+			for ( ; i < length; i++ ) {
+				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
+					break;
+				}
+			}
+		} else {
+			for ( i in obj ) {
+				if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
+					break;
+				}
+			}
+		}
+
+		return obj;
+	},
+
+	// Support: Android <=4.0 only
+	trim: function( text ) {
+		return text == null ?
+			"" :
+			( text + "" ).replace( rtrim, "" );
+	},
+
+	// results is for internal usage only
+	makeArray: function( arr, results ) {
+		var ret = results || [];
+
+		if ( arr != null ) {
+			if ( isArrayLike( Object( arr ) ) ) {
+				jQuery.merge( ret,
+					typeof arr === "string" ?
+					[ arr ] : arr
+				);
+			} else {
+				push.call( ret, arr );
+			}
+		}
+
+		return ret;
+	},
+
+	inArray: function( elem, arr, i ) {
+		return arr == null ? -1 : indexOf.call( arr, elem, i );
+	},
+
+	// Support: Android <=4.0 only, PhantomJS 1 only
+	// push.apply(_, arraylike) throws on ancient WebKit
+	merge: function( first, second ) {
+		var len = +second.length,
+			j = 0,
+			i = first.length;
+
+		for ( ; j < len; j++ ) {
+			first[ i++ ] = second[ j ];
+		}
+
+		first.length = i;
+
+		return first;
+	},
+
+	grep: function( elems, callback, invert ) {
+		var callbackInverse,
+			matches = [],
+			i = 0,
+			length = elems.length,
+			callbackExpect = !invert;
+
+		// Go through the array, only saving the items
+		// that pass the validator function
+		for ( ; i < length; i++ ) {
+			callbackInverse = !callback( elems[ i ], i );
+			if ( callbackInverse !== callbackExpect ) {
+				matches.push( elems[ i ] );
+			}
+		}
+
+		return matches;
+	},
+
+	// arg is for internal usage only
+	map: function( elems, callback, arg ) {
+		var length, value,
+			i = 0,
+			ret = [];
+
+		// Go through the array, translating each of the items to their new values
+		if ( isArrayLike( elems ) ) {
+			length = elems.length;
+			for ( ; i < length; i++ ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret.push( value );
+				}
+			}
+
+		// Go through every key on the object,
+		} else {
+			for ( i in elems ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret.push( value );
+				}
+			}
+		}
+
+		// Flatten any nested arrays
+		return concat.apply( [], ret );
+	},
+
+	// A global GUID counter for objects
+	guid: 1,
+
+	// Bind a function to a context, optionally partially applying any
+	// arguments.
+	proxy: function( fn, context ) {
+		var tmp, args, proxy;
+
+		if ( typeof context === "string" ) {
+			tmp = fn[ context ];
+			context = fn;
+			fn = tmp;
+		}
+
+		// Quick check to determine if target is callable, in the spec
+		// this throws a TypeError, but we will just return undefined.
+		if ( !jQuery.isFunction( fn ) ) {
+			return undefined;
+		}
+
+		// Simulated bind
+		args = slice.call( arguments, 2 );
+		proxy = function() {
+			return fn.apply( context || this, args.concat( slice.call( arguments ) ) );
+		};
+
+		// Set the guid of unique handler to the same of original handler, so it can be removed
+		proxy.guid = fn.guid = fn.guid || jQuery.guid++;
+
+		return proxy;
+	},
+
+	now: Date.now,
+
+	// jQuery.support is not used in Core but other projects attach their
+	// properties to it so it needs to exist.
+	support: support
+} );
+
+if ( typeof Symbol === "function" ) {
+	jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
+}
+
+// Populate the class2type map
+jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
+function( i, name ) {
+	class2type[ "[object " + name + "]" ] = name.toLowerCase();
+} );
+
+function isArrayLike( obj ) {
+
+	// Support: real iOS 8.2 only (not reproducible in simulator)
+	// `in` check used to prevent JIT error (gh-2145)
+	// hasOwn isn't used here due to false negatives
+	// regarding Nodelist length in IE
+	var length = !!obj && "length" in obj && obj.length,
+		type = jQuery.type( obj );
+
+	if ( type === "function" || jQuery.isWindow( obj ) ) {
+		return false;
+	}
+
+	return type === "array" || length === 0 ||
+		typeof length === "number" && length > 0 && ( length - 1 ) in obj;
+}
+
+return jQuery;
+} );

src/js/tether.js

@@ -1,4 +1,4 @@
-/*! tether 1.3.1 */
+/*! tether 1.3.3 */
 
 (function(root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -23,6 +23,32 @@ if (typeof TetherBase === 'undefined') {
 
 var zeroElement = null;
 
+// Same as native getBoundingClientRect, except it takes into account parent <frame> offsets
+// if the element lies within a nested document (<frame> or <iframe>-like).
+function getActualBoundingClientRect(node) {
+  var boundingRect = node.getBoundingClientRect();
+
+  // The original object returned by getBoundingClientRect is immutable, so we clone it
+  // We can't use extend because the properties are not considered part of the object by hasOwnProperty in IE9
+  var rect = {};
+  for (var k in boundingRect) {
+    rect[k] = boundingRect[k];
+  }
+
+  if (node.ownerDocument !== document) {
+    var _frameElement = node.ownerDocument.defaultView.frameElement;
+    if (_frameElement) {
+      var frameRect = getActualBoundingClientRect(_frameElement);
+      rect.top += frameRect.top;
+      rect.bottom += frameRect.top;
+      rect.left += frameRect.left;
+      rect.right += frameRect.left;
+    }
+  }
+
+  return rect;
+}
+
 function getScrollParents(el) {
   // In firefox if the el is inside an iframe with display: none; window.getComputedStyle() will return null;
   // https://bugzilla.mozilla.org/show_bug.cgi?id=548397
@@ -58,7 +84,13 @@ function getScrollParents(el) {
     }
   }
 
-  parents.push(document.body);
+  parents.push(el.ownerDocument.body);
+
+  // If the node is within a frame, account for the parent window scroll
+  if (el.ownerDocument !== document) {
+    parents.push(el.ownerDocument.defaultView);
+  }
+
   return parents;
 }
 
@@ -92,13 +124,7 @@ var getOrigin = function getOrigin() {
 
   var id = node.getAttribute('data-tether-id');
   if (typeof zeroPosCache[id] === 'undefined') {
-    zeroPosCache[id] = {};
+    zeroPosCache[id] = getActualBoundingClientRect(node);
-
-    var rect = node.getBoundingClientRect();
-    for (var k in rect) {
-      // Can't use extend, as on IE9, elements don't resolve to be hasOwnProperty
-      zeroPosCache[id][k] = rect[k];
-    }
 
     // Clear the cache when this position call is done
     defer(function () {
@@ -127,13 +153,7 @@ function getBounds(el) {
 
   var docEl = doc.documentElement;
 
-  var box = {};
+  var box = getActualBoundingClientRect(el);
-  // The original object returned by getBoundingClientRect is immutable, so we clone it
-  // We can't use extend because the properties are not considered part of the object by hasOwnProperty in IE9
-  var rect = el.getBoundingClientRect();
-  for (var k in rect) {
-    box[k] = rect[k];
-  }
 
   var origin = getOrigin();
 
@@ -252,7 +272,9 @@ function hasClass(el, name) {
 }
 
 function getClassName(el) {
-  if (el.className instanceof SVGAnimatedString) {
+  // Can't use just SVGAnimatedString here since nodes within a Frame in IE have
+  // completely separately SVGAnimatedString base classes
+  if (el.className instanceof el.ownerDocument.defaultView.SVGAnimatedString) {
     return el.className.baseVal;
   }
   return el.className;
@@ -317,7 +339,7 @@ var Evented = (function () {
   }, {
     key: 'off',
     value: function off(event, handler) {
-      if (typeof this.bindings !== 'undefined' && typeof this.bindings[event] !== 'undefined') {
+      if (typeof this.bindings === 'undefined' || typeof this.bindings[event] === 'undefined') {
         return;
       }
 
@@ -371,6 +393,7 @@ var Evented = (function () {
 })();
 
 TetherBase.Utils = {
+  getActualBoundingClientRect: getActualBoundingClientRect,
   getScrollParents: getScrollParents,
   getBounds: getBounds,
   getOffsetParent: getOffsetParent,
@@ -429,7 +452,7 @@ var transformKey = (function () {
   }
   var el = document.createElement('div');
 
-  var transforms = ['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform'];
+  var transforms = ['transform', 'WebkitTransform', 'OTransform', 'MozTransform', 'msTransform'];
   for (var i = 0; i < transforms.length; ++i) {
     var key = transforms[i];
     if (el.style[key] !== undefined) {
@@ -828,7 +851,7 @@ var TetherClass = (function (_Evented) {
       this.enabled = true;
 
       this.scrollParents.forEach(function (parent) {
-        if (parent !== document) {
+        if (parent !== _this3.target.ownerDocument) {
           parent.addEventListener('scroll', _this3.position);
         }
       });
@@ -1028,21 +1051,24 @@ var TetherClass = (function (_Evented) {
         }
       };
 
+      var doc = this.target.ownerDocument;
+      var win = doc.defaultView;
+
       var scrollbarSize = undefined;
-      if (document.body.scrollWidth > window.innerWidth) {
+      if (doc.body.scrollWidth > win.innerWidth) {
         scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
         next.viewport.bottom -= scrollbarSize.height;
       }
 
-      if (document.body.scrollHeight > window.innerHeight) {
+      if (doc.body.scrollHeight > win.innerHeight) {
         scrollbarSize = this.cache('scrollbar-size', getScrollBarSize);
         next.viewport.right -= scrollbarSize.width;
       }
 
-      if (['', 'static'].indexOf(document.body.style.position) === -1 || ['', 'static'].indexOf(document.body.parentElement.style.position) === -1) {
+      if (['', 'static'].indexOf(doc.body.style.position) === -1 || ['', 'static'].indexOf(doc.body.parentElement.style.position) === -1) {
         // Absolute positioning in the body will be relative to the page, not the 'initial containing block'
-        next.page.bottom = document.body.scrollHeight - top - height;
+        next.page.bottom = doc.body.scrollHeight - top - height;
-        next.page.right = document.body.scrollWidth - left - width;
+        next.page.right = doc.body.scrollWidth - left - width;
       }
 
       if (typeof this.options.optimizations !== 'undefined' && this.options.optimizations.moveElement !== false && !(typeof this.targetModifier !== 'undefined')) {
@@ -1061,8 +1087,8 @@ var TetherClass = (function (_Evented) {
             offsetBorder[side.toLowerCase()] = parseFloat(offsetParentStyle['border' + side + 'Width']);
           });
 
-          offsetPosition.right = document.body.scrollWidth - offsetPosition.left - offsetParentSize.width + offsetBorder.right;
+          offsetPosition.right = doc.body.scrollWidth - offsetPosition.left - offsetParentSize.width + offsetBorder.right;
-          offsetPosition.bottom = document.body.scrollHeight - offsetPosition.top - offsetParentSize.height + offsetBorder.bottom;
+          offsetPosition.bottom = doc.body.scrollHeight - offsetPosition.top - offsetParentSize.height + offsetBorder.bottom;
 
           if (next.page.top >= offsetPosition.top + offsetBorder.top && next.page.bottom >= offsetPosition.bottom) {
             if (next.page.left >= offsetPosition.left + offsetBorder.left && next.page.right >= offsetPosition.right) {
@@ -1220,7 +1246,7 @@ var TetherClass = (function (_Evented) {
 
         if (!offsetParentIsBody) {
           this.element.parentNode.removeChild(this.element);
-          document.body.appendChild(this.element);
+          this.element.ownerDocument.body.appendChild(this.element);
         }
       }
 
@@ -1280,12 +1306,22 @@ function getBoundingRect(tether, to) {
 
   if (typeof to.nodeType !== 'undefined') {
     (function () {
+      var node = to;
       var size = getBounds(to);
       var pos = size;
       var style = getComputedStyle(to);
 
       to = [pos.left, pos.top, size.width + pos.left, size.height + pos.top];
 
+      // Account any parent Frames scroll offset
+      if (node.ownerDocument !== document) {
+        var win = node.ownerDocument.defaultView;
+        to[0] += win.pageXOffset;
+        to[1] += win.pageYOffset;
+        to[2] += win.pageXOffset;
+        to[3] += win.pageYOffset;
+      }
+
       BOUNDS_FORMAT.forEach(function (side, i) {
         side = side[0].toUpperCase() + side.substr(1);
         if (side === 'Top' || side === 'Left') {

src/sass/bootstrap4/_alert.scss

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

src/sass/bootstrap4/_breadcrumb.scss

@@ -1,23 +1,38 @@
 .breadcrumb {
-  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
   margin-bottom: $spacer-y;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
   @include clearfix;
+}
 
-  > li {
+.breadcrumb-item {
-    float: left;
+  float: left;
 
-    + li::before {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
-      padding-right: .5rem;
+  + .breadcrumb-item::before {
-      padding-left: .5rem;
+    display: inline-block; // Suppress underlining of the separator in modern browsers
-      color: $breadcrumb-divider-color;
+    padding-right: $breadcrumb-item-padding;
-      content: "#{$breadcrumb-divider}";
+    padding-left: $breadcrumb-item-padding;
-    }
+    color: $breadcrumb-divider-color;
+    content: "#{$breadcrumb-divider}";
   }
 
-  > .active {
+  // 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;
   }
 }

src/sass/bootstrap4/_button-group.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
@@ -33,7 +35,7 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -5px; // Offset the first child's margin
+  margin-left: -$btn-toolbar-margin; // Offset the first child's margin
   @include clearfix();
 
   .btn-group,
@@ -44,7 +46,7 @@
   > .btn,
   > .btn-group,
   > .input-group {
-    margin-left: 5px;
+    margin-left: $btn-toolbar-margin;
   }
 }
 
@@ -102,20 +104,30 @@
 // Split button dropdowns
 //
 
-// Give the line between buttons some depth
+.btn + .dropdown-toggle-split {
-.btn-group > .btn + .dropdown-toggle {
+  padding-right: $btn-padding-x * .75;
-  padding-right: 8px;
+  padding-left: $btn-padding-x * .75;
-  padding-left: 8px;
+
+  &::after {
+    margin-left: 0;
+  }
 }
-.btn-group > .btn-lg + .dropdown-toggle {
+
-  padding-right: 12px;
+.btn-sm + .dropdown-toggle-split {
-  padding-left: 12px;
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
 
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
 // 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 {
@@ -177,11 +189,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);
   }
 }

src/sass/bootstrap4/_buttons.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 //
 // Base styles
 //
@@ -5,13 +7,14 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   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, $btn-border-radius);
   @include transition(all .2s ease-in-out);
 
   &,
@@ -34,7 +37,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,
@@ -76,22 +79,22 @@ fieldset[disabled] a.btn {
 }
 
 // Remove all backgrounds
-.btn-primary-outline {
+.btn-outline-primary {
   @include button-outline-variant($btn-primary-bg);
 }
-.btn-secondary-outline {
+.btn-outline-secondary {
   @include button-outline-variant($btn-secondary-border);
 }
-.btn-info-outline {
+.btn-outline-info {
   @include button-outline-variant($btn-info-bg);
 }
-.btn-success-outline {
+.btn-outline-success {
   @include button-outline-variant($btn-success-bg);
 }
-.btn-warning-outline {
+.btn-outline-warning {
   @include button-outline-variant($btn-warning-bg);
 }
-.btn-danger-outline {
+.btn-outline-danger {
   @include button-outline-variant($btn-danger-bg);
 }
 
@@ -141,11 +144,11 @@ fieldset[disabled] a.btn {
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
 }
 
 
@@ -160,7 +163,7 @@ fieldset[disabled] a.btn {
 
 // Vertically space out multiple block buttons
 .btn-block + .btn-block {
-  margin-top: 5px;
+  margin-top: $btn-block-spacing-y;
 }
 
 // Specificity overrides

src/sass/bootstrap4/_card.scss

@@ -7,11 +7,13 @@
   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);
+  border: $card-border-width solid $card-border-color;
 }
 
 .card-block {
+  @include clearfix;
   padding: $card-spacer-x;
 }
 
@@ -46,18 +48,16 @@
   }
 }
 
-@if $enable-rounded {
+.card {
-  .card {
+  > .list-group:first-child {
-    > .list-group:first-child {
+    .list-group-item:first-child {
-      .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
-        border-radius: $card-border-radius $card-border-radius 0 0;
-      }
     }
+  }
 
-    > .list-group:last-child {
+  > .list-group:last-child {
-      .list-group-item:last-child {
+    .list-group-item:last-child {
-        border-radius: 0 0 $card-border-radius $card-border-radius;
+      @include border-bottom-radius($card-border-radius);
-      }
     }
   }
 }
@@ -68,6 +68,7 @@
 //
 
 .card-header {
+  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
@@ -78,6 +79,7 @@
 }
 
 .card-footer {
+  @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
@@ -88,6 +90,23 @@
 }
 
 
+//
+// 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;
+}
+
+.card-header-pills {
+  margin-right: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x / 2);
+}
+
+
 //
 // Background variations
 //
@@ -109,22 +128,22 @@
 }
 
 // Remove all backgrounds
-.card-primary-outline {
+.card-outline-primary {
   @include card-outline-variant($btn-primary-bg);
 }
-.card-secondary-outline {
+.card-outline-secondary {
   @include card-outline-variant($btn-secondary-border);
 }
-.card-info-outline {
+.card-outline-info {
   @include card-outline-variant($btn-info-bg);
 }
-.card-success-outline {
+.card-outline-success {
   @include card-outline-variant($btn-success-bg);
 }
-.card-warning-outline {
+.card-outline-warning {
   @include card-outline-variant($btn-warning-bg);
 }
-.card-danger-outline {
+.card-outline-danger {
   @include card-outline-variant($btn-danger-bg);
 }
 
@@ -157,55 +176,65 @@
   right: 0;
   bottom: 0;
   left: 0;
-  padding: 1.25rem;
+  padding: $card-img-overlay-padding;
 }
 
 
 
 // Card image caps
 .card-img-top {
-  @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+  @include border-top-radius($card-border-radius-inner);
 }
 .card-img-bottom {
-  @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+  @include border-bottom-radius($card-border-radius-inner);
 }
 
 
-//
 // Card set
 //
+// Heads up! We do some funky style resetting here for margins across our two
+// variations (one flex, one table). Individual cards have margin-bottom by
+// default, but they're ignored due to table styles. For a consistent design,
+// we've done the same to the flex variation.
+//
+// Those changes are noted by `// Margin balancing`.
 
 @if $enable-flex {
   @include media-breakpoint-up(sm) {
     .card-deck {
       display: flex;
       flex-flow: row wrap;
-      margin-right: -.625rem;
+      margin-right: -$card-deck-margin;
-      margin-left: -.625rem;
+      margin-bottom: $card-spacer-y; // Margin balancing
+      margin-left: -$card-deck-margin;
 
       .card {
         flex: 1 0 0;
-        margin-right: .625rem;
+        margin-right: $card-deck-margin;
-        margin-left: .625rem;
+        margin-bottom: 0; // Margin balancing
+        margin-left: $card-deck-margin;
       }
     }
   }
 } @else {
   @include media-breakpoint-up(sm) {
+    $space-between-cards: (2 * $card-deck-margin);
     .card-deck {
       display: table;
+      width: 100%;
+      margin-bottom: $card-spacer-y; // Margin balancing
       table-layout: fixed;
-      border-spacing: 1.25rem 0;
+      border-spacing: $space-between-cards 0;
 
       .card {
         display: table-cell;
-        width: 1%;
+        margin-bottom: 0; // Margin balancing
         vertical-align: top;
       }
     }
     .card-deck-wrapper {
-      margin-right: -1.25rem;
+      margin-right: (-$space-between-cards);
-      margin-left: -1.25rem;
+      margin-left: (-$space-between-cards);
     }
   }
 }
@@ -282,7 +311,7 @@
 @include media-breakpoint-up(sm) {
   .card-columns {
     column-count: 3;
-    column-gap: 1.25rem;
+    column-gap: $card-columns-sm-up-column-gap;
 
     .card {
       display: inline-block;

src/sass/bootstrap4/_carousel.scss

@@ -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
@@ -125,19 +125,19 @@
     top: 50%;
     z-index: 5;
     display: inline-block;
-    width: 20px;
+    width: $carousel-icon-width;
-    height: 20px;
+    height: $carousel-icon-width;
-    margin-top: -10px;
+    margin-top: -($carousel-icon-width / 2);
     font-family: serif;
     line-height: 1;
   }
   .icon-prev {
     left: 50%;
-    margin-left: -10px;
+    margin-left: -($carousel-icon-width / 2);
   }
   .icon-next {
     right: 50%;
-    margin-right: -10px;
+    margin-right: -($carousel-icon-width / 2);
   }
 
   .icon-prev {
@@ -163,16 +163,16 @@
   bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 60%;
+  width: $carousel-indicators-width;
   padding-left: 0;
-  margin-left: -30%;
+  margin-left: -($carousel-indicators-width / 2);
   text-align: center;
   list-style: none;
 
   li {
     display: inline-block;
-    width: 10px;
+    width: $carousel-indicator-size;
-    height: 10px;
+    height: $carousel-indicator-size;
     margin: 1px;
     text-indent: -999px;
     cursor: pointer;
@@ -183,11 +183,12 @@
     // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     background-color: rgba(0,0,0,0); // IE9
     border: 1px solid $carousel-indicator-border-color;
-    border-radius: 10px;
+    border-radius: $carousel-indicator-size;
   }
+
   .active {
-    width: 12px;
+    width: $carousel-indicator-active-size;
-    height: 12px;
+    height: $carousel-indicator-active-size;
     margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
@@ -200,9 +201,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: 15%;
+  right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
-  left: 15%;
+  left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
@@ -225,23 +226,23 @@
   .carousel-control {
     .icon-prev,
     .icon-next {
-      width: 30px;
+      width: $carousel-control-sm-up-size;
-      height: 30px;
+      height: $carousel-control-sm-up-size;
-      margin-top: -15px;
+      margin-top: -($carousel-control-sm-up-size / 2);
-      font-size: 30px;
+      font-size: $carousel-control-sm-up-size;
     }
     .icon-prev {
-      margin-left: -15px;
+      margin-left: -($carousel-control-sm-up-size / 2);
     }
     .icon-next {
-      margin-right: -15px;
+      margin-right: -($carousel-control-sm-up-size / 2);
     }
   }
 
   // Show and left align the captions
   .carousel-caption {
-    right: 20%;
+    right: ((100% - $carousel-caption-sm-up-width) / 2);
-    left: 20%;
+    left: ((100% - $carousel-caption-sm-up-width) / 2);
     padding-bottom: 30px;
   }
 

src/sass/bootstrap4/_close.scss

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

src/sass/bootstrap4/_code.scss

@@ -8,8 +8,8 @@ samp {
 
 // Inline code
 code {
-  padding: .2rem .4rem;
+  padding: $code-padding-y $code-padding-x;
-  font-size: 90%;
+  font-size: $code-font-size;
   color: $code-color;
   background-color: $code-bg;
   @include border-radius($border-radius);
@@ -17,12 +17,12 @@ code {
 
 // User input typically entered via keyboard
 kbd {
-  padding: .2rem .4rem;
+  padding: $code-padding-y $code-padding-x;
-  font-size: 90%;
+  font-size: $code-font-size;
   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;
@@ -37,8 +37,7 @@ pre {
   display: block;
   margin-top: 0;
   margin-bottom: 1rem;
-  font-size: 90%;
+  font-size: $code-font-size;
-  line-height: $line-height;
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags

src/sass/bootstrap4/_custom-forms.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable PropertyCount
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // http://useiconic.com/open
@@ -7,38 +9,49 @@
 //
 // Base class takes care of all the key behavioral aspects.
 
-.c-input {
+.custom-control {
   position: relative;
   display: inline;
-  padding-left: 1.5rem;
+  padding-left: $custom-control-gutter;
-  color: #555;
   cursor: pointer;
 
-  > input {
+  + .custom-control {
-    position: absolute;
+    margin-left: $custom-control-spacer-x;
-    z-index: -1; // Put the input behind the label so it doesn't overlay text
+  }
-    opacity: 0;
+}
 
-    &:checked ~ .c-indicator {
+.custom-control-input {
-      color: #fff;
+  position: absolute;
-      background-color: #0074d9;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
-      @include box-shadow(none);
+  opacity: 0;
-    }
 
-    &:focus ~ .c-indicator {
+  &:checked ~ .custom-control-indicator {
-      // the mixin is not used here to make sure there is feedback
+    color: $custom-control-checked-indicator-color;
-      box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
+    background-color: $custom-control-checked-indicator-bg;
-    }
+    @include box-shadow($custom-control-checked-indicator-box-shadow);
-
-    &:active ~ .c-indicator {
-      color: #fff;
-      background-color: #84c6ff;
-      @include box-shadow(none);
-    }
   }
 
-  + .c-input {
+  &:focus ~ .custom-control-indicator {
-    margin-left: 1rem;
+    // the mixin is not used here to make sure there is feedback
+    box-shadow: $custom-control-focus-indicator-box-shadow;
+  }
+
+  &:active ~ .custom-control-indicator {
+    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: $custom-control-disabled-cursor;
+      background-color: $custom-control-disabled-indicator-bg;
+    }
+
+    ~ .custom-control-description {
+      color: $custom-control-disabled-description-color;
+      cursor: $custom-control-disabled-cursor;
+    }
   }
 }
 
@@ -46,42 +59,39 @@
 //
 // Generates a shadow element to create our makeshift checkbox/radio background.
 
-.c-indicator {
+.custom-control-indicator {
   position: absolute;
-  top: 0;
+  top: .0625rem;
   left: 0;
   display: block;
-  width: 1rem;
+  width: $custom-control-indicator-size;
-  height: 1rem;
+  height: $custom-control-indicator-size;
-  font-size: 65%;
+  pointer-events: none;
-  line-height: 1rem;
-  color: #eee;
-  text-align: center;
   user-select: none;
-  background-color: #eee;
+  background-color: $custom-control-indicator-bg;
   background-repeat: no-repeat;
   background-position: center center;
-  background-size: 50% 50%;
+  background-size: $custom-control-indicator-bg-size;
-  @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
+  @include box-shadow($custom-control-indicator-box-shadow);
 }
 
 // Checkboxes
 //
 // Tweak just a few things for checkboxes.
 
-.c-checkbox {
+.custom-checkbox {
-  .c-indicator {
+  .custom-control-indicator {
-    border-radius: .25rem;
+    @include border-radius($custom-checkbox-radius);
   }
 
-  input:checked ~ .c-indicator {
+  .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
+    background-image: $custom-checkbox-checked-icon;
   }
 
-  input:indeterminate ~ .c-indicator {
+  .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: #0074d9;
+    background-color: $custom-checkbox-indeterminate-bg;
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
+    background-image: $custom-checkbox-indeterminate-icon;
-    @include box-shadow(none);
+    @include box-shadow($custom-checkbox-indeterminate-box-shadow);
   }
 }
 
@@ -89,13 +99,13 @@
 //
 // Tweak just a few things for radios.
 
-.c-radio {
+.custom-radio {
-  .c-indicator {
+  .custom-control-indicator {
-    border-radius: 50%;
+    border-radius: $custom-radio-radius;
   }
 
-  input:checked ~ .c-indicator {
+  .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
+    background-image: $custom-radio-checked-icon;
   }
 }
 
@@ -105,17 +115,17 @@
 // By default radios and checkboxes are `inline-block` with no additional spacing
 // set. Use these optional classes to tweak the layout.
 
-.c-inputs-stacked {
+.custom-controls-stacked {
-  .c-input {
+  .custom-control {
     display: inline;
 
     &::after {
       display: block;
-      margin-bottom: .25rem;
+      margin-bottom: $custom-control-spacer-y;
       content: "";
     }
 
-    + .c-input {
+    + .custom-control {
       margin-left: 0;
     }
   }
@@ -129,25 +139,42 @@
 //
 // Includes IE9-specific hacks (noted by ` \9`).
 
-.c-select {
+.custom-select {
   display: inline-block;
   max-width: 100%;
-  padding: .375rem 1.75rem .375rem .75rem;
+  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-  padding-right: .75rem \9;
+  padding-right: $custom-select-padding-x \9;
-  color: $input-color;
+  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;
+  background-size: $custom-select-bg-size;
-  border: $input-btn-border-width solid $input-border-color;
+  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);
+
+    &::-ms-value {
+      // For visual consistency with other platforms/browsers,
+      // supress the default white text on blue background highlight given to
+      // the selected option text when the (still closed) <select> receives focus
+      // in IE and (under certain conditions) Edge.
+      // See https://github.com/twbs/bootstrap/issues/19398.
+      color: $input-color;
+      background-color: $input-bg;
+    }
+  }
+
+  &:disabled {
+    color: $custom-select-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: $custom-select-disabled-bg;
   }
 
   // Hides the default caret in IE11
@@ -156,15 +183,15 @@
   }
 }
 
-.c-select-sm {
+.custom-select-sm {
-  padding-top: 3px;
+  padding-top: $custom-select-padding-y;
-  padding-bottom: 3px;
+  padding-bottom: $custom-select-padding-y;
-  font-size: 12px;
+  font-size: $custom-select-sm-font-size;
 
-  &:not([multiple]) {
+  // &:not([multiple]) {
-    height: 26px;
+  //   height: 26px;
-    min-height: 26px;
+  //   min-height: 26px;
-  }
+  // }
 }
 
 
@@ -172,55 +199,67 @@
 //
 // Custom file input.
 
-.file {
+.custom-file {
   position: relative;
   display: inline-block;
-  height: 2.5rem;
+  max-width: 100%;
+  height: $custom-file-height;
   cursor: pointer;
 }
-.file input {
+
-  min-width: 14rem;
+.custom-file-input {
+  min-width: $custom-file-width;
+  max-width: 100%;
   margin: 0;
   filter: alpha(opacity = 0);
   opacity: 0;
+
+  &:focus ~ .custom-file-control {
+    @include box-shadow($custom-file-focus-box-shadow);
+  }
 }
-.file-custom {
+
+.custom-file-control {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: 5;
-  height: 2.5rem;
+  height: $custom-file-height;
-  padding: .5rem 1rem;
+  padding: $custom-file-padding-x $custom-file-padding-y;
-  line-height: 1.5;
+  line-height: $custom-file-line-height;
-  color: #555;
+  color: $custom-file-color;
   user-select: none;
-  background-color: #fff;
+  background-color: $custom-file-bg;
-  border: $input-btn-border-width solid #ddd;
+  border: $custom-file-border-width solid $custom-file-border-color;
-  border-radius: .25rem;
+  @include border-radius($custom-file-border-radius);
-  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
+  @include box-shadow($custom-file-box-shadow);
-}
-.file-custom::after {
-  content: "Choose file...";
-}
-.file-custom::before {
-  position: absolute;
-  top: -.075rem;
-  right: -.075rem;
-  bottom: -.075rem;
-  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;
-}
 
-// Focus state
+  @each $lang, $text in map-get($custom-file-text, placeholder) {
-.file input:focus ~ .file-custom {
+    &:lang(#{$lang})::after {
-  @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
+      content: $text;
+    }
+  }
+
+  &::before {
+    position: absolute;
+    top: -$custom-file-border-width;
+    right: -$custom-file-border-width;
+    bottom: -$custom-file-border-width;
+    z-index: 6;
+    display: block;
+    height: $custom-file-height;
+    padding: $custom-file-padding-x $custom-file-padding-y;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    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);
+  }
+
+  @each $lang, $text in map-get($custom-file-text, button-label) {
+    &:lang(#{$lang})::before {
+      content: $text;
+    }
+  }
 }

src/sass/bootstrap4/_custom.scss

@@ -0,0 +1,4 @@
+// Bootstrap overrides
+//
+// Copy variables from `_variables.scss` to this file to override default values
+// without modifying source files.

src/sass/bootstrap4/_dropdown.scss

@@ -10,8 +10,7 @@
     display: inline-block;
     width: 0;
     height: 0;
-    margin-right: .25rem;
+    margin-left: $caret-width;
-    margin-left: .25rem;
     vertical-align: middle;
     content: "";
     border-top: $caret-width solid;
@@ -42,9 +41,9 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   float: left;
-  min-width: 160px;
+  min-width: $dropdown-min-width;
-  padding: 5px 0;
+  padding: $dropdown-padding-y 0;
-  margin: 2px 0 0; // override default ul
+  margin: $dropdown-margin-top 0 0; // override default ul
   font-size: $font-size-base;
   color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -53,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
@@ -67,10 +66,9 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: 3px 20px;
+  padding: 3px $dropdown-item-padding-x;
   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
@@ -133,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;
@@ -147,9 +140,8 @@
 // Dropdown section headers
 .dropdown-header {
   display: block;
-  padding: 3px 20px;
+  padding: $dropdown-padding-y $dropdown-item-padding-x;
   font-size: $font-size-sm;
-  line-height: $line-height;
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
@@ -161,13 +153,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ($zindex-dropdown - 10);
+  z-index: $zindex-dropdown-backdrop;
-}
-
-// Right aligned dropdowns
-.pull-right > .dropdown-menu {
-  right: 0;
-  left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
@@ -188,6 +174,6 @@
   .dropdown-menu {
     top: auto;
     bottom: 100%;
-    margin-bottom: 2px;
+    margin-bottom: $dropdown-margin-top;
   }
 }

src/sass/bootstrap4/_forms.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 //
 // Textual form controls
 //
@@ -9,25 +11,18 @@
   // height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
-  line-height: $line-height;
+  line-height: $input-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.
   background-image: none;
+  background-clip: padding-box;
   border: $input-btn-border-width solid $input-border-color;
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius);
   @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 +56,21 @@
   }
 }
 
+select.form-control {
+  &:not([size]):not([multiple]) {
+    height: $input-height;
+  }
+
+  &:focus::-ms-value {
+    // Suppress the nested default white text on blue background highlight given to
+    // the selected option text when the (still closed) <select> receives focus
+    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+    // match the appearance of the native widget.
+    // See https://github.com/twbs/bootstrap/issues/19398.
+    color: $input-color;
+    background-color: $input-bg;
+  }
+}
 
 // Make file inputs better match text inputs by forcing them to new lines.
 .form-control-file,
@@ -75,42 +85,36 @@
 
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
-.form-control-label {
+.col-form-label {
-  padding: $input-padding-y $input-padding-x;
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
   margin-bottom: 0; // Override the `<label>` default
 }
 
+.col-form-label-lg {
+  padding-top: $input-padding-y-lg;
+  padding-bottom: $input-padding-y-lg;
+  font-size: $font-size-lg;
+}
+
+.col-form-label-sm {
+  padding-top: $input-padding-y-sm;
+  padding-bottom: $input-padding-y-sm;
+  font-size: $font-size-sm;
+}
 
-// Todo: clear this up
 
-// Special styles for iOS temporal inputs
 //
-// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// Legends
-// text within the input to become vertically misaligned. As a workaround, we
-// 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`.
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+// For use with horizontal and inline forms, when you need the legend text to
-  input[type="date"],
+// be the same size as regular labels, and to align with the form controls.
-  input[type="time"],
+.col-form-legend {
-  input[type="datetime-local"],
+  padding-top: $input-padding-y;
-  input[type="month"] {
+  padding-bottom: $input-padding-y;
-    &.form-control {
+  margin-bottom: 0;
-      line-height: $input-height;
+  font-size: $font-size-base;
-    }
-
-    &.input-sm,
-    .input-group-sm &.form-control {
-      line-height: $input-height-sm;
-    }
-
-    &.input-lg,
-    .input-group-lg &.form-control {
-      line-height: $input-height-lg;
-    }
-  }
 }
 
 
@@ -144,21 +148,29 @@
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  // height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
-  line-height: $line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
+select.form-control-sm {
+  &:not([size]):not([multiple]) {
+    height: $input-height-sm;
+  }
+}
+
 .form-control-lg {
-  // height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
-  line-height: $line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
+select.form-control-lg {
+  &:not([size]):not([multiple]) {
+    height: $input-height-lg;
+  }
+}
+
 
 // Form groups
 //
@@ -169,103 +181,84 @@
   margin-bottom: $form-group-margin-bottom;
 }
 
+.form-text {
+  display: block;
+  margin-top: ($spacer * .25);
+}
+
 
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
 
-.radio,
+.form-check {
-.checkbox {
   position: relative;
   display: block;
-  // margin-top:    ($spacer * .75);
   margin-bottom: ($spacer * .75);
 
-  label {
+  // Move up sibling radios or checkboxes for tighter spacing
-    padding-left: 1.25rem;
+  + .form-check {
-    margin-bottom: 0;
+    margin-top: -.25rem;
-    font-weight: normal;
+  }
-    cursor: pointer;
 
-    // When there's no labels, don't position the input.
+  &.disabled {
-    input:only-child {
+    .form-check-label {
-      position: static;
+      color: $text-muted;
+      cursor: $cursor-disabled;
     }
   }
 }
-.radio input[type="radio"],
+
-.radio-inline input[type="radio"],
+.form-check-label {
-.checkbox input[type="checkbox"],
+  padding-left: 1.25rem;
-.checkbox-inline input[type="checkbox"] {
+  margin-bottom: 0; // Override default `<label>` bottom margin
-  position: absolute;
+  cursor: pointer;
-  margin-top: .25rem;
-  // margin-top: 4px \9;
-  margin-left: -1.25rem;
 }
 
-.radio + .radio,
+.form-check-input {
-.checkbox + .checkbox {
+  position: absolute;
-  // Move up sibling radios or checkboxes for tighter spacing
+  margin-top: .25rem;
-  margin-top: -.25rem;
+  margin-left: -1.25rem;
+
+  &:only-child {
+    position: static;
+  }
 }
 
 // Radios and checkboxes on same line
-.radio-inline,
+.form-check-inline {
-.checkbox-inline {
   position: relative;
   display: inline-block;
   padding-left: 1.25rem;
-  margin-bottom: 0;
+  margin-bottom: 0; // Override default `<label>` bottom margin
-  font-weight: normal;
   vertical-align: middle;
   cursor: pointer;
-}
-.radio-inline + .radio-inline,
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: .75rem;
-}
 
-// Apply same disabled cursor tweak as for inputs
+  + .form-check-inline {
-// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+    margin-left: .75rem;
-//
+  }
-// Note: Neither radios nor checkboxes can be readonly.
+
-input[type="radio"],
-input[type="checkbox"] {
-  &:disabled,
   &.disabled {
     cursor: $cursor-disabled;
   }
 }
-// These classes are used directly on <label>s
-.radio-inline,
-.checkbox-inline {
-  &.disabled {
-    cursor: $cursor-disabled;
-  }
-}
-// These classes are used on elements with <label> descendants
-.radio,
-.checkbox {
-  &.disabled {
-    label {
-      cursor: $cursor-disabled;
-    }
-  }
-}
 
 
 // Form control feedback states
 //
 // Apply contextual and semantic states to individual form controls.
 
+.form-control-feedback {
+  margin-top: ($spacer * .25);
+}
+
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
   padding-right: ($input-padding-x * 3);
   background-repeat: no-repeat;
-  background-position: center right ($input-height * .25);
+  background-position: center right ($input-height / 4);
-  background-size: ($input-height * .65) ($input-height * .65);
+  background-size: ($input-height / 2) ($input-height / 2);
 }
 
 // Form validation states
@@ -273,7 +266,7 @@ input[type="checkbox"] {
   @include form-control-validation($brand-success);
 
   .form-control-success {
-    background-image: url($form-icon-success);
+    background-image: $form-icon-success;
   }
 }
 
@@ -281,7 +274,7 @@ input[type="checkbox"] {
   @include form-control-validation($brand-warning);
 
   .form-control-warning {
-    background-image: url($form-icon-warning);
+    background-image: $form-icon-warning;
   }
 }
 
@@ -289,89 +282,11 @@ input[type="checkbox"] {
   @include form-control-validation($brand-danger);
 
   .form-control-danger {
-    background-image: url($form-icon-danger);
+    background-image: $form-icon-danger;
   }
 }
 
 
-
-
-// .form-control-success {
-//   background-image: url("#{$form-icon-success}");
-//   border-color: $brand-success;
-// }
-//
-// .form-control-warning {
-//   background-image: url("#{$form-icon-warning}");
-//   border-color: $brand-warning;
-// }
-//
-// .form-control-error {
-//   background-image: url("#{$form-icon-danger}");
-//   border-color: $brand-danger;
-// }
-
-
-// .has-feedback {
-//   // Enable absolute positioning
-//   position: relative;
-//
-//   // Ensure icons don't overlap text
-//   .form-control {
-//     padding-right: ($input-height * 1.25);
-//   }
-// }
-// // Feedback icon
-// .form-control-feedback {
-//   position: absolute;
-//   top: 0;
-//   right: 0;
-//   z-index: 2; // Ensure icon is above input groups
-//   display: block;
-//   width: $input-height;
-//   height: $input-height;
-//   line-height: $input-height;
-//   text-align: center;
-//   pointer-events: none;
-// }
-// .input-lg + .form-control-feedback,
-// .input-group-lg + .form-control-feedback {
-//   width: $input-height-lg;
-//   height: $input-height-lg;
-//   line-height: $input-height-lg;
-// }
-// .input-sm + .form-control-feedback,
-// .input-group-sm + .form-control-feedback {
-//   width: $input-height-sm;
-//   height: $input-height-sm;
-//   line-height: $input-height-sm;
-// }
-//
-// // Form validation states
-// .has-success {
-//   @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
-// }
-// .has-warning {
-//   @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
-// }
-// .has-danger {
-//   @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
-// }
-//
-// // Reposition feedback icon if input has visible label above
-// .has-feedback label {
-//
-//   ~ .form-control-feedback {
-//     // TODO: redo this since we nuked the `$line-height-computed`
-//     top: 0; // Height of the `label` and its margin
-//   }
-//
-//   &.sr-only ~ .form-control-feedback {
-//     top: 0;
-//   }
-// }
-
-
 // Inline forms
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -427,19 +342,16 @@ input[type="checkbox"] {
 
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
-    .radio,
+    .form-check {
-    .checkbox {
       display: inline-block;
       margin-top: 0;
       margin-bottom: 0;
       vertical-align: middle;
-
-      label {
-        padding-left: 0;
-      }
     }
-    .radio input[type="radio"],
+    .form-check-label {
-    .checkbox input[type="checkbox"] {
+      padding-left: 0;
+    }
+    .form-check-input {
       position: relative;
       margin-left: 0;
     }

src/sass/bootstrap4/_grid.scss

@@ -2,23 +2,24 @@
 //
 // Set the container width, and override it for fixed navbars in media queries.
 
-.container {
+@if $enable-grid-classes {
-  @include make-container();
+  .container {
-  @include make-container-max-widths();
+    @include make-container();
-
+    @include make-container-max-widths();
+  }
 }
 
-
 // Fluid container
 //
 // Utilizes the mixin meant for fixed width containers, but without any defined
 // width for fluid, full width layouts.
 
-.container-fluid {
+@if $enable-grid-classes {
-  @include make-container();
+  .container-fluid {
+    @include make-container();
+  }
 }
 
-
 // Row
 //
 // Rows contain and clear the floats of your columns.
@@ -29,7 +30,6 @@
   }
 }
 
-
 // Columns
 //
 // Common styles for small and large grid columns
@@ -37,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; }
-    }
-  }
-}

src/sass/bootstrap4/_images.scss

@@ -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;
+  @include 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);
@@ -48,6 +47,6 @@
 }
 
 .figure-caption {
-  font-size: 90%;
+  font-size: $figure-caption-font-size;
   color: $gray-light;
 }

src/sass/bootstrap4/_input-group.scss

@@ -4,6 +4,7 @@
 
 .input-group {
   position: relative;
+  width: 100%;
 
   @if $enable-flex {
     display: flex;
@@ -39,9 +40,7 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if $enable-flex {
+  @if not $enable-flex {
-    // do nothing
-  } @else {
     display: table-cell;
   }
 
@@ -52,9 +51,7 @@
 
 .input-group-addon,
 .input-group-btn {
-  @if $enable-flex {
+  @if not $enable-flex {
-    // do nothing
-  } @else {
     width: 1%;
   }
   white-space: nowrap;
@@ -85,9 +82,10 @@
 
 .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;
+  line-height: $input-line-height;
   color: $input-color;
   text-align: center;
   background-color: $input-group-addon-bg;
@@ -106,11 +104,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
 }
 
 
@@ -118,32 +118,31 @@
 // Reset rounded corners
 //
 
-.input-group .form-control:first-child,
+.input-group .form-control:not(:last-child),
-.input-group-addon:first-child,
+.input-group-addon:not(:last-child),
-.input-group-btn:first-child > .btn,
+.input-group-btn:not(:last-child) > .btn,
-.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:not(:last-child) > .btn-group > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:not(:last-child) > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
   @include border-right-radius(0);
 }
-.input-group-addon:first-child {
+.input-group-addon:not(:last-child) {
   border-right: 0;
 }
-.input-group .form-control:last-child,
+.input-group .form-control:not(:first-child),
-.input-group-addon:last-child,
+.input-group-addon:not(:first-child),
-.input-group-btn:last-child > .btn,
+.input-group-btn:not(:first-child) > .btn,
-.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:not(:first-child) > .btn-group > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:not(:first-child) > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:not(:last-child) > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
   @include border-left-radius(0);
 }
-.input-group-addon:last-child {
+.form-control + .input-group-addon:not(:first-child) {
   border-left: 0;
 }
 
-
 //
 // Button input groups
 //
@@ -169,13 +168,13 @@
   }
 
   // Negative margin to only have a single, shared border between the two
-  &:first-child {
+  &:not(:last-child) {
     > .btn,
     > .btn-group {
       margin-right: (-$input-btn-border-width);
     }
   }
-  &:last-child {
+  &:not(:first-child) {
     > .btn,
     > .btn-group {
       z-index: 2;

src/sass/bootstrap4/_list-group.scss

@@ -16,67 +16,21 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: .75rem 1.25rem;
+  padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
   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
 //
@@ -132,7 +115,7 @@ button.list-group-item {
 
 .list-group-item-heading {
   margin-top: 0;
-  margin-bottom: 5px;
+  margin-bottom: $list-group-item-heading-margin-bottom;
 }
 .list-group-item-text {
   margin-bottom: 0;

src/sass/bootstrap4/_media.scss

@@ -14,7 +14,7 @@
   }
 } @else {
   .media {
-    margin-top: 15px;
+    margin-top: $media-margin-top;
 
     &:first-child {
       margin-top: 0;
@@ -23,7 +23,6 @@
   .media,
   .media-body {
     overflow: hidden;
-    zoom: 1;
   }
   .media-body {
     width: 10000px;
@@ -62,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;
 }
 
 
@@ -76,7 +75,7 @@
 
 .media-heading {
   margin-top: 0;
-  margin-bottom: 5px;
+  margin-bottom: $media-heading-margin-bottom;
 }
 
 

src/sass/bootstrap4/_mixins.scss

@@ -18,7 +18,7 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/label";
+@import "mixins/tag";
 @import "mixins/reset-filter";
 @import "mixins/resize";
 @import "mixins/screen-reader";
@@ -48,7 +48,6 @@
 
 // // Layout
 @import "mixins/clearfix";
-@import "mixins/center-block";
 // @import "mixins/navbar-align";
 @import "mixins/grid-framework";
 @import "mixins/grid";

src/sass/bootstrap4/_modal.scss

@@ -40,7 +40,7 @@
 .modal-dialog {
   position: relative;
   width: auto;
-  margin: 10px;
+  margin: $modal-dialog-margin;
 }
 
 // Actual modal
@@ -48,9 +48,9 @@
   position: relative;
   background-color: $modal-content-bg;
   background-clip: padding-box;
-  border: 1px solid $modal-content-border-color;
+  border: $modal-content-border-width solid $modal-content-border-color;
-  border-radius: $border-radius-lg;
+  @include border-radius($border-radius-lg);
-  @include box-shadow(0 3px 9px rgba(0,0,0,.5));
+  @include box-shadow($modal-content-xs-box-shadow);
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -74,7 +74,7 @@
 // Top section of the modal w/ title and dismiss
 .modal-header {
   padding: $modal-title-padding;
-  border-bottom: 1px solid $modal-header-border-color;
+  border-bottom: $modal-header-border-width solid $modal-header-border-color;
   @include clearfix;
 }
 // Close icon
@@ -99,22 +99,8 @@
 .modal-footer {
   padding: $modal-inner-padding;
   text-align: right; // right align buttons
-  border-top: 1px solid $modal-footer-border-color;
+  border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  .btn + .btn {
-    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-    margin-left: 5px;
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-  // and override it for block buttons as well
-  .btn-block + .btn-block {
-    margin-left: 0;
-  }
 }
 
 // Measure scrollbar width for padding body during modal show/hide
@@ -130,17 +116,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;
+    margin: $modal-dialog-sm-up-margin-y 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 { max-width: $modal-sm; }
-  .modal-sm { width: $modal-sm; }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(lg) {
-  .modal-lg { width: $modal-lg; }
+  .modal-lg { max-width: $modal-lg; }
 }

src/sass/bootstrap4/_nav.scss

@@ -23,7 +23,7 @@
     @include plain-hover-focus {
       color: $nav-disabled-link-hover-color;
       cursor: $cursor-disabled;
-      background-color: transparent;
+      background-color: $nav-disabled-link-hover-bg;
     }
   }
 }
@@ -38,7 +38,7 @@
 
   .nav-item + .nav-item,
   .nav-link + .nav-link {
-    margin-left: 1rem;
+    margin-left: $nav-item-inline-spacer;
   }
 }
 
@@ -48,24 +48,24 @@
 //
 
 .nav-tabs {
-  border-bottom: 1px solid $nav-tabs-border-color;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
   @include clearfix();
 
   .nav-item {
     float: left;
     // Make the list-items overlay the bottom border
-    margin-bottom: -1px;
+    margin-bottom: -$nav-tabs-border-width;
 
     + .nav-item {
-      margin-left: .2rem;
+      margin-left: $nav-item-margin;
     }
   }
 
   .nav-link {
     display: block;
     padding: $nav-link-padding;
-    border: $nav-tabs-link-border-width solid transparent;
+    border: $nav-tabs-border-width solid transparent;
-    @include border-radius($border-radius $border-radius 0 0);
+    @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus {
       border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
@@ -88,6 +88,13 @@
       border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
     }
   }
+
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-top: -$nav-tabs-border-width;
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
 }
 
 
@@ -102,7 +109,7 @@
     float: left;
 
     + .nav-item {
-      margin-left: .2rem;
+      margin-left: $nav-item-margin;
     }
   }
 
@@ -115,9 +122,9 @@
   .nav-link.active,
   .nav-item.open .nav-link {
     @include plain-hover-focus {
-      color: $component-active-color;
+      color: $nav-pills-active-link-color;
       cursor: default;
-      background-color: $component-active-bg;
+      background-color: $nav-pills-active-link-bg;
     }
   }
 }
@@ -128,7 +135,7 @@
     float: none;
 
     + .nav-item {
-      margin-top: .2rem;
+      margin-top: $nav-item-margin;
       margin-left: 0;
     }
   }
@@ -148,15 +155,3 @@
     display: block;
   }
 }
-
-
-//
-// Dropdowns
-//
-
-.nav-tabs .dropdown-menu {
-  // Make dropdown border overlap tab border
-  margin-top: -1px;
-  // Remove the top rounded corners here since there is a hard edge above the menu
-  @include border-top-radius(0);
-}

src/sass/bootstrap4/_navbar.scss

@@ -5,7 +5,7 @@
 
 .navbar {
   position: relative;
-  padding: $navbar-padding-vertical $navbar-padding-horizontal;
+  padding: $navbar-padding-y $navbar-padding-x;
   @include clearfix;
 
   @include media-breakpoint-up(sm) {
@@ -69,8 +69,8 @@
 
 .navbar-brand {
   float: left;
-  padding-top:    .25rem;
+  padding-top:    $navbar-brand-padding-y;
-  padding-bottom: .25rem;
+  padding-bottom: $navbar-brand-padding-y;
   margin-right: 1rem;
   font-size: $font-size-lg;
 
@@ -86,11 +86,11 @@
 
 .navbar-divider {
   float: left;
-  width: 1px;
+  width: $border-width;
   padding-top: .425rem;
   padding-bottom: .425rem;
-  margin-right: $navbar-padding-horizontal;
+  margin-right: $navbar-padding-x;
-  margin-left:  $navbar-padding-horizontal;
+  margin-left:  $navbar-padding-x;
   overflow: hidden;
 
   &::before {
@@ -117,26 +117,6 @@
   }
 }
 
-// Custom override for
-.navbar-toggleable {
-  &-xs {
-    @include media-breakpoint-up(sm) {
-      display: block !important;
-    }
-  }
-  &-sm {
-    @include media-breakpoint-up(md) {
-      display: block !important;
-    }
-  }
-  &-md {
-    @include media-breakpoint-up(lg) {
-      display: block !important;
-    }
-  }
-}
-
-
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
@@ -228,3 +208,51 @@
     background-color: rgba(255,255,255,.075);
   }
 }
+
+
+// Navbar toggleable
+//
+// Custom override for collapse plugin in navbar.
+
+// scss-lint:disable ImportantRule
+.navbar-toggleable {
+  &-xs {
+    @include clearfix;
+    @include media-breakpoint-down(xs) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(sm) {
+      display: block !important;
+    }
+  }
+
+  &-sm {
+    @include clearfix;
+    @include media-breakpoint-down(sm) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(md) {
+      display: block !important;
+    }
+  }
+
+  &-md {
+    @include clearfix;
+    @include media-breakpoint-down(md) {
+      .navbar-nav .nav-item {
+        float: none;
+        margin-left: 0;
+      }
+    }
+    @include media-breakpoint-up(lg) {
+      display: block !important;
+    }
+  }
+}
+// scss-lint:enable ImportantRule

src/sass/bootstrap4/_normalize.scss

@@ -1,9 +1,8 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
 
 //
-// 1. Set default font family to sans-serif.
+// 1. Change the default font family in all browsers (opinionated).
-// 2. Prevent iOS and IE text size adjust after device orientation change,
+// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
-//    without disabling user zoom.
 //
 
 html {
@@ -13,7 +12,7 @@ html {
 }
 
 //
-// Remove default margin.
+// Remove the margin in all browsers (opinionated).
 //
 
 body {
@@ -24,44 +23,39 @@ body {
 // ==========================================================================
 
 //
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Add the correct display in IE 9-.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// 1. Add the correct display in Edge, IE, and Firefox.
-// and Firefox.
+// 2. Add the correct display in IE.
-// Correct `block` display not defined for `main` in IE 11.
 //
 
 article,
 aside,
-details,
+details, // 1
 figcaption,
 figure,
 footer,
 header,
-hgroup,
+main, // 2
-main,
 menu,
 nav,
 section,
-summary {
+summary { // 1
   display: block;
 }
 
 //
-// 1. Correct `inline-block` display not defined in IE 8/9.
+// Add the correct display in IE 9-.
-// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 //
 
 audio,
 canvas,
 progress,
 video {
-  display: inline-block; // 1
+  display: inline-block;
-  vertical-align: baseline; // 2
 }
 
 //
-// Prevent modern browsers from displaying `audio` without controls.
+// Add the correct display in iOS 4-7.
-// Remove excess height in iOS 5 devices.
 //
 
 audio:not([controls]) {
@@ -70,12 +64,20 @@ audio:not([controls]) {
 }
 
 //
-// Address `[hidden]` styling not present in IE 8/9/10.
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 //
 
-[hidden],
+progress {
-template {
+  vertical-align: baseline;
+}
+
+//
+// Add the correct display in IE 10-.
+// 1. Add the correct display in IE.
+//
+
+template, // 2
+[hidden] {
   display: none;
 }
 
@@ -83,7 +85,7 @@ template {
 // ==========================================================================
 
 //
-// Remove the gray background color from active links in IE 10.
+// Remove the gray background on active links in IE 10.
 //
 
 a {
@@ -91,41 +93,49 @@ a {
 }
 
 //
-// Improve readability of focused elements when they are also in an
+// Remove the outline on focused links when they are also active or hovered
-// active/hover state.
+// in all browsers (opinionated).
 //
 
-a {
+a:active,
-  &:active {
+a:hover {
-    outline: 0;
+  outline-width: 0;
-  }
-  &:hover {
-    outline: 0;
-  }
 }
 
 // Text-level semantics
 // ==========================================================================
 
 //
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 //
 
 abbr[title] {
-  border-bottom: 1px dotted;
+  border-bottom: none; // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
 }
 
 //
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 //
 
 b,
 strong {
-  font-weight: bold;
+  font-weight: inherit;
 }
 
 //
-// Address styling not present in Safari and Chrome.
+// Add the correct font weight in Chrome, Edge, and Safari.
+//
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+//
+// Add the correct font style in Android 4.3-.
 //
 
 dfn {
@@ -133,8 +143,8 @@ dfn {
 }
 
 //
-// Address variable `h1` font-size and margin within `section` and `article`
+// Correct the font size and margin on `h1` elements within `section` and
-// contexts in Firefox 4+, Safari, and Chrome.
+// `article` contexts in Chrome, Firefox, and Safari.
 //
 
 h1 {
@@ -143,16 +153,16 @@ h1 {
 }
 
 //
-// Address styling not present in IE 8/9.
+// Add the correct background and color in IE 9-.
 //
 
 mark {
-  background: #ff0;
+  background-color: #ff0;
   color: #000;
 }
 
 //
-// Address inconsistent and variable font size in all browsers.
+// Add the correct font size in all browsers.
 //
 
 small {
@@ -160,7 +170,8 @@ small {
 }
 
 //
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
 //
 
 sub,
@@ -171,27 +182,27 @@ sup {
   vertical-align: baseline;
 }
 
-sup {
-  top: -0.5em;
-}
-
 sub {
   bottom: -0.25em;
 }
 
+sup {
+  top: -0.5em;
+}
+
 // Embedded content
 // ==========================================================================
 
 //
-// Remove border when inside `a` element in IE 8/9/10.
+// Remove the border on images inside links in IE 10-.
 //
 
 img {
-  border: 0;
+  border-style: none;
 }
 
 //
-// Correct overflow not hidden in IE 9/10/11.
+// Hide the overflow in IE.
 //
 
 svg:not(:root) {
@@ -202,7 +213,20 @@ svg:not(:root) {
 // ==========================================================================
 
 //
-// Address margin not present in IE 8/9 and Safari.
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; // 1
+  font-size: 1em; // 2
+}
+
+//
+// Add the correct margin in IE 8.
 //
 
 figure {
@@ -210,106 +234,106 @@ figure {
 }
 
 //
-// Address differences between Firefox and other browsers.
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
 //
 
 hr {
-  box-sizing: content-box;
+  box-sizing: content-box; // 1
-  height: 0;
+  height: 0; // 1
-}
+  overflow: visible; // 2
-
-//
-// Contain overflow in all browsers.
-//
-
-pre {
-  overflow: auto;
-}
-
-//
-// Address odd `em`-unit font size rendering in all browsers.
-//
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
 }
 
 // Forms
 // ==========================================================================
 
 //
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// Change font properties to `inherit` in all browsers (opinionated).
-// styling of `select`, unless a `border` property is set.
-//
-
-//
-// 1. Correct color not being inherited.
-//    Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 //
 
 button,
 input,
-optgroup,
 select,
 textarea {
-  color: inherit; // 1
+  font: inherit;
-  font: inherit; // 2
-  margin: 0; // 3
 }
 
 //
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
+// Restore the font weight unset by the previous rule.
 //
 
-button {
+optgroup {
+  font-weight: bold;
+}
+
+//
+// Show the overflow in IE.
+// 1. Show the overflow in Edge.
+// 2. Show the overflow in Edge, Firefox, and IE.
+//
+
+button,
+input, // 1
+select { // 2
   overflow: visible;
 }
 
 //
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// Remove the margin in Safari.
-// All other form control elements do not inherit `text-transform` values.
+// 1. Remove the margin in Firefox and Safari.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
-// Correct `select` style inheritance in Firefox.
 //
 
 button,
-select {
+input,
+select,
+textarea { // 1
+  margin: 0;
+}
+
+//
+// Remove the inheritence of text transform in Edge, Firefox, and IE.
+// 1. Remove the inheritence of text transform in Firefox.
+//
+
+button,
+select { // 1
   text-transform: none;
 }
 
 //
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+// Change the cursor in all browsers (opinionated).
-//    and `video` controls.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//    `input` and others.
 //
 
 button,
-html input[type="button"], // 1
+[type="button"],
-input[type="reset"],
+[type="reset"],
-input[type="submit"] {
+[type="submit"] {
-  -webkit-appearance: button; // 2
+  cursor: pointer;
-  cursor: pointer; // 3
 }
 
 //
-// Re-set default cursor for disabled elements.
+// Restore the default cursor to disabled elements unset by the previous rule.
 //
 
-button[disabled],
+[disabled] {
-html input[disabled] {
   cursor: default;
 }
 
 //
-// Remove inner padding and border in Firefox 4+.
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS.
+//
+
+button,
+html [type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+//
+// Remove the inner border and padding in Firefox.
 //
 
 button::-moz-focus-inner,
@@ -319,62 +343,16 @@ input::-moz-focus-inner {
 }
 
 //
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// Restore the focus styles unset by the previous rule.
-// the UA stylesheet.
 //
 
-input {
+button:-moz-focusring,
-  line-height: normal;
+input:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
 //
-// It's recommended that you don't attempt to style these elements.
+// Change the border, margin, and padding in all browsers (opinionated).
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
-//
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
-//
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
-//
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
-// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
-//
-
-input[type="search"] {
-  -webkit-appearance: textfield; // 1
-  box-sizing: content-box; //2
-}
-
-//
-// Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
-//
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// Define consistent border, margin, and padding.
 //
 
 fieldset {
@@ -384,17 +362,23 @@ fieldset {
 }
 
 //
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 1. Correct the text wrapping in Edge and IE.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+// 3. Remove the padding so developers are not caught out when they zero out
+//    `fieldset` elements in all browsers.
 //
 
 legend {
-  border: 0; // 1
+  box-sizing: border-box; // 1
-  padding: 0; // 2
+  color: inherit; // 2
+  display: table; // 1
+  max-width: 100%; // 1
+  padding: 0; // 3
+  white-space: normal; // 1
 }
 
 //
-// Remove default vertical scrollbar in IE 8/9/10/11.
+// Remove the default vertical scrollbar in IE.
 //
 
 textarea {
@@ -402,27 +386,39 @@ textarea {
 }
 
 //
-// Don't inherit the `font-weight` (applied by a rule above).
+// 1. Add the correct box sizing in IE 10-.
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+// 2. Remove the padding in IE 10-.
 //
 
-optgroup {
+[type="checkbox"],
-  font-weight: bold;
+[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
 }
 
-// Tables
-// ==========================================================================
-
 //
-// Remove most spacing between table cells.
+// Correct the cursor style of increment and decrement buttons in Chrome.
 //
 
-table {
+[type="number"]::-webkit-inner-spin-button,
-  border-collapse: collapse;
+[type="number"]::-webkit-outer-spin-button {
-  border-spacing: 0;
+  height: auto;
 }
 
-td,
+//
-th {
+// Correct the odd appearance of search inputs in Chrome and Safari.
-  padding: 0;
+//
+
+[type="search"] {
+  -webkit-appearance: textfield;
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome on OS X and
+// Safari on OS X.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
 }

src/sass/bootstrap4/_pagination.scss

@@ -34,6 +34,7 @@
   &.disabled .page-link {
     @include plain-hover-focus {
       color: $pagination-disabled-color;
+      pointer-events: none;
       cursor: $cursor-disabled;
       background-color: $pagination-disabled-bg;
       border-color: $pagination-disabled-border;
@@ -46,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;

src/sass/bootstrap4/_popover.scss

@@ -5,16 +5,18 @@
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
-  padding: 1px;
+  padding: $popover-inner-padding;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
   font-size: $font-size-sm;
+  // Allow breaking very long words so they don't overflow the popover's bounds
+  word-wrap: break-word;
   background-color: $popover-bg;
   background-clip: padding-box;
   border: $popover-border-width solid $popover-border-color;
   @include border-radius($border-radius-lg);
-  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+  @include box-shadow($popover-box-shadow);
 
 
   // Popover directions
@@ -103,16 +105,21 @@
 
 // Offset the popover to account for the popover arrow
 .popover-title {
-  padding: 8px 14px;
+  padding: $popover-title-padding-y $popover-title-padding-x;
   margin: 0; // reset heading margin
   font-size: $font-size-base;
   background-color: $popover-title-bg;
   border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
-  @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
+  $offset-border-width: ($border-width / $font-size-root);
+  @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
+
+  &:empty {
+    display: none;
+  }
 }
 
 .popover-content {
-  padding: 9px 14px;
+  padding: $popover-content-padding-y $popover-content-padding-x;
 }
 
 

src/sass/bootstrap4/_print.scss

@@ -1,88 +1,116 @@
+// scss-lint:disable ImportantRule, QualifyingElement
+
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 
 // ==========================================================================
 // Print styles.
-// Inlined to avoid the additional HTTP request: h5bp.com/r
+// Inlined to avoid the additional HTTP request:
+// http://www.phpied.com/delay-loading-your-print-css/
 // ==========================================================================
 
-@media print {
+@if $enable-print-styles {
-  *,
+  @media print {
-  *::before,
+    *,
-  *::after {
+    *::before,
-    text-shadow: none !important;
+    *::after,
-    box-shadow: none !important;
+    *::first-letter,
-  }
+    *::first-line {
-
+      // Bootstrap specific; comment out `color` and `background`
-  a,
+      //color: #000 !important; // Black prints faster:
-  a:visited {
+                                //   http://www.sanbeiji.com/archives/953
-    text-decoration: underline;
+      text-shadow: none !important;
-  }
+      //background: transparent !important;
-
+      box-shadow: none !important;
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  pre,
-  blockquote {
-    border: $border-width solid #999;
-    page-break-inside: avoid;
-  }
-
-  thead {
-    display: table-header-group; // h5bp.com/t
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  img {
-    max-width: 100% !important;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-
-  // Bootstrap specific changes start
-
-  // Bootstrap components
-  .navbar {
-    display: none;
-  }
-  .btn,
-  .dropup > .btn {
-    > .caret {
-      border-top-color: #000 !important;
     }
-  }
-  .label {
-    border: $border-width solid #000;
-  }
 
-  .table {
+    a,
-    border-collapse: collapse !important;
+    a:visited {
-
+      text-decoration: underline;
-    td,
-    th {
-      background-color: #fff !important;
     }
-  }
-  .table-bordered {
-    th,
-    td {
-      border: 1px solid #ddd !important;
-    }
-  }
 
-  // Bootstrap specific changes end
+    // Bootstrap specific; comment the following selector out
+    //a[href]::after {
+    //  content: " (" attr(href) ")";
+    //}
+
+    abbr[title]::after {
+      content: " (" attr(title) ")";
+    }
+
+    // Bootstrap specific; comment the following selector out
+    //
+    // Don't show links that are fragment identifiers,
+    // or use the `javascript:` pseudo protocol
+    //
+
+    //a[href^="#"]::after,
+    //a[href^="javascript:"]::after {
+    //  content: "";
+    //}
+
+    pre,
+    blockquote {
+      border: $border-width solid #999;   // Bootstrap custom code; using `$border-width` instead of 1px
+      page-break-inside: avoid;
+    }
+
+    //
+    // Printing Tables:
+    // http://css-discuss.incutio.com/wiki/Printing_Tables
+    //
+
+    thead {
+      display: table-header-group;
+    }
+
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+
+    // Bootstrap specific changes start
+
+    // Bootstrap components
+    .navbar {
+      display: none;
+    }
+    .btn,
+    .dropup > .btn {
+      > .caret {
+        border-top-color: #000 !important;
+      }
+    }
+    .tag {
+      border: $border-width solid #000;
+    }
+
+    .table {
+      border-collapse: collapse !important;
+
+      td,
+      th {
+        background-color: #fff !important;
+      }
+    }
+    .table-bordered {
+      th,
+      td {
+        border: 1px solid #ddd !important;
+      }
+    }
+
+    // Bootstrap specific changes end
+  }
 }

src/sass/bootstrap4/_progress.scss

@@ -3,8 +3,8 @@
 //
 
 @keyframes progress-bar-stripes {
-  from  { background-position: $spacer-y 0; }
+  from { background-position: $spacer-y 0; }
-  to    { background-position: 0 0; }
+  to { background-position: 0 0; }
 }
 
 
@@ -19,82 +19,67 @@
   margin-bottom: $spacer-y;
 }
 .progress[value] {
-  // IE10 uses `color` to set the bar background-color
+  // Set overall background
-  color: #0074d9;
+  background-color: $progress-bg;
   // Remove Firefox and Opera border
   border: 0;
   // Reset the default appearance
   appearance: none;
-}
+  // Set overall border radius
-.progress[value]::-webkit-progress-bar {
-  background-color: #eee;
   @include border-radius($border-radius);
-  @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
-}
-.progress[value]::-webkit-progress-value::before {
-  content: attr(value);
-}
-.progress[value]::-webkit-progress-value {
-  background-color: #0074d9;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
-}
-.progress[value="100"]::-webkit-progress-value {
-  border-top-right-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
 }
 
-// Firefox styles must be entirely separate or it busts Webkit styles.
+// Filled-in portion of the bar
-//
+.progress[value]::-ms-fill {
-// Commented out for now because linter.
+  background-color: $progress-bar-color;
-//
+  // Remove right-hand border of value bar from IE10+/Edge
-// $-moz-document url-prefix() {
+  border: 0;
-//   .progress[value] {
+}
-//     background-color: #eee;
+.progress[value]::-moz-progress-bar {
-//     .border-radius($border-radius);
+  background-color: $progress-bar-color;
-//     .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+  @include border-left-radius($border-radius);
-//   }
+}
-//   .progress[value]::-moz-progress-bar {
+.progress[value]::-webkit-progress-value {
-//     background-color: #0074d9;
+  background-color: $progress-bar-color;
-//     border-top-left-radius: $border-radius;
+  @include border-left-radius($border-radius);
-//     border-bottom-left-radius: $border-radius;
+}
-//   }
+// Tweaks for full progress bar
-//   .progress[value="0"]::-moz-progress-bar {
+.progress[value="100"]::-moz-progress-bar {
-//     color: $gray-light;
+  @include border-right-radius($border-radius);
-//     min-width: 2rem;
+}
-//     background-color: transparent;
+.progress[value="100"]::-webkit-progress-value {
-//     background-image: none;
+  @include border-right-radius($border-radius);
-//   }
+}
-//   .progress[value="100"]::-moz-progress-bar {
+
-//     border-top-right-radius: $border-radius;
+// Unfilled portion of the bar
-//     border-bottom-right-radius: $border-radius;
+.progress[value]::-webkit-progress-bar {
-//   }
+  background-color: $progress-bg;
-// }
+  @include border-radius($border-radius);
+  @include box-shadow($progress-box-shadow);
+}
+base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
+.progress[value] {
+  background-color: $progress-bg;
+  @include border-radius($border-radius);
+  @include box-shadow($progress-box-shadow);
+}
 
 // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway.
 @media screen and (min-width:0\0) {
   .progress {
-    background-color: #eee;
+    background-color: $progress-bg;
     @include border-radius($border-radius);
-    @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
+    @include box-shadow($progress-box-shadow);
   }
   .progress-bar {
     display: inline-block;
     height: $spacer-y;
     text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
-    background-color: #0074d9;
+    background-color: $progress-bar-color;
-    border-top-left-radius: $border-radius;
+    @include border-left-radius($border-radius);
-    border-bottom-left-radius: $border-radius;
-  }
-  .progress[width^="0"] {
-    min-width: 2rem;
-    color: $gray-light;
-    background-color: transparent;
-    background-image: none;
   }
   .progress[width="100%"] {
-    border-top-right-radius: $border-radius;
+    @include border-right-radius($border-radius);
-    border-bottom-right-radius: $border-radius;
   }
 }
 
@@ -111,6 +96,10 @@
   @include gradient-striped();
   background-size: $spacer-y $spacer-y;
 }
+.progress-striped[value]::-ms-fill {
+  @include gradient-striped();
+  background-size: $spacer-y $spacer-y;
+}
 // IE9
 @media screen and (min-width:0\0) {
   .progress-bar-striped {

src/sass/bootstrap4/_reboot.scss

@@ -1,3 +1,5 @@
+// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
+
 // Reboot
 //
 // Global resets to common HTML elements and more for easier usage by Bootstrap.
@@ -32,8 +34,7 @@ html {
 //
 // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
 // some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
-// Eventually @viewport will replace <meta name="viewport">. It's been manually
+// Eventually @viewport will replace <meta name="viewport">.
-// prefixed for forward-compatibility.
 //
 // However, `device-width` is broken on IE 10 on Windows (Phone) 8,
 // (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
@@ -44,14 +45,8 @@ html {
 //
 // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
 // `.class-name { @import "bootstrap"; }`).
-//
-// Includes future-proofed vendor prefixes as well.
 @at-root {
-  @-moz-viewport      { width: device-width; }
+  @-ms-viewport { width: device-width; }
-  @-ms-viewport       { width: device-width; }
-  @-o-viewport        { width: device-width; }
-  @-webkit-viewport   { width: device-width; }
-  @viewport           { width: device-width; }
 }
 
 
@@ -62,6 +57,13 @@ html {
 html {
   // Sets a specific default `font-size` for user with `rem` type scales.
   font-size: $font-size-root;
+  // As a side-effect of setting the @viewport above,
+  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
+  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
+  // thus making it hard to click on stuff near the right edge of the page.
+  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
+  // See https://github.com/twbs/bootstrap/issues/18543
+  -ms-overflow-style: scrollbar;
   // Changes the default tap highlight to be completely transparent in iOS.
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
@@ -70,7 +72,7 @@ body {
   // Make the `body` use the `font-size-root`
   font-family: $font-family-base;
   font-size: $font-size-base;
-  line-height: $line-height;
+  line-height: $line-height-base;
   // Go easy on the eyes and use something other than `#000` for text
   color: $body-color;
   // By default, `<body>` has no `background-color` so we set one as a best practice.
@@ -169,6 +171,26 @@ a {
   }
 }
 
+// And undo these styles for placeholder links/named anchors (without href)
+// which have not been made explicitly keyboard-focusable (without tabindex).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+
+  @include hover-focus {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
 
 //
 // Code
@@ -179,6 +201,8 @@ pre {
   margin-top: 0;
   // Reset browser default of `1em` to use `rem`s
   margin-bottom: 1rem;
+  // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
+  overflow: auto;
 }
 
 
@@ -245,6 +269,8 @@ textarea {
 //
 
 table {
+  // No longer part of Normalize since v4
+  border-collapse: collapse;
   // Reset for nesting within parents with `background-color`.
   background-color: $table-bg;
 }
@@ -296,6 +322,29 @@ textarea {
   border-radius: 0;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+  // Apply a disabled cursor for radios and checkboxes.
+  //
+  // Note: Neither radios nor checkboxes can be readonly.
+  &:disabled {
+    cursor: $cursor-disabled;
+  }
+}
+
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  // Remove the default appearance of temporal inputs to avoid a Mobile Safari
+  // bug where setting a custom line-height prevents text from being vertically
+  // centered within the input.
+  //
+  // Bug report: https://github.com/twbs/bootstrap/issues/11266
+  -webkit-appearance: listbox;
+}
+
 textarea {
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
@@ -320,12 +369,9 @@ legend {
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
-//  border: 0;
 }
 
 input[type="search"] {
-  // Undo Normalize's default here to match our global overrides.
-  box-sizing: inherit;
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see

src/sass/bootstrap4/_tables.scss

@@ -10,7 +10,6 @@
   th,
   td {
     padding: $table-cell-padding;
-    line-height: $line-height;
     vertical-align: top;
     border-top: $table-border-width solid $table-border-color;
   }
@@ -100,24 +99,9 @@
 @include table-row-variant(danger, $state-danger-bg);
 
 
-// Responsive tables
+// Inverse styles
 //
-// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// Same table markup, but inverted color scheme—dark background and light text.
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
-// will display normally.
-
-.table-responsive {
-  display: block;
-  width: 100%;
-  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
-  overflow-x: auto;
-
-  // TODO: find out if we need this still.
-  //
-  // border: $table-border-width solid $table-border-color;
-  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-}
-
 
 .thead-inverse {
   th {
@@ -125,6 +109,7 @@
     background-color: $gray-dark;
   }
 }
+
 .thead-default {
   th {
     color: $gray;
@@ -136,15 +121,35 @@
   color: $gray-lighter;
   background-color: $gray-dark;
 
-  &.table-bordered {
-    border: 0;
-  }
-
   th,
   td,
   thead th {
     border-color: $gray;
   }
+
+  &.table-bordered {
+    border: 0;
+  }
+}
+
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+  overflow-x: auto;
+
+  // TODO: find out if we need this still.
+  //
+  // border: $table-border-width solid $table-border-color;
+  // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 }
 
 
@@ -172,15 +177,14 @@
   tbody,
   tfoot {
     &:last-child {
-      tr:last-child {
+      tr:last-child th,
-        th,
+      tr:last-child td {
-        td {
+        border-bottom: $table-border-width solid $table-border-color;
-          border-bottom: $table-border-width solid $table-border-color;
-        }
       }
     }
   }
 
+  // scss-lint:disable ImportantRule
   tr {
     float: left;
 
@@ -190,4 +194,5 @@
       border: $table-border-width solid $table-border-color;
     }
   }
+  // scss-lint:enable ImportantRule
 }

src/sass/bootstrap4/_tags.scss

@@ -0,0 +1,77 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.tag {
+  display: inline-block;
+  padding: $tag-padding-y $tag-padding-x;
+  font-size: $tag-font-size;
+  font-weight: $tag-font-weight;
+  line-height: 1;
+  color: $tag-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius();
+
+  // Empty tags collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for tags in buttons
+.btn .tag {
+  position: relative;
+  top: -1px;
+}
+
+// scss-lint:disable QualifyingElement
+// Add hover effects, but only for links
+a.tag {
+  @include hover-focus {
+    color: $tag-link-hover-color;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+// scss-lint:enable QualifyingElement
+
+// Pill tags
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.tag-pill {
+  padding-right: $tag-pill-padding-x;
+  padding-left: $tag-pill-padding-x;
+  @include border-radius($tag-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked tags get darker on :hover).
+
+.tag-default {
+  @include tag-variant($tag-default-bg);
+}
+
+.tag-primary {
+  @include tag-variant($tag-primary-bg);
+}
+
+.tag-success {
+  @include tag-variant($tag-success-bg);
+}
+
+.tag-info {
+  @include tag-variant($tag-info-bg);
+}
+
+.tag-warning {
+  @include tag-variant($tag-warning-bg);
+}
+
+.tag-danger {
+  @include tag-variant($tag-danger-bg);
+}

src/sass/bootstrap4/_tooltip.scss

@@ -7,6 +7,8 @@
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
   font-size: $font-size-sm;
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
   opacity: 0;
 
   &.in { opacity: $tooltip-opacity; }
@@ -14,7 +16,7 @@
   &.tooltip-top,
   &.bs-tether-element-attached-bottom {
     padding: $tooltip-arrow-width 0;
-    margin-top: -3px;
+    margin-top: -$tooltip-margin;
 
     .tooltip-arrow {
       bottom: 0;
@@ -27,7 +29,7 @@
   &.tooltip-right,
   &.bs-tether-element-attached-left {
     padding: 0 $tooltip-arrow-width;
-    margin-left: 3px;
+    margin-left: $tooltip-margin;
 
     .tooltip-arrow {
       top: 50%;
@@ -40,7 +42,7 @@
   &.tooltip-bottom,
   &.bs-tether-element-attached-top {
     padding: $tooltip-arrow-width 0;
-    margin-top: 3px;
+    margin-top: $tooltip-margin;
 
     .tooltip-arrow {
       top: 0;
@@ -53,7 +55,7 @@
   &.tooltip-left,
   &.bs-tether-element-attached-right {
     padding: 0 $tooltip-arrow-width;
-    margin-left: -3px;
+    margin-left: -$tooltip-margin;
 
     .tooltip-arrow {
       top: 50%;
@@ -68,7 +70,7 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   max-width: $tooltip-max-width;
-  padding: 3px 8px;
+  padding: $tooltip-padding-y $tooltip-padding-x;
   color: $tooltip-color;
   text-align: center;
   background-color: $tooltip-bg;

src/sass/bootstrap4/_type.scss

@@ -11,22 +11,12 @@ h1, h2, h3, h4, h5, h6,
   color: $headings-color;
 }
 
-h1 { font-size: $font-size-h1; }
+h1, .h1 { font-size: $font-size-h1; }
-h2 { font-size: $font-size-h2; }
+h2, .h2 { font-size: $font-size-h2; }
-h3 { font-size: $font-size-h3; }
+h3, .h3 { font-size: $font-size-h3; }
-h4 { font-size: $font-size-h4; }
+h4, .h4 { font-size: $font-size-h4; }
-h5 { font-size: $font-size-h5; }
+h5, .h5 { font-size: $font-size-h5; }
-h6 { font-size: $font-size-h6; }
+h6, .h6 { font-size: $font-size-h6; }
-
-// These declarations are kept separate from and placed after
-// the previous tag-based declarations so that the classes beat the tags in
-// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
-.h1 { font-size: $font-size-h1; }
-.h2 { font-size: $font-size-h2; }
-.h3 { font-size: $font-size-h3; }
-.h4 { font-size: $font-size-h4; }
-.h5 { font-size: $font-size-h5; }
-.h6 { font-size: $font-size-h6; }
 
 .lead {
   font-size: $lead-font-size;
@@ -70,14 +60,14 @@ hr {
 
 small,
 .small {
-  font-size: 80%;
+  font-size: $small-font-size;
   font-weight: normal;
 }
 
 mark,
 .mark {
-  padding: .2em;
+  padding: $mark-padding;
-  background-color: $state-warning-bg;
+  background-color: $mark-bg;
 }
 
 
@@ -101,13 +91,6 @@ mark,
   }
 }
 
-// Horizontal description lists w/ grid classes
-.dl-horizontal {
-  margin-right: -$grid-gutter-width;
-  margin-left: -$grid-gutter-width;
-  @include clearfix;
-}
-
 
 //
 // Misc
@@ -124,13 +107,12 @@ mark,
   padding: ($spacer / 2) $spacer;
   margin-bottom: $spacer;
   font-size: $blockquote-font-size;
-  border-left: .25rem solid $blockquote-border-color;
+  border-left: $blockquote-border-width solid $blockquote-border-color;
 }
 
 .blockquote-footer {
   display: block;
   font-size: 80%; // back to default font-size
-  line-height: $line-height;
   color: $blockquote-small-color;
 
   &::before {
@@ -143,7 +125,7 @@ mark,
   padding-right: $spacer;
   padding-left: 0;
   text-align: right;
-  border-right: .25rem solid $blockquote-border-color;
+  border-right: $blockquote-border-width solid $blockquote-border-color;
   border-left: 0;
 }
 
@@ -155,3 +137,14 @@ mark,
     content: "\00A0 \2014"; // nbsp, em dash
   }
 }
+
+@if not $enable-flex {
+  // Clean up some horizontal `<dl>`s built with grids
+  // scss-lint:disable QualifyingElement
+  dl.row {
+    > dd + dt {
+      clear: left;
+    }
+  }
+  // scss-lint:enable QualifyingElement
+}

src/sass/bootstrap4/_utilities.scss

@@ -1,95 +1,9 @@
-//
+@import "utilities/background";
-// Floats
+@import "utilities/clearfix";
-//
+@import "utilities/display";
-
+@import "utilities/flex";
-.clearfix {
+@import "utilities/pulls";
-  @include clearfix();
+@import "utilities/screenreaders";
-}
+@import "utilities/spacing";
-
+@import "utilities/text";
-.center-block {
+@import "utilities/visibility";
-  @include center-block();
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    .pull-#{$breakpoint}-left {
-      @include pull-left();
-    }
-    .pull-#{$breakpoint}-right {
-      @include pull-right();
-    }
-    .pull-#{$breakpoint}-none {
-      float: none !important;
-    }
-  }
-}
-
-
-//
-// Screenreaders
-//
-
-.sr-only {
-  @include sr-only();
-}
-
-.sr-only-focusable {
-  @include sr-only-focusable();
-}
-
-.invisible {
-  visibility: hidden !important;
-}
-
-.text-hide {
-  @include text-hide();
-}
-
-
-//
-// Text
-//
-
-// Alignment
-
-.text-justify        { text-align: justify !important; }
-.text-nowrap         { white-space: nowrap !important; }
-.text-truncate       { @include text-truncate; }
-
-// Responsive alignment
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    .text-#{$breakpoint}-left   { text-align: left !important; }
-    .text-#{$breakpoint}-right  { text-align: right !important; }
-    .text-#{$breakpoint}-center { text-align: center !important; }
-  }
-}
-
-// Transformation
-
-.text-lowercase      { text-transform: lowercase !important; }
-.text-uppercase      { text-transform: uppercase !important; }
-.text-capitalize     { text-transform: capitalize !important; }
-
-// Weight and italics
-
-.font-weight-normal  { font-weight: normal; }
-.font-weight-bold    { font-weight: bold; }
-.font-italic         { font-style: italic; }
-
-// Contextual colors
-
-.text-muted {
-  color: $text-muted;
-}
-
-@include text-emphasis-variant('.text-primary', $brand-primary);
-
-@include text-emphasis-variant('.text-success', $brand-success);
-
-@include text-emphasis-variant('.text-info', $brand-info);
-
-@include text-emphasis-variant('.text-warning', $brand-warning);
-
-@include text-emphasis-variant('.text-danger', $brand-danger);

src/sass/bootstrap4/_variables.scss

@@ -17,6 +17,22 @@
 // Fonts
 // Components
 
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
 // General variable structure
 //
 // Variable format should follow the `$component-modifier-state-property` order.
@@ -37,6 +53,7 @@ $brand-success:             #5cb85c !default;
 $brand-info:                #5bc0de !default;
 $brand-warning:             #f0ad4e !default;
 $brand-danger:              #d9534f !default;
+$brand-inverse:             $gray-dark !default;
 
 
 // Options
@@ -50,72 +67,70 @@ $enable-gradients:          false !default;
 $enable-transitions:        false !default;
 $enable-hover-media-query:  false !default;
 $enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
 
 
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
 // variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
 
-$spacer:                     1rem !default;
+$spacer:   1rem !default;
-$spacer-x:                   $spacer !default;
+$spacer-x: $spacer !default;
-$spacer-y:                   $spacer !default;
+$spacer-y: $spacer !default;
 $spacers: (
   0: (
-    x:   0,
+    x: 0,
-    y:   0
+    y: 0
   ),
   1: (
-    x:   $spacer-x,
+    x: $spacer-x,
-    y:   $spacer-y
+    y: $spacer-y
   ),
   2: (
-    x:   ($spacer-x * 1.5),
+    x: ($spacer-x * 1.5),
-    y:   ($spacer-y * 1.5)
+    y: ($spacer-y * 1.5)
   ),
   3: (
-    x:   ($spacer-x * 3),
+    x: ($spacer-x * 3),
-    y:   ($spacer-y * 3)
+    y: ($spacer-y * 3)
   )
 ) !default;
-$border-width:               1px !default;
+$border-width: 1px !default;
 
 
 // Body
 //
 // Settings for the `<body>` element.
 
-$body-bg:                    #fff !default;
+$body-bg:    #fff !default;
-$body-color:                 $gray-dark !default;
+$body-color: $gray-dark !default;
 
 
 // Links
 //
 // Style anchor elements.
 
-$link-color:                 $brand-primary !default;
+$link-color:            $brand-primary !default;
-$link-decoration:            none !default;
+$link-decoration:       none !default;
-$link-hover-color:           darken($link-color, 15%) !default;
+$link-hover-color:      darken($link-color, 15%) !default;
-$link-hover-decoration:      underline !default;
+$link-hover-decoration: underline !default;
 
 
 // Grid breakpoints
 //
-// Define the minimum and maximum dimensions at which your layout will change,
+// Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
 $grid-breakpoints: (
-  // Extra small screen / phone
   xs: 0,
-  // Small screen / phone
   sm: 544px,
-  // Medium screen / tablet
   md: 768px,
-  // Large screen / desktop
   lg: 992px,
-  // Extra large screen / wide desktop
   xl: 1200px
 ) !default;
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 
 
 // Grid containers
@@ -128,77 +143,84 @@ $container-max-widths: (
   lg: 940px,
   xl: 1140px
 ) !default;
+@include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:               12 !default;
+$grid-columns:      12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
+$grid-gutter-width: 30px !default;
 
 
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:     "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
-$font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
+$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
-$font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base:           $font-family-sans-serif !default;
+$font-family-base:       $font-family-sans-serif !default;
 
 // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
-$font-size-root:             16px !default;
+$font-size-root: 16px !default;
 
-$font-size-base:             1rem !default;
+$font-size-base: 1rem !default;
-$font-size-lg:               1.25rem !default;
+$font-size-lg:   1.25rem !default;
-$font-size-sm:               .875rem !default;
+$font-size-sm:   .875rem !default;
-$font-size-xs:               .75rem !default;
+$font-size-xs:   .75rem !default;
 
-$font-size-h1:               2.5rem !default;
+$line-height-base: 1.5 !default;
-$font-size-h2:               2rem !default;
-$font-size-h3:               1.75rem !default;
-$font-size-h4:               1.5rem !default;
-$font-size-h5:               1.25rem !default;
-$font-size-h6:               1rem !default;
 
-$display1-size:               6rem !default;
+$font-size-h1: 2.5rem !default;
-$display2-size:               5.5rem !default;
+$font-size-h2: 2rem !default;
-$display3-size:               4.5rem !default;
+$font-size-h3: 1.75rem !default;
-$display4-size:               3.5rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h6: 1rem !default;
 
-$display1-weight:             300 !default;
+$display1-size: 6rem !default;
-$display2-weight:             300 !default;
+$display2-size: 5.5rem !default;
-$display3-weight:             300 !default;
+$display3-size: 4.5rem !default;
-$display4-weight:             300 !default;
+$display4-size: 3.5rem !default;
 
-$line-height:                1.5 !default;
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
 
-$headings-margin-bottom:     ($spacer / 2) !default;
+$headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family:       inherit !default;
+$headings-font-family:   inherit !default;
-$headings-font-weight:       500 !default;
+$headings-font-weight:   500 !default;
-$headings-line-height:       1.1 !default;
+$headings-line-height:   1.1 !default;
-$headings-color:             inherit !default;
+$headings-color:         inherit !default;
 
-$lead-font-size:             1.25rem !default;
+$lead-font-size:   1.25rem !default;
-$lead-font-weight:           300 !default;
+$lead-font-weight: 300 !default;
 
-$text-muted:                  $gray-light !default;
+$small-font-size: 80% !default;
 
-$abbr-border-color:           $gray-light !default;
+$text-muted: $gray-light !default;
 
-$blockquote-small-color:      $gray-light !default;
+$abbr-border-color: $gray-light !default;
-$blockquote-font-size:        ($font-size-base * 1.25) !default;
-$blockquote-border-color:     $gray-lighter !default;
 
-$hr-border-color:             rgba(0,0,0,.1) !default;
+$blockquote-small-color:  $gray-light !default;
-$hr-border-width:             $border-width !default;
+$blockquote-font-size:    ($font-size-base * 1.25) !default;
+$blockquote-border-color: $gray-lighter !default;
+$blockquote-border-width: .25rem !default;
 
-$dt-font-weight:              bold !default;
+$hr-border-color: rgba(0,0,0,.1) !default;
+$hr-border-width: $border-width !default;
 
-$nested-kbd-font-weight:      bold !default;
+$mark-padding: .2em !default;
 
-$list-inline-padding:         5px !default;
+$dt-font-weight: bold !default;
+
+$kbd-box-shadow:         inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
+$nested-kbd-font-weight: bold !default;
+
+$list-inline-padding: 5px !default;
 
 
 // Components
@@ -227,8 +249,8 @@ $table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
-$table-bg-accent:               #f9f9f9 !default;
+$table-bg-accent:               rgba(0,0,0,.05) !default;
-$table-bg-hover:                #f5f5f5 !default;
+$table-bg-hover:                rgba(0,0,0,.075) !default;
 $table-bg-active:               $table-bg-hover !default;
 
 $table-border-width:            $border-width !default;
@@ -240,8 +262,11 @@ $table-border-color:            $gray-lighter !default;
 // For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-padding-x:                  1rem !default;
-$btn-padding-y:                  .375rem !default;
+$btn-padding-y:                  .5rem !default;
+$btn-line-height:                1.25 !default;
 $btn-font-weight:                normal !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba(0,0,0,.125) !default;
 
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
@@ -269,12 +294,15 @@ $btn-danger-border:              $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
-$btn-padding-x-sm:               .75rem !default;
+$btn-padding-x-sm:               .5rem !default;
 $btn-padding-y-sm:               .25rem !default;
 
-$btn-padding-x-lg:               1.25rem !default;
+$btn-padding-x-lg:               1.5rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
+$btn-block-spacing-y:            .5rem !default;
+$btn-toolbar-margin:             .5rem !default;
+
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
@@ -284,13 +312,14 @@ $btn-border-radius-sm:           $border-radius-sm !default;
 // Forms
 
 $input-padding-x:                .75rem !default;
-$input-padding-y:                .375rem !default;
+$input-padding-y:                .5rem !default;
+$input-line-height:              1.25 !default;
 
 $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
 
 $input-color:                    $gray !default;
-$input-border-color:             #ccc !default;
+$input-border-color:             rgba(0,0,0,.15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 
@@ -298,18 +327,20 @@ $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
+$input-bg-focus:                 $input-bg;
 $input-border-focus:             #66afe9 !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
+$input-color-focus:              $input-color;
 
 $input-color-placeholder:        #999 !default;
 
-$input-padding-x-sm:             .75rem !default;
+$input-padding-x-sm:             .5rem !default;
-$input-padding-y-sm:             .275rem !default;
+$input-padding-y-sm:             .25rem !default;
 
-$input-padding-x-lg:             1.25rem !default;
+$input-padding-x-lg:             1.5rem !default;
 $input-padding-y-lg:             .75rem !default;
 
-$input-height:                   (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
+$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
 $input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
 $input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
 
@@ -320,20 +351,100 @@ $input-group-addon-border-color: $input-border-color !default;
 
 $cursor-disabled:                not-allowed !default;
 
+$custom-control-gutter:   1.5rem !default;
+$custom-control-spacer-x: 1rem !default;
+$custom-control-spacer-y: .25rem !default;
+
+$custom-control-indicator-size:       1rem !default;
+$custom-control-indicator-bg:         #ddd !default;
+$custom-control-indicator-bg-size:    50% 50% !default;
+$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default;
+
+$custom-control-disabled-cursor:             $cursor-disabled !default;
+$custom-control-disabled-indicator-bg:       #eee !default;
+$custom-control-disabled-description-color:  #767676 !default;
+
+$custom-control-checked-indicator-color:      #fff !default;
+$custom-control-checked-indicator-bg:         #0074d9 !default;
+$custom-control-checked-indicator-box-shadow: none !default;
+
+$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+
+$custom-control-active-indicator-color:      #fff !default;
+$custom-control-active-indicator-bg:         #84c6ff !default;
+$custom-control-active-indicator-box-shadow: none !default;
+
+$custom-checkbox-radius: $border-radius !default;
+$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
+$custom-checkbox-indeterminate-bg: #0074d9 !default;
+$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
+$custom-checkbox-indeterminate-box-shadow: none !default;
+
+$custom-radio-radius: 50% !default;
+$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
+
+$custom-select-padding-x:          .75rem  !default;
+$custom-select-padding-y:          .375rem !default;
+$custom-select-indicator-padding:  1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-color:          $input-color !default;
+$custom-select-disabled-color: $gray-light !default;
+$custom-select-bg:            #fff !default;
+$custom-select-disabled-bg:   $gray-lighter !default;
+$custom-select-bg-size:       8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
+$custom-select-border-width:  $input-btn-border-width !default;
+$custom-select-border-color:  $input-border-color !default;
+$custom-select-border-radius: $border-radius !default;
+
+$custom-select-focus-border-color: #51a7e8 !default;
+$custom-select-focus-box-shadow:   inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default;
+
+$custom-select-sm-padding-y: .2rem !default;
+$custom-select-sm-font-size: 75% !default;
+
+$custom-file-height:           2.5rem !default;
+$custom-file-width:            14rem !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default;
+
+$custom-file-padding-x:     .5rem !default;
+$custom-file-padding-y:     1rem !default;
+$custom-file-line-height:   1.5 !default;
+$custom-file-color:         #555 !default;
+$custom-file-bg:            #fff !default;
+$custom-file-border-width:  $border-width !default;
+$custom-file-border-color:  #ddd !default;
+$custom-file-border-radius: $border-radius !default;
+$custom-file-box-shadow:    inset 0 .2rem .4rem rgba(0,0,0,.05) !default;
+$custom-file-button-color:  $custom-file-color !default;
+$custom-file-button-bg:     #eee !default;
+$custom-file-text: (
+  placeholder: (
+    en: "Choose file..."
+  ),
+  button-label: (
+    en: "Browse"
+  )
+) !default;
+
+
 // Form validation icons
-$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
-$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;
+$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
-$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default;
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
 
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
+$dropdown-min-width:             160px !default;
+$dropdown-padding-y:             5px !default;
+$dropdown-margin-top:            2px !default;
 $dropdown-bg:                    #fff !default;
 $dropdown-border-color:          rgba(0,0,0,.15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            #e5e5e5 !default;
+$dropdown-box-shadow:            0 6px 12px rgba(0,0,0,.175) !default;
 
 $dropdown-link-color:            $gray-dark !default;
 $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
@@ -344,6 +455,8 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
+$dropdown-item-padding-x:        20px !default;
+
 $dropdown-header-color:          $gray-light !default;
 
 
@@ -352,6 +465,7 @@ $dropdown-header-color:          $gray-light !default;
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
+$zindex-dropdown-backdrop:  990 !default;
 $zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
 $zindex-popover:           1060 !default;
@@ -365,8 +479,9 @@ $zindex-modal:             1050 !default;
 // Navbar
 
 $navbar-border-radius:              $border-radius !default;
-$navbar-padding-horizontal:         $spacer !default;
+$navbar-padding-x:                  $spacer !default;
-$navbar-padding-vertical:           ($spacer / 2) !default;
+$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-brand-padding-y:            .25rem !default;
 
 $navbar-dark-color:                 rgba(255,255,255,.5) !default;
 $navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
@@ -381,27 +496,27 @@ $navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
 
 // Navs
 
-$nav-link-padding:                          .5em 1em !default;
+$nav-item-margin:               .2rem !default;
-$nav-link-hover-bg:                         $gray-lighter !default;
+$nav-item-inline-spacer:        1rem !default;
+$nav-link-padding:              .5em 1em !default;
+$nav-link-hover-bg:             $gray-lighter !default;
+$nav-disabled-link-color:       $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+$nav-disabled-link-hover-bg:    transparent !default;
 
-$nav-disabled-link-color:                   $gray-light !default;
+$nav-tabs-border-color:                       #ddd !default;
-$nav-disabled-link-hover-color:             $gray-light !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-border-radius:                      $border-radius !default;
+$nav-tabs-link-hover-border-color:            $gray-lighter !default;
+$nav-tabs-active-link-hover-color:            $gray !default;
+$nav-tabs-active-link-hover-bg:               $body-bg !default;
+$nav-tabs-active-link-hover-border-color:     #ddd !default;
+$nav-tabs-justified-link-border-color:        #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
 
-$nav-tabs-border-color:                     #ddd !default;
+$nav-pills-border-radius:     $border-radius !default;
-
+$nav-pills-active-link-color: $component-active-color !default;
-$nav-tabs-link-border-width:                $border-width !default;
+$nav-pills-active-link-bg:    $component-active-bg !default;
-$nav-tabs-link-hover-border-color:          $gray-lighter !default;
-
-$nav-tabs-active-link-hover-bg:             $body-bg !default;
-$nav-tabs-active-link-hover-color:          $gray !default;
-$nav-tabs-active-link-hover-border-color:   #ddd !default;
-
-$nav-tabs-justified-link-border-color:            #ddd !default;
-$nav-tabs-justified-active-link-border-color:     $body-bg !default;
-
-$nav-pills-border-radius:                   $border-radius !default;
-$nav-pills-active-link-hover-bg:            $component-active-bg !default;
-$nav-pills-active-link-hover-color:         $component-active-color !default;
 
 
 // Pagination
@@ -432,21 +547,6 @@ $pagination-disabled-bg:               #fff !default;
 $pagination-disabled-border:           #ddd !default;
 
 
-// Pager
-
-$pager-bg:                             $pagination-bg !default;
-$pager-border-width:                   $border-width !default;
-$pager-border-color:                   $pagination-border-color !default;
-$pager-border-radius:                  15px !default;
-
-$pager-hover-bg:                       $pagination-hover-bg !default;
-
-$pager-active-bg:                      $pagination-active-bg !default;
-$pager-active-color:                   $pagination-active-color !default;
-
-$pager-disabled-color:                 $pagination-disabled-color !default;
-
-
 // Jumbotron
 
 $jumbotron-padding:              2rem !default;
@@ -467,6 +567,7 @@ $state-info-border:              darken($state-info-bg, 7%) !default;
 
 $state-warning-text:             #8a6d3b !default;
 $state-warning-bg:               #fcf8e3 !default;
+$mark-bg:                        $state-warning-bg !default;
 $state-warning-border:           darken($state-warning-bg, 5%) !default;
 
 $state-danger-text:              #a94442 !default;
@@ -479,13 +580,19 @@ $card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
-$card-border-color:        #e5e5e5 !default;
+$card-border-color:        rgba(0,0,0,.125) !default;
 $card-border-radius-inner: $card-border-radius !default;
 $card-cap-bg:              #f5f5f5 !default;
 $card-bg:                  #fff !default;
 
 $card-link-hover-color:    #fff !default;
 
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-deck-margin:         .625rem !default;
+
+$card-columns-sm-up-column-gap: 1.25rem !default;
+
 
 // Tooltips
 
@@ -493,6 +600,9 @@ $tooltip-max-width:           200px !default;
 $tooltip-color:               #fff !default;
 $tooltip-bg:                  #000 !default;
 $tooltip-opacity:             .9 !default;
+$tooltip-padding-y:           3px !default;
+$tooltip-padding-x:           8px !default;
+$tooltip-margin:              3px !default;
 
 $tooltip-arrow-width:         5px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
@@ -500,49 +610,71 @@ $tooltip-arrow-color:         $tooltip-bg !default;
 
 // Popovers
 
+$popover-inner-padding:               1px !default;
 $popover-bg:                          #fff !default;
 $popover-max-width:                   276px !default;
 $popover-border-width:                $border-width !default;
 $popover-border-color:                rgba(0,0,0,.2) !default;
+$popover-box-shadow:                  0 5px 10px rgba(0,0,0,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
+$popover-title-padding-x:             14px !default;
+$popover-title-padding-y:             8px !default;
+
+$popover-content-padding-x:           14px !default;
+$popover-content-padding-y:           9px !default;
 
 $popover-arrow-width:                 10px !default;
 $popover-arrow-color:                 $popover-bg !default;
 
-$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
-$popover-arrow-outer-color:           fade-in($popover-border-color, 0.05) !default;
+$popover-arrow-outer-color:           fade-in($popover-border-color, .05) !default;
 
 
-// Labels
+// Tags
 
-$label-default-bg:            $gray-light !default;
+$tag-default-bg:            $gray-light !default;
-$label-primary-bg:            $brand-primary !default;
+$tag-primary-bg:            $brand-primary !default;
-$label-success-bg:            $brand-success !default;
+$tag-success-bg:            $brand-success !default;
-$label-info-bg:               $brand-info !default;
+$tag-info-bg:               $brand-info !default;
-$label-warning-bg:            $brand-warning !default;
+$tag-warning-bg:            $brand-warning !default;
-$label-danger-bg:             $brand-danger !default;
+$tag-danger-bg:             $brand-danger !default;
 
-$label-color:                 #fff !default;
+$tag-color:                 #fff !default;
-$label-link-hover-color:      #fff !default;
+$tag-link-hover-color:      #fff !default;
-$label-font-weight:           bold !default;
+$tag-font-size:             75% !default;
+$tag-font-weight:           bold !default;
+$tag-padding-x:             .4em !default;
+$tag-padding-y:             .25em !default;
 
+$tag-pill-padding-x:        .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$tag-pill-border-radius:    10rem !default;
 
 // Modals
 
 // Padding applied to the modal body
 $modal-inner-padding:         15px !default;
 
-$modal-title-padding:         15px !default;
+$modal-dialog-margin:         10px !default;
-$modal-title-line-height:     $line-height !default;
+$modal-dialog-sm-up-margin-y: 30px !default;
 
-$modal-content-bg:                             #fff !default;
+$modal-title-padding:         15px !default;
-$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+$modal-title-line-height:     $line-height-base !default;
+
+$modal-content-bg:               #fff !default;
+$modal-content-border-color:     rgba(0,0,0,.2) !default;
+$modal-content-border-width:     $border-width !default;
+$modal-content-xs-box-shadow:    0 3px 9px rgba(0,0,0,.5) !default;
+$modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default;
 
 $modal-backdrop-bg:           #000 !default;
 $modal-backdrop-opacity:      .5 !default;
 $modal-header-border-color:   #e5e5e5 !default;
 $modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
 
 $modal-lg:                    900px !default;
 $modal-md:                    600px !default;
@@ -577,9 +709,10 @@ $alert-danger-border:         $state-danger-border !default;
 
 // Progress bars
 
-$progress-bg:                 #f5f5f5 !default;
+$progress-bg:                 #eee !default;
-$progress-bar-color:          #fff !default;
+$progress-bar-color:          #0074d9 !default;
 $progress-border-radius:      $border-radius !default;
+$progress-box-shadow:         inset 0 .1rem .1rem rgba(0,0,0,.1) !default;
 
 $progress-bar-bg:             $brand-primary !default;
 $progress-bar-success-bg:     $brand-success !default;
@@ -609,6 +742,10 @@ $list-group-link-color:         #555 !default;
 $list-group-link-hover-color:   $list-group-link-color !default;
 $list-group-link-heading-color: #333 !default;
 
+$list-group-item-padding-x:             1.25rem !default;
+$list-group-item-padding-y:             .75rem !default;
+$list-group-item-heading-margin-bottom: 5px !default;
+
 
 // Image thumbnails
 
@@ -617,12 +754,19 @@ $thumbnail-bg:                $body-bg !default;
 $thumbnail-border-width:      $border-width !default;
 $thumbnail-border-color:      #ddd !default;
 $thumbnail-border-radius:     $border-radius !default;
+$thumbnail-box-shadow:        0 1px 2px rgba(0,0,0,.075) !default;
+
+
+// Figures
+
+$figure-caption-font-size: 90% !default;
 
 
 // Breadcrumbs
 
-$breadcrumb-padding-vertical:   .75rem !default;
+$breadcrumb-padding-y:          .75rem !default;
-$breadcrumb-padding-horizontal: 1rem !default;
+$breadcrumb-padding-x:          1rem !default;
+$breadcrumb-item-padding:       .5rem !default;
 
 $breadcrumb-bg:                 $gray-lighter !default;
 $breadcrumb-divider-color:      $gray-light !default;
@@ -630,20 +774,36 @@ $breadcrumb-active-color:       $gray-light !default;
 $breadcrumb-divider:            "/" !default;
 
 
+// Media objects
+
+$media-margin-top:            15px !default;
+$media-heading-margin-bottom:  5px !default;
+$media-alignment-padding-x:   10px !default;
+
+
 // Carousel
 
 $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
 
 $carousel-control-color:                      #fff !default;
 $carousel-control-width:                      15% !default;
+$carousel-control-sm-up-size:                 30px !default;
 $carousel-control-opacity:                    .5 !default;
 $carousel-control-font-size:                  20px !default;
 
+$carousel-indicators-width:                   60% !default;
+
+$carousel-indicator-size:                     10px !default;
+$carousel-indicator-active-size:              12px !default;
 $carousel-indicator-active-bg:                #fff !default;
 $carousel-indicator-border-color:             #fff !default;
 
+$carousel-caption-width:                      70% !default;
+$carousel-caption-sm-up-width:                60% !default;
 $carousel-caption-color:                      #fff !default;
 
+$carousel-icon-width:                         20px !default;
+
 
 // Close
 
@@ -654,6 +814,9 @@ $close-text-shadow:           0 1px 0 #fff !default;
 
 // Code
 
+$code-font-size:              90% !default;
+$code-padding-x:              .4rem !default;
+$code-padding-y:              .2rem !default;
 $code-color:                  #bd4147 !default;
 $code-bg:                     #f7f7f9 !default;
 

src/sass/bootstrap4/bootstrap-grid.scss

@@ -8,52 +8,13 @@
 // Variables
 //
 
-
+@import "custom";
-// Grid breakpoints
+@import "variables";
-//
-// Define the minimum and maximum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 544px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px
-) !default;
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
-  sm: 576px,
-  md: 720px,
-  lg: 940px,
-  xl: 1140px
-) !default;
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns:               12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
-
 
 //
 // Grid mixins
 //
 
-@import "variables";
-
 @import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";

src/sass/bootstrap4/bootstrap-reboot.scss

@@ -2,6 +2,7 @@
 //
 // Includes only Normalize and our custom Reboot reset.
 
+@import "custom";
 @import "variables";
 @import "mixins/hover";
 @import "mixins/tab-focus";

src/sass/bootstrap4/bootstrap.scss

@@ -1,10 +1,12 @@
 /*!
- * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Copyright 2011-2016 The Bootstrap Authors
+ * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
 // Core variables and mixins
+@import "custom";
 @import "variables";
 @import "mixins";
 
@@ -33,8 +35,7 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "pager";
+@import "tags";
-@import "labels";
 @import "jumbotron";
 @import "alert";
 @import "progress";
@@ -51,6 +52,3 @@
 
 // Utility classes
 @import "utilities";
-@import "utilities-background";
-@import "utilities-spacing";
-@import "utilities-responsive";

src/sass/bootstrap4/mixins/_background-variant.scss

@@ -7,7 +7,7 @@
   }
   a#{$parent} {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      background-color: darken($color, 10%) !important;
     }
   }
 }

src/sass/bootstrap4/mixins/_buttons.scss

@@ -10,7 +10,7 @@
   color: $color;
   background-color: $background;
   border-color: $border;
-  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+  @include box-shadow($btn-box-shadow);
 
   @include hover {
     color: $color;
@@ -33,7 +33,7 @@
         border-color: $active-border;
     // Remove the gradient for the pressed/active state
     background-image: none;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    @include box-shadow($btn-active-box-shadow);
 
     &:hover,
     &:focus,
@@ -64,19 +64,33 @@
   background-color: transparent;
   border-color: $color;
 
+  @include hover {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
   &:focus,
-  &.focus,
+  &.focus {
+    color: #fff;
+    background-color: $color;
+        border-color: $color;
+  }
+
   &:active,
   &.active,
   .open > &.dropdown-toggle {
     color: #fff;
     background-color: $color;
         border-color: $color;
-  }
+
-  @include hover {
+    &:hover,
-    color: #fff;
+    &:focus,
-    background-color: $color;
+    &.focus {
-        border-color: $color;
+      color: #fff;
+      background-color: darken($color, 17%);
+          border-color: darken($color, 25%);
+    }
   }
 
   &.disabled,
@@ -92,9 +106,8 @@
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
-  line-height: $line-height;
   @include border-radius($border-radius);
 }

src/sass/bootstrap4/mixins/_cards.scss

@@ -3,6 +3,11 @@
 @mixin card-variant($background, $border) {
   background-color: $background;
   border-color: $border;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+  }
 }
 
 @mixin card-outline-variant($color) {
@@ -17,7 +22,7 @@
 @mixin card-inverse {
   .card-header,
   .card-footer {
-    border-bottom: $card-border-width solid rgba(255,255,255,.2);
+    border-color: rgba(255,255,255,.2);
   }
   .card-header,
   .card-footer,
@@ -27,7 +32,8 @@
   }
   .card-link,
   .card-text,
-  .card-blockquote > footer {
+  .card-subtitle,
+  .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }
   .card-link {

src/sass/bootstrap4/mixins/_forms.scss

@@ -5,7 +5,7 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .text-help,
+  .form-control-feedback,
   .form-control-label,
   .radio,
   .checkbox,
@@ -14,7 +14,8 @@
   &.radio label,
   &.checkbox label,
   &.radio-inline label,
-  &.checkbox-inline label  {
+  &.checkbox-inline label,
+  .custom-control {
     color: $color;
   }
   // Set the border and box shadow on specific inputs to match
@@ -55,6 +56,8 @@
 // contrast against a dark gray background.
 @mixin form-control-focus() {
   &:focus {
+    color: $input-color-focus;
+    background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: none;
     $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@@ -68,10 +71,10 @@
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
 
-@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   #{$parent} {
     height: $input-height;
-    padding: $padding-vertical $padding-horizontal;
+    padding: $padding-y $padding-x;
     font-size: $font-size;
     line-height: $line-height;
     @include border-radius($border-radius);

src/sass/bootstrap4/mixins/_gradients.scss

@@ -4,7 +4,7 @@
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9.
-@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9
@@ -14,7 +14,7 @@
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9.
-@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9
@@ -24,12 +24,12 @@
   background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
-@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback
 }
-@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback

src/sass/bootstrap4/mixins/_grid-framework.scss

@@ -4,41 +4,67 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-left: ($gutter / 2);
     padding-right: ($gutter / 2);
+    padding-left: ($gutter / 2);
+
+    @if $enable-flex {
+      width: 100%;
+    }
   }
+
+  $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
+    $breakpoint-counter: ($breakpoint-counter + 1);
+
     @for $i from 1 through $columns {
       .col-#{$breakpoint}-#{$i} {
         @extend %grid-column;
       }
     }
-    @include media-breakpoint-up($breakpoint) {
+
-      // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      %grid-column-float-#{$breakpoint} {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-        float: left;
+      @if $enable-flex {
-      }
+        .col-#{$breakpoint} {
-      @for $i from 1 through $columns {
+          position: relative;
-        .col-#{$breakpoint}-#{$i} {
+          flex-basis: 0;
-          @if not $enable-flex {
+          flex-grow: 1;
-            @extend %grid-column-float-#{$breakpoint};
+          max-width: 100%;
-          }
+          min-height: 1px;
-          @include make-col-span($i, $columns);
+          padding-right: ($grid-gutter-width / 2);
+          padding-left:  ($grid-gutter-width / 2);
         }
       }
-      @each $modifier in (pull, push, offset) {
+
+      @for $i from 1 through $columns {
+        .col-#{$breakpoint}-#{$i} {
+          @include make-col($i, $columns, $gutter);
+        }
+      }
+
+      @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .col-#{$breakpoint}-#{$modifier}-#{$i} {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
       }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
+          .offset-#{$breakpoint}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns)
+          }
+        }
+      }
     }
   }
 }

src/sass/bootstrap4/mixins/_grid.scss

@@ -14,9 +14,9 @@
 
 
 // For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths) {
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
   @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
       max-width: $container-max-width;
     }
   }
@@ -33,20 +33,29 @@
   margin-right: ($gutter / -2);
 }
 
-@mixin make-col($gutter: $grid-gutter-width) {
+@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   position: relative;
-  @if not $enable-flex {
+  min-height: 1px; // Prevent collapsing
-    float: left;
-  }
-  min-height: 1px;
-  padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
+  padding-left:  ($gutter / 2);
+
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  @if $enable-flex {
+    width: 100%;
+  }
 }
 
-@mixin make-col-span($size, $columns: $grid-columns) {
+@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   @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 {
+    float: left;
     width: percentage($size / $columns);
   }
 }

src/sass/bootstrap4/mixins/_hover.scss

@@ -1,14 +1,15 @@
 @mixin hover {
-  @if $enable-hover-media-query {
+  // TODO: re-enable along with mq4-hover-shim
-    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+//  @if $enable-hover-media-query {
-    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+//    // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
-    @media (hover: hover) {
+//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
-      &:hover { @content }
+//    @media (hover: hover) {
-    }
+//      &:hover { @content }
-  }
+//    }
-  @else {
+//  }
+//  @else {
     &:hover { @content }
-  }
+//  }
 }
 
 @mixin hover-focus {

src/sass/bootstrap4/mixins/_pagination.scss

@@ -1,10 +1,9 @@
 // Pagination
 
-@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   .page-link {
-    padding: $padding-vertical $padding-horizontal;
+    padding: $padding-y $padding-x;
     font-size: $font-size;
-    line-height: $line-height;
   }
 
   .page-item {

src/sass/bootstrap4/mixins/_progress.scss

@@ -9,6 +9,11 @@
     background-color: $color;
   }
 
+  // IE10+, Microsoft Edge
+  &[value]::-ms-fill {
+    background-color: $color;
+  }
+
   // IE9
   @media screen and (min-width:0\0) {
     .progress-bar {

src/sass/bootstrap4/mixins/_reset-text.scss

@@ -1,11 +1,11 @@
 @mixin reset-text {
   font-family: $font-family-base;
-  // We deliberately do NOT reset font-size.
+  // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
-  line-height: $line-height;
+  line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
@@ -14,5 +14,4 @@
   white-space: normal;
   word-break: normal;
   word-spacing: normal;
-  word-wrap: normal;
 }

src/sass/bootstrap4/mixins/_screen-reader.scss

@@ -1,6 +1,6 @@
 // Only display content to screen readers
 //
-// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: http://a11yproject.com/posts/how-to-hide-content
 
 @mixin sr-only {
   position: absolute;

src/sass/bootstrap4/mixins/_tab-focus.scss

@@ -1,9 +1,9 @@
 // WebKit-style focus
 
 @mixin tab-focus() {
-  // Default
+  // WebKit-specific. Other browsers will keep their default outline style.
-  outline: thin dotted;
+  // (Initially tried to also force default via `outline: initial`,
-  // WebKit
+  // but that seems to erroneously remove the outline in Firefox altogether.)
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }

src/sass/bootstrap4/mixins/_tag.scss

@@ -0,0 +1,11 @@
+// Tags
+
+@mixin tag-variant($color) {
+  background-color: $color;
+
+  &[href] {
+    @include hover-focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}

src/sass/bootstrap4/mixins/_text-hide.scss

@@ -1,6 +1,6 @@
 // CSS image replacement
 @mixin text-hide() {
-  font: "0/0" a;
+  font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;

src/sass/bootstrap4/utilities/_background.scss

@@ -0,0 +1,21 @@
+//
+// Contextual backgrounds
+//
+
+.bg-inverse {
+  background-color: $brand-inverse;
+}
+
+.bg-faded {
+  background-color: $gray-lightest;
+}
+
+@include bg-variant('.bg-primary', $brand-primary);
+
+@include bg-variant('.bg-success', $brand-success);
+
+@include bg-variant('.bg-info', $brand-info);
+
+@include bg-variant('.bg-warning', $brand-warning);
+
+@include bg-variant('.bg-danger', $brand-danger);

src/sass/bootstrap4/utilities/_clearfix.scss

@@ -0,0 +1,3 @@
+.clearfix {
+  @include clearfix();
+}

src/sass/bootstrap4/utilities/_display.scss

@@ -0,0 +1,13 @@
+//
+// Display utilities
+//
+
+.d-block {
+  display: block !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-inline {
+  display: inline !important;
+}

src/sass/bootstrap4/utilities/_flex.scss

@@ -0,0 +1,37 @@
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@if $enable-flex {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    // Flex column reordering
+    @include media-breakpoint-up($breakpoint) {
+      .flex-#{$breakpoint}-first { order: -1; }
+      .flex-#{$breakpoint}-last { order: 1; }
+      .flex-#{$breakpoint}-unordered { order: 0; }
+    }
+
+    // Alignment for every item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-items-#{$breakpoint}-top { align-items: flex-start; }
+      .flex-items-#{$breakpoint}-middle { align-items: center; }
+      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
+    }
+
+    // Alignment per item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-#{$breakpoint}-top   { align-self: flex-start; }
+      .flex-#{$breakpoint}-middle { align-self: center; }
+      .flex-#{$breakpoint}-bottom { align-self: flex-end; }
+    }
+
+    // Horizontal alignment of item
+    @include media-breakpoint-up($breakpoint) {
+      .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
+      .flex-items-#{$breakpoint}-center { justify-content: center; }
+      .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
+      .flex-items-#{$breakpoint}-around { justify-content: space-around; }
+      .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+    }
+  }
+}

src/sass/bootstrap4/utilities/_pulls.scss

@@ -0,0 +1,13 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .pull-#{$breakpoint}-left {
+      @include pull-left();
+    }
+    .pull-#{$breakpoint}-right {
+      @include pull-right();
+    }
+    .pull-#{$breakpoint}-none {
+      float: none !important;
+    }
+  }
+}

src/sass/bootstrap4/utilities/_screenreaders.scss

@@ -0,0 +1,11 @@
+//
+// Screenreaders
+//
+
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
+}

src/sass/bootstrap4/utilities/_spacing.scss

@@ -0,0 +1,43 @@
+// Width
+
+.w-100 { width: 100% !important; }
+
+// Margin and Padding
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left:  auto !important;
+}
+
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $lengths in $spacers {
+    $length-x:   map-get($lengths, x);
+    $length-y:   map-get($lengths, y);
+
+    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
+    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
+    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
+    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
+
+    // Axes
+    .#{$abbrev}-x-#{$size} {
+      #{$prop}-right:  $length-x !important;
+      #{$prop}-left:   $length-x !important;
+    }
+    .#{$abbrev}-y-#{$size} {
+      #{$prop}-top:    $length-y !important;
+      #{$prop}-bottom: $length-y !important;
+    }
+  }
+}
+
+// Positioning
+
+.pos-f-t {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+}

src/sass/bootstrap4/utilities/_text.scss

@@ -0,0 +1,51 @@
+//
+// Text
+//
+
+// Alignment
+
+.text-justify        { text-align: justify !important; }
+.text-nowrap         { white-space: nowrap !important; }
+.text-truncate       { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .text-#{$breakpoint}-left   { text-align: left !important; }
+    .text-#{$breakpoint}-right  { text-align: right !important; }
+    .text-#{$breakpoint}-center { text-align: center !important; }
+  }
+}
+
+// Transformation
+
+.text-lowercase      { text-transform: lowercase !important; }
+.text-uppercase      { text-transform: uppercase !important; }
+.text-capitalize     { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-normal  { font-weight: normal; }
+.font-weight-bold    { font-weight: bold; }
+.font-italic         { font-style: italic; }
+
+// Contextual colors
+
+@include text-emphasis-variant('.text-muted', $text-muted);
+
+@include text-emphasis-variant('.text-primary', $brand-primary);
+
+@include text-emphasis-variant('.text-success', $brand-success);
+
+@include text-emphasis-variant('.text-info', $brand-info);
+
+@include text-emphasis-variant('.text-warning', $brand-warning);
+
+@include text-emphasis-variant('.text-danger', $brand-danger);
+
+// Misc
+
+.text-hide {
+  @include text-hide();
+}

src/sass/bootstrap4/utilities/_visibility.scss

@@ -0,0 +1,57 @@
+// scss-lint:disable ImportantRule
+
+//
+// Visibility utilities
+//
+
+.invisible {
+  visibility: hidden !important;
+}
+
+// Responsive visibility utilities
+
+@each $bp in map-keys($grid-breakpoints) {
+  .hidden-#{$bp}-up {
+    @include media-breakpoint-up($bp) {
+      display: none !important;
+    }
+  }
+  .hidden-#{$bp}-down {
+    @include media-breakpoint-down($bp) {
+      display: none !important;
+    }
+  }
+}
+
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+.visible-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+.visible-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+.visible-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.hidden-print {
+  @media print {
+    display: none !important;
+  }
+}