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

Merge pull request #1 from holger1411/master 

Bringing fork up to date
This commit is contained in:
Jason King 2017-04-14 15:55:09 +09:30 committed by GitHub
parent a3b02f6743 20d9e1aa89
commit d0175f7b86
215 changed files with 35308 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -4,11 +4,10 @@ bower_components
node_modules
src
understrap.zip
dist
dist-product
npm-debug.log

3
.travis.yml
View File

@ -27,6 +27,7 @@ matrix:
env: SNIFF=1
# aliased to a recent 7.0.x version
- php: '7.0'
env: SNIFF=1
# aliased to a recent 7.1.x version
- php: '7.1'
# aliased to a recent hhvm version
@ -65,4 +66,4 @@ script:
# Search for PHP syntax errors.
- find -L . -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l
# Run WordPress Coding Standards checking
- if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/scripts/phpcs -p -s -v -n . --standard=./codesniffer.ruleset.xml --extensions=php; fi
- if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/scripts/phpcs -p -s -v -n . --standard=./codesniffer.ruleset.xml --extensions=php --ignore=*/woocommerce/*,*/inc/*; fi

24
CHANGELOG.md
View File

@ -1,4 +1,28 @@
- ** Release 0.5.7 Feb. 13th 2017 **
- Fixing WooCommerce base layout by reverting custom woocommerce integration and switch back to default integration
- Adding /js/ folder to watcher task excluding theme.js and theme.min.js
- Removing duplicate DIV from "both-sidebars" page template - Thx @evandiamond
- Fixing sidebar check
- Remove customizer from theme.min.js
- ** Release 0.5.6 (skipping 0.5.5) Feb. 9th 2017 **
- Adding automated tests - thx @carl-alberto
- Remove custom Bootstrap gellery completely
- Fixing typos - thx to @catgofire
- Checking for WP coding standards
- Adding a "dist-product" gulp task
- Adding WooCommerce form-checkout.php - thx @stef-k
- Fixing bug #240 - thx @arpage
- Adding AJAX classes to add-to-cart buttons - thx @typeplus
- Updating Jetpack integration
- Fixing "missing" h1 on frontpage problem
- Updating inc/template-tags.php from _s
- Fixing W3C validator issues
- Removing cleancss gulp task from cssnano task sequence due to performance issues
- ** Release 0.5.4 Jan. 25th 2017 **
- Fixing problems with dynamic sidebars (footerfull and statichero) - Thx @NayeemNipun
- Removes Owl Carousel slider and replace it with the BS4 carousel

38
README.md
View File

@ -1,16 +1,6 @@
Travis build: [![Build Status](https://travis-ci.org/carl-alberto/understrap.svg?branch=master)](https://travis-ci.org/carl-alberto/understrap)
Travis build: [![Build Status](https://travis-ci.org/holger1411/understrap.svg?branch=master)](https://travis-ci.org/holger1411/understrap) | Start talking: [![Gitter](https://img.shields.io/gitter/room/holger1411/understrap.svg?maxAge=2592000?style=flat-square)](https://gitter.im/holger1411/understrap)
Start talking: [![Gitter](https://img.shields.io/gitter/room/holger1411/understrap.svg?maxAge=2592000?style=flat-square)](https://gitter.im/holger1411/understrap)
## Official Docs Page: [Open Docs](https://understrap.github.io/)
## About
I’m a huge fan of Underscores, Bootstrap, and Sass. Why not combine these into a solid WordPress Theme Framework?
That’s what UnderStrap is.
You can use it as starter theme and build your own theme on top of it. Or you use it as parent theme and create your own child theme for UnderStrap.
At the moment, UnderStrap is in a very early stage. But if you want, feel free to use it for your own WordPress theme!
#### See: [Official Demo](https://understrap.com/understrap) | Read: [Official Docs Page](https://understrap.github.io/)
# UnderStrap WordPress Theme Framework
@ -18,6 +8,12 @@ Website: [https://understrap.com](https://understrap.com)
Child Theme Project: [https://github.com/holger1411/understrap-child](https://github.com/holger1411/understrap-child)
## About
I’m a huge fan of Underscores, Bootstrap, and Sass. Why not combine these into a solid WordPress Theme Framework?
That’s what UnderStrap is.
You can use it as starter theme and build your own theme on top of it. Or you use it as parent theme and create your own child theme for UnderStrap.
## License
UnderStrap is released under the terms of the GPL version 2 or (at your option) any later version.
@ -33,13 +29,11 @@ See [changelog](CHANGELOG.md)
- Comes with Bootstrap (v4) Sass source files and additional .scss files. Nicely sorted and ready to add your own variables and customize the Bootstrap variables.
- Uses a single and minified CSS file for all the basic stuff.
- [Font Awesome](http://fortawesome.github.io/Font-Awesome/) integration (v4.7.0)
- Comes with extra slider script by [Owl Carousel](http://www.owlcarousel.owlgraphic.com/) (v2.1.4)
- Jetpack ready.
- WooCommerce support.
- Contact Form 7 support.
- [Child Theme](https://github.com/holger1411/understrap-child) ready.
- Translation ready.
- Multiple Page Templates
## Starter Theme + HTML Framework = WordPress Theme Framework
@ -134,32 +128,16 @@ The `empty.php` template displays a header and a footer only. A good starting po
The `fullwidthpage.php` template has full width layout without a sidebar.
### Vertical One Page Template
The `vertical-one-page.php` template displays all pages (except the one showing the posts) in a single vertical layout with a sliding navigation.
Additionally enables the user to control the order of each page by using the order page attribute field.
#### One Page Template How to
1. Assuming that you have the following pages: Home, About and Contact
2. Go to Appearance → Menus and add one **custom link** for each page
3. On the URL field type a hash `#` and the name of the page in **lower case** so for example the link for Home becomes `#home`
4. Edit the Home page and set as template the **Vertical One Page** (you only need to do this for the first page)
5. Set the order of each page using the **Order** field from **Page Attributes** so for example if you want to display Home,
Contact, About set the Home page to 1, the Contact to 2 and About to 3
[1] Visit [http://browsersync.io](http://browsersync.io) for more information on Browser Sync
Licenses & Credits
=
- Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT documentation under CC BY 3.0.)
- Owl Carousel 2: http://www.owlcarousel.owlgraphic.com/ | https://github.com/smashingboxes/OwlCarousel2/blob/develop/LICENSE (Code licensed under MIT)
and of course
- jQuery: https://jquery.org | (Code licensed under MIT)
- WP Bootstrap Navwalker by Edward McIntyre: https://github.com/twittem/wp-bootstrap-navwalker | GNU GPL
- Bootstrap Gallery Script based on Roots Sage Gallery: https://github.com/roots/sage/blob/5b9786b8ceecfe717db55666efe5bcf0c9e1801c/lib/gallery.php
[![Analytics](https://ga-beacon.appspot.com/UA-139292-31/chromeskel_a/readme)](https://github.com/igrigorik/ga-beacon)

4
bower.json
View File

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

22
comments.php
View File

@ -25,11 +25,27 @@ if ( post_password_required() ) {
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( // WPCS: XSS OK.
esc_html( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', '_s' ) ),
number_format_i18n( get_comments_number() ),
$comments_number = get_comments_number();
if ( 1 === $comments_number ) {
printf(
/* translators: %s: post title */
esc_html_x( 'One thought on &ldquo;%s&rdquo;', 'comments title', 'understrap' ),
'<span>' . get_the_title() . '</span>'
);
} else {
printf( // WPCS: XSS OK.
/* translators: 1: number of comments, 2: post title */
esc_html( _nx(
'%1$s thought on &ldquo;%2$s&rdquo;',
'%1$s thoughts on &ldquo;%2$s&rdquo;',
$comments_number,
'comments title',
'understrap'
) ),
number_format_i18n( $comments_number ),
'<span>' . get_the_title() . '</span>'
);
}
?>
</h2><!-- .comments-title -->

6
css/custom-editor-style.css
View File

