`. 49 | $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; 50 | $font-family-base: $font-family-sans-serif !default; 51 | 52 | $font-size-base: 16px; 53 | $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px 54 | $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px 55 | 56 | $font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px 57 | $font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px 58 | $font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px 59 | $font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px 60 | $font-size-h5: $font-size-base !default; 61 | $font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px 62 | 63 | //** Unit-less `line-height` for use in components like buttons. 64 | $line-height-base: 1.428571429 !default; // 20/14 65 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. 66 | $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px 67 | 68 | //** By default, this inherits from the ``. 69 | $headings-font-family: inherit !default; 70 | $headings-font-weight: 500 !default; 71 | $headings-line-height: 1.1 !default; 72 | $headings-color: inherit !default; 73 | 74 | 75 | //== Iconography 76 | // 77 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. 78 | 79 | //** Load fonts from this directory. 80 | 81 | // [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path. 82 | // [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths. 83 | $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; 84 | 85 | //** File name for all font files. 86 | $icon-font-name: "glyphicons-halflings-regular" !default; 87 | //** Element ID within SVG icon file. 88 | $icon-font-svg-id: "glyphicons_halflingsregular" !default; 89 | 90 | 91 | //== Components 92 | // 93 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). 94 | 95 | $padding-base-vertical: 6px !default; 96 | $padding-base-horizontal: 12px !default; 97 | 98 | $padding-large-vertical: 10px !default; 99 | $padding-large-horizontal: 16px !default; 100 | 101 | $padding-small-vertical: 5px !default; 102 | $padding-small-horizontal: 10px !default; 103 | 104 | $padding-xs-vertical: 1px !default; 105 | $padding-xs-horizontal: 5px !default; 106 | 107 | $line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome 108 | $line-height-small: 1.5 !default; 109 | 110 | $border-radius-base: 4px !default; 111 | $border-radius-large: 6px !default; 112 | $border-radius-small: 3px !default; 113 | 114 | //** Global color for active items (e.g., navs or dropdowns). 115 | $component-active-color: #fff !default; 116 | //** Global background color for active items (e.g., navs or dropdowns). 117 | $component-active-bg: $brand-primary !default; 118 | 119 | //** Width of the `border` for generating carets that indicator dropdowns. 120 | $caret-width-base: 4px !default; 121 | //** Carets increase slightly in size for larger components. 122 | $caret-width-large: 5px !default; 123 | 124 | 125 | //== Tables 126 | // 127 | //## Customizes the `.table` component with basic values, each used across all table variations. 128 | 129 | //** Padding for ``s and ``s. 130 | $table-cell-padding: 8px !default; 131 | //** Padding for cells in `.table-condensed`. 132 | $table-condensed-cell-padding: 5px !default; 133 | 134 | //** Default background color used for all tables. 135 | $table-bg: transparent !default; 136 | //** Background color used for `.table-striped`. 137 | $table-bg-accent: #f9f9f9 !default; 138 | //** Background color used for `.table-hover`. 139 | $table-bg-hover: #f5f5f5 !default; 140 | $table-bg-active: $table-bg-hover !default; 141 | 142 | //** Border color for table and cell borders. 143 | $table-border-color: #ddd !default; 144 | 145 | 146 | //== Buttons 147 | // 148 | //## For each of Bootstrap's buttons, define text, background and border color. 149 | 150 | $btn-font-weight: normal !default; 151 | 152 | $btn-default-color: #333 !default; 153 | $btn-default-bg: #fff !default; 154 | $btn-default-border: #ccc !default; 155 | 156 | $btn-primary-color: #fff !default; 157 | $btn-primary-bg: $brand-primary !default; 158 | $btn-primary-border: darken($btn-primary-bg, 5%) !default; 159 | 160 | $btn-success-color: #fff !default; 161 | $btn-success-bg: $brand-success !default; 162 | $btn-success-border: darken($btn-success-bg, 5%) !default; 163 | 164 | $btn-info-color: #fff !default; 165 | $btn-info-bg: $brand-info !default; 166 | $btn-info-border: darken($btn-info-bg, 5%) !default; 167 | 168 | $btn-warning-color: #fff !default; 169 | $btn-warning-bg: $brand-warning !default; 170 | $btn-warning-border: darken($btn-warning-bg, 5%) !default; 171 | 172 | $btn-danger-color: #fff !default; 173 | $btn-danger-bg: $brand-danger !default; 174 | $btn-danger-border: darken($btn-danger-bg, 5%) !default; 175 | 176 | $btn-link-disabled-color: $gray-light !default; 177 | 178 | 179 | //== Forms 180 | // 181 | //## 182 | 183 | //** `` background color 184 | $input-bg: #fff !default; 185 | //** `` background color 186 | $input-bg-disabled: $gray-lighter !default; 187 | 188 | //** Text color for ``s 189 | $input-color: $gray !default; 190 | //** `` border color 191 | $input-border: #ccc !default; 192 | 193 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 194 | //** Default `.form-control` border radius 195 | // This has no effect on ``s in CSS. 196 | $input-border-radius: $border-radius-base !default; 197 | //** Large `.form-control` border radius 198 | $input-border-radius-large: $border-radius-large !default; 199 | //** Small `.form-control` border radius 200 | $input-border-radius-small: $border-radius-small !default; 201 | 202 | //** Border color for inputs on focus 203 | $input-border-focus: #66afe9 !default; 204 | 205 | //** Placeholder text color 206 | $input-color-placeholder: #999 !default; 207 | 208 | //** Default `.form-control` height 209 | $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; 210 | //** Large `.form-control` height 211 | $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; 212 | //** Small `.form-control` height 213 | $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; 214 | 215 | $legend-color: $gray-dark !default; 216 | $legend-border-color: #e5e5e5 !default; 217 | 218 | //** Background color for textual input addons 219 | $input-group-addon-bg: $gray-lighter !default; 220 | //** Border color for textual input addons 221 | $input-group-addon-border-color: $input-border !default; 222 | 223 | //** Disabled cursor for form controls and buttons. 224 | $cursor-disabled: not-allowed !default; 225 | 226 | 227 | //== Dropdowns 228 | // 229 | //## Dropdown menu container and contents. 230 | 231 | //** Background for the dropdown menu. 232 | $dropdown-bg: #fff !default; 233 | //** Dropdown menu `border-color`. 234 | $dropdown-border: rgba(0,0,0,.15) !default; 235 | //** Dropdown menu `border-color` **for IE8**. 236 | $dropdown-fallback-border: #ccc !default; 237 | //** Divider color for between dropdown items. 238 | $dropdown-divider-bg: #e5e5e5 !default; 239 | 240 | //** Dropdown link text color. 241 | $dropdown-link-color: $gray-dark !default; 242 | //** Hover color for dropdown links. 243 | $dropdown-link-hover-color: darken($gray-dark, 5%) !default; 244 | //** Hover background for dropdown links. 245 | $dropdown-link-hover-bg: #f5f5f5 !default; 246 | 247 | //** Active dropdown menu item text color. 248 | $dropdown-link-active-color: $component-active-color !default; 249 | //** Active dropdown menu item background color. 250 | $dropdown-link-active-bg: $component-active-bg !default; 251 | 252 | //** Disabled dropdown menu item background color. 253 | $dropdown-link-disabled-color: $gray-light !default; 254 | 255 | //** Text color for headers within dropdown menus. 256 | $dropdown-header-color: $gray-light !default; 257 | 258 | //** Deprecated `$dropdown-caret-color` as of v3.1.0 259 | $dropdown-caret-color: #000 !default; 260 | 261 | 262 | //-- Z-index master list 263 | // 264 | // Warning: Avoid customizing these values. They're used for a bird's eye view 265 | // of components dependent on the z-axis and are designed to all work together. 266 | // 267 | // Note: These variables are not generated into the Customizer. 268 | 269 | $zindex-navbar: 1000 !default; 270 | $zindex-dropdown: 1000 !default; 271 | $zindex-popover: 1060 !default; 272 | $zindex-tooltip: 1070 !default; 273 | $zindex-navbar-fixed: 1030 !default; 274 | $zindex-modal: 1040 !default; 275 | 276 | 277 | //== Media queries breakpoints 278 | // 279 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes. 280 | 281 | // Extra small screen / phone 282 | //** Deprecated `$screen-xs` as of v3.0.1 283 | $screen-xs: 480px !default; 284 | //** Deprecated `$screen-xs-min` as of v3.2.0 285 | $screen-xs-min: $screen-xs !default; 286 | //** Deprecated `$screen-phone` as of v3.0.1 287 | $screen-phone: $screen-xs-min !default; 288 | 289 | // Small screen / tablet 290 | //** Deprecated `$screen-sm` as of v3.0.1 291 | $screen-sm: 768px !default; 292 | $screen-sm-min: $screen-sm !default; 293 | //** Deprecated `$screen-tablet` as of v3.0.1 294 | $screen-tablet: $screen-sm-min !default; 295 | 296 | // Medium screen / desktop 297 | //** Deprecated `$screen-md` as of v3.0.1 298 | $screen-md: 992px !default; 299 | $screen-md-min: $screen-md !default; 300 | //** Deprecated `$screen-desktop` as of v3.0.1 301 | $screen-desktop: $screen-md-min !default; 302 | 303 | // Large screen / wide desktop 304 | //** Deprecated `$screen-lg` as of v3.0.1 305 | $screen-lg: 1200px !default; 306 | $screen-lg-min: $screen-lg !default; 307 | //** Deprecated `$screen-lg-desktop` as of v3.0.1 308 | $screen-lg-desktop: $screen-lg-min !default; 309 | 310 | // So media queries don't overlap when required, provide a maximum 311 | $screen-xs-max: ($screen-sm-min - 1) !default; 312 | $screen-sm-max: ($screen-md-min - 1) !default; 313 | $screen-md-max: ($screen-lg-min - 1) !default; 314 | 315 | 316 | //== Grid system 317 | // 318 | //## Define your custom responsive grid. 319 | 320 | //** Number of columns in the grid. 321 | $grid-columns: 12 !default; 322 | //** Padding between columns. Gets divided in half for the left and right. 323 | $grid-gutter-width: 30px !default; 324 | // Navbar collapse 325 | //** Point at which the navbar becomes uncollapsed. 326 | $grid-float-breakpoint: $screen-sm-min !default; 327 | //** Point at which the navbar begins collapsing. 328 | $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; 329 | 330 | 331 | //== Container sizes 332 | // 333 | //## Define the maximum width of `.container` for different screen sizes. 334 | 335 | // Small screen / tablet 336 | $container-tablet: (720px + $grid-gutter-width) !default; 337 | //** For `$screen-sm-min` and up. 338 | $container-sm: $container-tablet !default; 339 | 340 | // Medium screen / desktop 341 | $container-desktop: (940px + $grid-gutter-width) !default; 342 | //** For `$screen-md-min` and up. 343 | $container-md: $container-desktop !default; 344 | 345 | // Large screen / wide desktop 346 | $container-large-desktop: (1140px + $grid-gutter-width) !default; 347 | //** For `$screen-lg-min` and up. 348 | $container-lg: $container-large-desktop !default; 349 | 350 | 351 | //== Navbar 352 | // 353 | //## 354 | 355 | // Basics of a navbar 356 | $navbar-height: 50px !default; 357 | $navbar-margin-bottom: $line-height-computed !default; 358 | $navbar-border-radius: $border-radius-base !default; 359 | $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; 360 | $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; 361 | $navbar-collapse-max-height: 340px !default; 362 | 363 | $navbar-default-color: #777 !default; 364 | $navbar-default-bg: #f8f8f8 !default; 365 | $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; 366 | 367 | // Navbar links 368 | $navbar-default-link-color: #777 !default; 369 | $navbar-default-link-hover-color: #333 !default; 370 | $navbar-default-link-hover-bg: transparent !default; 371 | $navbar-default-link-active-color: #555 !default; 372 | $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; 373 | $navbar-default-link-disabled-color: #ccc !default; 374 | $navbar-default-link-disabled-bg: transparent !default; 375 | 376 | // Navbar brand label 377 | $navbar-default-brand-color: $navbar-default-link-color !default; 378 | $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; 379 | $navbar-default-brand-hover-bg: transparent !default; 380 | 381 | // Navbar toggle 382 | $navbar-default-toggle-hover-bg: #ddd !default; 383 | $navbar-default-toggle-icon-bar-bg: #888 !default; 384 | $navbar-default-toggle-border-color: #ddd !default; 385 | 386 | 387 | // Inverted navbar 388 | // Reset inverted navbar basics 389 | $navbar-inverse-color: $gray-lighter; 390 | $navbar-inverse-bg: darken(purple, 10%); 391 | $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; 392 | 393 | // Inverted navbar links 394 | $navbar-inverse-link-color: $gray-lighter; 395 | $navbar-inverse-link-hover-color: #fff !default; 396 | $navbar-inverse-link-hover-bg: transparent !default; 397 | $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; 398 | $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; 399 | $navbar-inverse-link-disabled-color: #444 !default; 400 | $navbar-inverse-link-disabled-bg: transparent !default; 401 | 402 | // Inverted navbar brand label 403 | $navbar-inverse-brand-color: $navbar-inverse-link-color !default; 404 | $navbar-inverse-brand-hover-color: #fff !default; 405 | $navbar-inverse-brand-hover-bg: transparent !default; 406 | 407 | // Inverted navbar toggle 408 | $navbar-inverse-toggle-hover-bg: #333 !default; 409 | $navbar-inverse-toggle-icon-bar-bg: #fff !default; 410 | $navbar-inverse-toggle-border-color: #333 !default; 411 | 412 | 413 | //== Navs 414 | // 415 | //## 416 | 417 | //=== Shared nav styles 418 | $nav-link-padding: 10px 15px !default; 419 | $nav-link-hover-bg: $gray-lighter !default; 420 | 421 | $nav-disabled-link-color: $gray-light !default; 422 | $nav-disabled-link-hover-color: $gray-light !default; 423 | 424 | //== Tabs 425 | $nav-tabs-border-color: #ddd !default; 426 | 427 | $nav-tabs-link-hover-border-color: $gray-lighter !default; 428 | 429 | $nav-tabs-active-link-hover-bg: $body-bg !default; 430 | $nav-tabs-active-link-hover-color: $gray !default; 431 | $nav-tabs-active-link-hover-border-color: #ddd !default; 432 | 433 | $nav-tabs-justified-link-border-color: #ddd !default; 434 | $nav-tabs-justified-active-link-border-color: $body-bg !default; 435 | 436 | //== Pills 437 | $nav-pills-border-radius: $border-radius-base !default; 438 | $nav-pills-active-link-hover-bg: $component-active-bg !default; 439 | $nav-pills-active-link-hover-color: $component-active-color !default; 440 | 441 | 442 | //== Pagination 443 | // 444 | //## 445 | 446 | $pagination-color: $link-color !default; 447 | $pagination-bg: #fff !default; 448 | $pagination-border: #ddd !default; 449 | 450 | $pagination-hover-color: $link-hover-color !default; 451 | $pagination-hover-bg: $gray-lighter !default; 452 | $pagination-hover-border: #ddd !default; 453 | 454 | $pagination-active-color: #fff !default; 455 | $pagination-active-bg: $brand-primary !default; 456 | $pagination-active-border: $brand-primary !default; 457 | 458 | $pagination-disabled-color: $gray-light !default; 459 | $pagination-disabled-bg: #fff !default; 460 | $pagination-disabled-border: #ddd !default; 461 | 462 | 463 | //== Pager 464 | // 465 | //## 466 | 467 | $pager-bg: $pagination-bg !default; 468 | $pager-border: $pagination-border !default; 469 | $pager-border-radius: 15px !default; 470 | 471 | $pager-hover-bg: $pagination-hover-bg !default; 472 | 473 | $pager-active-bg: $pagination-active-bg !default; 474 | $pager-active-color: $pagination-active-color !default; 475 | 476 | $pager-disabled-color: $pagination-disabled-color !default; 477 | 478 | 479 | //== Jumbotron 480 | // 481 | //## 482 | 483 | $jumbotron-padding: 30px !default; 484 | $jumbotron-color: inherit !default; 485 | $jumbotron-bg: $gray-lighter !default; 486 | $jumbotron-heading-color: inherit !default; 487 | $jumbotron-font-size: ceil(($font-size-base * 1.5)) !default; 488 | 489 | 490 | //== Form states and alerts 491 | // 492 | //## Define colors for form feedback states and, by default, alerts. 493 | 494 | $state-success-text: darken($brand-success, 5%); 495 | $state-success-bg: lighten($brand-success, 45%); 496 | $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; 497 | 498 | $state-info-text: darken($brand-info, 5%); 499 | $state-info-bg: lighten($brand-info, 45%); 500 | $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; 501 | 502 | $state-warning-text: darken($brand-warning, 5%); 503 | $state-warning-bg: lighten($brand-warning, 45%); 504 | $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; 505 | 506 | $state-danger-text: darken($brand-danger, 5%); 507 | $state-danger-bg: lighten($brand-danger, 45%); 508 | $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; 509 | 510 | 511 | //== Tooltips 512 | // 513 | //## 514 | 515 | //** Tooltip max width 516 | $tooltip-max-width: 200px !default; 517 | //** Tooltip text color 518 | $tooltip-color: #fff !default; 519 | //** Tooltip background color 520 | $tooltip-bg: #000 !default; 521 | $tooltip-opacity: .9 !default; 522 | 523 | //** Tooltip arrow width 524 | $tooltip-arrow-width: 5px !default; 525 | //** Tooltip arrow color 526 | $tooltip-arrow-color: $tooltip-bg !default; 527 | 528 | 529 | //== Popovers 530 | // 531 | //## 532 | 533 | //** Popover body background color 534 | $popover-bg: #fff !default; 535 | //** Popover maximum width 536 | $popover-max-width: 276px !default; 537 | //** Popover border color 538 | $popover-border-color: rgba(0,0,0,.2) !default; 539 | //** Popover fallback border color 540 | $popover-fallback-border-color: #ccc !default; 541 | 542 | //** Popover title background color 543 | $popover-title-bg: darken($popover-bg, 3%) !default; 544 | 545 | //** Popover arrow width 546 | $popover-arrow-width: 10px !default; 547 | //** Popover arrow color 548 | $popover-arrow-color: $popover-bg !default; 549 | 550 | //** Popover outer arrow width 551 | $popover-arrow-outer-width: ($popover-arrow-width + 1) !default; 552 | //** Popover outer arrow color 553 | $popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; 554 | //** Popover outer arrow fallback color 555 | $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; 556 | 557 | 558 | //== Labels 559 | // 560 | //## 561 | 562 | //** Default label background color 563 | $label-default-bg: $gray-light !default; 564 | //** Primary label background color 565 | $label-primary-bg: $brand-primary !default; 566 | //** Success label background color 567 | $label-success-bg: $brand-success !default; 568 | //** Info label background color 569 | $label-info-bg: $brand-info !default; 570 | //** Warning label background color 571 | $label-warning-bg: $brand-warning !default; 572 | //** Danger label background color 573 | $label-danger-bg: $brand-danger !default; 574 | 575 | //** Default label text color 576 | $label-color: #fff !default; 577 | //** Default text color of a linked label 578 | $label-link-hover-color: #fff !default; 579 | 580 | 581 | //== Modals 582 | // 583 | //## 584 | 585 | //** Padding applied to the modal body 586 | $modal-inner-padding: 15px !default; 587 | 588 | //** Padding applied to the modal title 589 | $modal-title-padding: 15px !default; 590 | //** Modal title line-height 591 | $modal-title-line-height: $line-height-base !default; 592 | 593 | //** Background color of modal content area 594 | $modal-content-bg: #fff !default; 595 | //** Modal content border color 596 | $modal-content-border-color: rgba(0,0,0,.2) !default; 597 | //** Modal content border color **for IE8** 598 | $modal-content-fallback-border-color: #999 !default; 599 | 600 | //** Modal backdrop background color 601 | $modal-backdrop-bg: #000 !default; 602 | //** Modal backdrop opacity 603 | $modal-backdrop-opacity: .5 !default; 604 | //** Modal header border color 605 | $modal-header-border-color: #e5e5e5 !default; 606 | //** Modal footer border color 607 | $modal-footer-border-color: $modal-header-border-color !default; 608 | 609 | $modal-lg: 900px !default; 610 | $modal-md: 600px !default; 611 | $modal-sm: 300px !default; 612 | 613 | 614 | //== Alerts 615 | // 616 | //## Define alert colors, border radius, and padding. 617 | 618 | $alert-padding: 15px !default; 619 | $alert-border-radius: $border-radius-base !default; 620 | $alert-link-font-weight: bold !default; 621 | 622 | $alert-success-bg: $state-success-bg !default; 623 | $alert-success-text: $state-success-text !default; 624 | $alert-success-border: $state-success-border !default; 625 | 626 | $alert-info-bg: $state-info-bg !default; 627 | $alert-info-text: $state-info-text !default; 628 | $alert-info-border: $state-info-border !default; 629 | 630 | $alert-warning-bg: $state-warning-bg !default; 631 | $alert-warning-text: $state-warning-text !default; 632 | $alert-warning-border: $state-warning-border !default; 633 | 634 | $alert-danger-bg: $state-danger-bg !default; 635 | $alert-danger-text: $state-danger-text !default; 636 | $alert-danger-border: $state-danger-border !default; 637 | 638 | 639 | //== Progress bars 640 | // 641 | //## 642 | 643 | //** Background color of the whole progress component 644 | $progress-bg: #f5f5f5 !default; 645 | //** Progress bar text color 646 | $progress-bar-color: #fff !default; 647 | //** Variable for setting rounded corners on progress bar. 648 | $progress-border-radius: $border-radius-base !default; 649 | 650 | //** Default progress bar color 651 | $progress-bar-bg: $brand-primary !default; 652 | //** Success progress bar color 653 | $progress-bar-success-bg: $brand-success !default; 654 | //** Warning progress bar color 655 | $progress-bar-warning-bg: $brand-warning !default; 656 | //** Danger progress bar color 657 | $progress-bar-danger-bg: $brand-danger !default; 658 | //** Info progress bar color 659 | $progress-bar-info-bg: $brand-info !default; 660 | 661 | 662 | //== List group 663 | // 664 | //## 665 | 666 | //** Background color on `.list-group-item` 667 | $list-group-bg: #fff !default; 668 | //** `.list-group-item` border color 669 | $list-group-border: #ddd !default; 670 | //** List group border radius 671 | $list-group-border-radius: $border-radius-base !default; 672 | 673 | //** Background color of single list items on hover 674 | $list-group-hover-bg: #f5f5f5 !default; 675 | //** Text color of active list items 676 | $list-group-active-color: $component-active-color !default; 677 | //** Background color of active list items 678 | $list-group-active-bg: $component-active-bg !default; 679 | //** Border color of active list elements 680 | $list-group-active-border: $list-group-active-bg !default; 681 | //** Text color for content within active list items 682 | $list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; 683 | 684 | //** Text color of disabled list items 685 | $list-group-disabled-color: $gray-light !default; 686 | //** Background color of disabled list items 687 | $list-group-disabled-bg: $gray-lighter !default; 688 | //** Text color for content within disabled list items 689 | $list-group-disabled-text-color: $list-group-disabled-color !default; 690 | 691 | $list-group-link-color: #555 !default; 692 | $list-group-link-hover-color: $list-group-link-color !default; 693 | $list-group-link-heading-color: #333 !default; 694 | 695 | 696 | //== Panels 697 | // 698 | //## 699 | 700 | $panel-bg: #fff !default; 701 | $panel-body-padding: 15px !default; 702 | $panel-heading-padding: 10px 15px !default; 703 | $panel-footer-padding: $panel-heading-padding !default; 704 | $panel-border-radius: $border-radius-base !default; 705 | 706 | //** Border color for elements within panels 707 | $panel-inner-border: #ddd !default; 708 | $panel-footer-bg: #f5f5f5 !default; 709 | 710 | $panel-default-text: $gray-dark !default; 711 | $panel-default-border: #ddd !default; 712 | $panel-default-heading-bg: #f5f5f5 !default; 713 | 714 | $panel-primary-text: #fff !default; 715 | $panel-primary-border: $brand-primary !default; 716 | $panel-primary-heading-bg: $brand-primary !default; 717 | 718 | $panel-success-text: $state-success-text !default; 719 | $panel-success-border: $state-success-border !default; 720 | $panel-success-heading-bg: $state-success-bg !default; 721 | 722 | $panel-info-text: $state-info-text !default; 723 | $panel-info-border: $state-info-border !default; 724 | $panel-info-heading-bg: $state-info-bg !default; 725 | 726 | $panel-warning-text: $state-warning-text !default; 727 | $panel-warning-border: $state-warning-border !default; 728 | $panel-warning-heading-bg: $state-warning-bg !default; 729 | 730 | $panel-danger-text: $state-danger-text !default; 731 | $panel-danger-border: $state-danger-border !default; 732 | $panel-danger-heading-bg: $state-danger-bg !default; 733 | 734 | 735 | //== Thumbnails 736 | // 737 | //## 738 | 739 | //** Padding around the thumbnail image 740 | $thumbnail-padding: 4px !default; 741 | //** Thumbnail background color 742 | $thumbnail-bg: $body-bg !default; 743 | //** Thumbnail border color 744 | $thumbnail-border: #ddd !default; 745 | //** Thumbnail border radius 746 | $thumbnail-border-radius: $border-radius-base !default; 747 | 748 | //** Custom text color for thumbnail captions 749 | $thumbnail-caption-color: $text-color !default; 750 | //** Padding around the thumbnail caption 751 | $thumbnail-caption-padding: 9px !default; 752 | 753 | 754 | //== Wells 755 | // 756 | //## 757 | 758 | $well-bg: #f5f5f5 !default; 759 | $well-border: darken($well-bg, 7%) !default; 760 | 761 | 762 | //== Badges 763 | // 764 | //## 765 | 766 | $badge-color: #fff !default; 767 | //** Linked badge text color on hover 768 | $badge-link-hover-color: #fff !default; 769 | $badge-bg: $gray-light !default; 770 | 771 | //** Badge text color in active nav link 772 | $badge-active-color: $link-color !default; 773 | //** Badge background color in active nav link 774 | $badge-active-bg: #fff !default; 775 | 776 | $badge-font-weight: bold !default; 777 | $badge-line-height: 1 !default; 778 | $badge-border-radius: 10px !default; 779 | 780 | 781 | //== Breadcrumbs 782 | // 783 | //## 784 | 785 | $breadcrumb-padding-vertical: 8px !default; 786 | $breadcrumb-padding-horizontal: 15px !default; 787 | //** Breadcrumb background color 788 | $breadcrumb-bg: #f5f5f5 !default; 789 | //** Breadcrumb text color 790 | $breadcrumb-color: #ccc !default; 791 | //** Text color of current page in the breadcrumb 792 | $breadcrumb-active-color: $gray-light !default; 793 | //** Textual separator for between breadcrumb elements 794 | $breadcrumb-separator: "/" !default; 795 | 796 | 797 | //== Carousel 798 | // 799 | //## 800 | 801 | $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; 802 | 803 | $carousel-control-color: #fff !default; 804 | $carousel-control-width: 15% !default; 805 | $carousel-control-opacity: .5 !default; 806 | $carousel-control-font-size: 20px !default; 807 | 808 | $carousel-indicator-active-bg: #fff !default; 809 | $carousel-indicator-border-color: #fff !default; 810 | 811 | $carousel-caption-color: #fff !default; 812 | 813 | 814 | //== Close 815 | // 816 | //## 817 | 818 | $close-font-weight: bold !default; 819 | $close-color: #000 !default; 820 | $close-text-shadow: 0 1px 0 #fff !default; 821 | 822 | 823 | //== Code 824 | // 825 | //## 826 | 827 | $code-color: #c7254e !default; 828 | $code-bg: #f9f2f4 !default; 829 | 830 | $kbd-color: #fff !default; 831 | $kbd-bg: #333 !default; 832 | 833 | $pre-bg: #f5f5f5 !default; 834 | $pre-color: $gray-dark !default; 835 | $pre-border-color: #ccc !default; 836 | $pre-scrollable-max-height: 340px !default; 837 | 838 | 839 | //== Type 840 | // 841 | //## 842 | 843 | //** Horizontal offset for forms and lists. 844 | $component-offset-horizontal: 180px !default; 845 | //** Text muted color 846 | $text-muted: $gray-light !default; 847 | //** Abbreviations and acronyms border color 848 | $abbr-border-color: $gray-light !default; 849 | //** Headings small color 850 | $headings-small-color: $gray-light !default; 851 | //** Blockquote small color 852 | $blockquote-small-color: $gray-light !default; 853 | //** Blockquote font size 854 | $blockquote-font-size: ($font-size-base * 1.25) !default; 855 | //** Blockquote border color 856 | $blockquote-border-color: $gray-lighter !default; 857 | //** Page header border color 858 | $page-header-border-color: $gray-lighter !default; 859 | //** Width of horizontal description list titles 860 | $dl-horizontal-offset: $component-offset-horizontal !default; 861 | //** Horizontal line color. 862 | $hr-border: $gray-lighter !default; 863 | -------------------------------------------------------------------------------- /css/app.scss: -------------------------------------------------------------------------------- 1 | @import url('http://fonts.googleapis.com/css?family=Calibri:400,300,700,900'); 2 | 3 | @import "variables"; 4 | @import "bootstrap"; 5 | @import "bootstrap/theme"; 6 | 7 | @import "theme"; 8 | -------------------------------------------------------------------------------- /css/theme.scss: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 70px; 3 | padding-bottom: 30px; 4 | } 5 | 6 | .theme-dropdown .dropdown-menu { 7 | position: static; 8 | display: block; 9 | margin-bottom: 20px; 10 | } 11 | 12 | .theme-showcase > p > .btn { 13 | margin: 5px 0; 14 | } 15 | 16 | .theme-showcase .navbar .container { 17 | width: auto; 18 | } 19 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var sourcemaps = require('gulp-sourcemaps'); 4 | var uglify = require('gulp-uglifyjs'); 5 | 6 | var config = { 7 | bowerDir: './bower_components', 8 | publicDir: './public', 9 | }; 10 | 11 | gulp.task('fonts', function() { 12 | return gulp.src([ 13 | config.bowerDir + '/bootstrap-sass/assets/fonts/**/*', 14 | ]) 15 | .pipe(gulp.dest(config.publicDir + '/fonts')); 16 | }); 17 | 18 | gulp.task('js', function() { 19 | return gulp.src([ 20 | config.bowerDir + '/jquery/dist/jquery.min.js', 21 | config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', 22 | ]) 23 | .pipe(uglify('app.js', { 24 | compress: false, 25 | outSourceMap: true, 26 | })) 27 | .pipe(gulp.dest(config.publicDir + '/js')); 28 | }); 29 | 30 | gulp.task('css', function() { 31 | return gulp.src('css/app.scss') 32 | .pipe(sourcemaps.init()) 33 | .pipe(sass({ 34 | outputStyle: 'compressed', 35 | includePaths: [config.bowerDir + '/bootstrap-sass/assets/stylesheets'], 36 | })) 37 | .pipe(sourcemaps.write()) 38 | .pipe(gulp.dest(config.publicDir + '/css')); 39 | }); 40 | 41 | gulp.task('default', ['css', 'js', 'fonts']); 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Theme Template for Bootstrap 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 |

25 |

26 | 35 | 54 |

55 |

56 | 57 |

58 | 59 | 60 |

61 |

Theme example

62 |

This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.

63 |

64 | 65 | 66 | 69 |

70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |

78 |

79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |

87 |

88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |

96 |

97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |

105 | 106 | 107 | 110 |

111 |

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

142 |

143 |

144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 |

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

174 |

175 |

176 | 177 |

178 |

179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 |

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

213 |

214 |

215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 |

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

244 |

245 |

246 | 247 | 248 | 251 |

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

252 | 253 | 254 | 257 |

258 | Default 259 | Primary 260 | Success 261 | Info 262 | Warning 263 | Danger 264 |

265 |

266 | Default 267 | Primary 268 | Success 269 | Info 270 | Warning 271 | Danger 272 |

273 |

274 | Default 275 | Primary 276 | Success 277 | Info 278 | Warning 279 | Danger 280 |

281 |

282 | Default 283 | Primary 284 | Success 285 | Info 286 | Warning 287 | Danger 288 |

289 |

290 | Default 291 | Primary 292 | Success 293 | Info 294 | Warning 295 | Danger 296 |

297 |

298 | Default 299 | Primary 300 | Success 301 | Info 302 | Warning 303 | Danger 304 |

305 |

313 | 314 | 315 | 318 |

319 | Inbox 42 320 |

321 |

Home 42
Profile
Messages 3

326 | 327 | 328 | 331 | 341 | 342 | 343 | 346 |

Home
Profile
Messages

351 |

Home
Profile
Messages

356 | 357 | 358 | 361 | 362 |

363 |

364 | 373 |

374 | 391 |

392 |

393 |

394 | 395 |

396 |

397 | 406 |

407 | 424 |

425 |

426 |

427 | 428 | 429 | 432 |

433 | Well done! You successfully read this important alert message. 434 |

435 |

436 | Heads up! This alert needs your attention, but it's not super important. 437 |

438 |

439 | Warning! Best check yo self, you're not looking too good. 440 |

441 |

442 | Oh snap! Change a few things up and try submitting again. 443 |

444 | 445 | 446 | 449 |

450 |

451 |

452 |

453 |

454 |

455 |

456 |

457 |

458 |

459 |

460 |

461 |

462 |

463 |

464 |

465 |

466 |

467 |

468 |

469 |

470 |

471 |

472 | 473 | 474 | 477 |

478 |

479 |

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

486 |

487 |

488 |

497 |

498 |

499 |

500 | 501 |

List group item heading

502 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

503 | 504 | 505 |

List group item heading

506 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

507 | 508 | 509 |

List group item heading

510 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

511 | 512 |

513 |

514 |

515 | 516 | 517 | 520 |

521 |

522 |

523 |

524 |

Panel title

525 |

526 |

527 | Panel content 528 |

529 |

530 |

531 |

532 |

Panel title

533 |

534 |

535 | Panel content 536 |

537 |

538 |

539 |

540 |

541 |

542 |

Panel title

543 |

544 |

545 | Panel content 546 |

547 |

548 |

549 |

550 |

Panel title

551 |

552 |

553 | Panel content 554 |

555 |

556 |

557 |

558 |

559 |

560 |

Panel title

561 |

562 |

563 | Panel content 564 |

565 |

566 |

567 |

568 |

Panel title

569 |

570 |

571 | Panel content 572 |

573 |

574 |

575 |

576 | 577 | 578 | 581 |

582 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

583 |

584 | 585 | 586 | 589 |

590 |

595 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 |

615 | 616 | 617 |

618 | 619 | 620 | 622 | 623 | 624 | 625 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-bootstrap-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "dependencies": { 6 | }, 7 | "devDependencies": { 8 | "gulp": "^3.8.11", 9 | "gulp-bower": "0.0.10", 10 | "gulp-sass": "^1.3.3", 11 | "gulp-sourcemaps": "^1.3.0", 12 | "gulp-uglifyjs": "^0.6.0" 13 | }, 14 | "scripts": { 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/treyhunner/custom-bootstrap-example.git" 20 | }, 21 | "author": "", 22 | "bugs": { 23 | "url": "https://github.com/treyhunner/custom-bootstrap-example/issues" 24 | }, 25 | "homepage": "https://github.com/treyhunner/custom-bootstrap-example" 26 | } 27 | -------------------------------------------------------------------------------- /screenshots/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/treyhunner/custom-bootstrap-example/031e45bd731e6a0c0911b0a5c2e098573ca4ff77/screenshots/after.png -------------------------------------------------------------------------------- /screenshots/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/treyhunner/custom-bootstrap-example/031e45bd731e6a0c0911b0a5c2e098573ca4ff77/screenshots/before.png --------------------------------------------------------------------------------

Theme example

Buttons

Tables

Thumbnails

Labels

258 | Default 259 | Primary 260 | Success 261 | Info 262 | Warning 263 | Danger 264 |

266 | Default 267 | Primary 268 | Success 269 | Info 270 | Warning 271 | Danger 272 |

274 | Default 275 | Primary 276 | Success 277 | Info 278 | Warning 279 | Danger 280 |

282 | Default 283 | Primary 284 | Success 285 | Info 286 | Warning 287 | Danger 288 |

290 | Default 291 | Primary 292 | Success 293 | Info 294 | Warning 295 | Danger 296 |

298 | Default 299 | Primary 300 | Success 301 | Info 302 | Warning 303 | Danger 304 |

Badges

Dropdown menus

Navs

Navbars

Alerts

Progress bars

List groups

List group item heading

List group item heading

List group item heading

Panels

Panel title

Panel title

Panel title

Panel title

Panel title

Panel title

Wells

Carousel