Merge pull request #1 from understrap/master

Update local fork

.editorconfig

@@ -0,0 +1,21 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2
+
+[{*.txt,wp-config-sample.php}]
+end_of_line = crlf

404.php

@@ -28,15 +28,13 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 						<header class="page-header">
 
-							<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.',
+							<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'understrap' ); ?></h1>
-							'understrap' ); ?></h1>
 
 						</header><!-- .page-header -->
 
 						<div class="page-content">
 
-							<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?',
+							<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'understrap' ); ?></p>
-							'understrap' ); ?></p>
 
 							<?php get_search_form(); ?>
 
@@ -50,13 +48,15 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 									<ul>
 										<?php
-										wp_list_categories( array(
+										wp_list_categories(
+											array(
 												'orderby'    => 'count',
 												'order'      => 'DESC',
 												'show_count' => 1,
 												'title_li'   => '',
 												'number'     => 10,
-										) );
+											)
+										);
 										?>
 									</ul>
 
@@ -83,8 +83,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row -->
 
-	</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #error-404-wrapper -->
 
 <?php get_footer(); ?>

CHANGELOG.md

@@ -1,3 +1,19 @@
+            - ** Release 0.8.9 December 28th 2018 **
+              - Update to Bootstrap 4.2.1
+              - Fix for #796  - thx @IanDelMar
+              - Add .editorconfig - thx @IanDelMar
+              - Clean up gulp file and package.json according to #853
+              - Conditionally add pingback - thx @IanDelMar
+              - Add mobile-web-app meta as action  - thx @IanDelMar
+              - Fixing spacing and indentation on a lot of spots - thx @IanDelMar
+              - Update comments.php - thx @IanDelMar
+              - Update sidebar-statichero.php - thx @IanDelMar
+              - Update several .php files - thx @IanDelMar
+              - Fix dropdown when setting depth=0 in wp_nav_menu - thx @stevygee
+              - WooCommerce 3.5.2 update - thx @Fatshape
+              - Fix for issue #876 - thx @Noel Springer
+
+
             - ** Release 0.8.8 November 1st 2018 **
               - Refactor functions.php - Thx @ylkyrg
               - Fix for #808  - Thx @VarunBatraIT
@@ -154,7 +170,7 @@
               - Fixing colormap problem with beta 2
               - Making navwalker function pluggable  - Thx @bruceconlon
               - Adding WordPress title attribute - Thx @JDVirtual and @Thomas-A-Reinert
-              - Fixing comments in _theme_variable.scss - thx @ianwyllie
+              - Fixing comments in theme_variable.scss - thx @ianwyllie
               - Adding spaces the separate "posted on" and "edited" timestamps  - Thx @bruceconlon
 
 
@@ -237,7 +253,7 @@
                - Adding AJAX classes to add-to-cart buttons - thx @typeplus
                - Updating Jetpack integration
                - Fixing "missing" h1 on frontpage problem
-               - Updating inc/template-tags.php from _s
+               - Updating inc/template-tags.php from s
                - Fixing W3C validator issues
                - Removing cleancss gulp task from cssnano task sequence due to performance issues
 
@@ -395,7 +411,7 @@
             - ** 0.3.4 SEP. 9th 2015**
                    - Adding basic WooCommerce support
                    - Cleanup for submitting to wordpress.org
-                   - Removing _s SASS ... no need for basic styling. Thats Bootstrap´s job.
+                   - Removing s SASS ... no need for basic styling. Thats Bootstrap´s job.
 
 
             - ** 0.3.1 AUG. 12th 2015**

archive.php

@@ -12,9 +12,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 }
 
 get_header();
-?>
 
-<?php
 $container = get_theme_mod( 'understrap_container_type' );
 ?>
 
@@ -69,8 +67,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div> <!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+	</div><!-- #archive-wrapper -->
 
 <?php get_footer(); ?>

author.php

@@ -15,7 +15,6 @@ get_header();
 $container = get_theme_mod( 'understrap_container_type' );
 ?>
 
-
 <div class="wrapper" id="author-wrapper">
 
 	<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
@@ -30,16 +29,20 @@ $container   = get_theme_mod( 'understrap_container_type' );
 				<header class="page-header author-header">
 
 					<?php
-					$curauth = ( isset( $_GET['author_name'] ) ) ? get_user_by( 'slug',
+					if ( isset( $_GET['author_name'] ) ) {
-						$author_name ) : get_userdata( intval( $author ) );
+						$curauth = get_user_by( 'slug', $author_name );
+					} else {
+						$curauth = get_userdata( intval( $author ) );
+					}
 					?>
 
-					<h1><?php esc_html_e( 'About:', 'understrap' ); ?><?php echo esc_html( $curauth->nickname ); ?></h1>
+					<h1><?php echo esc_html__( 'About:', 'understrap' ) . ' ' . esc_html( $curauth->nickname ); ?></h1>
 
 					<?php if ( ! empty( $curauth->ID ) ) : ?>
 						<?php echo get_avatar( $curauth->ID ); ?>
 					<?php endif; ?>
 
+					<?php if ( ! empty( $curauth->user_url ) || ! empty( $curauth->user_description ) ) : ?>
 						<dl>
 							<?php if ( ! empty( $curauth->user_url ) ) : ?>
 								<dt><?php esc_html_e( 'Website', 'understrap' ); ?></dt>
@@ -50,12 +53,12 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 							<?php if ( ! empty( $curauth->user_description ) ) : ?>
 								<dt><?php esc_html_e( 'Profile', 'understrap' ); ?></dt>
-							<dd><?php echo esc_html( $curauth->user_description ); ?></dd>
+								<dd><?php esc_html_e( $curauth->user_description ); ?></dd>
 							<?php endif; ?>
 						</dl>
+					<?php endif; ?>
 
-					<h2><?php esc_html_e( 'Posts by', 'understrap' ); ?> <?php echo esc_html( $curauth->nickname ); ?>
+					<h2><?php echo esc_html( 'Posts by', 'understrap' ) . ' ' . esc_html( $curauth->nickname ); ?>:</h2>
-						:</h2>
 
 				</header><!-- .page-header -->
 
@@ -65,11 +68,17 @@ $container   = get_theme_mod( 'understrap_container_type' );
 					<?php if ( have_posts() ) : ?>
 						<?php while ( have_posts() ) : the_post(); ?>
 							<li>
-								<a rel="bookmark" href="<?php the_permalink() ?>"
+								<?php
-								   title="<?php esc_html_e( 'Permanent Link:', 'understrap' ); ?> <?php the_title(); ?>">
+								printf(
-									<?php the_title(); ?></a>,
+									'<a rel="bookmark" href="%1$s" title="%2$s %3$s">%3$s</a>',
-								<?php understrap_posted_on(); ?> <?php esc_html_e( 'in',
+									esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) ),
-								'understrap' ); ?> <?php the_category( '&' ); ?>
+									esc_attr( __( 'Permanent Link:', 'understrap' ) ),
+									the_title( '', '', false )
+								);
+								?>
+								<?php understrap_posted_on(); ?> 
+								<?php esc_html_e( 'in', 'understrap' ); ?> 
+								<?php the_category( '&' ); ?>
 							</li>
 						<?php endwhile; ?>
 
@@ -93,8 +102,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div> <!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #author-wrapper -->
 
 <?php get_footer(); ?>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "understrap",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "homepage": "http://understrap.com",
   "authors": [
     "Holger Koenemann <office@holgerkoenemann.de>"
@@ -26,6 +26,6 @@
   "dependencies": {
   },
   "_source": "https://github.com/holger1411/understrap.git",
-  "_target": "~0.8.8",
+  "_target": "~0.8.9",
   "_originalSource": "understrap"
 }

comments.php

@@ -63,12 +63,15 @@ if ( post_password_required() ) {
 				<h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'understrap' ); ?></h1>
 
 				<?php if ( get_previous_comments_link() ) { ?>
-					<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments',
+					<div class="nav-previous">
-					'understrap' ) ); ?></div>
+						<?php previous_comments_link( __( '&larr; Older Comments', 'understrap' ) ); ?>
-				<?php }
+					</div>
-					if ( get_next_comments_link() ) { ?>
+				<?php } ?>
-					<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;',
+
-					'understrap' ) ); ?></div>
+				<?php	if ( get_next_comments_link() ) { ?>
+					<div class="nav-next">
+						<?php next_comments_link( __( 'Newer Comments &rarr;', 'understrap' ) ); ?>
+					</div>
 				<?php } ?>
 
 			</nav><!-- #comment-nav-above -->
@@ -78,10 +81,12 @@ if ( post_password_required() ) {
 		<ol class="comment-list">
 
 			<?php
-			wp_list_comments( array(
+			wp_list_comments(
+				array(
 					'style'      => 'ol',
 					'short_ping' => true,
-			) );
+				)
+			);
 			?>
 
 		</ol><!-- .comment-list -->
@@ -93,12 +98,15 @@ if ( post_password_required() ) {
 				<h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'understrap' ); ?></h1>
 
 				<?php if ( get_previous_comments_link() ) { ?>
-					<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments',
+					<div class="nav-previous">
-					'understrap' ) ); ?></div>
+						<?php previous_comments_link( __( '&larr; Older Comments', 'understrap' ) ); ?>
-				<?php }
+					</div>
-					if ( get_next_comments_link() ) { ?>
+				<?php } ?>
-					<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;',
+
-					'understrap' ) ); ?></div>
+				<?php	if ( get_next_comments_link() ) { ?>
+					<div class="nav-next">
+						<?php next_comments_link( __( 'Newer Comments &rarr;', 'understrap' ) ); ?>
+					</div>
 				<?php } ?>
 
 			</nav><!-- #comment-nav-below -->

global-templates/left-sidebar-check.php

@@ -8,9 +8,7 @@
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
-?>
 
-<?php
 $sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
 ?>
 

gulpfile.js

