rayelliott
/
understrap
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' into master

This commit is contained in:
Holger 2017-08-14 10:55:08 +02:00 committed by GitHub
parent 6a2d794144 9e19c8992a
commit 726006040c
104 changed files with 12352 additions and 10726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5635
css/theme.css
View File

File diff suppressed because it is too large Load Diff

1
footer.php
View File

@ -50,7 +50,6 @@ $container = get_theme_mod( 'understrap_container_type' );
</div><!-- wrapper end --> </div><!-- wrapper end -->
</div><!-- #page --> </div><!-- #page -->
<?php wp_footer(); ?> <?php wp_footer(); ?>
</body> </body>

7
gulpfile.js
View File

@ -196,7 +196,6 @@ gulp.task('watch-bs', ['browser-sync', 'watch', 'scripts'], function () { });
// Uglifies and concat all JS files into one // Uglifies and concat all JS files into one
gulp.task('scripts', function() { gulp.task('scripts', function() {
var scripts = [ var scripts = [
basePaths.dev + 'js/tether.js', // Must be loaded before BS4
// Start - All BS4 stuff // Start - All BS4 stuff
basePaths.dev + 'js/bootstrap4/bootstrap.js', basePaths.dev + 'js/bootstrap4/bootstrap.js',
@ -260,12 +259,8 @@ gulp.task('copy-assets', ['clean-source'], function() {
.pipe(gulp.dest(basePaths.dev + '/js')); .pipe(gulp.dest(basePaths.dev + '/js'));
// Copy Tether JS files // Copy Tether JS files
gulp.src(basePaths.node + 'tether/dist/js/*.js') gulp.src(basePaths.node + 'popper.js/dist/*.js')
.pipe(gulp.dest(basePaths.dev + '/js')); .pipe(gulp.dest(basePaths.dev + '/js'));
// Copy Tether CSS files
gulp.src(basePaths.node + 'tether/dist/css/*.css')
.pipe(gulp.dest(basePaths.dev + '/css'));
return stream; return stream;
}); });

10
header.php
View File

@ -14,7 +14,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<head> <head>
<meta charset="<?php bloginfo( 'charset' ); ?>"> <meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-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' ); ?>"> <meta name="apple-mobile-web-app-title" content="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>">
@ -39,10 +39,6 @@ $container = get_theme_mod( 'understrap_container_type' );
<div class="container"> <div class="container">
<?php endif; ?> <?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Your site title as branding in the menu --> <!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?> <?php if ( ! has_custom_logo() ) { ?>
@ -61,6 +57,10 @@ $container = get_theme_mod( 'understrap_container_type' );
the_custom_logo(); the_custom_logo();
} ?><!-- end custom logo --> } ?><!-- end custom logo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here --> <!-- The WordPress Menu goes here -->
<?php wp_nav_menu( <?php wp_nav_menu(
array( array(

1
inc/enqueue.php
View File

@ -14,6 +14,7 @@ if ( ! function_exists( 'understrap_scripts' ) ) {
$the_theme = wp_get_theme(); $the_theme = wp_get_theme();
wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), $the_theme->get( 'Version' ) ); wp_enqueue_style( 'understrap-styles', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'popper-scripts', get_template_directory_uri() . '/js/popper.min.js', array(), false);
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $the_theme->get( 'Version' ), true ); wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . '/js/theme.min.js', array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' ); wp_enqueue_script( 'comment-reply' );

609
inc/untitled.html Normal file
View File

@ -0,0 +1,609 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="Theme Check - Just another WordPress site">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://localhost:8888/themecheck/xmlrpc.php">
<title>Theme Check &#8211; Just another WordPress site</title>
<meta name='robots' content='noindex,follow' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/localhost:8888\/themecheck\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.5"}};
!function(a,b,c){function d(a){var c,d,e,f=b.createElement("canvas"),g=f.getContext&&f.getContext("2d"),h=String.fromCharCode;if(!g||!g.fillText)return!1;switch(g.textBaseline="top",g.font="600 32px Arial",a){case"flag":return g.fillText(h(55356,56806,55356,56826),0,0),f.toDataURL().length>3e3;case"diversity":return g.fillText(h(55356,57221),0,0),c=g.getImageData(16,16,1,1).data,d=c[0]+","+c[1]+","+c[2]+","+c[3],g.fillText(h(55356,57221,55356,57343),0,0),c=g.getImageData(16,16,1,1).data,e=c[0]+","+c[1]+","+c[2]+","+c[3],d!==e;case"simple":return g.fillText(h(55357,56835),0,0),0!==g.getImageData(16,16,1,1).data[0];case"unicode8":return g.fillText(h(55356,57135),0,0),0!==g.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='understrap-styles-css' href='http://localhost:8888/themecheck/wp-content/themes/understrap/css/theme.min.css?ver=0.6.2' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:8888/themecheck/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost:8888/themecheck/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://localhost:8888/themecheck/wp-json/' />
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body class="home blog group-blog hfeed">
<div class="hfeed site" id="page">
<!-- ******************* The Navbar Area ******************* -->
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="skip-link screen-reader-text sr-only" href="#content">Skip to content</a>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Your site title as branding in the menu -->
<h1 class="navbar-brand mb-0"><a rel="home" href="http://localhost:8888/themecheck/" title="Theme Check">Theme Check</a></h1>
<!-- end custom logo -->
<!-- The WordPress Menu goes here -->
<div id="navbarNavDropdown" class="collapse navbar-collapse"><ul id="main-menu" class="navbar-nav"><li id="menu-item-1636" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-1636"><a title="Home" href="http://wpthemetestdata.wordpress.com/" class="nav-link">Home</a></li>
<li id="menu-item-1637" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1637"><a title="Blog" href="http://localhost:8888/themecheck/blog/" class="nav-link">Blog</a></li>
<li id="menu-item-1638" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1638"><a title="Front Page" href="http://localhost:8888/themecheck/front-page/" class="nav-link">Front Page</a></li>
<li id="menu-item-1639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1639 dropdown"><a title="About The Tests" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">About The Tests <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
<li id="menu-item-1697" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1697"><a title="Page Image Alignment" href="http://localhost:8888/themecheck/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li>
<li id="menu-item-1698" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1698"><a title="Page Markup And Formatting" href="http://localhost:8888/themecheck/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li>
<li id="menu-item-1640" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1640"><a title="Clearing Floats" href="http://localhost:8888/themecheck/about/clearing-floats/" class="nav-link">Clearing Floats</a></li>
<li id="menu-item-1641" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1641"><a title="Page with comments" href="http://localhost:8888/themecheck/about/page-with-comments/" class="nav-link">Page with comments</a></li>
<li id="menu-item-1642" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1642"><a title="Page with comments disabled" href="http://localhost:8888/themecheck/about/page-with-comments-disabled/" class="nav-link">Page with comments disabled</a></li>
</ul>
</li>
<li id="menu-item-1643" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1643 dropdown"><a title="Level 1" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Level 1 <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
<li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1644 dropdown-submenu"><a title="Level 2" href="http://localhost:8888/themecheck/level-1/level-2/" class="nav-link">Level 2</a>
<ul class=" dropdown-menu" role="menu">
<li id="menu-item-1645" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1645"><a title="Level 3" href="http://localhost:8888/themecheck/level-1/level-2/level-3/" class="nav-link">Level 3</a></li>
<li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1699"><a title="Level 3a" href="http://localhost:8888/themecheck/level-1/level-2/level-3a/" class="nav-link">Level 3a</a></li>
<li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1700"><a title="Level 3b" href="http://localhost:8888/themecheck/level-1/level-2/level-3b/" class="nav-link">Level 3b</a></li>
</ul>
</li>
<li id="menu-item-1701" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1701"><a title="Level 2a" href="http://localhost:8888/themecheck/level-1/level-2a/" class="nav-link">Level 2a</a></li>
<li id="menu-item-1702" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1702"><a title="Level 2b" href="http://localhost:8888/themecheck/level-1/level-2b/" class="nav-link">Level 2b</a></li>
</ul>
</li>
<li id="menu-item-1646" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1646"><a title="Lorem Ipsum" href="http://localhost:8888/themecheck/lorem-ipsum/" class="nav-link">Lorem Ipsum</a></li>
<li id="menu-item-1703" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1703"><a title="Page A" href="http://localhost:8888/themecheck/page-a/" class="nav-link">Page A</a></li>
<li id="menu-item-1704" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1704"><a title="Page B" href="http://localhost:8888/themecheck/page-b/" class="nav-link">Page B</a></li>
</ul></div> </div><!-- .container -->
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
<div class="wrapper" id="wrapper-hero">
<!-- ******************* The Hero Widget Area ******************* -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item"> <div class="textwidget"><div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Jumbotron 1</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div></div>
</div><div class="carousel-item"> <div class="textwidget"><div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Jumbotron 2</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- .carousel -->
<script>
jQuery( ".carousel-item" ).first().addClass( "active" );
</script>
<!-- ******************* The Hero Widget Area ******************* -->
<div class="wrapper" id="wrapper-static-hero">
<div class="container" id="wrapper-static-content" tabindex="-1">
<div class="row">
<div id="text-11" class="static-hero-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">test</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .static-hero-widget --><div id="text-5" class="static-hero-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">juhu</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .static-hero-widget --><div id="text-10" class="static-hero-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">test3</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .static-hero-widget -->
</div>
</div>
</div><!-- #wrapper-static-hero -->
</div>
<div class="wrapper" id="wrapper-index">
<div class="container" id="content" tabindex="-1">
<div class="row">
<!-- Do the left sidebar check and opens the primary div -->
<div class="col-md-8 content-area" id="primary">
<main class="site-main" id="main">
<article class="post-1241 post type-post status-publish format-standard sticky hentry category-uncategorized tag-sticky-2 tag-template" id="post-1241">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2012/01/07/template-sticky/" rel="bookmark">Template: Sticky</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2012/01/07/template-sticky/" rel="bookmark"><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>This is a sticky post. There are a few things to verify: The sticky post should be distinctly recognizable in some way in comparison to normal posts. You can style the .sticky class if you are using the post_class() function to generate your post classes, which is a best practice. They should show at the very top [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2012/01/07/template-sticky/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/sticky-2/" rel="tag">sticky</a>, <a href="http://localhost:8888/themecheck/tag/template/" rel="tag">template</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1 post type-post status-publish format-standard hentry category-uncategorized" id="post-1">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2016/04/27/hello-world/" rel="bookmark">Hello world!</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2016/04/27/hello-world/" rel="bookmark"><time class="entry-date published updated" datetime="2016-04-27T06:39:06+00:00">April 27, 2016</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/holger/">holger</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing! [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2016/04/27/hello-world/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="comments-link"><a href="http://localhost:8888/themecheck/2016/04/27/hello-world/#comments">1 Comment</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1178 post type-post status-publish format-standard hentry category-markup tag-content-2 tag-css tag-formatting-2 tag-html tag-markup-2" id="post-1178">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2013/01/11/markup-html-tags-and-formatting/" rel="bookmark">Markup: HTML Tags and Formatting</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2013/01/11/markup-html-tags-and-formatting/" rel="bookmark"><time class="entry-date published updated" datetime="2013-01-11T20:22:19+00:00">January 11, 2013</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Headings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with a cite reference: People think focus means saying yes to the thing you&#8217;ve got to focus on. But that&#8217;s not what it means at all. It means saying no to [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2013/01/11/markup-html-tags-and-formatting/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/markup/" rel="category tag">Markup</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/content-2/" rel="tag">content</a>, <a href="http://localhost:8888/themecheck/tag/css/" rel="tag">css</a>, <a href="http://localhost:8888/themecheck/tag/formatting-2/" rel="tag">formatting</a>, <a href="http://localhost:8888/themecheck/tag/html/" rel="tag">html</a>, <a href="http://localhost:8888/themecheck/tag/markup-2/" rel="tag">markup</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1177 post type-post status-publish format-standard has-post-thumbnail hentry category-markup tag-alignment-2 tag-captions-2 tag-content-2 tag-css tag-image tag-markup-2" id="post-1177">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2013/01/10/markup-image-alignment/" rel="bookmark">Markup: Image Alignment</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2013/01/10/markup-image-alignment/" rel="bookmark"><time class="entry-date published updated" datetime="2013-01-10T20:15:40+00:00">January 10, 2013</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<img width="640" height="400" src="http://localhost:8888/themecheck/wp-content/uploads/2013/03/soworthloving-wallpaper-1024x640.jpg" class="attachment-large size-large wp-post-image" alt="I Am Worth Loving Wallpaper" srcset="http://localhost:8888/themecheck/wp-content/uploads/2013/03/soworthloving-wallpaper-1024x640.jpg 1024w, http://localhost:8888/themecheck/wp-content/uploads/2013/03/soworthloving-wallpaper-300x188.jpg 300w, http://localhost:8888/themecheck/wp-content/uploads/2013/03/soworthloving-wallpaper-768x480.jpg 768w, http://localhost:8888/themecheck/wp-content/uploads/2013/03/soworthloving-wallpaper-542x340.jpg 542w" sizes="(max-width: 640px) 100vw, 640px" />
<div class="entry-content">
<p>Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let&#8217;s get started. On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. In [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2013/01/10/markup-image-alignment/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/markup/" rel="category tag">Markup</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/alignment-2/" rel="tag">alignment</a>, <a href="http://localhost:8888/themecheck/tag/captions-2/" rel="tag">captions</a>, <a href="http://localhost:8888/themecheck/tag/content-2/" rel="tag">content</a>, <a href="http://localhost:8888/themecheck/tag/css/" rel="tag">css</a>, <a href="http://localhost:8888/themecheck/tag/image/" rel="tag">image</a>, <a href="http://localhost:8888/themecheck/tag/markup-2/" rel="tag">markup</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1176 post type-post status-publish format-standard hentry category-markup tag-alignment-2 tag-content-2 tag-css tag-markup-2" id="post-1176">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2013/01/09/markup-text-alignment/" rel="bookmark">Markup: Text Alignment</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2013/01/09/markup-text-alignment/" rel="bookmark"><time class="entry-date published updated" datetime="2013-01-09T09:00:39+00:00">January 9, 2013</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Default This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2013/01/09/markup-text-alignment/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/markup/" rel="category tag">Markup</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/alignment-2/" rel="tag">alignment</a>, <a href="http://localhost:8888/themecheck/tag/content-2/" rel="tag">content</a>, <a href="http://localhost:8888/themecheck/tag/css/" rel="tag">css</a>, <a href="http://localhost:8888/themecheck/tag/markup-2/" rel="tag">markup</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1174 post type-post status-publish format-standard hentry category-markup tag-html tag-markup-2 tag-post tag-title" id="post-1174">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2013/01/05/title-with-special-characters/" rel="bookmark">Markup: Title With Special Characters</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2013/01/05/title-with-special-characters/" rel="bookmark"><time class="entry-date published updated" datetime="2013-01-05T11:00:20+00:00">January 5, 2013</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Putting special characters in the title should have no adverse effect on the layout or functionality. Special characters in the post title have been known to cause issues with JavaScript when it is minified, especially in the admin when editing the post itself (ie. issues with metaboxes, media upload, etc.). Latin Character Tests This is [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2013/01/05/title-with-special-characters/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/markup/" rel="category tag">Markup</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/html/" rel="tag">html</a>, <a href="http://localhost:8888/themecheck/tag/markup-2/" rel="tag">markup</a>, <a href="http://localhost:8888/themecheck/tag/post/" rel="tag">post</a>, <a href="http://localhost:8888/themecheck/tag/title/" rel="tag">title</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1173 post type-post status-publish format-standard hentry category-markup tag-css tag-html tag-title" id="post-1173">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2013/01/05/markup-title-with-markup/" rel="bookmark">Markup: Title With Markup</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2013/01/05/markup-title-with-markup/" rel="bookmark"><time class="entry-date published updated" datetime="2013-01-05T10:00:49+00:00">January 5, 2013</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Verify that: The post title renders the word &#8220;with&#8221; in italics and the word &#8220;markup&#8221; in bold. The post title markup should be removed from the browser window / tab. [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2013/01/05/markup-title-with-markup/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/markup/" rel="category tag">Markup</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/css/" rel="tag">css</a>, <a href="http://localhost:8888/themecheck/tag/html/" rel="tag">html</a>, <a href="http://localhost:8888/themecheck/tag/title/" rel="tag">title</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1016 post type-post status-publish format-standard has-post-thumbnail hentry category-template-2 category-uncategorized tag-codex tag-edge-case tag-featured-image tag-image tag-template" id="post-1016">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-vertical/" rel="bookmark">Template: Featured Image (Vertical)</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-vertical/" rel="bookmark"><time class="entry-date published updated" datetime="2012-03-15T15:36:32+00:00">March 15, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<img width="300" height="580" src="http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-vertical.jpg" class="attachment-large size-large wp-post-image" alt="Horizontal Featured Image" srcset="http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-vertical.jpg 300w, http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-vertical-155x300.jpg 155w" sizes="(max-width: 300px) 100vw, 300px" />
<div class="entry-content">
<p>This post should display a featured image, if the theme supports it. Non-square images can provide some unique styling issues. This post tests a vertical featured image. [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-vertical/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/template-2/" rel="category tag">Template</a>, <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/codex/" rel="tag">Codex</a>, <a href="http://localhost:8888/themecheck/tag/edge-case/" rel="tag">edge case</a>, <a href="http://localhost:8888/themecheck/tag/featured-image/" rel="tag">featured image</a>, <a href="http://localhost:8888/themecheck/tag/image/" rel="tag">image</a>, <a href="http://localhost:8888/themecheck/tag/template/" rel="tag">template</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-1011 post type-post status-publish format-standard has-post-thumbnail hentry category-template-2 category-uncategorized tag-codex tag-edge-case tag-featured-image tag-image tag-template" id="post-1011">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-horizontal/" rel="bookmark">Template: Featured Image (Horizontal)</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-horizontal/" rel="bookmark"><time class="entry-date published updated" datetime="2012-03-15T15:15:12+00:00">March 15, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<img width="580" height="300" src="http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-horizontal.jpg" class="attachment-large size-large wp-post-image" alt="Horizontal Featured Image" srcset="http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-horizontal.jpg 580w, http://localhost:8888/themecheck/wp-content/uploads/2013/03/featured-image-horizontal-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px" />
<div class="entry-content">
<p>This post should display a featured image, if the theme supports it. Non-square images can provide some unique styling issues. This post tests a horizontal featured image. [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2012/03/15/template-featured-image-horizontal/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/template-2/" rel="category tag">Template</a>, <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/codex/" rel="tag">Codex</a>, <a href="http://localhost:8888/themecheck/tag/edge-case/" rel="tag">edge case</a>, <a href="http://localhost:8888/themecheck/tag/featured-image/" rel="tag">featured image</a>, <a href="http://localhost:8888/themecheck/tag/image/" rel="tag">image</a>, <a href="http://localhost:8888/themecheck/tag/template/" rel="tag">template</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-996 post type-post status-publish format-standard hentry category-template-2 category-uncategorized tag-content-2 tag-read-more tag-template" id="post-996">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2012/03/15/template-more-tag/" rel="bookmark">Template: More Tag</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2012/03/15/template-more-tag/" rel="bookmark"><time class="entry-date published updated" datetime="2012-03-15T14:41:11+00:00">March 15, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>This content is before the more tag. Right after this sentence should be a &#8220;continue reading&#8221; button of some sort. [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2012/03/15/template-more-tag/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/template-2/" rel="category tag">Template</a>, <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/content-2/" rel="tag">content</a>, <a href="http://localhost:8888/themecheck/tag/read-more/" rel="tag">read more</a>, <a href="http://localhost:8888/themecheck/tag/template/" rel="tag">template</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<article class="post-993 post type-post status-publish format-standard hentry category-template-2 category-uncategorized tag-content-2 tag-excerpt-2 tag-template" id="post-993">
<header class="entry-header">
<h2 class="entry-title"><a href="http://localhost:8888/themecheck/2012/03/15/template-excerpt-defined/" rel="bookmark">Template: Excerpt (Defined)</a></h2>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://localhost:8888/themecheck/2012/03/15/template-excerpt-defined/" rel="bookmark"><time class="entry-date published updated" datetime="2012-03-15T14:38:08+00:00">March 15, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost:8888/themecheck/author/themedemos/">themedemos</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages. [&#8230;]
<p><a class="btn btn-secondary understrap-read-more-link" href="http://localhost:8888/themecheck/2012/03/15/template-excerpt-defined/">Read More&#8230;</a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="cat-links">Posted in <a href="http://localhost:8888/themecheck/category/template-2/" rel="category tag">Template</a>, <a href="http://localhost:8888/themecheck/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://localhost:8888/themecheck/tag/content-2/" rel="tag">content</a>, <a href="http://localhost:8888/themecheck/tag/excerpt-2/" rel="tag">excerpt</a>, <a href="http://localhost:8888/themecheck/tag/template/" rel="tag">template</a></span>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
</main><!-- #main -->
<!-- The pagination component -->
<nav aria-label="Page navigation"><ul class="pagination ">
<li class="active page-item"><a href="http://localhost:8888/themecheck/" class="page-link">1</a></li>
<li class="page-item"><a href="http://localhost:8888/themecheck/page/2/" class="page-link">2</a></li>
<li class="page-item"><a href="http://localhost:8888/themecheck/page/3/" class="page-link">3</a></li>
<li class="page-item page-item-direction page-item-next"><span class="page-link"><a href="http://localhost:8888/themecheck/page/2/" ><span aria-hidden="true">&raquo;</span><span class="sr-only">Next page</span></a></span></li>
<li class="page-item"><a class="page-link" href="http://localhost:8888/themecheck/page/4/" aria-label="Next"><span aria-hidden="true"><i class="fa fa-step-forward" aria-hidden="true"></i></span><span class="sr-only">4</span></a></li>
</ul></nav>
</div><!-- #primary -->
<!-- Do the right sidebar check -->
<div class="col-md-4 widget-area" id="right-sidebar" role="complementary">
<aside id="text-7" class="widget widget_text"><h3 class="widget-title">Test Sidebar</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</aside>
</div><!-- #secondary -->
</div><!-- .row -->
</div><!-- Container end -->
</div><!-- Wrapper end -->
<!-- ******************* The Footer Full-width Widget Area ******************* -->
<div class="wrapper" id="wrapper-footer-full">
<div class="container" id="footer-full-content" tabindex="-1">
<div class="row">
<div id="text-8" class="footer-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">test</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .footer-widget --><div id="text-12" class="footer-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">6</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .footer-widget --><div id="text-9" class="footer-widget widget_text widget-count-3 col-md-4"><h3 class="widget-title">test2</h3> <div class="textwidget">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div><!-- .footer-widget -->
</div>
</div>
</div><!-- #wrapper-footer-full -->
<div class="wrapper" id="wrapper-footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<footer class="site-footer" id="colophon">
<div class="site-info">
<a href="http://wordpress.org/">Proudly powered by WordPress</a>
<span class="sep"> | </span>
Theme: UnderStrap by <a href="http://understrap.com">understrap.com</a>.
(Version: 0.6.2)
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!--col end -->
</div><!-- row end -->
</div><!-- container end -->
</div><!-- wrapper end -->
</div><!-- #page -->
<script type='text/javascript' src='http://localhost:8888/themecheck/wp-content/themes/understrap/js/theme.min.js?ver=0.6.2'></script>
<script type='text/javascript' src='http://localhost:8888/themecheck/wp-includes/js/wp-embed.min.js?ver=4.5.5'></script>
</body>
</html>

2288
js/popper.js Normal file
View File

File diff suppressed because it is too large Load Diff

5
js/popper.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2849
js/theme.js
View File

File diff suppressed because it is too large Load Diff

5
js/theme.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "understrap", "name": "understrap",
"version": "0.6.2", "version": "0.6.3",
"description": "Wordpress Theme framework", "description": "Wordpress Theme framework",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
@ -27,7 +27,7 @@
}, },
"homepage": "https://understrap.com", "homepage": "https://understrap.com",
"dependencies": { "dependencies": {
"bootstrap": "^4.0.0-alpha.6", "bootstrap": "4.0.0-beta",
"browser-sync": "^2.18.12", "browser-sync": "^2.18.12",
"del": "^3.0.0", "del": "^3.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
@ -49,6 +49,8 @@
"merge2": "^1.1.0", "merge2": "^1.1.0",
"run-sequence": "^2.0.0", "run-sequence": "^2.0.0",
"gulp-sequence": "^0.4.6", "gulp-sequence": "^0.4.6",
"underscores-for-npm": "^1.0.0" "undescores-for-npm": "^1.0.0",
"jquery": "3.0.0",
"popper.js": "1.11.0"
} }
} }

17
sass/assets/bootstrap4.scss vendored
View File

@ -1,20 +1,14 @@
/*! /*!
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) * Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc. * Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
// Core variables and mixins @import "../../src/sass/bootstrap4/functions";
@import "../../src/sass/bootstrap4/variables"; @import "../../src/sass/bootstrap4/variables";
@import "../../src/sass/bootstrap4/mixins"; @import "../../src/sass/bootstrap4/mixins";
@import "../../src/sass/bootstrap4/custom";
// Reset and dependencies
@import "../../src/sass/bootstrap4/normalize";
@import "../../src/sass/bootstrap4/print"; @import "../../src/sass/bootstrap4/print";
// Core CSS
@import "../../src/sass/bootstrap4/reboot"; @import "../../src/sass/bootstrap4/reboot";
@import "../../src/sass/bootstrap4/type"; @import "../../src/sass/bootstrap4/type";
@import "../../src/sass/bootstrap4/images"; @import "../../src/sass/bootstrap4/images";
@ -23,8 +17,6 @@
@import "../../src/sass/bootstrap4/tables"; @import "../../src/sass/bootstrap4/tables";
@import "../../src/sass/bootstrap4/forms"; @import "../../src/sass/bootstrap4/forms";
@import "../../src/sass/bootstrap4/buttons"; @import "../../src/sass/bootstrap4/buttons";
// Components
@import "../../src/sass/bootstrap4/transitions"; @import "../../src/sass/bootstrap4/transitions";
@import "../../src/sass/bootstrap4/dropdown"; @import "../../src/sass/bootstrap4/dropdown";
@import "../../src/sass/bootstrap4/button-group"; @import "../../src/sass/bootstrap4/button-group";
@ -41,15 +33,10 @@
@import "../../src/sass/bootstrap4/progress"; @import "../../src/sass/bootstrap4/progress";
@import "../../src/sass/bootstrap4/media"; @import "../../src/sass/bootstrap4/media";
@import "../../src/sass/bootstrap4/list-group"; @import "../../src/sass/bootstrap4/list-group";
@import "../../src/sass/bootstrap4/responsive-embed";
@import "../../src/sass/bootstrap4/close"; @import "../../src/sass/bootstrap4/close";
// Components w/ JavaScript
@import "../../src/sass/bootstrap4/modal"; @import "../../src/sass/bootstrap4/modal";
@import "../../src/sass/bootstrap4/tooltip"; @import "../../src/sass/bootstrap4/tooltip";
@import "../../src/sass/bootstrap4/popover"; @import "../../src/sass/bootstrap4/popover";
@import "../../src/sass/bootstrap4/carousel"; @import "../../src/sass/bootstrap4/carousel";
// Utility classes
@import "../../src/sass/bootstrap4/utilities"; @import "../../src/sass/bootstrap4/utilities";

6
sass/theme/_contact-form7.scss
View File

@ -61,13 +61,13 @@
// not valid tip for each control // not valid tip for each control
.wpcf7-not-valid-tip { .wpcf7-not-valid-tip {
color: $brand-danger !important; color: theme-color("danger");
} }
// validation errors ourput bottom of form // validation errors ourput bottom of form
.wpcf7-validation-errors { .wpcf7-validation-errors {
@extend .form-control; @extend .form-control;
color: $brand-danger !important; color: theme-color("danger");
border: 1px solid $gray-lighter !important; border: 1px solid $gray-200;
} }
} }

16
sass/understrap/understrap.scss
View File

@ -1,6 +1,6 @@
// Some basic padding for all wrappers // Some basic padding for all wrappers
.wrapper { .wrapper {
padding: $grid-gutter-width-base 0; } padding: $grid-gutter-width 0; }
// Reset hero wrapper padding to 0 // Reset hero wrapper padding to 0
#wrapper-hero { padding: 0px !important; } #wrapper-hero { padding: 0px !important; }
@ -13,11 +13,11 @@
} }
// Separate sticky wrapper from main content // Separate sticky wrapper from main content
.wrapper#wrapper-sticky { border-bottom: 1px solid $gray-light; } .wrapper#wrapper-sticky { border-bottom: 1px solid $gray-300; }
// Adding some contrast background color to footer full widget // Adding some contrast background color to footer full widget
#wrapper-footer-full, #wrapper-footer-full,
#wrapper-static-hero { background-color: $gray-lighter; } #wrapper-static-hero { background-color: $gray-200; }
// Necessary WP classes // Necessary WP classes
.wp-caption { font-size: inherit; } .wp-caption { font-size: inherit; }
@ -72,15 +72,15 @@ a.skip-link {
} }
.bg-primary .dropdown-menu { .bg-primary .dropdown-menu {
background-color:$brand-primary; background-color:theme-color("primary");
} }
.bg-success .dropdown-menu { .bg-success .dropdown-menu {
background-color:$brand-success; background-color:theme-color("success");
} }
.bg-inverse .dropdown-menu { .bg-inverse .dropdown-menu {
background-color:$brand-inverse; background-color:$navbar-dark-color;
} }
// Fixing BS dropdown in a dropdown // Fixing BS dropdown in a dropdown
@ -103,12 +103,10 @@ background-color:$brand-inverse;
.dropdown-menu .menu-item { .dropdown-menu .menu-item {
width: 100%; width: 100%;
a.nav-link{ a.nav-link{
margin:0px;
padding:$nav-link-padding;
} }
a.nav-link:hover { a.nav-link:hover {
background-color: $brand-primary; background-color: theme-color("primary");
} }
} }

150
src/css/tether-theme-arrows-dark.css
View File

@ -1,150 +0,0 @@
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
box-sizing: border-box; }
.tether-element {
position: absolute;
display: none; }
.tether-element.tether-open {
display: block; }
.tether-element.tether-theme-arrows-dark {
max-width: 100%;
max-height: 100%; }
.tether-element.tether-theme-arrows-dark .tether-content {
border-radius: 5px;
position: relative;
font-family: inherit;
background: #000;
color: #fff;
padding: 1em;
font-size: 1.1em;
line-height: 1.5em; }
.tether-element.tether-theme-arrows-dark .tether-content:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-width: 16px;
border-style: solid; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
top: 100%;
left: 50%;
margin-left: -16px;
border-top-color: #000;
border-bottom: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-center .tether-content:before {
bottom: 100%;
left: 50%;
margin-left: -16px;
border-bottom-color: #000;
border-top: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
left: 100%;
top: 50%;
margin-top: -16px;
border-left-color: #000;
border-right: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
right: 100%;
top: 50%;
margin-top: -16px;
border-right-color: #000;
border-left: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-left.tether-target-attached-center .tether-content {
left: -32px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-right.tether-target-attached-center .tether-content {
left: 32px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
bottom: 100%;
left: 16px;
border-bottom-color: #000;
border-top: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
bottom: 100%;
right: 16px;
border-bottom-color: #000;
border-top: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
top: 100%;
left: 16px;
border-top-color: #000;
border-bottom: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
top: 100%;
right: 16px;
border-top-color: #000;
border-bottom: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
bottom: 100%;
left: 16px;
border-bottom-color: #000;
border-top: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
bottom: 100%;
right: 16px;
border-bottom-color: #000;
border-top: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
top: 100%;
left: 16px;
border-top-color: #000;
border-bottom: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
top: 100%;
right: 16px;
border-top-color: #000;
border-bottom: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
top: 16px;
left: 100%;
border-left-color: #000;
border-right: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
top: 16px;
right: 100%;
border-right-color: #000;
border-left: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
bottom: 16px;
left: 100%;
border-left-color: #000;
border-right: 0; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows-dark.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
bottom: 16px;
right: 100%;
border-right-color: #000;
border-left: 0; }

1
src/css/tether-theme-arrows-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

154
src/css/tether-theme-arrows.css
View File

@ -1,154 +0,0 @@
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
box-sizing: border-box; }
.tether-element {
position: absolute;
display: none; }
.tether-element.tether-open {
display: block; }
.tether-element.tether-theme-arrows {
max-width: 100%;
max-height: 100%; }
.tether-element.tether-theme-arrows .tether-content {
border-radius: 5px;
position: relative;
font-family: inherit;
background: #fff;
color: inherit;
padding: 1em;
font-size: 1.1em;
line-height: 1.5em;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
.tether-element.tether-theme-arrows .tether-content:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-width: 16px;
border-style: solid; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-center .tether-content:before {
top: 100%;
left: 50%;
margin-left: -16px;
border-top-color: #fff;
border-bottom: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-center .tether-content:before {
bottom: 100%;
left: 50%;
margin-left: -16px;
border-bottom-color: #fff;
border-top: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-element-attached-middle .tether-content:before {
left: 100%;
top: 50%;
margin-top: -16px;
border-left-color: #fff;
border-right: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-element-attached-middle .tether-content:before {
right: 100%;
top: 50%;
margin-top: -16px;
border-right-color: #fff;
border-left: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-left.tether-target-attached-center .tether-content {
left: -32px; }
.tether-element.tether-theme-arrows.tether-element-attached-right.tether-target-attached-center .tether-content {
left: 32px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
bottom: 100%;
left: 16px;
border-bottom-color: #fff;
border-top: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
bottom: 100%;
right: 16px;
border-bottom-color: #fff;
border-top: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-middle .tether-content:before {
top: 100%;
left: 16px;
border-top-color: #fff;
border-bottom: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-middle .tether-content:before {
top: 100%;
right: 16px;
border-top-color: #fff;
border-bottom: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-bottom .tether-content:before {
bottom: 100%;
left: 16px;
border-bottom-color: #fff;
border-top: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content {
margin-top: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-bottom .tether-content:before {
bottom: 100%;
right: 16px;
border-bottom-color: #fff;
border-top: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-top .tether-content:before {
top: 100%;
left: 16px;
border-top-color: #fff;
border-bottom: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content {
margin-bottom: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-top .tether-content:before {
top: 100%;
right: 16px;
border-top-color: #fff;
border-bottom: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-right.tether-target-attached-left .tether-content:before {
top: 16px;
left: 100%;
border-left-color: #fff;
border-right: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
top: 16px;
right: 100%;
border-right-color: #fff;
border-left: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content {
margin-right: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-right.tether-target-attached-left .tether-content:before {
bottom: 16px;
left: 100%;
border-left-color: #fff;
border-right: 0; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content {
margin-left: 16px; }
.tether-element.tether-theme-arrows.tether-element-attached-bottom.tether-element-attached-left.tether-target-attached-right .tether-content:before {
bottom: 16px;
right: 100%;
border-right-color: #fff;
border-left: 0; }

1
src/css/tether-theme-arrows.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
src/css/tether-theme-basic.css
View File

@ -1,21 +0,0 @@
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
box-sizing: border-box; }
.tether-element {
position: absolute;
display: none; }
.tether-element.tether-open {
display: block; }
.tether-element.tether-theme-basic {
max-width: 100%;
max-height: 100%; }
.tether-element.tether-theme-basic .tether-content {
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-family: inherit;
background: #fff;
color: inherit;
padding: 1em;
font-size: 1.1em;
line-height: 1.5em; }

1
src/css/tether-theme-basic.min.css vendored
View File

@ -1 +0,0 @@
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}

8
src/css/tether.css
View File

@ -1,8 +0,0 @@
.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
box-sizing: border-box; }
.tether-element {
position: absolute;
display: none; }
.tether-element.tether-open {
display: block; }

1
src/css/tether.min.css vendored
View File

@ -1 +0,0 @@
.tether-element,.tether-element *,.tether-element :after,.tether-element :before,.tether-element:after,.tether-element:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}

1038
src/js/bootstrap4/bootstrap.js vendored
View File

File diff suppressed because it is too large Load Diff

5
src/js/bootstrap4/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

37
src/js/core.js
View File

@ -1,7 +1,3 @@
/* global Symbol */
// Defining this global in .eslintrc.json would create a danger of using the global
// unguarded in another place, it seems safer to define global only for this module
define( [ define( [
"./var/arr", "./var/arr",
"./var/document", "./var/document",
@ -24,7 +20,7 @@ define( [
"use strict"; "use strict";
var var
version = "3.2.1", version = "3.0.0",
// Define a local copy of jQuery // Define a local copy of jQuery
jQuery = function( selector, context ) { jQuery = function( selector, context ) {
@ -64,14 +60,13 @@ jQuery.fn = jQuery.prototype = {
// Get the Nth element in the matched element set OR // Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array // Get the whole matched element set as a clean array
get: function( num ) { get: function( num ) {
return num != null ?
// Return all the elements in a clean array // Return just the one element from the set
if ( num == null ) { ( num < 0 ? this[ num + this.length ] : this[ num ] ) :
return slice.call( this );
}
// Return just the one element from the set // Return all the elements in a clean array
return num < 0 ? this[ num + this.length ] : this[ num ]; slice.call( this );
}, },
// Take an array of elements and push it onto the stack // Take an array of elements and push it onto the stack
@ -172,11 +167,11 @@ jQuery.extend = jQuery.fn.extend = function() {
// Recurse if we're merging plain objects or arrays // Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject( copy ) || if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) { ( copyIsArray = jQuery.isArray( copy ) ) ) ) {
if ( copyIsArray ) { if ( copyIsArray ) {
copyIsArray = false; copyIsArray = false;
clone = src && Array.isArray( src ) ? src : []; clone = src && jQuery.isArray( src ) ? src : [];
} else { } else {
clone = src && jQuery.isPlainObject( src ) ? src : {}; clone = src && jQuery.isPlainObject( src ) ? src : {};
@ -215,6 +210,8 @@ jQuery.extend( {
return jQuery.type( obj ) === "function"; return jQuery.type( obj ) === "function";
}, },
isArray: Array.isArray,
isWindow: function( obj ) { isWindow: function( obj ) {
return obj != null && obj === obj.window; return obj != null && obj === obj.window;
}, },
@ -255,11 +252,7 @@ jQuery.extend( {
}, },
isEmptyObject: function( obj ) { isEmptyObject: function( obj ) {
/* eslint-disable no-unused-vars */
// See https://github.com/eslint/eslint/issues/6125
var name; var name;
for ( name in obj ) { for ( name in obj ) {
return false; return false;
} }
@ -289,6 +282,10 @@ jQuery.extend( {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
}, },
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
},
each: function( obj, callback ) { each: function( obj, callback ) {
var length, i = 0; var length, i = 0;
@ -445,9 +442,15 @@ jQuery.extend( {
support: support support: support
} ); } );
// JSHint would error on this code due to the Symbol not being defined in ES5.
// Defining this global in .jshintrc would create a danger of using the global
// unguarded in another place, it seems safer to just disable JSHint for these
// three lines.
/* jshint ignore: start */
if ( typeof Symbol === "function" ) { if ( typeof Symbol === "function" ) {
jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ]; jQuery.fn[ Symbol.iterator ] = arr[ Symbol.iterator ];
} }
/* jshint ignore: end */
// Populate the class2type map // Populate the class2type map
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ), jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),

846
src/js/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

8
src/js/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

760
src/js/jquery.slim.js
View File

File diff suppressed because it is too large Load Diff

8
src/js/jquery.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

1003
src/js/popper-utils.js Normal file
View File

File diff suppressed because it is too large Load Diff

5
src/js/popper-utils.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2288
src/js/popper.js Normal file
View File

File diff suppressed because it is too large Load Diff

5
src/js/popper.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1811
src/js/tether.js
View File

File diff suppressed because it is too large Load Diff

1
src/js/tether.min.js vendored
View File

File diff suppressed because one or more lines are too long

15
src/sass/bootstrap4/_alert.scss
View File

@ -41,15 +41,8 @@
// //
// Generate contextual modifier classes for colorizing the alert. // Generate contextual modifier classes for colorizing the alert.
.alert-success { @each $color, $value in $theme-colors {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); .alert-#{$color} {
} @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
.alert-info { }
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
} }

37
src/sass/bootstrap4/_badge.scss
View File

@ -27,17 +27,6 @@
top: -1px; top: -1px;
} }
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
a.badge {
@include hover-focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
// scss-lint:enable QualifyingElement
// Pill badges // Pill badges
// //
// Make them extra rounded with a modifier to replace v3's badges. // Make them extra rounded with a modifier to replace v3's badges.
@ -52,26 +41,8 @@ a.badge {
// //
// Contextual variations (linked badges get darker on :hover). // Contextual variations (linked badges get darker on :hover).
.badge-default { @each $color, $value in $theme-colors {
@include badge-variant($badge-default-bg); .badge-#{$color} {
} @include badge-variant($value);
}
.badge-primary {
@include badge-variant($badge-primary-bg);
}
.badge-success {
@include badge-variant($badge-success-bg);
}
.badge-info {
@include badge-variant($badge-info-bg);
}
.badge-warning {
@include badge-variant($badge-warning-bg);
}
.badge-danger {
@include badge-variant($badge-danger-bg);
} }

2
src/sass/bootstrap4/_breadcrumb.scss
View File

@ -1,6 +1,6 @@
.breadcrumb { .breadcrumb {
padding: $breadcrumb-padding-y $breadcrumb-padding-x; padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y; margin-bottom: $breadcrumb-margin-bottom;
list-style: none; list-style: none;
background-color: $breadcrumb-bg; background-color: $breadcrumb-bg;
@include border-radius($border-radius); @include border-radius($border-radius);

26
src/sass/bootstrap4/_button-group.scss
View File

@ -10,8 +10,9 @@
> .btn { > .btn {
position: relative; position: relative;
flex: 0 1 auto; flex: 0 1 auto;
margin-bottom: 0;
// Bring the hover, focused, and "active" buttons to the fron to overlay // Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly // the borders properly
@include hover { @include hover {
z-index: 2; z-index: 2;
@ -35,6 +36,7 @@
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
.input-group { .input-group {
@ -77,12 +79,6 @@
@include border-left-radius(0); @include border-left-radius(0);
} }
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Sizing // Sizing
// //
@ -97,8 +93,8 @@
// //
.btn + .dropdown-toggle-split { .btn + .dropdown-toggle-split {
padding-right: $btn-padding-x * .75; padding-right: $input-btn-padding-x * .75;
padding-left: $btn-padding-x * .75; padding-left: $input-btn-padding-x * .75;
&::after { &::after {
margin-left: 0; margin-left: 0;
@ -106,19 +102,19 @@
} }
.btn-sm + .dropdown-toggle-split { .btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75; padding-right: $input-btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75; padding-left: $input-btn-padding-x-sm * .75;
} }
.btn-lg + .dropdown-toggle-split { .btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75; padding-right: $input-btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75; padding-left: $input-btn-padding-x-lg * .75;
} }
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state // Set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle { .btn-group.show .dropdown-toggle {
@include box-shadow($btn-active-box-shadow); @include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles. // Show no shadow for `.btn-link` since it has no other button styles.

55
src/sass/bootstrap4/_buttons.scss
View File

@ -7,13 +7,12 @@
.btn { .btn {
display: inline-block; display: inline-block;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
@include transition($btn-transition); @include transition($btn-transition);
// Share hover and focus styles // Share hover and focus styles
@ -29,7 +28,6 @@
// Disabled comes first so active can properly restyle // Disabled comes first so active can properly restyle
&.disabled, &.disabled,
&:disabled { &:disabled {
cursor: $cursor-disabled;
opacity: .65; opacity: .65;
@include box-shadow(none); @include box-shadow(none);
} }
@ -52,43 +50,16 @@ fieldset[disabled] a.btn {
// Alternate buttons // Alternate buttons
// //
.btn-primary { @each $color, $value in $theme-colors {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); .btn-#{$color} {
} @include button-variant($value, $value);
.btn-secondary { }
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
} }
// Remove all backgrounds @each $color, $value in $theme-colors {
.btn-outline-primary { .btn-outline-#{$color} {
@include button-outline-variant($btn-primary-bg); @include button-outline-variant($value, #fff);
} }
.btn-outline-secondary {
@include button-outline-variant($btn-secondary-border);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg);
}
.btn-outline-warning {
@include button-outline-variant($btn-warning-bg);
}
.btn-outline-danger {
@include button-outline-variant($btn-danger-bg);
} }
@ -113,6 +84,7 @@ fieldset[disabled] a.btn {
&:focus, &:focus,
&:active { &:active {
border-color: transparent; border-color: transparent;
box-shadow: none;
} }
@include hover { @include hover {
border-color: transparent; border-color: transparent;
@ -137,12 +109,11 @@ fieldset[disabled] a.btn {
// //
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
} }
.btn-sm { .btn-sm {
// line-height: ensure proper height of button next to small input @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
} }

107
src/sass/bootstrap4/_card.scss
View File

@ -6,12 +6,15 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: $card-bg; background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color; border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius); @include border-radius($card-border-radius);
} }
.card-block { .card-body {
// Enable `flex-grow: 1` for decks and groups so that card blocks take up // Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom. // as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto; flex: 1 1 auto;
@ -67,7 +70,7 @@
border-bottom: $card-border-width solid $card-border-color; border-bottom: $card-border-width solid $card-border-color;
&:first-child { &:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
} }
} }
@ -77,7 +80,7 @@
border-top: $card-border-width solid $card-border-color; border-top: $card-border-width solid $card-border-color;
&:last-child { &:last-child {
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
} }
} }
@ -98,70 +101,7 @@
margin-left: -($card-spacer-x / 2); margin-left: -($card-spacer-x / 2);
} }
//
// Background variations
//
.card-primary {
@include card-variant($brand-primary, $brand-primary);
}
.card-success {
@include card-variant($brand-success, $brand-success);
}
.card-info {
@include card-variant($brand-info, $brand-info);
}
.card-warning {
@include card-variant($brand-warning, $brand-warning);
}
.card-danger {
@include card-variant($brand-danger, $brand-danger);
}
// Remove all backgrounds
.card-outline-primary {
@include card-outline-variant($btn-primary-bg);
}
.card-outline-secondary {
@include card-outline-variant($btn-secondary-border);
}
.card-outline-info {
@include card-outline-variant($btn-info-bg);
}
.card-outline-success {
@include card-outline-variant($btn-success-bg);
}
.card-outline-warning {
@include card-outline-variant($btn-warning-bg);
}
.card-outline-danger {
@include card-outline-variant($btn-danger-bg);
}
//
// Inverse text within a card for use with dark backgrounds
//
.card-inverse {
@include card-inverse;
}
//
// Blockquote
//
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0;
}
// Card image // Card image
.card-img {
// margin: -1.325rem;
@include border-radius($card-border-radius-inner);
}
.card-img-overlay { .card-img-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@ -171,14 +111,20 @@
padding: $card-img-overlay-padding; padding: $card-img-overlay-padding;
} }
.card-img {
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-radius($card-inner-border-radius);
}
// Card image caps // Card image caps
.card-img-top { .card-img-top {
@include border-top-radius($card-border-radius-inner); width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-top-radius($card-inner-border-radius);
} }
.card-img-bottom { .card-img-bottom {
@include border-bottom-radius($card-border-radius-inner); width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
@include border-bottom-radius($card-inner-border-radius);
} }
@ -188,17 +134,15 @@
.card-deck { .card-deck {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;
.card { .card {
display: flex; display: flex;
flex: 1 0 0; flex: 1 0 0%;
flex-direction: column; flex-direction: column;
margin-right: $card-deck-margin;
// Selectively apply horizontal margins to cards to avoid doing the margin-left: $card-deck-margin;
// negative margin dance like our grid. This differs from the grid
// due to the use of margins as gutters instead of padding.
&:not(:first-child) { margin-left: $card-deck-margin; }
&:not(:last-child) { margin-right: $card-deck-margin; }
} }
} }
} }
@ -214,7 +158,7 @@
flex-flow: row wrap; flex-flow: row wrap;
.card { .card {
flex: 1 0 0; flex: 1 0 0%;
+ .card { + .card {
margin-left: 0; margin-left: 0;
@ -262,15 +206,18 @@
// Columns // Columns
// //
@include media-breakpoint-up(sm) { .card-columns {
.card-columns { .card {
margin-bottom: $card-columns-margin;
}
@include media-breakpoint-up(sm) {
column-count: $card-columns-count; column-count: $card-columns-count;
column-gap: $card-columns-gap; column-gap: $card-columns-gap;
.card { .card {
display: inline-block; // Don't let them vertically span multiple columns display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change width: 100%; // Don't let their width change
margin-bottom: $card-columns-margin;
} }
} }
} }

41
src/sass/bootstrap4/_carousel.scss
View File

@ -12,19 +12,17 @@
.carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
align-items: center;
width: 100%; width: 100%;
@include transition($carousel-transition);
@include if-supports-3d-transforms() { backface-visibility: hidden;
@include transition($carousel-transition); perspective: 1000px;
backface-visibility: hidden;
perspective: 1000px;
}
} }
.carousel-item.active, .carousel-item.active,
.carousel-item-next, .carousel-item-next,
.carousel-item-prev { .carousel-item-prev {
display: flex; display: block;
} }
.carousel-item-next, .carousel-item-next,
@ -34,19 +32,29 @@
} }
// CSS3 transforms when supported by the browser // CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() { .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
.carousel-item-prev.carousel-item-right { transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
}
.carousel-item-next, .carousel-item-next,
.active.carousel-item-right { .active.carousel-item-right {
transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
}
.carousel-item-prev, .carousel-item-prev,
.active.carousel-item-left { .active.carousel-item-left {
transform: translateX(-100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
} }
@ -125,13 +133,12 @@
li { li {
position: relative; position: relative;
flex: 1 0 auto; flex: 0 1 auto;
max-width: $carousel-indicator-width; width: $carousel-indicator-width;
height: $carousel-indicator-height; height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer; margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer;
text-indent: -999px; text-indent: -999px;
cursor: pointer;
background-color: rgba($carousel-indicator-active-bg, .5); background-color: rgba($carousel-indicator-active-bg, .5);
// Use pseudo classes to increase the hit area by 10px on top and bottom. // Use pseudo classes to increase the hit area by 10px on top and bottom.

2
src/sass/bootstrap4/_close.scss
View File

@ -10,7 +10,6 @@
@include hover-focus { @include hover-focus {
color: $close-color; color: $close-color;
text-decoration: none; text-decoration: none;
cursor: pointer;
opacity: .75; opacity: .75;
} }
} }
@ -23,7 +22,6 @@
// scss-lint:disable QualifyingElement // scss-lint:disable QualifyingElement
button.close { button.close {
padding: 0; padding: 0;
cursor: pointer;
background: transparent; background: transparent;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;

80
src/sass/bootstrap4/_custom-forms.scss
View File

@ -1,4 +1,4 @@
// scss-lint:disable PropertyCount // scss-lint:disable PropertyCount, VendorPrefix
// Embedded icons from Open Iconic. // Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury. // Released under MIT and copyright 2014 Waybury.
@ -15,7 +15,6 @@
min-height: (1rem * $line-height-base); min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter; padding-left: $custom-control-gutter;
margin-right: $custom-control-spacer-x; margin-right: $custom-control-spacer-x;
cursor: pointer;
} }
.custom-control-input { .custom-control-input {
@ -24,31 +23,29 @@
opacity: 0; opacity: 0;
&:checked ~ .custom-control-indicator { &:checked ~ .custom-control-indicator {
color: $custom-control-checked-indicator-color; color: $custom-control-indicator-checked-color;
background-color: $custom-control-checked-indicator-bg; background-color: $custom-control-indicator-checked-bg;
@include box-shadow($custom-control-checked-indicator-box-shadow); @include box-shadow($custom-control-indicator-checked-box-shadow);
} }
&:focus ~ .custom-control-indicator { &:focus ~ .custom-control-indicator {
// the mixin is not used here to make sure there is feedback // the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-focus-indicator-box-shadow; box-shadow: $custom-control-indicator-focus-box-shadow;
} }
&:active ~ .custom-control-indicator { &:active ~ .custom-control-indicator {
color: $custom-control-active-indicator-color; color: $custom-control-indicator-active-color;
background-color: $custom-control-active-indicator-bg; background-color: $custom-control-indicator-active-bg;
@include box-shadow($custom-control-active-indicator-box-shadow); @include box-shadow($custom-control-indicator-active-box-shadow);
} }
&:disabled { &:disabled {
~ .custom-control-indicator { ~ .custom-control-indicator {
cursor: $custom-control-disabled-cursor; background-color: $custom-control-indicator-disabled-bg;
background-color: $custom-control-disabled-indicator-bg;
} }
~ .custom-control-description { ~ .custom-control-description {
color: $custom-control-disabled-description-color; color: $custom-control-description-disabled-color;
cursor: $custom-control-disabled-cursor;
} }
} }
} }
@ -79,17 +76,17 @@
.custom-checkbox { .custom-checkbox {
.custom-control-indicator { .custom-control-indicator {
@include border-radius($custom-checkbox-radius); @include border-radius($custom-checkbox-indicator-border-radius);
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-checkbox-checked-icon; background-image: $custom-checkbox-indicator-icon-checked;
} }
.custom-control-input:indeterminate ~ .custom-control-indicator { .custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: $custom-checkbox-indeterminate-bg; background-color: $custom-checkbox-indicator-indeterminate-bg;
background-image: $custom-checkbox-indeterminate-icon; background-image: $custom-checkbox-indicator-icon-indeterminate;
@include box-shadow($custom-checkbox-indeterminate-box-shadow); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
} }
} }
@ -99,11 +96,11 @@
.custom-radio { .custom-radio {
.custom-control-indicator { .custom-control-indicator {
border-radius: $custom-radio-radius; border-radius: $custom-radio-indicator-border-radius;
} }
.custom-control-input:checked ~ .custom-control-indicator { .custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-radio-checked-icon; background-image: $custom-radio-indicator-icon-checked;
} }
} }
@ -136,19 +133,21 @@
.custom-select { .custom-select {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
$select-border-width: ($border-width * 2); height: $input-height;
height: calc(#{$input-height} + #{$select-border-width});
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
line-height: $custom-select-line-height; line-height: $custom-select-line-height;
color: $custom-select-color; color: $custom-select-color;
vertical-align: middle; vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-clip: padding-box;
background-size: $custom-select-bg-size; background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color; border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius); @if $enable-rounded {
// Use vendor prefixes as `appearance` isn't part of the CSS spec. border-radius: $custom-select-border-radius;
-moz-appearance: none; } @else {
-webkit-appearance: none; border-radius: 0;
}
appearance: none;
&:focus { &:focus {
border-color: $custom-select-focus-border-color; border-color: $custom-select-focus-border-color;
@ -168,7 +167,6 @@
&:disabled { &:disabled {
color: $custom-select-disabled-color; color: $custom-select-disabled-color;
cursor: $cursor-disabled;
background-color: $custom-select-disabled-bg; background-color: $custom-select-disabled-bg;
} }
@ -179,14 +177,10 @@
} }
.custom-select-sm { .custom-select-sm {
height: $custom-select-height-sm;
padding-top: $custom-select-padding-y; padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y; padding-bottom: $custom-select-padding-y;
font-size: $custom-select-sm-font-size; font-size: $custom-select-font-size-sm;
// &:not([multiple]) {
// height: 26px;
// min-height: 26px;
// }
} }
@ -200,7 +194,6 @@
max-width: 100%; max-width: 100%;
height: $custom-file-height; height: $custom-file-height;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer;
} }
.custom-file-input { .custom-file-input {
@ -208,11 +201,10 @@
max-width: 100%; max-width: 100%;
height: $custom-file-height; height: $custom-file-height;
margin: 0; margin: 0;
filter: alpha(opacity = 0);
opacity: 0; opacity: 0;
&:focus ~ .custom-file-control { &:focus ~ .custom-file-control {
@include box-shadow($custom-file-focus-box-shadow); box-shadow: $custom-file-focus-box-shadow;
} }
} }
@ -223,36 +215,36 @@
left: 0; left: 0;
z-index: 5; z-index: 5;
height: $custom-file-height; height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y; padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
line-height: $custom-file-line-height; line-height: $custom-file-line-height;
color: $custom-file-color; color: $custom-file-color;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
background-color: $custom-file-bg; background-color: $custom-file-bg;
background-clip: padding-box;
border: $custom-file-border-width solid $custom-file-border-color; border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius); @include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow); @include box-shadow($custom-file-box-shadow);
@each $lang, $text in map-get($custom-file-text, placeholder) { @each $lang, $text in map-get($custom-file-text, placeholder) {
&:lang(#{$lang})::after { &:lang(#{$lang}):empty::after {
content: $text; content: $text;
} }
} }
&::before { &::before {
position: absolute; position: absolute;
top: -$custom-file-border-width; top: 0;
right: -$custom-file-border-width; right: 0;
bottom: -$custom-file-border-width;
z-index: 6; z-index: 6;
display: block; display: block;
height: $custom-file-height; height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y; padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height; line-height: $custom-file-line-height;
color: $custom-file-button-color; color: $custom-file-button-color;
background-color: $custom-file-button-bg; background-color: $custom-file-button-bg;
border: $custom-file-border-width solid $custom-file-border-color; border-left: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
} }
@each $lang, $text in map-get($custom-file-text, button-label) { @each $lang, $text in map-get($custom-file-text, button-label) {

4
src/sass/bootstrap4/_custom.scss
View File

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

63
src/sass/bootstrap4/_dropdown.scss
View File

@ -10,21 +10,27 @@
display: inline-block; display: inline-block;
width: 0; width: 0;
height: 0; height: 0;
margin-left: $caret-width; margin-left: $caret-width * .85;
vertical-align: middle; vertical-align: $caret-width * .85;
content: ""; content: "";
border-top: $caret-width solid; border-top: $caret-width solid;
border-right: $caret-width solid transparent; border-right: $caret-width solid transparent;
border-left: $caret-width solid transparent; border-left: $caret-width solid transparent;
} }
// Prevent the focus on the dropdown toggle when closing dropdowns &:empty::after {
&:focus { margin-left: 0;
outline: 0;
} }
} }
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup { .dropup {
.dropdown-menu {
margin-top: 0;
margin-bottom: $dropdown-spacer;
}
.dropdown-toggle { .dropdown-toggle {
&::after { &::after {
border-top: 0; border-top: 0;
@ -43,7 +49,7 @@
float: left; float: left;
min-width: $dropdown-min-width; min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0; padding: $dropdown-padding-y 0;
margin: $dropdown-margin-top 0 0; // override default ul margin: $dropdown-spacer 0 0; // override default ul
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
color: $body-color; color: $body-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@ -66,7 +72,7 @@
.dropdown-item { .dropdown-item {
display: block; display: block;
width: 100%; // For `<button>`s width: 100%; // For `<button>`s
padding: 3px $dropdown-item-padding-x; padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both; clear: both;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: $dropdown-link-color; color: $dropdown-link-color;
@ -91,7 +97,6 @@
&.disabled, &.disabled,
&:disabled { &:disabled {
color: $dropdown-link-disabled-color; color: $dropdown-link-disabled-color;
cursor: $cursor-disabled;
background-color: transparent; background-color: transparent;
// Remove CSS gradients if they're enabled // Remove CSS gradients if they're enabled
@if $enable-gradients { @if $enable-gradients {
@ -102,29 +107,14 @@
// Open state for the dropdown // Open state for the dropdown
.show { .show {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered // Remove the outline when :focus is triggered
> a { > a {
outline: 0; outline: 0;
} }
} }
// Menu positioning .dropdown-menu.show {
// display: block;
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.dropdown-menu-left {
right: auto;
left: 0;
} }
// Dropdown section headers // Dropdown section headers
@ -136,26 +126,3 @@
color: $dropdown-header-color; color: $dropdown-header-color;
white-space: nowrap; // as with > li > a white-space: nowrap; // as with > li > a
} }
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-dropdown-backdrop;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
//
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: $dropdown-margin-top;
}
}

140
src/sass/bootstrap4/_forms.scss
View File

@ -1,4 +1,4 @@
// scss-lint:disable QualifyingElement // scss-lint:disable QualifyingElement, VendorPrefix
// //
// Textual form controls // Textual form controls
@ -9,9 +9,9 @@
width: 100%; width: 100%;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border) // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height; // height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-btn-padding-y $input-btn-padding-x;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height; line-height: $input-btn-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@ -42,7 +42,7 @@
// Placeholder // Placeholder
&::placeholder { &::placeholder {
color: $input-color-placeholder; color: $input-placeholder-color;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1; opacity: 1;
} }
@ -54,20 +54,15 @@
// don't honor that edge case; we style them as disabled anyway. // don't honor that edge case; we style them as disabled anyway.
&:disabled, &:disabled,
&[readonly] { &[readonly] {
background-color: $input-bg-disabled; background-color: $input-disabled-bg;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1; opacity: 1;
} }
&:disabled {
cursor: $cursor-disabled;
}
} }
select.form-control { select.form-control {
&:not([size]):not([multiple]) { &:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2); height: $input-height;
height: calc(#{$input-height} + #{$select-border-width});
} }
&:focus::-ms-value { &:focus::-ms-value {
@ -95,20 +90,20 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label text to // For use with horizontal and inline forms, when you need the label text to
// align with the form controls. // align with the form controls.
.col-form-label { .col-form-label {
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
margin-bottom: 0; // Override the `<label>` default margin-bottom: 0; // Override the `<label>` default
} }
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
font-size: $font-size-lg; font-size: $font-size-lg;
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
font-size: $font-size-sm; font-size: $font-size-sm;
} }
@ -120,23 +115,23 @@ select.form-control {
// For use with horizontal and inline forms, when you need the legend text to // For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls. // be the same size as regular labels, and to align with the form controls.
.col-form-legend { .col-form-legend {
padding-top: $input-padding-y; padding-top: $input-btn-padding-y;
padding-bottom: $input-padding-y; padding-bottom: $input-btn-padding-y;
margin-bottom: 0; margin-bottom: 0;
font-size: $font-size-base; font-size: $font-size-base;
} }
// Static form control text // Readonly controls as plain text
// //
// Apply class to an element to make any string of text align with labels in a // Apply class to a readonly input to make it appear like regular plain
// horizontal form layout. // text (without any border, background color, focus indicator)
.form-control-static { .form-control-plaintext {
padding-top: $input-padding-y; padding-top: $input-btn-padding-y;
padding-bottom: $input-padding-y; padding-bottom: $input-btn-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height; line-height: $input-btn-line-height;
border: solid transparent; border: solid transparent;
border-width: $input-btn-border-width 0; border-width: $input-btn-border-width 0;
@ -157,8 +152,9 @@ select.form-control {
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm { .form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $input-btn-line-height-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
@ -169,8 +165,9 @@ select.form-control-sm {
} }
.form-control-lg { .form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg; padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $input-btn-line-height-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }
@ -196,6 +193,24 @@ select.form-control-lg {
} }
// Form grid
//
// Special replacement for our grid system's `.row` for tighter form layouts.
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
> .col,
> [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
}
// Checkboxes and radios // Checkboxes and radios
// //
// Indent the labels to position radios/checkboxes as hanging controls. // Indent the labels to position radios/checkboxes as hanging controls.
@ -208,7 +223,6 @@ select.form-control-lg {
&.disabled { &.disabled {
.form-check-label { .form-check-label {
color: $text-muted; color: $text-muted;
cursor: $cursor-disabled;
} }
} }
} }
@ -216,17 +230,12 @@ select.form-control-lg {
.form-check-label { .form-check-label {
padding-left: $form-check-input-gutter; padding-left: $form-check-input-gutter;
margin-bottom: 0; // Override default `<label>` bottom margin margin-bottom: 0; // Override default `<label>` bottom margin
cursor: pointer;
} }
.form-check-input { .form-check-input {
position: absolute; position: absolute;
margin-top: $form-check-input-margin-y; margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter; margin-left: -$form-check-input-gutter;
&:only-child {
position: static;
}
} }
// Radios and checkboxes on same line // Radios and checkboxes on same line
@ -243,48 +252,37 @@ select.form-control-lg {
} }
// Form control feedback states // Form validation
// //
// Apply contextual and semantic states to individual form controls. // Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
.form-control-feedback { .invalid-feedback {
margin-top: $form-feedback-margin-top; display: none;
margin-top: .25rem;
font-size: .875rem;
color: $form-feedback-invalid-color;
} }
.form-control-success, .invalid-tooltip {
.form-control-warning, position: absolute;
.form-control-danger { top: 100%;
padding-right: ($input-padding-x * 3); z-index: 5;
background-repeat: no-repeat; display: none;
background-position: center right ($input-height / 4); width: 250px;
background-size: ($input-height / 2) ($input-height / 2); padding: .5rem;
} margin-top: .1rem;
font-size: .875rem;
// Form validation states line-height: 1;
.has-success { color: #fff;
@include form-control-validation($brand-success); background-color: rgba($form-feedback-invalid-color,.8);
border-radius: .2rem;
.form-control-success {
background-image: $form-icon-success;
}
}
.has-warning {
@include form-control-validation($brand-warning);
.form-control-warning {
background-image: $form-icon-warning;
}
}
.has-danger {
@include form-control-validation($brand-danger);
.form-control-danger {
background-image: $form-icon-danger;
}
} }
@include form-validation-state("valid", $form-feedback-valid-color);
@include form-validation-state("invalid", $form-feedback-invalid-color);
// Inline forms // Inline forms
// //
@ -333,7 +331,7 @@ select.form-control-lg {
} }
// Make static controls behave like regular ones // Make static controls behave like regular ones
.form-control-static { .form-control-plaintext {
display: inline-block; display: inline-block;
} }

90
src/sass/bootstrap4/_functions.scss Normal file
View File

@ -0,0 +1,90 @@
// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map) {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
}
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Color contrast
@mixin color-yiq($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= 150) {
color: #111;
} @else {
color: #fff;
}
}
// Retreive color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function grayscale($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
@if $level < 0 {
// Lighter values need a quick double negative for the Sass math to work
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
} @else {
@return mix($color-base, $color, $level * $theme-color-interval);
}
}

5
src/sass/bootstrap4/_grid.scss
View File

@ -11,11 +11,12 @@
// Fluid container // Fluid container
// //
// Utilizes the mixin meant for fixed width containers, but without any defined // Utilizes the mixin meant for fixed width containers, but with 100% width for
// width for fluid, full width layouts. // fluid, full width layouts.
@if $enable-grid-classes { @if $enable-grid-classes {
.container-fluid { .container-fluid {
width: 100%;
@include make-container(); @include make-container();
} }
} }

2
src/sass/bootstrap4/_images.scss
View File

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

19
src/sass/bootstrap4/_input-group.scss
View File

@ -30,8 +30,7 @@
.input-group .form-control { .input-group .form-control {
// Vertically centers the content of the addons within the input group // Vertically centers the content of the addons within the input group
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
@include border-radius(0); @include border-radius(0);
@ -67,25 +66,27 @@
// //
.input-group-addon { .input-group-addon {
padding: $input-padding-y $input-padding-x; padding: $input-btn-padding-y $input-btn-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base; // Match inputs font-size: $font-size-base; // Match inputs
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
line-height: $input-line-height; line-height: $input-btn-line-height;
color: $input-color; color: $input-group-addon-color;
text-align: center; text-align: center;
background-color: $input-group-addon-bg; background-color: $input-group-addon-bg;
background-clip: padding-box;
border: $input-btn-border-width solid $input-group-addon-border-color; border: $input-btn-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
// Sizing // Sizing
&.form-control-sm { &.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
&.form-control-lg { &.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg; padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }
@ -144,8 +145,8 @@
// element above the siblings. // element above the siblings.
> .btn { > .btn {
position: relative; position: relative;
// Vertically stretch the button and center its content background-clip: padding-box;
flex: 1; border: $input-btn-border-width solid $input-group-btn-border-color;
+ .btn { + .btn {
margin-left: (-$input-btn-border-width); margin-left: (-$input-btn-border-width);

4
src/sass/bootstrap4/_jumbotron.scss
View File

@ -9,10 +9,6 @@
} }
} }
.jumbotron-hr {
border-top-color: darken($jumbotron-bg, 10%);
}
.jumbotron-fluid { .jumbotron-fluid {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;

45
src/sass/bootstrap4/_list-group.scss
View File

@ -19,23 +19,19 @@
.list-group-item-action { .list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though) width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color; color: $list-group-action-color;
text-align: inherit; // For `<button>`s (anchors inherit) text-align: inherit; // For `<button>`s (anchors inherit)
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state // Hover state
@include hover-focus { @include hover-focus {
color: $list-group-link-hover-color; color: $list-group-action-hover-color;
text-decoration: none; text-decoration: none;
background-color: $list-group-hover-bg; background-color: $list-group-hover-bg;
} }
&:active { &:active {
color: $list-group-link-active-color; color: $list-group-action-active-color;
background-color: $list-group-link-active-bg; background-color: $list-group-action-active-bg;
} }
} }
@ -46,9 +42,7 @@
.list-group-item { .list-group-item {
position: relative; position: relative;
display: flex; display: block;
flex-flow: row wrap;
align-items: center;
padding: $list-group-item-padding-y $list-group-item-padding-x; padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling // Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width; margin-bottom: -$list-group-border-width;
@ -71,16 +65,7 @@
&.disabled, &.disabled,
&:disabled { &:disabled {
color: $list-group-disabled-color; color: $list-group-disabled-color;
cursor: $cursor-disabled;
background-color: $list-group-disabled-bg; background-color: $list-group-disabled-bg;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: $list-group-disabled-text-color;
}
} }
// Include both here for `<a>`s and `<button>`s // Include both here for `<a>`s and `<button>`s
@ -88,18 +73,7 @@
z-index: 2; // Place active items above their siblings for proper border styling z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color; color: $list-group-active-color;
background-color: $list-group-active-bg; background-color: $list-group-active-bg;
border-color: $list-group-active-border; border-color: $list-group-active-border-color;
// Force color to inherit for custom content
.list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit;
}
.list-group-item-text {
color: $list-group-active-text-color;
}
} }
} }
@ -135,7 +109,6 @@
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text); @each $color, $value in $theme-colors {
@include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); }
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);

20
src/sass/bootstrap4/_mixins.scss
View File

@ -2,22 +2,6 @@
// //
// Used in conjunction with global variables to enable certain theme features. // Used in conjunction with global variables to enable certain theme features.
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
@mixin transition($transition...) {
@if $enable-transitions {
@if length($transition) == 0 {
transition: $transition-base;
} @else {
transition: $transition;
}
}
}
// Utilities // Utilities
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/hover"; @import "mixins/hover";
@ -30,13 +14,11 @@
@import "mixins/text-emphasis"; @import "mixins/text-emphasis";
@import "mixins/text-hide"; @import "mixins/text-hide";
@import "mixins/text-truncate"; @import "mixins/text-truncate";
@import "mixins/transforms";
@import "mixins/visibility"; @import "mixins/visibility";
// // Components // // Components
@import "mixins/alert"; @import "mixins/alert";
@import "mixins/buttons"; @import "mixins/buttons";
@import "mixins/cards";
@import "mixins/pagination"; @import "mixins/pagination";
@import "mixins/lists"; @import "mixins/lists";
@import "mixins/list-group"; @import "mixins/list-group";
@ -47,7 +29,9 @@
// // Skins // // Skins
@import "mixins/background-variant"; @import "mixins/background-variant";
@import "mixins/border-radius"; @import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients"; @import "mixins/gradients";
@import "mixins/transition";
// // Layout // // Layout
@import "mixins/clearfix"; @import "mixins/clearfix";

10
src/sass/bootstrap4/_modal.scss
View File

@ -54,7 +54,7 @@
background-clip: padding-box; background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color; border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow); @include box-shadow($modal-content-box-shadow-xs);
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: 0; outline: 0;
} }
@ -82,6 +82,10 @@
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding; padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
.close {
margin-left: auto; // Force icon to the right even when there's no .modal-title
}
} }
// Title text within header // Title text within header
@ -127,11 +131,11 @@
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports
.modal-dialog { .modal-dialog {
max-width: $modal-md; max-width: $modal-md;
margin: $modal-dialog-sm-up-margin-y auto; margin: $modal-dialog-margin-y-sm-up auto;
} }
.modal-content { .modal-content {
@include box-shadow($modal-content-sm-up-box-shadow); @include box-shadow($modal-content-box-shadow-sm-up);
} }
.modal-sm { max-width: $modal-sm; } .modal-sm { max-width: $modal-sm; }

