├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── composer.json ├── css └── sass │ ├── style.scss │ └── supporting │ ├── archive.scss │ ├── bootstrap.scss │ ├── bootstrap │ ├── _alerts.scss │ ├── _badges.scss │ ├── _breadcrumbs.scss │ ├── _button-groups.scss │ ├── _buttons.scss │ ├── _carousel.scss │ ├── _close.scss │ ├── _code.scss │ ├── _component-animations.scss │ ├── _dropdowns.scss │ ├── _forms.scss │ ├── _glyphicons.scss │ ├── _grid.scss │ ├── _input-groups.scss │ ├── _jumbotron.scss │ ├── _labels.scss │ ├── _list-group.scss │ ├── _media.scss │ ├── _mixins.scss │ ├── _modals.scss │ ├── _navbar.scss │ ├── _navs.scss │ ├── _normalize.scss │ ├── _pager.scss │ ├── _pagination.scss │ ├── _panels.scss │ ├── _popovers.scss │ ├── _print.scss │ ├── _progress-bars.scss │ ├── _responsive-embed.scss │ ├── _responsive-utilities.scss │ ├── _scaffolding.scss │ ├── _tables.scss │ ├── _theme.scss │ ├── _thumbnails.scss │ ├── _tooltip.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── _wells.scss │ └── mixins │ │ ├── _alerts.scss │ │ ├── _background-variant.scss │ │ ├── _border-radius.scss │ │ ├── _buttons.scss │ │ ├── _center-block.scss │ │ ├── _clearfix.scss │ │ ├── _forms.scss │ │ ├── _gradients.scss │ │ ├── _grid-framework.scss │ │ ├── _grid.scss │ │ ├── _hide-text.scss │ │ ├── _image.scss │ │ ├── _labels.scss │ │ ├── _list-group.scss │ │ ├── _nav-divider.scss │ │ ├── _nav-vertical-align.scss │ │ ├── _opacity.scss │ │ ├── _pagination.scss │ │ ├── _panels.scss │ │ ├── _progress-bar.scss │ │ ├── _reset-filter.scss │ │ ├── _reset-text.scss │ │ ├── _resize.scss │ │ ├── _responsive-visibility.scss │ │ ├── _size.scss │ │ ├── _tab-focus.scss │ │ ├── _table-row.scss │ │ ├── _text-emphasis.scss │ │ ├── _text-overflow.scss │ │ └── _vendor-prefixes.scss │ ├── comments.scss │ ├── long-nonbreaking-path-name-support.scss │ ├── nav.scss │ ├── pagination.scss │ ├── screen-reader-text.scss │ ├── skip-to-main-content.scss │ ├── tables.scss │ ├── variables-bootstrap-core-override.scss │ ├── variables-bootstrap-genesis.scss │ ├── widget.scss │ ├── wordpress-image.scss │ └── wordpress-responsive.scss ├── fonts └── bootstrap │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── functions.php ├── js ├── custom │ └── javascript.js └── vendor │ └── bootstrap │ └── bootstrap.js ├── lib ├── add-header-xua.php ├── add-x-ua-compatible.php ├── bootstrap-markup-layout-options.php ├── bootstrap-markup.php ├── bootstrap-walker.php ├── comment-form.php ├── footer-creds.php ├── genesis-setup.php ├── ie-conditional-comments.php ├── image-display-archive.php ├── image-display-single.php ├── image-sizes.php ├── load-assets.php ├── nav.php ├── no-js.php ├── pagination-add-type-class.php ├── pagination-numeric.php ├── pagination-prev-next.php ├── post-content-nav.php ├── remove-genesis-page-templates.php ├── responsive-viewport.php ├── search-form.php ├── sidebar-secondary-move-inside-content-sidebar-wrap.php ├── skip-to-main-content.php ├── title-area-jumbotron-on-front-page.php ├── title-area-only-display-on-front-page.php └── widget-markup.php ├── package.json ├── release.sh ├── screenshot.png └── style.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | indent_style = space 12 | indent_size = 4 13 | 14 | [*.json] 15 | indent_style = space 16 | indent_size = 4 17 | 18 | [*.txt,wp-config-sample.php] 19 | end_of_line = crlf 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # ignore all files starting with . 2 | \.* 3 | # include .gitignore (i.e. do NOT ignore) 4 | !.gitignore 5 | # include .editorconfig (i.e. do NOT ignore) 6 | !.editorconfig 7 | # ignore all files that start with ~ 8 | ~* 9 | # ignore css generated by Sass 10 | # we do not check in this file since it may be minified 11 | # and would cause many many conflicts 12 | css/style.min.css 13 | css/style.min.css.map 14 | 15 | # compressed version of javascript (created with grunt / uglify) 16 | js/javascript.min.js 17 | 18 | # ignore node/grunt dependencies 19 | # these are easily recreated on a new project 20 | # with `npm install` 21 | node_modules/ 22 | 23 | # ignore composer dependencies 24 | # these are easily recreated on a new project 25 | # with `composer install` 26 | vendor/ 27 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | Bootstrap Genesis Theme Change Log 2 | ================================== 3 | 4 | ## [Unreleased][unreleased] 5 | ### Added 6 | - Add CSS to display secondary level Bootstrap Nav items when JavaScript is 7 | disabled 8 | - Add header 'X-UA-Compatible: IE=edge,chrome=1' to all responses 9 | - Add screen reader CSS classes for better accessibility 10 | - Add CSS clear: both to to .archive-pagination 11 | 12 | ### Changed 13 | - Update grunt-sass from v1 to v2 14 | - Modify check for UberMenu plugin to additionally look for `UberMenu` class 15 | - Alignment for .alignleft and .alignright is only applied from the `md` 16 | breakpoint and up. 17 | 18 | ### Fixed 19 | - Correct wrong Previous/Next Post Links Markup when using XHTML 20 | - Correct wrong Bootstrap version number is style.css 21 | 22 | ## [0.8.2] - 2015-08-10 23 | - Update Bootstrap files to 3.3.5 24 | - Remove site title/logo option from Customizer 25 | - Add filter to .navbar-brand in primary nav for logo 26 | - Add .clearfix to .entry-content 27 | - Update grunt-contrib-uglify version to ^0.9.0 28 | - Target table styling within posts (inside .entry) 29 | - Add respository field to package.json to resolve warning 30 | - Update grunt-sass version to ^1.0.0 31 | - Increase comment textarea default width to 100% 32 | - Improve rendering of "skip to main content" button 33 | - Add JavaScript to remove html.no-js, which allows CSS targeting for when 34 | JavaScript is not present 35 | - Convert Bootstrap Genesis Sass variables to use core Bootstrap Sass color 36 | variables by default for better Bootstrap Theme support 37 | - Split variables.scss into variables-bootstrap-core-override.scss and 38 | variables-bootstrap-genesis.scss (see 39 | https://github.com/salcode/bootstrap-genesis/issues/83) 40 | 41 | ## [0.7.0] - 2015-04-15 42 | 43 | ### Changed 44 | - Remove words "Previous Page" and "Next Page" from numeric pagination 45 | controls to more closely match Bootstrap defaults 46 | - Update meta viewport to remove maximum-scale 47 | - Improve pagination markup to more closely match Bootstrap defaults 48 | - Add classes to indicate whether pagination area is numeric or 49 | prev/next ("bsg-pagination-numeric" or "bsg-pagination-prev-next") 50 | - Improve search form rendering by using Bootstrap markup 51 | - Remove widget background color, it is now transparent 52 | - Add layout option Content Sidebar Sidebar 53 | - Modify sidebar-content layout to take advantage of Bootstrap 54 | push/pull classes 55 | - Remove space between Primary and Secondary Nav when both are used 56 | - Remove structural `div.wrap` elements 57 | - Archive Featured Images are now controlled by the Genesis Theme Settings page 58 | /wp-admin/admin.php?page=genesis. Previously, archive featured images were 59 | always on. To turn the featured image on, go to the Content Archives 60 | section, check "Include the Featured Image?", choose the Image Size 61 | "bsg-featured-image (1170 x 630)", and Image Alignment "None". 62 | - Add new Sass variables $commentBgColor and $galleryCaptionColor 63 | - Change all images to resize responsively by default 64 | - Add .clearfix behavior to .widget 65 | - Remove erronous extra closing div in nav markup 66 | - Remove Bootstrap Markup from all nav instances other than 67 | primary and secondary theme locations. This change was introduced to stop 68 | the Bootstrap markup from being applied to the WP_Widget_Links widget 69 | - Apply max-width: 100% to form elements anywhere on the page, previously only 70 | widget form elements were targetted. Fixes bug with Comment textarea 71 | overflowing browser window on mobile devices 72 | - remove redundant nav tag 73 | - change secondary menu default styles to nav inverse 74 | - add class .navbar-static-top to both primary and secondary nav 75 | 76 | ## [0.6.0] - 2015-02-13 77 | 78 | ### Changed 79 | - Change Bootstrap version from 2.3.2 to 3.3.2 80 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | Usage 3 | -------------- 4 | # run build tasks is build_state (default dev) 5 | # start watching for changes and build on changes 6 | grunt 7 | 8 | 9 | # build with compressed css and js 10 | # does NOT start watch 11 | grunt prod 12 | 13 | Project Setup 14 | -------------- 15 | # install grunt for this project (generates ./node_modules) 16 | # run from within this directory 17 | npm install 18 | 19 | # NOTE: Machine Setup (heading below) must have occurred 20 | # at least once previously on this machine 21 | 22 | 23 | Machine Setup 24 | -------------- 25 | # install nodejs from 26 | http://nodejs.org/download/ 27 | 28 | # from the command line install grunt cli 29 | sudo npm install -g grunt-cli 30 | 31 | # from the commdand line install sass 32 | sudo gem install sass 33 | */ 34 | 35 | // we can set our default build state to either 36 | // 'prod' or 'dev' 37 | // this value will be used for both the 38 | // initial process when `grunt` alone is run 39 | // as well as the tasks run via watch 40 | var build_state = 'prod', 41 | // sass src files are loaded with sass includes 42 | // no need to list them here (i.e. only one sass src) 43 | sass_files = { 44 | "css/style.min.css": "css/sass/style.scss" 45 | }, 46 | // watch all .scss files in our sass directory 47 | // for changes 48 | watched_sass_files = [ 'css/sass/**/*.scss' ], 49 | uglify_source_files = [ 50 | 'js/vendor/**/*.js', 51 | 'js/custom/javascript.js', 52 | ], 53 | uglify_files = { 54 | 'js/javascript.min.js': uglify_source_files 55 | }, 56 | 57 | watched_js_files = [ 58 | 'js/vendor/**/*.js', 59 | 'js/custom/*.js', 60 | ]; 61 | 62 | module.exports = function(grunt) { 63 | "use strict"; 64 | 65 | grunt.initConfig({ 66 | // `grunt watch` 67 | watch: { 68 | sass: { 69 | files: watched_sass_files, 70 | tasks: ["sass:"+build_state], 71 | options: { 72 | livereload: true 73 | } 74 | }, 75 | js: { 76 | files: watched_js_files, 77 | tasks: ["uglify:"+build_state], 78 | options: { 79 | livereload: true 80 | } 81 | } 82 | }, // watch 83 | 84 | uglify: { 85 | // `grunt uglify:dev` 86 | dev: { 87 | files: uglify_files, 88 | options: { 89 | beautify: true, 90 | mangle: false 91 | }, 92 | }, 93 | // `grunt uglify:prod` 94 | prod: { 95 | files: uglify_files 96 | }, 97 | releaseUnmin: { 98 | files: { 99 | 'js/javascript.js': uglify_source_files 100 | }, 101 | options: { 102 | beautify: true, 103 | mangle: false 104 | } 105 | } 106 | }, // uglify 107 | sass: { 108 | // `grunt sass:dev` 109 | dev: { 110 | options: { outputStyle: "nested", sourceMap: true }, 111 | files: sass_files, 112 | }, 113 | // `grunt sass:prod` 114 | prod: { 115 | options: { outputStyle: "compressed", sourceMap: true }, 116 | files: sass_files, 117 | }, 118 | releaseUnmin: { 119 | options: { style: "normal" }, 120 | files: { 121 | "css/style.css": "css/sass/style.scss" 122 | }, 123 | } 124 | }, // sass 125 | }); 126 | 127 | // when `grunt` is run, do the following tasks 128 | // run all tasks associated with build_state 129 | // (either prod or dev), start watch 130 | // (note: watch also uses build_state when generating output) 131 | grunt.registerTask('default', [build_state, 'watch']); 132 | 133 | // when `grunt prod` is run, do the following tasks 134 | grunt.registerTask('prod', ['sass:prod', 'uglify:prod']); 135 | 136 | // when `grunt dev` is run, do the following tasks 137 | grunt.registerTask('dev', ['sass:dev', 'uglify:dev']); 138 | 139 | // load these tasks (necessary to allow use of sass, watch, and uglify 140 | grunt.loadNpmTasks("grunt-sass"); 141 | grunt.loadNpmTasks("grunt-contrib-watch"); 142 | grunt.loadNpmTasks("grunt-contrib-uglify"); 143 | }; 144 | 145 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 salcode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-genesis 2 | ================= 3 | WordPress Genesis Child Theme setup to use Bootstrap 3, Sass, and Grunt. 4 | 5 | Contributors 6 | ---------------------------------- 7 | [@salcode](https://github.com/salcode), [@dustyndoyle](https://github.com/dustyndoyle), 8 | [@codenameEli](https://github.com/codenameeli), [@bryanwillis](https://github.com/bryanwillis) 9 | 10 | 11 | The CSS is Missing 12 | ---------------------------------- 13 | I hear from a lot of users, "Hey, I tried to use your theme but there is no CSS." 14 | 15 | ### Quick Fix 16 | Download the latest [Bootstrap Genesis release](https://github.com/salcode/bootstrap-genesis/releases) and use that. 17 | 18 | ### The Long Version 19 | This is the base theme I use for the projects I build. Part of my workflow includes using 20 | [GruntJS](http://gruntjs.com/) for my CSS/Sass and JavaScript compilation, concatenation, and minification. 21 | Because the resulting `css/style.min.css` and `js/javascript.min.js` files are compiled files, I do NOT 22 | check them into version control (i.e. they are listed in the `.gitignore` file). 23 | 24 | The result of all this is the files in the repo are a copy of the theme with all the source 25 | files for the CSS and JavaScript but not the final CSS and JavaScript. 26 | 27 | If you're running [GruntJS](http://gruntjs.com/) and have [Sass](http://sass-lang.com/) 28 | installed you can run `npm install` and `grunt` from the command line and the 29 | CSS and JavaScript will be generated. If you're not running these tools yet, 30 | you can use the latest 31 | [Bootstrap Genesis release](https://github.com/salcode/bootstrap-genesis/releases), 32 | which includes the compilied CSS and JavaScript. 33 | 34 | 35 | Why no CSS in style.css? 36 | ---------------------------------- 37 | Since I'm treating the CSS as a compiled asset that I do not want to include it 38 | in version control, I use `style.css` only for the theme header information and 39 | all applied CSS is stored in `css/style.min.css` 40 | 41 | 42 | Menu Modifications 43 | ---------------------------------- 44 | The menu is modified to use Bootstrap markup and the menus are placed at the top 45 | of the page by default. 46 | All menu modifications are removed, when the [Ubermenu](http://wpmegamenu.com/) 47 | plugin is present 48 | 49 | 50 | Project Goal 51 | ---------------------------------- 52 | This theme was created as my own starting point when building custom 53 | Genesis child themes using the Bootstrap front-end framework. 54 | 55 | The goal is to leverage Bootstrap as much as possible by adding the appropriate 56 | markup to trigger Bootstrap styling. 57 | 58 | Whenever there is a choice between making an adjustment via the markup 59 | or via Sass/CSS, markup modifications are preferrable. There are two 60 | justifications for this: 61 | 62 | 1. We want to keep the CSS as small as possible for load time 63 | 2. By using Bootstrap Markup we make the Bootstrap integration more transparent 64 | and easier understand and manipulate. 65 | 66 | 67 | How to Update Bootstrap 68 | ---------------------------------- 69 | Here are my notes on updating Bootstrap in this project. 70 | 71 | #### Warning 72 | After updating the Bootstrap files, the Grunt task must be run to update 73 | `css/style.min.css` and `js/javascript.min.js`. There are the only two files 74 | loaded for CSS and JavaScript, all of the other files are the source files 75 | which are used to create these two minified files. 76 | 77 | ### Steps 78 | - Download the latest [Sass version of Bootstrap](https://github.com/twbs/bootstrap-sass) 79 | - Replace the JavaScript file. Move the new `assets/javascripts/bootstrap.js` to `js/vendor/bootstrap/` 80 | - Replace the fonts. Move all files in the new download from `assets/fonts/bootstrap/` to `fonts/bootstrap/` 81 | - Replace the top level Sass file. Move the new `assets/stylesheets/_bootstrap.scss` to `css/sass/supporting/bootstrap.scss` 82 | - Replace the Bootstrap partial and mixin files. Mall all files in the new download from `assets/stylesheets/bootstrap/` to `css/sass/supporting/bootstrap/` 83 | 84 | 85 | 86 | 87 | License 88 | ---------------------------------- 89 | GPL 90 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "salcode/bootstrap-genesis", 3 | "type": "wordpress-theme", 4 | "description": "WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt", 5 | "keywords": ["wordpress", "theme"], 6 | "license": "MIT", 7 | "authors": [ 8 | { 9 | "name": "Sal Ferrarello", 10 | "email": "sal@ironcodestudio.com", 11 | "homepage": "http://salferrarello.com/" 12 | } 13 | ], 14 | "require": { 15 | "composer/installers": "^1.2" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /css/sass/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Sass (http://sass-lang.com/) file to generate theme.css 3 | */ 4 | 5 | /* Bootstrap Core Override Variables 6 | ------------------------------------------------------------ */ 7 | @import "supporting/variables-bootstrap-core-override"; 8 | 9 | /* Bootstrap Base 10 | ------------------------------------------------------------ */ 11 | @import "supporting/bootstrap"; 12 | 13 | /* Bootstrap Genesis Theme Variables 14 | ------------------------------------------------------------ */ 15 | @import "supporting/variables-bootstrap-genesis"; 16 | 17 | /* Screen Reader Classes 18 | ------------------------------------------------------------ */ 19 | @import "supporting/screen-reader-text"; 20 | 21 | /* Archive/Blog Styling 22 | ------------------------------------------------------------ */ 23 | @import "supporting/archive"; 24 | 25 | /* Nav Styling 26 | ------------------------------------------------------------ */ 27 | @import "supporting/nav"; 28 | 29 | /* Widget Styling 30 | ------------------------------------------------------------ */ 31 | @import "supporting/widget"; 32 | 33 | 34 | /* WordPress Image Styling 35 | ------------------------------------------------------------ */ 36 | @import "supporting/wordpress-image"; 37 | 38 | 39 | /* WordPress Responsive Styles 40 | ------------------------------------------------------------ */ 41 | @import "supporting/wordpress-responsive"; 42 | 43 | 44 | /* Long nonbreaking path name support 45 | * see http://wptest.io/demo/non-breaking-text/ 46 | ------------------------------------------------------------ */ 47 | @import "supporting/long-nonbreaking-path-name-support"; 48 | 49 | 50 | /* Table Styling 51 | ------------------------------------------------------------ */ 52 | @import "supporting/tables"; 53 | 54 | 55 | /* Pagination modifications to accomodate WordPress 56 | ------------------------------------------------------------ */ 57 | @import "supporting/pagination"; 58 | 59 | /* Comment Styles 60 | ------------------------------------------------------------ */ 61 | @import "supporting/comments"; 62 | 63 | /* Skip to Main Content - Accessibility Link 64 | ------------------------------------------------------------ */ 65 | @import "supporting/skip-to-main-content"; 66 | -------------------------------------------------------------------------------- /css/sass/supporting/archive.scss: -------------------------------------------------------------------------------- 1 | /* Archive/Blog Styling 2 | ------------------------------------------------------------ */ 3 | 4 | body.archive, 5 | body.blog { 6 | .post { 7 | border-bottom: 1px solid #ccc; 8 | padding-bottom: 40px; 9 | margin-bottom: 50px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.5 (http://getbootstrap.com) 3 | * Copyright 2011-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | // Core variables and mixins 8 | @import "bootstrap/variables"; 9 | @import "bootstrap/mixins"; 10 | 11 | // Reset and dependencies 12 | @import "bootstrap/normalize"; 13 | @import "bootstrap/print"; 14 | @import "bootstrap/glyphicons"; 15 | 16 | // Core CSS 17 | @import "bootstrap/scaffolding"; 18 | @import "bootstrap/type"; 19 | @import "bootstrap/code"; 20 | @import "bootstrap/grid"; 21 | @import "bootstrap/tables"; 22 | @import "bootstrap/forms"; 23 | @import "bootstrap/buttons"; 24 | 25 | // Components 26 | @import "bootstrap/component-animations"; 27 | @import "bootstrap/dropdowns"; 28 | @import "bootstrap/button-groups"; 29 | @import "bootstrap/input-groups"; 30 | @import "bootstrap/navs"; 31 | @import "bootstrap/navbar"; 32 | @import "bootstrap/breadcrumbs"; 33 | @import "bootstrap/pagination"; 34 | @import "bootstrap/pager"; 35 | @import "bootstrap/labels"; 36 | @import "bootstrap/badges"; 37 | @import "bootstrap/jumbotron"; 38 | @import "bootstrap/thumbnails"; 39 | @import "bootstrap/alerts"; 40 | @import "bootstrap/progress-bars"; 41 | @import "bootstrap/media"; 42 | @import "bootstrap/list-group"; 43 | @import "bootstrap/panels"; 44 | @import "bootstrap/responsive-embed"; 45 | @import "bootstrap/wells"; 46 | @import "bootstrap/close"; 47 | 48 | // Components w/ JavaScript 49 | @import "bootstrap/modals"; 50 | @import "bootstrap/tooltip"; 51 | @import "bootstrap/popovers"; 52 | @import "bootstrap/carousel"; 53 | 54 | // Utility classes 55 | @import "bootstrap/utilities"; 56 | @import "bootstrap/responsive-utilities"; 57 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: $alert-padding; 11 | margin-bottom: $line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: $alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing $headings-color 19 | color: inherit; 20 | } 21 | 22 | // Provide class for links that match alerts 23 | .alert-link { 24 | font-weight: $alert-link-font-weight; 25 | } 26 | 27 | // Improve alignment and spacing of inner content 28 | > p, 29 | > ul { 30 | margin-bottom: 0; 31 | } 32 | 33 | > p + p { 34 | margin-top: 5px; 35 | } 36 | } 37 | 38 | // Dismissible alerts 39 | // 40 | // Expand the right padding and account for the close button's positioning. 41 | 42 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 43 | .alert-dismissible { 44 | padding-right: ($alert-padding + 20); 45 | 46 | // Adjust close link position 47 | .close { 48 | position: relative; 49 | top: -2px; 50 | right: -21px; 51 | color: inherit; 52 | } 53 | } 54 | 55 | // Alternate styles 56 | // 57 | // Generate contextual modifier classes for colorizing the alert. 58 | 59 | .alert-success { 60 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 61 | } 62 | 63 | .alert-info { 64 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 65 | } 66 | 67 | .alert-warning { 68 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 69 | } 70 | 71 | .alert-danger { 72 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 73 | } 74 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: $font-size-small; 12 | font-weight: $badge-font-weight; 13 | color: $badge-color; 14 | line-height: $badge-line-height; 15 | vertical-align: middle; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: $badge-bg; 19 | border-radius: $badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | 32 | .btn-xs &, 33 | .btn-group-xs > .btn & { 34 | top: 0; 35 | padding: 1px 5px; 36 | } 37 | 38 | // [converter] extracted a& to a.badge 39 | 40 | // Account for badges in navs 41 | .list-group-item.active > &, 42 | .nav-pills > .active > a > & { 43 | color: $badge-active-color; 44 | background-color: $badge-active-bg; 45 | } 46 | 47 | .list-group-item > & { 48 | float: right; 49 | } 50 | 51 | .list-group-item > & + & { 52 | margin-right: 5px; 53 | } 54 | 55 | .nav-pills > li > a > & { 56 | margin-left: 3px; 57 | } 58 | } 59 | 60 | // Hover state, but only for links 61 | a.badge { 62 | &:hover, 63 | &:focus { 64 | color: $badge-link-hover-color; 65 | text-decoration: none; 66 | cursor: pointer; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; 8 | margin-bottom: $line-height-computed; 9 | list-style: none; 10 | background-color: $breadcrumb-bg; 11 | border-radius: $border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 18 | padding: 0 5px; 19 | color: $breadcrumb-color; 20 | } 21 | } 22 | 23 | > .active { 24 | color: $breadcrumb-active-color; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_button-groups.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Button groups 3 | // -------------------------------------------------- 4 | 5 | // Make the div behave like a button 6 | .btn-group, 7 | .btn-group-vertical { 8 | position: relative; 9 | display: inline-block; 10 | vertical-align: middle; // match .btn alignment given font-size hack above 11 | > .btn { 12 | position: relative; 13 | float: left; 14 | // Bring the "active" button to the front 15 | &:hover, 16 | &:focus, 17 | &:active, 18 | &.active { 19 | z-index: 2; 20 | } 21 | } 22 | } 23 | 24 | // Prevent double borders when buttons are next to each other 25 | .btn-group { 26 | .btn + .btn, 27 | .btn + .btn-group, 28 | .btn-group + .btn, 29 | .btn-group + .btn-group { 30 | margin-left: -1px; 31 | } 32 | } 33 | 34 | // Optional: Group multiple button groups together for a toolbar 35 | .btn-toolbar { 36 | margin-left: -5px; // Offset the first child's margin 37 | @include clearfix; 38 | 39 | .btn, 40 | .btn-group, 41 | .input-group { 42 | float: left; 43 | } 44 | > .btn, 45 | > .btn-group, 46 | > .input-group { 47 | margin-left: 5px; 48 | } 49 | } 50 | 51 | .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { 52 | border-radius: 0; 53 | } 54 | 55 | // 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 56 | .btn-group > .btn:first-child { 57 | margin-left: 0; 58 | &:not(:last-child):not(.dropdown-toggle) { 59 | @include border-right-radius(0); 60 | } 61 | } 62 | // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it 63 | .btn-group > .btn:last-child:not(:first-child), 64 | .btn-group > .dropdown-toggle:not(:first-child) { 65 | @include border-left-radius(0); 66 | } 67 | 68 | // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) 69 | .btn-group > .btn-group { 70 | float: left; 71 | } 72 | .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { 73 | border-radius: 0; 74 | } 75 | .btn-group > .btn-group:first-child:not(:last-child) { 76 | > .btn:last-child, 77 | > .dropdown-toggle { 78 | @include border-right-radius(0); 79 | } 80 | } 81 | .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { 82 | @include border-left-radius(0); 83 | } 84 | 85 | // On active and open, don't show outline 86 | .btn-group .dropdown-toggle:active, 87 | .btn-group.open .dropdown-toggle { 88 | outline: 0; 89 | } 90 | 91 | 92 | // Sizing 93 | // 94 | // Remix the default button sizing classes into new ones for easier manipulation. 95 | 96 | .btn-group-xs > .btn { @extend .btn-xs; } 97 | .btn-group-sm > .btn { @extend .btn-sm; } 98 | .btn-group-lg > .btn { @extend .btn-lg; } 99 | 100 | 101 | // Split button dropdowns 102 | // ---------------------- 103 | 104 | // Give the line between buttons some depth 105 | .btn-group > .btn + .dropdown-toggle { 106 | padding-left: 8px; 107 | padding-right: 8px; 108 | } 109 | .btn-group > .btn-lg + .dropdown-toggle { 110 | padding-left: 12px; 111 | padding-right: 12px; 112 | } 113 | 114 | // The clickable button for toggling the menu 115 | // Remove the gradient and set the same inset shadow as the :active state 116 | .btn-group.open .dropdown-toggle { 117 | @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); 118 | 119 | // Show no shadow for `.btn-link` since it has no other button styles. 120 | &.btn-link { 121 | @include box-shadow(none); 122 | } 123 | } 124 | 125 | 126 | // Reposition the caret 127 | .btn .caret { 128 | margin-left: 0; 129 | } 130 | // Carets in other button sizes 131 | .btn-lg .caret { 132 | border-width: $caret-width-large $caret-width-large 0; 133 | border-bottom-width: 0; 134 | } 135 | // Upside down carets for .dropup 136 | .dropup .btn-lg .caret { 137 | border-width: 0 $caret-width-large $caret-width-large; 138 | } 139 | 140 | 141 | // Vertical button groups 142 | // ---------------------- 143 | 144 | .btn-group-vertical { 145 | > .btn, 146 | > .btn-group, 147 | > .btn-group > .btn { 148 | display: block; 149 | float: none; 150 | width: 100%; 151 | max-width: 100%; 152 | } 153 | 154 | // Clear floats so dropdown menus can be properly placed 155 | > .btn-group { 156 | @include clearfix; 157 | > .btn { 158 | float: none; 159 | } 160 | } 161 | 162 | > .btn + .btn, 163 | > .btn + .btn-group, 164 | > .btn-group + .btn, 165 | > .btn-group + .btn-group { 166 | margin-top: -1px; 167 | margin-left: 0; 168 | } 169 | } 170 | 171 | .btn-group-vertical > .btn { 172 | &:not(:first-child):not(:last-child) { 173 | border-radius: 0; 174 | } 175 | &:first-child:not(:last-child) { 176 | border-top-right-radius: $btn-border-radius-base; 177 | @include border-bottom-radius(0); 178 | } 179 | &:last-child:not(:first-child) { 180 | border-bottom-left-radius: $btn-border-radius-base; 181 | @include border-top-radius(0); 182 | } 183 | } 184 | .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { 185 | border-radius: 0; 186 | } 187 | .btn-group-vertical > .btn-group:first-child:not(:last-child) { 188 | > .btn:last-child, 189 | > .dropdown-toggle { 190 | @include border-bottom-radius(0); 191 | } 192 | } 193 | .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { 194 | @include border-top-radius(0); 195 | } 196 | 197 | 198 | // Justified button groups 199 | // ---------------------- 200 | 201 | .btn-group-justified { 202 | display: table; 203 | width: 100%; 204 | table-layout: fixed; 205 | border-collapse: separate; 206 | > .btn, 207 | > .btn-group { 208 | float: none; 209 | display: table-cell; 210 | width: 1%; 211 | } 212 | > .btn-group .btn { 213 | width: 100%; 214 | } 215 | 216 | > .btn-group .dropdown-menu { 217 | left: auto; 218 | } 219 | } 220 | 221 | 222 | // Checkbox and radio options 223 | // 224 | // In order to support the browser's form validation feedback, powered by the 225 | // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use 226 | // `display: none;` or `visibility: hidden;` as that also hides the popover. 227 | // Simply visually hiding the inputs via `opacity` would leave them clickable in 228 | // certain cases which is prevented by using `clip` and `pointer-events`. 229 | // This way, we ensure a DOM element is visible to position the popover from. 230 | // 231 | // See https://github.com/twbs/bootstrap/pull/12794 and 232 | // https://github.com/twbs/bootstrap/pull/14559 for more information. 233 | 234 | [data-toggle="buttons"] { 235 | > .btn, 236 | > .btn-group > .btn { 237 | input[type="radio"], 238 | input[type="checkbox"] { 239 | position: absolute; 240 | clip: rect(0,0,0,0); 241 | pointer-events: none; 242 | } 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // -------------------------------------------------- 8 | 9 | .btn { 10 | display: inline-block; 11 | margin-bottom: 0; // For input.btn 12 | font-weight: $btn-font-weight; 13 | text-align: center; 14 | vertical-align: middle; 15 | touch-action: manipulation; 16 | cursor: pointer; 17 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 18 | border: 1px solid transparent; 19 | white-space: nowrap; 20 | @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base); 21 | @include user-select(none); 22 | 23 | &, 24 | &:active, 25 | &.active { 26 | &:focus, 27 | &.focus { 28 | @include tab-focus; 29 | } 30 | } 31 | 32 | &:hover, 33 | &:focus, 34 | &.focus { 35 | color: $btn-default-color; 36 | text-decoration: none; 37 | } 38 | 39 | &:active, 40 | &.active { 41 | outline: 0; 42 | background-image: none; 43 | @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); 44 | } 45 | 46 | &.disabled, 47 | &[disabled], 48 | fieldset[disabled] & { 49 | cursor: $cursor-disabled; 50 | @include opacity(.65); 51 | @include box-shadow(none); 52 | } 53 | 54 | // [converter] extracted a& to a.btn 55 | } 56 | 57 | a.btn { 58 | &.disabled, 59 | fieldset[disabled] & { 60 | pointer-events: none; // Future-proof disabling of clicks on `` elements 61 | } 62 | } 63 | 64 | 65 | // Alternate buttons 66 | // -------------------------------------------------- 67 | 68 | .btn-default { 69 | @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); 70 | } 71 | .btn-primary { 72 | @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); 73 | } 74 | // Success appears as green 75 | .btn-success { 76 | @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); 77 | } 78 | // Info appears as blue-green 79 | .btn-info { 80 | @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); 81 | } 82 | // Warning appears as orange 83 | .btn-warning { 84 | @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); 85 | } 86 | // Danger and error appear as red 87 | .btn-danger { 88 | @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); 89 | } 90 | 91 | 92 | // Link buttons 93 | // ------------------------- 94 | 95 | // Make a button look and behave like a link 96 | .btn-link { 97 | color: $link-color; 98 | font-weight: normal; 99 | border-radius: 0; 100 | 101 | &, 102 | &:active, 103 | &.active, 104 | &[disabled], 105 | fieldset[disabled] & { 106 | background-color: transparent; 107 | @include box-shadow(none); 108 | } 109 | &, 110 | &:hover, 111 | &:focus, 112 | &:active { 113 | border-color: transparent; 114 | } 115 | &:hover, 116 | &:focus { 117 | color: $link-hover-color; 118 | text-decoration: $link-hover-decoration; 119 | background-color: transparent; 120 | } 121 | &[disabled], 122 | fieldset[disabled] & { 123 | &:hover, 124 | &:focus { 125 | color: $btn-link-disabled-color; 126 | text-decoration: none; 127 | } 128 | } 129 | } 130 | 131 | 132 | // Button Sizes 133 | // -------------------------------------------------- 134 | 135 | .btn-lg { 136 | // line-height: ensure even-numbered height of button next to large input 137 | @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large); 138 | } 139 | .btn-sm { 140 | // line-height: ensure proper height of button next to small input 141 | @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); 142 | } 143 | .btn-xs { 144 | @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); 145 | } 146 | 147 | 148 | // Block button 149 | // -------------------------------------------------- 150 | 151 | .btn-block { 152 | display: block; 153 | width: 100%; 154 | } 155 | 156 | // Vertically space out multiple block buttons 157 | .btn-block + .btn-block { 158 | margin-top: 5px; 159 | } 160 | 161 | // Specificity overrides 162 | input[type="submit"], 163 | input[type="reset"], 164 | input[type="button"] { 165 | &.btn-block { 166 | width: 100%; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_carousel.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Carousel 3 | // -------------------------------------------------- 4 | 5 | 6 | // Wrapper for the slide container and indicators 7 | .carousel { 8 | position: relative; 9 | } 10 | 11 | .carousel-inner { 12 | position: relative; 13 | overflow: hidden; 14 | width: 100%; 15 | 16 | > .item { 17 | display: none; 18 | position: relative; 19 | @include transition(.6s ease-in-out left); 20 | 21 | // Account for jankitude on images 22 | > img, 23 | > a > img { 24 | @include img-responsive; 25 | line-height: 1; 26 | } 27 | 28 | // WebKit CSS3 transforms for supported devices 29 | @media all and (transform-3d), (-webkit-transform-3d) { 30 | @include transition-transform(0.6s ease-in-out); 31 | @include backface-visibility(hidden); 32 | @include perspective(1000px); 33 | 34 | &.next, 35 | &.active.right { 36 | @include translate3d(100%, 0, 0); 37 | left: 0; 38 | } 39 | &.prev, 40 | &.active.left { 41 | @include translate3d(-100%, 0, 0); 42 | left: 0; 43 | } 44 | &.next.left, 45 | &.prev.right, 46 | &.active { 47 | @include translate3d(0, 0, 0); 48 | left: 0; 49 | } 50 | } 51 | } 52 | 53 | > .active, 54 | > .next, 55 | > .prev { 56 | display: block; 57 | } 58 | 59 | > .active { 60 | left: 0; 61 | } 62 | 63 | > .next, 64 | > .prev { 65 | position: absolute; 66 | top: 0; 67 | width: 100%; 68 | } 69 | 70 | > .next { 71 | left: 100%; 72 | } 73 | > .prev { 74 | left: -100%; 75 | } 76 | > .next.left, 77 | > .prev.right { 78 | left: 0; 79 | } 80 | 81 | > .active.left { 82 | left: -100%; 83 | } 84 | > .active.right { 85 | left: 100%; 86 | } 87 | 88 | } 89 | 90 | // Left/right controls for nav 91 | // --------------------------- 92 | 93 | .carousel-control { 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | bottom: 0; 98 | width: $carousel-control-width; 99 | @include opacity($carousel-control-opacity); 100 | font-size: $carousel-control-font-size; 101 | color: $carousel-control-color; 102 | text-align: center; 103 | text-shadow: $carousel-text-shadow; 104 | // We can't have this transition here because WebKit cancels the carousel 105 | // animation if you trip this while in the middle of another animation. 106 | 107 | // Set gradients for backgrounds 108 | &.left { 109 | @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); 110 | } 111 | &.right { 112 | left: auto; 113 | right: 0; 114 | @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); 115 | } 116 | 117 | // Hover/focus state 118 | &:hover, 119 | &:focus { 120 | outline: 0; 121 | color: $carousel-control-color; 122 | text-decoration: none; 123 | @include opacity(.9); 124 | } 125 | 126 | // Toggles 127 | .icon-prev, 128 | .icon-next, 129 | .glyphicon-chevron-left, 130 | .glyphicon-chevron-right { 131 | position: absolute; 132 | top: 50%; 133 | margin-top: -10px; 134 | z-index: 5; 135 | display: inline-block; 136 | } 137 | .icon-prev, 138 | .glyphicon-chevron-left { 139 | left: 50%; 140 | margin-left: -10px; 141 | } 142 | .icon-next, 143 | .glyphicon-chevron-right { 144 | right: 50%; 145 | margin-right: -10px; 146 | } 147 | .icon-prev, 148 | .icon-next { 149 | width: 20px; 150 | height: 20px; 151 | line-height: 1; 152 | font-family: serif; 153 | } 154 | 155 | 156 | .icon-prev { 157 | &:before { 158 | content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) 159 | } 160 | } 161 | .icon-next { 162 | &:before { 163 | content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) 164 | } 165 | } 166 | } 167 | 168 | // Optional indicator pips 169 | // 170 | // Add an unordered list with the following class and add a list item for each 171 | // slide your carousel holds. 172 | 173 | .carousel-indicators { 174 | position: absolute; 175 | bottom: 10px; 176 | left: 50%; 177 | z-index: 15; 178 | width: 60%; 179 | margin-left: -30%; 180 | padding-left: 0; 181 | list-style: none; 182 | text-align: center; 183 | 184 | li { 185 | display: inline-block; 186 | width: 10px; 187 | height: 10px; 188 | margin: 1px; 189 | text-indent: -999px; 190 | border: 1px solid $carousel-indicator-border-color; 191 | border-radius: 10px; 192 | cursor: pointer; 193 | 194 | // IE8-9 hack for event handling 195 | // 196 | // Internet Explorer 8-9 does not support clicks on elements without a set 197 | // `background-color`. We cannot use `filter` since that's not viewed as a 198 | // background color by the browser. Thus, a hack is needed. 199 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer 200 | // 201 | // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we 202 | // set alpha transparency for the best results possible. 203 | background-color: #000 \9; // IE8 204 | background-color: rgba(0,0,0,0); // IE9 205 | } 206 | .active { 207 | margin: 0; 208 | width: 12px; 209 | height: 12px; 210 | background-color: $carousel-indicator-active-bg; 211 | } 212 | } 213 | 214 | // Optional captions 215 | // ----------------------------- 216 | // Hidden by default for smaller viewports 217 | .carousel-caption { 218 | position: absolute; 219 | left: 15%; 220 | right: 15%; 221 | bottom: 20px; 222 | z-index: 10; 223 | padding-top: 20px; 224 | padding-bottom: 20px; 225 | color: $carousel-caption-color; 226 | text-align: center; 227 | text-shadow: $carousel-text-shadow; 228 | & .btn { 229 | text-shadow: none; // No shadow for button elements in carousel-caption 230 | } 231 | } 232 | 233 | 234 | // Scale up controls for tablets and up 235 | @media screen and (min-width: $screen-sm-min) { 236 | 237 | // Scale up the controls a smidge 238 | .carousel-control { 239 | .glyphicon-chevron-left, 240 | .glyphicon-chevron-right, 241 | .icon-prev, 242 | .icon-next { 243 | width: 30px; 244 | height: 30px; 245 | margin-top: -15px; 246 | font-size: 30px; 247 | } 248 | .glyphicon-chevron-left, 249 | .icon-prev { 250 | margin-left: -15px; 251 | } 252 | .glyphicon-chevron-right, 253 | .icon-next { 254 | margin-right: -15px; 255 | } 256 | } 257 | 258 | // Show and left align the captions 259 | .carousel-caption { 260 | left: 20%; 261 | right: 20%; 262 | padding-bottom: 30px; 263 | } 264 | 265 | // Move up the indicators 266 | .carousel-indicators { 267 | bottom: 20px; 268 | } 269 | } 270 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: ($font-size-base * 1.5); 9 | font-weight: $close-font-weight; 10 | line-height: 1; 11 | color: $close-color; 12 | text-shadow: $close-text-shadow; 13 | @include opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: $close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | @include opacity(.5); 21 | } 22 | 23 | // [converter] extracted button& to button.close 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 30 | button.close { 31 | padding: 0; 32 | cursor: pointer; 33 | background: transparent; 34 | border: 0; 35 | -webkit-appearance: none; 36 | } 37 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: $code-color; 19 | background-color: $code-bg; 20 | border-radius: $border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: $kbd-color; 28 | background-color: $kbd-bg; 29 | border-radius: $border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | 32 | kbd { 33 | padding: 0; 34 | font-size: 100%; 35 | font-weight: bold; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | // Blocks of code 41 | pre { 42 | display: block; 43 | padding: (($line-height-computed - 1) / 2); 44 | margin: 0 0 ($line-height-computed / 2); 45 | font-size: ($font-size-base - 1); // 14px to 13px 46 | line-height: $line-height-base; 47 | word-break: break-all; 48 | word-wrap: break-word; 49 | color: $pre-color; 50 | background-color: $pre-bg; 51 | border: 1px solid $pre-border-color; 52 | border-radius: $border-radius-base; 53 | 54 | // Account for some code outputs that place code tags in pre tags 55 | code { 56 | padding: 0; 57 | font-size: inherit; 58 | color: inherit; 59 | white-space: pre-wrap; 60 | background-color: transparent; 61 | border-radius: 0; 62 | } 63 | } 64 | 65 | // Enable scrollable blocks of code 66 | .pre-scrollable { 67 | max-height: $pre-scrollable-max-height; 68 | overflow-y: scroll; 69 | } 70 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | @include transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | 21 | &.in { display: block; } 22 | // [converter] extracted tr&.in to tr.collapse.in 23 | // [converter] extracted tbody&.in to tbody.collapse.in 24 | } 25 | 26 | tr.collapse.in { display: table-row; } 27 | 28 | tbody.collapse.in { display: table-row-group; } 29 | 30 | .collapsing { 31 | position: relative; 32 | height: 0; 33 | overflow: hidden; 34 | @include transition-property(height, visibility); 35 | @include transition-duration(.35s); 36 | @include transition-timing-function(ease); 37 | } 38 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_dropdowns.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Dropdown menus 3 | // -------------------------------------------------- 4 | 5 | 6 | // Dropdown arrow/caret 7 | .caret { 8 | display: inline-block; 9 | width: 0; 10 | height: 0; 11 | margin-left: 2px; 12 | vertical-align: middle; 13 | border-top: $caret-width-base dashed; 14 | border-top: $caret-width-base solid \9; // IE8 15 | border-right: $caret-width-base solid transparent; 16 | border-left: $caret-width-base solid transparent; 17 | } 18 | 19 | // The dropdown wrapper (div) 20 | .dropup, 21 | .dropdown { 22 | position: relative; 23 | } 24 | 25 | // Prevent the focus on the dropdown toggle when closing dropdowns 26 | .dropdown-toggle:focus { 27 | outline: 0; 28 | } 29 | 30 | // The dropdown menu (ul) 31 | .dropdown-menu { 32 | position: absolute; 33 | top: 100%; 34 | left: 0; 35 | z-index: $zindex-dropdown; 36 | display: none; // none by default, but block on "open" of the menu 37 | float: left; 38 | min-width: 160px; 39 | padding: 5px 0; 40 | margin: 2px 0 0; // override default ul 41 | list-style: none; 42 | font-size: $font-size-base; 43 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) 44 | background-color: $dropdown-bg; 45 | border: 1px solid $dropdown-fallback-border; // IE8 fallback 46 | border: 1px solid $dropdown-border; 47 | border-radius: $border-radius-base; 48 | @include box-shadow(0 6px 12px rgba(0,0,0,.175)); 49 | background-clip: padding-box; 50 | 51 | // Aligns the dropdown menu to right 52 | // 53 | // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` 54 | &.pull-right { 55 | right: 0; 56 | left: auto; 57 | } 58 | 59 | // Dividers (basically an hr) within the dropdown 60 | .divider { 61 | @include nav-divider($dropdown-divider-bg); 62 | } 63 | 64 | // Links within the dropdown menu 65 | > li > a { 66 | display: block; 67 | padding: 3px 20px; 68 | clear: both; 69 | font-weight: normal; 70 | line-height: $line-height-base; 71 | color: $dropdown-link-color; 72 | white-space: nowrap; // prevent links from randomly breaking onto new lines 73 | } 74 | } 75 | 76 | // Hover/Focus state 77 | .dropdown-menu > li > a { 78 | &:hover, 79 | &:focus { 80 | text-decoration: none; 81 | color: $dropdown-link-hover-color; 82 | background-color: $dropdown-link-hover-bg; 83 | } 84 | } 85 | 86 | // Active state 87 | .dropdown-menu > .active > a { 88 | &, 89 | &:hover, 90 | &:focus { 91 | color: $dropdown-link-active-color; 92 | text-decoration: none; 93 | outline: 0; 94 | background-color: $dropdown-link-active-bg; 95 | } 96 | } 97 | 98 | // Disabled state 99 | // 100 | // Gray out text and ensure the hover/focus state remains gray 101 | 102 | .dropdown-menu > .disabled > a { 103 | &, 104 | &:hover, 105 | &:focus { 106 | color: $dropdown-link-disabled-color; 107 | } 108 | 109 | // Nuke hover/focus effects 110 | &:hover, 111 | &:focus { 112 | text-decoration: none; 113 | background-color: transparent; 114 | background-image: none; // Remove CSS gradient 115 | @include reset-filter; 116 | cursor: $cursor-disabled; 117 | } 118 | } 119 | 120 | // Open state for the dropdown 121 | .open { 122 | // Show the menu 123 | > .dropdown-menu { 124 | display: block; 125 | } 126 | 127 | // Remove the outline when :focus is triggered 128 | > a { 129 | outline: 0; 130 | } 131 | } 132 | 133 | // Menu positioning 134 | // 135 | // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown 136 | // menu with the parent. 137 | .dropdown-menu-right { 138 | left: auto; // Reset the default from `.dropdown-menu` 139 | right: 0; 140 | } 141 | // With v3, we enabled auto-flipping if you have a dropdown within a right 142 | // aligned nav component. To enable the undoing of that, we provide an override 143 | // to restore the default dropdown menu alignment. 144 | // 145 | // This is only for left-aligning a dropdown menu within a `.navbar-right` or 146 | // `.pull-right` nav component. 147 | .dropdown-menu-left { 148 | left: 0; 149 | right: auto; 150 | } 151 | 152 | // Dropdown section headers 153 | .dropdown-header { 154 | display: block; 155 | padding: 3px 20px; 156 | font-size: $font-size-small; 157 | line-height: $line-height-base; 158 | color: $dropdown-header-color; 159 | white-space: nowrap; // as with > li > a 160 | } 161 | 162 | // Backdrop to catch body clicks on mobile, etc. 163 | .dropdown-backdrop { 164 | position: fixed; 165 | left: 0; 166 | right: 0; 167 | bottom: 0; 168 | top: 0; 169 | z-index: ($zindex-dropdown - 10); 170 | } 171 | 172 | // Right aligned dropdowns 173 | .pull-right > .dropdown-menu { 174 | right: 0; 175 | left: auto; 176 | } 177 | 178 | // Allow for dropdowns to go bottom up (aka, dropup-menu) 179 | // 180 | // Just add .dropup after the standard .dropdown class and you're set, bro. 181 | // TODO: abstract this so that the navbar fixed styles are not placed here? 182 | 183 | .dropup, 184 | .navbar-fixed-bottom .dropdown { 185 | // Reverse the caret 186 | .caret { 187 | border-top: 0; 188 | border-bottom: $caret-width-base dashed; 189 | border-bottom: $caret-width-base solid \9; // IE8 190 | content: ""; 191 | } 192 | // Different positioning for bottom up menu 193 | .dropdown-menu { 194 | top: auto; 195 | bottom: 100%; 196 | margin-bottom: 2px; 197 | } 198 | } 199 | 200 | 201 | // Component alignment 202 | // 203 | // Reiterate per navbar.less and the modified component alignment there. 204 | 205 | @media (min-width: $grid-float-breakpoint) { 206 | .navbar-right { 207 | .dropdown-menu { 208 | right: 0; left: auto; 209 | } 210 | // Necessary for overrides of the default right aligned menu. 211 | // Will remove come v4 in all likelihood. 212 | .dropdown-menu-left { 213 | left: 0; right: auto; 214 | } 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | @include container-fixed; 12 | 13 | @media (min-width: $screen-sm-min) { 14 | width: $container-sm; 15 | } 16 | @media (min-width: $screen-md-min) { 17 | width: $container-md; 18 | } 19 | @media (min-width: $screen-lg-min) { 20 | width: $container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | @include container-fixed; 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | @include make-row; 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | @include make-grid-columns; 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | @include make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: $screen-sm-min) { 65 | @include make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: $screen-md-min) { 74 | @include make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: $screen-lg-min) { 83 | @include make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_input-groups.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Input groups 3 | // -------------------------------------------------- 4 | 5 | // Base styles 6 | // ------------------------- 7 | .input-group { 8 | position: relative; // For dropdowns 9 | display: table; 10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table 11 | 12 | // Undo padding and float of grid classes 13 | &[class*="col-"] { 14 | float: none; 15 | padding-left: 0; 16 | padding-right: 0; 17 | } 18 | 19 | .form-control { 20 | // Ensure that the input is always above the *appended* addon button for 21 | // proper border colors. 22 | position: relative; 23 | z-index: 2; 24 | 25 | // IE9 fubars the placeholder attribute in text inputs and the arrows on 26 | // select elements in input groups. To fix it, we float the input. Details: 27 | // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 28 | float: left; 29 | 30 | width: 100%; 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | // Sizing options 36 | // 37 | // Remix the default form control sizing classes into new ones for easier 38 | // manipulation. 39 | 40 | .input-group-lg > .form-control, 41 | .input-group-lg > .input-group-addon, 42 | .input-group-lg > .input-group-btn > .btn { 43 | @extend .input-lg; 44 | } 45 | .input-group-sm > .form-control, 46 | .input-group-sm > .input-group-addon, 47 | .input-group-sm > .input-group-btn > .btn { 48 | @extend .input-sm; 49 | } 50 | 51 | 52 | // Display as table-cell 53 | // ------------------------- 54 | .input-group-addon, 55 | .input-group-btn, 56 | .input-group .form-control { 57 | display: table-cell; 58 | 59 | &:not(:first-child):not(:last-child) { 60 | border-radius: 0; 61 | } 62 | } 63 | // Addon and addon wrapper for buttons 64 | .input-group-addon, 65 | .input-group-btn { 66 | width: 1%; 67 | white-space: nowrap; 68 | vertical-align: middle; // Match the inputs 69 | } 70 | 71 | // Text input groups 72 | // ------------------------- 73 | .input-group-addon { 74 | padding: $padding-base-vertical $padding-base-horizontal; 75 | font-size: $font-size-base; 76 | font-weight: normal; 77 | line-height: 1; 78 | color: $input-color; 79 | text-align: center; 80 | background-color: $input-group-addon-bg; 81 | border: 1px solid $input-group-addon-border-color; 82 | border-radius: $border-radius-base; 83 | 84 | // Sizing 85 | &.input-sm { 86 | padding: $padding-small-vertical $padding-small-horizontal; 87 | font-size: $font-size-small; 88 | border-radius: $border-radius-small; 89 | } 90 | &.input-lg { 91 | padding: $padding-large-vertical $padding-large-horizontal; 92 | font-size: $font-size-large; 93 | border-radius: $border-radius-large; 94 | } 95 | 96 | // Nuke default margins from checkboxes and radios to vertically center within. 97 | input[type="radio"], 98 | input[type="checkbox"] { 99 | margin-top: 0; 100 | } 101 | } 102 | 103 | // Reset rounded corners 104 | .input-group .form-control:first-child, 105 | .input-group-addon:first-child, 106 | .input-group-btn:first-child > .btn, 107 | .input-group-btn:first-child > .btn-group > .btn, 108 | .input-group-btn:first-child > .dropdown-toggle, 109 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 110 | .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { 111 | @include border-right-radius(0); 112 | } 113 | .input-group-addon:first-child { 114 | border-right: 0; 115 | } 116 | .input-group .form-control:last-child, 117 | .input-group-addon:last-child, 118 | .input-group-btn:last-child > .btn, 119 | .input-group-btn:last-child > .btn-group > .btn, 120 | .input-group-btn:last-child > .dropdown-toggle, 121 | .input-group-btn:first-child > .btn:not(:first-child), 122 | .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { 123 | @include border-left-radius(0); 124 | } 125 | .input-group-addon:last-child { 126 | border-left: 0; 127 | } 128 | 129 | // Button input groups 130 | // ------------------------- 131 | .input-group-btn { 132 | position: relative; 133 | // Jankily prevent input button groups from wrapping with `white-space` and 134 | // `font-size` in combination with `inline-block` on buttons. 135 | font-size: 0; 136 | white-space: nowrap; 137 | 138 | // Negative margin for spacing, position for bringing hovered/focused/actived 139 | // element above the siblings. 140 | > .btn { 141 | position: relative; 142 | + .btn { 143 | margin-left: -1px; 144 | } 145 | // Bring the "active" button to the front 146 | &:hover, 147 | &:focus, 148 | &:active { 149 | z-index: 2; 150 | } 151 | } 152 | 153 | // Negative margin to only have a 1px border between the two 154 | &:first-child { 155 | > .btn, 156 | > .btn-group { 157 | margin-right: -1px; 158 | } 159 | } 160 | &:last-child { 161 | > .btn, 162 | > .btn-group { 163 | z-index: 2; 164 | margin-left: -1px; 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding-top: $jumbotron-padding; 8 | padding-bottom: $jumbotron-padding; 9 | margin-bottom: $jumbotron-padding; 10 | color: $jumbotron-color; 11 | background-color: $jumbotron-bg; 12 | 13 | h1, 14 | .h1 { 15 | color: $jumbotron-heading-color; 16 | } 17 | 18 | p { 19 | margin-bottom: ($jumbotron-padding / 2); 20 | font-size: $jumbotron-font-size; 21 | font-weight: 200; 22 | } 23 | 24 | > hr { 25 | border-top-color: darken($jumbotron-bg, 10%); 26 | } 27 | 28 | .container &, 29 | .container-fluid & { 30 | border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container 31 | } 32 | 33 | .container { 34 | max-width: 100%; 35 | } 36 | 37 | @media screen and (min-width: $screen-sm-min) { 38 | padding-top: ($jumbotron-padding * 1.6); 39 | padding-bottom: ($jumbotron-padding * 1.6); 40 | 41 | .container &, 42 | .container-fluid & { 43 | padding-left: ($jumbotron-padding * 2); 44 | padding-right: ($jumbotron-padding * 2); 45 | } 46 | 47 | h1, 48 | .h1 { 49 | font-size: $jumbotron-heading-font-size; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: $label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // [converter] extracted a& to a.label 18 | 19 | // Empty labels collapse automatically (not available in IE8) 20 | &:empty { 21 | display: none; 22 | } 23 | 24 | // Quick fix for labels in buttons 25 | .btn & { 26 | position: relative; 27 | top: -1px; 28 | } 29 | } 30 | 31 | // Add hover effects, but only for links 32 | a.label { 33 | &:hover, 34 | &:focus { 35 | color: $label-link-hover-color; 36 | text-decoration: none; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | // Colors 42 | // Contextual variations (linked labels get darker on :hover) 43 | 44 | .label-default { 45 | @include label-variant($label-default-bg); 46 | } 47 | 48 | .label-primary { 49 | @include label-variant($label-primary-bg); 50 | } 51 | 52 | .label-success { 53 | @include label-variant($label-success-bg); 54 | } 55 | 56 | .label-info { 57 | @include label-variant($label-info-bg); 58 | } 59 | 60 | .label-warning { 61 | @include label-variant($label-warning-bg); 62 | } 63 | 64 | .label-danger { 65 | @include label-variant($label-danger-bg); 66 | } 67 | -------------------------------------------------------------------------------- /css/sass/supporting/bootstrap/_list-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // List groups 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | // 8 | // Easily usable on