@ -6863,6 +6863,12 @@ aside.widget {
#wrapper-hero .carousel-inner .textwidget {
width: 100%; }
h1.navbar-brand a {
color: inherit; }
h1.navbar-brand a:hover {
text-decoration: none; }
/*!
* Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

6
css/theme.css
View File

@ -6863,6 +6863,12 @@ aside.widget {
#wrapper-hero .carousel-inner .textwidget {
width: 100%; }
h1.navbar-brand a {
color: inherit; }
h1.navbar-brand a:hover {
text-decoration: none; }
/*!
* Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

2
css/theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/theme.min.css.map
View File

File diff suppressed because one or more lines are too long

8
footer.php
View File

@ -24,11 +24,13 @@ $container = get_theme_mod( 'understrap_container_type' );
<footer class="site-footer" id="colophon">
<div class="site-info">
<a href="<?php echo esc_url( __( 'http://wordpress.org/','understrap' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'understrap' ),'WordPress' ); ?></a>
<a href="<?php echo esc_url( __( 'http://wordpress.org/','understrap' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'understrap' ),'WordPress' ); ?></a>
<span class="sep"> | </span>
<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'understrap' ), $the_theme->get( 'Name' ),
<?php printf( // WPCS: XSS ok.
esc_html__( 'Theme: %1$s by %2$s.', 'understrap' ), $the_theme->get( 'Name' ),
'<a href="http://understrap.com/">understrap.com</a>' ); ?>
(<?php printf( esc_html__( 'Version: %1$s', 'understrap' ), $the_theme->get( 'Version' ) ); ?>)
(<?php printf( // WPCS: XSS ok.
esc_html__( 'Version: %1$s', 'understrap' ), $the_theme->get( 'Version' ) ); ?>)
</div><!-- .site-info -->
</footer><!-- #colophon -->

2
global-templates/hero.php
View File

@ -7,7 +7,7 @@
?>
<?php if ( is_active_sidebar( 'hero' ) or is_active_sidebar( 'statichero' ) ) : ?>
<?php if ( is_active_sidebar( 'hero' ) || is_active_sidebar( 'statichero' ) ) : ?>
<div class="wrapper" id="wrapper-hero">

31
global-templates/left-sidebar-check.php
View File

@ -9,34 +9,13 @@
<?php
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
// On WooCommerce pages there is no need for sidebars as they leave
// too little space for WooCommerce itself. We check if WooCommerce
// is active and the current page is a WooCommerce page and we do
// not render sidebars.
$is_woocommerce = false;
$this_page_id = get_queried_object_id();
if ( class_exists( 'WooCommerce' ) ) {
if ( is_woocommerce() || is_shop() || get_option( 'woocommerce_shop_page_id' ) === $this_page_id ||
get_option( 'woocommerce_cart_page_id' ) == $this_page_id || get_option( 'woocommerce_checkout_page_id' ) == $this_page_id ||
get_option( 'woocommerce_pay_page_id' ) == $this_page_id || get_option( 'woocommerce_thanks_page_id' ) === $this_page_id ||
get_option( 'woocommerce_myaccount_page_id' ) == $this_page_id || get_option( 'woocommerce_edit_address_page_id' ) == $this_page_id ||
get_option( 'woocommerce_view_order_page_id' ) == $this_page_id || get_option( 'woocommerce_terms_page_id' ) == $this_page_id
) {
$is_woocommerce = true;
}
}
?>
<?php if ( 'left' === $sidebar_pos || 'both' === $sidebar_pos && ! $is_woocommerce ) : ?>
<?php if ( 'left' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php get_sidebar( 'left' ); ?>
<?php endif; ?>
<?php
if ( $is_woocommerce ) {
echo '<div class="col-md-12 content-area" id="primary">';
} else {
<?php {
$html = '';
if ( 'right' === $sidebar_pos || 'left' === $sidebar_pos ) {
$html = '<div class="';
@ -45,7 +24,7 @@ if ( $is_woocommerce ) {
} else {
$html .= 'col-md-12 content-area" id="primary">';
}
echo $html;
echo $html; // WPCS: XSS OK.
} elseif ( is_active_sidebar( 'right-sidebar' ) && is_active_sidebar( 'left-sidebar' ) ) {
$html = '<div class="';
if ( 'both' === $sidebar_pos ) {
@ -53,7 +32,7 @@ if ( $is_woocommerce ) {
} else {
$html .= 'col-md-12 content-area" id="primary">';
}
echo $html;
echo $html; // WPCS: XSS OK.
} else {
echo '<div class="col-md-12 content-area" id="primary">';
}

22
global-templates/pagination.php
View File

@ -46,13 +46,17 @@ function understrap_pagination() {
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active page-item"' : ' class="page-item"';
printf( '<li %s><a class="page-link" href="%s"><i class="fa fa-step-backward" aria-hidden="true"></i></a></li>' . "\n",
$class, esc_url( get_pagenum_link( 1 ) ), '1' );
printf( // WPCS: XSS OK.
'<li %s><a class="page-link" href="%s"><i class="fa fa-step-backward" aria-hidden="true"></i></a></li>' . "\n",
$class,
esc_url( get_pagenum_link( 1 ) ), '1' );
/** Previous Post Link */
if ( get_previous_posts_link() ) {
printf( '<li class="page-item"><span class="page-link">%1$s</span></li> ' . "\n",
get_previous_posts_link( '<span aria-hidden="true">&laquo;</span><span class="sr-only">Previous page</span>' ) );
printf( // WPCS: XSS OK.
'<li class="page-item"><span class="page-link">%1$s</span></li> ' . "\n",
get_previous_posts_link( // WPCS: XSS OK.
'<span aria-hidden="true">&laquo;</span><span class="sr-only">Previous page</span>' ) );
}
if ( ! in_array( 2, $links ) ) {
@ -64,13 +68,16 @@ function understrap_pagination() {
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active page-item"' : ' class="page-item"';
printf( '<li %s><a href="%s" class="page-link">%s</a></li>' . "\n", $class,
printf( // WPCS: XSS OK.
'<li %s><a href="%s" class="page-link">%s</a></li>' . "\n",
$class,
esc_url( get_pagenum_link( $link ) ), $link );
}
// Next Post Link.
if ( get_next_posts_link() ) {
printf( '<li class="page-item"><span class="page-link">%s</span></li>' . "\n",
printf( // WPCS: XSS OK.
'<li class="page-item"><span class="page-link">%s</span></li>' . "\n",
get_next_posts_link( '<span aria-hidden="true">&raquo;</span><span class="sr-only">Next page</span>' ) );
}
@ -81,7 +88,8 @@ function understrap_pagination() {
}
$class = $paged == $max ? ' class="active "' : ' class="page-item"';
printf( '<li %s><a class="page-link" href="%s" aria-label="Next"><span aria-hidden="true"><i class="fa fa-step-forward" aria-hidden="true"></i></span><span class="sr-only">%s</span></a></li>' . "\n",
printf( // WPCS: XSS OK.
'<li %s><a class="page-link" href="%s" aria-label="Next"><span aria-hidden="true"><i class="fa fa-step-forward" aria-hidden="true"></i></span><span class="sr-only">%s</span></a></li>' . "\n",
$class . ' page-item 9', esc_url( get_pagenum_link( esc_html( $max ) ) ), esc_html( $max ) );
}

26
gulpfile.js
View File

@ -33,6 +33,7 @@ var rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var imagemin = require('gulp-imagemin');
var ignore = require('gulp-ignore');
var rimraf = require('gulp-rimraf');
var clone = require('gulp-clone');
@ -44,7 +45,7 @@ var del = require('del');
// Run:
// gulp sass + cssnano + rename
// Prepare the min.css for production (with 2 pipes to be sure that "child-theme.css" == "child-theme.min.css")
// Prepare the min.css for production (with 2 pipes to be sure that "theme.css" == "theme.min.css")
gulp.task('scss-for-prod', function() {
var source = gulp.src('./sass/*.scss')
.pipe(plumber())
@ -55,7 +56,7 @@ gulp.task('scss-for-prod', function() {
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
.pipe(gulp.dest('./css'))
.pipe(rename('custom-editor-style.css'))
.pipe(gulp.dest('./css'));
var pipe2 = source.pipe(clone())
.pipe(cssnano())
@ -92,7 +93,6 @@ gulp.task('sass', function () {
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(rename('custom-editor-style.css'))
.pipe(gulp.dest('./css'));
return stream;
});
@ -103,14 +103,26 @@ gulp.task('sass', function () {
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('./css/theme.css', ['cssnano']);
gulp.watch([basePaths.dev + 'js/**/*.js'], ['scripts'])
gulp.watch([basePaths.dev + 'js/**/*.js','js/**/*.js','!js/theme.js','!js/theme.min.js'], ['scripts']);
//Inside the watch task.
gulp.watch('./img/**', ['imagemin'])
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function(){
gulp.src('img/**')
.pipe(imagemin())
.pipe(gulp.dest('img'))
});
// Run:
// gulp cssnano
// Minifies CSS files
gulp.task('cssnano', ['cleancss'], function(){
gulp.task('cssnano', function(){
return gulp.src('./css/theme.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(plumber())
@ -224,7 +236,7 @@ gulp.task('copy-assets', ['clean-source'], function() {
// gulp dist
// Copies the files to the /dist folder for distributon
gulp.task('dist', ['clean-dist'], function() {
gulp.src(['**/*','!bower_components','!bower_components/**','!node_modules','!node_modules/**','!src','!src/**','!dist','!dist/**','!sass','!sass/**','!readme.txt','!readme.md','!package.json','!gulpfile.js','!CHANGELOG.md','!.travis.yml','!jshintignore', '!codesniffer.ruleset.xml', '*'])
gulp.src(['**/*','!bower_components','!bower_components/**','!node_modules','!node_modules/**','!src','!src/**','!dist','!dist/**','!dist-product','!dist-product/**','!sass','!sass/**','!readme.txt','!readme.md','!package.json','!gulpfile.js','!CHANGELOG.md','!.travis.yml','!jshintignore', '!codesniffer.ruleset.xml', '*'])
.pipe(gulp.dest('dist/'))
});
@ -237,7 +249,7 @@ gulp.task('clean-dist', function () {
// gulp dist-product
// Copies the files to the /dist folder for distributon
gulp.task('dist-product', ['clean-dist-product'], function() {
gulp.src(['**/*','!bower_components','!bower_components/**','!node_modules','!node_modules/**','!src','!src/**','!dist','!dist/**', '*'])
gulp.src(['**/*','!bower_components','!bower_components/**','!node_modules','!node_modules/**','!src','!src/**','!dist','!dist/**','!dist-product','!dist-product/**', '*'])
.pipe(gulp.dest('dist-product/'))
});

3
header.php
View File

@ -48,7 +48,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><?php bloginfo( 'name' ); ?></h1>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
@ -80,4 +80,3 @@ $container = get_theme_mod( 'understrap_container_type' );
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->

6
inc/editor.php
View File

@ -54,6 +54,12 @@ function understrap_tiny_mce_before_init( $settings ) {
'inline' => 'cite'
)
);
if ( isset( $settings['style_formats'] ) ) {
$orig_style_formats = json_decode($settings['style_formats'],true);
$style_formats = array_merge($orig_style_formats,$style_formats);
}
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}

37
inc/extras.php
View File

@ -74,3 +74,40 @@ if ( ! function_exists( 'change_logo_class' ) ) {
return $html;
}
}
/**
* Display navigation to next/previous post when applicable.
*/
if ( ! function_exists( 'understrap_post_nav' ) ) :
function understrap_post_nav() {
// Don't print empty markup if there's nowhere to navigate.
$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous ) {
return;
}
?>
<div class="row">
<div class="col-md-12">
<nav class="navigation post-navigation">
<h2 class="sr-only"><?php _e( 'Post navigation', 'understrap' ); ?></h2>
<div class="nav-links">
<?php
if ( get_previous_post_link() ) {
previous_post_link( '<span class="nav-previous float-xs-left">%link</span>', _x( '<i class="fa fa-angle-left"></i>&nbsp;%title', 'Previous post link', 'understrap' ) );
}
if ( get_next_post_link() ) {
next_post_link( '<span class="nav-next float-xs-right">%link</span>', _x( '%title&nbsp;<i class="fa fa-angle-right"></i>', 'Next post link', 'understrap' ) );
}
?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
</div>
</div>
<?php
}
endif;

41
inc/jetpack.php
View File

@ -1,44 +1,53 @@
<?php
/**
* Jetpack Compatibility File.
* Jetpack Compatibility File
*
* @link https://jetpack.com/
* @link https://jetpack.me/
*
* @package understrap
* @package UnderStrap
*/
if ( ! function_exists( 'understrap_jetpack_setup' ) ) {
/**
* Jetpack setup function.
*
* See: https://jetpack.com/support/infinite-scroll/
* See: https://jetpack.com/support/responsive-videos/
* See: https://jetpack.me/support/infinite-scroll/
* See: https://jetpack.me/support/responsive-videos/
*/
function understrap_jetpack_setup() {
function components_jetpack_setup() {
// Add theme support for Infinite Scroll.
add_theme_support( 'infinite-scroll', array(
'container' => 'main',
'render' => 'understrap_infinite_scroll_render',
'footer' => 'wrapper-footer',
'render' => 'components_infinite_scroll_render',
'footer' => 'page',
) );
// Add theme support for Responsive Videos.
add_theme_support( 'jetpack-responsive-videos' );
// Add theme support for Social Menus
add_theme_support( 'jetpack-social-menu' );
}
}
add_action( 'after_setup_theme', 'understrap_jetpack_setup' );
if ( ! function_exists( 'understrap_infinite_scroll_render' ) ) {
add_action( 'after_setup_theme', 'components_jetpack_setup' );
/**
* Custom render function for Infinite Scroll.
*/
function understrap_infinite_scroll_render() {
function components_infinite_scroll_render() {
while ( have_posts() ) {
the_post();
if ( is_search() ) :
get_template_part( 'loop-templates/content', 'search' );
get_template_part( 'components/post/content', 'search' );
else :
get_template_part( 'loop-templates/content', get_post_format() );
get_template_part( 'components/post/content', get_post_format() );
endif;
}
}
}
function components_social_menu() {
if ( ! function_exists( 'jetpack_social_menu' ) ) {
return;
} else {
jetpack_social_menu();
}
}

7
inc/style-wpcom.css Normal file
View File

@ -0,0 +1,7 @@
/*
* Theme Name: Components
*
* Add any WordPress.com-specific CSS here
*
* This file is enqueued in /inc/wpcom.php
*/

68
inc/template-tags.php
View File

@ -14,28 +14,23 @@ if ( ! function_exists( 'understrap_posted_on' ) ) :
function understrap_posted_on() {
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time>, <time class="updated" datetime="%3$s">' . __( ' Edited %4$s', 'understrap' ) . '</time>';
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
$posted_on = sprintf(
esc_html_x( 'Posted on %s', 'post date', 'understrap' ),
'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
);
$byline = sprintf(
esc_html_x( 'by %s', 'post author', 'understrap' ),
'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
);
echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>';
echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
}
endif;
@ -45,26 +40,23 @@ if ( ! function_exists( 'understrap_entry_footer' ) ) :
*/
function understrap_entry_footer() {
// Hide category and tag text for pages.
if ( 'post' == get_post_type() ) {
if ( 'post' === get_post_type() ) {
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'understrap' ) );
$categories_list = get_the_category_list( esc_html__( ', ', 'understrap' ) );
if ( $categories_list && understrap_categorized_blog() ) {
printf( '<span class="cat-links">' . __( 'Posted in %1$s', 'understrap' ) . '</span>', $categories_list );
printf( '<span class="cat-links">' . esc_html__( 'Posted in %1$s', 'understrap' ) . '</span>', $categories_list ); // WPCS: XSS OK.
}
/* translators: used between list items, there is a space after the comma */
$tags_list = get_the_tag_list( '', __( ', ', 'understrap' ) );
$tags_list = get_the_tag_list( '', esc_html__( ', ', 'understrap' ) );
if ( $tags_list ) {
printf( '<span class="tags-links">' . __( 'Tagged %1$s', 'understrap' ) . '</span>', $tags_list );
printf( '<span class="tags-links">' . esc_html__( 'Tagged %1$s', 'understrap' ) . '</span>', $tags_list ); // WPCS: XSS OK.
}
}
if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
echo '<span class="comments-link">';
comments_popup_link( __( 'Leave a comment', 'understrap' ), __( '1 Comment', 'understrap' ), __( '% Comments', 'understrap' ) );
comments_popup_link( esc_html__( 'Leave a comment', 'understrap' ), esc_html__( '1 Comment', 'understrap' ), esc_html__( '% Comments', 'understrap' ) );
echo '</span>';
}
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
@ -88,22 +80,18 @@ function understrap_categorized_blog() {
$all_the_cool_cats = get_categories( array(
'fields' => 'ids',
'hide_empty' => 1,
// We only need to know if there is more than one category.
'number' => 2,
) );
// Count the number of categories that are attached to the posts.
$all_the_cool_cats = count( $all_the_cool_cats );
set_transient( 'understrap_categories', $all_the_cool_cats );
}
if ( $all_the_cool_cats > 1 ) {
// This blog has more than 1 category so understrap_categorized_blog should return true.
// This blog has more than 1 category so components_categorized_blog should return true.
return true;
} else {
// This blog has only 1 category so understrap_categorized_blog should return false.
// This blog has only 1 category so components_categorized_blog should return false.
return false;
}
}
@ -121,39 +109,3 @@ function understrap_category_transient_flusher() {
add_action( 'edit_category', 'understrap_category_transient_flusher' );
add_action( 'save_post', 'understrap_category_transient_flusher' );
/**
* Display navigation to next/previous post when applicable.
*/
if ( ! function_exists( 'understrap_post_nav' ) ) :
function understrap_post_nav() {
// Don't print empty markup if there's nowhere to navigate.
$previous = ( is_attachment() ) ? get_post( get_post()->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous ) {
return;
}
?>
<div class="row">
<div class="col-md-12">
<nav class="navigation post-navigation">
<h2 class="sr-only"><?php _e( 'Post navigation', 'understrap' ); ?></h2>
<div class="nav-links">
<?php
if ( get_previous_post_link() ) {
previous_post_link( '<span class="nav-previous float-xs-left">%link</span>', _x( '<i class="fa fa-angle-left"></i>&nbsp;%title', 'Previous post link', 'understrap' ) );
}
if ( get_next_post_link() ) {
next_post_link( '<span class="nav-next float-xs-right">%link</span>', _x( '%title&nbsp;<i class="fa fa-angle-right"></i>', 'Next post link', 'understrap' ) );
}
?>
</div><!-- .nav-links -->
</nav><!-- .navigation -->
</div>
</div>
<?php
}
endif;

1
inc/theme-settings.php
View File

@ -3,6 +3,7 @@
* Check and setup theme's default settings
*
* @package understrap
*
*/
function setup_theme_default_settings() {

1
inc/widgets.php
View File

@ -4,6 +4,7 @@
*
* @package understrap
*/
/**
* Count number of widgets in a sidebar
* Used to add classes to widget areas so widgets can be displayed one, two, three or four per row

12
inc/woocommerce.php
View File

@ -4,7 +4,6 @@
*
* @package understrap
*/
add_action( 'after_setup_theme', 'woocommerce_support' );
if ( ! function_exists( 'woocommerce_support' ) ) {
/**
@ -16,7 +15,6 @@ if ( ! function_exists( 'woocommerce_support' ) ) {
add_filter( 'woocommerce_form_field_args', 'wc_form_field_args', 10, 3 );
}
}
/**
* Filter hook function monkey patching form classes
* Author: Adriano Monecchi http://stackoverflow.com/a/36724593/307826
@ -28,10 +26,8 @@ if ( ! function_exists( 'woocommerce_support' ) ) {
* @return mixed
*/
function wc_form_field_args( $args, $key, $value = null ) {
// Start field type switch case.
switch ( $args['type'] ) {
/* Targets all select input type elements, except the country and state select input types */
case 'select' :
// Add a class to the field's html element wrapper - woocommerce
@ -47,14 +43,12 @@ function wc_form_field_args( $args, $key, $value = null ) {
// Add custom data attributes to the form input itself.
);
break;
// By default WooCommerce will populate a select with the country names - $args
// defined for this specific input type targets only the country select element.
case 'country' :
$args['class'][] = 'form-group single-country';
$args['label_class'] = array( 'control-label' );
break;
// By default WooCommerce will populate a select with state names - $args defined
// for this specific input type targets only the country select element.
case 'state' :
@ -69,7 +63,6 @@ function wc_form_field_args( $args, $key, $value = null ) {
'aria-hidden' => 'true',
);
break;
case 'password' :
case 'text' :
case 'email' :
@ -79,28 +72,23 @@ function wc_form_field_args( $args, $key, $value = null ) {
$args['input_class'] = array( 'form-control', 'input-lg' );
$args['label_class'] = array( 'control-label' );
break;
case 'textarea' :
$args['input_class'] = array( 'form-control', 'input-lg' );
$args['label_class'] = array( 'control-label' );
break;
case 'checkbox' :
$args['label_class'] = array( 'custom-control custom-checkbox' );
$args['input_class'] = array( 'custom-control-input', 'input-lg' );
break;
case 'radio' :
$args['label_class'] = array( 'custom-control custom-radio' );
$args['input_class'] = array( 'custom-control-input', 'input-lg' );
break;
default :
$args['class'][] = 'form-group';
$args['input_class'] = array( 'form-control', 'input-lg' );
$args['label_class'] = array( 'control-label' );
break;
} // end switch ($args).
return $args;
}

17
inc/wpcom.php
View File

@ -1,17 +1,16 @@
<?php
/**
* WordPress.com-specific functions and definitions.
* WordPress.com-specific functions and definitions
*
* This file is centrally included from `wp-content/mu-plugins/wpcom-theme-compat.php`.
*
* @package understrap
*/
if ( ! function_exists( 'understrap_wpcom_setup' ) ) {
/**
* Adds support for wp.com-specific theme functions.
*
* @global array $themecolors Array with theme's colors.
* @global array $themecolors
*/
function understrap_wpcom_setup() {
global $themecolors;
@ -26,6 +25,16 @@ if ( ! function_exists( 'understrap_wpcom_setup' ) ) {
'url' => '',
);
}
}
/* Add WP.com print styles */
add_theme_support( 'print-styles' );
}
add_action( 'after_setup_theme', 'understrap_wpcom_setup' );
/*
* WordPress.com-specific styles
*/
function understrap_wpcom_styles() {
wp_enqueue_style( 'understrap-wpcom', get_template_directory_uri() . '/inc/style-wpcom.css', '20160411' );
}
add_action( 'wp_enqueue_scripts', 'understrap_wpcom_styles' );

6
js/theme.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
languages/sv_SE.mo Normal file
View File

Binary file not shown.

397
languages/sv_SE.po Normal file
View File

@ -0,0 +1,397 @@
msgid ""
msgstr ""
"Project-Id-Version: understrap\n"
"Report-Msgid-Bugs-To: http://wordpress.org/support/theme/_s\n"
"POT-Creation-Date: 2016-11-23 20:21+0200\n"
"PO-Revision-Date: 2017-02-20 13:19+0000\n"
"Last-Translator: Filip Wessman <filip@effektid.com>\n"
"Language-Team: Swedish (Swedish)\n"
"Language: sv-SE\n"
"Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && "
"n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Loco-Source-Locale: sv_SE\n"
"POT-Revision-Date: Mon Jul 04 2016 09:13:18 GMT+0200 (CEST)\n"
"X-Poedit-SourceCharset: UTF-8\n"
"X-Generator: Loco - https://localise.biz/\n"
"X-Poedit-KeywordsList: _:1;gettext:1;dgettext:2;ngettext:1,2;dngettext:2,3;"
"__:1;_e:1;_c:1;_n:1,2;_n_noop:1,2;_nc:1,2;__ngettext:1,2;__ngettext_noop:1,2;"
"_x:1,2c;_ex:1,2c;_nx:1,2,4c;_nx_noop:1,2,3c;_n_js:1,2;_nx_js:1,2,3c;"
"esc_attr__:1;esc_html__:1;esc_attr_e:1;esc_html_e:1;esc_attr_x:1,2c;"
"esc_html_x:1,2c;comments_number_link:2,3;t:1;st:1;trans:1;transChoice:1,2\n"
"X-Poedit-Basepath: ..\n"
"X-Poedit-SearchPath-0: footer.php\n"
"X-Poedit-SearchPath-1: header.php\n"
"X-Poedit-SearchPath-2: index.php\n"
"X-Poedit-SearchPath-3: statichero.php\n"
"X-Poedit-SearchPath-4: 404.php\n"
"X-Poedit-SearchPath-5: archive.php\n"
"X-Poedit-SearchPath-6: search.php\n"
"X-Poedit-SearchPath-7: sticky.php\n"
"X-Poedit-SearchPath-8: single.php\n"
"X-Poedit-SearchPath-9: sidebar.php\n"
"X-Poedit-SearchPath-10: comment-form.php\n"
"X-Poedit-SearchPath-11: comments.php\n"
"X-Poedit-SearchPath-12: content-none.php\n"
"X-Poedit-SearchPath-13: content-page.php\n"
"X-Poedit-SearchPath-14: content-search.php\n"
"X-Poedit-SearchPath-15: content-single.php\n"
"X-Poedit-SearchPath-16: content.php\n"
"X-Poedit-SearchPath-17: hero.php\n"
"X-Poedit-SearchPath-18: page.php\n"
"X-Poedit-SearchPath-19: functions.php\n"
"X-Poedit-SearchPath-20: page-templates\n"
"X-Poedit-SearchPath-21: inc\n"
"X-Loco-Parser: loco_parse_po"
#: ../comments.php:28
#, php-format
msgctxt "comments title"
msgid "One thought on &ldquo;%2$s&rdquo;"
msgid_plural "%1$s thoughts on &ldquo;%2$s&rdquo;"
msgstr[0] "En tanke kring &ldquo;%2$s&rdquo;"
msgstr[1] "%1$s tankar kring &ldquo;%2$s&rdquo;"
msgstr[2] "&ldquo;%2$s&rdquo;: %1$s комментариев"
#: ../comments.php:35 ../comments.php:56
msgid "Comment navigation"
msgstr "Kommentars navigering"
#: ../comments.php:37 ../comments.php:58
msgid "&larr; Older Comments"
msgstr "&larr; Äldre kommentarer"
#: ../comments.php:40 ../comments.php:61
msgid "Newer Comments &rarr;"
msgstr "Nyare kommentarer &rarr;"
#: ../comments.php:72
msgid "Comments are closed."
msgstr "Kommentarsfältet är avstängt."
#: ../author.php:27
msgid "About:"
msgstr "Om:"
#: ../author.php:32 ../inc/custom-comments.php:16
msgid "Website"
msgstr "Website"
#: ../author.php:34
msgid "Profile"
msgstr "Profil"
#: ../author.php:38
msgid "Posts by"
msgstr "Inlägg av "
#: ../footer.php:24
msgid "http://wordpress.org/"
msgstr "http://wordpress.org/"
#: ../footer.php:24
#, php-format
msgid "Proudly powered by %s"
msgstr "Drivs av %s"
#: ../footer.php:26
#, php-format
msgid "Theme: %1$s by %2$s."
msgstr "tema av: %1$s by %2$s."
#: ../header.php:30
msgid "Skip to content"
msgstr "Hoppa till innehållet"
#: ../search.php:23
#, php-format
msgid "Search Results for: %s"
msgstr "Sök resultat för: %s"
#: ../404.php:22
msgid "Oops! That page can&rsquo;t be found."
msgstr "Oops! Sidan verkar inte finnas."
#: ../404.php:27
msgid ""
"It looks like nothing was found at this location. Maybe try one of the links "
"below or a search?"
msgstr ""
"Här verkar det inte finnas något. Du kan prova någon an länkarna "
"nedan eller söka efter det?"
#: ../404.php:37
msgid "Most Used Categories"
msgstr "Most Used Categories"
#. translators: %1$s: smiley
#: ../404.php:57
#, php-format
msgid "Try looking in the monthly archives. %1$s"
msgstr "Try looking in the monthly archives. %1$s"
#: ../searchform.php:9 ../searchform.php:13
msgid "Search"
msgstr "Sök"
#: ../searchform.php:11
msgid "Search &hellip;"
msgstr "Sök &hellip;"
#. Name of the template
msgid "Full Width Page"
msgstr "Full Width Page"
#. Name of the template
msgid "Empty Page Template"
msgstr "Empty Page Template"
#: ../inc/widgets.php:10
msgid "Sidebar"
msgstr "Sidebar"
#: ../inc/widgets.php:20
msgid "Hero Slider"
msgstr "Hero Slider"
#: ../inc/widgets.php:30
msgid "Hero Static"
msgstr "Hero Static"
#: ../inc/widgets.php:40
msgid "Footer Full"
msgstr "Sidfot"
#: ../inc/customizer.php:24
msgid "Slider Settings"
msgstr "Slider Inställningar"
#: ../inc/customizer.php:33
msgid "Number of slides displaying at once"
msgstr "Antal slides som visas samtidigt"
#: ../inc/customizer.php:45
msgid "Slider Time (in ms)"
msgstr "Slider tid (i ms)"
#: ../inc/customizer.php:57
msgid "Loop Slider Content"
msgstr "Loop Slider Innehåll"
#: ../inc/template-tags.php:18
#, php-format
msgid " Edited %4$s"
msgstr " Redigerat %4$s"
#: ../inc/template-tags.php:29
#, php-format
msgctxt "post date"
msgid "Posted on %s"
msgstr "Publicerat den %s"
#: ../inc/template-tags.php:34
#, php-format
msgctxt "post author"
msgid "by %s"
msgstr "av %s"
#. translators: used between list items, there is a space after the comma
#: ../inc/template-tags.php:51 ../inc/template-tags.php:57
msgid ", "
msgstr ", "
#: ../inc/template-tags.php:53
#, php-format
msgid "Posted in %1$s"
msgstr "Publicerat i %1$s"
#: ../inc/template-tags.php:59
#, php-format
msgid "Tagged %1$s"
msgstr "Taggad %1$s"
#: ../inc/template-tags.php:65
msgid "Leave a comment"
msgstr "Kommentera"
#: ../inc/template-tags.php:65
msgid "1 Comment"
msgstr "1 Kommentar"
#: ../inc/template-tags.php:65
#, php-format
msgid "% Comments"
msgstr "% Kommentarer"
#. translators: %s: Name of current post
#: ../inc/template-tags.php:72
#, php-format
msgid "Edit %s"
msgstr "Ändra %s"
#: ../inc/setup.php:48
msgid "Primary Menu"
msgstr "Huvud meny"
#: ../inc/setup.php:98
msgid "Read More..."
msgstr "Läs mer"
#: ../inc/custom-comments.php:12
msgid "Name"
msgstr "Namn"
#: ../inc/custom-comments.php:14
msgid "Email"
msgstr "E-post"
#: ../inc/custom-comments.php:25
msgctxt "noun"
msgid "Comment"
msgstr "Kommentarer"
#: ../loop-templates/content-single.php:29 ../loop-templates/content.php:33 ..
#: loop-templates/content-page.php:25
msgid "Pages:"
msgstr "Sidor:"
#: ../loop-templates/content-none.php:16
msgid "Nothing Found"
msgstr "Inget hittades"
#: ../loop-templates/content-none.php:24
#, php-format
msgid ""
"Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
msgstr "Redo att skriv ditt första inlägg? <a href=\"%1$s\">Börja här</a>."
#: ../loop-templates/content-none.php:28
msgid ""
"Sorry, but nothing matched your search terms. Please try again with some "
"different keywords."
msgstr ""
"Tyvärr fick din sökning inga träffar. Du kan prova igen med nya nyckelord."
#: ../loop-templates/content-none.php:33
msgid ""
"It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps "
"searching can help."
msgstr "Vi verkar inte hitta det du söker, Det kanske hjälper att söka."
#: ../loop-templates/content-page.php:34
msgid "Edit"
msgstr "Ändra"
#: ../woocommerce/myaccount/form-edit-address.php
msgid "Save Address"
msgstr "Spara adress"
#: ../woocommerce/myaccount/my-orders.php
msgid "%s for %s item"
msgstr "%s för %s vara"
#: ../woocommerce/myaccount/my-orders.php
msgid "Pay"
msgstr "Betala"
#: ../woocommerce/myaccount/my-orders.php
msgid "View"
msgstr "Visa"
#: ../woocommerce/myaccount/my-orders.php
msgid "Cancel"
msgstr "Avbryt"
#: ../woocommerce/myaccount/form-login.php
msgid "Login"
msgstr "Login"
#: ../woocommerce/myaccount/form-login.php
msgid "Password"
msgstr "Lösenord"
#: ../woocommerce/myaccount/form-login.php
msgid "Username or email address"
msgstr "Användarnamn eller E-post adress"
#: ../woocommerce/myaccount/form-login.php
msgid "Lost your password?"
msgstr "Glömt ditt lösenord?"
#: ../woocommerce/myaccount/form-login.php
msgid "Username"
msgstr "Användarnamn"
#: ../woocommerce/myaccount/form-login.php
msgid "Email address"
msgstr "E-post adress"
#: ../woocommerce/myaccount/form-login.php
msgid "Register"
msgstr "Registrera"
#: ../woocommerce/myaccount/form-login.php
msgid "Remember me"
msgstr "Kom ihåg mig"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "First name"
msgstr "Förnamn"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Last name"
msgstr "Efternamn"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Email adress"
msgstr "E-post adress"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Current Password (leave blank to leave unchanged)"
msgstr "Nuvarande lösenord (lämna tomt för att inte ändra)"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "New Password (leave blank to leave unchanged)"
msgstr "Nytt lösenord (lämna tomt för att inte ändra)"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Confirm New Password"
msgstr "Bekräfta nytt lösenord"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Password Change"
msgstr "Byt lösenord"
#: ../woocommerce/myaccount/form-edit-account.php
msgid "Save changes"
msgstr "Spara ändringar"
#. Name of the theme
msgid "UnderStrap"
msgstr "UnderStrap"
#. Theme URI of the theme
msgid "http://understrap.com"
msgstr "http://understrap.com"
#. Description of the theme
msgid ""
"Combination of Automattic´s _s theme and Bootstrap 4. Made as a solid "
"starting point for your next theme project and WordPress website. Use it as "
"starter theme or as parent theme. It is up to you."
msgstr ""
"En kombination av Automattic´s _s tema och Bootstrap 4. Gjort som en bas för "
"ditt nästa tema eller Wordpress webbplats. Använd det som en grund eller som "
"ett förälder tema. Det är upp till dig."
#. Author of the theme
msgid "Holger Koenemann"
msgstr "Holger Koenemann"
#. Author URI of the theme
msgid "http://www.holgerkoenemann.de"
msgstr "http://www.holgerkoenemann.de"

33
loop-templates/content-none.php
View File

@ -8,36 +8,33 @@
*/
?>
<article class="post no-results not-found" id="post-0">
<section class="no-results not-found">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Nothing Found', 'understrap' ); ?></h1>
<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'understrap' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
<?php
if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
<p><?php printf( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.',
'understrap' ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
<p><?php printf( wp_kses( __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'understrap' ), array( 'a' => array( 'href' => array() ) ) ), esc_url( admin_url( 'post-new.php' ) ) ); ?></p>
<?php elseif ( is_search() ) : ?>
<p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.',
'understrap' ); ?></p>
<?php get_search_form(); ?>
<?php else : ?>
<p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.',
'understrap' ); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>
<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'understrap' ); ?></p>
<?php
get_search_form();
else : ?>
<p><?php esc_html_e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'understrap' ); ?></p>
<?php
get_search_form();
endif; ?>
</div><!-- .page-content -->
</article><!-- .no-results -->
</section><!-- .no-results -->

11
package.json
View File

@ -1,16 +1,14 @@
{
"name": "understrap",
"version": "0.5.4",
"version": "0.5.7",
"description": "Wordpress Theme framework",
"main": "index.js",
"scripts": {
"postinstall": "gulp copy-assets"
},
"engines": {
"npm": ">=2.1.8"
},
"repository": {
"type": "git",
"url": "https://github.com/holger1411/understrap.git"
@ -30,7 +28,7 @@
"homepage": "https://understrap.com",
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"browser-sync": "^2.18.6",
"browser-sync": "^2.18.7",
"del": "^2.2.2",
"font-awesome": "^4.7.0",
"gulp": "^3.9.1",
@ -38,13 +36,14 @@
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-ignore": "^2.0.2",
"gulp-imagemin": "^3.1.1",
"gulp-merge": "^0.1.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.0",
"gulp-sourcemaps": "^2.4.1",
"gulp-uglify": "^2.0.1",
"gulp-watch": "^4.3.11",
"merge2": "^1.0.3",
"run-sequence": "^1.2.2",

3
page-templates/both-sidebarspage.php
View File

@ -11,9 +11,6 @@ get_header();
$container = get_theme_mod( 'understrap_container_type' );
?>
<div class="wrapper" id="page-wrapper">
<div class="wrapper" id="page-wrapper">
<div class="<?php echo esc_html( $container ); ?>" id="content">

20
page.php
View File

@ -14,24 +14,7 @@ get_header();
$container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
// On WooCommerce pages there is no need for sidebars as they leave
// too little space for WooCommerce itself. We check if WooCommerce
// is active and the current page is a WooCommerce page and we do
// not render sidebars.
$is_woocommerce = false;
$this_page_id = get_queried_object_id();
if ( class_exists( 'WooCommerce' ) ) {
if ( is_woocommerce() || is_shop() || get_option( 'woocommerce_shop_page_id' ) === $this_page_id ||
get_option( 'woocommerce_cart_page_id' ) == $this_page_id || get_option( 'woocommerce_checkout_page_id' ) == $this_page_id ||
get_option( 'woocommerce_pay_page_id' ) == $this_page_id || get_option( 'woocommerce_thanks_page_id' ) === $this_page_id ||
get_option( 'woocommerce_myaccount_page_id' ) == $this_page_id || get_option( 'woocommerce_edit_address_page_id' ) == $this_page_id ||
get_option( 'woocommerce_view_order_page_id' ) == $this_page_id || get_option( 'woocommerce_terms_page_id' ) == $this_page_id
) {
$is_woocommerce = true;
}
}
?>
<div class="wrapper" id="page-wrapper">
@ -65,8 +48,7 @@ if ( class_exists( 'WooCommerce' ) ) {
<!-- Do the right sidebar check -->
<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ) : ?>
<?php if ( ! $is_woocommerce ) : get_sidebar( 'right' ); ?>
<?php endif; ?>
<?php get_sidebar( 'right' ); ?>
<?php endif; ?>

5
sass/theme/_theme_variables.scss
View File

@ -7,8 +7,3 @@
$font-family-sans-serif:Arial, sans-serif;
$brand-primary: #7852B2; //#ff6d5a
// Basics of a navbar
$navbar-height: 60px;
$navbar-margin-bottom: 0px;
$navbar-border-radius: 0px;

10
sass/understrap/understrap.scss
View File

@ -131,3 +131,13 @@ aside.widget{clear:both;}
#wrapper-hero .carousel-inner .textwidget {
width:100%;
}
// Adjusting brand link if h1 is used
h1.navbar-brand {
a {
color:inherit;
}
a:hover {
text-decoration:none;
}
}

2
search.php
View File

@ -11,7 +11,7 @@ $container = get_theme_mod( 'understrap_container_type' );
$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
?>
<div class="wrapper search-wrapper">
<div class="wrapper" id="search-wrapper">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">

3
sidebar-footerfull.php
View File

@ -4,6 +4,7 @@
*
* @package understrap
*/
$container = get_theme_mod( 'understrap_container_type' );
?>
@ -14,7 +15,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<div class="wrapper" id="wrapper-footer-full">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="<?php echo esc_html( $container ); ?>" id="footer-full-content" tabindex="-1">
<div class="row">

2
sidebar-hero.php
View File

@ -35,7 +35,7 @@
</a>
</div><!-- .owl-carousel -->
</div><!-- .carousel -->
<?php endif; ?>

3
sidebar-statichero.php
View File

@ -4,6 +4,7 @@
*
* @package understrap
*/
$container = get_theme_mod( 'understrap_container_type' );
?>
@ -14,7 +15,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<div class="wrapper" id="wrapper-static-hero">
<div class="<?php echo esc_html( $container ); ?>" id="content" tabindex="-1">
<div class="<?php echo esc_html( $container ); ?>" id="wrapper-static-content" tabindex="-1">
<div class="row">

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

@ -0,0 +1,150 @@
.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 Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,154 @@
.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 Normal file
View File

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,21 @@
.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 Normal file
View File

@ -0,0 +1 @@
.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 Normal file
View File

@ -0,0 +1,8 @@
.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 Normal file
View File

@ -0,0 +1 @@
.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}

3535
src/js/bootstrap4/bootstrap.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
src/js/bootstrap4/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

482
src/js/core.js Normal file
View File

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

42
src/js/customizer.js Normal file
View File

@ -0,0 +1,42 @@
/**
* File customizer.js.
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/
( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
} );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-title a, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-title a, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a, .site-description' ).css( {
'color': to
} );
}
} );
} );
} )( jQuery );

10220
src/js/jquery.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8107
src/js/jquery.slim.js Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/js/jquery.slim.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

112
src/js/navigation.js Normal file
View File

@ -0,0 +1,112 @@
/**
* File navigation.js.
*
* Handles toggling the navigation menu for small screens and enables TAB key
* navigation support for dropdown menus.
*/
( function() {
var container, button, menu, links, subMenus, i, len;
container = document.getElementById( 'site-navigation' );
if ( ! container ) {
return;
}
button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
return;
}
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' );
button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
/**
* Toggles `focus` class to allow submenu access on tablets.
*/
( function( container ) {
var touchStartFn, i,
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
if ( 'ontouchstart' in window ) {
touchStartFn = function( e ) {
var menuItem = this.parentNode, i;
if ( ! menuItem.classList.contains( 'focus' ) ) {
e.preventDefault();
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
if ( menuItem === menuItem.parentNode.children[i] ) {
continue;
}
menuItem.parentNode.children[i].classList.remove( 'focus' );
}
menuItem.classList.add( 'focus' );
} else {
menuItem.classList.remove( 'focus' );
}
};
for ( i = 0; i < parentLink.length; ++i ) {
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
}
}
}( container ) );
} )();

33
src/js/skip-link-focus-fix.js Normal file
View File

@ -0,0 +1,33 @@
/**
* File skip-link-focus-fix.js.
*
* Helps with accessibility for keyboard only users.
*
* Learn more: https://git.io/vWdr2
*/
( function() {
var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
isOpera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1,
isIe = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1;
if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) {
window.addEventListener( 'hashchange', function() {
var id = location.hash.substring( 1 ),
element;
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
return;
}
element = document.getElementById( id );
if ( element ) {
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
element.tabIndex = -1;
}
element.focus();
}
}, false );
}
})();

1811
src/js/tether.js Normal file
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

55
src/sass/bootstrap4/_alert.scss Normal file
View File

@ -0,0 +1,55 @@
//
// Base styles
//
.alert {
padding: $alert-padding-y $alert-padding-x;
margin-bottom: $alert-margin-bottom;
border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius);
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
// Adjust close link position
.close {
position: relative;
top: -$alert-padding-y;
right: -$alert-padding-x;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.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);
}

77
src/sass/bootstrap4/_badge.scss Normal file
View File

@ -0,0 +1,77 @@
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
font-size: $badge-font-size;
font-weight: $badge-font-weight;
line-height: 1;
color: $badge-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius();
// Empty badges collapse automatically
&:empty {
display: none;
}
}
// Quick fix for badges in buttons
.btn .badge {
position: relative;
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
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
@include border-radius($badge-pill-border-radius);
}
// Colors
//
// Contextual variations (linked badges get darker on :hover).
.badge-default {
@include badge-variant($badge-default-bg);
}
.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);
}

38
src/sass/bootstrap4/_breadcrumb.scss Normal file
View File

@ -0,0 +1,38 @@
.breadcrumb {
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $spacer-y;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius);
@include clearfix;
}
.breadcrumb-item {
float: left;
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: "#{$breadcrumb-divider}";
}
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
// without `<ul>`s. The `::before` pseudo-element generates an element
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
text-decoration: underline;
}
+ .breadcrumb-item:hover::before {
text-decoration: none;
}
&.active {
color: $breadcrumb-active-color;
}
}