31
src/sass/bootstrap4/_nav.scss
View File

@ -5,6 +5,7 @@
.nav { .nav {
display: flex; display: flex;
flex-wrap: wrap;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
@ -12,20 +13,18 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding; padding: $nav-link-padding-y $nav-link-padding-x;
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
} }
// Disabled state lightens text and removes hover/tab effects // Disabled state lightens text
&.disabled { &.disabled {
color: $nav-disabled-link-color; color: $nav-link-disabled-color;
cursor: $cursor-disabled;
} }
} }
// //
// Tabs // Tabs
// //
@ -46,7 +45,7 @@
} }
&.disabled { &.disabled {
color: $nav-disabled-link-color; color: $nav-link-disabled-color;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
@ -54,9 +53,9 @@
.nav-link.active, .nav-link.active,
.nav-item.show .nav-link { .nav-item.show .nav-link {
color: $nav-tabs-active-link-hover-color; color: $nav-tabs-link-active-color;
background-color: $nav-tabs-active-link-hover-bg; background-color: $nav-tabs-link-active-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg; border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
} }
.dropdown-menu { .dropdown-menu {
@ -75,13 +74,12 @@
.nav-pills { .nav-pills {
.nav-link { .nav-link {
@include border-radius($nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
}
.nav-link.active, &.active,
.nav-item.show .nav-link { .show > & {
color: $nav-pills-active-link-color; color: $nav-pills-link-active-color;
cursor: default; background-color: $nav-pills-link-active-bg;
background-color: $nav-pills-active-link-bg; }
} }
} }
@ -99,7 +97,8 @@
.nav-justified { .nav-justified {
.nav-item { .nav-item {
flex: 1 1 100%; flex-basis: 0;
flex-grow: 1;
text-align: center; text-align: center;
} }
} }

124
src/sass/bootstrap4/_navbar.scss
View File

@ -18,8 +18,20 @@
.navbar { .navbar {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x; padding: $navbar-padding-y $navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
// few properities so that content nested within behave properly.
> .container,
> .container-fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
} }
@ -29,10 +41,10 @@
.navbar-brand { .navbar-brand {
display: inline-block; display: inline-block;
padding-top: .25rem; padding-top: $navbar-brand-padding-y;
padding-bottom: .25rem; padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x; margin-right: $navbar-padding-x;
font-size: $font-size-lg; font-size: $navbar-brand-font-size;
line-height: inherit; line-height: inherit;
white-space: nowrap; white-space: nowrap;
@ -57,6 +69,11 @@
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
.dropdown-menu {
position: static;
float: none;
}
} }
@ -66,8 +83,8 @@
.navbar-text { .navbar-text {
display: inline-block; display: inline-block;
padding-top: .425rem; padding-top: $nav-link-padding-y;
padding-bottom: .425rem; padding-bottom: $nav-link-padding-y;
} }
@ -76,9 +93,18 @@
// Custom styles for responsive collapsing and toggling of navbar contents. // Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin. // Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
}
// Button for toggling the navbar when in its collapsed state // Button for toggling the navbar when in its collapsed state
.navbar-toggler { .navbar-toggler {
align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size; font-size: $navbar-toggler-font-size;
line-height: 1; line-height: 1;
@ -103,34 +129,17 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
// Use `position` on the toggler to prevent it from being auto placed as a flex // Generate series of `.navbar-expand-*` responsive classes for configuring
// item and allow easy placement.
.navbar-toggler-left {
position: absolute;
left: $navbar-padding-x;
}
.navbar-toggler-right {
position: absolute;
right: $navbar-padding-x;
}
// Generate series of `.navbar-toggleable-*` responsive classes for configuring
// where your navbar collapses. // where your navbar collapses.
.navbar-toggleable { .navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints); $next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} { &#{$infix} {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
.navbar-nav { > .container,
.dropdown-menu { > .container-fluid {
position: static;
float: none;
}
}
> .container {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
} }
@ -139,11 +148,20 @@
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; justify-content: flex-start;
.navbar-nav { .navbar-nav {
flex-direction: row; flex-direction: row;
.dropdown-menu {
position: absolute;
}
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.nav-link { .nav-link {
padding-right: .5rem; padding-right: .5rem;
padding-left: .5rem; padding-left: .5rem;
@ -151,16 +169,14 @@
} }
// For nesting containers, have to redeclare for alignment purposes // For nesting containers, have to redeclare for alignment purposes
> .container { > .container,
display: flex; > .container-fluid {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center;
} }
// scss-lint:disable ImportantRule // scss-lint:disable ImportantRule
.navbar-collapse { .navbar-collapse {
display: flex !important; display: flex !important;
width: 100%;
} }
// scss-lint:enable ImportantRule // scss-lint:enable ImportantRule
@ -179,8 +195,7 @@
// Dark links against a light background // Dark links against a light background
.navbar-light { .navbar-light {
.navbar-brand, .navbar-brand {
.navbar-toggler {
color: $navbar-light-active-color; color: $navbar-light-active-color;
@include hover-focus { @include hover-focus {
@ -201,20 +216,21 @@
} }
} }
.open > .nav-link, .show > .nav-link,
.active > .nav-link, .active > .nav-link,
.nav-link.open, .nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-light-active-color; color: $navbar-light-active-color;
} }
} }
.navbar-toggler { .navbar-toggler {
border-color: $navbar-light-toggler-border; color: $navbar-light-color;
border-color: $navbar-light-toggler-border-color;
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-light-toggler-bg; background-image: $navbar-light-toggler-icon-bg;
} }
.navbar-text { .navbar-text {
@ -223,46 +239,46 @@
} }
// White links against a dark background // White links against a dark background
.navbar-inverse { .navbar-dark {
.navbar-brand, .navbar-brand {
.navbar-toggler { color: $navbar-dark-active-color;
color: $navbar-inverse-active-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
color: $navbar-inverse-color; color: $navbar-dark-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-hover-color; color: $navbar-dark-hover-color;
} }
&.disabled { &.disabled {
color: $navbar-inverse-disabled-color; color: $navbar-dark-disabled-color;
} }
} }
.open > .nav-link, .show > .nav-link,
.active > .nav-link, .active > .nav-link,
.nav-link.open, .nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-toggler { .navbar-toggler {
border-color: $navbar-inverse-toggler-border; color: $navbar-dark-color;
border-color: $navbar-dark-toggler-border-color;
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-inverse-toggler-bg; background-image: $navbar-dark-toggler-icon-bg;
} }
.navbar-text { .navbar-text {
color: $navbar-inverse-color; color: $navbar-dark-color;
} }
} }

461
src/sass/bootstrap4/_normalize.scss
View File

@ -1,461 +0,0 @@
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
//
// 1. Change the default font family in all browsers (opinionated).
// 2. Correct the line height in all browsers.
// 3. Prevent adjustments of font size after orientation changes in
// IE on Windows Phone and in iOS.
//
// Document
// ==========================================================================
html {
font-family: sans-serif; // 1
line-height: 1.15; // 2
-ms-text-size-adjust: 100%; // 3
-webkit-text-size-adjust: 100%; // 3
}
// Sections
// ==========================================================================
//
// Remove the margin in all browsers (opinionated).
//
body {
margin: 0;
}
//
// Add the correct display in IE 9-.
//
article,
aside,
footer,
header,
nav,
section {
display: block;
}
//
// Correct the font size and margin on `h1` elements within `section` and
// `article` contexts in Chrome, Firefox, and Safari.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
// Grouping content
// ==========================================================================
//
// Add the correct display in IE 9-.
// 1. Add the correct display in IE.
//
figcaption,
figure,
main { // 1
display: block;
}
//
// Add the correct margin in IE 8.
//
figure {
margin: 1em 40px;
}
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
//
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
}
//
// 1. Correct the inheritance and scaling of font size in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
//
pre {
font-family: monospace, monospace; // 1
font-size: 1em; // 2
}
// Text-level semantics
// ==========================================================================
//
// 1. Remove the gray background on active links in IE 10.
// 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
//
a {
background-color: transparent; // 1
-webkit-text-decoration-skip: objects; // 2
}
//
// Remove the outline on focused links when they are also active or hovered
// in all browsers (opinionated).
//
a:active,
a:hover {
outline-width: 0;
}
//
// 1. Remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
//
abbr[title] {
border-bottom: none; // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
}
//
// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
//
b,
strong {
font-weight: inherit;
}
//
// Add the correct font weight in Chrome, Edge, and Safari.
//
b,
strong {
font-weight: bolder;
}
//
// 1. Correct the inheritance and scaling of font size in all browsers.
// 2. Correct the odd `em` font sizing in all browsers.
//
code,
kbd,
samp {
font-family: monospace, monospace; // 1
font-size: 1em; // 2
}
//
// Add the correct font style in Android 4.3-.
//
dfn {
font-style: italic;
}
//
// Add the correct background and color in IE 9-.
//
mark {
background-color: #ff0;
color: #000;
}
//
// Add the correct font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
// Embedded content
// ==========================================================================
//
// Add the correct display in IE 9-.
//
audio,
video {
display: inline-block;
}
//
// Add the correct display in iOS 4-7.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Remove the border on images inside links in IE 10-.
//
img {
border-style: none;
}
//
// Hide the overflow in IE.
//
svg:not(:root) {
overflow: hidden;
}
// Forms
// ==========================================================================
//
// 1. Change the font styles in all browsers (opinionated).
// 2. Remove the margin in Firefox and Safari.
//
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; // 1
font-size: 100%; // 1
line-height: 1.15; // 1
margin: 0; // 2
}
//
// Show the overflow in IE.
// 1. Show the overflow in Edge.
//
button,
input { // 1
overflow: visible;
}
//
// Remove the inheritance of text transform in Edge, Firefox, and IE.
// 1. Remove the inheritance of text transform in Firefox.
//
button,
select { // 1
text-transform: none;
}
//
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
//
button,
html [type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
}
//
// Remove the inner border and padding in Firefox.
//
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
//
// Restore the focus styles unset by the previous rule.
//
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
//
// Change the border, margin, and padding in all browsers (opinionated).
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
// 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers.
//
legend {
box-sizing: border-box; // 1
color: inherit; // 2
display: table; // 1
max-width: 100%; // 1
padding: 0; // 3
white-space: normal; // 1
}
//
// 1. Add the correct display in IE 9-.
// 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
//
progress {
display: inline-block; // 1
vertical-align: baseline; // 2
}
//
// Remove the default vertical scrollbar in IE.
//
textarea {
overflow: auto;
}
//
// 1. Add the correct box sizing in IE 10-.
// 2. Remove the padding in IE 10-.
//
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// Correct the cursor style of increment and decrement buttons in Chrome.
//
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
//
// 1. Correct the odd appearance in Chrome and Safari.
// 2. Correct the outline style in Safari.
//
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
//
// 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;
}
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Interactive
// ==========================================================================
//
// Add the correct display in IE 9-.
// 1. Add the correct display in Edge, IE, and Firefox.
//
details, // 1
menu {
display: block;
}
//
// Add the correct display in all browsers.
//
summary {
display: list-item;
}
// Scripting
// ==========================================================================
//
// Add the correct display in IE 9-.
//
canvas {
display: inline-block;
}
//
// Add the correct display in IE.
//
template {
display: none;
}
// Hidden
// ==========================================================================
//
// Add the correct display in IE 10-.
//
[hidden] {
display: none;
}

7
src/sass/bootstrap4/_pagination.scss
View File

@ -23,15 +23,14 @@
z-index: 2; z-index: 2;
color: $pagination-active-color; color: $pagination-active-color;
background-color: $pagination-active-bg; background-color: $pagination-active-bg;
border-color: $pagination-active-border; border-color: $pagination-active-border-color;
} }
&.disabled .page-link { &.disabled .page-link {
color: $pagination-disabled-color; color: $pagination-disabled-color;
pointer-events: none; pointer-events: none;
cursor: $cursor-disabled; // While `pointer-events: none` removes the cursor in modern browsers, we provide a disabled cursor as a fallback.
background-color: $pagination-disabled-bg; background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border; border-color: $pagination-disabled-border-color;
} }
} }
@ -49,7 +48,7 @@
color: $pagination-hover-color; color: $pagination-hover-color;
text-decoration: none; text-decoration: none;
background-color: $pagination-hover-bg; background-color: $pagination-hover-bg;
border-color: $pagination-hover-border; border-color: $pagination-hover-border-color;
} }
} }