@@ -200,7 +200,7 @@ gulp.task( 'clean-vendor-assets', function() {
 // gulp dist
 // Copies the files to the /dist folder for distribution as simple theme
 gulp.task( 'dist', ['clean-dist'], function() {
-  return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore',  '!codesniffer.ruleset.xml',  '*'], { 'buffer': false } )
+  return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore',  '!codesniffer.ruleset.xml',  '*'], { 'buffer': true } )
   .pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
   .pipe( replace( '/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', { 'skipBinary': true } ) )
   .pipe( replace( '/js/skip-link-focus-fix.js', '/js' + paths.vendor + '/skip-link-focus-fix.js', { 'skipBinary': true } ) )

header.php

@@ -18,11 +18,7 @@ $container = get_theme_mod( 'understrap_container_type' );
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-title" content="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>">
 	<link rel="profile" href="http://gmpg.org/xfn/11">
-	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 	<?php wp_head(); ?>
 </head>
 

inc/class-wp-bootstrap-navwalker.php

@@ -185,7 +185,7 @@ if ( ! class_exists( 'Understrap_WP_Bootstrap_Navwalker' ) ) {
 			$atts['target'] = ! empty( $item->target ) ? $item->target : '';
 			$atts['rel']    = ! empty( $item->xfn ) ? $item->xfn : '';
 			// If item has_children add atts to <a>.
-			if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth > 1 ) {
+			if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
 				$atts['href']          = '#';
 				$atts['data-toggle']   = 'dropdown';
 				$atts['aria-haspopup'] = 'true';

inc/custom-header.php

@@ -31,19 +31,27 @@ if ( ! function_exists ( 'understrap_custom_header_setup' ) ) {
 		 *     @type string $flex-height            Flex support for height of header.
 		 * }
 		 */
-		add_theme_support( 'custom-header', apply_filters( 'understrap_custom_header_args', array(
+		add_theme_support(
+			'custom-header',
+			apply_filters(
+				'understrap_custom_header_args',
+				array(
 					'default-image' => get_parent_theme_file_uri( '/img/header.jpg' ),
 					'width'         => 2000,
 					'height'        => 1200,
 					'flex-height'   => true,
-		) ) );
+				)
+			)
+		);
 
-		register_default_headers( array(
+		register_default_headers(
+			array(
 				'default-image' => array(
 					'url'           => '%s/img/header.jpg',
 					'thumbnail_url' => '%s/img/header.jpg',
 					'description'   => __( 'Default Header Image', 'understrap' ),
 				),
-		) );
+			)
+		);
 	}
 }

inc/customizer.php

@@ -37,12 +37,15 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 	function understrap_theme_customize_register( $wp_customize ) {
 
 		// Theme layout settings.
-		$wp_customize->add_section( 'understrap_theme_layout_options', array(
+		$wp_customize->add_section(
+			'understrap_theme_layout_options',
+			array(
 				'title'       => __( 'Theme Layout Settings', 'understrap' ),
 				'capability'  => 'edit_theme_options',
 				'description' => __( 'Container width and sidebar defaults', 'understrap' ),
 				'priority'    => 160,
-		) );
+			)
+		);
 
 		/**
 		 * Select sanitization function
@@ -64,17 +67,21 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 
 		}
 
-		$wp_customize->add_setting( 'understrap_container_type', array(
+		$wp_customize->add_setting(
+			'understrap_container_type',
+			array(
 				'default'           => 'container',
 				'type'              => 'theme_mod',
 				'sanitize_callback' => 'understrap_theme_slug_sanitize_select',
 				'capability'        => 'edit_theme_options',
-		) );
+			)
+		);
 
 		$wp_customize->add_control(
 			new WP_Customize_Control(
 				$wp_customize,
-				'understrap_container_type', array(
+				'understrap_container_type',
+				array(
 					'label'       => __( 'Container Width', 'understrap' ),
 					'description' => __( 'Choose between Bootstrap\'s container and container-fluid', 'understrap' ),
 					'section'     => 'understrap_theme_layout_options',
@@ -86,22 +93,29 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 					),
 					'priority'    => '10',
 				)
-			) );
+			)
+		);
 
-		$wp_customize->add_setting( 'understrap_sidebar_position', array(
+		$wp_customize->add_setting(
+			'understrap_sidebar_position',
+			array(
 				'default'           => 'right',
 				'type'              => 'theme_mod',
 				'sanitize_callback' => 'sanitize_text_field',
 				'capability'        => 'edit_theme_options',
-		) );
+			)
+		);
 
 		$wp_customize->add_control(
 			new WP_Customize_Control(
 				$wp_customize,
-				'understrap_sidebar_position', array(
+				'understrap_sidebar_position',
+				array(
 					'label'             => __( 'Sidebar Positioning', 'understrap' ),
-					'description' => __( 'Set sidebar\'s default position. Can either be: right, left, both or none. Note: this can be overridden on individual pages.',
+					'description'       => __(
-					'understrap' ),
+						'Set sidebar\'s default position. Can either be: right, left, both or none. Note: this can be overridden on individual pages.',
+						'understrap'
+					),
 					'section'           => 'understrap_theme_layout_options',
 					'settings'          => 'understrap_sidebar_position',
 					'type'              => 'select',
@@ -114,7 +128,8 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 					),
 					'priority'          => '20',
 				)
-			) );
+			)
+		);
 	}
 } // endif function_exists( 'understrap_theme_customize_register' ).
 add_action( 'customize_register', 'understrap_theme_customize_register' );
@@ -127,8 +142,12 @@ if ( ! function_exists( 'understrap_customize_preview_js' ) ) {
 	 * Setup JS integration for live previewing.
 	 */
 	function understrap_customize_preview_js() {
-		wp_enqueue_script( 'understrap_customizer', get_template_directory_uri() . '/js/customizer.js',
+		wp_enqueue_script(
-			array( 'customize-preview' ), '20130508', true
+			'understrap_customizer',
+			get_template_directory_uri() . '/js/customizer.js',
+			array( 'customize-preview' ),
+			'20130508',
+			true
 		);
 	}
 }

inc/editor.php

@@ -43,28 +43,28 @@ if ( ! function_exists ( 'understrap_tiny_mce_before_init' ) ) {
 				'title'    => 'Lead Paragraph',
 				'selector' => 'p',
 				'classes'  => 'lead',
-            'wrapper' => true
+				'wrapper'  => true,
 			),
 			array(
 				'title'  => 'Small',
-            'inline' => 'small'
+				'inline' => 'small',
 			),
 			array(
 				'title'   => 'Blockquote',
 				'block'   => 'blockquote',
 				'classes' => 'blockquote',
-            'wrapper' => true
+				'wrapper' => true,
 			),
 			array(
 				'title'   => 'Blockquote Footer',
 				'block'   => 'footer',
 				'classes' => 'blockquote-footer',
-            'wrapper' => true
+				'wrapper' => true,
 			),
 			array(
 				'title'  => 'Cite',
-            'inline' => 'cite'
+				'inline' => 'cite',
-        )
+			),
 		);
 
 		if ( isset( $settings['style_formats'] ) ) {

inc/extras.php

@@ -95,10 +95,9 @@ if ( ! function_exists ( 'understrap_post_nav' ) ) {
 		}
 		?>
 		<nav class="container navigation post-navigation">
-					<h2 class="sr-only"><?php _e( 'Post navigation', 'understrap' ); ?></h2>
+			<h2 class="sr-only"><?php esc_html_e( 'Post navigation', 'understrap' ); ?></h2>
 			<div class="row nav-links justify-content-between">
 				<?php
-
 				if ( get_previous_post_link() ) {
 					previous_post_link( '<span class="nav-previous">%link</span>', _x( '<i class="fa fa-angle-left"></i>&nbsp;%title', 'Previous post link', 'understrap' ) );
 				}
@@ -108,7 +107,26 @@ if ( ! function_exists ( 'understrap_post_nav' ) ) {
 				?>
 			</div><!-- .nav-links -->
 		</nav><!-- .navigation -->
-
 		<?php
 	}
 }
+
+/**
+ * Add a pingback url auto-discovery header for single posts of any post type.
+ */
+function understrap_pingback() {
+	if ( is_singular() && pings_open() ) {
+		echo '<link rel="pingback" href="' . esc_url( get_bloginfo( 'pingback_url' ) ) . '">' . "\n";
+	}
+}
+add_action( 'wp_head', 'understrap_pingback' );
+
+/**
+ * Add mobile-web-app meta.
+ */
+function understrap_mobile_web_app_meta() {
+	echo '<meta name="mobile-web-app-capable" content="yes">' . "\n";
+	echo '<meta name="apple-mobile-web-app-capable" content="yes">' . "\n";
+	echo '<meta name="apple-mobile-web-app-title" content="' . esc_attr( get_bloginfo( 'name' ) ) . ' - ' . esc_attr( get_bloginfo( 'description' ) ) . '">' . "\n";
+}
+add_action( 'wp_head', 'understrap_mobile_web_app_meta' );

inc/hooks.php

@@ -32,15 +32,19 @@ if ( ! function_exists( 'understrap_add_site_info' ) ) {
 			esc_url( __( 'http://wordpress.org/', 'understrap' ) ),
 			sprintf(
 				/* translators:*/
-        esc_html__( 'Proudly powered by %s', 'understrap' ), 'WordPress'
+				esc_html__( 'Proudly powered by %s', 'understrap' ),
+				'WordPress'
 			),
 			sprintf( // WPCS: XSS ok.
 				/* translators:*/
-        esc_html__( 'Theme: %1$s by %2$s.', 'understrap' ), $the_theme->get( 'Name' ), '<a href="' . esc_url( __( 'http://understrap.com', 'understrap' ) ) . '">understrap.com</a>'
+				esc_html__( 'Theme: %1$s by %2$s.', 'understrap' ),
+				$the_theme->get( 'Name' ),
+				'<a href="' . esc_url( __( 'http://understrap.com', 'understrap' ) ) . '">understrap.com</a>'
 			),
 			sprintf( // WPCS: XSS ok.
 				/* translators:*/
-        esc_html__( 'Version: %1$s', 'understrap' ), $the_theme->get( 'Version' )
+				esc_html__( 'Version: %1$s', 'understrap' ),
+				$the_theme->get( 'Version' )
 			)
 		);
 

inc/jetpack.php

@@ -23,11 +23,14 @@ add_action( 'after_setup_theme', 'understrap_components_jetpack_setup' );
 if ( ! function_exists( 'understrap_components_jetpack_setup' ) ) {
 	function understrap_components_jetpack_setup() {
 		// Add theme support for Infinite Scroll.
-		add_theme_support( 'infinite-scroll', array(
+		add_theme_support(
+			'infinite-scroll',
+			array(
 				'container' => 'main',
 				'render'    => 'understrap_components_infinite_scroll_render',
 				'footer'    => 'page',
-		) );
+			)
+		);
 
 		// Add theme support for Responsive Videos.
 		add_theme_support( 'jetpack-responsive-videos' );

inc/pagination.php

@@ -13,9 +13,13 @@ if ( ! function_exists ( 'understrap_pagination' ) ) {
 
 	function understrap_pagination( $args = array(), $class = 'pagination' ) {
 
-        if ($GLOBALS['wp_query']->max_num_pages <= 1) return;
+		if ( $GLOBALS['wp_query']->max_num_pages <= 1 ) {
+			return;
+		}
 
-		$args = wp_parse_args( $args, array(
+		$args = wp_parse_args(
+			$args,
+			array(
 				'mid_size'           => 2,
 				'prev_next'          => true,
 				'prev_text'          => __( '&laquo;', 'understrap' ),
@@ -23,7 +27,8 @@ if ( ! function_exists ( 'understrap_pagination' ) ) {
 				'screen_reader_text' => __( 'Posts navigation', 'understrap' ),
 				'type'               => 'array',
 				'current'            => max( 1, get_query_var( 'paged' ) ),
-		) );
+			)
+		);
 
 		$links = paginate_links( $args );
 
@@ -34,16 +39,14 @@ if ( ! function_exists ( 'understrap_pagination' ) ) {
 			<ul class="pagination">
 
 				<?php
-
+				foreach ( $links as $key => $link ) {
-                    foreach ( $links as $key => $link ) { ?>
+					?>
-
+					<li class="page-item <?php echo strpos( $link, 'current' ) ? 'active' : ''; ?>">
-                        <li class="page-item <?php echo strpos( $link, 'current' ) ? 'active' : '' ?>">
-
 						<?php echo str_replace( 'page-numbers', 'page-link', $link ); ?>
-
 					</li>
-
+					<?php
-                <?php } ?>
+				}
+				?>
 
 			</ul>
 

inc/theme-settings.php

@@ -3,7 +3,6 @@
  * Check and setup theme's default settings
  *
  * @package understrap
- *
  */
 
 if ( ! defined( 'ABSPATH' ) ) {

inc/woocommerce.php

@@ -17,7 +17,7 @@ if ( ! function_exists( 'understrap_woocommerce_support' ) ) {
 	function understrap_woocommerce_support() {
 		add_theme_support( 'woocommerce' );
 
-		// Add New Woocommerce 3.0.0 Product Gallery support
+		// Add New Woocommerce 3.0.0 Product Gallery support.
 		add_theme_support( 'wc-product-gallery-lightbox' );
 		add_theme_support( 'wc-product-gallery-zoom' );
 		add_theme_support( 'wc-product-gallery-slider' );

index.php

@@ -67,11 +67,10 @@ $container   = get_theme_mod( 'understrap_container_type' );
 			<!-- Do the right sidebar check -->
 			<?php get_template_part( 'global-templates/right-sidebar-check' ); ?>
 
-
 		</div><!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #index-wrapper -->
 
 <?php get_footer(); ?>

loop-templates/content-page.php

@@ -25,10 +25,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 		<?php the_content(); ?>
 
 		<?php
-		wp_link_pages( array(
+		wp_link_pages(
+			array(
 				'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
 				'after'  => '</div>',
-		) );
+			)
+		);
 		?>
 
 	</div><!-- .entry-content -->

loop-templates/content-search.php

@@ -14,8 +14,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 	<header class="entry-header">
 
-		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
+		<?php
-		'</a></h2>' ); ?>
+		the_title(
+			sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
+			'</a></h2>'
+		);
+		?>
 
 		<?php if ( 'post' == get_post_type() ) : ?>
 

loop-templates/content-single.php

@@ -31,10 +31,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 		<?php the_content(); ?>
 
 		<?php
-		wp_link_pages( array(
+		wp_link_pages(
+			array(
 				'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
 				'after'  => '</div>',
-		) );
+			)
+		);
 		?>
 
 	</div><!-- .entry-content -->

loop-templates/content.php

@@ -14,8 +14,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 	<header class="entry-header">
 
-		<?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
+		<?php
-		'</a></h2>' ); ?>
+		the_title(
+			sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
+			'</a></h2>'
+		);
+		?>
 
 		<?php if ( 'post' == get_post_type() ) : ?>
 
@@ -31,15 +35,15 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 	<div class="entry-content">
 
-		<?php
+		<?php the_excerpt(); ?>
-		the_excerpt();
-		?>
 
 		<?php
-		wp_link_pages( array(
+		wp_link_pages(
+			array(
 				'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
 				'after'  => '</div>',
-		) );
+			)
+		);
 		?>
 
 	</div><!-- .entry-content -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "understrap",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "WordPress Theme framework",
   "main": "index.js",
   "scripts": {
@@ -27,23 +27,23 @@
   },
   "homepage": "https://understrap.com",
   "dependencies": {
-    "bootstrap": "4.1.3",
+    "bootstrap": "4.2.1",
-    "browser-sync": "^2.23.6",
+    "browser-sync": "^2.26.3",
     "del": "^3.0.0",
     "font-awesome": "^4.7.0",
     "gulp": "3.9.1",
-    "gulp-clean-css": "^3.9.2",
+    "gulp-clean-css": "^4.0.0",
     "gulp-concat": "^2.6.1",
     "gulp-ignore": "^2.0.2",
-    "gulp-imagemin": "^4.1.0",
+    "gulp-imagemin": "^5.0.3",
-    "gulp-plumber": "^1.2.0",
+    "gulp-plumber": "^1.2.1",
-    "gulp-rename": "^1.2.2",
+    "gulp-rename": "^1.4.0",
     "gulp-replace": "1.0.0",
     "gulp-rimraf": "^0.2.2",
     "gulp-sass": "4.0.2",
     "gulp-sequence": "1.0.0",
     "gulp-sourcemaps": "2.6.4",
-    "gulp-uglify": "^3.0.0",
+    "gulp-uglify": "^3.0.1",
     "gulp-watch": "5.0.1",
     "run-sequence": "^2.2.1",
     "undescores-for-npm": "^1.0.0",

page-templates/blank.php

@@ -17,12 +17,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-title"
-		content="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>">
 	<link rel="profile" href="http://gmpg.org/xfn/11">
-	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 	<?php wp_head(); ?>
 </head>
 <body>

page-templates/both-sidebarspage.php

@@ -54,8 +54,8 @@ $container = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row -->
 
-	</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- page-wrapper -->
 
 <?php get_footer(); ?>

page-templates/empty.php

@@ -14,7 +14,8 @@ if ( ! defined( 'ABSPATH' ) ) {
 
 get_header();
 
-while ( have_posts() ) : the_post();
+while ( have_posts() ) :
+	the_post();
 	get_template_part( 'loop-templates/content', 'empty' );
 endwhile;
 

page-templates/fullwidthpage.php

@@ -32,9 +32,7 @@ $container = get_theme_mod( 'understrap_container_type' );
 						<?php
 						// If comments are open or we have at least one comment, load up the comment template.
 						if ( comments_open() || get_comments_number() ) :
-
 							comments_template();
-
 						endif;
 						?>
 
@@ -46,8 +44,8 @@ $container = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row end -->
 
-	</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #full-width-page-wrapper -->
 
 <?php get_footer(); ?>

page.php

@@ -51,8 +51,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #page-wrapper -->
 
 <?php get_footer(); ?>

readme.txt

@@ -11,7 +11,7 @@ At the moment, UnderStrap is in a very early stage. But if you want, feel free t
 
 # UnderStrap WordPress Theme Framework
 
-Website: [http://understrap.com](http://understrap.com)
+Website: [https://understrap.com](https://understrap.com)
 
 Child Theme Project: [https://github.com/holger1411/understrap-child](https://github.com/holger1411/understrap-child)
 
@@ -212,12 +212,12 @@ The front-page slider is widget driven. Simply add more than one widget to widge
 - Add two, or more, widgets of any kind to widget area “Hero”.
 - That’s it.
 
-[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync
+[1] Visit [https://browsersync.io](https://browsersync.io) for more information on Browser Sync
 
 Licenses & Credits
 =
 - Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
-- Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT documentation under CC BY 3.0.)
+- Bootstrap: https://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT documentation under CC BY 3.0.)
 - Owl Carousel 2: http://www.owlcarousel.owlgraphic.com/ | https://github.com/smashingboxes/OwlCarousel2/blob/develop/LICENSE (Code licensed under MIT)
 and of course
 - jQuery: https://jquery.org | (Code licensed under MIT)

sass/assets/bootstrap4.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.1.0 (https://getbootstrap.com/)
+ * Bootstrap v4.2.1 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -34,6 +34,7 @@
 @import "../../src/sass/bootstrap4/media";
 @import "../../src/sass/bootstrap4/list-group";
 @import "../../src/sass/bootstrap4/close";
+@import "../../src/sass/bootstrap4/toasts";
 @import "../../src/sass/bootstrap4/modal";
 @import "../../src/sass/bootstrap4/tooltip";
 @import "../../src/sass/bootstrap4/popover";

sass/understrap/woocommerce.scss

@@ -7,3 +7,10 @@
 figure.woocommerce-product-gallery__wrapper {
 	max-width: inherit !important;
 }
+
+// Fix coupon code input width
+@media(min-width: 768px) {
+	#coupon_code.input-text {
+		width: 110px !important;
+	}
+}

search.php

@@ -30,10 +30,15 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 					<header class="page-header">
 
-							<h1 class="page-title"><?php printf(
+							<h1 class="page-title">
-							/* translators:*/
+								<?php
+								printf(
+									/* translators: %s: query term */
 									esc_html__( 'Search Results for: %s', 'understrap' ),
-								'<span>' . get_search_query() . '</span>' ); ?></h1>
+									'<span>' . get_search_query() . '</span>'
+								);
+								?>
+							</h1>
 
 					</header><!-- .page-header -->
 
@@ -67,8 +72,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #search-wrapper -->
 
 <?php get_footer(); ?>

searchform.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * The template for displaying search forms in Underscores.me
+ * The template for displaying search forms
  *
  * @package understrap
  */

sidebar-templates/sidebar-statichero.php

@@ -5,11 +5,11 @@
  * @package understrap
  */
 
-$container = get_theme_mod( 'understrap_container_type' );
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 
+$container = get_theme_mod( 'understrap_container_type' );
 ?>
 
 <?php if ( is_active_sidebar( 'statichero' ) ) : ?>

single.php

@@ -46,8 +46,8 @@ $container   = get_theme_mod( 'understrap_container_type' );
 
 		</div><!-- .row -->
 
-</div><!-- Container end -->
+	</div><!-- #content -->
 
-</div><!-- Wrapper end -->
+</div><!-- #single-wrapper -->
 
 <?php get_footer(); ?>

src/sass/bootstrap4/_alert.scss

@@ -27,7 +27,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($close-font-size + $alert-padding-x * 2);
+  padding-right: $close-font-size + $alert-padding-x * 2;
 
   // Adjust close link position
   .close {

src/sass/bootstrap4/_badge.scss

@@ -14,6 +14,12 @@
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
 
+  @at-root a#{&} {
+    @include hover-focus {
+      text-decoration: none;
+    }
+  }
+
   // Empty badges collapse automatically
   &:empty {
     display: none;

src/sass/bootstrap4/_button-group.scss

@@ -9,7 +9,7 @@
 
   > .btn {
     position: relative;
-    flex: 0 1 auto;
+    flex: 1 1 auto;
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
@@ -22,14 +22,6 @@
       z-index: 1;
     }
   }
-
-  // Prevent double borders when buttons are next to each other
-  .btn + .btn,
-  .btn + .btn-group,
-  .btn-group + .btn,
-  .btn-group + .btn-group {
-    margin-left: -$btn-border-width;
-  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -44,8 +36,10 @@
 }
 
 .btn-group {
-  > .btn:first-child {
+  // Prevent double borders when buttons are next to each other
-    margin-left: 0;
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: -$btn-border-width;
   }
 
   // Reset rounded corners
@@ -119,17 +113,14 @@
   align-items: flex-start;
   justify-content: center;
 
-  .btn,
+  > .btn,
-  .btn-group {
+  > .btn-group {
     width: 100%;
   }
 
-  > .btn + .btn,
+  > .btn:not(:first-child),
-  > .btn + .btn-group,
+  > .btn-group:not(:first-child) {
-  > .btn-group + .btn,
-  > .btn-group + .btn-group {
     margin-top: -$btn-border-width;
-    margin-left: 0;
   }
 
   // Reset rounded corners

src/sass/bootstrap4/_buttons.scss

@@ -7,16 +7,17 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  color: $body-color;
   text-align: center;
-  white-space: nowrap;
   vertical-align: middle;
   user-select: none;
+  background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
-  // Share hover and focus styles
+  @include hover {
-  @include hover-focus {
+    color: $body-color;
     text-decoration: none;
   }
 
@@ -80,19 +81,15 @@ fieldset:disabled a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
-  background-color: transparent;
 
   @include hover {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
-    background-color: transparent;
-    border-color: transparent;
   }
 
   &:focus,
   &.focus {
     text-decoration: $link-hover-decoration;
-    border-color: transparent;
     box-shadow: none;
   }
 
@@ -111,11 +108,11 @@ fieldset:disabled a.btn {
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 }
 
 

src/sass/bootstrap4/_card.scss

@@ -43,7 +43,7 @@
 }
 
 .card-subtitle {
-  margin-top: -($card-spacer-y / 2);
+  margin-top: -$card-spacer-y / 2;
   margin-bottom: 0;
 }
 
@@ -68,6 +68,7 @@
 .card-header {
   padding: $card-spacer-y $card-spacer-x;
   margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: $card-cap-color;
   background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
 
@@ -98,15 +99,15 @@
 //
 
 .card-header-tabs {
-  margin-right: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
   margin-bottom: -$card-spacer-y;
-  margin-left: -($card-spacer-x / 2);
+  margin-left: -$card-spacer-x / 2;
   border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
-  margin-left: -($card-spacer-x / 2);
+  margin-left: -$card-spacer-x / 2;
 }
 
 // Card image
@@ -277,25 +278,33 @@
 //
 
 .accordion {
-  .card:not(:first-of-type):not(:last-of-type) {
+  .card {
-    border-bottom: 0;
+    overflow: hidden;
-    border-radius: 0;
-  }
 
-  .card:not(:first-of-type) {
+    &:not(:first-of-type) {
       .card-header:first-child {
         border-radius: 0;
       }
+
+      &:not(:last-of-type) {
+        border-bottom: 0;
+        border-radius: 0;
+      }
     }
 
-  .card:first-of-type {
+    &:first-of-type {
       border-bottom: 0;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
 
-  .card:last-of-type {
+    &:last-of-type {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    .card-header {
+      margin-bottom: -$card-border-width;
+    }
+  }
 }

src/sass/bootstrap4/_carousel.scss

@@ -1,70 +1,55 @@
 // Notes on the classes:
 //
-// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
 //    the active slide is heading.
-// 2. .active.carousel-item is the current slide.
+// 3. .active.carousel-item is the current slide.
-// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
 //    is the upcoming slide in transition.
 
 .carousel {
   position: relative;
 }
 
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
 .carousel-inner {
   position: relative;
   width: 100%;
   overflow: hidden;
+  @include clearfix();
 }
 
 .carousel-item {
   position: relative;
   display: none;
-  align-items: center;
+  float: left;
   width: 100%;
+  margin-right: -100%;
   backface-visibility: hidden;
-  perspective: 1000px;
+  @include transition($carousel-transition);
 }
 
 .carousel-item.active,
 .carousel-item-next,
 .carousel-item-prev {
   display: block;
-  @include transition($carousel-transition);
 }
 
-.carousel-item-next,
+.carousel-item-next:not(.carousel-item-left),
-.carousel-item-prev {
-  position: absolute;
-  top: 0;
-}
-
-.carousel-item-next.carousel-item-left,
-.carousel-item-prev.carousel-item-right {
-  transform: translateX(0);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.carousel-item-next,
 .active.carousel-item-right {
   transform: translateX(100%);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(100%, 0, 0);
-  }
 }
 
-.carousel-item-prev,
+.carousel-item-prev:not(.carousel-item-right),
 .active.carousel-item-left {
   transform: translateX(-100%);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(-100%, 0, 0);
-  }
 }
 
 
@@ -75,31 +60,22 @@
 .carousel-fade {
   .carousel-item {
     opacity: 0;
-    transition-duration: .6s;
     transition-property: opacity;
+    transform: none;
   }
 
   .carousel-item.active,
   .carousel-item-next.carousel-item-left,
   .carousel-item-prev.carousel-item-right {
+    z-index: 1;
     opacity: 1;
   }
 
   .active.carousel-item-left,
   .active.carousel-item-right {
+    z-index: 0;
     opacity: 0;
-  }
+    @include transition(0s $carousel-transition-duration opacity);
-
-  .carousel-item-next,
-  .carousel-item-prev,
-  .carousel-item.active,
-  .active.carousel-item-left,
-  .active.carousel-item-prev {
-    transform: translateX(0);
-
-    @supports (transform-style: preserve-3d) {
-      transform: translate3d(0, 0, 0);
-    }
   }
 }
 
@@ -113,6 +89,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  z-index: 1;
   // Use flex for alignment (1-3)
   display: flex; // 1. allow flex styles
   align-items: center; // 2. vertically center contents
@@ -121,15 +98,14 @@
   color: $carousel-control-color;
   text-align: center;
   opacity: $carousel-control-opacity;
-  // We can't have a transition here because WebKit cancels the carousel
+  @include transition($carousel-control-transition);
-  // animation if you trip this while in the middle of another animation.
 
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
-    opacity: .9;
+    opacity: $carousel-control-hover-opacity;
   }
 }
 .carousel-control-prev {
@@ -170,7 +146,7 @@
 .carousel-indicators {
   position: absolute;
   right: 0;
-  bottom: 10px;
+  bottom: 0;
   left: 0;
   z-index: 15;
   display: flex;
@@ -182,7 +158,7 @@
   list-style: none;
 
   li {
-    position: relative;
+    box-sizing: content-box;
     flex: 0 1 auto;
     width: $carousel-indicator-width;
     height: $carousel-indicator-height;
@@ -190,31 +166,17 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: rgba($carousel-indicator-active-bg, .5);
+    background-color: $carousel-indicator-active-bg;
-
+    background-clip: padding-box;
-    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    &::before {
+    border-top: $carousel-indicator-hit-area-height solid transparent;
-      position: absolute;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-      top: -10px;
+    opacity: .5;
-      left: 0;
+    @include transition($carousel-indicator-transition);
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
-    &::after {
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
   }
 
   .active {
-    background-color: $carousel-indicator-active-bg;
+    opacity: 1;
   }
 }
 
@@ -225,9 +187,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
+  right: (100% - $carousel-caption-width) / 2;
   bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
+  left: (100% - $carousel-caption-width) / 2;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;

src/sass/bootstrap4/_close.scss

@@ -7,11 +7,14 @@
   text-shadow: $close-text-shadow;
   opacity: .5;
 
-  &:not(:disabled):not(.disabled) {
+  // Override <a>'s hover style
-
+  @include hover {
-    @include hover-focus {
     color: $close-color;
     text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus {
       opacity: .75;
     }
 
@@ -25,11 +28,17 @@
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
+// stylelint-disable-next-line selector-no-qualifying-type
 button.close {
   padding: 0;
   background-color: transparent;
   border: 0;
-  -webkit-appearance: none;
+  appearance: none;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+  pointer-events: none;
 }
-// stylelint-enable

src/sass/bootstrap4/_custom-forms.scss

@@ -10,8 +10,8 @@
 .custom-control {
   position: relative;
   display: block;
-  min-height: ($font-size-base * $line-height-base);
+  min-height: $font-size-base * $line-height-base;
-  padding-left: $custom-control-gutter;
+  padding-left: $custom-control-gutter + $custom-control-indicator-size;
 }
 
 .custom-control-inline {
@@ -26,18 +26,28 @@
 
   &:checked ~ .custom-control-label::before {
     color: $custom-control-indicator-checked-color;
+    border-color: $custom-control-indicator-checked-border-color;
     @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
   &:focus ~ .custom-control-label::before {
     // the mixin is not used here to make sure there is feedback
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
       box-shadow: $custom-control-indicator-focus-box-shadow;
     }
+  }
 
-  &:active ~ .custom-control-label::before {
+  &:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+
+  &:not(:disabled):active ~ .custom-control-label::before {
     color: $custom-control-indicator-active-color;
     background-color: $custom-control-indicator-active-bg;
+    border-color: $custom-control-indicator-active-border-color;
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -59,27 +69,28 @@
 .custom-control-label {
   position: relative;
   margin-bottom: 0;
+  vertical-align: top;
 
   // Background-color and (when enabled) gradient
   &::before {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
-    left: -$custom-control-gutter;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
     pointer-events: none;
     content: "";
-    user-select: none;
     background-color: $custom-control-indicator-bg;
+    border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
     @include box-shadow($custom-control-indicator-box-shadow);
   }
 
   // Foreground (icon)
   &::after {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
-    left: -$custom-control-gutter;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
@@ -101,9 +112,6 @@
   }
 
   .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      @include gradient-bg($custom-control-indicator-checked-bg);
-    }
     &::after {
       background-image: $custom-checkbox-indicator-icon-checked;
     }
@@ -111,6 +119,7 @@
 
   .custom-control-input:indeterminate ~ .custom-control-label {
     &::before {
+      border-color: $custom-checkbox-indicator-indeterminate-border-color;
       @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
     }
@@ -139,9 +148,6 @@
   }
 
   .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      @include gradient-bg($custom-control-indicator-checked-bg);
-    }
     &::after {
       background-image: $custom-radio-indicator-icon-checked;
     }
@@ -155,6 +161,47 @@
 }
 
 
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  padding-left: $custom-switch-width + $custom-control-gutter;
+
+  .custom-control-label {
+    &::before {
+      left: -($custom-switch-width + $custom-control-gutter);
+      width: $custom-switch-width;
+      pointer-events: all;
+      border-radius: $custom-switch-indicator-border-radius;
+    }
+
+    &::after {
+      top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
+      left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+      background-color: $custom-control-indicator-border-color;
+      border-radius: $custom-switch-indicator-border-radius;
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-color: $custom-control-indicator-bg;
+      transform: translateX($custom-switch-width - $custom-control-indicator-size);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
+}
+
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from
@@ -166,11 +213,12 @@
   width: 100%;
   height: $custom-select-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  font-weight: $custom-select-font-weight;
   line-height: $custom-select-line-height;
   color: $custom-select-color;
   vertical-align: middle;
-  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
+  background: $custom-select-background;
-  background-size: $custom-select-bg-size;
+  background-color: $custom-select-bg;
   border: $custom-select-border-width solid $custom-select-border-color;
   @if $enable-rounded {
     border-radius: $custom-select-border-radius;
@@ -220,15 +268,17 @@
 
 .custom-select-sm {
   height: $custom-select-height-sm;
-  padding-top: $custom-select-padding-y;
+  padding-top: $custom-select-padding-y-sm;
-  padding-bottom: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y-sm;
+  padding-left: $custom-select-padding-x-sm;
   font-size: $custom-select-font-size-sm;
 }
 
 .custom-select-lg {
   height: $custom-select-height-lg;
-  padding-top: $custom-select-padding-y;
+  padding-top: $custom-select-padding-y-lg;
-  padding-bottom: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y-lg;
+  padding-left: $custom-select-padding-x-lg;
   font-size: $custom-select-font-size-lg;
 }
 
@@ -256,10 +306,6 @@
   &:focus ~ .custom-file-label {
     border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
-
-    &::after {
-      border-color: $custom-file-focus-border-color;
-    }
   }
 
   &:disabled ~ .custom-file-label {
@@ -271,6 +317,10 @@
       content: $value;
     }
   }
+
+  ~ .custom-file-label[data-browse]::after {
+    content: attr(data-browse);
+  }
 }
 
 .custom-file-label {
@@ -281,6 +331,7 @@
   z-index: 1;
   height: $custom-file-height;
   padding: $custom-file-padding-y $custom-file-padding-x;
+  font-weight: $custom-file-font-weight;
   line-height: $custom-file-line-height;
   color: $custom-file-color;
   background-color: $custom-file-bg;
@@ -301,7 +352,7 @@
     color: $custom-file-button-color;
     content: "Browse";
     @include gradient-bg($custom-file-button-bg);
-    border-left: $custom-file-border-width solid $custom-file-border-color;
+    border-left: inherit;
     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
   }
 }
@@ -314,14 +365,15 @@
 
 .custom-range {
   width: 100%;
-  padding-left: 0; // Firefox specific
+  height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
+  padding: 0; // Need to reset padding
   background-color: transparent;
   appearance: none;
 
   &:focus {
     outline: none;
 
-    // Pseudo-elements must be split across multiple rulesets to have an affect.
+    // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.
     &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
     &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
@@ -335,7 +387,7 @@
   &::-webkit-slider-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
-    margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+    margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
@@ -410,7 +462,7 @@
     cursor: $custom-range-track-cursor;
     background-color: transparent;
     border-color: transparent;
-    border-width: ($custom-range-thumb-height * .5);
+    border-width: $custom-range-thumb-height / 2;
     @include box-shadow($custom-range-track-box-shadow);
   }
 
@@ -424,6 +476,28 @@
     background-color: $custom-range-track-bg;
     @include border-radius($custom-range-track-border-radius);
   }
+
+  &:disabled {
+    &::-webkit-slider-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-webkit-slider-runnable-track {
+      cursor: default;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-moz-range-track {
+      cursor: default;
+    }
+
+    &::-ms-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+  }
 }
 
 .custom-control-label::before,

src/sass/bootstrap4/_dropdown.scss

@@ -33,10 +33,27 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
-.dropdown-menu-right {
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-right {
       right: 0;
       left: auto;
     }
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-left {
+      right: auto;
+      left: 0;
+    }
+  }
+}
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 // Just add .dropup after the standard .dropdown class and you're set.
@@ -88,7 +105,7 @@
 }
 
 // When enabled Popper.js, reset basic dropdown position
-// stylelint-disable no-duplicate-selectors
+// stylelint-disable-next-line no-duplicate-selectors
 .dropdown-menu {
   &[x-placement^="top"],
   &[x-placement^="right"],
@@ -98,7 +115,6 @@
     bottom: auto;
   }
 }
-// stylelint-enable no-duplicate-selectors
 
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
@@ -120,6 +136,14 @@
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
 
+  &:first-child {
+    @include border-top-radius($dropdown-inner-border-radius);
+  }
+
+  &:last-child {
+    @include border-bottom-radius($dropdown-inner-border-radius);
+  }
+
   @include hover-focus {
     color: $dropdown-link-hover-color;
     text-decoration: none;
@@ -136,6 +160,7 @@
   &.disabled,
   &:disabled {
     color: $dropdown-link-disabled-color;
+    pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {

src/sass/bootstrap4/_forms.scss

@@ -9,7 +9,8 @@
   width: 100%;
   height: $input-height;
   padding: $input-padding-y $input-padding-x;
-  font-size: $font-size-base;
+  font-size: $input-font-size;
+  font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
@@ -94,14 +95,14 @@ select.form-control {
 .col-form-label-lg {
   padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
-  font-size: $font-size-lg;
+  font-size: $input-font-size-lg;
   line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
   padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
   padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
-  font-size: $font-size-sm;
+  font-size: $input-font-size-sm;
   line-height: $input-line-height-sm;
 }
 
@@ -141,7 +142,7 @@ select.form-control {
 .form-control-sm {
   height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
-  font-size: $font-size-sm;
+  font-size: $input-font-size-sm;
   line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
@@ -149,12 +150,12 @@ select.form-control {
 .form-control-lg {
   height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
-  font-size: $font-size-lg;
+  font-size: $input-font-size-lg;
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
-// stylelint-disable no-duplicate-selectors
+// stylelint-disable-next-line no-duplicate-selectors
 select.form-control {
   &[size],
   &[multiple] {
@@ -162,10 +163,10 @@ select.form-control {
   }
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 textarea.form-control {
   height: auto;
 }
-// stylelint-enable no-duplicate-selectors
 
 // Form groups
 //
@@ -189,13 +190,13 @@ textarea.form-control {
 .form-row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -5px;
+  margin-right: -$form-grid-gutter-width / 2;
-  margin-left: -5px;
+  margin-left: -$form-grid-gutter-width / 2;
 
   > .col,
   > [class*="col-"] {
-    padding-right: 5px;
+    padding-right: $form-grid-gutter-width / 2;
-    padding-left: 5px;
+    padding-left: $form-grid-gutter-width / 2;
   }
 }
 

src/sass/bootstrap4/_functions.scss

@@ -8,7 +8,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null {
+    @if $prev-num == null or unit($num) == "%" {
       // 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}' !";
@@ -49,7 +49,7 @@
 }
 
 // Color contrast
-@function color-yiq($color) {
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
@@ -57,9 +57,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= $yiq-contrasted-threshold) {
-    @return $yiq-text-dark;
+    @return $dark;
   } @else {
-    @return $yiq-text-light;
+    @return $light;
   }
 }
 

src/sass/bootstrap4/_images.scss

@@ -32,7 +32,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer / 2);
+  margin-bottom: $spacer / 2;
   line-height: 1;
 }
 

src/sass/bootstrap4/_input-group.scss

@@ -12,6 +12,7 @@
   width: 100%;
 
   > .form-control,
+  > .form-control-plaintext,
   > .custom-select,
   > .custom-file {
     position: relative; // For focus state's z-index
@@ -75,6 +76,10 @@
   .btn {
     position: relative;
     z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
   }
 
   .btn + .btn,
@@ -122,30 +127,45 @@
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.
 
+.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .custom-select {
+  height: $input-height-lg;
+}
+
 .input-group-lg > .form-control,
+.input-group-lg > .custom-select,
 .input-group-lg > .input-group-prepend > .input-group-text,
 .input-group-lg > .input-group-append > .input-group-text,
 .input-group-lg > .input-group-prepend > .btn,
 .input-group-lg > .input-group-append > .btn {
-  height: $input-height-lg;
   padding: $input-padding-y-lg $input-padding-x-lg;
-  font-size: $font-size-lg;
+  font-size: $input-font-size-lg;
   line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
+.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .custom-select {
+  height: $input-height-sm;
+}
+
 .input-group-sm > .form-control,
+.input-group-sm > .custom-select,
 .input-group-sm > .input-group-prepend > .input-group-text,
 .input-group-sm > .input-group-append > .input-group-text,
 .input-group-sm > .input-group-prepend > .btn,
 .input-group-sm > .input-group-append > .btn {
-  height: $input-height-sm;
   padding: $input-padding-y-sm $input-padding-x-sm;
-  font-size: $font-size-sm;
+  font-size: $input-font-size-sm;
   line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
+.input-group-lg > .custom-select,
+.input-group-sm > .custom-select {
+  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
+}
+
 
 // Prepend and append rounded corners
 //

src/sass/bootstrap4/_list-group.scss

@@ -66,6 +66,7 @@
   &.disabled,
   &:disabled {
     color: $list-group-disabled-color;
+    pointer-events: none;
     background-color: $list-group-disabled-bg;
   }
 
@@ -89,6 +90,10 @@
     border-right: 0;
     border-left: 0;
     @include border-radius(0);
+
+    &:last-child {
+      margin-bottom: -$list-group-border-width;
+    }
   }
 
   &:first-child {
@@ -99,6 +104,7 @@
 
   &:last-child {
     .list-group-item:last-child {
+      margin-bottom: 0;
       border-bottom: 0;
     }
   }

src/sass/bootstrap4/_modal.scss

@@ -18,11 +18,11 @@
 .modal {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: $zindex-modal;
   display: none;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
@@ -43,10 +43,10 @@
   // When fading in the modal, animate it to slide down
   .modal.fade & {
     @include transition($modal-transition);
-    transform: translate(0, -25%);
+    transform: $modal-fade-transform;
   }
   .modal.show & {
-    transform: translate(0, 0);
+    transform: $modal-show-transform;
   }
 }
 
@@ -84,10 +84,10 @@
 .modal-backdrop {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: $zindex-modal-backdrop;
+  width: 100vw;
+  height: 100vh;
   background-color: $modal-backdrop-bg;
 
   // Fade for backdrop
@@ -108,7 +108,7 @@
   .close {
     padding: $modal-header-padding;
     // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
+    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
   }
 }
 
@@ -135,6 +135,7 @@
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
+  @include border-bottom-radius($modal-content-border-radius);
 
   // Easily place margin between footer elements
   > :not(:first-child) { margin-left: .25rem; }
@@ -164,7 +165,6 @@
     &::before {
       height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
     }
-
   }
 
   .modal-content {
@@ -172,9 +172,15 @@
   }
 
   .modal-sm { max-width: $modal-sm; }
-
 }
 
 @include media-breakpoint-up(lg) {
-  .modal-lg { max-width: $modal-lg; }
+  .modal-lg,
+  .modal-xl {
+    max-width: $modal-lg;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .modal-xl { max-width: $modal-xl; }
 }

src/sass/bootstrap4/_nav.scss

@@ -22,6 +22,8 @@
   // Disabled state lightens text
   &.disabled {
     color: $nav-link-disabled-color;
+    pointer-events: none;
+    cursor: default;
   }
 }
 

src/sass/bootstrap4/_navbar.scss

@@ -197,10 +197,10 @@
 // Dark links against a light background
 .navbar-light {
   .navbar-brand {
-    color: $navbar-light-active-color;
+    color: $navbar-light-brand-color;
 
     @include hover-focus {
-      color: $navbar-light-active-color;
+      color: $navbar-light-brand-hover-color;
     }
   }
 
@@ -249,10 +249,10 @@
 // White links against a dark background
 .navbar-dark {
   .navbar-brand {
-    color: $navbar-dark-active-color;
+    color: $navbar-dark-brand-color;
 
     @include hover-focus {
-      color: $navbar-dark-active-color;
+      color: $navbar-dark-brand-hover-color;
     }
   }
 

src/sass/bootstrap4/_popover.scss

@@ -113,7 +113,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: ($popover-arrow-width / -2);
+    margin-left: -$popover-arrow-width / 2;
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }

src/sass/bootstrap4/_reboot.scss

@@ -14,9 +14,7 @@
 // 2. Change the default font family in all browsers.
 // 3. Correct the line height in all browsers.
 // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+// 5. Change the default tap highlight to be completely transparent in iOS.
-//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-// 6. Change the default tap highlight to be completely transparent in iOS.
 
 *,
 *::before,
@@ -28,30 +26,21 @@ html {
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
   -webkit-text-size-adjust: 100%; // 4
-  -ms-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba($black, 0); // 5
-  -ms-overflow-style: scrollbar; // 5
-  -webkit-tap-highlight-color: rgba($black, 0); // 6
 }
 
-// IE10+ doesn't honor `<meta name="viewport">` in some cases.
-@at-root {
-  @-ms-viewport {
-    width: device-width;
-  }
-}
-
-// stylelint-disable selector-list-comma-newline-after
 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+// TODO: remove in v5
+// stylelint-disable-next-line selector-list-comma-newline-after
 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }
-// stylelint-enable selector-list-comma-newline-after
 
 // Body
 //
 // 1. Remove the margin in all browsers.
 // 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use the
+// 3. Set an explicit initial text-align value so that we can later use
 //    the `inherit` value on things like `<th>` elements.
 
 body {
@@ -95,12 +84,11 @@ hr {
 //
 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 // margin for easier control within type scales as it avoids margin collapsing.
-// stylelint-disable selector-list-comma-newline-after
+// stylelint-disable-next-line selector-list-comma-newline-after
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: $headings-margin-bottom;
 }
-// stylelint-enable selector-list-comma-newline-after
 
 // Reset margins on paragraphs
 //
@@ -113,17 +101,19 @@ p {
 
 // Abbreviations
 //
-// 1. Remove the bottom border in Firefox 39-.
+// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
 // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 // 3. Add explicit cursor to indicate changed behavior.
-// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+// 4. Remove the bottom border in Firefox 39-.
+// 5. Prevent the text-decoration to be skipped.
 
 abbr[title],
-abbr[data-original-title] { // 4
+abbr[data-original-title] { // 1
   text-decoration: underline; // 2
   text-decoration: underline dotted; // 2
   cursor: help; // 3
-  border-bottom: 0; // 1
+  border-bottom: 0; // 4
+  text-decoration-skip-ink: none; // 5
 }
 
 address {
@@ -159,16 +149,10 @@ blockquote {
   margin: 0 0 1rem;
 }
 
-dfn {
-  font-style: italic; // Add the correct font style in Android 4.3-
-}
-
-// stylelint-disable font-weight-notation
 b,
 strong {
-  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
 }
-// stylelint-enable font-weight-notation
 
 small {
   font-size: 80%; // Add the correct font size in all browsers
@@ -199,7 +183,6 @@ a {
   color: $link-color;
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
-  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
 
   @include hover {
     color: $link-hover-color;
@@ -247,9 +230,6 @@ pre {
   margin-bottom: 1rem;
   // Don't allow content to break outside
   overflow: auto;
-  // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
-  // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-  -ms-overflow-style: scrollbar;
 }
 
 
@@ -354,7 +334,7 @@ select {
 //    controls in Android 4.
 // 2. Correct the inability to style clickable types in iOS and Safari.
 button,
-html [type="button"], // 1
+[type="button"], // 1
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button; // 2
@@ -444,7 +424,6 @@ progress {
 // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 //
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }

src/sass/bootstrap4/_spinners.scss

@@ -0,0 +1,53 @@
+//
+// Rotating border
+//
+
+@keyframes spinner-border {
+  to { transform: rotate(360deg); }
+}
+
+.spinner-border {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  border: $spinner-border-width solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border .75s linear infinite;
+}
+
+.spinner-border-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+  border-width: $spinner-border-width-sm;
+}
+
+//
+// Growing circle
+//
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.spinner-grow {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  animation: spinner-grow .75s linear infinite;
+}
+
+.spinner-grow-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+}

src/sass/bootstrap4/_tables.scss

@@ -56,7 +56,7 @@
   thead {
     th,
     td {
-      border-bottom-width: (2 * $table-border-width);
+      border-bottom-width: 2 * $table-border-width;
     }
   }
 }
@@ -100,7 +100,7 @@
 // inheritance to nested tables.
 
 @each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, -9));
+  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
 }
 
 @include table-row-variant(active, $table-active-bg);

src/sass/bootstrap4/_toasts.scss

@@ -0,0 +1,43 @@
+.toast {
+  max-width: $toast-max-width;
+  overflow: hidden; // cheap rounded corners on nested items
+  font-size: $toast-font-size; // knock it down to 14px
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+  border: $toast-border-width solid $toast-border-color;
+  border-radius: $toast-border-radius;
+  box-shadow: $toast-box-shadow;
+  backdrop-filter: blur(10px);
+  opacity: 0;
+
+  &:not(:last-child) {
+    margin-bottom: $toast-padding-x;
+  }
+
+  &.showing {
+    opacity: 1;
+  }
+
+  &.show {
+    display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: $toast-padding-y $toast-padding-x;
+  color: $toast-header-color;
+  background-color: $toast-header-background-color;
+  background-clip: padding-box;
+  border-bottom: $toast-border-width solid $toast-header-border-color;
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+}

src/sass/bootstrap4/_type.scss

@@ -116,7 +116,7 @@ mark,
 
 .blockquote-footer {
   display: block;
-  font-size: 80%; // back to default font-size
+  font-size: $blockquote-small-font-size;
   color: $blockquote-small-color;
 
   &::before {

src/sass/bootstrap4/_utilities.scss

@@ -6,6 +6,7 @@
 @import "utilities/embed";
 @import "utilities/flex";
 @import "utilities/float";
+@import "utilities/overflow";
 @import "utilities/position";
 @import "utilities/screenreaders";
 @import "utilities/shadows";

src/sass/bootstrap4/_variables.scss

@@ -3,10 +3,7 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-
-//
 // Color system
-//
 
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
@@ -37,7 +34,6 @@ $grays: map-merge(
   $grays
 );
 
-
 $blue:    #007bff !default;
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
@@ -105,6 +101,7 @@ $yiq-contrasted-threshold:  150 !default;
 $yiq-text-dark:             $gray-900 !default;
 $yiq-text-light:            $white !default;
 
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
@@ -114,9 +111,11 @@ $enable-rounded:            true !default;
 $enable-shadows:                              false !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
 $enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:                         true !default;
 $enable-print-styles:                         true !default;
+$enable-validation-icons:                     true !default;
 
 
 // Spacing
@@ -154,6 +153,7 @@ $sizes: map-merge(
   $sizes
 );
 
+
 // Body
 //
 // Settings for the `<body>` element.
@@ -161,6 +161,7 @@ $sizes: map-merge(
 $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 
+
 // Links
 //
 // Style anchor elements.
@@ -169,6 +170,8 @@ $link-color:                theme-color("primary") !default;
 $link-decoration:                         none !default;
 $link-hover-color:                        darken($link-color, 15%) !default;
 $link-hover-decoration:                   underline !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
 
 // Paragraphs
 //
@@ -182,13 +185,18 @@ $paragraph-margin-bottom:   1rem !default;
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-$grid-breakpoints: (
+$grid-breakpoints: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grid-breakpoints: map-merge(
+  (
     xs: 0,
     sm: 576px,
     md: 768px,
     lg: 992px,
     xl: 1200px
-) !default;
+  ),
+  $grid-breakpoints
+);
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints);
@@ -198,12 +206,17 @@ $grid-breakpoints: (
 //
 // Define the maximum width of `.container` for different screen sizes.
 
-$container-max-widths: (
+$container-max-widths: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$container-max-widths: map-merge(
+  (
     sm: 540px,
     md: 720px,
     lg: 960px,
     xl: 1140px
-) !default;
+  ),
+  $container-max-widths
+);
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
@@ -215,6 +228,7 @@ $container-max-widths: (
 $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
 
+
 // Components
 //
 // Define common padding and border radius sizes and more.
@@ -229,6 +243,8 @@ $border-radius:               .25rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-sm:            .2rem !default;
 
+$rounded-pill:                50rem !default;
+
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
@@ -242,13 +258,24 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (3 4),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
 
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
@@ -257,9 +284,11 @@ $font-size-base:              1rem !default; // Assumes the browser default, typ
 $font-size-lg:                ($font-size-base * 1.25) !default;
 $font-size-sm:                ($font-size-base * .875) !default;
 
+$font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
 $font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
 
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5 !default;
@@ -271,7 +300,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -296,6 +325,7 @@ $small-font-size:             80% !default;
 $text-muted:                  $gray-600 !default;
 
 $blockquote-small-color:      $gray-600 !default;
+$blockquote-small-font-size:  $small-font-size !default;
 $blockquote-font-size:        ($font-size-base * 1.25) !default;
 
 $hr-border-color:             rgba($black, .1) !default;
@@ -337,18 +367,23 @@ $table-dark-bg:               $gray-900 !default;
 $table-dark-accent-bg:        rgba($white, .05) !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
 $table-dark-border-color:     lighten($gray-900, 7.5%) !default;
-$table-dark-color:            $body-bg !default;
+$table-dark-color:            $white !default;
 
 $table-striped-order:         odd !default;
 
 $table-caption-color:         $text-muted !default;
 
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
+
+
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
+$input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
 $input-btn-focus-width:       .2rem !default;
@@ -357,10 +392,12 @@ $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-colo
 
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
+$input-btn-font-size-sm:      $font-size-sm !default;
 $input-btn-line-height-sm:    $line-height-sm !default;
 
 $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
+$input-btn-font-size-lg:      $font-size-lg !default;
 $input-btn-line-height-lg:    $line-height-lg !default;
 
 $input-btn-border-width:      $border-width !default;
@@ -372,14 +409,17 @@ $input-btn-border-width:      $border-width !default;
 
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-size:               $input-btn-font-size !default;
 $btn-line-height:             $input-btn-line-height !default;
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
 $btn-line-height-sm:          $input-btn-line-height-sm !default;
 
 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
 $btn-line-height-lg:          $input-btn-line-height-lg !default;
 
 $btn-border-width:            $input-btn-border-width !default;
@@ -409,14 +449,18 @@ $label-margin-bottom:                   .5rem !default;
 
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
 $input-line-height:                     $input-btn-line-height !default;
 
 $input-padding-y-sm:                    $input-btn-padding-y-sm !default;
 $input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
 $input-line-height-sm:                  $input-btn-line-height-sm !default;
 
 $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
 $input-line-height-lg:                  $input-btn-line-height-lg !default;
 
 $input-bg:                              $white !default;
@@ -442,13 +486,13 @@ $input-plaintext-color:                 $body-color !default;
 
 $input-height-border:                   $input-border-width * 2 !default;
 
-$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height-inner:                    ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
 $input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
 
-$input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-inner-sm:                 ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
 $input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
 
-$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-inner-lg:                 ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
 $input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -462,6 +506,7 @@ $form-check-input-margin-x:             .25rem !default;
 $form-check-inline-margin-x:            .75rem !default;
 $form-check-inline-input-margin-x:      .3125rem !default;
 
+$form-grid-gutter-width:                10px !default;
 $form-group-margin-bottom:              1rem !default;
 
 $input-group-addon-color:               $input-color !default;
@@ -470,64 +515,86 @@ $input-group-addon-border-color:        $input-border-color !default;
 
 $custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$custom-control-gutter:                 1.5rem !default;
+$custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;
-$custom-control-indicator-bg:           $gray-300 !default;
+$custom-control-indicator-bg:           $input-bg !default;
-$custom-control-indicator-bg-size:      50% 50% !default;
-$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
 
-$custom-control-indicator-disabled-bg:          $gray-200 !default;
+$custom-control-indicator-bg-size:      50% 50% !default;
+$custom-control-indicator-box-shadow:   $input-box-shadow !default;
+$custom-control-indicator-border-color: $gray-500 !default;
+$custom-control-indicator-border-width: $input-border-width !default;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
 $custom-control-label-disabled-color:           $gray-600 !default;
 
 $custom-control-indicator-checked-color:        $component-active-color !default;
 $custom-control-indicator-checked-bg:           $component-active-bg !default;
 $custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
 
-$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+$custom-control-indicator-focus-box-shadow:     $input-btn-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
 
 $custom-control-indicator-active-color:         $component-active-color !default;
 $custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
-$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' 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"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' 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"), "#", "%23") !default;
 
 $custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
 $custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
 $custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
 
 $custom-radio-indicator-border-radius:          50% !default;
-$custom-radio-indicator-icon-checked:           str-replace(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='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
-$custom-select-padding-y:           .375rem !default;
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-select-padding-x:           .75rem !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+
+$custom-select-padding-y:           $input-btn-padding-y !default;
+$custom-select-padding-x:           $input-btn-padding-x !default;
 $custom-select-height:              $input-height !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-line-height:         $input-btn-line-height !default;
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
 $custom-select-color:               $input-color !default;
 $custom-select-disabled-color:      $gray-600 !default;
 $custom-select-bg:                  $input-bg !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-select-border-width:        $input-btn-border-width !default;
+$custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size:          ($input-height-inner / 2) ($input-height-inner / 2) !default;
+
+$custom-select-border-width:        $input-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 $custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
 
 $custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-width:         $input-btn-focus-width !default;
+$custom-select-focus-width:         $input-focus-width !default;
 $custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
 
-$custom-select-font-size-sm:        75% !default;
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-btn-font-size-sm !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
-$custom-select-font-size-lg:        125% !default;
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-btn-font-size-lg !default;
 $custom-select-height-lg:           $input-height-lg !default;
 
 $custom-range-track-width:          100% !default;
@@ -543,22 +610,24 @@ $custom-range-thumb-bg:                      $component-active-bg !default;
 $custom-range-thumb-border:                  0 !default;
 $custom-range-thumb-border-radius:           1rem !default;
 $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$custom-range-thumb-focus-box-shadow-width:  $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
 $custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             $gray-500 !default;
 
 $custom-file-height:                $input-height !default;
 $custom-file-height-inner:          $input-height-inner !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
-$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
 $custom-file-disabled-bg:           $input-disabled-bg !default;
 
-$custom-file-padding-y:             $input-btn-padding-y !default;
+$custom-file-padding-y:             $input-padding-y !default;
-$custom-file-padding-x:             $input-btn-padding-x !default;
+$custom-file-padding-x:             $input-padding-x !default;
-$custom-file-line-height:           $input-btn-line-height !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-weight:           $input-font-weight !default;
 $custom-file-color:                 $input-color !default;
 $custom-file-bg:                    $input-bg !default;
-$custom-file-border-width:          $input-btn-border-width !default;
+$custom-file-border-width:          $input-border-width !default;
 $custom-file-border-color:          $input-border-color !default;
 $custom-file-border-radius:         $input-border-radius !default;
 $custom-file-box-shadow:            $input-box-shadow !default;
@@ -570,11 +639,17 @@ $custom-file-text: (
 
 
 // Form validation
+
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $small-font-size !default;
 $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
+$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
+$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' 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"), "#", "%23") !default;
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' 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"), "#", "%23") !default;
+
 
 // Dropdowns
 //
@@ -587,6 +662,7 @@ $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
 $dropdown-divider-bg:               $gray-200 !default;
 $dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
@@ -618,6 +694,7 @@ $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
 
+
 // Navs
 
 $nav-link-padding-y:                .5rem !default;
@@ -637,18 +714,19 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              ($spacer / 2) !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
+
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
 
@@ -661,16 +739,22 @@ $navbar-dark-color:                 rgba($white, .5) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 
 $navbar-light-color:                rgba($black, .5) !default;
 $navbar-light-hover-color:          rgba($black, .7) !default;
 $navbar-light-active-color:         rgba($black, .9) !default;
 $navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
 $navbar-light-toggler-border-color: rgba($black, .1) !default;
 
+$navbar-light-brand-color:                $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+
+
 // Pagination
 
 $pagination-padding-y:              .5rem !default;
@@ -717,11 +801,12 @@ $card-border-radius:                $border-radius !default;
 $card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-color:                    inherit !default;
 $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 $grid-gutter-width / 2 !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
@@ -745,6 +830,14 @@ $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
 $tooltip-arrow-color:               $tooltip-bg !default;
 
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
 
 // Popovers
 
@@ -772,6 +865,22 @@ $popover-arrow-color:               $popover-bg !default;
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
 
 
+// Toasts
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .25rem !default;
+$toast-font-size: .875rem !default;
+$toast-background-color: rgba($white, .85) !default;
+$toast-border-width: 1px !default;
+$toast-border-color: rgba(0, 0, 0, .1) !default;
+$toast-border-radius: .25rem !default;
+$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color: $gray-600 !default;
+$toast-header-background-color: rgba($white, .85) !default;
+$toast-header-border-color: rgba(0, 0, 0, .05) !default;
+
+
 // Badges
 
 $badge-font-size:                   75% !default;
@@ -809,12 +918,17 @@ $modal-header-border-color:         $gray-200 !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-header-padding:              1rem !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
+$modal-xl:                          1140px !default;
 $modal-lg:                          800px !default;
 $modal-md:                          500px !default;
 $modal-sm:                          300px !default;
 
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
 
 
@@ -846,6 +960,7 @@ $progress-bar-bg:                   theme-color("primary") !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 
+
 // List group
 
 $list-group-bg:                     $white !default;
@@ -908,21 +1023,37 @@ $breadcrumb-border-radius:          $border-radius !default;
 $carousel-control-color:             $white !default;
 $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
 
 $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
 $carousel-indicator-spacer:          3px !default;
 $carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
 
 $carousel-caption-width:             70% !default;
 $carousel-caption-color:             $white !default;
 
 $carousel-control-icon-width:        20px !default;
 
-$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 
-$carousel-transition:               transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
 
 
 // Close
@@ -932,6 +1063,7 @@ $close-font-weight:                 $font-weight-bold !default;
 $close-color:                       $black !default;
 $close-text-shadow:                 0 1px 0 $white !default;
 
+
 // Code
 
 $code-font-size:                    87.5% !default;
@@ -947,6 +1079,13 @@ $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
 
 
+// Utilities
+
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+
+
 // Printing
+
 $print-page-size:                   a3 !default;
 $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

src/sass/bootstrap4/bootstrap-grid.scss

@@ -1,14 +1,10 @@
 /*!
- * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
+ * Bootstrap Grid v4.2.1 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
-@at-root {
-  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
-}
-
 html {
   box-sizing: border-box;
   -ms-overflow-style: scrollbar;
@@ -30,3 +26,4 @@ html {
 @import "grid";
 @import "utilities/display";
 @import "utilities/flex";
+@import "utilities/spacing";

src/sass/bootstrap4/bootstrap-reboot.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
+ * Bootstrap Reboot v4.2.1 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

src/sass/bootstrap4/bootstrap.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.1.3 (https://getbootstrap.com/)
+ * Bootstrap v4.2.1 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -34,9 +34,11 @@
 @import "media";
 @import "list-group";
 @import "close";
+@import "toasts";
 @import "modal";
 @import "tooltip";
 @import "popover";
 @import "carousel";
+@import "spinners";
 @import "utilities";
 @import "print";

src/sass/bootstrap4/mixins/_badge.scss

@@ -2,10 +2,9 @@
   color: color-yiq($bg);
   background-color: $bg;
 
-  &[href] {
+  @at-root a#{&} {
     @include hover-focus {
       color: color-yiq($bg);
-      text-decoration: none;
       background-color: darken($bg, 10%);
     }
   }

src/sass/bootstrap4/mixins/_breakpoints.scss

@@ -16,7 +16,7 @@
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -39,7 +39,7 @@
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.

src/sass/bootstrap4/mixins/_buttons.scss

@@ -19,9 +19,9 @@
   &.focus {
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
     } @else {
-      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
     }
   }
 
@@ -31,6 +31,10 @@
     color: color-yiq($background);
     background-color: $background;
     border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
   }
 
   &:not(:disabled):not(.disabled):active,
@@ -46,9 +50,9 @@
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
       } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
       }
     }
   }
@@ -56,11 +60,9 @@
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
   color: $color;
-  background-color: transparent;
-  background-image: none;
   border-color: $color;
 
-  &:hover {
+  @include hover {
     color: $color-hover;
     background-color: $active-background;
     border-color: $active-border;

src/sass/bootstrap4/mixins/_caret.scss

@@ -29,8 +29,6 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      width: 0;
-      height: 0;
       margin-left: $caret-width * .85;
       vertical-align: $caret-width * .85;
       content: "";
@@ -50,8 +48,6 @@
 
       &::before {
         display: inline-block;
-        width: 0;
-        height: 0;
         margin-right: $caret-width * .85;
         vertical-align: $caret-width * .85;
         content: "";

src/sass/bootstrap4/mixins/_forms.scss

@@ -41,21 +41,33 @@
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible
-    padding: $tooltip-padding-y $tooltip-padding-x;
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    font-size: $tooltip-font-size;
+    font-size: $form-feedback-tooltip-font-size;
-    line-height: $line-height-base;
+    line-height: $form-feedback-tooltip-line-height;
     color: color-yiq($color);
-    background-color: rgba($color, $tooltip-opacity);
+    background-color: rgba($color, $form-feedback-tooltip-opacity);
-    @include border-radius($tooltip-border-radius);
+    @include border-radius($form-feedback-tooltip-border-radius);
   }
 
-  .form-control,
+  .form-control {
-  .custom-select {
     .was-validated &:#{$state},
     &.is-#{$state} {
       border-color: $color;
 
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-repeat: no-repeat;
+        background-position: center right calc(#{$input-height-inner} / 4);
+        background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
+
+        @if $state == "valid" {
+          background-image: $form-feedback-icon-valid;
+        } @else {
+          background-image: $form-feedback-icon-invalid;
+        }
+      }
+
       &:focus {
         border-color: $color;
         box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
@@ -68,6 +80,41 @@
     }
   }
 
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+      }
+    }
+  }
+
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
+        padding-right: $custom-select-feedback-icon-padding-right;
+        background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+
   .form-control-file {
     .was-validated &:#{$state},
     &.is-#{$state} {
@@ -99,7 +146,7 @@
         color: $color;
 
         &::before {
-          background-color: lighten($color, 25%);
+          border-color: $color;
         }
       }
 
@@ -110,13 +157,18 @@
 
       &:checked {
         ~ .custom-control-label::before {
+          border-color: lighten($color, 10%);
           @include gradient-bg(lighten($color, 10%));
         }
       }
 
       &:focus {
         ~ .custom-control-label::before {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
         }
       }
     }
@@ -128,8 +180,6 @@
     &.is-#{$state} {
       ~ .custom-file-label {
         border-color: $color;
-
-        &::after { border-color: inherit; }
       }
 
       ~ .#{$state}-feedback,
@@ -139,6 +189,7 @@
 
       &:focus {
         ~ .custom-file-label {
+          border-color: $color;
           box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
         }
       }

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

@@ -8,9 +8,8 @@
   %grid-column {
     position: relative;
     width: 100%;
-    min-height: 1px; // Prevent columns from collapsing when empty
+    padding-right: $gutter / 2;
-    padding-right: ($gutter / 2);
+    padding-left: $gutter / 2;
-    padding-left: ($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
@@ -37,7 +36,7 @@
       .col#{$infix}-auto {
         flex: 0 0 auto;
         width: auto;
-        max-width: none; // Reset earlier grid tiers
+        max-width: 100%; // Reset earlier grid tiers
       }
 
       @for $i from 1 through $columns {

src/sass/bootstrap4/mixins/_grid.scss

@@ -2,10 +2,10 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container() {
+@mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
+  padding-right: $gutter / 2;
-  padding-left: ($grid-gutter-width / 2);
+  padding-left: $gutter / 2;
   margin-right: auto;
   margin-left: auto;
 }
@@ -20,22 +20,21 @@
   }
 }
 
-@mixin make-row() {
+@mixin make-row($gutter: $grid-gutter-width) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: ($grid-gutter-width / -2);
+  margin-right: -$gutter / 2;
-  margin-left: ($grid-gutter-width / -2);
+  margin-left: -$gutter / 2;
 }
 
-@mixin make-col-ready() {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
   position: relative;
   // 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.
   width: 100%;
-  min-height: 1px; // Prevent collapsing
+  padding-right: $gutter / 2;
-  padding-right: ($grid-gutter-width / 2);
+  padding-left: $gutter / 2;
-  padding-left: ($grid-gutter-width / 2);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {

src/sass/bootstrap4/mixins/_table-row.scss

@@ -1,6 +1,6 @@
 // Tables
 
-@mixin table-row-variant($state, $background) {
+@mixin table-row-variant($state, $background, $border: null) {
   // Exact selectors below required to override `.table-striped` and prevent
   // inheritance to nested tables.
   .table-#{$state} {
@@ -9,6 +9,15 @@
     > td {
       background-color: $background;
     }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
   }
 
   // Hover states for `.table-hover`

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

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

src/sass/bootstrap4/mixins/_transition.scss

@@ -1,3 +1,4 @@
+// stylelint-disable property-blacklist
 @mixin transition($transition...) {
   @if $enable-transitions {
     @if length($transition) == 0 {
@@ -7,7 +8,9 @@
     }
   }
 
+  @if $enable-prefers-reduced-motion-media-query {
     @media screen and (prefers-reduced-motion: reduce) {
       transition: none;
     }
   }
+}

src/sass/bootstrap4/utilities/_borders.scss

@@ -54,6 +54,10 @@
   border-radius: 50% !important;
 }
 
+.rounded-pill {
+  border-radius: $rounded-pill !important;
+}
+
 .rounded-0 {
   border-radius: 0 !important;
 }

src/sass/bootstrap4/utilities/_embed.scss

@@ -27,26 +27,13 @@
   }
 }
 
-.embed-responsive-21by9 {
+@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
-  &::before {
+  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
-    padding-top: percentage(9 / 21);
+  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
-  }
-}
 
-.embed-responsive-16by9 {
+  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
     &::before {
-    padding-top: percentage(9 / 16);
+      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
     }
   }
-
-.embed-responsive-4by3 {
-  &::before {
-    padding-top: percentage(3 / 4);
-  }
-}
-
-.embed-responsive-1by1 {
-  &::before {
-    padding-top: percentage(1 / 1);
-  }
 }

src/sass/bootstrap4/utilities/_overflow.scss

@@ -0,0 +1,5 @@
+// stylelint-disable declaration-no-important
+
+@each $value in $overflows {
+  .overflow-#{$value} { overflow: $value !important; }
+}

src/sass/bootstrap4/utilities/_position.scss

@@ -1,11 +1,6 @@
 // stylelint-disable declaration-no-important
 
 // Common values
-
-// Sass list not in variables since it's not intended for customization.
-// stylelint-disable-next-line scss/dollar-variable-default
-$positions: static, relative, absolute, fixed, sticky;
-
 @each $position in $positions {
   .position-#{$position} { position: $position !important; }
 }

src/sass/bootstrap4/utilities/_sizing.scss

@@ -10,3 +10,11 @@
 
 .mw-100 { max-width: 100% !important; }
 .mh-100 { max-height: 100% !important; }
+
+// Viewport additional helpers
+
+.min-vw-100 { min-width: 100vw !important; }
+.min-vh-100 { min-height: 100vh !important; }
+
+.vw-100 { width: 100vw !important; }
+.vh-100 { height: 100vh !important; }

src/sass/bootstrap4/utilities/_spacing.scss

@@ -8,7 +8,6 @@
 
     @each $prop, $abbrev in (margin: m, padding: p) {
       @each $size, $length in $spacers {
-
         .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
         .#{$abbrev}t#{$infix}-#{$size},
         .#{$abbrev}y#{$infix}-#{$size} {
@@ -29,6 +28,29 @@
       }
     }
 
+    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+    @each $size, $length in $spacers {
+      @if $size != 0 {
+        .m#{$infix}-n#{$size} { margin: -$length !important; }
+        .mt#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-top: -$length !important;
+        }
+        .mr#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-right: -$length !important;
+        }
+        .mb#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-bottom: -$length !important;
+        }
+        .ml#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-left: -$length !important;
+        }
+      }
+    }
+
     // Some special margin utils
     .m#{$infix}-auto { margin: auto !important; }
     .mt#{$infix}-auto,

src/sass/bootstrap4/utilities/_text.scss

@@ -9,6 +9,7 @@
 // Alignment
 
 .text-justify  { text-align: justify !important; }
+.text-wrap     { white-space: normal !important; }
 .text-nowrap   { white-space: nowrap !important; }
 .text-truncate { @include text-truncate; }
 
@@ -33,8 +34,10 @@
 // Weight and italics
 
 .font-weight-light   { font-weight: $font-weight-light !important; }
+.font-weight-lighter { font-weight: $font-weight-lighter !important; }
 .font-weight-normal  { font-weight: $font-weight-normal !important; }
 .font-weight-bold    { font-weight: $font-weight-bold !important; }
+.font-weight-bolder  { font-weight: $font-weight-bolder !important; }
 .font-italic         { font-style: italic !important; }
 
 // Contextual colors
@@ -56,3 +59,9 @@
 .text-hide {
   @include text-hide($ignore-warning: true);
 }
+
+.text-decoration-none { text-decoration: none !important; }
+
+// Reset
+
+.text-reset { color: inherit !important; }

style.css

@@ -8,7 +8,7 @@ Description: Combination of Automattic´s _s theme and Bootstrap 4. Made as a so
 That downloads everything and moves it in place so that you can recompile your CSS and JS files;
 A developer version (with Gulp/node and Sass sources) is available on gitHub: https://github.com/understrap/understrap
 A child theme is available on Github, too: https://github.com/understrap/understrap-child;
-Version: 0.8.8
+Version: 0.8.9
 License: UnderStrap WordPress Theme, Copyright 2013-2017 Holger Koenemann
 UnderStrap is distributed under the terms of the GNU GPL version 2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html

woocommerce/myaccount/form-lost-password.php

@@ -12,12 +12,13 @@
  *
  * @see https://docs.woocommerce.com/document/template-structure/
  * @package WooCommerce/Templates
- * @version 3.4.0
+ * @version 3.5.2
  */
 
 defined( 'ABSPATH' ) || exit;
 
-wc_print_notices(); ?>
+do_action( 'woocommerce_before_lost_password_form' );
+?>
 
 <form method="post" class="woocommerce-ResetPassword lost_reset_password">
 
@@ -40,3 +41,5 @@ wc_print_notices(); ?>
 	<?php wp_nonce_field( 'lost_password', 'woocommerce-lost-password-nonce' ); ?>
 
 </form>
+<?php
+do_action( 'woocommerce_after_lost_password_form' );