202
src/sass/bootstrap4/_button-group.scss Normal file
View File

@ -0,0 +1,202 @@
// scss-lint:disable QualifyingElement
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
flex: 0 1 auto;
// Bring the hover, focused, and "active" buttons to the fron to overlay
// the borders properly
@include hover {
z-index: 2;
}
&:focus,
&:active,
&.active {
z-index: 2;
}
}
// Prevent double borders when buttons are next to each other
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -$input-btn-border-width;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
display: flex;
justify-content: flex-start;
.input-group {
width: auto;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
@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
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
//
// Split button dropdowns
//
.btn + .dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
&::after {
margin-left: 0;
}
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
@include box-shadow($btn-active-box-shadow);
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
@include box-shadow(none);
}
}
//
// Vertical button groups
//
.btn-group-vertical {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
.btn,
.btn-group {
width: 100%;
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -$input-btn-border-width;
margin-left: 0;
}
}
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-top-radius(0);
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
}
}

170
src/sass/bootstrap4/_buttons.scss Normal file
View File

@ -0,0 +1,170 @@
// scss-lint:disable QualifyingElement
//
// Base styles
//
.btn {
display: inline-block;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition($btn-transition);
// Share hover and focus styles
@include hover-focus {
text-decoration: none;
}
&:focus,
&.focus {
outline: 0;
box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
@include box-shadow(none);
}
&:active,
&.active {
background-image: none;
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
//
// Alternate buttons
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.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
.btn-outline-primary {
@include button-outline-variant($btn-primary-bg);
}
.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);
}
//
// Link buttons
//
// Make a button look and behave like a link
.btn-link {
font-weight: $font-weight-normal;
color: $link-color;
border-radius: 0;
&,
&:active,
&.active,
&:disabled {
background-color: transparent;
@include box-shadow(none);
}
&,
&:focus,
&:active {
border-color: transparent;
}
@include hover {
border-color: transparent;
}
@include hover-focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
background-color: transparent;
}
&:disabled {
color: $btn-link-disabled-color;
@include hover-focus {
text-decoration: none;
}
}
}
//
// Button Sizes
//
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
//
// Block button
//
.btn-block {
display: block;
width: 100%;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: $btn-block-spacing-y;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

276
src/sass/bootstrap4/_card.scss Normal file
View File

@ -0,0 +1,276 @@
//
// Base styles
//
.card {
position: relative;
display: flex;
flex-direction: column;
background-color: $card-bg;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
}
.card-block {
// 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.
flex: 1 1 auto;
padding: $card-spacer-x;
}
.card-title {
margin-bottom: $card-spacer-y;
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
@include hover {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
.card {
> .list-group:first-child {
.list-group-item:first-child {
@include border-top-radius($card-border-radius);
}
}
> .list-group:last-child {
.list-group-item:last-child {
@include border-bottom-radius($card-border-radius);
}
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-spacer-y $card-spacer-x;
margin-bottom: 0; // Removes the default margin-bottom of <hN>
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
&:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
}
}
.card-footer {
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
border-bottom: 0;
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
}
//
// Background variations
//
.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-img {
// margin: -1.325rem;
@include border-radius($card-border-radius-inner);
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: $card-img-overlay-padding;
}
// Card image caps
.card-img-top {
@include border-top-radius($card-border-radius-inner);
}
.card-img-bottom {
@include border-bottom-radius($card-border-radius-inner);
}
// Card deck
@include media-breakpoint-up(sm) {
.card-deck {
display: flex;
flex-flow: row wrap;
.card {
display: flex;
flex: 1 0 0;
flex-direction: column;
// Selectively apply horizontal margins to cards to avoid doing the
// 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; }
}
}
}
//
// Card groups
//
@include media-breakpoint-up(sm) {
.card-group {
display: flex;
flex-flow: row wrap;
.card {
flex: 1 0 0;
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:first-child {
@include border-right-radius(0);
.card-img-top {
border-top-right-radius: 0;
}
.card-img-bottom {
border-bottom-right-radius: 0;
}
}
&:last-child {
@include border-left-radius(0);
.card-img-top {
border-top-left-radius: 0;
}
.card-img-bottom {
border-bottom-left-radius: 0;
}
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
.card-img-top,
.card-img-bottom {
border-radius: 0;
}
}
}
}
}
}
//
// Columns
//
@include media-breakpoint-up(sm) {
.card-columns {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
.card {
display: inline-block; // Don't let them vertically span multiple columns
width: 100%; // Don't let their width change
margin-bottom: $card-columns-margin;
}
}
}

178
src/sass/bootstrap4/_carousel.scss Normal file
View File

@ -0,0 +1,178 @@
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-item {
position: relative;
display: none;
width: 100%;
@include if-supports-3d-transforms() {
@include transition($carousel-transition);
backface-visibility: hidden;
perspective: 1000px;
}
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
.carousel-item-next,
.carousel-item-prev {
position: absolute;
top: 0;
}
// CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() {
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translate3d(0, 0, 0);
}
.carousel-item-next,
.active.carousel-item-right {
transform: translate3d(100%, 0, 0);
}
.carousel-item-prev,
.active.carousel-item-left {
transform: translate3d(-100%, 0, 0);
}
}
//
// Left/right controls for nav
//
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
// Use flex for alignment (1-3)
display: flex; // 1. allow flex styles
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
color: $carousel-control-color;
text-align: center;
opacity: $carousel-control-opacity;
// We can't have a transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Hover/focus state
@include hover-focus {
color: $carousel-control-color;
text-decoration: none;
outline: 0;
opacity: .9;
}
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
// Icons for within
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.carousel-control-prev-icon {
background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-next-icon {
background-image: $carousel-control-next-icon-bg;
}
// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0; // override <ol> default
// Use the .carousel-control's width as margin so we don't overlay those
margin-right: $carousel-control-width;
margin-left: $carousel-control-width;
list-style: none;
li {
position: relative;
flex: 1 0 auto;
max-width: $carousel-indicator-width;
height: $carousel-indicator-height;
margin-right: $carousel-indicator-spacer;
margin-left: $carousel-indicator-spacer;
text-indent: -999px;
cursor: pointer;
background-color: rgba($carousel-indicator-active-bg, .5);
// Use pseudo classes to increase the hit area by 10px on top and bottom.
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
}
.active {
background-color: $carousel-indicator-active-bg;
}
}
// Optional captions
//
//
.carousel-caption {
position: absolute;
right: ((100% - $carousel-caption-width) / 2);
bottom: 20px;
left: ((100% - $carousel-caption-width) / 2);
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: $carousel-caption-color;
text-align: center;
}

31
src/sass/bootstrap4/_close.scss Normal file
View File

@ -0,0 +1,31 @@
.close {
float: right;
font-size: $close-font-size;
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
opacity: .5;
@include hover-focus {
color: $close-color;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// scss-lint:disable QualifyingElement
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
// scss-lint:enable QualifyingElement

64
src/sass/bootstrap4/_code.scss Normal file
View File

@ -0,0 +1,64 @@
// Inline and block code styles
code,
kbd,
pre,
samp {
font-family: $font-family-monospace;
}
// Inline code
code {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
color: $code-color;
background-color: $code-bg;
@include border-radius($border-radius);
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
padding: 0;
color: inherit;
background-color: inherit;
}
}
// User input typically entered via keyboard
kbd {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);
kbd {
padding: 0;
font-size: 100%;
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
}
// Blocks of code
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
font-size: $code-font-size;
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
font-size: inherit;
color: inherit;
background-color: transparent;
border-radius: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: $pre-scrollable-max-height;
overflow-y: scroll;
}

263
src/sass/bootstrap4/_custom-forms.scss Normal file
View File

@ -0,0 +1,263 @@
// scss-lint:disable PropertyCount
// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.custom-control {
position: relative;
display: inline-flex;
min-height: (1rem * $line-height-base);
padding-left: $custom-control-gutter;
margin-right: $custom-control-spacer-x;
cursor: pointer;
}
.custom-control-input {
position: absolute;
z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0;
&:checked ~ .custom-control-indicator {
color: $custom-control-checked-indicator-color;
background-color: $custom-control-checked-indicator-bg;
@include box-shadow($custom-control-checked-indicator-box-shadow);
}
&:focus ~ .custom-control-indicator {
// the mixin is not used here to make sure there is feedback
box-shadow: $custom-control-focus-indicator-box-shadow;
}
&:active ~ .custom-control-indicator {
color: $custom-control-active-indicator-color;
background-color: $custom-control-active-indicator-bg;
@include box-shadow($custom-control-active-indicator-box-shadow);
}
&:disabled {
~ .custom-control-indicator {
cursor: $custom-control-disabled-cursor;
background-color: $custom-control-disabled-indicator-bg;
}
~ .custom-control-description {
color: $custom-control-disabled-description-color;
cursor: $custom-control-disabled-cursor;
}
}
}
// Custom indicator
//
// Generates a shadow element to create our makeshift checkbox/radio background.
.custom-control-indicator {
position: absolute;
top: (($line-height-base - $custom-control-indicator-size) / 2);
left: 0;
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
pointer-events: none;
user-select: none;
background-color: $custom-control-indicator-bg;
background-repeat: no-repeat;
background-position: center center;
background-size: $custom-control-indicator-bg-size;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Checkboxes
//
// Tweak just a few things for checkboxes.
.custom-checkbox {
.custom-control-indicator {
@include border-radius($custom-checkbox-radius);
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-checkbox-checked-icon;
}
.custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: $custom-checkbox-indeterminate-bg;
background-image: $custom-checkbox-indeterminate-icon;
@include box-shadow($custom-checkbox-indeterminate-box-shadow);
}
}
// Radios
//
// Tweak just a few things for radios.
.custom-radio {
.custom-control-indicator {
border-radius: $custom-radio-radius;
}
.custom-control-input:checked ~ .custom-control-indicator {
background-image: $custom-radio-checked-icon;
}
}
// Layout options
//
// By default radios and checkboxes are `inline-block` with no additional spacing
// set. Use these optional classes to tweak the layout.
.custom-controls-stacked {
display: flex;
flex-direction: column;
.custom-control {
margin-bottom: $custom-control-spacer-y;
+ .custom-control {
margin-left: 0;
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
//
.custom-select {
display: inline-block;
max-width: 100%;
$select-border-width: ($border-width * 2);
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;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
background-size: $custom-select-bg-size;
border: $custom-select-border-width solid $custom-select-border-color;
@include border-radius($custom-select-border-radius);
// Use vendor prefixes as `appearance` isn't part of the CSS spec.
-moz-appearance: none;
-webkit-appearance: none;
&:focus {
border-color: $custom-select-focus-border-color;
outline: none;
@include box-shadow($custom-select-focus-box-shadow);
&::-ms-value {
// For visual consistency with other platforms/browsers,
// supress the default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
&:disabled {
color: $custom-select-disabled-color;
cursor: $cursor-disabled;
background-color: $custom-select-disabled-bg;
}
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
}
}
.custom-select-sm {
padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-sm-font-size;
// &:not([multiple]) {
// height: 26px;
// min-height: 26px;
// }
}
// File
//
// Custom file input.
.custom-file {
position: relative;
display: inline-block;
max-width: 100%;
height: $custom-file-height;
margin-bottom: 0;
cursor: pointer;
}
.custom-file-input {
min-width: $custom-file-width;
max-width: 100%;
height: $custom-file-height;
margin: 0;
filter: alpha(opacity = 0);
opacity: 0;
&:focus ~ .custom-file-control {
@include box-shadow($custom-file-focus-box-shadow);
}
}
.custom-file-control {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y;
line-height: $custom-file-line-height;
color: $custom-file-color;
pointer-events: none;
user-select: none;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
@each $lang, $text in map-get($custom-file-text, placeholder) {
&:lang(#{$lang})::after {
content: $text;
}
}
&::before {
position: absolute;
top: -$custom-file-border-width;
right: -$custom-file-border-width;
bottom: -$custom-file-border-width;
z-index: 6;
display: block;
height: $custom-file-height;
padding: $custom-file-padding-x $custom-file-padding-y;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
background-color: $custom-file-button-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
@each $lang, $text in map-get($custom-file-text, button-label) {
&:lang(#{$lang})::before {
content: $text;
}
}
}

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

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

161
src/sass/bootstrap4/_dropdown.scss Normal file
View File

@ -0,0 +1,161 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle {
// Generate the caret automatically
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width;
vertical-align: middle;
content: "";
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-left: $caret-width solid transparent;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
&:focus {
outline: 0;
}
}
.dropup {
.dropdown-toggle {
&::after {
border-top: 0;
border-bottom: $caret-width solid;
}
}
}
// The dropdown menu
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-margin-top 0 0; // override default ul
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
color: $body-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
background-color: $dropdown-bg;
background-clip: padding-box;
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($border-radius);
@include box-shadow($dropdown-box-shadow);
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
display: block;
width: 100%; // For `<button>`s
padding: 3px $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
white-space: nowrap; // prevent links from randomly breaking onto new lines
background: none; // For `<button>`s
border: 0; // For `<button>`s
@include hover-focus {
color: $dropdown-link-hover-color;
text-decoration: none;
background-color: $dropdown-link-hover-bg;
}
&.active,
&:active {
color: $dropdown-link-active-color;
text-decoration: none;
background-color: $dropdown-link-active-bg;
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color;
cursor: $cursor-disabled;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
}
}
// Open state for the dropdown
.show {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// 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-header {
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm;
color: $dropdown-header-color;
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;
}
}

388
src/sass/bootstrap4/_forms.scss Normal file
View File

@ -0,0 +1,388 @@
// scss-lint:disable QualifyingElement
//
// Textual form controls
//
.form-control {
display: block;
width: 100%;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius;
} @else {
// Otherwise undo the iOS default
border-radius: 0;
}
@include box-shadow($input-box-shadow);
@include transition($input-transition);
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
}
select.form-control {
&:not([size]):not([multiple]) {
$select-border-width: ($border-width * 2);
height: calc(#{$input-height} + #{$select-border-width});
}
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
// match the appearance of the native widget.
// See https://github.com/twbs/bootstrap/issues/19398.
color: $input-color;
background-color: $input-bg;
}
}
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file,
.form-control-range {
display: block;
}
//
// Labels
//
// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.col-form-label {
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
margin-bottom: 0; // Override the `<label>` default
}
.col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
font-size: $font-size-lg;
}
.col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
font-size: $font-size-sm;
}
//
// Legends
//
// 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.
.col-form-legend {
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0;
font-size: $font-size-base;
}
// Static form control text
//
// Apply class to an element to make any string of text align with labels in a
// horizontal form layout.
.form-control-static {
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-line-height;
border: solid transparent;
border-width: $input-btn-border-width 0;
&.form-control-sm,
&.form-control-lg {
padding-right: 0;
padding-left: 0;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($input-border-radius-sm);
}
select.form-control-sm {
&:not([size]):not([multiple]) {
height: $input-height-sm;
}
}
.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($input-border-radius-lg);
}
select.form-control-lg {
&:not([size]):not([multiple]) {
height: $input-height-lg;
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
}
.form-text {
display: block;
margin-top: $form-text-margin-top;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
.form-check {
position: relative;
display: block;
margin-bottom: $form-check-margin-bottom;
&.disabled {
.form-check-label {
color: $text-muted;
cursor: $cursor-disabled;
}
}
}
.form-check-label {
padding-left: $form-check-input-gutter;
margin-bottom: 0; // Override default `<label>` bottom margin
cursor: pointer;
}
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
&:only-child {
position: static;
}
}
// Radios and checkboxes on same line
.form-check-inline {
display: inline-block;
.form-check-label {
vertical-align: middle;
}
+ .form-check-inline {
margin-left: $form-check-inline-margin-x;
}
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.form-control-feedback {
margin-top: $form-feedback-margin-top;
}
.form-control-success,
.form-control-warning,
.form-control-danger {
padding-right: ($input-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
}
// Form validation states
.has-success {
@include form-control-validation($brand-success);
.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;
}
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
// Because we use flex, the initial sizing of checkboxes is collapsed and
// doesn't occupy the full-width (which is what we want for xs grid tier),
// so we force that here.
.form-check {
width: 100%;
}
// Kick in the inline
@include media-breakpoint-up(sm) {
label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
// Inline-block all the things for "inline"
.form-group {
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
align-items: center;
margin-bottom: 0;
}
// Allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group {
width: auto;
}
.form-control-label {
margin-bottom: 0;
vertical-align: middle;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match.
.form-check {
display: flex;
align-items: center;
justify-content: center;
width: auto;
margin-top: 0;
margin-bottom: 0;
}
.form-check-label {
padding-left: 0;
}
.form-check-input {
position: relative;
margin-top: 0;
margin-right: $form-check-input-margin-x;
margin-left: 0;
}
// Custom form controls
.custom-control {
display: flex;
align-items: center;
justify-content: center;
padding-left: 0;
}
.custom-control-indicator {
position: static;
display: inline-block;
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
vertical-align: text-bottom;
}
// Re-override the feedback icon.
.has-feedback .form-control-feedback {
top: 0;
}
}
}

52
src/sass/bootstrap4/_grid.scss Normal file
View File

@ -0,0 +1,52 @@
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
@if $enable-grid-classes {
.container {
@include make-container();
@include make-container-max-widths();
}
}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
@if $enable-grid-classes {
.container-fluid {
@include make-container();
}
}
// Row
//
// Rows contain and clear the floats of your columns.
@if $enable-grid-classes {
.row {
@include make-row();
}
// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
}
// Columns
//
// Common styles for small and large grid columns
@if $enable-grid-classes {
@include make-grid-columns();
}

43
src/sass/bootstrap4/_images.scss Normal file
View File

@ -0,0 +1,43 @@
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid;
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
@include transition($thumbnail-transition);
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid;
}
//
// Figures
//
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
.figure-img {
margin-bottom: ($spacer-y / 2);
line-height: 1;
}
.figure-caption {
font-size: $figure-caption-font-size;
color: $figure-caption-color;
}

178
src/sass/bootstrap4/_input-group.scss Normal file
View File

@ -0,0 +1,178 @@
//
// Base styles
//
.input-group {
position: relative;
display: flex;
width: 100%;
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
flex: 1 1 auto;
// Add width 1% and flex-basis auto to ensure that button will not wrap out
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
width: 1%;
margin-bottom: 0;
// Bring the "active" form control to the front
@include hover-focus-active {
z-index: 3;
}
}
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
// Vertically centers the content of the addons within the input group
display: flex;
flex-direction: column;
justify-content: center;
&:not(:first-child):not(:last-child) {
@include border-radius(0);
}
}
.input-group-addon,
.input-group-btn {
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
@extend .form-control-lg;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
@extend .form-control-sm;
}
//
// Text input groups
//
.input-group-addon {
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base; // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-color;
text-align: center;
background-color: $input-group-addon-bg;
border: $input-btn-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius);
// Sizing
&.form-control-sm {
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($input-border-radius-sm);
}
&.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($input-border-radius-lg);
}
// scss-lint:disable QualifyingElement
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
}
// scss-lint:enable QualifyingElement
}
//
// Reset rounded corners
//
.input-group .form-control:not(:last-child),
.input-group-addon:not(:last-child),
.input-group-btn:not(:last-child) > .btn,
.input-group-btn:not(:last-child) > .btn-group > .btn,
.input-group-btn:not(:last-child) > .dropdown-toggle,
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
.input-group-addon:not(:last-child) {
border-right: 0;
}
.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn,
.input-group-btn:not(:first-child) > .btn-group > .btn,
.input-group-btn:not(:first-child) > .dropdown-toggle,
.input-group-btn:not(:last-child) > .btn:not(:first-child),
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
.form-control + .input-group-addon:not(:first-child) {
border-left: 0;
}
//
// Button input groups
//
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
// Vertically stretch the button and center its content
flex: 1;
+ .btn {
margin-left: (-$input-btn-border-width);
}
// Bring the "active" button to the front
@include hover-focus-active {
z-index: 3;
}
}
// Negative margin to only have a single, shared border between the two
&:not(:last-child) {
> .btn,
> .btn-group {
margin-right: (-$input-btn-border-width);
}
}
&:not(:first-child) {
> .btn,
> .btn-group {
z-index: 2;
margin-left: (-$input-btn-border-width);
// Because specificity
@include hover-focus-active {
z-index: 3;
}
}
}
}