168
src/sass/bootstrap4/_popover.scss
View File

@ -18,79 +18,110 @@
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
@include box-shadow($popover-box-shadow); @include box-shadow($popover-box-shadow);
// Arrows
//
// .arrow is outer, .arrow::after is inner
.arrow {
position: absolute;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
}
.arrow::before,
.arrow::after {
position: absolute;
display: block;
border-color: transparent;
border-style: solid;
}
.arrow::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.arrow::after {
content: "";
border-width: $popover-arrow-outer-width;
}
// Popover directions // Popover directions
&.popover-top, &.bs-popover-top {
&.bs-tether-element-attached-bottom { margin-bottom: $popover-arrow-width;
margin-top: -$popover-arrow-width;
&::before, .arrow {
&::after { bottom: 0;
left: 50%; }
.arrow::before,
.arrow::after {
border-bottom-width: 0; border-bottom-width: 0;
} }
&::before { .arrow::before {
bottom: -$popover-arrow-outer-width; bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width; margin-left: -($popover-arrow-outer-width - 5);
border-top-color: $popover-arrow-outer-color; border-top-color: $popover-arrow-outer-color;
} }
&::after { .arrow::after {
bottom: -($popover-arrow-outer-width - 1); bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width; margin-left: -($popover-arrow-outer-width - 5);
border-top-color: $popover-arrow-color; border-top-color: $popover-arrow-color;
} }
} }
&.popover-right, &.bs-popover-right {
&.bs-tether-element-attached-left {
margin-left: $popover-arrow-width; margin-left: $popover-arrow-width;
&::before, .arrow {
&::after { left: 0;
top: 50%; }
.arrow::before,
.arrow::after {
margin-top: -($popover-arrow-outer-width - 3);
border-left-width: 0; border-left-width: 0;
} }
&::before { .arrow::before {
left: -$popover-arrow-outer-width; left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color; border-right-color: $popover-arrow-outer-color;
} }
&::after { .arrow::after {
left: -($popover-arrow-outer-width - 1); left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color; border-right-color: $popover-arrow-color;
} }
} }
&.popover-bottom, &.bs-popover-bottom {
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width; margin-top: $popover-arrow-width;
&::before, .arrow {
&::after { top: 0;
left: 50%; }
.arrow::before,
.arrow::after {
margin-left: -($popover-arrow-width - 3);
border-top-width: 0; border-top-width: 0;
} }
&::before { .arrow::before {
top: -$popover-arrow-outer-width; top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color; border-bottom-color: $popover-arrow-outer-color;
} }
&::after { .arrow::after {
top: -($popover-arrow-outer-width - 1); top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width; border-bottom-color: $popover-arrow-color;
border-bottom-color: $popover-title-bg;
} }
// This will remove the popover-title's border just below the arrow // This will remove the popover-header's border just below the arrow
.popover-title::before { .popover-header::before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
@ -98,42 +129,58 @@
width: 20px; width: 20px;
margin-left: -10px; margin-left: -10px;
content: ""; content: "";
border-bottom: 1px solid $popover-title-bg; border-bottom: 1px solid $popover-header-bg;
} }
} }
&.popover-left, &.bs-popover-left {
&.bs-tether-element-attached-right { margin-right: $popover-arrow-width;
margin-left: -$popover-arrow-width;
&::before, .arrow {
&::after { right: 0;
top: 50%; }
.arrow::before,
.arrow::after {
margin-top: -($popover-arrow-outer-width - 3);
border-right-width: 0; border-right-width: 0;
} }
&::before { .arrow::before {
right: -$popover-arrow-outer-width; right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color; border-left-color: $popover-arrow-outer-color;
} }
&::after { .arrow::after {
right: -($popover-arrow-outer-width - 1); right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color; border-left-color: $popover-arrow-color;
} }
} }
&.bs-popover-auto {
&[x-placement^="top"] {
@extend .bs-popover-top;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
}
&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
}
}
} }
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
.popover-title { .popover-header {
padding: $popover-title-padding-y $popover-title-padding-x; padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base; font-size: $font-size-base;
background-color: $popover-title-bg; color: $popover-header-color;
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%); background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width}); $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width); @include border-top-radius($offset-border-width);
@ -142,30 +189,7 @@
} }
} }
.popover-content { .popover-body {
padding: $popover-content-padding-y $popover-content-padding-x; padding: $popover-body-padding-y $popover-body-padding-x;
} color: $popover-body-color;
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
.popover::before,
.popover::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover::before {
content: "";
border-width: $popover-arrow-outer-width;
}
.popover::after {
content: "";
border-width: $popover-arrow-width;
} }

