├── source ├── stylesheets │ ├── _mixin.scss │ ├── all.scss │ └── helpers │ │ └── _variables.scss ├── images │ └── white-image.png ├── partials │ ├── footer.ejs │ └── navbar.ejs ├── layout.ejs └── index.html ├── .gitignore ├── bower.json ├── package.json ├── gulpconfig.js └── gulpfile.js /source/stylesheets/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin gg() { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /source/stylesheets/all.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/variables"; 2 | @import "bootstrap"; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | .DS_Store 4 | .git 5 | bower_components 6 | yarn.lock 7 | -------------------------------------------------------------------------------- /source/images/white-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wcc723/gulp-web-designers/HEAD/source/images/white-image.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-web-designers", 3 | "description": "", 4 | "main": "", 5 | "authors": [ 6 | "Wcc723 " 7 | ], 8 | "license": "MIT", 9 | "homepage": "https://github.com/Wcc723/gulp-web-designers", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "bootstrap": "~v4.0.0-alpha.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-web-designers", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "npm install" 7 | }, 8 | "devDependencies": { 9 | "autoprefixer": "^6.3.3", 10 | "ejs": "^2.4.1", 11 | "gulp": "^3.9.1", 12 | "gulp-concat": "^2.6.0", 13 | "gulp-front-matter": "^1.3.0", 14 | "gulp-layout": "0.0.3", 15 | "gulp-plumber": "^1.1.0", 16 | "gulp-postcss": "^6.1.0", 17 | "gulp-sass": "^2.2.0", 18 | "gulp-watch": "^4.3.5", 19 | "gulp-webserver": "^0.9.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /source/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /source/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= title %> 6 | 7 | 8 | 9 | 10 | 11 | <%- include partials/navbar %> 12 |
13 | <%- contents %> 14 |
15 | <%- include partials/footer %> 16 | 17 | 18 | -------------------------------------------------------------------------------- /gulpconfig.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | * 排除需要編譯的檔案，其餘移至 public 4 | */ 5 | others: [ 6 | '**/*.html', 7 | '**/*.ejs', 8 | '**/*.scss', 9 | '**/*.sass', 10 | '**/*.css' 11 | ], 12 | 13 | /* 14 | * 檔案輸出、輸入路徑 15 | */ 16 | paths: { 17 | // 來源 18 | 'source': './source/', 19 | 'sass': './source/stylesheets/', 20 | 'img': './source/images/', 21 | // 輸出 22 | 'sass_output': 'stylesheets/', 23 | 'public': './public/', 24 | }, 25 | 26 | /* 27 | * CSS, PostCSS, Sass 設定 28 | * 目前 PostCSS 僅有加入 autoprefixer 29 | */ 30 | postcss: { 31 | 'autoprefixer': {browsers: ['last 5 version']} 32 | }, 33 | sass: { 34 | 'output_style': 'compressed', // sass 輸出模式，可選 'nested', 'expanded', 'compact', 'compressed' 35 | // 'includePaths': ['./bower_components/bootstrap/scss/'] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /source/partials/navbar.ejs: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | webserver = require('gulp-webserver'), 3 | concat = require('gulp-concat'), 4 | plumber = require('gulp-plumber'), 5 | sass = require('gulp-sass'), 6 | watch = require('gulp-watch'), 7 | layout = require('gulp-layout'), 8 | frontMatter = require('gulp-front-matter'), 9 | // post css 10 | postcss = require('gulp-postcss'), 11 | autoprefixer = require('autoprefixer'); 12 | var config = require('./gulpconfig'); 13 | 14 | // Sass 15 | gulp.task('sass', function() { 16 | var processors = [ 17 | autoprefixer(config.postcss.autoprefixer) 18 | ]; 19 | gulp.src([config.paths.sass + '**/**.scss']) 20 | .pipe(plumber()) 21 | .pipe(sass(config.sass) 22 | .on('error', sass.logError)) 23 | .pipe(postcss(processors)) 24 | .pipe(gulp.dest(config.paths.public + config.paths.sass_output)); 25 | }); 26 | watch([config.paths.sass + '**/*.scss'], function() { 27 | gulp.start('sass'); 28 | }); 29 | 30 | // 其它不編譯的物件 31 | var objs = [config.paths.source + '**/**.*']; 32 | for (var i = 0; i < config.others.length; i++) { 33 | objs.push('!' + config.paths.source + config.others[i]); 34 | } 35 | gulp.task('others', function(){ 36 | return gulp.src(objs) 37 | .pipe(plumber()) 38 | .pipe(gulp.dest(config.paths.public)); 39 | }); 40 | watch(objs, function() { 41 | gulp.start('others'); 42 | }); 43 | 44 | // 樣板 45 | gulp.task('gulp-layout', function() { 46 | return gulp.src([config.paths.source + '**/*.ejs', config.paths.source + '**/*.html']) 47 | .pipe(plumber()) 48 | .pipe(frontMatter()) 49 | .pipe(layout(function(file) { 50 | return file.frontMatter; 51 | })) 52 | .pipe(gulp.dest(config.paths.public)); 53 | }); 54 | watch([config.paths.source + '**/*.ejs', config.paths.source + '**/*.html'], function(){ 55 | gulp.start('gulp-layout'); 56 | }); 57 | 58 | // webserver 59 | gulp.task('webserver', function() { 60 | setTimeout(function(){ 61 | gulp.src(config.paths.public) 62 | .pipe(webserver({ 63 | livereload: true, 64 | open: false, 65 | host: '0.0.0.0', 66 | port: 10000, 67 | })); 68 | }, 1000); 69 | }); 70 | 71 | gulp.task('default', ['gulp-layout', 'others', 'sass', 'webserver']); 72 | -------------------------------------------------------------------------------- /source/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: 首頁 3 | layout: ./source/layout.ejs 4 | engine: ejs 5 | --- 6 | 7 | 10 | 13 | 16 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | Cras justo odio 26 | 27 | Dapibus ac facilisis in 28 | Morbi leo risus 29 | Porta ac consectetur ac 30 | Vestibulum at eros 31 |
32 |
33 |
34 |
35 |
36 | 37 | 38 | We'll never share your email with anyone else. 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 53 |
54 |
55 | 56 | 63 |
64 |
65 | 66 | 67 |
68 |
69 | 70 | 71 | This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. 72 |
73 |
74 | Radio buttons 75 |
76 | 80 |
81 |
82 | 86 |
87 |
88 | 92 |
93 |
94 |
95 | 99 |
100 | 101 |
102 |
103 |
104 | -------------------------------------------------------------------------------- /source/stylesheets/helpers/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | // 3 | // Copy settings from this file into the provided `_custom.scss` to override 4 | // the Bootstrap defaults without modifying key, versioned files. 5 | 6 | 7 | // Table of Contents 8 | // 9 | // Colors 10 | // Options 11 | // Spacing 12 | // Body 13 | // Links 14 | // Grid breakpoints 15 | // Grid containers 16 | // Grid columns 17 | // Fonts 18 | // Components 19 | 20 | @mixin _assert-ascending($map, $map-name) { 21 | $prev-key: null; 22 | $prev-num: null; 23 | @each $key, $num in $map { 24 | @if $prev-num == null { 25 | // Do nothing 26 | } @else if not comparable($prev-num, $num) { 27 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 28 | } @else if $prev-num >= $num { 29 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 30 | } 31 | $prev-key: $key; 32 | $prev-num: $num; 33 | } 34 | } 35 | 36 | // General variable structure 37 | // 38 | // Variable format should follow the `$component-modifier-state-property` order. 39 | 40 | 41 | // Colors 42 | // 43 | // Grayscale and brand colors for use across Bootstrap. 44 | 45 | $gray-dark: #373a3c !default; 46 | $gray: #55595c !default; 47 | $gray-light: #818a91 !default; 48 | $gray-lighter: #eceeef !default; 49 | $gray-lightest: #f7f7f9 !default; 50 | 51 | $brand-primary: #0275d8 !default; 52 | $brand-success: #5cb85c !default; 53 | $brand-info: #5bc0de !default; 54 | $brand-warning: #f0ad4e !default; 55 | $brand-danger: #d9534f !default; 56 | $brand-inverse: $gray-dark !default; 57 | 58 | 59 | // Options 60 | // 61 | // Quickly modify global styling by enabling or disabling optional features. 62 | 63 | $enable-flex: false !default; 64 | $enable-rounded: true !default; 65 | $enable-shadows: false !default; 66 | $enable-gradients: false !default; 67 | $enable-transitions: false !default; 68 | $enable-hover-media-query: false !default; 69 | $enable-grid-classes: true !default; 70 | $enable-print-styles: true !default; 71 | 72 | 73 | // Spacing 74 | // 75 | // Control the default styling of most Bootstrap elements by modifying these 76 | // variables. Mostly focused on spacing. 77 | // You can add more entries to the $spacers map, should you need more variation. 78 | 79 | $spacer: 1rem !default; 80 | $spacer-x: $spacer !default; 81 | $spacer-y: $spacer !default; 82 | $spacers: ( 83 | 0: ( 84 | x: 0, 85 | y: 0 86 | ), 87 | 1: ( 88 | x: $spacer-x, 89 | y: $spacer-y 90 | ), 91 | 2: ( 92 | x: ($spacer-x * 1.5), 93 | y: ($spacer-y * 1.5) 94 | ), 95 | 3: ( 96 | x: ($spacer-x * 3), 97 | y: ($spacer-y * 3) 98 | ) 99 | ) !default; 100 | $border-width: 1px !default; 101 | 102 | 103 | // Body 104 | // 105 | // Settings for the `` element. 106 | 107 | $body-bg: #fff !default; 108 | $body-color: $gray-dark !default; 109 | 110 | 111 | // Links 112 | // 113 | // Style anchor elements. 114 | 115 | $link-color: $brand-primary !default; 116 | $link-decoration: none !default; 117 | $link-hover-color: darken($link-color, 15%) !default; 118 | $link-hover-decoration: underline !default; 119 | 120 | 121 | // Grid breakpoints 122 | // 123 | // Define the minimum dimensions at which your layout will change, 124 | // adapting to different screen sizes, for use in media queries. 125 | 126 | $grid-breakpoints: ( 127 | xs: 0, 128 | sm: 576px, 129 | md: 768px, 130 | lg: 992px, 131 | xl: 1200px 132 | ) !default; 133 | @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); 134 | 135 | 136 | // Grid containers 137 | // 138 | // Define the maximum width of `.container` for different screen sizes. 139 | 140 | $container-max-widths: ( 141 | sm: 540px, 142 | md: 720px, 143 | lg: 960px, 144 | xl: 1140px 145 | ) !default; 146 | @include _assert-ascending($container-max-widths, "$container-max-widths"); 147 | 148 | 149 | // Grid columns 150 | // 151 | // Set the number of columns and specify the width of the gutters. 152 | 153 | $grid-columns: 12 !default; 154 | $grid-gutter-width-base: 30px !default; 155 | $grid-gutter-widths: ( 156 | xs: $grid-gutter-width-base, 157 | sm: $grid-gutter-width-base, 158 | md: $grid-gutter-width-base, 159 | lg: $grid-gutter-width-base, 160 | xl: $grid-gutter-width-base 161 | ) !default; 162 | 163 | // Typography 164 | // 165 | // Font, line-height, and color for body text, headings, and more. 166 | 167 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; 168 | $font-family-serif: Georgia, "Times New Roman", Times, serif !default; 169 | $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 170 | $font-family-base: $font-family-sans-serif !default; 171 | 172 | // Pixel value used to responsively scale all typography. Applied to the `` element. 173 | $font-size-root: 16px !default; 174 | 175 | $font-size-base: 1rem !default; 176 | $font-size-lg: 1.25rem !default; 177 | $font-size-sm: .875rem !default; 178 | $font-size-xs: .75rem !default; 179 | 180 | $line-height-base: 1.5 !default; 181 | 182 | $font-size-h1: 2.5rem !default; 183 | $font-size-h2: 2rem !default; 184 | $font-size-h3: 1.75rem !default; 185 | $font-size-h4: 1.5rem !default; 186 | $font-size-h5: 1.25rem !default; 187 | $font-size-h6: 1rem !default; 188 | 189 | $display1-size: 6rem !default; 190 | $display2-size: 5.5rem !default; 191 | $display3-size: 4.5rem !default; 192 | $display4-size: 3.5rem !default; 193 | 194 | $display1-weight: 300 !default; 195 | $display2-weight: 300 !default; 196 | $display3-weight: 300 !default; 197 | $display4-weight: 300 !default; 198 | 199 | $headings-margin-bottom: ($spacer / 2) !default; 200 | $headings-font-family: inherit !default; 201 | $headings-font-weight: 500 !default; 202 | $headings-line-height: 1.1 !default; 203 | $headings-color: inherit !default; 204 | 205 | $lead-font-size: 1.25rem !default; 206 | $lead-font-weight: 300 !default; 207 | 208 | $small-font-size: 80% !default; 209 | 210 | $text-muted: $gray-light !default; 211 | 212 | $abbr-border-color: $gray-light !default; 213 | 214 | $blockquote-small-color: $gray-light !default; 215 | $blockquote-font-size: ($font-size-base * 1.25) !default; 216 | $blockquote-border-color: $gray-lighter !default; 217 | $blockquote-border-width: .25rem !default; 218 | 219 | $hr-border-color: rgba(0,0,0,.1) !default; 220 | $hr-border-width: $border-width !default; 221 | 222 | $mark-padding: .2em !default; 223 | 224 | $dt-font-weight: bold !default; 225 | 226 | $kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; 227 | $nested-kbd-font-weight: bold !default; 228 | 229 | $list-inline-padding: 5px !default; 230 | 231 | 232 | // Components 233 | // 234 | // Define common padding and border radius sizes and more. 235 | 236 | $line-height-lg: (4 / 3) !default; 237 | $line-height-sm: 1.5 !default; 238 | 239 | $border-radius: .25rem !default; 240 | $border-radius-lg: .3rem !default; 241 | $border-radius-sm: .2rem !default; 242 | 243 | $component-active-color: #fff !default; 244 | $component-active-bg: $brand-primary !default; 245 | 246 | $caret-width: .3em !default; 247 | $caret-width-lg: $caret-width !default; 248 | 249 | 250 | // Tables 251 | // 252 | // Customizes the `.table` component with basic values, each used across all table variations. 253 | 254 | $table-cell-padding: .75rem !default; 255 | $table-sm-cell-padding: .3rem !default; 256 | 257 | $table-bg: transparent !default; 258 | $table-bg-accent: rgba(0,0,0,.05) !default; 259 | $table-bg-hover: rgba(0,0,0,.075) !default; 260 | $table-bg-active: $table-bg-hover !default; 261 | 262 | $table-border-width: $border-width !default; 263 | $table-border-color: $gray-lighter !default; 264 | 265 | 266 | // Buttons 267 | // 268 | // For each of Bootstrap's buttons, define text, background and border color. 269 | 270 | $btn-padding-x: 1rem !default; 271 | $btn-padding-y: .5rem !default; 272 | $btn-line-height: 1.25 !default; 273 | $btn-font-weight: normal !default; 274 | $btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; 275 | $btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; 276 | 277 | $btn-primary-color: #fff !default; 278 | $btn-primary-bg: $brand-primary !default; 279 | $btn-primary-border: $btn-primary-bg !default; 280 | 281 | $btn-secondary-color: $gray-dark !default; 282 | $btn-secondary-bg: #fff !default; 283 | $btn-secondary-border: #ccc !default; 284 | 285 | $btn-info-color: #fff !default; 286 | $btn-info-bg: $brand-info !default; 287 | $btn-info-border: $btn-info-bg !default; 288 | 289 | $btn-success-color: #fff !default; 290 | $btn-success-bg: $brand-success !default; 291 | $btn-success-border: $btn-success-bg !default; 292 | 293 | $btn-warning-color: #fff !default; 294 | $btn-warning-bg: $brand-warning !default; 295 | $btn-warning-border: $btn-warning-bg !default; 296 | 297 | $btn-danger-color: #fff !default; 298 | $btn-danger-bg: $brand-danger !default; 299 | $btn-danger-border: $btn-danger-bg !default; 300 | 301 | $btn-link-disabled-color: $gray-light !default; 302 | 303 | $btn-padding-x-sm: .5rem !default; 304 | $btn-padding-y-sm: .25rem !default; 305 | 306 | $btn-padding-x-lg: 1.5rem !default; 307 | $btn-padding-y-lg: .75rem !default; 308 | 309 | $btn-block-spacing-y: .5rem !default; 310 | $btn-toolbar-margin: .5rem !default; 311 | 312 | // Allows for customizing button radius independently from global border radius 313 | $btn-border-radius: $border-radius !default; 314 | $btn-border-radius-lg: $border-radius-lg !default; 315 | $btn-border-radius-sm: $border-radius-sm !default; 316 | 317 | 318 | // Forms 319 | 320 | $input-padding-x: .75rem !default; 321 | $input-padding-y: .5rem !default; 322 | $input-line-height: 1.25 !default; 323 | 324 | $input-bg: #fff !default; 325 | $input-bg-disabled: $gray-lighter !default; 326 | 327 | $input-color: $gray !default; 328 | $input-border-color: rgba(0,0,0,.15) !default; 329 | $input-btn-border-width: $border-width !default; // For form controls and buttons 330 | $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; 331 | 332 | $input-border-radius: $border-radius !default; 333 | $input-border-radius-lg: $border-radius-lg !default; 334 | $input-border-radius-sm: $border-radius-sm !default; 335 | 336 | $input-bg-focus: $input-bg !default; 337 | $input-border-focus: #66afe9 !default; 338 | $input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default; 339 | $input-color-focus: $input-color !default; 340 | 341 | $input-color-placeholder: #999 !default; 342 | 343 | $input-padding-x-sm: .5rem !default; 344 | $input-padding-y-sm: .25rem !default; 345 | 346 | $input-padding-x-lg: 1.5rem !default; 347 | $input-padding-y-lg: .75rem !default; 348 | 349 | $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; 350 | $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; 351 | $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; 352 | 353 | $form-group-margin-bottom: $spacer-y !default; 354 | 355 | $input-group-addon-bg: $gray-lighter !default; 356 | $input-group-addon-border-color: $input-border-color !default; 357 | 358 | $cursor-disabled: not-allowed !default; 359 | 360 | $custom-control-gutter: 1.5rem !default; 361 | $custom-control-spacer-x: 1rem !default; 362 | $custom-control-spacer-y: .25rem !default; 363 | 364 | $custom-control-indicator-size: 1rem !default; 365 | $custom-control-indicator-bg: #ddd !default; 366 | $custom-control-indicator-bg-size: 50% 50% !default; 367 | $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; 368 | 369 | $custom-control-disabled-cursor: $cursor-disabled !default; 370 | $custom-control-disabled-indicator-bg: #eee !default; 371 | $custom-control-disabled-description-color: #767676 !default; 372 | 373 | $custom-control-checked-indicator-color: #fff !default; 374 | $custom-control-checked-indicator-bg: #0074d9 !default; 375 | $custom-control-checked-indicator-box-shadow: none !default; 376 | 377 | $custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; 378 | 379 | $custom-control-active-indicator-color: #fff !default; 380 | $custom-control-active-indicator-bg: #84c6ff !default; 381 | $custom-control-active-indicator-box-shadow: none !default; 382 | 383 | $custom-checkbox-radius: $border-radius !default; 384 | $custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; 385 | 386 | $custom-checkbox-indeterminate-bg: #0074d9 !default; 387 | $custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; 388 | $custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default; 389 | $custom-checkbox-indeterminate-box-shadow: none !default; 390 | 391 | $custom-radio-radius: 50% !default; 392 | $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default; 393 | 394 | $custom-select-padding-x: .75rem !default; 395 | $custom-select-padding-y: .375rem !default; 396 | $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator 397 | $custom-select-color: $input-color !default; 398 | $custom-select-disabled-color: $gray-light !default; 399 | $custom-select-bg: #fff !default; 400 | $custom-select-disabled-bg: $gray-lighter !default; 401 | $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions 402 | $custom-select-indicator-color: #333 !default; 403 | $custom-select-indicator: 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") !default; 404 | $custom-select-border-width: $input-btn-border-width !default; 405 | $custom-select-border-color: $input-border-color !default; 406 | $custom-select-border-radius: $border-radius !default; 407 | 408 | $custom-select-focus-border-color: #51a7e8 !default; 409 | $custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; 410 | 411 | $custom-select-sm-padding-y: .2rem !default; 412 | $custom-select-sm-font-size: 75% !default; 413 | 414 | $custom-file-height: 2.5rem !default; 415 | $custom-file-width: 14rem !default; 416 | $custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; 417 | 418 | $custom-file-padding-x: .5rem !default; 419 | $custom-file-padding-y: 1rem !default; 420 | $custom-file-line-height: 1.5 !default; 421 | $custom-file-color: #555 !default; 422 | $custom-file-bg: #fff !default; 423 | $custom-file-border-width: $border-width !default; 424 | $custom-file-border-color: #ddd !default; 425 | $custom-file-border-radius: $border-radius !default; 426 | $custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; 427 | $custom-file-button-color: $custom-file-color !default; 428 | $custom-file-button-bg: #eee !default; 429 | $custom-file-text: ( 430 | placeholder: ( 431 | en: "Choose file..." 432 | ), 433 | button-label: ( 434 | en: "Browse" 435 | ) 436 | ) !default; 437 | 438 | 439 | // Form validation icons 440 | $form-icon-success-color: $brand-success !default; 441 | $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; 442 | 443 | $form-icon-warning-color: $brand-warning !default; 444 | $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; 445 | 446 | $form-icon-danger-color: $brand-danger !default; 447 | $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; 448 | 449 | 450 | // Dropdowns 451 | // 452 | // Dropdown menu container and contents. 453 | 454 | $dropdown-min-width: 10rem !default; 455 | $dropdown-padding-y: .5rem !default; 456 | $dropdown-margin-top: .125rem !default; 457 | $dropdown-bg: #fff !default; 458 | $dropdown-border-color: rgba(0,0,0,.15) !default; 459 | $dropdown-border-width: $border-width !default; 460 | $dropdown-divider-bg: #e5e5e5 !default; 461 | $dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default; 462 | 463 | $dropdown-link-color: $gray-dark !default; 464 | $dropdown-link-hover-color: darken($gray-dark, 5%) !default; 465 | $dropdown-link-hover-bg: #f5f5f5 !default; 466 | 467 | $dropdown-link-active-color: $component-active-color !default; 468 | $dropdown-link-active-bg: $component-active-bg !default; 469 | 470 | $dropdown-link-disabled-color: $gray-light !default; 471 | 472 | $dropdown-item-padding-x: 1.5rem !default; 473 | 474 | $dropdown-header-color: $gray-light !default; 475 | 476 | 477 | // Z-index master list 478 | // 479 | // Warning: Avoid customizing these values. They're used for a bird's eye view 480 | // of components dependent on the z-axis and are designed to all work together. 481 | 482 | $zindex-dropdown-backdrop: 990 !default; 483 | $zindex-navbar: 1000 !default; 484 | $zindex-dropdown: 1000 !default; 485 | $zindex-popover: 1060 !default; 486 | $zindex-tooltip: 1070 !default; 487 | $zindex-navbar-fixed: 1030 !default; 488 | $zindex-navbar-sticky: 1030 !default; 489 | $zindex-modal-bg: 1040 !default; 490 | $zindex-modal: 1050 !default; 491 | 492 | 493 | // Navbar 494 | 495 | $navbar-border-radius: $border-radius !default; 496 | $navbar-padding-x: $spacer !default; 497 | $navbar-padding-y: ($spacer / 2) !default; 498 | 499 | $navbar-brand-padding-y: .25rem !default; 500 | 501 | $navbar-divider-padding-y: .425rem !default; 502 | 503 | $navbar-toggler-padding-x: .75rem !default; 504 | $navbar-toggler-padding-y: .5rem !default; 505 | $navbar-toggler-font-size: $font-size-lg !default; 506 | $navbar-toggler-border-radius: $btn-border-radius !default; 507 | $navbar-toggler-padding-x: .75rem !default; 508 | $navbar-toggler-padding-y: .5rem !default; 509 | 510 | $navbar-dark-color: rgba(255,255,255,.5) !default; 511 | $navbar-dark-hover-color: rgba(255,255,255,.75) !default; 512 | $navbar-dark-active-color: rgba(255,255,255,1) !default; 513 | $navbar-dark-disabled-color: rgba(255,255,255,.25) !default; 514 | $navbar-dark-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; 515 | $navbar-dark-toggler-border: rgba(255,255,255,.1) !default; 516 | 517 | $navbar-light-color: rgba(0,0,0,.5) !default; 518 | $navbar-light-hover-color: rgba(0,0,0,.7) !default; 519 | $navbar-light-active-color: rgba(0,0,0,.9) !default; 520 | $navbar-light-disabled-color: rgba(0,0,0,.3) !default; 521 | $navbar-light-toggler-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !default; 522 | $navbar-light-toggler-border: rgba(0,0,0,.1) !default; 523 | 524 | // Navs 525 | 526 | $nav-item-margin: .2rem !default; 527 | $nav-item-inline-spacer: 1rem !default; 528 | $nav-link-padding: .5em 1em !default; 529 | $nav-link-hover-bg: $gray-lighter !default; 530 | $nav-disabled-link-color: $gray-light !default; 531 | $nav-disabled-link-hover-color: $gray-light !default; 532 | $nav-disabled-link-hover-bg: transparent !default; 533 | 534 | $nav-tabs-border-color: #ddd !default; 535 | $nav-tabs-border-width: $border-width !default; 536 | $nav-tabs-border-radius: $border-radius !default; 537 | $nav-tabs-link-hover-border-color: $gray-lighter !default; 538 | $nav-tabs-active-link-hover-color: $gray !default; 539 | $nav-tabs-active-link-hover-bg: $body-bg !default; 540 | $nav-tabs-active-link-hover-border-color: #ddd !default; 541 | $nav-tabs-justified-link-border-color: #ddd !default; 542 | $nav-tabs-justified-active-link-border-color: $body-bg !default; 543 | 544 | $nav-pills-border-radius: $border-radius !default; 545 | $nav-pills-active-link-color: $component-active-color !default; 546 | $nav-pills-active-link-bg: $component-active-bg !default; 547 | 548 | 549 | // Pagination 550 | 551 | $pagination-padding-x: .75rem !default; 552 | $pagination-padding-y: .5rem !default; 553 | $pagination-padding-x-sm: .75rem !default; 554 | $pagination-padding-y-sm: .275rem !default; 555 | $pagination-padding-x-lg: 1.5rem !default; 556 | $pagination-padding-y-lg: .75rem !default; 557 | 558 | 559 | $pagination-color: $link-color !default; 560 | $pagination-bg: #fff !default; 561 | $pagination-border-width: $border-width !default; 562 | $pagination-border-color: #ddd !default; 563 | 564 | $pagination-hover-color: $link-hover-color !default; 565 | $pagination-hover-bg: $gray-lighter !default; 566 | $pagination-hover-border: #ddd !default; 567 | 568 | $pagination-active-color: #fff !default; 569 | $pagination-active-bg: $brand-primary !default; 570 | $pagination-active-border: $brand-primary !default; 571 | 572 | $pagination-disabled-color: $gray-light !default; 573 | $pagination-disabled-bg: #fff !default; 574 | $pagination-disabled-border: #ddd !default; 575 | 576 | 577 | // Jumbotron 578 | 579 | $jumbotron-padding: 2rem !default; 580 | $jumbotron-bg: $gray-lighter !default; 581 | 582 | 583 | // Form states and alerts 584 | // 585 | // Define colors for form feedback states and, by default, alerts. 586 | 587 | $state-success-text: #3c763d !default; 588 | $state-success-bg: #dff0d8 !default; 589 | $state-success-border: darken($state-success-bg, 5%) !default; 590 | 591 | $state-info-text: #31708f !default; 592 | $state-info-bg: #d9edf7 !default; 593 | $state-info-border: darken($state-info-bg, 7%) !default; 594 | 595 | $state-warning-text: #8a6d3b !default; 596 | $state-warning-bg: #fcf8e3 !default; 597 | $mark-bg: $state-warning-bg !default; 598 | $state-warning-border: darken($state-warning-bg, 5%) !default; 599 | 600 | $state-danger-text: #a94442 !default; 601 | $state-danger-bg: #f2dede !default; 602 | $state-danger-border: darken($state-danger-bg, 5%) !default; 603 | 604 | 605 | // Cards 606 | $card-spacer-x: 1.25rem !default; 607 | $card-spacer-y: .75rem !default; 608 | $card-border-width: 1px !default; 609 | $card-border-radius: $border-radius !default; 610 | $card-border-color: rgba(0,0,0,.125) !default; 611 | $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; 612 | $card-cap-bg: #f5f5f5 !default; 613 | $card-bg: #fff !default; 614 | 615 | $card-link-hover-color: #fff !default; 616 | 617 | $card-img-overlay-padding: 1.25rem !default; 618 | 619 | $card-deck-margin: .625rem !default; 620 | 621 | $card-columns-sm-up-column-gap: 1.25rem !default; 622 | 623 | 624 | // Tooltips 625 | 626 | $tooltip-max-width: 200px !default; 627 | $tooltip-color: #fff !default; 628 | $tooltip-bg: #000 !default; 629 | $tooltip-opacity: .9 !default; 630 | $tooltip-padding-y: 3px !default; 631 | $tooltip-padding-x: 8px !default; 632 | $tooltip-margin: 3px !default; 633 | 634 | $tooltip-arrow-width: 5px !default; 635 | $tooltip-arrow-color: $tooltip-bg !default; 636 | 637 | 638 | // Popovers 639 | 640 | $popover-inner-padding: 1px !default; 641 | $popover-bg: #fff !default; 642 | $popover-max-width: 276px !default; 643 | $popover-border-width: $border-width !default; 644 | $popover-border-color: rgba(0,0,0,.2) !default; 645 | $popover-box-shadow: 0 5px 10px rgba(0,0,0,.2) !default; 646 | 647 | $popover-title-bg: darken($popover-bg, 3%) !default; 648 | $popover-title-padding-x: 14px !default; 649 | $popover-title-padding-y: 8px !default; 650 | 651 | $popover-content-padding-x: 14px !default; 652 | $popover-content-padding-y: 9px !default; 653 | 654 | $popover-arrow-width: 10px !default; 655 | $popover-arrow-color: $popover-bg !default; 656 | 657 | $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; 658 | $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; 659 | 660 | 661 | // Tags 662 | 663 | $tag-default-bg: $gray-light !default; 664 | $tag-primary-bg: $brand-primary !default; 665 | $tag-success-bg: $brand-success !default; 666 | $tag-info-bg: $brand-info !default; 667 | $tag-warning-bg: $brand-warning !default; 668 | $tag-danger-bg: $brand-danger !default; 669 | 670 | $tag-color: #fff !default; 671 | $tag-link-hover-color: #fff !default; 672 | $tag-font-size: 75% !default; 673 | $tag-font-weight: bold !default; 674 | $tag-padding-x: .4em !default; 675 | $tag-padding-y: .25em !default; 676 | 677 | $tag-pill-padding-x: .6em !default; 678 | // Use a higher than normal value to ensure completely rounded edges when 679 | // customizing padding or font-size on labels. 680 | $tag-pill-border-radius: 10rem !default; 681 | 682 | // Modals 683 | 684 | // Padding applied to the modal body 685 | $modal-inner-padding: 15px !default; 686 | 687 | $modal-dialog-margin: 10px !default; 688 | $modal-dialog-sm-up-margin-y: 30px !default; 689 | 690 | $modal-title-padding: 15px !default; 691 | $modal-title-line-height: $line-height-base !default; 692 | 693 | $modal-content-bg: #fff !default; 694 | $modal-content-border-color: rgba(0,0,0,.2) !default; 695 | $modal-content-border-width: $border-width !default; 696 | $modal-content-xs-box-shadow: 0 3px 9px rgba(0,0,0,.5) !default; 697 | $modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; 698 | 699 | $modal-backdrop-bg: #000 !default; 700 | $modal-backdrop-opacity: .5 !default; 701 | $modal-header-border-color: #e5e5e5 !default; 702 | $modal-footer-border-color: $modal-header-border-color !default; 703 | $modal-header-border-width: $modal-content-border-width !default; 704 | $modal-footer-border-width: $modal-header-border-width !default; 705 | 706 | $modal-lg: 900px !default; 707 | $modal-md: 600px !default; 708 | $modal-sm: 300px !default; 709 | 710 | 711 | // Alerts 712 | // 713 | // Define alert colors, border radius, and padding. 714 | 715 | $alert-padding-x: 1.25rem !default; 716 | $alert-padding-y: .75rem !default; 717 | $alert-border-radius: $border-radius !default; 718 | $alert-link-font-weight: bold !default; 719 | $alert-border-width: $border-width !default; 720 | 721 | $alert-success-bg: $state-success-bg !default; 722 | $alert-success-text: $state-success-text !default; 723 | $alert-success-border: $state-success-border !default; 724 | 725 | $alert-info-bg: $state-info-bg !default; 726 | $alert-info-text: $state-info-text !default; 727 | $alert-info-border: $state-info-border !default; 728 | 729 | $alert-warning-bg: $state-warning-bg !default; 730 | $alert-warning-text: $state-warning-text !default; 731 | $alert-warning-border: $state-warning-border !default; 732 | 733 | $alert-danger-bg: $state-danger-bg !default; 734 | $alert-danger-text: $state-danger-text !default; 735 | $alert-danger-border: $state-danger-border !default; 736 | 737 | 738 | // Progress bars 739 | 740 | $progress-bg: #eee !default; 741 | $progress-bar-color: #0074d9 !default; 742 | $progress-border-radius: $border-radius !default; 743 | $progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; 744 | 745 | $progress-bar-bg: $brand-primary !default; 746 | $progress-bar-success-bg: $brand-success !default; 747 | $progress-bar-warning-bg: $brand-warning !default; 748 | $progress-bar-danger-bg: $brand-danger !default; 749 | $progress-bar-info-bg: $brand-info !default; 750 | 751 | 752 | // List group 753 | 754 | $list-group-bg: #fff !default; 755 | $list-group-border-color: #ddd !default; 756 | $list-group-border-width: $border-width !default; 757 | $list-group-border-radius: $border-radius !default; 758 | 759 | $list-group-hover-bg: #f5f5f5 !default; 760 | $list-group-active-color: $component-active-color !default; 761 | $list-group-active-bg: $component-active-bg !default; 762 | $list-group-active-border: $list-group-active-bg !default; 763 | $list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; 764 | 765 | $list-group-disabled-color: $gray-light !default; 766 | $list-group-disabled-bg: $gray-lighter !default; 767 | $list-group-disabled-text-color: $list-group-disabled-color !default; 768 | 769 | $list-group-link-color: #555 !default; 770 | $list-group-link-hover-color: $list-group-link-color !default; 771 | $list-group-link-heading-color: #333 !default; 772 | 773 | $list-group-item-padding-x: 1.25rem !default; 774 | $list-group-item-padding-y: .75rem !default; 775 | $list-group-item-heading-margin-bottom: 5px !default; 776 | 777 | 778 | // Image thumbnails 779 | 780 | $thumbnail-padding: .25rem !default; 781 | $thumbnail-bg: $body-bg !default; 782 | $thumbnail-border-width: $border-width !default; 783 | $thumbnail-border-color: #ddd !default; 784 | $thumbnail-border-radius: $border-radius !default; 785 | $thumbnail-box-shadow: 0 1px 2px rgba(0,0,0,.075) !default; 786 | 787 | 788 | // Figures 789 | 790 | $figure-caption-font-size: 90% !default; 791 | 792 | 793 | // Breadcrumbs 794 | 795 | $breadcrumb-padding-y: .75rem !default; 796 | $breadcrumb-padding-x: 1rem !default; 797 | $breadcrumb-item-padding: .5rem !default; 798 | 799 | $breadcrumb-bg: $gray-lighter !default; 800 | $breadcrumb-divider-color: $gray-light !default; 801 | $breadcrumb-active-color: $gray-light !default; 802 | $breadcrumb-divider: "/" !default; 803 | 804 | 805 | // Media objects 806 | 807 | $media-margin-top: 15px !default; 808 | $media-heading-margin-bottom: 5px !default; 809 | $media-alignment-padding-x: 10px !default; 810 | 811 | 812 | // Carousel 813 | 814 | $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; 815 | 816 | $carousel-control-color: #fff !default; 817 | $carousel-control-width: 15% !default; 818 | $carousel-control-sm-up-size: 30px !default; 819 | $carousel-control-opacity: .5 !default; 820 | $carousel-control-font-size: 20px !default; 821 | 822 | $carousel-indicators-width: 60% !default; 823 | 824 | $carousel-indicator-size: 10px !default; 825 | $carousel-indicator-active-size: 12px !default; 826 | $carousel-indicator-active-bg: #fff !default; 827 | $carousel-indicator-border-color: #fff !default; 828 | 829 | $carousel-caption-width: 70% !default; 830 | $carousel-caption-sm-up-width: 60% !default; 831 | $carousel-caption-color: #fff !default; 832 | 833 | $carousel-icon-width: 20px !default; 834 | 835 | 836 | // Close 837 | 838 | $close-font-weight: bold !default; 839 | $close-color: #000 !default; 840 | $close-text-shadow: 0 1px 0 #fff !default; 841 | 842 | 843 | // Code 844 | 845 | $code-font-size: 90% !default; 846 | $code-padding-x: .4rem !default; 847 | $code-padding-y: .2rem !default; 848 | $code-color: #bd4147 !default; 849 | $code-bg: #f7f7f9 !default; 850 | 851 | $kbd-color: #fff !default; 852 | $kbd-bg: #333 !default; 853 | 854 | $pre-bg: #f7f7f9 !default; 855 | $pre-color: $gray-dark !default; 856 | $pre-border-color: #ccc !default; 857 | $pre-scrollable-max-height: 340px !default; 858 | --------------------------------------------------------------------------------