20
src/sass/bootstrap4/_jumbotron.scss Normal file
View File

@ -0,0 +1,20 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding;
background-color: $jumbotron-bg;
@include border-radius($border-radius-lg);
@include media-breakpoint-up(sm) {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
}
}
.jumbotron-hr {
border-top-color: darken($jumbotron-bg, 10%);
}
.jumbotron-fluid {
padding-right: 0;
padding-left: 0;
@include border-radius(0);
}

141
src/sass/bootstrap4/_list-group.scss Normal file
View File

@ -0,0 +1,141 @@
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
display: flex;
flex-direction: column;
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
}
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color;
text-align: inherit; // For `<button>`s (anchors inherit)
.list-group-item-heading {
color: $list-group-link-heading-color;
}
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
&:active {
color: $list-group-link-active-color;
background-color: $list-group-link-active-bg;
}
}
// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
&:first-child {
@include border-top-radius($list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
@include border-bottom-radius($list-group-border-radius);
}
@include hover-focus {
text-decoration: none;
}
&.disabled,
&:disabled {
color: $list-group-disabled-color;
cursor: $cursor-disabled;
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
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border;
// 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;
}
}
}
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
// useful within other components (e.g., cards).
.list-group-flush {
.list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
}
}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);

8
src/sass/bootstrap4/_media.scss Normal file
View File