10
src/sass/bootstrap4/_print.scss
View File

@ -12,15 +12,7 @@
@media print { @media print {
*, *,
*::before, *::before,
*::after, *::after {
p::first-letter,
div::first-letter,
blockquote::first-letter,
li::first-letter,
p::first-line,
div::first-line,
blockquote::first-line,
li::first-line {
// Bootstrap specific; comment out `color` and `background` // Bootstrap specific; comment out `color` and `background`
//color: #000 !important; // Black prints faster: //color: #000 !important; // Black prints faster:
// http://www.sanbeiji.com/archives/953 // http://www.sanbeiji.com/archives/953

12
src/sass/bootstrap4/_progress.scss
View File

@ -1,32 +1,30 @@
// Progress animations
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { background-position: $progress-height 0; } from { background-position: $progress-height 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
} }
// Basic progress bar
.progress { .progress {
display: flex; display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it overflow: hidden; // force rounded corners by cropping it
font-size: $progress-font-size; font-size: $progress-font-size;
line-height: $progress-height;
text-align: center;
background-color: $progress-bg; background-color: $progress-bg;
@include border-radius($progress-border-radius); @include border-radius($progress-border-radius);
} }
.progress-bar { .progress-bar {
height: $progress-height; display: flex;
align-items: center;
justify-content: center;
color: $progress-bar-color; color: $progress-bar-color;
background-color: $progress-bar-bg; background-color: $progress-bar-bg;
} }
// Striped
.progress-bar-striped { .progress-bar-striped {
@include gradient-striped(); @include gradient-striped();
background-size: $progress-height $progress-height; background-size: $progress-height $progress-height;
} }
// Animated
.progress-bar-animated { .progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing; animation: progress-bar-stripes $progress-bar-animation-timing;
} }

295
src/sass/bootstrap4/_reboot.scss
View File

@ -1,86 +1,64 @@
// scss-lint:disable QualifyingElement, DuplicateProperty // scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
// Reboot // Reboot
// //
// Global resets to common HTML elements and more for easier usage by Bootstrap. // Normalization of HTML elements, manually forked from Normalize.css to remove
// Adds additional rules on top of Normalize.css, including several overrides. // styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Reset the box-sizing // Document
// //
// Change from `box-sizing: content-box` to `border-box` so that when you add // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// `padding` or `border`s to an element, the overall declared `width` does not // 2. Change the default font family in all browsers.
// change. For example, `width: 100px;` will always be `100px` despite the // 3. Correct the line height in all browsers.
// `border: 10px solid red;` and `padding: 20px;`. // 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
// Heads up! This reset may cause conflicts with some third-party widgets. For // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
// recommendations on resolving such conflicts, see // 6. Change the default tap highlight to be completely transparent in iOS.
// https://getbootstrap.com/getting-started/#third-box-sizing.
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: inherit; box-sizing: border-box; // 1
} }
html {
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
-ms-text-size-adjust: 100%; // 4
-ms-overflow-style: scrollbar; // 5
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
}
// Make viewport responsive // IE10+ doesn't honor `<meta name="viewport">` in some cases.
//
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// Eventually @viewport will replace <meta name="viewport">.
//
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
// and the fix for that involves a snippet of JavaScript to sniff the user agent
// and apply some conditional CSS.
//
// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
//
// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
// `.class-name { @import "bootstrap"; }`).
@at-root { @at-root {
@-ms-viewport { width: device-width; } @-ms-viewport { width: device-width; }
} }
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
// article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
// Reset HTML, body, and more display: block;
//
html {
// We assume no initial pixel `font-size` for accessibility reasons. This
// allows web visitors to customize their browser default font-size, making
// your project more inclusive and accessible to everyone.
// As a side-effect of setting the @viewport above,
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
// thus making it hard to click on stuff near the right edge of the page.
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
// See https://github.com/twbs/bootstrap/issues/18543
// and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
-ms-overflow-style: scrollbar;
// Changes the default tap highlight to be completely transparent in iOS.
-webkit-tap-highlight-color: rgba(0,0,0,0);
} }
// 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
// the `inherit` value on things like `<th>` elements.
body { body {
margin: 0; // 1
font-family: $font-family-base; font-family: $font-family-base;
font-size: $font-size-base; font-size: $font-size-base;
font-weight: $font-weight-base; font-weight: $font-weight-base;
line-height: $line-height-base; line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
color: $body-color; color: $body-color;
// By default, `<body>` has no `background-color` so we set one as a best practice. text-align: left; // 3
background-color: $body-bg; background-color: $body-bg; // 2
} }
// Suppress the focus outline on elements that cannot be accessed via keyboard. // Suppress the focus outline on elements that cannot be accessed via keyboard.
@ -93,6 +71,18 @@ body {
} }
// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
}
// //
// Typography // Typography
// //
@ -112,14 +102,22 @@ h1, h2, h3, h4, h5, h6 {
// bottom margin to use `rem` units instead of `em`. // bottom margin to use `rem` units instead of `em`.
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: $paragraph-margin-bottom;
} }
// Abbreviations // Abbreviations
//
// 1. Remove the bottom border in Firefox 39-.
// 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
abbr[title], abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { // 4
abbr[data-original-title] { text-decoration: underline; // 2
cursor: help; text-decoration: underline dotted; // 2
cursor: help; // 3
border-bottom: 0; // 1
} }
address { address {
@ -155,6 +153,35 @@ blockquote {
margin: 0 0 1rem; margin: 0 0 1rem;
} }
dfn {
font-style: italic; // Add the correct font style in Android 4.3-
}
b,
strong {
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
}
small {
font-size: 80%; // Add the correct font size in all browsers
}
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
// //
// Links // Links
@ -163,8 +190,10 @@ blockquote {
a { a {
color: $link-color; color: $link-color;
text-decoration: $link-decoration; 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-focus { @include hover {
color: $link-hover-color; color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
@ -195,12 +224,20 @@ a:not([href]):not([tabindex]) {
// Code // Code
// //
pre,
code,
kbd,
samp {
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
}
pre { pre {
// Remove browser default top margin // Remove browser default top margin
margin-top: 0; margin-top: 0;
// Reset browser default of `1em` to use `rem`s // Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem; margin-bottom: 1rem;
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets // Don't allow content to break outside
overflow: auto; overflow: auto;
} }
@ -210,33 +247,22 @@ pre {
// //
figure { figure {
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently. // Apply a consistent margin strategy (matches our type styles).
// We reset that to create a better flow in-page.
margin: 0 0 1rem; margin: 0 0 1rem;
} }
// //
// Images // Images and content
// //
img { img {
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
// centers them. This won't apply should you reset them to `block` level.
vertical-align: middle; vertical-align: middle;
// Note: `<img>`s are deliberately not made responsive by default. border-style: none; // Remove the border on images inside links in IE 10-.
// For the rationale behind this, see the comments on the `.img-fluid` class.
} }
svg:not(:root) {
// iOS "clickable elements" fix for role="button" overflow: hidden; // Hide the overflow in IE
//
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
// for traditionally non-focusable elements with role="button"
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
[role="button"] {
cursor: pointer;
} }
@ -268,10 +294,7 @@ textarea {
// //
table { table {
// No longer part of Normalize since v4 border-collapse: collapse; // Prevent double borders
border-collapse: collapse;
// Reset for nesting within parents with `background-color`.
background-color: $table-bg;
} }
caption { caption {
@ -283,8 +306,9 @@ caption {
} }
th { th {
// Centered by default, but left-align-ed to match the `td`s below. // Matches default `<td>` alignment by inheriting from the `<body>`, or the
text-align: left; // closest parent with a set `text-align`.
text-align: inherit;
} }
@ -310,20 +334,47 @@ button:focus {
input, input,
button, button,
select, select,
optgroup,
textarea { textarea {
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are margin: 0; // Remove the margin in Firefox and Safari
// properly inherited. However, `line-height` isn't inherited there. font-family: inherit;
font-size: inherit;
line-height: inherit; line-height: inherit;
} }
button,
input {
overflow: visible; // Show the overflow in Edge
}
button,
select {
text-transform: none; // Remove the inheritance of text transform in Firefox
}
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
html [type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
// Apply a disabled cursor for radios and checkboxes. box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
// padding: 0; // 2. Remove the padding in IE 10-
// Note: Neither radios nor checkboxes can be readonly.
&:disabled {
cursor: $cursor-disabled;
}
} }
@ -340,6 +391,7 @@ input[type="month"] {
} }
textarea { textarea {
overflow: auto; // Remove the default vertical scrollbar in IE.
// Textareas should really only resize vertically so they don't break their (horizontal) containers. // Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical; resize: vertical;
} }
@ -357,33 +409,76 @@ fieldset {
border: 0; border: 0;
} }
// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend { legend {
// Reset the entire legend element to match the `fieldset`
display: block; display: block;
width: 100%; width: 100%;
max-width: 100%; // 1
padding: 0; padding: 0;
margin-bottom: .5rem; margin-bottom: .5rem;
font-size: 1.5rem; font-size: 1.5rem;
line-height: inherit; line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
} }
input[type="search"] { progress {
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
// This overrides the extra rounded corners on search inputs in iOS so that our // This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply // `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see // be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586. // https://github.com/twbs/bootstrap/issues/11586.
outline-offset: -2px; // 2. Correct the outline style in Safari.
-webkit-appearance: none; -webkit-appearance: none;
} }
// todo: needed? //
// 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;
}
//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//
::-webkit-file-upload-button {
font: inherit; // 2
-webkit-appearance: button; // 1
}
//
// Correct element displays
//
output { output {
display: inline-block; display: inline-block;
// font-size: $font-size-base; }
// line-height: $line-height;
// color: $input-color; summary {
display: list-item; // Add the correct display in all browsers
}
template {
display: none; // Add the correct display in IE
} }
// Always hide an element with the `hidden` HTML attribute (from PureCSS). // Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden] { [hidden] {
display: none !important; display: none !important;
} }

51
src/sass/bootstrap4/_tables.scss
View File

@ -6,6 +6,7 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th, th,
td { td {
@ -36,7 +37,7 @@
.table-sm { .table-sm {
th, th,
td { td {
padding: $table-sm-cell-padding; padding: $table-cell-padding-sm;
} }
} }
@ -68,7 +69,7 @@
.table-striped { .table-striped {
tbody tr:nth-of-type(odd) { tbody tr:nth-of-type(odd) {
background-color: $table-bg-accent; background-color: $table-accent-bg;
} }
} }
@ -80,7 +81,7 @@
.table-hover { .table-hover {
tbody tr { tbody tr {
@include hover { @include hover {
background-color: $table-bg-hover; background-color: $table-hover-bg;
} }
} }
} }
@ -91,12 +92,11 @@
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables. // inheritance to nested tables.
// Generate the contextual variants @each $color, $value in $theme-colors {
@include table-row-variant(active, $table-bg-active); @include table-row-variant($color, theme-color-level($color, -9));
@include table-row-variant(success, $state-success-bg); }
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg); @include table-row-variant(active, $table-active-bg);
@include table-row-variant(danger, $state-danger-bg);
// Inverse styles // Inverse styles
@ -124,14 +124,27 @@
th, th,
td, td,
thead th { thead th {
border-color: $body-bg; border-color: $table-inverse-border-color;
} }
&.table-bordered { &.table-bordered {
border: 0; border: 0;
} }
}
&.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-inverse-accent-bg;
}
}
&.table-hover {
tbody tr {
@include hover {
background-color: $table-inverse-hover-bg;
}
}
}
}
// Responsive tables // Responsive tables
@ -141,13 +154,15 @@
// will display normally. // will display normally.
.table-responsive { .table-responsive {
display: block; @include media-breakpoint-down(md) {
width: 100%; display: block;
overflow-x: auto; width: 100%;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// Prevent double border on horizontal scroll due to use of `display: block;` // Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered { &.table-bordered {
border: 0; border: 0;
}
} }
} }

