├── .env ├── source ├── stylesheets │ ├── gulpfile.js │ ├── _card.scss │ ├── all.scss │ └── helpers │ │ └── _variables.scss ├── images │ ├── favicon.ico │ ├── es6.svg │ ├── github-icon-1.svg │ ├── sass-1.svg │ └── gulp-w.svg ├── partials │ ├── _footer.jade │ ├── _scripts.jade │ └── _navbar.jade ├── javascripts │ ├── all.js │ └── _helpers.js ├── data │ └── menu.json ├── _layout.jade ├── login.jade ├── kh.jade └── index.jade ├── .gitignore ├── README.md ├── bower.json ├── package.json └── gulpfile.js /.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=production -------------------------------------------------------------------------------- /source/stylesheets/gulpfile.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | public 4 | bower_components 5 | package-lock.json 6 | .tmp -------------------------------------------------------------------------------- /source/stylesheets/_card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | display: block; 3 | transform: translateX(20px); 4 | } -------------------------------------------------------------------------------- /source/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hexschool/gulp-demo/HEAD/source/images/favicon.ico -------------------------------------------------------------------------------- /source/partials/_footer.jade: -------------------------------------------------------------------------------- 1 | 2 | .py-3.mt-5.bg-faded 3 | .container 4 | .text-center 5 | | Gulp 範例網頁 6 | -------------------------------------------------------------------------------- /source/stylesheets/all.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | @import "functions"; 4 | @import "helpers/variables"; 5 | @import "bootstrap"; -------------------------------------------------------------------------------- /source/javascripts/all.js: -------------------------------------------------------------------------------- 1 | console.log(`return ${helpers.getQuery()}`); 2 | console.log(`return ${helpers.getQuery()} line 2`); 3 | // ES6 範例程式碼 4 | -------------------------------------------------------------------------------- /source/javascripts/_helpers.js: -------------------------------------------------------------------------------- 1 | const helpers = { 2 | getQuery: ()=> { 3 | console.log('getQuery'); 4 | return 'getQuery'; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /source/partials/_scripts.jade: -------------------------------------------------------------------------------- 1 | script(src="javascripts/vendor.js?#{new Date().getTime()}") 2 | script(src="javascripts/all.js?#{new Date().getTime()}") -------------------------------------------------------------------------------- /source/data/menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "list": [{ 3 | "name": "範例頁面", 4 | "url": "index.html" 5 | }, 6 | { 7 | "name": "高雄旅遊網靜態頁面", 8 | "url": "kh.html" 9 | }] 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 六角學院 Gulp 範例 2 | 3 | ## 安裝環境 4 | 5 | 本範例是使用 `gulp 3.9.1`，另有使用 Bower 載入前端套件。 6 | 7 | ``` 8 | npm install gulp -g 9 | npm install bower -g 10 | ``` 11 | 12 | ## 執行 13 | 14 | 請依序執行以下指令來執行 gulp。 15 | 16 | ``` 17 | npm install 18 | bower install 19 | gulp 20 | ``` 21 | 22 | [範例網站](https://hexschool.github.io/gulp-demo/)。 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-demo", 3 | "description": "", 4 | "main": "index.js", 5 | "authors": [ 6 | "wcc723 " 7 | ], 8 | "license": "ISC", 9 | "homepage": "", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "jquery": "^3.2.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /source/_layout.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title 六角學院 gulp 範例頁面 5 | meta(name="viewport" content="width=device-width, initial-scale=1") 6 | link(href="images/favicon.ico" rel="shortcut icon") 7 | meta(charset="UTF-8") 8 | link(rel="stylesheet", href="stylesheets/all.css") 9 | body 10 | block navbar 11 | 12 | block content 13 | include partials/_footer.jade 14 | include partials/_scripts.jade 15 | 16 | -------------------------------------------------------------------------------- /source/partials/_navbar.jade: -------------------------------------------------------------------------------- 1 | mixin link(href, name) 2 | if (path == href) 3 | li.nav-item.active: a.nav-link(href="#{href}") 4 | | #{name} 5 | else 6 | li.nav-item: a.nav-link(href="#{href}") 7 | | #{name} 8 | 9 | nav.navbar.navbar-expand-lg.navbar-light.bg-light 10 | a.navbar-brand(href='index.html') 靜態範例頁面 11 | button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") 12 | span.navbar-toggler-icon 13 | #navbarSupportedContent.collapse.navbar-collapse 14 | ul.navbar-nav.mr-auto 15 | each item, i in menus.list 16 | +link(item.url, item.name) 17 | 18 | a(href="/login.html").btn.btn-outline-success.pull-right 登入 19 | -------------------------------------------------------------------------------- /source/login.jade: -------------------------------------------------------------------------------- 1 | 2 | extends ./_layout.jade 3 | 4 | block navbar 5 | - var path = 'login.html' 6 | include partials/_navbar.jade 7 | 8 | block content 9 | .container.mt-3 10 | .row 11 | .col-sm-6.offset-sm-3 12 | .card 13 | .card-block 14 | h2.text-center 15 | | 登入 16 | small 示範頁面 17 | .form-group 18 | label(for='exampleInputEmail1') Email address 19 | input#exampleInputEmail1.form-control(type='email', aria-describedby='emailHelp', placeholder='Enter email') 20 | small#emailHelp.form-text.text-muted We'll never share your email with anyone else. 21 | .form-group 22 | label(for='exampleInputPassword1') Password 23 | input#exampleInputPassword1.form-control(type='password', placeholder='Password') 24 | .card-block.text-right 25 | a.btn.btn-link(href="#") 取消 26 | a.btn.btn-primary(href="#") 登入 27 | 28 | -------------------------------------------------------------------------------- /source/kh.jade: -------------------------------------------------------------------------------- 1 | 2 | extends ./_layout.jade 3 | 4 | block navbar 5 | - var path = 'kh.html' 6 | include partials/_navbar.jade 7 | 8 | block content 9 | .container.mt-3 10 | .row.py-5 11 | .col-sm-6.offset-sm-3 12 | p.text-muted.text-center 此範例頁面是由 JSON 資料格式快速產生 13 | .row 14 | .col-sm-3 15 | ul.list-group 16 | li.list-group-item.active 前 20 筆高雄旅遊網資訊 17 | li.list-group-item 未啟用選項 18 | li.list-group-item 未啟用選項 19 | li.list-group-item 未啟用選項 20 | li.list-group-item 未啟用選項 21 | 22 | .col-sm-9 23 | .card-columns 24 | each item, i in data.result.records 25 | if (i < 20) 26 | .card 27 | img.card-img-top.img-fluid(src='#{item.Picture1}', alt='Card image cap') 28 | .card-body 29 | h4.card-title #{item.Name} 30 | p.card-text 31 | | #{item.Add} 32 | p.card-text 33 | | #{item.Opentime} 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "autoprefixer": "^6.7.7", 13 | "babel-preset-es2015": "^6.24.1", 14 | "babelify": "^7.3.0", 15 | "bootstrap": "4.0.0", 16 | "browser-sync": "^2.18.8", 17 | "gulp": "3.9.1", 18 | "gulp-babel": "^6.1.2", 19 | "gulp-browserify": "^0.5.1", 20 | "gulp-clean": "^0.3.2", 21 | "gulp-concat": "^2.6.1", 22 | "gulp-data": "^1.2.1", 23 | "gulp-gh-pages": "^0.5.4", 24 | "gulp-if": "^2.0.2", 25 | "gulp-imagemin": "^3.2.0", 26 | "gulp-jade": "^1.1.0", 27 | "gulp-load-plugins": "^1.5.0", 28 | "gulp-minify-css": "^1.2.4", 29 | "gulp-order": "^1.1.1", 30 | "gulp-plumber": "^1.1.0", 31 | "gulp-postcss": "^6.4.0", 32 | "gulp-sass": "^3.1.0", 33 | "gulp-sequence": "^0.4.6", 34 | "gulp-sourcemaps": "^2.6.0", 35 | "gulp-uglify": "^2.1.2", 36 | "lodash": "^4.17.4", 37 | "main-bower-files": "^2.13.1", 38 | "minimist": "^1.2.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /source/images/es6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/index.jade: -------------------------------------------------------------------------------- 1 | 2 | extends ./_layout.jade 3 | 4 | block navbar 5 | - var path = 'index.html' 6 | include partials/_navbar.jade 7 | 8 | block content 9 | .bg-primary.py-5 10 | .container.my-5 11 | .text-center.mb-4 12 | img.img-fluid(src="images/gulp-w.svg", alt="", width="100") 13 | h1.text-center.text-white 14 | | 六角學院 15 | br.hidden-sm-up 16 | | Gulp 教學範例頁面 17 | section.container.my-5 18 | h2.text-center.mb-5 19 | | 課程特色 20 | .row 21 | .col-sm-4 22 | .text-center 23 | img(src="images/github-icon-1.svg", alt="" height="100") 24 | h3.text-center.mt-4 課程範例開源 25 | p 本次課程範例都在 Github 上，且會持續更新，另外還提供 Github Page 快速部屬案例給同學參考！ 26 | .col-sm-4 27 | .text-center 28 | img(src="images/sass-1.svg", alt="" height="100") 29 | h3.text-center.mt-4 包含主流開發套件 30 | p 課程中將會介紹如何建立 Sass、PostCSS、ES6 等等開發環境，讓同學自己的環境自己來打造。 31 | .col-sm-4 32 | .text-center 33 | img(src="images/es6.svg", alt="" height="100") 34 | h3.text-center.mt-4 ES6 課程已加入 35 | p 在 JavaScript 課程中，我們加入 ES6 的基本使用概念，讓同學輕鬆入門 ES6 不落人後 36 | section.container.py-5 37 | .text-center 38 | a.btn.btn-danger(href="https://courses.hexschool.com/p/gulp") 開始學習 Gulp 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /source/images/github-icon-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/images/sass-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /source/images/gulp-w.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 2 | const gulp = require('gulp'); 3 | const $ = require('gulp-load-plugins')(); 4 | const mainBowerFiles = require('main-bower-files'); 5 | const browserSync = require('browser-sync'); 6 | const autoprefixer = require('autoprefixer'); 7 | const minimist = require('minimist'); // 用來讀取指令轉成變數 8 | const gulpSequence = require('gulp-sequence').use(gulp); 9 | 10 | // production || development 11 | // # gulp --env production 12 | const envOptions = { 13 | string: 'env', 14 | default: { env: 'development' } 15 | }; 16 | const options = minimist(process.argv.slice(2), envOptions); 17 | console.log(options); 18 | 19 | gulp.task('clean', () => { 20 | return gulp.src(['./public', './.tmp'], { read: false }) // 選項讀取：false阻止gulp讀取文件的內容，使此任務更快。 21 | .pipe($.clean()); 22 | }); 23 | 24 | gulp.task('jade', () => { 25 | return gulp.src(['./source/**/!(_)*.jade']) 26 | .pipe($.plumber()) 27 | .pipe($.data(function (file) { 28 | var json = require('./source/data/data.json'); 29 | var menus = require('./source/data/menu.json'); 30 | var source = { 31 | data: json, 32 | menus: menus 33 | } 34 | return source; 35 | })) 36 | .pipe($.jade({ pretty: true })) 37 | .pipe(gulp.dest('./public')) 38 | .pipe(browserSync.reload({ 39 | stream: true, 40 | })); 41 | }); 42 | 43 | gulp.task('babel', function () { 44 | return gulp.src(['./source/javascripts/**/*.js']) 45 | .pipe($.plumber()) 46 | .pipe($.sourcemaps.init()) 47 | .pipe($.concat('all.js')) 48 | .pipe($.babel({ 49 | presets: ['es2015'] 50 | })) 51 | .pipe( 52 | $.if(options.env === 'production', $.uglify({ 53 | compress: { 54 | drop_console: true 55 | } 56 | }) 57 | ) 58 | ) 59 | .pipe($.sourcemaps.write('.')) 60 | .pipe(gulp.dest('./public/javascripts')) 61 | .pipe(browserSync.reload({ 62 | stream: true 63 | })); 64 | }); 65 | 66 | gulp.task('bower', function () { 67 | return gulp.src(mainBowerFiles()) 68 | .pipe(gulp.dest('./.tmp/vendors')); 69 | cb(err); 70 | }); 71 | gulp.task('vendorJs', ['bower'], function () { 72 | return gulp.src([ 73 | './.tmp/vendors/**/**.js', 74 | './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js' 75 | ]) 76 | .pipe($.order([ 77 | 'jquery.js' 78 | ])) 79 | .pipe($.concat('vendor.js')) 80 | .pipe($.if(options.env === 'production', $.uglify())) 81 | .pipe(gulp.dest('./public/javascripts')) 82 | }) 83 | 84 | gulp.task('sass', function () { 85 | // PostCSS AutoPrefixer 86 | var processors = [ 87 | autoprefixer({ 88 | browsers: ['last 5 version'], 89 | }) 90 | ]; 91 | 92 | return gulp.src(['./source/stylesheets/**/*.sass', './source/stylesheets/**/*.scss']) 93 | .pipe($.plumber()) 94 | .pipe($.sourcemaps.init()) 95 | .pipe($.sass({ 96 | outputStyle: 'nested', 97 | includePaths: ['./node_modules/bootstrap/scss'] 98 | }) 99 | .on('error', $.sass.logError)) 100 | .pipe($.postcss(processors)) 101 | .pipe($.if(options.env === 'production', $.minifyCss())) // 假設開發環境則壓縮 CSS 102 | .pipe($.sourcemaps.write('.')) 103 | .pipe(gulp.dest('./public/stylesheets')) 104 | .pipe(browserSync.reload({ 105 | stream: true 106 | })); 107 | }); 108 | 109 | gulp.task('imageMin', function () { 110 | gulp.src('./source/images/*') 111 | .pipe($.if(options.env === 'production', $.imagemin())) 112 | .pipe(gulp.dest('./public/images')); 113 | }); 114 | 115 | gulp.task('browserSync', function () { 116 | browserSync.init({ 117 | server: { baseDir: './public' }, 118 | reloadDebounce: 2000 119 | }) 120 | }); 121 | 122 | gulp.task('watch', function () { 123 | gulp.watch(['./source/stylesheets/**/*.sass', './source/stylesheets/**/*.scss'], ['sass']); 124 | gulp.watch(['./source/**/*.jade'], ['jade']); 125 | gulp.watch(['./source/javascripts/**/*.js'], ['babel']); 126 | }); 127 | 128 | gulp.task('deploy', function () { 129 | return gulp.src('./public/**/*') 130 | .pipe($.ghPages()); 131 | }); 132 | 133 | gulp.task('sequence', gulpSequence('clean', 'jade', 'sass', 'babel', 'vendorJs', 'imageMin')); 134 | 135 | gulp.task('default', ['jade', 'sass', 'babel', 'vendorJs', 'browserSync', 'imageMin', 'watch']); 136 | gulp.task('build', ['sequence']) 137 | -------------------------------------------------------------------------------- /source/stylesheets/helpers/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | // 3 | // Variables should follow the `$component-state-property-size` formula for 4 | // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. 5 | 6 | 7 | // 8 | // Color system 9 | // 10 | 11 | // stylelint-disable 12 | $white: #fff !default; 13 | $gray-100: #f8f9fa !default; 14 | $gray-200: #e9ecef !default; 15 | $gray-300: #dee2e6 !default; 16 | $gray-400: #ced4da !default; 17 | $gray-500: #adb5bd !default; 18 | $gray-600: #6c757d !default; 19 | $gray-700: #495057 !default; 20 | $gray-800: #343a40 !default; 21 | $gray-900: #212529 !default; 22 | $black: #000 !default; 23 | 24 | $grays: () !default; 25 | $grays: map-merge(( 26 | "100": $gray-100, 27 | "200": $gray-200, 28 | "300": $gray-300, 29 | "400": $gray-400, 30 | "500": $gray-500, 31 | "600": $gray-600, 32 | "700": $gray-700, 33 | "800": $gray-800, 34 | "900": $gray-900 35 | ), $grays); 36 | 37 | $blue: #007bff !default; 38 | $indigo: #6610f2 !default; 39 | $purple: #6f42c1 !default; 40 | $pink: #e83e8c !default; 41 | $red: #dc3545 !default; 42 | $orange: #fd7e14 !default; 43 | $yellow: #ffc107 !default; 44 | $green: #28a745 !default; 45 | $teal: #20c997 !default; 46 | $cyan: #17a2b8 !default; 47 | 48 | $colors: () !default; 49 | $colors: map-merge(( 50 | "blue": $blue, 51 | "indigo": $indigo, 52 | "purple": $purple, 53 | "pink": $pink, 54 | "red": $red, 55 | "orange": $orange, 56 | "yellow": $yellow, 57 | "green": $green, 58 | "teal": $teal, 59 | "cyan": $cyan, 60 | "white": $white, 61 | "gray": $gray-600, 62 | "gray-dark": $gray-800 63 | ), $colors); 64 | 65 | $primary: $blue !default; 66 | $secondary: $gray-600 !default; 67 | $success: $green !default; 68 | $info: $cyan !default; 69 | $warning: $yellow !default; 70 | $danger: $red !default; 71 | $light: $gray-100 !default; 72 | $dark: $gray-800 !default; 73 | 74 | $theme-colors: () !default; 75 | $theme-colors: map-merge(( 76 | "primary": #00cc99, 77 | "secondary": $secondary, 78 | "success": $success, 79 | "info": $info, 80 | "warning": $warning, 81 | "danger": $danger, 82 | "light": $light, 83 | "dark": $dark 84 | ), $theme-colors); 85 | // stylelint-enable 86 | 87 | // Set a specific jump point for requesting color jumps 88 | $theme-color-interval: 8% !default; 89 | 90 | // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. 91 | $yiq-contrasted-threshold: 150 !default; 92 | 93 | // Customize the light and dark text colors for use in our YIQ color contrast function. 94 | $yiq-text-dark: $gray-900 !default; 95 | $yiq-text-light: $white !default; 96 | 97 | // Options 98 | // 99 | // Quickly modify global styling by enabling or disabling optional features. 100 | 101 | $enable-caret: true !default; 102 | $enable-rounded: true !default; 103 | $enable-shadows: false !default; 104 | $enable-gradients: false !default; 105 | $enable-transitions: true !default; 106 | $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS 107 | $enable-grid-classes: true !default; 108 | $enable-print-styles: true !default; 109 | 110 | 111 | // Spacing 112 | // 113 | // Control the default styling of most Bootstrap elements by modifying these 114 | // variables. Mostly focused on spacing. 115 | // You can add more entries to the $spacers map, should you need more variation. 116 | 117 | // stylelint-disable 118 | $spacer: 1rem !default; 119 | $spacers: () !default; 120 | $spacers: map-merge(( 121 | 0: 0, 122 | 1: ($spacer * .25), 123 | 2: ($spacer * .5), 124 | 3: $spacer, 125 | 4: ($spacer * 1.5), 126 | 5: ($spacer * 3) 127 | ), $spacers); 128 | 129 | // This variable affects the `.h-*` and `.w-*` classes. 130 | $sizes: () !default; 131 | $sizes: map-merge(( 132 | 25: 25%, 133 | 50: 50%, 134 | 75: 75%, 135 | 100: 100% 136 | ), $sizes); 137 | // stylelint-enable 138 | 139 | // Body 140 | // 141 | // Settings for the `` element. 142 | 143 | $body-bg: $white !default; 144 | $body-color: $gray-900 !default; 145 | 146 | // Links 147 | // 148 | // Style anchor elements. 149 | 150 | $link-color: theme-color("primary") !default; 151 | $link-decoration: none !default; 152 | $link-hover-color: darken($link-color, 15%) !default; 153 | $link-hover-decoration: underline !default; 154 | 155 | // Paragraphs 156 | // 157 | // Style p element. 158 | 159 | $paragraph-margin-bottom: 1rem !default; 160 | 161 | 162 | // Grid breakpoints 163 | // 164 | // Define the minimum dimensions at which your layout will change, 165 | // adapting to different screen sizes, for use in media queries. 166 | 167 | $grid-breakpoints: ( 168 | xs: 0, 169 | sm: 576px, 170 | md: 768px, 171 | lg: 992px, 172 | xl: 1200px 173 | ) !default; 174 | 175 | @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); 176 | @include _assert-starts-at-zero($grid-breakpoints); 177 | 178 | 179 | // Grid containers 180 | // 181 | // Define the maximum width of `.container` for different screen sizes. 182 | 183 | $container-max-widths: ( 184 | sm: 540px, 185 | md: 720px, 186 | lg: 960px, 187 | xl: 1140px 188 | ) !default; 189 | 190 | @include _assert-ascending($container-max-widths, "$container-max-widths"); 191 | 192 | 193 | // Grid columns 194 | // 195 | // Set the number of columns and specify the width of the gutters. 196 | 197 | $grid-columns: 12 !default; 198 | $grid-gutter-width: 30px !default; 199 | 200 | // Components 201 | // 202 | // Define common padding and border radius sizes and more. 203 | 204 | $line-height-lg: 1.5 !default; 205 | $line-height-sm: 1.5 !default; 206 | 207 | $border-width: 1px !default; 208 | $border-color: $gray-300 !default; 209 | 210 | $border-radius: .25rem !default; 211 | $border-radius-lg: .3rem !default; 212 | $border-radius-sm: .2rem !default; 213 | 214 | $component-active-color: $white !default; 215 | $component-active-bg: theme-color("primary") !default; 216 | 217 | $caret-width: .3em !default; 218 | 219 | $transition-base: all .2s ease-in-out !default; 220 | $transition-fade: opacity .15s linear !default; 221 | $transition-collapse: height .35s ease !default; 222 | 223 | 224 | // Fonts 225 | // 226 | // Font, line-height, and color for body text, headings, and more. 227 | 228 | // stylelint-disable value-keyword-case 229 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; 230 | $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 231 | $font-family-base: $font-family-sans-serif !default; 232 | // stylelint-enable value-keyword-case 233 | 234 | $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` 235 | $font-size-lg: ($font-size-base * 1.25) !default; 236 | $font-size-sm: ($font-size-base * .875) !default; 237 | 238 | $font-weight-light: 300 !default; 239 | $font-weight-normal: 400 !default; 240 | $font-weight-bold: 700 !default; 241 | 242 | $font-weight-base: $font-weight-normal !default; 243 | $line-height-base: 1.5 !default; 244 | 245 | $h1-font-size: $font-size-base * 2.5 !default; 246 | $h2-font-size: $font-size-base * 2 !default; 247 | $h3-font-size: $font-size-base * 1.75 !default; 248 | $h4-font-size: $font-size-base * 1.5 !default; 249 | $h5-font-size: $font-size-base * 1.25 !default; 250 | $h6-font-size: $font-size-base !default; 251 | 252 | $headings-margin-bottom: ($spacer / 2) !default; 253 | $headings-font-family: inherit !default; 254 | $headings-font-weight: 500 !default; 255 | $headings-line-height: 1.2 !default; 256 | $headings-color: inherit !default; 257 | 258 | $display1-size: 6rem !default; 259 | $display2-size: 5.5rem !default; 260 | $display3-size: 4.5rem !default; 261 | $display4-size: 3.5rem !default; 262 | 263 | $display1-weight: 300 !default; 264 | $display2-weight: 300 !default; 265 | $display3-weight: 300 !default; 266 | $display4-weight: 300 !default; 267 | $display-line-height: $headings-line-height !default; 268 | 269 | $lead-font-size: ($font-size-base * 1.25) !default; 270 | $lead-font-weight: 300 !default; 271 | 272 | $small-font-size: 80% !default; 273 | 274 | $text-muted: $gray-600 !default; 275 | 276 | $blockquote-small-color: $gray-600 !default; 277 | $blockquote-font-size: ($font-size-base * 1.25) !default; 278 | 279 | $hr-border-color: rgba($black, .1) !default; 280 | $hr-border-width: $border-width !default; 281 | 282 | $mark-padding: .2em !default; 283 | 284 | $dt-font-weight: $font-weight-bold !default; 285 | 286 | $kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; 287 | $nested-kbd-font-weight: $font-weight-bold !default; 288 | 289 | $list-inline-padding: .5rem !default; 290 | 291 | $mark-bg: #fcf8e3 !default; 292 | 293 | $hr-margin-y: $spacer !default; 294 | 295 | 296 | // Tables 297 | // 298 | // Customizes the `.table` component with basic values, each used across all table variations. 299 | 300 | $table-cell-padding: .75rem !default; 301 | $table-cell-padding-sm: .3rem !default; 302 | 303 | $table-bg: transparent !default; 304 | $table-accent-bg: rgba($black, .05) !default; 305 | $table-hover-bg: rgba($black, .075) !default; 306 | $table-active-bg: $table-hover-bg !default; 307 | 308 | $table-border-width: $border-width !default; 309 | $table-border-color: $gray-300 !default; 310 | 311 | $table-head-bg: $gray-200 !default; 312 | $table-head-color: $gray-700 !default; 313 | 314 | $table-dark-bg: $gray-900 !default; 315 | $table-dark-accent-bg: rgba($white, .05) !default; 316 | $table-dark-hover-bg: rgba($white, .075) !default; 317 | $table-dark-border-color: lighten($gray-900, 7.5%) !default; 318 | $table-dark-color: $body-bg !default; 319 | 320 | 321 | // Buttons + Forms 322 | // 323 | // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. 324 | 325 | $input-btn-padding-y: .375rem !default; 326 | $input-btn-padding-x: .75rem !default; 327 | $input-btn-line-height: $line-height-base !default; 328 | 329 | $input-btn-focus-width: .2rem !default; 330 | $input-btn-focus-color: rgba($component-active-bg, .25) !default; 331 | $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; 332 | 333 | $input-btn-padding-y-sm: .25rem !default; 334 | $input-btn-padding-x-sm: .5rem !default; 335 | $input-btn-line-height-sm: $line-height-sm !default; 336 | 337 | $input-btn-padding-y-lg: .5rem !default; 338 | $input-btn-padding-x-lg: 1rem !default; 339 | $input-btn-line-height-lg: $line-height-lg !default; 340 | 341 | $input-btn-border-width: $border-width !default; 342 | 343 | 344 | // Buttons 345 | // 346 | // For each of Bootstrap's buttons, define text, background, and border color. 347 | 348 | $btn-padding-y: $input-btn-padding-y !default; 349 | $btn-padding-x: $input-btn-padding-x !default; 350 | $btn-line-height: $input-btn-line-height !default; 351 | 352 | $btn-padding-y-sm: $input-btn-padding-y-sm !default; 353 | $btn-padding-x-sm: $input-btn-padding-x-sm !default; 354 | $btn-line-height-sm: $input-btn-line-height-sm !default; 355 | 356 | $btn-padding-y-lg: $input-btn-padding-y-lg !default; 357 | $btn-padding-x-lg: $input-btn-padding-x-lg !default; 358 | $btn-line-height-lg: $input-btn-line-height-lg !default; 359 | 360 | $btn-border-width: $input-btn-border-width !default; 361 | 362 | $btn-font-weight: $font-weight-normal !default; 363 | $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; 364 | $btn-focus-width: $input-btn-focus-width !default; 365 | $btn-focus-box-shadow: $input-btn-focus-box-shadow !default; 366 | $btn-disabled-opacity: .65 !default; 367 | $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; 368 | 369 | $btn-link-disabled-color: $gray-600 !default; 370 | 371 | $btn-block-spacing-y: .5rem !default; 372 | 373 | // Allows for customizing button radius independently from global border radius 374 | $btn-border-radius: $border-radius !default; 375 | $btn-border-radius-lg: $border-radius-lg !default; 376 | $btn-border-radius-sm: $border-radius-sm !default; 377 | 378 | $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; 379 | 380 | 381 | // Forms 382 | 383 | $input-padding-y: $input-btn-padding-y !default; 384 | $input-padding-x: $input-btn-padding-x !default; 385 | $input-line-height: $input-btn-line-height !default; 386 | 387 | $input-padding-y-sm: $input-btn-padding-y-sm !default; 388 | $input-padding-x-sm: $input-btn-padding-x-sm !default; 389 | $input-line-height-sm: $input-btn-line-height-sm !default; 390 | 391 | $input-padding-y-lg: $input-btn-padding-y-lg !default; 392 | $input-padding-x-lg: $input-btn-padding-x-lg !default; 393 | $input-line-height-lg: $input-btn-line-height-lg !default; 394 | 395 | $input-bg: $white !default; 396 | $input-disabled-bg: $gray-200 !default; 397 | 398 | $input-color: $gray-700 !default; 399 | $input-border-color: $gray-400 !default; 400 | $input-border-width: $input-btn-border-width !default; 401 | $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; 402 | 403 | $input-border-radius: $border-radius !default; 404 | $input-border-radius-lg: $border-radius-lg !default; 405 | $input-border-radius-sm: $border-radius-sm !default; 406 | 407 | $input-focus-bg: $input-bg !default; 408 | $input-focus-border-color: lighten($component-active-bg, 25%) !default; 409 | $input-focus-color: $input-color !default; 410 | $input-focus-width: $input-btn-focus-width !default; 411 | $input-focus-box-shadow: $input-btn-focus-box-shadow !default; 412 | 413 | $input-placeholder-color: $gray-600 !default; 414 | 415 | $input-height-border: $input-border-width * 2 !default; 416 | 417 | $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; 418 | $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; 419 | 420 | $input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; 421 | $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; 422 | 423 | $input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; 424 | $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; 425 | 426 | $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; 427 | 428 | $form-text-margin-top: .25rem !default; 429 | 430 | $form-check-input-gutter: 1.25rem !default; 431 | $form-check-input-margin-y: .3rem !default; 432 | $form-check-input-margin-x: .25rem !default; 433 | 434 | $form-check-inline-margin-x: .75rem !default; 435 | $form-check-inline-input-margin-x: .3125rem !default; 436 | 437 | $form-group-margin-bottom: 1rem !default; 438 | 439 | $input-group-addon-color: $input-color !default; 440 | $input-group-addon-bg: $gray-200 !default; 441 | $input-group-addon-border-color: $input-border-color !default; 442 | 443 | $custom-control-gutter: 1.5rem !default; 444 | $custom-control-spacer-x: 1rem !default; 445 | 446 | $custom-control-indicator-size: 1rem !default; 447 | $custom-control-indicator-bg: $gray-300 !default; 448 | $custom-control-indicator-bg-size: 50% 50% !default; 449 | $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; 450 | 451 | $custom-control-indicator-disabled-bg: $gray-200 !default; 452 | $custom-control-label-disabled-color: $gray-600 !default; 453 | 454 | $custom-control-indicator-checked-color: $component-active-color !default; 455 | $custom-control-indicator-checked-bg: $component-active-bg !default; 456 | $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; 457 | $custom-control-indicator-checked-box-shadow: none !default; 458 | 459 | $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; 460 | 461 | $custom-control-indicator-active-color: $component-active-color !default; 462 | $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; 463 | $custom-control-indicator-active-box-shadow: none !default; 464 | 465 | $custom-checkbox-indicator-border-radius: $border-radius !default; 466 | $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; 467 | 468 | $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; 469 | $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; 470 | $custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; 471 | $custom-checkbox-indicator-indeterminate-box-shadow: none !default; 472 | 473 | $custom-radio-indicator-border-radius: 50% !default; 474 | $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; 475 | 476 | $custom-select-padding-y: .375rem !default; 477 | $custom-select-padding-x: .75rem !default; 478 | $custom-select-height: $input-height !default; 479 | $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator 480 | $custom-select-line-height: $input-btn-line-height !default; 481 | $custom-select-color: $input-color !default; 482 | $custom-select-disabled-color: $gray-600 !default; 483 | $custom-select-bg: $white !default; 484 | $custom-select-disabled-bg: $gray-200 !default; 485 | $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions 486 | $custom-select-indicator-color: $gray-800 !default; 487 | $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; 488 | $custom-select-border-width: $input-btn-border-width !default; 489 | $custom-select-border-color: $input-border-color !default; 490 | $custom-select-border-radius: $border-radius !default; 491 | 492 | $custom-select-focus-border-color: $input-focus-border-color !default; 493 | $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; 494 | 495 | $custom-select-font-size-sm: 75% !default; 496 | $custom-select-height-sm: $input-height-sm !default; 497 | 498 | $custom-select-font-size-lg: 125% !default; 499 | $custom-select-height-lg: $input-height-lg !default; 500 | 501 | $custom-file-height: $input-height !default; 502 | $custom-file-focus-border-color: $input-focus-border-color !default; 503 | $custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; 504 | 505 | $custom-file-padding-y: $input-btn-padding-y !default; 506 | $custom-file-padding-x: $input-btn-padding-x !default; 507 | $custom-file-line-height: $input-btn-line-height !default; 508 | $custom-file-color: $input-color !default; 509 | $custom-file-bg: $input-bg !default; 510 | $custom-file-border-width: $input-btn-border-width !default; 511 | $custom-file-border-color: $input-border-color !default; 512 | $custom-file-border-radius: $input-border-radius !default; 513 | $custom-file-box-shadow: $input-box-shadow !default; 514 | $custom-file-button-color: $custom-file-color !default; 515 | $custom-file-button-bg: $input-group-addon-bg !default; 516 | $custom-file-text: ( 517 | en: "Browse" 518 | ) !default; 519 | 520 | 521 | // Form validation 522 | $form-feedback-margin-top: $form-text-margin-top !default; 523 | $form-feedback-font-size: $small-font-size !default; 524 | $form-feedback-valid-color: theme-color("success") !default; 525 | $form-feedback-invalid-color: theme-color("danger") !default; 526 | 527 | 528 | // Dropdowns 529 | // 530 | // Dropdown menu container and contents. 531 | 532 | $dropdown-min-width: 10rem !default; 533 | $dropdown-padding-y: .5rem !default; 534 | $dropdown-spacer: .125rem !default; 535 | $dropdown-bg: $white !default; 536 | $dropdown-border-color: rgba($black, .15) !default; 537 | $dropdown-border-radius: $border-radius !default; 538 | $dropdown-border-width: $border-width !default; 539 | $dropdown-divider-bg: $gray-200 !default; 540 | $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; 541 | 542 | $dropdown-link-color: $gray-900 !default; 543 | $dropdown-link-hover-color: darken($gray-900, 5%) !default; 544 | $dropdown-link-hover-bg: $gray-100 !default; 545 | 546 | $dropdown-link-active-color: $component-active-color !default; 547 | $dropdown-link-active-bg: $component-active-bg !default; 548 | 549 | $dropdown-link-disabled-color: $gray-600 !default; 550 | 551 | $dropdown-item-padding-y: .25rem !default; 552 | $dropdown-item-padding-x: 1.5rem !default; 553 | 554 | $dropdown-header-color: $gray-600 !default; 555 | 556 | 557 | // Z-index master list 558 | // 559 | // Warning: Avoid customizing these values. They're used for a bird's eye view 560 | // of components dependent on the z-axis and are designed to all work together. 561 | 562 | $zindex-dropdown: 1000 !default; 563 | $zindex-sticky: 1020 !default; 564 | $zindex-fixed: 1030 !default; 565 | $zindex-modal-backdrop: 1040 !default; 566 | $zindex-modal: 1050 !default; 567 | $zindex-popover: 1060 !default; 568 | $zindex-tooltip: 1070 !default; 569 | 570 | // Navs 571 | 572 | $nav-link-padding-y: .5rem !default; 573 | $nav-link-padding-x: 1rem !default; 574 | $nav-link-disabled-color: $gray-600 !default; 575 | 576 | $nav-tabs-border-color: $gray-300 !default; 577 | $nav-tabs-border-width: $border-width !default; 578 | $nav-tabs-border-radius: $border-radius !default; 579 | $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; 580 | $nav-tabs-link-active-color: $gray-700 !default; 581 | $nav-tabs-link-active-bg: $body-bg !default; 582 | $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; 583 | 584 | $nav-pills-border-radius: $border-radius !default; 585 | $nav-pills-link-active-color: $component-active-color !default; 586 | $nav-pills-link-active-bg: $component-active-bg !default; 587 | 588 | // Navbar 589 | 590 | $navbar-padding-y: ($spacer / 2) !default; 591 | $navbar-padding-x: $spacer !default; 592 | 593 | $navbar-nav-link-padding-x: .5rem !default; 594 | 595 | $navbar-brand-font-size: $font-size-lg !default; 596 | // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link 597 | $nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; 598 | $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; 599 | $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; 600 | 601 | $navbar-toggler-padding-y: .25rem !default; 602 | $navbar-toggler-padding-x: .75rem !default; 603 | $navbar-toggler-font-size: $font-size-lg !default; 604 | $navbar-toggler-border-radius: $btn-border-radius !default; 605 | 606 | $navbar-dark-color: rgba($white, .5) !default; 607 | $navbar-dark-hover-color: rgba($white, .75) !default; 608 | $navbar-dark-active-color: $white !default; 609 | $navbar-dark-disabled-color: rgba($white, .25) !default; 610 | $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; 611 | $navbar-dark-toggler-border-color: rgba($white, .1) !default; 612 | 613 | $navbar-light-color: rgba($black, .5) !default; 614 | $navbar-light-hover-color: rgba($black, .7) !default; 615 | $navbar-light-active-color: rgba($black, .9) !default; 616 | $navbar-light-disabled-color: rgba($black, .3) !default; 617 | $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; 618 | $navbar-light-toggler-border-color: rgba($black, .1) !default; 619 | 620 | // Pagination 621 | 622 | $pagination-padding-y: .5rem !default; 623 | $pagination-padding-x: .75rem !default; 624 | $pagination-padding-y-sm: .25rem !default; 625 | $pagination-padding-x-sm: .5rem !default; 626 | $pagination-padding-y-lg: .75rem !default; 627 | $pagination-padding-x-lg: 1.5rem !default; 628 | $pagination-line-height: 1.25 !default; 629 | 630 | $pagination-color: $link-color !default; 631 | $pagination-bg: $white !default; 632 | $pagination-border-width: $border-width !default; 633 | $pagination-border-color: $gray-300 !default; 634 | 635 | $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; 636 | 637 | $pagination-hover-color: $link-hover-color !default; 638 | $pagination-hover-bg: $gray-200 !default; 639 | $pagination-hover-border-color: $gray-300 !default; 640 | 641 | $pagination-active-color: $component-active-color !default; 642 | $pagination-active-bg: $component-active-bg !default; 643 | $pagination-active-border-color: $pagination-active-bg !default; 644 | 645 | $pagination-disabled-color: $gray-600 !default; 646 | $pagination-disabled-bg: $white !default; 647 | $pagination-disabled-border-color: $gray-300 !default; 648 | 649 | 650 | // Jumbotron 651 | 652 | $jumbotron-padding: 2rem !default; 653 | $jumbotron-bg: $gray-200 !default; 654 | 655 | 656 | // Cards 657 | 658 | $card-spacer-y: .75rem !default; 659 | $card-spacer-x: 1.25rem !default; 660 | $card-border-width: $border-width !default; 661 | $card-border-radius: $border-radius !default; 662 | $card-border-color: rgba($black, .125) !default; 663 | $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; 664 | $card-cap-bg: rgba($black, .03) !default; 665 | $card-bg: $white !default; 666 | 667 | $card-img-overlay-padding: 1.25rem !default; 668 | 669 | $card-group-margin: ($grid-gutter-width / 2) !default; 670 | $card-deck-margin: $card-group-margin !default; 671 | 672 | $card-columns-count: 3 !default; 673 | $card-columns-gap: 1.25rem !default; 674 | $card-columns-margin: $card-spacer-y !default; 675 | 676 | 677 | // Tooltips 678 | 679 | $tooltip-font-size: $font-size-sm !default; 680 | $tooltip-max-width: 200px !default; 681 | $tooltip-color: $white !default; 682 | $tooltip-bg: $black !default; 683 | $tooltip-border-radius: $border-radius !default; 684 | $tooltip-opacity: .9 !default; 685 | $tooltip-padding-y: .25rem !default; 686 | $tooltip-padding-x: .5rem !default; 687 | $tooltip-margin: 0 !default; 688 | 689 | $tooltip-arrow-width: .8rem !default; 690 | $tooltip-arrow-height: .4rem !default; 691 | $tooltip-arrow-color: $tooltip-bg !default; 692 | 693 | 694 | // Popovers 695 | 696 | $popover-font-size: $font-size-sm !default; 697 | $popover-bg: $white !default; 698 | $popover-max-width: 276px !default; 699 | $popover-border-width: $border-width !default; 700 | $popover-border-color: rgba($black, .2) !default; 701 | $popover-border-radius: $border-radius-lg !default; 702 | $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; 703 | 704 | $popover-header-bg: darken($popover-bg, 3%) !default; 705 | $popover-header-color: $headings-color !default; 706 | $popover-header-padding-y: .5rem !default; 707 | $popover-header-padding-x: .75rem !default; 708 | 709 | $popover-body-color: $body-color !default; 710 | $popover-body-padding-y: $popover-header-padding-y !default; 711 | $popover-body-padding-x: $popover-header-padding-x !default; 712 | 713 | $popover-arrow-width: 1rem !default; 714 | $popover-arrow-height: .5rem !default; 715 | $popover-arrow-color: $popover-bg !default; 716 | 717 | $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; 718 | 719 | 720 | // Badges 721 | 722 | $badge-font-size: 75% !default; 723 | $badge-font-weight: $font-weight-bold !default; 724 | $badge-padding-y: .25em !default; 725 | $badge-padding-x: .4em !default; 726 | $badge-border-radius: $border-radius !default; 727 | 728 | $badge-pill-padding-x: .6em !default; 729 | // Use a higher than normal value to ensure completely rounded edges when 730 | // customizing padding or font-size on labels. 731 | $badge-pill-border-radius: 10rem !default; 732 | 733 | 734 | // Modals 735 | 736 | // Padding applied to the modal body 737 | $modal-inner-padding: 1rem !default; 738 | 739 | $modal-dialog-margin: .5rem !default; 740 | $modal-dialog-margin-y-sm-up: 1.75rem !default; 741 | 742 | $modal-title-line-height: $line-height-base !default; 743 | 744 | $modal-content-bg: $white !default; 745 | $modal-content-border-color: rgba($black, .2) !default; 746 | $modal-content-border-width: $border-width !default; 747 | $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; 748 | $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; 749 | 750 | $modal-backdrop-bg: $black !default; 751 | $modal-backdrop-opacity: .5 !default; 752 | $modal-header-border-color: $gray-200 !default; 753 | $modal-footer-border-color: $modal-header-border-color !default; 754 | $modal-header-border-width: $modal-content-border-width !default; 755 | $modal-footer-border-width: $modal-header-border-width !default; 756 | $modal-header-padding: 1rem !default; 757 | 758 | $modal-lg: 800px !default; 759 | $modal-md: 500px !default; 760 | $modal-sm: 300px !default; 761 | 762 | $modal-transition: transform .3s ease-out !default; 763 | 764 | 765 | // Alerts 766 | // 767 | // Define alert colors, border radius, and padding. 768 | 769 | $alert-padding-y: .75rem !default; 770 | $alert-padding-x: 1.25rem !default; 771 | $alert-margin-bottom: 1rem !default; 772 | $alert-border-radius: $border-radius !default; 773 | $alert-link-font-weight: $font-weight-bold !default; 774 | $alert-border-width: $border-width !default; 775 | 776 | $alert-bg-level: -10 !default; 777 | $alert-border-level: -9 !default; 778 | $alert-color-level: 6 !default; 779 | 780 | 781 | // Progress bars 782 | 783 | $progress-height: 1rem !default; 784 | $progress-font-size: ($font-size-base * .75) !default; 785 | $progress-bg: $gray-200 !default; 786 | $progress-border-radius: $border-radius !default; 787 | $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; 788 | $progress-bar-color: $white !default; 789 | $progress-bar-bg: theme-color("primary") !default; 790 | $progress-bar-animation-timing: 1s linear infinite !default; 791 | $progress-bar-transition: width .6s ease !default; 792 | 793 | // List group 794 | 795 | $list-group-bg: $white !default; 796 | $list-group-border-color: rgba($black, .125) !default; 797 | $list-group-border-width: $border-width !default; 798 | $list-group-border-radius: $border-radius !default; 799 | 800 | $list-group-item-padding-y: .75rem !default; 801 | $list-group-item-padding-x: 1.25rem !default; 802 | 803 | $list-group-hover-bg: $gray-100 !default; 804 | $list-group-active-color: $component-active-color !default; 805 | $list-group-active-bg: $component-active-bg !default; 806 | $list-group-active-border-color: $list-group-active-bg !default; 807 | 808 | $list-group-disabled-color: $gray-600 !default; 809 | $list-group-disabled-bg: $list-group-bg !default; 810 | 811 | $list-group-action-color: $gray-700 !default; 812 | $list-group-action-hover-color: $list-group-action-color !default; 813 | 814 | $list-group-action-active-color: $body-color !default; 815 | $list-group-action-active-bg: $gray-200 !default; 816 | 817 | 818 | // Image thumbnails 819 | 820 | $thumbnail-padding: .25rem !default; 821 | $thumbnail-bg: $body-bg !default; 822 | $thumbnail-border-width: $border-width !default; 823 | $thumbnail-border-color: $gray-300 !default; 824 | $thumbnail-border-radius: $border-radius !default; 825 | $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; 826 | 827 | 828 | // Figures 829 | 830 | $figure-caption-font-size: 90% !default; 831 | $figure-caption-color: $gray-600 !default; 832 | 833 | 834 | // Breadcrumbs 835 | 836 | $breadcrumb-padding-y: .75rem !default; 837 | $breadcrumb-padding-x: 1rem !default; 838 | $breadcrumb-item-padding: .5rem !default; 839 | 840 | $breadcrumb-margin-bottom: 1rem !default; 841 | 842 | $breadcrumb-bg: $gray-200 !default; 843 | $breadcrumb-divider-color: $gray-600 !default; 844 | $breadcrumb-active-color: $gray-600 !default; 845 | $breadcrumb-divider: "/" !default; 846 | 847 | 848 | // Carousel 849 | 850 | $carousel-control-color: $white !default; 851 | $carousel-control-width: 15% !default; 852 | $carousel-control-opacity: .5 !default; 853 | 854 | $carousel-indicator-width: 30px !default; 855 | $carousel-indicator-height: 3px !default; 856 | $carousel-indicator-spacer: 3px !default; 857 | $carousel-indicator-active-bg: $white !default; 858 | 859 | $carousel-caption-width: 70% !default; 860 | $carousel-caption-color: $white !default; 861 | 862 | $carousel-control-icon-width: 20px !default; 863 | 864 | $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; 865 | $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; 866 | 867 | $carousel-transition: transform .6s ease !default; 868 | 869 | 870 | // Close 871 | 872 | $close-font-size: $font-size-base * 1.5 !default; 873 | $close-font-weight: $font-weight-bold !default; 874 | $close-color: $black !default; 875 | $close-text-shadow: 0 1px 0 $white !default; 876 | 877 | // Code 878 | 879 | $code-font-size: 87.5% !default; 880 | $code-color: $pink !default; 881 | 882 | $kbd-padding-y: .2rem !default; 883 | $kbd-padding-x: .4rem !default; 884 | $kbd-font-size: $code-font-size !default; 885 | $kbd-color: $white !default; 886 | $kbd-bg: $gray-900 !default; 887 | 888 | $pre-color: $gray-900 !default; 889 | $pre-scrollable-max-height: 340px !default; 890 | 891 | 892 | // Printing 893 | $print-page-size: a3 !default; 894 | $print-body-min-width: map-get($grid-breakpoints, "lg") !default; 895 | --------------------------------------------------------------------------------