@ -0,0 +1,8 @@
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}

57
src/sass/bootstrap4/_mixins.scss Normal file
View File

@ -0,0 +1,57 @@
// Toggles
//
// 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
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
@import "mixins/badge";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/size";
@import "mixins/reset-text";
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
@import "mixins/transforms";
@import "mixins/visibility";
// // Components
@import "mixins/alert";
@import "mixins/buttons";
@import "mixins/cards";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/list-group";
@import "mixins/nav-divider";
@import "mixins/forms";
@import "mixins/table-row";
// // Skins
@import "mixins/background-variant";
@import "mixins/border-radius";
@import "mixins/gradients";
// // Layout
@import "mixins/clearfix";
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/float";

142
src/sass/bootstrap4/_modal.scss Normal file
View File

@ -0,0 +1,142 @@
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal;
display: none;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
@include transition($modal-transition);
transform: translate(0, -25%);
}
&.show .modal-dialog { transform: translate(0, 0); }
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
width: auto;
margin: $modal-dialog-margin;
}
// Actual modal
.modal-content {
position: relative;
display: flex;
flex-direction: column;
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow);
// Remove focus outline from opened modal
outline: 0;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal-backdrop;
background-color: $modal-backdrop-bg;
// Fade for backdrop
&.fade { opacity: 0; }
&.show { opacity: $modal-backdrop-opacity; }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
display: flex;
align-items: center; // vertically center it
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color;
}
// Title text within header
.modal-title {
margin-bottom: 0;
line-height: $modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
// Enable `flex-grow: 1` so that the body take up as much space as possible
// when should there be a fixed height on `.modal-dialog`.
flex: 1 1 auto;
padding: $modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
display: flex;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
// Easily place margin between footer elements
> :not(:first-child) { margin-left: .25rem; }
> :not(:last-child) { margin-right: .25rem; }
}
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal
@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
max-width: $modal-md;
margin: $modal-dialog-sm-up-margin-y auto;
}
.modal-content {
@include box-shadow($modal-content-sm-up-box-shadow);
}
.modal-sm { max-width: $modal-sm; }
}
@include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; }
}