89
src/sass/bootstrap4/_tooltip.scss
View File

@ -3,6 +3,7 @@
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
display: block; display: block;
margin: $tooltip-margin;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values. // So reset our font and text properties to avoid inheriting weird values.
@include reset-text(); @include reset-text();
@ -13,62 +14,86 @@
&.show { opacity: $tooltip-opacity; } &.show { opacity: $tooltip-opacity; }
&.tooltip-top, .arrow {
&.bs-tether-element-attached-bottom { position: absolute;
padding: $tooltip-arrow-width 0; display: block;
margin-top: -$tooltip-margin; width: $tooltip-arrow-width;
height: $tooltip-arrow-height;
}
.tooltip-inner::before { &.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
.arrow {
bottom: 0; bottom: 0;
left: 50%; }
margin-left: -$tooltip-arrow-width;
.arrow::before {
margin-left: -($tooltip-arrow-width - 2);
content: ""; content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color; border-top-color: $tooltip-arrow-color;
} }
} }
&.tooltip-right, &.bs-tooltip-right {
&.bs-tether-element-attached-left {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin; .arrow {
.tooltip-inner::before {
top: 50%;
left: 0; left: 0;
margin-top: -$tooltip-arrow-width; }
.arrow::before {
margin-top: -($tooltip-arrow-width - 2);
content: ""; content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color; border-right-color: $tooltip-arrow-color;
} }
} }
&.tooltip-bottom, &.bs-tooltip-bottom {
&.bs-tether-element-attached-top {
padding: $tooltip-arrow-width 0; padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin; .arrow {
.tooltip-inner::before {
top: 0; top: 0;
left: 50%; }
margin-left: -$tooltip-arrow-width;
.arrow::before {
margin-left: -($tooltip-arrow-width - 2);
content: ""; content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color; border-bottom-color: $tooltip-arrow-color;
} }
} }
&.tooltip-left, &.bs-tooltip-left {
&.bs-tether-element-attached-right {
padding: 0 $tooltip-arrow-width; padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin; .arrow {
.tooltip-inner::before {
top: 50%;
right: 0; right: 0;
margin-top: -$tooltip-arrow-width; }
.arrow::before {
right: 0;
margin-top: -($tooltip-arrow-width - 2);
content: ""; content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color; border-left-color: $tooltip-arrow-color;
} }
} }
&.bs-tooltip-auto {
&[x-placement^="top"] {
@extend .bs-tooltip-top;
}
&[x-placement^="right"] {
@extend .bs-tooltip-right;
}
&[x-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[x-placement^="left"] {
@extend .bs-tooltip-left;
}
}
.arrow::before {
position: absolute;
border-color: transparent;
border-style: solid;
}
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@ -79,12 +104,4 @@
text-align: center; text-align: center;
background-color: $tooltip-bg; background-color: $tooltip-bg;
@include border-radius($border-radius); @include border-radius($border-radius);
&::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
} }

36
src/sass/bootstrap4/_type.scss
View File

@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color; color: $headings-color;
} }
h1, .h1 { font-size: $font-size-h1; } h1, .h1 { font-size: $h1-font-size; }
h2, .h2 { font-size: $font-size-h2; } h2, .h2 { font-size: $h2-font-size; }
h3, .h3 { font-size: $font-size-h3; } h3, .h3 { font-size: $h3-font-size; }
h4, .h4 { font-size: $font-size-h4; } h4, .h4 { font-size: $h4-font-size; }
h5, .h5 { font-size: $font-size-h5; } h5, .h5 { font-size: $h5-font-size; }
h6, .h6 { font-size: $font-size-h6; } h6, .h6 { font-size: $h6-font-size; }
.lead { .lead {
font-size: $lead-font-size; font-size: $lead-font-size;
@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
// //
hr { hr {
margin-top: $spacer-y; margin-top: 1rem;
margin-bottom: $spacer-y; margin-bottom: 1rem;
border: 0; border: 0;
border-top: $hr-border-width solid $hr-border-color; border-top: $hr-border-width solid $hr-border-color;
} }
@ -108,10 +108,8 @@ mark,
// Blockquotes // Blockquotes
.blockquote { .blockquote {
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer; margin-bottom: $spacer;
font-size: $blockquote-font-size; font-size: $blockquote-font-size;
border-left: $blockquote-border-width solid $blockquote-border-color;
} }
.blockquote-footer { .blockquote-footer {
@ -123,21 +121,3 @@ mark,
content: "\2014 \00A0"; // em dash, nbsp content: "\2014 \00A0"; // em dash, nbsp
} }
} }
// Opposite alignment of blockquote
.blockquote-reverse {
padding-right: $spacer;
padding-left: 0;
text-align: right;
border-right: $blockquote-border-width solid $blockquote-border-color;
border-left: 0;
}
.blockquote-reverse .blockquote-footer {
&::before {
content: "";
}
&::after {
content: "\00A0 \2014"; // nbsp, em dash
}
}