119
src/sass/bootstrap4/_nav.scss Normal file
View File

@ -0,0 +1,119 @@
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s or `<ul>`s.
.nav {
display: flex;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-link {
display: block;
padding: $nav-link-padding;
@include hover-focus {
text-decoration: none;
}
// Disabled state lightens text and removes hover/tab effects
&.disabled {
color: $nav-disabled-link-color;
cursor: $cursor-disabled;
}
}
//
// Tabs
//
.nav-tabs {
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-item {
margin-bottom: -$nav-tabs-border-width;
}
.nav-link {
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
&.disabled {
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
}
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}
//
// Pills
//
.nav-pills {
.nav-link {
@include border-radius($nav-pills-border-radius);
}
.nav-link.active,
.nav-item.show .nav-link {
color: $nav-pills-active-link-color;
cursor: default;
background-color: $nav-pills-active-link-bg;
}
}
//
// Justified variants
//
.nav-fill {
.nav-item {
flex: 1 1 auto;
text-align: center;
}
}
.nav-justified {
.nav-item {
flex: 1 1 100%;
text-align: center;
}
}
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}

268
src/sass/bootstrap4/_navbar.scss Normal file
View File

@ -0,0 +1,268 @@
// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
display: flex;
flex-direction: column;
padding: $navbar-padding-y $navbar-padding-x;
}
// Navbar brand
//
// Used for brand, project, or site names.
.navbar-brand {
display: inline-block;
padding-top: .25rem;
padding-bottom: .25rem;
margin-right: $navbar-padding-x;
font-size: $font-size-lg;
line-height: inherit;
white-space: nowrap;
@include hover-focus {
text-decoration: none;
}
}
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0;
margin-bottom: 0;
list-style: none;
.nav-link {
padding-right: 0;
padding-left: 0;
}
}
// Navbar text
//
//
.navbar-text {
display: inline-block;
padding-top: .425rem;
padding-bottom: .425rem;
}
// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.
// Button for toggling the navbar when in its collapsed state
.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;
font-size: $navbar-toggler-font-size;
line-height: 1;
background: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
@include border-radius($navbar-toggler-border-radius);
@include hover-focus {
text-decoration: none;
}
}
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
// Use `position` on the toggler to prevent it from being auto placed as a flex
// 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.
.navbar-toggleable {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
.navbar-nav {
.dropdown-menu {
position: static;
float: none;
}
}
> .container {
padding-right: 0;
padding-left: 0;
}
}
@include media-breakpoint-up($next) {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
.navbar-nav {
flex-direction: row;
.nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
}
// For nesting containers, have to redeclare for alignment purposes
> .container {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
// scss-lint:disable ImportantRule
.navbar-collapse {
display: flex !important;
width: 100%;
}
// scss-lint:enable ImportantRule
.navbar-toggler {
display: none;
}
}
}
}
}
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
// Dark links against a light background
.navbar-light {
.navbar-brand,
.navbar-toggler {
color: $navbar-light-active-color;
@include hover-focus {
color: $navbar-light-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-light-color;
@include hover-focus {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
color: $navbar-light-active-color;
}
}
.navbar-toggler {
border-color: $navbar-light-toggler-border;
}
.navbar-toggler-icon {
background-image: $navbar-light-toggler-bg;
}
.navbar-text {
color: $navbar-light-color;
}
}
// White links against a dark background
.navbar-inverse {
.navbar-brand,
.navbar-toggler {
color: $navbar-inverse-active-color;
@include hover-focus {
color: $navbar-inverse-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-inverse-color;
@include hover-focus {
color: $navbar-inverse-hover-color;
}
&.disabled {
color: $navbar-inverse-disabled-color;
}
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
color: $navbar-inverse-active-color;
}
}
.navbar-toggler {
border-color: $navbar-inverse-toggler-border;
}
.navbar-toggler-icon {
background-image: $navbar-inverse-toggler-bg;
}
.navbar-text {
color: $navbar-inverse-color;
}
}

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

@ -0,0 +1,461 @@
/*! 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;
}

67
src/sass/bootstrap4/_pagination.scss Normal file
View File

@ -0,0 +1,67 @@
.pagination {
display: flex;
// 1-2: Disable browser default list styles
padding-left: 0; // 1
list-style: none; // 2
@include border-radius();
}
.page-item {
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
&.active .page-link {
z-index: 2;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border;
}
&.disabled .page-link {
color: $pagination-disabled-color;
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;
border-color: $pagination-disabled-border;
}
}
.page-link {
position: relative;
display: block;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $pagination-line-height;
color: $pagination-color;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
@include hover-focus {
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border;
}
}
//
// Sizing
//
.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
}
.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
}

171
src/sass/bootstrap4/_popover.scss Normal file
View File

@ -0,0 +1,171 @@
.popover {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
padding: $popover-inner-padding;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
background-clip: padding-box;
border: $popover-border-width solid $popover-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($popover-box-shadow);
// Popover directions
&.popover-top,
&.bs-tether-element-attached-bottom {
margin-top: -$popover-arrow-width;
&::before,
&::after {
left: 50%;
border-bottom-width: 0;
}
&::before {
bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-top-color: $popover-arrow-color;
}
}
&.popover-right,
&.bs-tether-element-attached-left {
margin-left: $popover-arrow-width;
&::before,
&::after {
top: 50%;
border-left-width: 0;
}
&::before {
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color;
}
}
&.popover-bottom,
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width;
&::before,
&::after {
left: 50%;
border-top-width: 0;
}
&::before {
top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-title-bg;
}
// This will remove the popover-title's border just below the arrow
.popover-title::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 20px;
margin-left: -10px;
content: "";
border-bottom: 1px solid $popover-title-bg;
}
}
&.popover-left,
&.bs-tether-element-attached-right {
margin-left: -$popover-arrow-width;
&::before,
&::after {
top: 50%;
border-right-width: 0;
}
&::before {
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color;
}
}
}
// Offset the popover to account for the popover arrow
.popover-title {
padding: $popover-title-padding-y $popover-title-padding-x;
margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
@include border-top-radius($offset-border-width);
&:empty {
display: none;
}
}
.popover-content {
padding: $popover-content-padding-y $popover-content-padding-x;
}
// 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;
}

119
src/sass/bootstrap4/_print.scss Normal file
View File

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

32
src/sass/bootstrap4/_progress.scss Normal file
View File

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

389
src/sass/bootstrap4/_reboot.scss Normal file
View File

@ -0,0 +1,389 @@
// scss-lint:disable QualifyingElement, DuplicateProperty
// Reboot
//
// Global resets to common HTML elements and more for easier usage by Bootstrap.
// Adds additional rules on top of Normalize.css, including several overrides.
// Reset the box-sizing
//
// Change from `box-sizing: content-box` to `border-box` so that when you add
// `padding` or `border`s to an element, the overall declared `width` does not
// change. For example, `width: 100px;` will always be `100px` despite the
// `border: 10px solid red;` and `padding: 20px;`.
//
// Heads up! This reset may cause conflicts with some third-party widgets. For
// recommendations on resolving such conflicts, see
// 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,
*::after {
box-sizing: inherit;
}
// Make viewport responsive
//
// @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 {
@-ms-viewport { width: device-width; }
}
//
// Reset HTML, body, and more
//
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 {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
// Go easy on the eyes and use something other than `#000` for text
color: $body-color;
// By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg;
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus {
outline: none !important;
}
//
// Typography
//
// Remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: 1rem;
}
// Abbreviations
abbr[title],
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: $dt-font-weight;
}
dd {
margin-bottom: .5rem;
margin-left: 0; // Undo browser default
}
blockquote {
margin: 0 0 1rem;
}
//
// Links
//
a {
color: $link-color;
text-decoration: $link-decoration;
@include hover-focus {
color: $link-hover-color;
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
@include hover-focus {
color: inherit;
text-decoration: none;
}
&:focus {
outline: 0;
}
}
//
// Code
//
pre {
// Remove browser default top margin
margin-top: 0;
// Reset browser default of `1em` to use `rem`s
margin-bottom: 1rem;
// Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
overflow: auto;
}
//
// Figures
//
figure {
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
// We reset that to create a better flow in-page.
margin: 0 0 1rem;
}
//
// Images
//
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;
// Note: `<img>`s are deliberately not made responsive by default.
// For the rationale behind this, see the comments on the `.img-fluid` class.
}
// iOS "clickable elements" fix for role="button"
//
// 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;
}
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support removing the click delay via `touch-action: manipulation`.
// See:
// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
//
// Tables
//
table {
// No longer part of Normalize since v4
border-collapse: collapse;
// Reset for nesting within parents with `background-color`.
background-color: $table-bg;
}
caption {
padding-top: $table-cell-padding;
padding-bottom: $table-cell-padding;
color: $text-muted;
text-align: left;
caption-side: bottom;
}
th {
// Centered by default, but left-align-ed to match the `td`s below.
text-align: left;
}
//
// Forms
//
label {
// Allow labels to use `margin` for spacing.
display: inline-block;
margin-bottom: .5rem;
}
// Work around a Firefox/IE bug where the transparent `button` background
// results in a loss of the default `button` focus styles.
//
// Credit: https://github.com/suitcss/base/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
textarea {
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
// properly inherited. However, `line-height` isn't inherited there.
line-height: inherit;
}
input[type="radio"],
input[type="checkbox"] {
// Apply a disabled cursor for radios and checkboxes.
//
// Note: Neither radios nor checkboxes can be readonly.
&:disabled {
cursor: $cursor-disabled;
}
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox;
}
textarea {
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;
}
fieldset {
// Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
}
legend {
// Reset the entire legend element to match the `fieldset`
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
input[type="search"] {
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
-webkit-appearance: none;
}
// todo: needed?
output {
display: inline-block;
// font-size: $font-size-base;
// line-height: $line-height;
// color: $input-color;
}
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}

52
src/sass/bootstrap4/_responsive-embed.scss Normal file
View File

@ -0,0 +1,52 @@
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
&::before {
display: block;
content: "";
}
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
}
}
.embed-responsive-16by9 {
&::before {
padding-top: percentage(9 / 16);
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
}
}
.embed-responsive-1by1 {
&::before {
padding-top: percentage(1 / 1);
}
}

153
src/sass/bootstrap4/_tables.scss Normal file
View File

@ -0,0 +1,153 @@
//
// Basic Bootstrap table
//
.table {
width: 100%;
max-width: 100%;
margin-bottom: $spacer;
th,
td {
padding: $table-cell-padding;
vertical-align: top;
border-top: $table-border-width solid $table-border-color;
}
thead th {
vertical-align: bottom;
border-bottom: (2 * $table-border-width) solid $table-border-color;
}
tbody + tbody {
border-top: (2 * $table-border-width) solid $table-border-color;
}
.table {
background-color: $body-bg;
}
}
//
// Condensed table w/ half padding
//
.table-sm {
th,
td {
padding: $table-sm-cell-padding;
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: $table-border-width solid $table-border-color;
th,
td {
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
border-bottom-width: (2 * $table-border-width);
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(odd) {
background-color: $table-bg-accent;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
@include hover {
background-color: $table-bg-hover;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
// Generate the contextual variants
@include table-row-variant(active, $table-bg-active);
@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(danger, $state-danger-bg);
// Inverse styles
//
// Same table markup, but inverted color scheme: dark background and light text.
.thead-inverse {
th {
color: $table-inverse-color;
background-color: $table-inverse-bg;
}
}
.thead-default {
th {
color: $table-head-color;
background-color: $table-head-bg;
}
}
.table-inverse {
color: $table-inverse-color;
background-color: $table-inverse-bg;
th,
td,
thead th {
border-color: $body-bg;
}
&.table-bordered {
border: 0;
}
}
// Responsive tables
//
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
// enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
.table-responsive {
display: block;
width: 100%;
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;`
&.table-bordered {
border: 0;
}
}

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

@ -0,0 +1,90 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
font-size: $font-size-sm;
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
&.show { opacity: $tooltip-opacity; }
&.tooltip-top,
&.bs-tether-element-attached-bottom {
padding: $tooltip-arrow-width 0;
margin-top: -$tooltip-margin;
.tooltip-inner::before {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
}
&.tooltip-right,
&.bs-tether-element-attached-left {
padding: 0 $tooltip-arrow-width;
margin-left: $tooltip-margin;
.tooltip-inner::before {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
}
&.tooltip-bottom,
&.bs-tether-element-attached-top {
padding: $tooltip-arrow-width 0;
margin-top: $tooltip-margin;
.tooltip-inner::before {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
}
&.tooltip-left,
&.bs-tether-element-attached-right {
padding: 0 $tooltip-arrow-width;
margin-left: -$tooltip-margin;
.tooltip-inner::before {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
}
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
color: $tooltip-color;
text-align: center;
background-color: $tooltip-bg;
@include border-radius($border-radius);
&::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}

34
src/sass/bootstrap4/_transitions.scss Normal file
View File

@ -0,0 +1,34 @@
.fade {
opacity: 0;
@include transition($transition-fade);
&.show {
opacity: 1;
}
}
.collapse {
display: none;
&.show {
display: block;
}
}
tr {
&.collapse.show {
display: table-row;
}
}
tbody {
&.collapse.show {
display: table-row-group;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}

143
src/sass/bootstrap4/_type.scss Normal file
View File

@ -0,0 +1,143 @@
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
font-size: $display1-size;
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2 {
font-size: $display2-size;
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
font-size: $display3-size;
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
font-size: $display4-size;
font-weight: $display4-weight;
line-height: $display-line-height;
}
//
// Horizontal rules
//
hr {
margin-top: $spacer-y;
margin-bottom: $spacer-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
//
// Emphasis
//
small,
.small {
font-size: $small-font-size;
font-weight: $font-weight-normal;
}
mark,
.mark {
padding: $mark-padding;
background-color: $mark-bg;
}
//
// Lists
//
.list-unstyled {
@include list-unstyled;
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled;
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
}
}
//
// Misc
//
// Builds on `abbr`
.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
.blockquote {
padding: ($spacer / 2) $spacer;
margin-bottom: $spacer;
font-size: $blockquote-font-size;
border-left: $blockquote-border-width solid $blockquote-border-color;
}
.blockquote-footer {
display: block;
font-size: 80%; // back to default font-size
color: $blockquote-small-color;
&::before {
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
}
}

13
src/sass/bootstrap4/_utilities.scss Normal file
View File

@ -0,0 +1,13 @@
@import "utilities/align";
@import "utilities/background";
@import "utilities/borders";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/position";
@import "utilities/screenreaders";
@import "utilities/sizing";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

961
src/sass/bootstrap4/_variables.scss Normal file
View File

@ -0,0 +1,961 @@
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
// Tables
// Buttons
// Forms
// Dropdowns
// Z-index master list
// Navbar
// Navs
// Pagination
// Jumbotron
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code
@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;
}
}
// Replace `$search` with `$replace` in `$string`
// @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;
}
@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}.";
}
}
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
// Start with assigning color names to specific hex values.
$white: #fff !default;
$black: #000 !default;
$red: #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green: #5cb85c !default;
$blue: #0275d8 !default;
$teal: #5bc0de !default;
$pink: #ff5b77 !default;
$purple: #613d7c !default;
// Create grayscale
$gray-dark: #292b2c !default;
$gray: #464a4c !default;
$gray-light: #636c72 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
// Reassign color vars to semantic color scheme
$brand-primary: $blue !default;
$brand-success: $green !default;
$brand-info: $teal !default;
$brand-warning: $orange !default;
$brand-danger: $red !default;
$brand-inverse: $gray-dark !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
$border-width: 1px !default;
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
25: 25%,
50: 50%,
75: 75%,
100: 100%
) !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-dark !default;
$inverse-bg: $gray-dark !default;
$inverse-color: $gray-lighter !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-light !default;
$abbr-border-color: $gray-light !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-width: .25rem !default;
$hr-border-color: rgba($black,.1) !default;
$hr-border-width: $border-width !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: 5px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
$caret-width: .3em !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;
$table-bg: transparent !default;
$table-inverse-bg: $gray-dark !default;
$table-inverse-color: $body-bg !default;
$table-bg-accent: rgba($black,.05) !default;
$table-bg-hover: rgba($black,.075) !default;
$table-bg-active: $table-bg-hover !default;
$table-head-bg: $gray-lighter !default;
$table-head-color: $gray !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem !default;
$btn-padding-y: .5rem !default;
$btn-line-height: 1.25 !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
$btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: $white !default;
$btn-secondary-border: #ccc !default;
$btn-info-color: $white !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$btn-success-color: $white !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$btn-warning-color: $white !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: $white !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .5rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-block-spacing-y: .5rem !default;
$btn-toolbar-margin: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-transition: all .2s ease-in-out !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-line-height: 1.25 !default;
$input-bg: $white !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: rgba($black,.15) !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg-focus: $input-bg !default;
$input-border-focus: lighten($brand-primary, 25%) !default;
$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default;
$input-color-focus: $input-color !default;
$input-color-placeholder: $gray-light !default;
$input-padding-x-sm: .5rem !default;
$input-padding-y-sm: .25rem !default;
$input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
$form-text-margin-top: .25rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;
$form-check-margin-bottom: .5rem !default;
$form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: .25rem !default;
$form-check-input-margin-x: .25rem !default;
$form-check-inline-margin-x: .75rem !default;
$form-group-margin-bottom: $spacer-y !default;
$input-group-addon-bg: $gray-lighter !default;
$input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default;
$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-spacer-y: .25rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-margin-y: (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
$custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
$custom-control-disabled-cursor: $cursor-disabled !default;
$custom-control-disabled-indicator-bg: $gray-lighter !default;
$custom-control-disabled-description-color: $gray-light !default;
$custom-control-checked-indicator-color: $white !default;
$custom-control-checked-indicator-bg: $brand-primary !default;
$custom-control-checked-indicator-box-shadow: none !default;
$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
$custom-control-active-indicator-color: $white !default;
$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default;
$custom-control-active-indicator-box-shadow: none !default;
$custom-checkbox-radius: $border-radius !default;
$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-bg: $brand-primary !default;
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-box-shadow: none !default;
$custom-radio-radius: 50% !default;
$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-padding-x: .75rem !default;
$custom-select-padding-y: .375rem !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-line-height !default;
$custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-light !default;
$custom-select-bg: $white !default;
$custom-select-disabled-bg: $gray-lighter !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: #333 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-sm-padding-y: .2rem !default;
$custom-select-sm-font-size: 75% !default;
$custom-file-height: 2.5rem !default;
$custom-file-width: 14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
$custom-file-padding-x: .5rem !default;
$custom-file-padding-y: 1rem !default;
$custom-file-line-height: 1.5 !default;
$custom-file-color: $gray !default;
$custom-file-bg: $white !default;
$custom-file-border-width: $border-width !default;
$custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $gray-lighter !default;
$custom-file-text: (
placeholder: (
en: "Choose file..."
),
button-label: (
en: "Browse"
)
) !default;
// Form validation icons
$form-icon-success-color: $brand-success !default;
$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;
$form-icon-warning-color: $brand-warning !default;
$form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
$form-icon-danger-color: $brand-danger !default;
$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default;
$dropdown-margin-top: .125rem !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black,.15) !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-lighter !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
$dropdown-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: $gray-lightest !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default;
$dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-light !default;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown-backdrop: 990 !default;
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-fixed: 1030 !default;
$zindex-sticky: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// Navbar
$navbar-border-radius: $border-radius !default;
$navbar-padding-x: $spacer !default;
$navbar-padding-y: ($spacer / 2) !default;
$navbar-brand-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-inverse-color: rgba($white,.5) !default;
$navbar-inverse-hover-color: rgba($white,.75) !default;
$navbar-inverse-active-color: rgba($white,1) !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default;
$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-inverse-toggler-border: rgba($white,.1) !default;
$navbar-light-color: rgba($black,.5) !default;
$navbar-light-hover-color: rgba($black,.7) !default;
$navbar-light-active-color: rgba($black,.9) !default;
$navbar-light-disabled-color: rgba($black,.3) !default;
$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border: rgba($black,.1) !default;
// Navs
$nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;
// Pagination
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-line-height: 1.25 !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-hover-border: #ddd !default;
$pagination-active-color: $white !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border: $brand-primary !default;
$pagination-disabled-color: $gray-light !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border: #ddd !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-lighter !default;
// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken($state-info-bg, 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$mark-bg: $state-warning-bg !default;
$state-warning-border: darken($state-warning-bg, 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken($state-danger-bg, 5%) !default;
// Cards
$card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black,.125) !default;
$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: $gray-lightest !default;
$card-bg: $white !default;
$card-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-deck-margin: ($grid-gutter-width-base / 2) !default;
$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;
// Tooltips
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: 3px !default;
$tooltip-padding-x: 8px !default;
$tooltip-margin: 3px !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-inner-padding: 1px !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black,.2) !default;
$popover-box-shadow: 0 5px 10px rgba($black,.2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;
$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;
$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Badges
$badge-default-bg: $gray-light !default;
$badge-primary-bg: $brand-primary !default;
$badge-success-bg: $brand-success !default;
$badge-info-bg: $brand-info !default;
$badge-warning-bg: $brand-warning !default;
$badge-danger-bg: $brand-danger !default;
$badge-color: $white !default;
$badge-link-hover-color: $white !default;
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-x: .4em !default;
$badge-padding-y: .25em !default;
$badge-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 15px !default;
$modal-dialog-margin: 10px !default;
$modal-dialog-sm-up-margin-y: 30px !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black,.2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default;
$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-lighter !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 15px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-x: 1.25rem !default;
$alert-padding-y: .75rem !default;
$alert-margin-bottom: $spacer-y !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
// Progress bars
$progress-height: 1rem !default;
$progress-font-size: .75rem !default;
$progress-bg: $gray-lighter !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $brand-primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
// List group
$list-group-color: $body-color !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black,.125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-item-padding-y: .75rem !default;
$list-group-hover-bg: $gray-lightest !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border: $list-group-active-bg !default;
$list-group-active-text-color: lighten($list-group-active-bg, 50%) !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: $gray !default;
$list-group-link-heading-color: $gray-dark !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-active-color: $list-group-color !default;
$list-group-link-active-bg: $gray-lighter !default;
// Image thumbnails
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: #ddd !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default;
$thumbnail-transition: all .2s ease-in-out !default;
// Figures
$figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-light !default;
// Breadcrumbs
$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-bg: $gray-lighter !default;
$breadcrumb-divider-color: $gray-light !default;
$breadcrumb-active-color: $gray-light !default;
$breadcrumb-divider: "/" !default;
// Carousel
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-control-icon-width: 20px !default;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-transition: transform .6s ease-in-out !default;
// Close
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// Code
$code-font-size: 90% !default;
$code-padding-x: .4rem !default;
$code-padding-y: .2rem !default;
$code-color: #bd4147 !default;
$code-bg: $gray-lightest !default;
$kbd-color: $white !default;
$kbd-bg: $gray-dark !default;
$pre-bg: $gray-lightest !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;

43
src/sass/bootstrap4/bootstrap-grid.scss vendored Normal file
View File

@ -0,0 +1,43 @@
// Bootstrap Grid only
//
// Includes relevant variables and mixins for the flexbox grid
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
//
// Box sizing, responsive, and more
//
@at-root {
@-ms-viewport { width: device-width; }
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
//
// Variables
//
@import "variables";
//
// Grid mixins
//
@import "mixins/clearfix";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "custom";
@import "grid";

10
src/sass/bootstrap4/bootstrap-reboot.scss vendored Normal file
View File

@ -0,0 +1,10 @@
// Bootstrap Reboot only
//
// Includes only Normalize and our custom Reboot reset.
@import "variables";
@import "mixins";
@import "custom";
@import "normalize";
@import "reboot";

54
src/sass/bootstrap4/bootstrap.scss vendored Normal file
View File

@ -0,0 +1,54 @@
/*!
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";
// Reset and dependencies
@import "normalize";
@import "print";
// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";
// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
// Utility classes
@import "utilities";

14
src/sass/bootstrap4/mixins/_alert.scss Normal file
View File

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

12
src/sass/bootstrap4/mixins/_background-variant.scss Normal file
View File

@ -0,0 +1,12 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
a#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !important;
}
}
}

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

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

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