1
src/sass/bootstrap4/_utilities.scss
View File

@ -3,6 +3,7 @@
@import "utilities/borders"; @import "utilities/borders";
@import "utilities/clearfix"; @import "utilities/clearfix";
@import "utilities/display"; @import "utilities/display";
@import "utilities/embed";
@import "utilities/flex"; @import "utilities/flex";
@import "utilities/float"; @import "utilities/float";
@import "utilities/position"; @import "utilities/position";

721
src/sass/bootstrap4/_variables.scss
View File

File diff suppressed because it is too large Load Diff

10
src/sass/bootstrap4/bootstrap-grid.scss vendored
View File

@ -22,22 +22,16 @@ html {
box-sizing: inherit; box-sizing: inherit;
} }
@import "functions";
//
// Variables
//
@import "variables"; @import "variables";
// //
// Grid mixins // Grid mixins
// //
@import "mixins/clearfix";
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/grid-framework"; @import "mixins/grid-framework";
@import "mixins/grid"; @import "mixins/grid";
@import "custom";
@import "grid"; @import "grid";
@import "utilities/flex";

3
src/sass/bootstrap4/bootstrap-reboot.scss vendored
View File

@ -2,9 +2,8 @@
// //
// Includes only Normalize and our custom Reboot reset. // Includes only Normalize and our custom Reboot reset.
@import "functions";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "custom";
@import "normalize";
@import "reboot"; @import "reboot";

17
src/sass/bootstrap4/bootstrap.scss vendored
View File

@ -1,20 +1,14 @@
/*! /*!
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com) * Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc. * Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ */
// Core variables and mixins @import "functions";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "custom";
// Reset and dependencies
@import "normalize";
@import "print"; @import "print";
// Core CSS
@import "reboot"; @import "reboot";
@import "type"; @import "type";
@import "images"; @import "images";
@ -23,8 +17,6 @@
@import "tables"; @import "tables";
@import "forms"; @import "forms";
@import "buttons"; @import "buttons";
// Components
@import "transitions"; @import "transitions";
@import "dropdown"; @import "dropdown";
@import "button-group"; @import "button-group";
@ -41,14 +33,9 @@
@import "progress"; @import "progress";
@import "media"; @import "media";
@import "list-group"; @import "list-group";
@import "responsive-embed";
@import "close"; @import "close";
// Components w/ JavaScript
@import "modal"; @import "modal";
@import "tooltip"; @import "tooltip";
@import "popover"; @import "popover";
@import "carousel"; @import "carousel";
// Utility classes
@import "utilities"; @import "utilities";

9
src/sass/bootstrap4/mixins/_alert.scss
View File

@ -1,14 +1,13 @@
// Alerts @mixin alert-variant($background, $border, $color) {
color: $color;
@mixin alert-variant($background, $border, $body-color) {
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
color: $body-color;
hr { hr {
border-top-color: darken($border, 5%); border-top-color: darken($border, 5%);
} }
.alert-link { .alert-link {
color: darken($body-color, 10%); color: darken($color, 10%);
} }
} }

11
src/sass/bootstrap4/mixins/_badge.scss
View File

@ -1,11 +1,12 @@
// Badges @mixin badge-variant($bg) {
@include color-yiq($bg);
@mixin badge-variant($color) { background-color: $bg;
background-color: $color;
&[href] { &[href] {
@include hover-focus { @include hover-focus {
background-color: darken($color, 10%); @include color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
} }
} }
} }

6
src/sass/bootstrap4/mixins/_border-radius.scss
View File

@ -8,15 +8,15 @@
@mixin border-top-radius($radius) { @mixin border-top-radius($radius) {
@if $enable-rounded { @if $enable-rounded {
border-top-right-radius: $radius;
border-top-left-radius: $radius; border-top-left-radius: $radius;
border-top-right-radius: $radius;
} }
} }
@mixin border-right-radius($radius) { @mixin border-right-radius($radius) {
@if $enable-rounded { @if $enable-rounded {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius; border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
} }
} }
@ -29,7 +29,7 @@
@mixin border-left-radius($radius) { @mixin border-left-radius($radius) {
@if $enable-rounded { @if $enable-rounded {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius; border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
} }
} }

5
src/sass/bootstrap4/mixins/_box-shadow.scss Normal file
View File

@ -0,0 +1,5 @@
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}

36
src/sass/bootstrap4/mixins/_breakpoints.scss
View File

@ -2,7 +2,7 @@
// //
// Breakpoints are defined as a map of (name: minimum width), order from small to large: // Breakpoints are defined as a map of (name: minimum width), order from small to large:
// //
// (xs: 0, sm: 576px, md: 768px) // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
// //
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
@ -10,9 +10,9 @@
// //
// >> breakpoint-next(sm) // >> breakpoint-next(sm)
// md // md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// md // md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md // md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name); $n: index($breakpoint-names, $name);
@ -21,7 +21,7 @@
// Minimum breakpoint width. Null for the smallest (first) breakpoint. // Minimum breakpoint width. Null for the smallest (first) breakpoint.
// //
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px // 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name); $min: map-get($breakpoints, $name);
@ -31,7 +31,7 @@
// Maximum breakpoint width. Null for the largest (last) breakpoint. // Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1. // The maximum value is calculated as the minimum of the next one less 0.1.
// //
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767px // 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints); $next: breakpoint-next($name, $breakpoints);
@ -41,9 +41,9 @@
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities. // Useful for making responsive utilities.
// //
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "" (Returns a blank string) // "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm" // "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@ -78,10 +78,11 @@
// Media that spans multiple breakpoint widths. // Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints // Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($lower, $breakpoints) { $min: breakpoint-min($lower, $breakpoints);
@include media-breakpoint-down($upper, $breakpoints) { $max: breakpoint-max($upper, $breakpoints);
@content;
} @media (min-width: $min) and (max-width: $max) {
@content;
} }
} }
@ -89,7 +90,16 @@
// No minimum for the smallest breakpoint, and no maximum for the largest one. // No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-between($name, $name, $breakpoints) { $min: breakpoint-min($name, $breakpoints);
@content; $max: breakpoint-max($name, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name)
} @else if $min == null {
@include media-breakpoint-down($name)
} }
} }

25
src/sass/bootstrap4/mixins/_buttons.scss
View File

@ -3,28 +3,25 @@
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
@mixin button-variant($color, $background, $border) { @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
$active-background: darken($background, 10%); @include color-yiq($background);
$active-border: darken($border, 12%);
color: $color;
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
@include box-shadow($btn-box-shadow); @include box-shadow($btn-box-shadow);
// Hover and focus styles are shared &:hover {
@include hover { @include color-yiq($background);
color: $color;
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
} }
&:focus, &:focus,
&.focus { &.focus {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows { @if $enable-shadows {
box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5); box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
} @else { } @else {
box-shadow: 0 0 0 2px rgba($border, .5); box-shadow: 0 0 0 3px rgba($border, .5);
} }
} }
@ -38,7 +35,6 @@
&:active, &:active,
&.active, &.active,
.show > &.dropdown-toggle { .show > &.dropdown-toggle {
color: $color;
background-color: $active-background; background-color: $active-background;
background-image: none; // Remove the gradient for the pressed/active state background-image: none; // Remove the gradient for the pressed/active state
border-color: $active-border; border-color: $active-border;
@ -48,8 +44,8 @@
@mixin button-outline-variant($color, $color-hover: #fff) { @mixin button-outline-variant($color, $color-hover: #fff) {
color: $color; color: $color;
background-image: none;
background-color: transparent; background-color: transparent;
background-image: none;
border-color: $color; border-color: $color;
@include hover { @include hover {
@ -60,7 +56,7 @@
&:focus, &:focus,
&.focus { &.focus {
box-shadow: 0 0 0 2px rgba($color, .5); box-shadow: 0 0 0 3px rgba($color, .5);
} }
&.disabled, &.disabled,
@ -79,8 +75,9 @@
} }
// Button sizes // Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius); @include border-radius($border-radius);
} }

47
src/sass/bootstrap4/mixins/_cards.scss
View File

@ -1,47 +0,0 @@
// Card variants
@mixin card-variant($background, $border) {
background-color: $background;
border-color: $border;
.card-header,
.card-footer {
background-color: transparent;
}
}
@mixin card-outline-variant($color) {
background-color: transparent;
border-color: $color;
}
//
// Inverse text within a card for use with dark backgrounds
//
@mixin card-inverse {
color: rgba(255,255,255,.65);
.card-header,
.card-footer {
background-color: transparent;
border-color: rgba(255,255,255,.2);
}
.card-header,
.card-footer,
.card-title,
.card-blockquote {
color: #fff;
}
.card-link,
.card-text,
.card-subtitle,
.card-blockquote .blockquote-footer {
color: rgba(255,255,255,.65);
}
.card-link {
@include hover-focus {
color: $card-link-hover-color;
}
}
}

2
src/sass/bootstrap4/mixins/_clearfix.scss
View File

@ -1,7 +1,7 @@
@mixin clearfix() { @mixin clearfix() {
&::after { &::after {
display: block; display: block;
content: "";
clear: both; clear: both;
content: "";
} }
} }

112
src/sass/bootstrap4/mixins/_forms.scss
View File

@ -1,39 +1,7 @@
// Form validation states
//
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
// and successes.
@mixin form-control-validation($color) {
// Color the label and help text
.form-control-feedback,
.form-control-label,
.col-form-label,
.form-check-label,
.custom-control {
color: $color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: $color;
&:focus {
@include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
}
}
// Set validation states also for addons
.input-group-addon {
color: $color;
border-color: $color;
background-color: lighten($color, 40%);
}
}
// Form control focus state // Form control focus state
// //
// Generate a customized focus state and for any input with the specified color, // Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable. // which defaults to the `@input-border-color-focus` variable.
// //
// We highly encourage you to not customize the default value, but instead use // We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on // this to tweak colors on an as-needed basis. This aesthetic change is based on
@ -44,36 +12,70 @@
// contrast against a dark gray background. // contrast against a dark gray background.
@mixin form-control-focus() { @mixin form-control-focus() {
&:focus { &:focus {
color: $input-color-focus; color: $input-focus-color;
background-color: $input-bg-focus; background-color: $input-focus-bg;
border-color: $input-border-focus; border-color: $input-focus-border-color;
outline: none; outline: none;
@include box-shadow($input-box-shadow-focus); @include box-shadow($input-focus-box-shadow);
} }
} }
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { @mixin form-validation-state($state, $color) {
#{$parent} {
height: $input-height; .form-control,
padding: $padding-y $padding-x; .custom-select {
font-size: $font-size; .was-validated &:#{$state},
line-height: $line-height; &.is-#{$state} {
@include border-radius($border-radius); border-color: $color;
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
~ .invalid-feedback,
~ .invalid-tooltip {
display: block;
}
}
} }
select#{$parent} {
height: $input-height; // TODO: redo check markup lol crap
line-height: $input-height; .form-check-input {
.was-validated &:#{$state},
&.is-#{$state} {
+ .form-check-label {
color: $color;
}
}
} }
textarea#{$parent}, // custom radios and checks
select[multiple]#{$parent} { .custom-control-input {
height: auto; .was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-indicator {
background-color: rgba($color, .25);
}
~ .custom-control-description {
color: $color;
}
}
}
// custom file
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-control {
border-color: $color;
&::before { border-color: inherit; }
}
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
}
} }
} }

2
src/sass/bootstrap4/mixins/_gradients.scss
View File

@ -17,8 +17,8 @@
} }
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: linear-gradient($deg, $start-color, $end-color); background-image: linear-gradient($deg, $start-color, $end-color);
background-repeat: repeat-x;
} }
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);

27
src/sass/bootstrap4/mixins/_grid-framework.scss
View File

@ -3,14 +3,14 @@
// Used only by Bootstrap to generate the correct number of grid classes given // Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`. // any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) { @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints // Common properties for all breakpoints
%grid-column { %grid-column {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($gutter / 2);
@include make-gutters($gutters); padding-left: ($gutter / 2);
} }
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map-keys($breakpoints) {
@ -22,7 +22,8 @@
@extend %grid-column; @extend %grid-column;
} }
} }
.col#{$infix} { .col#{$infix},
.col#{$infix}-auto {
@extend %grid-column; @extend %grid-column;
} }
@ -36,6 +37,7 @@
.col#{$infix}-auto { .col#{$infix}-auto {
flex: 0 0 auto; flex: 0 0 auto;
width: auto; width: auto;
max-width: none; // Reset earlier grid tiers
} }
@for $i from 1 through $columns { @for $i from 1 through $columns {
@ -44,20 +46,9 @@
} }
} }
@each $modifier in (pull, push) { @for $i from 1 through $columns {
@for $i from 0 through $columns { .order#{$infix}-#{$i} {
.#{$modifier}#{$infix}-#{$i} { order: $i;
@include make-col-modifier($modifier, $i, $columns)
}
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
.offset#{$infix}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
} }
} }
} }

77
src/sass/bootstrap4/mixins/_grid.scss
View File

@ -2,18 +2,12 @@
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@mixin make-container($gutters: $grid-gutter-widths) { @mixin make-container() {
position: relative;
margin-left: auto;
margin-right: auto; margin-right: auto;
margin-left: auto;
@each $breakpoint in map-keys($gutters) { padding-right: ($grid-gutter-width / 2);
@include media-breakpoint-up($breakpoint) { padding-left: ($grid-gutter-width / 2);
$gutter: map-get($gutters, $breakpoint); width: 100%;
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
} }
@ -21,80 +15,33 @@
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths { @each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) { @include media-breakpoint-up($breakpoint, $breakpoints) {
width: $container-max-width; max-width: $container-max-width;
max-width: 100%;
} }
} }
} }
@mixin make-gutters($gutters: $grid-gutter-widths) { @mixin make-row() {
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-row($gutters: $grid-gutter-widths) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: ($grid-gutter-width / -2);
@each $breakpoint in map-keys($gutters) { margin-left: ($grid-gutter-width / -2);
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
} }
@mixin make-col-ready($gutters: $grid-gutter-widths) { @mixin make-col-ready() {
position: relative; position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by // Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values // always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width. // later on to override this initial width.
width: 100%; width: 100%;
min-height: 1px; // Prevent collapsing min-height: 1px; // Prevent collapsing
padding-right: ($grid-gutter-width / 2);
@each $breakpoint in map-keys($gutters) { padding-left: ($grid-gutter-width / 2);
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
} }
@mixin make-col($size, $columns: $grid-columns) { @mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns); flex: 0 0 percentage($size / $columns);
// width: percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out // Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this. // do not appear to require this.
max-width: percentage($size / $columns); max-width: percentage($size / $columns);
} }
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-modifier($type, $size, $columns) {
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
@if $type == push {
@include make-col-push($size, $columns);
} @else if $type == pull {
@include make-col-pull($size, $columns);
} @else if $type == offset {
@include make-col-offset($size, $columns);
}
}

12
src/sass/bootstrap4/mixins/_hover.scss
View File

@ -8,16 +8,18 @@
// } // }
// } // }
// @else { // @else {
// scss-lint:disable Indentation
&:hover { @content } &:hover { @content }
// scss-lint:enable Indentation
// } // }
} }
@mixin hover-focus { @mixin hover-focus {
@if $enable-hover-media-query { @if $enable-hover-media-query {
&:focus { @content } &:focus { @content }
@include hover { @content } @include hover { @content }
} } @else {
@else {
&:focus, &:focus,
&:hover { &:hover {
@content @content
@ -32,8 +34,7 @@
@content @content
} }
@include hover { @content } @include hover { @content }
} } @else {
@else {
&, &,
&:focus, &:focus,
&:hover { &:hover {
@ -49,8 +50,7 @@
@content @content
} }
@include hover { @content } @include hover { @content }
} } @else {
@else {
&:focus, &:focus,
&:active, &:active,
&:hover { &:hover {

6
src/sass/bootstrap4/mixins/_list-group.scss
View File

@ -6,14 +6,11 @@
background-color: $background; background-color: $background;
} }
//scss-lint:disable QualifyingElement
a.list-group-item-#{$state}, a.list-group-item-#{$state},
button.list-group-item-#{$state} { button.list-group-item-#{$state} {
color: $color; color: $color;
.list-group-item-heading {
color: inherit;
}
@include hover-focus { @include hover-focus {
color: $color; color: $color;
background-color: darken($background, 5%); background-color: darken($background, 5%);
@ -25,4 +22,5 @@
border-color: $color; border-color: $color;
} }
} }
// scss-lint:enable QualifyingElement
} }

6
src/sass/bootstrap4/mixins/_nav-divider.scss
View File

@ -3,8 +3,8 @@
// Dividers (basically an hr) within dropdowns and nav lists // Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) { @mixin nav-divider($color: #e5e5e5) {
height: 1px; height: 0;
margin: ($spacer-y / 2) 0; margin: ($spacer / 2) 0;
overflow: hidden; overflow: hidden;
background-color: $color; border-top: 1px solid $color;
} }

1
src/sass/bootstrap4/mixins/_pagination.scss
View File

@ -4,6 +4,7 @@
.page-link { .page-link {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; font-size: $font-size;
line-height: $line-height;
} }
.page-item { .page-item {

7
src/sass/bootstrap4/mixins/_reset-text.scss
View File

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

2
src/sass/bootstrap4/mixins/_resize.scss
View File

@ -1,6 +1,6 @@
// Resize anything // Resize anything
@mixin resizable($direction) { @mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
resize: $direction; // Options: horizontal, vertical, both
} }

7
src/sass/bootstrap4/mixins/_screen-reader.scss
View File

@ -1,15 +1,17 @@
// Only display content to screen readers // Only display content to screen readers
// //
// See: http://a11yproject.com/posts/how-to-hide-content // See: http://a11yproject.com/posts/how-to-hide-content
// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only { @mixin sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0,0,0,0); clip: rect(0,0,0,0);
white-space: nowrap;
clip-path: inset(50%);
border: 0; border: 0;
} }
@ -25,8 +27,9 @@
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
margin: 0;
overflow: visible; overflow: visible;
clip: auto; clip: auto;
white-space: normal;
clip-path: none;
} }
} }

2
src/sass/bootstrap4/mixins/_text-truncate.scss
View File

@ -5,4 +5,4 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }

14
src/sass/bootstrap4/mixins/_transforms.scss
View File

@ -1,14 +0,0 @@
// Applies the given styles only when the browser support CSS3 3D transforms.
@mixin if-supports-3d-transforms() {
@media (-webkit-transform-3d) {
// Old Safari, Old Android
// http://caniuse.com/#feat=css-featurequeries
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
@content;
}
@supports (transform: translate3d(0,0,0)) {
// The Proper Way: Using a CSS feature query
@content;
}
}

9
src/sass/bootstrap4/mixins/_transition.scss Normal file
View File

@ -0,0 +1,9 @@
@mixin transition($transition...) {
@if $enable-transitions {
@if length($transition) == 0 {
transition: $transition-base;
} @else {
transition: $transition;
}
}
}

4
src/sass/bootstrap4/mixins/_visibility.scss
View File

@ -1,5 +1,5 @@
// Visibility // Visibility
@mixin invisible { @mixin invisible($visibility) {
visibility: hidden !important; visibility: $visibility !important;
} }

21
src/sass/bootstrap4/utilities/_background.scss
View File

@ -1,19 +1,6 @@
// @each $color, $value in $theme-colors {
// Contextual backgrounds @include bg-variant('.bg-#{$color}', $value);
//
.bg-faded {
background-color: darken($body-bg, 3%);
} }
@include bg-variant('.bg-primary', $brand-primary); .bg-white { background-color: $white !important; }
.bg-transparent { background-color: transparent !important; }
@include bg-variant('.bg-success', $brand-success);
@include bg-variant('.bg-info', $brand-info);
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);
@include bg-variant('.bg-inverse', $brand-inverse);

25
src/sass/bootstrap4/utilities/_borders.scss
View File

@ -2,30 +2,45 @@
// Border // Border
// //
.border { border: $border-width solid $border-color !important; }
.border-0 { border: 0 !important; } .border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; } .border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; } .border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
@each $color, $value in $theme-colors {
.border-#{$color} {
border-color: $value !important;
}
}
.border-white {
border-color: $white !important;
}
// //
// Border-radius // Border-radius
// //
.rounded { .rounded {
@include border-radius($border-radius); border-radius: $border-radius !important;
} }
.rounded-top { .rounded-top {
@include border-top-radius($border-radius); border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important;
} }
.rounded-right { .rounded-right {
@include border-right-radius($border-radius); border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important;
} }
.rounded-bottom { .rounded-bottom {
@include border-bottom-radius($border-radius); border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
} }
.rounded-left { .rounded-left {
@include border-left-radius($border-radius); border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
} }
.rounded-circle { .rounded-circle {

37
src/sass/bootstrap4/utilities/_display.scss
View File

@ -1,5 +1,5 @@
// //
// Display utilities // Utilities for common `display` values
// //
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@ -16,3 +16,38 @@
.d#{$infix}-inline-flex { display: inline-flex !important; } .d#{$infix}-inline-flex { display: inline-flex !important; }
} }
} }
//
// Utilities for toggling `display` in print
//
.d-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.d-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.d-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.d-print-none {
@media print {
display: none !important;
}
}

0
src/sass/bootstrap4/_responsive-embed.scss → src/sass/bootstrap4/utilities/_embed.scss
View File

4
src/sass/bootstrap4/utilities/_flex.scss
View File

@ -6,10 +6,6 @@
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.flex#{$infix}-first { order: -1; }
.flex#{$infix}-last { order: 1; }
.flex#{$infix}-unordered { order: 0; }
.flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-row { flex-direction: row !important; }
.flex#{$infix}-column { flex-direction: column !important; } .flex#{$infix}-column { flex-direction: column !important; }
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }

19
src/sass/bootstrap4/utilities/_position.scss
View File

@ -1,4 +1,13 @@
// Positioning // Common values
// Sass list not in variables since it's not intended for customization.
$positions: static, relative, absolute, fixed, sticky;
@each $position in $positions {
.position-#{$position} { position: $position !important; }
}
// Shorthand
.fixed-top { .fixed-top {
position: fixed; position: fixed;
@ -17,7 +26,9 @@
} }
.sticky-top { .sticky-top {
position: sticky; @supports (position: sticky) {
top: 0; position: sticky;
z-index: $zindex-sticky; top: 0;
z-index: $zindex-sticky;
}
} }

Some files were not shown because too many files have changed in this diff Show More