├── .gitignore ├── README.md ├── blocks ├── sprite │ ├── sprite.png │ ├── sprite_type_white.png │ └── sprite.less ├── .bem │ ├── level.js │ └── techs │ │ └── less.js ├── button │ ├── button.deps.js │ ├── button.bemhtml │ ├── button.js │ └── button.less ├── carousel │ ├── carousel.deps.js │ ├── carousel.bemhtml │ ├── carousel.js │ ├── carousel.css │ └── carousel.less ├── alert │ ├── alert.deps.js │ ├── alert.js │ ├── alert.bemhtml │ └── alert.less ├── grid │ └── grid.less ├── utilities │ └── utilities.less ├── close │ └── close.less ├── component-animation │ └── component-animation.less ├── layout │ └── layout.less ├── hero-unit │ └── hero-unit.less ├── breadcrumbs │ └── breadcrumbs.less ├── well │ └── well.less ├── accordion │ └── accordion.less ├── scaffolding │ └── scaffolding.less ├── pager │ └── pager.less ├── thumbnail │ └── thumbnail.less ├── tooltip │ ├── tooltip.less │ └── tooltip.js ├── badge │ └── badge.less ├── label │ └── label.less ├── pagination │ └── pagination.less ├── popover │ ├── popover.less │ └── popover.js ├── code │ └── code.less ├── bootstrap │ └── bootstrap.less ├── transition │ └── transition.js ├── modal │ ├── modal.less │ └── modal.js ├── progress-bar │ └── progress-bar.less ├── dropdown │ ├── dropdown.js │ └── dropdown.less ├── reset │ └── reset.less ├── tab │ └── tab.js ├── scrollspy │ └── scrollspy.js ├── table │ └── table.less ├── collapse │ └── collapse.js ├── type │ └── type.less ├── button-group │ └── button-group.less ├── variables │ └── variables.less ├── typeahead │ └── typeahead.js ├── nav │ └── nav.less ├── navbar │ └── navbar.less ├── responsive │ └── responsive.less ├── form │ └── form.less └── mixin │ └── mixin.less └── bem.sh /.gitignore: -------------------------------------------------------------------------------- 1 | *.class 2 | 3 | # Package Files # 4 | *.jar 5 | *.war 6 | *.ear 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-bl 2 | ============ 3 | 4 | Twitter Bootstrap rewritten to fit BEM methodology -------------------------------------------------------------------------------- /blocks/sprite/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tadatuta/bootstrap-bl/HEAD/blocks/sprite/sprite.png -------------------------------------------------------------------------------- /blocks/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../bem-bl/blocks-common/.bem/level.js'); 2 | -------------------------------------------------------------------------------- /blocks/sprite/sprite_type_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tadatuta/bootstrap-bl/HEAD/blocks/sprite/sprite_type_white.png -------------------------------------------------------------------------------- /blocks/button/button.deps.js: -------------------------------------------------------------------------------- 1 | ({ 2 | shouldDeps: [ 3 | { block: 'variables' }, 4 | { block: 'mixin' } 5 | ] 6 | }) 7 | -------------------------------------------------------------------------------- /blocks/carousel/carousel.deps.js: -------------------------------------------------------------------------------- 1 | ({ 2 | shouldDeps: [ 3 | { block: 'variables' }, 4 | { block: 'mixin' } 5 | ] 6 | }) 7 | -------------------------------------------------------------------------------- /blocks/alert/alert.deps.js: -------------------------------------------------------------------------------- 1 | ({ 2 | shouldDeps: [ 3 | { block: 'variables' }, 4 | { block: 'mixins' }, 5 | { block: 'close' } 6 | ] 7 | }) 8 | -------------------------------------------------------------------------------- /blocks/grid/grid.less: -------------------------------------------------------------------------------- 1 | // Fixed (940px) 2 | #grid > .core(@gridColumnWidth, @gridGutterWidth); 3 | 4 | // Fluid (940px) 5 | #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); 6 | -------------------------------------------------------------------------------- /blocks/alert/alert.js: -------------------------------------------------------------------------------- 1 | BEM.DOM.decl('alert', 2 | { 3 | onSetMod: { 4 | 'js': function() { 5 | console.log('hello!'); 6 | } 7 | } 8 | } 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /blocks/alert/alert.bemhtml: -------------------------------------------------------------------------------- 1 | block alert { 2 | content: [ 3 | { 4 | elem: 'close', 5 | cls: 'close', 6 | tag: 'span', 7 | attrs: { 'data-dismiss': 'alert' }, 8 | content: 'x' 9 | }, 10 | this.ctx.content 11 | ] 12 | } 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/button/button.bemhtml: -------------------------------------------------------------------------------- 1 | block button { 2 | tag: 'span', 3 | js: true 4 | } 5 | 6 | block button, this.ctx.url { 7 | tag: 'a' 8 | attrs: { href: this.ctx.url } 9 | } 10 | 11 | block button, this.ctx.type { 12 | tag: 'input', 13 | attrs: { 14 | type: this.ctx.type, 15 | value: this.ctx.content 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /blocks/utilities/utilities.less: -------------------------------------------------------------------------------- 1 | // UTILITY CLASSES 2 | // --------------- 3 | 4 | // Quick floats 5 | .pull-right { 6 | float: right; 7 | } 8 | .pull-left { 9 | float: left; 10 | } 11 | 12 | // Toggling content 13 | .hide { 14 | display: none; 15 | } 16 | .show { 17 | display: block; 18 | } 19 | 20 | // Visibility 21 | .invisible { 22 | visibility: hidden; 23 | } 24 | -------------------------------------------------------------------------------- /blocks/close/close.less: -------------------------------------------------------------------------------- 1 | // CLOSE ICONS 2 | // ----------- 3 | 4 | .close { 5 | float: right; 6 | font-size: 20px; 7 | font-weight: bold; 8 | line-height: @baseLineHeight; 9 | color: @black; 10 | text-shadow: 0 1px 0 rgba(255,255,255,1); 11 | .opacity(20); 12 | &:hover { 13 | color: @black; 14 | text-decoration: none; 15 | .opacity(40); 16 | cursor: pointer; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /blocks/component-animation/component-animation.less: -------------------------------------------------------------------------------- 1 | // COMPONENT ANIMATIONS 2 | // -------------------- 3 | 4 | .fade { 5 | .transition(opacity .15s linear); 6 | opacity: 0; 7 | &.in { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .collapse { 13 | .transition(height .35s ease); 14 | position:relative; 15 | overflow:hidden; 16 | height: 0; 17 | &.in { 18 | height: auto; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /blocks/layout/layout.less: -------------------------------------------------------------------------------- 1 | // 2 | // Layouts 3 | // Fixed-width and fluid (with sidebar) layouts 4 | // -------------------------------------------- 5 | 6 | 7 | // Container (centered, fixed-width layouts) 8 | .container { 9 | .container-fixed(); 10 | } 11 | 12 | // Fluid layouts (left aligned, with sidebar, min- & max-width content) 13 | .container-fluid { 14 | padding-left: @gridGutterWidth; 15 | padding-right: @gridGutterWidth; 16 | .clearfix(); 17 | } 18 | -------------------------------------------------------------------------------- /blocks/.bem/techs/less.js: -------------------------------------------------------------------------------- 1 | var FS = require('fs'), 2 | INHERIT = require('inherit'), 3 | Tech = require('bem/lib/tech').Tech; 4 | 5 | exports.Tech = INHERIT(Tech, { 6 | 7 | getBuildResultChunk: function(relPath, path, suffix) { 8 | 9 | return [ 10 | '/* ' + relPath + ': begin */ /**/', 11 | FS.readFileSync(path), 12 | '/* ' + relPath + ': end */ /**/', 13 | '\n'].join('\n'); 14 | 15 | } 16 | 17 | }); 18 | -------------------------------------------------------------------------------- /blocks/carousel/carousel.bemhtml: -------------------------------------------------------------------------------- 1 | block carousel { 2 | 3 | js: true 4 | 5 | content: [ 6 | { 7 | elem: 'inner', 8 | content: this.ctx.content 9 | }, 10 | { 11 | elem: 'control', 12 | elemMods: { slide: 'left' }, 13 | content: '‹' 14 | }, 15 | { 16 | elem: 'control', 17 | elemMods: { slide: 'right' }, 18 | content: '›' 19 | } 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /blocks/hero-unit/hero-unit.less: -------------------------------------------------------------------------------- 1 | // HERO UNIT 2 | // --------- 3 | 4 | .hero-unit { 5 | padding: 60px; 6 | margin-bottom: 30px; 7 | background-color: @heroUnitBackground; 8 | .border-radius(6px); 9 | h1 { 10 | margin-bottom: 0; 11 | font-size: 60px; 12 | line-height: 1; 13 | color: @heroUnitHeadingColor; 14 | letter-spacing: -1px; 15 | } 16 | p { 17 | font-size: 18px; 18 | font-weight: 200; 19 | line-height: @baseLineHeight * 1.5; 20 | color: @heroUnitLeadColor; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /blocks/breadcrumbs/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // BREADCRUMBS 2 | // ----------- 3 | 4 | .breadcrumb { 5 | padding: 7px 14px; 6 | margin: 0 0 @baseLineHeight; 7 | list-style: none; 8 | #gradient > .vertical(@white, #f5f5f5); 9 | border: 1px solid #ddd; 10 | .border-radius(3px); 11 | .box-shadow(inset 0 1px 0 @white); 12 | li { 13 | display: inline-block; 14 | .ie7-inline-block(); 15 | text-shadow: 0 1px 0 @white; 16 | } 17 | .divider { 18 | padding: 0 5px; 19 | color: @grayLight; 20 | } 21 | .active a { 22 | color: @grayDark; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /blocks/well/well.less: -------------------------------------------------------------------------------- 1 | // WELLS 2 | // ----- 3 | 4 | .well { 5 | min-height: 20px; 6 | padding: 19px; 7 | margin-bottom: 20px; 8 | background-color: #f5f5f5; 9 | border: 1px solid #eee; 10 | border: 1px solid rgba(0,0,0,.05); 11 | .border-radius(4px); 12 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 13 | blockquote { 14 | border-color: #ddd; 15 | border-color: rgba(0,0,0,.15); 16 | } 17 | } 18 | 19 | // Sizes 20 | .well_size_large { 21 | padding: 24px; 22 | .border-radius(6px); 23 | } 24 | .well_size_small { 25 | padding: 9px; 26 | .border-radius(3px); 27 | } 28 | -------------------------------------------------------------------------------- /blocks/accordion/accordion.less: -------------------------------------------------------------------------------- 1 | // ACCORDION 2 | // --------- 3 | 4 | 5 | // Parent container 6 | .accordion { 7 | margin-bottom: @baseLineHeight; 8 | } 9 | 10 | // Group == heading + body 11 | .accordion-group { 12 | margin-bottom: 2px; 13 | border: 1px solid #e5e5e5; 14 | .border-radius(4px); 15 | } 16 | .accordion-heading { 17 | border-bottom: 0; 18 | } 19 | .accordion-heading .accordion-toggle { 20 | display: block; 21 | padding: 8px 15px; 22 | } 23 | 24 | // Inner needs the styles because you can't animate properly with any styles on the element 25 | .accordion-inner { 26 | padding: 9px 15px; 27 | border-top: 1px solid #e5e5e5; 28 | } 29 | -------------------------------------------------------------------------------- /blocks/scaffolding/scaffolding.less: -------------------------------------------------------------------------------- 1 | // Scaffolding 2 | // Basic and global styles for generating a grid system, structural layout, and page templates 3 | // ------------------------------------------------------------------------------------------- 4 | 5 | 6 | // Body reset 7 | // ---------- 8 | 9 | body { 10 | margin: 0; 11 | font-family: @baseFontFamily; 12 | font-size: @baseFontSize; 13 | line-height: @baseLineHeight; 14 | color: @textColor; 15 | background-color: @bodyBackground; 16 | } 17 | 18 | 19 | // Links 20 | // ----- 21 | 22 | a { 23 | color: @linkColor; 24 | text-decoration: none; 25 | } 26 | a:hover { 27 | color: @linkColorHover; 28 | text-decoration: underline; 29 | } 30 | -------------------------------------------------------------------------------- /blocks/pager/pager.less: -------------------------------------------------------------------------------- 1 | // PAGER 2 | // ----- 3 | 4 | .pager { 5 | margin-left: 0; 6 | margin-bottom: @baseLineHeight; 7 | list-style: none; 8 | text-align: center; 9 | .clearfix(); 10 | } 11 | .pager li { 12 | display: inline; 13 | } 14 | .pager a { 15 | display: inline-block; 16 | padding: 5px 14px; 17 | background-color: #fff; 18 | border: 1px solid #ddd; 19 | .border-radius(15px); 20 | } 21 | .pager a:hover { 22 | text-decoration: none; 23 | background-color: #f5f5f5; 24 | } 25 | .pager .next a { 26 | float: right; 27 | } 28 | .pager .previous a { 29 | float: left; 30 | } 31 | .pager .disabled a, 32 | .pager .disabled a:hover { 33 | color: @grayLight; 34 | background-color: #fff; 35 | cursor: default; 36 | } 37 | -------------------------------------------------------------------------------- /blocks/thumbnail/thumbnail.less: -------------------------------------------------------------------------------- 1 | // THUMBNAILS 2 | // ---------- 3 | 4 | .thumbnails { 5 | margin-left: -@gridGutterWidth; 6 | list-style: none; 7 | .clearfix(); 8 | } 9 | .thumbnails > li { 10 | float: left; 11 | margin: 0 0 @baseLineHeight @gridGutterWidth; 12 | } 13 | .thumbnail { 14 | display: block; 15 | padding: 4px; 16 | line-height: 1; 17 | border: 1px solid #ddd; 18 | .border-radius(4px); 19 | .box-shadow(0 1px 1px rgba(0,0,0,.075)); 20 | } 21 | // Add a hover state for linked versions only 22 | a.thumbnail:hover { 23 | border-color: @linkColor; 24 | .box-shadow(0 1px 4px rgba(0,105,214,.25)); 25 | } 26 | // Images and captions 27 | .thumbnail > img { 28 | display: block; 29 | max-width: 100%; 30 | margin-left: auto; 31 | margin-right: auto; 32 | } 33 | .thumbnail .caption { 34 | padding: 9px; 35 | } 36 | -------------------------------------------------------------------------------- /blocks/tooltip/tooltip.less: -------------------------------------------------------------------------------- 1 | // TOOLTIP 2 | // ------= 3 | 4 | .tooltip { 5 | position: absolute; 6 | z-index: @zindexTooltip; 7 | display: block; 8 | visibility: visible; 9 | padding: 5px; 10 | font-size: 11px; 11 | .opacity(0); 12 | &.in { .opacity(80); } 13 | &.top { margin-top: -2px; } 14 | &.right { margin-left: 2px; } 15 | &.bottom { margin-top: 2px; } 16 | &.left { margin-left: -2px; } 17 | &.top .tooltip-arrow { #popoverArrow > .top(); } 18 | &.left .tooltip-arrow { #popoverArrow > .left(); } 19 | &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } 20 | &.right .tooltip-arrow { #popoverArrow > .right(); } 21 | } 22 | .tooltip-inner { 23 | max-width: 200px; 24 | padding: 3px 8px; 25 | color: @white; 26 | text-align: center; 27 | text-decoration: none; 28 | background-color: @black; 29 | .border-radius(4px); 30 | } 31 | .tooltip-arrow { 32 | position: absolute; 33 | width: 0; 34 | height: 0; 35 | } 36 | -------------------------------------------------------------------------------- /blocks/badge/badge.less: -------------------------------------------------------------------------------- 1 | // BADGES 2 | // ------ 3 | 4 | // Base 5 | .badge { 6 | padding: 1px 9px 2px; 7 | font-size: @baseFontSize * .925; 8 | font-weight: bold; 9 | white-space: nowrap; 10 | color: @white; 11 | background-color: @grayLight; 12 | .border-radius(9px); 13 | } 14 | 15 | // Hover state 16 | .badge:hover { 17 | color: @white; 18 | text-decoration: none; 19 | cursor: pointer; 20 | } 21 | 22 | // Colors 23 | .badge-error { background-color: @errorText; } 24 | .badge-error:hover { background-color: darken(@errorText, 10%); } 25 | 26 | .badge_theme_warning { background-color: @orange; } 27 | .badge_theme_warning:hover { background-color: darken(@orange, 10%); } 28 | 29 | .badge_theme_success { background-color: @successText; } 30 | .badge_theme_success:hover { background-color: darken(@successText, 10%); } 31 | 32 | .badge_theme_info { background-color: @infoText; } 33 | .badge_theme_info:hover { background-color: darken(@infoText, 10%); } 34 | 35 | .badge_theme_inverse { background-color: @grayDark; } 36 | .badge_theme_inverse:hover { background-color: darken(@grayDark, 10%); } 37 | -------------------------------------------------------------------------------- /blocks/label/label.less: -------------------------------------------------------------------------------- 1 | // LABELS 2 | // ------ 3 | 4 | // Base 5 | .label { 6 | padding: 1px 4px 2px; 7 | font-size: @baseFontSize * .846; 8 | font-weight: bold; 9 | line-height: 13px; // ensure proper line-height if floated 10 | color: @white; 11 | vertical-align: middle; 12 | white-space: nowrap; 13 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 14 | background-color: @grayLight; 15 | .border-radius(3px); 16 | } 17 | 18 | // Hover state 19 | .label:hover { 20 | color: @white; 21 | text-decoration: none; 22 | } 23 | 24 | // Colors 25 | .label-important { background-color: @errorText; } 26 | .label-important:hover { background-color: darken(@errorText, 10%); } 27 | 28 | .label_theme_warning { background-color: @orange; } 29 | .label_theme_warning:hover { background-color: darken(@orange, 10%); } 30 | 31 | .label_theme_success { background-color: @successText; } 32 | .label_theme_success:hover { background-color: darken(@successText, 10%); } 33 | 34 | .label_theme_info { background-color: @infoText; } 35 | .label_theme_info:hover { background-color: darken(@infoText, 10%); } 36 | 37 | .label_theme_inverse { background-color: @grayDark; } 38 | .label_theme_inverse:hover { background-color: darken(@grayDark, 10%); } 39 | -------------------------------------------------------------------------------- /blocks/pagination/pagination.less: -------------------------------------------------------------------------------- 1 | // PAGINATION 2 | // ---------- 3 | 4 | .pagination { 5 | height: @baseLineHeight * 2; 6 | margin: @baseLineHeight 0; 7 | } 8 | .pagination ul { 9 | display: inline-block; 10 | .ie7-inline-block(); 11 | margin-left: 0; 12 | margin-bottom: 0; 13 | .border-radius(3px); 14 | .box-shadow(0 1px 2px rgba(0,0,0,.05)); 15 | } 16 | .pagination li { 17 | display: inline; 18 | } 19 | .pagination a { 20 | float: left; 21 | padding: 0 14px; 22 | line-height: (@baseLineHeight * 2) - 2; 23 | text-decoration: none; 24 | border: 1px solid #ddd; 25 | border-left-width: 0; 26 | } 27 | .pagination a:hover, 28 | .pagination .active a { 29 | background-color: #f5f5f5; 30 | } 31 | .pagination .active a { 32 | color: @grayLight; 33 | cursor: default; 34 | } 35 | .pagination .disabled span, 36 | .pagination .disabled a, 37 | .pagination .disabled a:hover { 38 | color: @grayLight; 39 | background-color: transparent; 40 | cursor: default; 41 | } 42 | .pagination li:first-child a { 43 | border-left-width: 1px; 44 | .border-radius(3px 0 0 3px); 45 | } 46 | .pagination li:last-child a { 47 | .border-radius(0 3px 3px 0); 48 | } 49 | 50 | // Centered 51 | .pagination-centered { 52 | text-align: center; 53 | } 54 | .pagination-right { 55 | text-align: right; 56 | } 57 | -------------------------------------------------------------------------------- /blocks/alert/alert.less: -------------------------------------------------------------------------------- 1 | // ALERT STYLES 2 | // ------------ 3 | 4 | // Base alert styles 5 | .alert { 6 | padding: 8px 35px 8px 14px; 7 | margin-bottom: @baseLineHeight; 8 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 9 | background-color: @warningBackground; 10 | border: 1px solid @warningBorder; 11 | .border-radius(4px); 12 | color: @warningText; 13 | } 14 | .alert-heading { 15 | color: inherit; 16 | } 17 | 18 | // Adjust close link position 19 | .alert .close { 20 | position: relative; 21 | top: -2px; 22 | right: -21px; 23 | line-height: 18px; 24 | } 25 | 26 | // Alternate styles 27 | // ---------------- 28 | 29 | .alert_theme_success { 30 | background-color: @successBackground; 31 | border-color: @successBorder; 32 | color: @successText; 33 | } 34 | .alert_theme_danger, 35 | .alert-error { 36 | background-color: @errorBackground; 37 | border-color: @errorBorder; 38 | color: @errorText; 39 | } 40 | .alert_theme_info { 41 | background-color: @infoBackground; 42 | border-color: @infoBorder; 43 | color: @infoText; 44 | } 45 | 46 | // Block alerts 47 | // ------------------------ 48 | .alert-block { 49 | padding-top: 14px; 50 | padding-bottom: 14px; 51 | } 52 | .alert-block > p, 53 | .alert-block > ul { 54 | margin-bottom: 0; 55 | } 56 | .alert-block p + p { 57 | margin-top: 5px; 58 | } 59 | -------------------------------------------------------------------------------- /blocks/popover/popover.less: -------------------------------------------------------------------------------- 1 | // POPOVERS 2 | // -------- 3 | 4 | .popover { 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | z-index: @zindexPopover; 9 | display: none; 10 | padding: 5px; 11 | &.top { margin-top: -5px; } 12 | &.right { margin-left: 5px; } 13 | &.bottom { margin-top: 5px; } 14 | &.left { margin-left: -5px; } 15 | &.top .arrow { #popoverArrow > .top(); } 16 | &.right .arrow { #popoverArrow > .right(); } 17 | &.bottom .arrow { #popoverArrow > .bottom(); } 18 | &.left .arrow { #popoverArrow > .left(); } 19 | .arrow { 20 | position: absolute; 21 | width: 0; 22 | height: 0; 23 | } 24 | } 25 | .popover-inner { 26 | padding: 3px; 27 | width: 280px; 28 | overflow: hidden; 29 | background: @black; // has to be full background declaration for IE fallback 30 | background: rgba(0,0,0,.8); 31 | .border-radius(6px); 32 | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); 33 | } 34 | .popover-title { 35 | padding: 9px 15px; 36 | line-height: 1; 37 | background-color: #f5f5f5; 38 | border-bottom:1px solid #eee; 39 | .border-radius(3px 3px 0 0); 40 | } 41 | .popover-content { 42 | padding: 14px; 43 | background-color: @white; 44 | .border-radius(0 0 3px 3px); 45 | .background-clip(padding-box); 46 | p, ul, ol { 47 | margin-bottom: 0; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /blocks/code/code.less: -------------------------------------------------------------------------------- 1 | // Code.less 2 | // Code typography styles for the and 
 elements
 3 | // --------------------------------------------------------
 4 | 
 5 | // Inline and block code styles
 6 | code,
 7 | pre {
 8 |   padding: 0 3px 2px;
 9 |   #font > #family > .monospace;
10 |   font-size: @baseFontSize - 1;
11 |   color: @grayDark;
12 |   .border-radius(3px);
13 | }
14 | 
15 | // Inline code
16 | code {
17 |   padding: 2px 4px;
18 |   color: #d14;
19 |   background-color: #f7f7f9;
20 |   border: 1px solid #e1e1e8;
21 | }
22 | 
23 | // Blocks of code
24 | pre {
25 |   display: block;
26 |   padding: (@baseLineHeight - 1) / 2;
27 |   margin: 0 0 @baseLineHeight / 2;
28 |   font-size: @baseFontSize * .925; // 13px to 12px
29 |   line-height: @baseLineHeight;
30 |   background-color: #f5f5f5;
31 |   border: 1px solid #ccc; // fallback for IE7-8
32 |   border: 1px solid rgba(0,0,0,.15);
33 |   .border-radius(4px);
34 |   white-space: pre;
35 |   white-space: pre-wrap;
36 |   word-break: break-all;
37 |   word-wrap: break-word;
38 | 
39 |   // Make prettyprint styles more spaced out for readability
40 |   &.prettyprint {
41 |     margin-bottom: @baseLineHeight;
42 |   }
43 | 
44 |   // Account for some code outputs that place code tags in pre tags
45 |   code {
46 |     padding: 0;
47 |     color: inherit;
48 |     background-color: transparent;
49 |     border: 0;
50 |   }
51 | }
52 | 
53 | // Enable scrollable blocks of code
54 | .pre-scrollable {
55 |   max-height: 340px;
56 |   overflow-y: scroll;
57 | }
58 | 


--------------------------------------------------------------------------------
/blocks/carousel/carousel.js:
--------------------------------------------------------------------------------
 1 | BEM.DOM.decl('carousel',
 2 | {
 3 |     onSetMod: {
 4 |         'js': function() {
 5 | 
 6 |             var _this = this;
 7 |  
 8 |             this.bindTo(this.elem('control'), 'click', function(e) {
 9 |                 _this.hasMod(e.data.domElem, 'slide', 'left') ? _this.prev() : _this.next();
10 |             });
11 | 
12 |             this.update();
13 |         }    
14 |     },
15 |     update: function() {
16 |         this.elem('item', 'state', 'active').length || this.setMod(this.elem('item').eq(0), 'state', 'active');
17 |     },
18 |     next: function() {
19 |         return this.slide('next');        
20 |     },
21 |     prev: function() {
22 |         return this.slide('prev');    
23 |     },
24 |     slide: function(type) {
25 |         var active = this.findElem('item', 'state', 'active'),
26 |             next = active[type](),
27 |             fallback = type == 'next' ? 'first' : 'last';
28 | 
29 |         next = next.length ? next : this.elem('item')[fallback]();
30 | 
31 |         this
32 |             .trigger('slide')
33 |             .delMod(active, 'state')
34 |             .setMod(next, 'state', 'active')
35 |             .trigger('slid');
36 |     },
37 |         getDefaultParams: function() {
38 |         return {
39 |             interval: 1000    
40 |         }    
41 |     },
42 |     cycle: function(ctx) {
43 |         var _this = ctx ? ctx : this;
44 |         
45 |         this.interval = setInterval(function() {
46 |             _this.next.call(_this);
47 |         }, _this.params.interval);    
48 |     }
49 | });
50 | 


--------------------------------------------------------------------------------
/blocks/bootstrap/bootstrap.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Bootstrap v2.0.2
 3 |  *
 4 |  * Copyright 2012 Twitter, Inc
 5 |  * Licensed under the Apache License v2.0
 6 |  * http://www.apache.org/licenses/LICENSE-2.0
 7 |  *
 8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
 9 |  */
10 | 
11 | // CSS Reset
12 | @import "reset.less";
13 | 
14 | // Core variables and mixins
15 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc
16 | @import "mixins.less";
17 | 
18 | // Grid system and page structure
19 | @import "scaffolding.less";
20 | @import "grid.less";
21 | @import "layouts.less";
22 | 
23 | // Base CSS
24 | @import "type.less";
25 | @import "code.less";
26 | @import "forms.less";
27 | @import "tables.less";
28 | 
29 | // Components: common
30 | @import "sprites.less";
31 | @import "dropdowns.less";
32 | @import "wells.less";
33 | @import "component-animations.less";
34 | @import "close.less";
35 | 
36 | // Components: Buttons & Alerts
37 | @import "buttons.less";
38 | @import "button-groups.less";
39 | @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
40 | 
41 | // Components: Nav
42 | @import "navs.less";
43 | @import "navbar.less";
44 | @import "breadcrumbs.less";
45 | @import "pagination.less";
46 | @import "pager.less";
47 | 
48 | // Components: Popovers
49 | @import "modals.less";
50 | @import "tooltip.less";
51 | @import "popovers.less";
52 | 
53 | // Components: Misc
54 | @import "thumbnails.less";
55 | @import "labels.less";
56 | @import "badges.less";
57 | @import "progress-bars.less";
58 | @import "accordion.less";
59 | @import "carousel.less";
60 | @import "hero-unit.less";
61 | 
62 | // Utility classes
63 | @import "utilities.less"; // Has to be last to override when necessary
64 | 


--------------------------------------------------------------------------------
/blocks/transition/transition.js:
--------------------------------------------------------------------------------
 1 | /* ===================================================
 2 |  * bootstrap-transition.js v2.0.2
 3 |  * http://twitter.github.com/bootstrap/javascript.html#transitions
 4 |  * ===================================================
 5 |  * Copyright 2012 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Apache License, Version 2.0 (the "License");
 8 |  * you may not use this file except in compliance with the License.
 9 |  * You may obtain a copy of the License at
10 |  *
11 |  * http://www.apache.org/licenses/LICENSE-2.0
12 |  *
13 |  * Unless required by applicable law or agreed to in writing, software
14 |  * distributed under the License is distributed on an "AS IS" BASIS,
15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  * See the License for the specific language governing permissions and
17 |  * limitations under the License.
18 |  * ========================================================== */
19 | 
20 | !function( $ ) {
21 | 
22 |   $(function () {
23 | 
24 |     "use strict"
25 | 
26 |     /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
27 |      * ======================================================= */
28 | 
29 |     $.support.transition = (function () {
30 |       var thisBody = document.body || document.documentElement
31 |         , thisStyle = thisBody.style
32 |         , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
33 | 
34 |       return support && {
35 |         end: (function () {
36 |           var transitionEnd = "TransitionEnd"
37 |           if ( $.browser.webkit ) {
38 |           	transitionEnd = "webkitTransitionEnd"
39 |           } else if ( $.browser.mozilla ) {
40 |           	transitionEnd = "transitionend"
41 |           } else if ( $.browser.opera ) {
42 |           	transitionEnd = "oTransitionEnd"
43 |           }
44 |           return transitionEnd
45 |         }())
46 |       }
47 |     })()
48 | 
49 |   })
50 | 
51 | }( window.jQuery );
52 | 


--------------------------------------------------------------------------------
/blocks/carousel/carousel.css:
--------------------------------------------------------------------------------
  1 | .carousel {
  2 |   position: relative;
  3 |   margin-bottom: 1em;
  4 |   line-height: 1;
  5 | }
  6 | 
  7 | .carousel__inner {
  8 |   overflow: hidden;
  9 |   width: 100%;
 10 |   position: relative;
 11 | }
 12 | 
 13 | .carousel__item {
 14 |   display: none;
 15 |   position: relative;
 16 |   -moz-transition: left .6s;
 17 |   -webkit-transition: left .6s;
 18 |   -o-transition: left .6s;
 19 |   transition: left .6s;
 20 | }
 21 | 
 22 | .carousel__item > img {
 23 |   display: block;
 24 |   line-height: 1;
 25 | }
 26 | 
 27 | .carousel__item_state_active,
 28 | .carousel__item_state_next,
 29 | .carousel__item_state_prev {
 30 |   display: block;
 31 | }
 32 | 
 33 | .carousel__item_state_active {
 34 |   left: 0;
 35 | }
 36 | 
 37 | .carousel__item_state_next,
 38 | .carousel__item_state_prev {
 39 |   position: absolute;
 40 |   top: 0;
 41 |   width: 100%;
 42 | }
 43 | 
 44 | .carousel__item_state_next {
 45 |   left: 100%;
 46 | }
 47 | .carousel__item_state_prev {
 48 |   left: -100%;
 49 | }
 50 | .carousel__item_state_next.carousel__control_slide_left,
 51 | .carousel__item_state_prev.carousel__control_slide_right {
 52 |   left: 0;
 53 | }
 54 | 
 55 | .carousel__item_state_active.carousel__control_slide_left {
 56 |   left: -100%;
 57 | }
 58 | .carousel__item_state_active.carousel__control_slide_right {
 59 |   left: 100%;
 60 | }
 61 | 
 62 | .carousel__control {
 63 |   position: absolute;
 64 |   top: 40%;
 65 |   left: 15px;
 66 |   width: 40px;
 67 |   height: 40px;
 68 |   margin-top: -20px;
 69 |   font-size: 60px;
 70 |   font-weight: 100;
 71 |   line-height: 30px;
 72 |   color: #fff;
 73 |   text-align: center;
 74 |   background: #333;
 75 |   border: 3px solid #fff;
 76 |   border-radius: 23px;
 77 |   opacity: 0.5;
 78 | }
 79 | 
 80 | .carousel__control_slide_right {
 81 |   left: auto;
 82 |   right: 15px;
 83 | }
 84 | 
 85 | .carousel__control_slide_right:hover {
 86 |   color: #fff;
 87 |   text-decoration: none;
 88 |   opacity: 0.9;
 89 | }
 90 | 
 91 | .carousel__caption {
 92 |   position: absolute;
 93 |   left: 0;
 94 |   right: 0;
 95 |   bottom: 0;
 96 |   padding: 10px 15px 5px;
 97 |   background: #333;
 98 |   background: rgba(0,0,0,.75);
 99 | }
100 | .carousel__caption h4,
101 | .carousel__caption p {
102 |   color: #fff;
103 | }


--------------------------------------------------------------------------------
/blocks/modal/modal.less:
--------------------------------------------------------------------------------
 1 | // MODALS
 2 | // ------
 3 | 
 4 | // Recalculate z-index where appropriate
 5 | .modal-open {
 6 |   .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
 7 |   .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
 8 |   .popover       {  z-index: @zindexPopover  + @zindexModal; }
 9 |   .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
10 | }
11 | 
12 | // Background
13 | .modal-backdrop {
14 |   position: fixed;
15 |   top: 0;
16 |   right: 0;
17 |   bottom: 0;
18 |   left: 0;
19 |   z-index: @zindexModalBackdrop;
20 |   background-color: @black;
21 |   // Fade for backdrop
22 |   &.fade { opacity: 0; }
23 | }
24 | 
25 | .modal-backdrop,
26 | .modal-backdrop.fade.in {
27 |   .opacity(80);
28 | }
29 | 
30 | // Base modal
31 | .modal {
32 |   position: fixed;
33 |   top: 50%;
34 |   left: 50%;
35 |   z-index: @zindexModal;
36 |   overflow: auto;
37 |   width: 560px;
38 |   margin: -250px 0 0 -280px;
39 |   background-color: @white;
40 |   border: 1px solid #999;
41 |   border: 1px solid rgba(0,0,0,.3);
42 |   *border: 1px solid #999; /* IE6-7 */
43 |   .border-radius(6px);
44 |   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
45 |   .background-clip(padding-box);
46 |   &.fade {
47 |     .transition(e('opacity .3s linear, top .3s ease-out'));
48 |     top: -25%;
49 |   }
50 |   &.fade.in { top: 50%; }
51 | }
52 | .modal-header {
53 |   padding: 9px 15px;
54 |   border-bottom: 1px solid #eee;
55 |   // Close icon
56 |   .close { margin-top: 2px; }
57 | }
58 | 
59 | // Body (where all modal content resises)
60 | .modal-body {
61 |   overflow-y: auto;
62 |   max-height: 400px;
63 |   padding: 15px;
64 | }
65 | // Remove bottom margin if need be
66 | .modal-form {
67 |   margin-bottom: 0;
68 | }
69 | 
70 | // Footer (for actions)
71 | .modal-footer {
72 |   padding: 14px 15px 15px;
73 |   margin-bottom: 0;
74 |   text-align: right; // right align buttons
75 |   background-color: #f5f5f5;
76 |   border-top: 1px solid #ddd;
77 |   .border-radius(0 0 6px 6px);
78 |   .box-shadow(inset 0 1px 0 @white);
79 |   .clearfix(); // clear it in case folks use .pull-* classes on buttons
80 | 
81 |   // Properly space out buttons
82 |   .button + .btn {
83 |     margin-left: 5px;
84 |     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
85 |   }
86 |   // but override that for button groups
87 |   .button-group .btn + .btn {
88 |     margin-left: -1px;
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/blocks/carousel/carousel.less:
--------------------------------------------------------------------------------
  1 | // CAROUSEL
  2 | // --------
  3 | 
  4 | .carousel {
  5 |   position: relative;
  6 |   margin-bottom: @baseLineHeight;
  7 |   line-height: 1;
  8 | }
  9 | 
 10 | .carousel__inner {
 11 |   overflow: hidden;
 12 |   width: 100%;
 13 |   position: relative;
 14 | }
 15 | 
 16 | .carousel {
 17 | 
 18 |   .carousel__item {
 19 |     display: none;
 20 |     position: relative;
 21 |     .transition(.6s ease-in-out left);
 22 |   }
 23 | 
 24 |   // Account for jankitude on images
 25 |   .carousel__item > img {
 26 |     display: block;
 27 |     line-height: 1;
 28 |   }
 29 | 
 30 |   .carousel__item_state_active,
 31 |   .carousel__item_state_next,
 32 |   .carousel__item_state_prev { display: block; }
 33 | 
 34 |   .carousel__item_state_active {
 35 |     left: 0;
 36 |   }
 37 | 
 38 |   .carousel__item_state_next,
 39 |   .carousel__item_state_prev {
 40 |     position: absolute;
 41 |     top: 0;
 42 |     width: 100%;
 43 |   }
 44 | 
 45 |   .carousel__item_state_next {
 46 |     left: 100%;
 47 |   }
 48 |   .carousel__item_state_prev {
 49 |     left: -100%;
 50 |   }
 51 |   .carousel__item_state_next.carousel__control_slide_left,
 52 |   .prev.right {
 53 |     left: 0;
 54 |   }
 55 | 
 56 |   .carousel__item_state_active.carousel__control_slide_left {
 57 |     left: -100%;
 58 |   }
 59 |   .carousel__item_state_active.carousel__control_slide_right {
 60 |     left: 100%;
 61 |   }
 62 | 
 63 | }
 64 | 
 65 | // Left/right controls for nav
 66 | // ---------------------------
 67 | 
 68 | .carousel__control {
 69 |   position: absolute;
 70 |   top: 40%;
 71 |   left: 15px;
 72 |   width: 40px;
 73 |   height: 40px;
 74 |   margin-top: -20px;
 75 |   font-size: 60px;
 76 |   font-weight: 100;
 77 |   line-height: 30px;
 78 |   color: @white;
 79 |   text-align: center;
 80 |   background: @grayDarker;
 81 |   border: 3px solid @white;
 82 |   .border-radius(23px);
 83 |   .opacity(50);
 84 | 
 85 |   // we can't have this transition here
 86 |   // because webkit cancels the carousel
 87 |   // animation if you trip this while
 88 |   // in the middle of another animation
 89 |   // ;_;
 90 |   // .transition(opacity .2s linear);
 91 | 
 92 |   // Reposition the right one
 93 |   &.carousel__control_slide_right {
 94 |     left: auto;
 95 |     right: 15px;
 96 |   }
 97 | 
 98 |   // Hover state
 99 |   &:hover {
100 |     color: @white;
101 |     text-decoration: none;
102 |     .opacity(90);
103 |   }
104 | }
105 | 
106 | // Caption for text below images
107 | // -----------------------------
108 | 
109 | .carousel__caption {
110 |   position: absolute;
111 |   left: 0;
112 |   right: 0;
113 |   bottom: 0;
114 |   padding: 10px 15px 5px;
115 |   background: @grayDark;
116 |   background: rgba(0,0,0,.75);
117 | }
118 | .carousel__caption h4,
119 | .carousel__caption p {
120 |   color: @white;
121 | }
122 | 


--------------------------------------------------------------------------------
/blocks/progress-bar/progress-bar.less:
--------------------------------------------------------------------------------
  1 | // PROGRESS BARS
  2 | // -------------
  3 | 
  4 | 
  5 | // ANIMATIONS
  6 | // ----------
  7 | 
  8 | // Webkit
  9 | @-webkit-keyframes progress-bar-stripes {
 10 |   from  { background-position: 0 0; }
 11 |   to    { background-position: 40px 0; }
 12 | }
 13 | 
 14 | // Firefox
 15 | @-moz-keyframes progress-bar-stripes {
 16 |   from  { background-position: 0 0; }
 17 |   to    { background-position: 40px 0; }
 18 | }
 19 | 
 20 | // IE9
 21 | @-ms-keyframes progress-bar-stripes {
 22 |   from  { background-position: 0 0; }
 23 |   to    { background-position: 40px 0; }
 24 | }
 25 | 
 26 | // Spec
 27 | @keyframes progress-bar-stripes {
 28 |   from  { background-position: 0 0; }
 29 |   to    { background-position: 40px 0; }
 30 | }
 31 | 
 32 | 
 33 | 
 34 | // THE BARS
 35 | // --------
 36 | 
 37 | // Outer container
 38 | .progress {
 39 |   overflow: hidden;
 40 |   height: 18px;
 41 |   margin-bottom: 18px;
 42 |   #gradient > .vertical(#f5f5f5, #f9f9f9);
 43 |   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 44 |   .border-radius(4px);
 45 | }
 46 | 
 47 | // Bar of progress
 48 | .progress .bar {
 49 |   width: 0%;
 50 |   height: 18px;
 51 |   color: @white;
 52 |   font-size: 12px;
 53 |   text-align: center;
 54 |   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 55 |   #gradient > .vertical(#149bdf, #0480be);
 56 |   .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
 57 |   .box-sizing(border-box);
 58 |   .transition(width .6s ease);
 59 | }
 60 | 
 61 | // Striped bars
 62 | .progress-striped .bar {
 63 |   #gradient > .striped(#149bdf);
 64 |   .background-size(40px 40px);
 65 | }
 66 | 
 67 | // Call animation for the active one
 68 | .progress.active .bar {
 69 |   -webkit-animation: progress-bar-stripes 2s linear infinite;
 70 |      -moz-animation: progress-bar-stripes 2s linear infinite;
 71 |           animation: progress-bar-stripes 2s linear infinite;
 72 | }
 73 | 
 74 | 
 75 | 
 76 | // COLORS
 77 | // ------
 78 | 
 79 | // Danger (red)
 80 | .progress_theme_danger .bar {
 81 |   #gradient > .vertical(#ee5f5b, #c43c35);
 82 | }
 83 | .progress_theme_danger.progress-striped .bar {
 84 |   #gradient > .striped(#ee5f5b);
 85 | }
 86 | 
 87 | // Success (green)
 88 | .progress_theme_success .bar {
 89 |   #gradient > .vertical(#62c462, #57a957);
 90 | }
 91 | .progress_theme_success.progress-striped .bar {
 92 |   #gradient > .striped(#62c462);
 93 | }
 94 | 
 95 | // Info (teal)
 96 | .progress_theme_info .bar {
 97 |   #gradient > .vertical(#5bc0de, #339bb9);
 98 | }
 99 | .progress_theme_info.progress-striped .bar {
100 |   #gradient > .striped(#5bc0de);
101 | }
102 | 
103 | // Warning (orange)
104 | .progress_theme_warning .bar {
105 |   #gradient > .vertical(lighten(@orange, 15%), @orange);
106 | }
107 | .progress_theme_warning.progress-striped .bar {
108 |   #gradient > .striped(lighten(@orange, 15%));
109 | }
110 | 


--------------------------------------------------------------------------------
/blocks/dropdown/dropdown.js:
--------------------------------------------------------------------------------
 1 | /* ============================================================
 2 |  * bootstrap-dropdown.js v2.0.2
 3 |  * http://twitter.github.com/bootstrap/javascript.html#dropdowns
 4 |  * ============================================================
 5 |  * Copyright 2012 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Apache License, Version 2.0 (the "License");
 8 |  * you may not use this file except in compliance with the License.
 9 |  * You may obtain a copy of the License at
10 |  *
11 |  * http://www.apache.org/licenses/LICENSE-2.0
12 |  *
13 |  * Unless required by applicable law or agreed to in writing, software
14 |  * distributed under the License is distributed on an "AS IS" BASIS,
15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  * See the License for the specific language governing permissions and
17 |  * limitations under the License.
18 |  * ============================================================ */
19 | 
20 | 
21 | !function( $ ){
22 | 
23 |   "use strict"
24 | 
25 |  /* DROPDOWN CLASS DEFINITION
26 |   * ========================= */
27 | 
28 |   var toggle = '[data-toggle="dropdown"]'
29 |     , Dropdown = function ( element ) {
30 |         var $el = $(element).on('click.dropdown.data-api', this.toggle)
31 |         $('html').on('click.dropdown.data-api', function () {
32 |           $el.parent().removeClass('open')
33 |         })
34 |       }
35 | 
36 |   Dropdown.prototype = {
37 | 
38 |     constructor: Dropdown
39 | 
40 |   , toggle: function ( e ) {
41 |       var $this = $(this)
42 |         , selector = $this.attr('data-target')
43 |         , $parent
44 |         , isActive
45 | 
46 |       if (!selector) {
47 |         selector = $this.attr('href')
48 |         selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
49 |       }
50 | 
51 |       $parent = $(selector)
52 |       $parent.length || ($parent = $this.parent())
53 | 
54 |       isActive = $parent.hasClass('open')
55 | 
56 |       clearMenus()
57 |       !isActive && $parent.toggleClass('open')
58 | 
59 |       return false
60 |     }
61 | 
62 |   }
63 | 
64 |   function clearMenus() {
65 |     $(toggle).parent().removeClass('open')
66 |   }
67 | 
68 | 
69 |   /* DROPDOWN PLUGIN DEFINITION
70 |    * ========================== */
71 | 
72 |   $.fn.dropdown = function ( option ) {
73 |     return this.each(function () {
74 |       var $this = $(this)
75 |         , data = $this.data('dropdown')
76 |       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
77 |       if (typeof option == 'string') data[option].call($this)
78 |     })
79 |   }
80 | 
81 |   $.fn.dropdown.Constructor = Dropdown
82 | 
83 | 
84 |   /* APPLY TO STANDARD DROPDOWN ELEMENTS
85 |    * =================================== */
86 | 
87 |   $(function () {
88 |     $('html').on('click.dropdown.data-api', clearMenus)
89 |     $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
90 |   })
91 | 
92 | }( window.jQuery );
93 | 


--------------------------------------------------------------------------------
/blocks/reset/reset.less:
--------------------------------------------------------------------------------
  1 | // Reset.less
  2 | // Adapted from Normalize.css http://github.com/necolas/normalize.css
  3 | // ------------------------------------------------------------------------
  4 | 
  5 | // Display in IE6-9 and FF3
  6 | // -------------------------
  7 | 
  8 | article,
  9 | aside,
 10 | details,
 11 | figcaption,
 12 | figure,
 13 | footer,
 14 | header,
 15 | hgroup,
 16 | nav,
 17 | section {
 18 |   display: block;
 19 | }
 20 | 
 21 | // Display block in IE6-9 and FF3
 22 | // -------------------------
 23 | 
 24 | audio,
 25 | canvas,
 26 | video {
 27 |   display: inline-block;
 28 |   *display: inline;
 29 |   *zoom: 1;
 30 | }
 31 | 
 32 | // Prevents modern browsers from displaying 'audio' without controls
 33 | // -------------------------
 34 | 
 35 | audio:not([controls]) {
 36 |     display: none;
 37 | }
 38 | 
 39 | // Base settings
 40 | // -------------------------
 41 | 
 42 | html {
 43 |   font-size: 100%;
 44 |   -webkit-text-size-adjust: 100%;
 45 |       -ms-text-size-adjust: 100%;
 46 | }
 47 | // Focus states
 48 | a:focus {
 49 |   .tab-focus();
 50 | }
 51 | // Hover & Active
 52 | a:hover,
 53 | a:active {
 54 |   outline: 0;
 55 | }
 56 | 
 57 | // Prevents sub and sup affecting line-height in all browsers
 58 | // -------------------------
 59 | 
 60 | sub,
 61 | sup {
 62 |   position: relative;
 63 |   font-size: 75%;
 64 |   line-height: 0;
 65 |   vertical-align: baseline;
 66 | }
 67 | sup {
 68 |   top: -0.5em;
 69 | }
 70 | sub {
 71 |   bottom: -0.25em;
 72 | }
 73 | 
 74 | // Img border in a's and image quality
 75 | // -------------------------
 76 | 
 77 | img {
 78 |   height: auto;
 79 |   border: 0;
 80 |   -ms-interpolation-mode: bicubic;
 81 |   vertical-align: middle;
 82 | }
 83 | 
 84 | // Forms
 85 | // -------------------------
 86 | 
 87 | // Font size in all browsers, margin changes, misc consistency
 88 | button,
 89 | input,
 90 | select,
 91 | textarea {
 92 |   margin: 0;
 93 |   font-size: 100%;
 94 |   vertical-align: middle;
 95 | }
 96 | button,
 97 | input {
 98 |   *overflow: visible; // Inner spacing ie IE6/7
 99 |   line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
100 | }
101 | button::-moz-focus-inner,
102 | input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
103 |   padding: 0;
104 |   border: 0;
105 | }
106 | button,
107 | input[type="button"],
108 | input[type="reset"],
109 | input[type="submit"] {
110 |   cursor: pointer; // Cursors on all buttons applied consistently
111 |   -webkit-appearance: button; // Style clickable inputs in iOS
112 | }
113 | input[type="search"] { // Appearance in Safari/Chrome
114 |   -webkit-appearance: textfield;
115 |   -webkit-box-sizing: content-box;
116 |      -moz-box-sizing: content-box;
117 |           box-sizing: content-box;
118 | }
119 | input[type="search"]::-webkit-search-decoration,
120 | input[type="search"]::-webkit-search-cancel-button {
121 |   -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
122 | }
123 | textarea {
124 |   overflow: auto; // Remove vertical scrollbar in IE6-9
125 |   vertical-align: top; // Readability and alignment cross-browser
126 | }
127 | 


--------------------------------------------------------------------------------
/blocks/popover/popover.js:
--------------------------------------------------------------------------------
 1 | /* ===========================================================
 2 |  * bootstrap-popover.js v2.0.2
 3 |  * http://twitter.github.com/bootstrap/javascript.html#popovers
 4 |  * ===========================================================
 5 |  * Copyright 2012 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Apache License, Version 2.0 (the "License");
 8 |  * you may not use this file except in compliance with the License.
 9 |  * You may obtain a copy of the License at
10 |  *
11 |  * http://www.apache.org/licenses/LICENSE-2.0
12 |  *
13 |  * Unless required by applicable law or agreed to in writing, software
14 |  * distributed under the License is distributed on an "AS IS" BASIS,
15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  * See the License for the specific language governing permissions and
17 |  * limitations under the License.
18 |  * =========================================================== */
19 | 
20 | 
21 | !function( $ ) {
22 | 
23 |  "use strict"
24 | 
25 |   var Popover = function ( element, options ) {
26 |     this.init('popover', element, options)
27 |   }
28 | 
29 |   /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
30 |      ========================================== */
31 | 
32 |   Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
33 | 
34 |     constructor: Popover
35 | 
36 |   , setContent: function () {
37 |       var $tip = this.tip()
38 |         , title = this.getTitle()
39 |         , content = this.getContent()
40 | 
41 |       $tip.find('.popover-title')[ $.type(title) == 'object' ? 'append' : 'html' ](title)
42 |       $tip.find('.popover-content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content)
43 | 
44 |       $tip.removeClass('fade top bottom left right in')
45 |     }
46 | 
47 |   , hasContent: function () {
48 |       return this.getTitle() || this.getContent()
49 |     }
50 | 
51 |   , getContent: function () {
52 |       var content
53 |         , $e = this.$element
54 |         , o = this.options
55 | 
56 |       content = $e.attr('data-content')
57 |         || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)
58 | 
59 |       content = content.toString().replace(/(^\s*|\s*$)/, "")
60 | 
61 |       return content
62 |     }
63 | 
64 |   , tip: function() {
65 |       if (!this.$tip) {
66 |         this.$tip = $(this.options.template)
67 |       }
68 |       return this.$tip
69 |     }
70 | 
71 |   })
72 | 
73 | 
74 |  /* POPOVER PLUGIN DEFINITION
75 |   * ======================= */
76 | 
77 |   $.fn.popover = function ( option ) {
78 |     return this.each(function () {
79 |       var $this = $(this)
80 |         , data = $this.data('popover')
81 |         , options = typeof option == 'object' && option
82 |       if (!data) $this.data('popover', (data = new Popover(this, options)))
83 |       if (typeof option == 'string') data[option]()
84 |     })
85 |   }
86 | 
87 |   $.fn.popover.Constructor = Popover
88 | 
89 |   $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
90 |     placement: 'right'
91 |   , content: ''
92 |   , template: '
'
93 |   })
94 | 
95 | }( window.jQuery );
96 | 


--------------------------------------------------------------------------------
/blocks/button/button.js:
--------------------------------------------------------------------------------
  1 | /* ============================================================
  2 |  * bootstrap-button.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#buttons
  4 |  * ============================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ============================================================ */
 19 | 
 20 | !function( $ ){
 21 | 
 22 |   "use strict"
 23 | 
 24 |  /* BUTTON PUBLIC CLASS DEFINITION
 25 |   * ============================== */
 26 | 
 27 |   var Button = function ( element, options ) {
 28 |     this.$element = $(element)
 29 |     this.options = $.extend({}, $.fn.button.defaults, options)
 30 |   }
 31 | 
 32 |   Button.prototype = {
 33 | 
 34 |       constructor: Button
 35 | 
 36 |     , setState: function ( state ) {
 37 |         var d = 'disabled'
 38 |           , $el = this.$element
 39 |           , data = $el.data()
 40 |           , val = $el.is('input') ? 'val' : 'html'
 41 | 
 42 |         state = state + 'Text'
 43 |         data.resetText || $el.data('resetText', $el[val]())
 44 | 
 45 |         $el[val](data[state] || this.options[state])
 46 | 
 47 |         // push to event loop to allow forms to submit
 48 |         setTimeout(function () {
 49 |           state == 'loadingText' ?
 50 |             $el.addClass(d).attr(d, d) :
 51 |             $el.removeClass(d).removeAttr(d)
 52 |         }, 0)
 53 |       }
 54 | 
 55 |     , toggle: function () {
 56 |         var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
 57 | 
 58 |         $parent && $parent
 59 |           .find('.active')
 60 |           .removeClass('active')
 61 | 
 62 |         this.$element.toggleClass('active')
 63 |       }
 64 | 
 65 |   }
 66 | 
 67 | 
 68 |  /* BUTTON PLUGIN DEFINITION
 69 |   * ======================== */
 70 | 
 71 |   $.fn.button = function ( option ) {
 72 |     return this.each(function () {
 73 |       var $this = $(this)
 74 |         , data = $this.data('button')
 75 |         , options = typeof option == 'object' && option
 76 |       if (!data) $this.data('button', (data = new Button(this, options)))
 77 |       if (option == 'toggle') data.toggle()
 78 |       else if (option) data.setState(option)
 79 |     })
 80 |   }
 81 | 
 82 |   $.fn.button.defaults = {
 83 |     loadingText: 'loading...'
 84 |   }
 85 | 
 86 |   $.fn.button.Constructor = Button
 87 | 
 88 | 
 89 |  /* BUTTON DATA-API
 90 |   * =============== */
 91 | 
 92 |   $(function () {
 93 |     $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
 94 |       var $btn = $(e.target)
 95 |       if (!$btn.hasClass('btn')) $btn = $btn.closest('.button')
 96 |       $btn.button('toggle')
 97 |     })
 98 |   })
 99 | 
100 | }( window.jQuery );
101 | 


--------------------------------------------------------------------------------
/bem.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | mkdir -p blocks
 4 | cd blocks
 5 | #ls ../less | cut -d'.' -f1 | xargs mkdir -p
 6 | 
 7 | # moves each *.less file into blocks/[blockname]/ folder
 8 | for f in `ls ../less`; do
 9 |     name=`echo "$f"`
10 |     dir=`echo "$name"|cut -d'.' -f1`
11 |     mkdir -p "$dir"
12 |     mv ../less/$f $dir
13 | done
14 | 
15 | rm -rf ../less
16 | 
17 | #========renames folders to singular===============
18 | mv alerts alert
19 | mv badges badge
20 | mv button-groups button-group
21 | mv buttons button
22 | mv component-animations component-animation
23 | mv dropdowns dropdown
24 | mv forms form
25 | mv labels label
26 | mv layouts layout
27 | mv mixins mixin
28 | mv modals modal
29 | mv navs nav
30 | mv popovers popover
31 | mv progress-bars progress-bar
32 | mv sprites sprite
33 | mv tables table
34 | mv thumbnails thumbnail
35 | mv wells well
36 | 
37 | mv alert/alerts.less alert/alert.less
38 | mv badge/badges.less badge/badge.less
39 | mv button-group/button-groups.less button-group/button-group.less
40 | mv button/buttons.less button/button.less
41 | mv component-animation/component-animations.less component-animation/component-animation.less
42 | mv dropdown/dropdowns.less dropdown/dropdown.less
43 | mv form/forms.less form/form.less
44 | mv label/labels.less label/label.less
45 | mv layout/layouts.less layout/layout.less
46 | mv mixin/mixins.less mixin/mixin.less
47 | mv modal/modals.less modal/modal.less
48 | mv nav/navs.less nav/nav.less
49 | mv popover/popovers.less popover/popover.less
50 | mv progress-bar/progress-bars.less progress-bar/progress-bar.less
51 | mv sprite/sprites.less sprite/sprite.less
52 | mv table/tables.less table/table.less
53 | mv thumbnail/thumbnails.less thumbnail/thumbnail.less
54 | mv well/wells.less well/well.less
55 | #========END renames folders to singular============
56 | 
57 | #========moves imgs to sprite block=================
58 | mv ../img/glyphicons-halflings-white.png sprite/sprite_type_white.png
59 | mv ../img/glyphicons-halflings.png sprite/sprite.png
60 | rm -rf ../img
61 | #========END moves imgs to sprite block=============
62 | 
63 | #===================JS==============================
64 | rm -rf ../js/tests ../js/README.md
65 | 
66 | for f in `ls ../js`; do
67 |     name=`echo "$f"`
68 |     dir=`echo "$name"|cut -d'.' -f1|cut -d'-' -f2`
69 |     mkdir -p "$dir"
70 |     mv ../js/$f $dir/$dir.js
71 | done
72 | 
73 | rm -rf ../js
74 | #================END JS=============================
75 | 
76 | #===============BEM classes=========================
77 | #sed -i '' 's/-success/_theme_success/g' *
78 | find . -name '*' -type f -exec sed -i '' 's/-primary/_theme_primary/' {} \;
79 | find . -name '*' -type f -exec sed -i '' 's/-info/_theme_info/' {} \;
80 | find . -name '*' -type f -exec sed -i '' 's/-success/_theme_success/' {} \;
81 | find . -name '*' -type f -exec sed -i '' 's/-warning/_theme_warning/' {} \;
82 | find . -name '*' -type f -exec sed -i '' 's/-danger/_theme_danger/' {} \;
83 | find . -name '*' -type f -exec sed -i '' 's/-inverse/_theme_inverse/' {} \;
84 | 
85 | find . -name '*' -type f -exec sed -i '' 's/-large/_size_large/' {} \;
86 | find . -name '*' -type f -exec sed -i '' 's/-small/_size_small/' {} \;
87 | find . -name '*' -type f -exec sed -i '' 's/-mini/_size_mini/' {} \;
88 | 
89 | find . -name '*' -type f -exec sed -i '' 's/\.btn/.button/' {} \;
90 | #==============END BEM classes======================
91 | 
92 | 


--------------------------------------------------------------------------------
/blocks/tab/tab.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================
  2 |  * bootstrap-tab.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#tabs
  4 |  * ========================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================== */
 19 | 
 20 | 
 21 | !function( $ ){
 22 | 
 23 |   "use strict"
 24 | 
 25 |  /* TAB CLASS DEFINITION
 26 |   * ==================== */
 27 | 
 28 |   var Tab = function ( element ) {
 29 |     this.element = $(element)
 30 |   }
 31 | 
 32 |   Tab.prototype = {
 33 | 
 34 |     constructor: Tab
 35 | 
 36 |   , show: function () {
 37 |       var $this = this.element
 38 |         , $ul = $this.closest('ul:not(.dropdown-menu)')
 39 |         , selector = $this.attr('data-target')
 40 |         , previous
 41 |         , $target
 42 | 
 43 |       if (!selector) {
 44 |         selector = $this.attr('href')
 45 |         selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
 46 |       }
 47 | 
 48 |       if ( $this.parent('li').hasClass('active') ) return
 49 | 
 50 |       previous = $ul.find('.active a').last()[0]
 51 | 
 52 |       $this.trigger({
 53 |         type: 'show'
 54 |       , relatedTarget: previous
 55 |       })
 56 | 
 57 |       $target = $(selector)
 58 | 
 59 |       this.activate($this.parent('li'), $ul)
 60 |       this.activate($target, $target.parent(), function () {
 61 |         $this.trigger({
 62 |           type: 'shown'
 63 |         , relatedTarget: previous
 64 |         })
 65 |       })
 66 |     }
 67 | 
 68 |   , activate: function ( element, container, callback) {
 69 |       var $active = container.find('> .active')
 70 |         , transition = callback
 71 |             && $.support.transition
 72 |             && $active.hasClass('fade')
 73 | 
 74 |       function next() {
 75 |         $active
 76 |           .removeClass('active')
 77 |           .find('> .dropdown-menu > .active')
 78 |           .removeClass('active')
 79 | 
 80 |         element.addClass('active')
 81 | 
 82 |         if (transition) {
 83 |           element[0].offsetWidth // reflow for transition
 84 |           element.addClass('in')
 85 |         } else {
 86 |           element.removeClass('fade')
 87 |         }
 88 | 
 89 |         if ( element.parent('.dropdown-menu') ) {
 90 |           element.closest('li.dropdown').addClass('active')
 91 |         }
 92 | 
 93 |         callback && callback()
 94 |       }
 95 | 
 96 |       transition ?
 97 |         $active.one($.support.transition.end, next) :
 98 |         next()
 99 | 
100 |       $active.removeClass('in')
101 |     }
102 |   }
103 | 
104 | 
105 |  /* TAB PLUGIN DEFINITION
106 |   * ===================== */
107 | 
108 |   $.fn.tab = function ( option ) {
109 |     return this.each(function () {
110 |       var $this = $(this)
111 |         , data = $this.data('tab')
112 |       if (!data) $this.data('tab', (data = new Tab(this)))
113 |       if (typeof option == 'string') data[option]()
114 |     })
115 |   }
116 | 
117 |   $.fn.tab.Constructor = Tab
118 | 
119 | 
120 |  /* TAB DATA-API
121 |   * ============ */
122 | 
123 |   $(function () {
124 |     $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
125 |       e.preventDefault()
126 |       $(this).tab('show')
127 |     })
128 |   })
129 | 
130 | }( window.jQuery );
131 | 


--------------------------------------------------------------------------------
/blocks/dropdown/dropdown.less:
--------------------------------------------------------------------------------
  1 | // DROPDOWN MENUS
  2 | // --------------
  3 | 
  4 | // Use the .menu class on any 
  •  element within the topbar or ul.tabs and you'll get some superfancy dropdowns
  5 | .dropdown {
  6 |   position: relative;
  7 | }
  8 | .dropdown-toggle {
  9 |   // The caret makes the toggle a bit too tall in IE7
 10 |   *margin-bottom: -3px;
 11 | }
 12 | .dropdown-toggle:active,
 13 | .open .dropdown-toggle {
 14 |   outline: 0;
 15 | }
 16 | 
 17 | // Dropdown arrow/caret
 18 | // --------------------
 19 | .caret {
 20 |   display: inline-block;
 21 |   width: 0;
 22 |   height: 0;
 23 |   vertical-align: top;
 24 |   border-left:  4px solid transparent;
 25 |   border-right: 4px solid transparent;
 26 |   border-top:   4px solid @black;
 27 |   .opacity(30);
 28 |   content: "";
 29 | }
 30 | 
 31 | // Place the caret
 32 | .dropdown .caret {
 33 |   margin-top: 8px;
 34 |   margin-left: 2px;
 35 | }
 36 | .dropdown:hover .caret,
 37 | .open.dropdown .caret {
 38 |   .opacity(100);
 39 | }
 40 | 
 41 | // The dropdown menu (ul)
 42 | // ----------------------
 43 | .dropdown-menu {
 44 |   position: absolute;
 45 |   top: 100%;
 46 |   left: 0;
 47 |   z-index: @zindexDropdown;
 48 |   float: left;
 49 |   display: none; // none by default, but block on "open" of the menu
 50 |   min-width: 160px;
 51 |   padding: 4px 0;
 52 |   margin: 0; // override default ul
 53 |   list-style: none;
 54 |   background-color: @dropdownBackground;
 55 |   border-color: #ccc;
 56 |   border-color: rgba(0,0,0,.2);
 57 |   border-style: solid;
 58 |   border-width: 1px;
 59 |   .border-radius(0 0 5px 5px);
 60 |   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 61 |   -webkit-background-clip: padding-box;
 62 |      -moz-background-clip: padding;
 63 |           background-clip: padding-box;
 64 |   *border-right-width: 2px;
 65 |   *border-bottom-width: 2px;
 66 | 
 67 |   // Aligns the dropdown menu to right
 68 |   &.pull-right {
 69 |     right: 0;
 70 |     left: auto;
 71 |   }
 72 | 
 73 |   // Dividers (basically an hr) within the dropdown
 74 |   .divider {
 75 |     .nav-divider();
 76 |   }
 77 | 
 78 |   // Links within the dropdown menu
 79 |   a {
 80 |     display: block;
 81 |     padding: 3px 15px;
 82 |     clear: both;
 83 |     font-weight: normal;
 84 |     line-height: @baseLineHeight;
 85 |     color: @dropdownLinkColor;
 86 |     white-space: nowrap;
 87 |   }
 88 | }
 89 | 
 90 | // Hover state
 91 | // -----------
 92 | .dropdown-menu li > a:hover,
 93 | .dropdown-menu .active > a,
 94 | .dropdown-menu .active > a:hover {
 95 |   color: @dropdownLinkColorHover;
 96 |   text-decoration: none;
 97 |   background-color: @dropdownLinkBackgroundHover;
 98 | }
 99 | 
100 | // Open state for the dropdown
101 | // ---------------------------
102 | .dropdown.open {
103 |   // IE7's z-index only goes to the nearest positioned ancestor, which would
104 |   // make the menu appear below buttons that appeared later on the page
105 |   *z-index: @zindexDropdown;
106 | 
107 |   .dropdown-toggle {
108 |     color: @white;
109 |     background: #ccc;
110 |     background: rgba(0,0,0,.3);
111 |   }
112 |   .dropdown-menu {
113 |     display: block;
114 |   }
115 | }
116 | 
117 | // Right aligned dropdowns
118 | .pull-right .dropdown-menu {
119 |   left: auto;
120 |   right: 0;
121 | }
122 | 
123 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
124 | // ------------------------------------------------------
125 | // Just add .dropup after the standard .dropdown class and you're set, bro.
126 | // TODO: abstract this so that the navbar fixed styles are not placed here?
127 | .dropup,
128 | .navbar-fixed-bottom .dropdown {
129 |   // Reverse the caret
130 |   .caret {
131 |     border-top: 0;
132 |     border-bottom: 4px solid @black;
133 |     content: "\2191";
134 |   }
135 |   // Different positioning for bottom up menu
136 |   .dropdown-menu {
137 |     top: auto;
138 |     bottom: 100%;
139 |     margin-bottom: 1px;
140 |   }
141 | }
142 | 
143 | // Typeahead
144 | // ---------
145 | .typeahead {
146 |   margin-top: 2px; // give it some space to breathe
147 |   .border-radius(4px);
148 | }
149 | 


--------------------------------------------------------------------------------
/blocks/scrollspy/scrollspy.js:
--------------------------------------------------------------------------------
  1 | /* =============================================================
  2 |  * bootstrap-scrollspy.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#scrollspy
  4 |  * =============================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ============================================================== */
 19 | 
 20 | !function ( $ ) {
 21 | 
 22 |   "use strict"
 23 | 
 24 |   /* SCROLLSPY CLASS DEFINITION
 25 |    * ========================== */
 26 | 
 27 |   function ScrollSpy( element, options) {
 28 |     var process = $.proxy(this.process, this)
 29 |       , $element = $(element).is('body') ? $(window) : $(element)
 30 |       , href
 31 |     this.options = $.extend({}, $.fn.scrollspy.defaults, options)
 32 |     this.$scrollElement = $element.on('scroll.scroll.data-api', process)
 33 |     this.selector = (this.options.target
 34 |       || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
 35 |       || '') + ' .nav li > a'
 36 |     this.$body = $('body').on('click.scroll.data-api', this.selector, process)
 37 |     this.refresh()
 38 |     this.process()
 39 |   }
 40 | 
 41 |   ScrollSpy.prototype = {
 42 | 
 43 |       constructor: ScrollSpy
 44 | 
 45 |     , refresh: function () {
 46 |         this.targets = this.$body
 47 |           .find(this.selector)
 48 |           .map(function () {
 49 |             var href = $(this).attr('href')
 50 |             return /^#\w/.test(href) && $(href).length ? href : null
 51 |           })
 52 | 
 53 |         this.offsets = $.map(this.targets, function (id) {
 54 |           return $(id).position().top
 55 |         })
 56 |       }
 57 | 
 58 |     , process: function () {
 59 |         var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
 60 |           , offsets = this.offsets
 61 |           , targets = this.targets
 62 |           , activeTarget = this.activeTarget
 63 |           , i
 64 | 
 65 |         for (i = offsets.length; i--;) {
 66 |           activeTarget != targets[i]
 67 |             && scrollTop >= offsets[i]
 68 |             && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
 69 |             && this.activate( targets[i] )
 70 |         }
 71 |       }
 72 | 
 73 |     , activate: function (target) {
 74 |         var active
 75 | 
 76 |         this.activeTarget = target
 77 | 
 78 |         this.$body
 79 |           .find(this.selector).parent('.active')
 80 |           .removeClass('active')
 81 | 
 82 |         active = this.$body
 83 |           .find(this.selector + '[href="' + target + '"]')
 84 |           .parent('li')
 85 |           .addClass('active')
 86 | 
 87 |         if ( active.parent('.dropdown-menu') )  {
 88 |           active.closest('li.dropdown').addClass('active')
 89 |         }
 90 |       }
 91 | 
 92 |   }
 93 | 
 94 | 
 95 |  /* SCROLLSPY PLUGIN DEFINITION
 96 |   * =========================== */
 97 | 
 98 |   $.fn.scrollspy = function ( option ) {
 99 |     return this.each(function () {
100 |       var $this = $(this)
101 |         , data = $this.data('scrollspy')
102 |         , options = typeof option == 'object' && option
103 |       if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
104 |       if (typeof option == 'string') data[option]()
105 |     })
106 |   }
107 | 
108 |   $.fn.scrollspy.Constructor = ScrollSpy
109 | 
110 |   $.fn.scrollspy.defaults = {
111 |     offset: 10
112 |   }
113 | 
114 | 
115 |  /* SCROLLSPY DATA-API
116 |   * ================== */
117 | 
118 |   $(function () {
119 |     $('[data-spy="scroll"]').each(function () {
120 |       var $spy = $(this)
121 |       $spy.scrollspy($spy.data())
122 |     })
123 |   })
124 | 
125 | }( window.jQuery );
126 | 


--------------------------------------------------------------------------------
/blocks/table/table.less:
--------------------------------------------------------------------------------
  1 | //
  2 | // Tables.less
  3 | // Tables for, you guessed it, tabular data
  4 | // ----------------------------------------
  5 | 
  6 | 
  7 | // BASE TABLES
  8 | // -----------------
  9 | 
 10 | table {
 11 |   max-width: 100%;
 12 |   border-collapse: collapse;
 13 |   border-spacing: 0;
 14 |   background-color: @tableBackground;
 15 | }
 16 | 
 17 | // BASELINE STYLES
 18 | // ---------------
 19 | 
 20 | .table {
 21 |   width: 100%;
 22 |   margin-bottom: @baseLineHeight;
 23 |   // Cells
 24 |   th,
 25 |   td {
 26 |     padding: 8px;
 27 |     line-height: @baseLineHeight;
 28 |     text-align: left;
 29 |     vertical-align: top;
 30 |     border-top: 1px solid @tableBorder;
 31 |   }
 32 |   th {
 33 |     font-weight: bold;
 34 |   }
 35 |   // Bottom align for column headings
 36 |   thead th {
 37 |     vertical-align: bottom;
 38 |   }
 39 |   // Remove top border from thead by default
 40 |   colgroup + thead tr:first-child th,
 41 |   colgroup + thead tr:first-child td,
 42 |   thead:first-child tr:first-child th,
 43 |   thead:first-child tr:first-child td {
 44 |     border-top: 0;
 45 |   }
 46 |   // Account for multiple tbody instances
 47 |   tbody + tbody {
 48 |     border-top: 2px solid @tableBorder;
 49 |   }
 50 | }
 51 | 
 52 | 
 53 | 
 54 | // CONDENSED TABLE W/ HALF PADDING
 55 | // -------------------------------
 56 | 
 57 | .table-condensed {
 58 |   th,
 59 |   td {
 60 |     padding: 4px 5px;
 61 |   }
 62 | }
 63 | 
 64 | 
 65 | // BORDERED VERSION
 66 | // ----------------
 67 | 
 68 | .table-bordered {
 69 |   border: 1px solid @tableBorder;
 70 |   border-left: 0;
 71 |   border-collapse: separate; // Done so we can round those corners!
 72 |   *border-collapse: collapsed; // IE7 can't round corners anyway
 73 |   .border-radius(4px);
 74 |   th,
 75 |   td {
 76 |     border-left: 1px solid @tableBorder;
 77 |   }
 78 |   // Prevent a double border
 79 |   thead:first-child tr:first-child th,
 80 |   tbody:first-child tr:first-child th,
 81 |   tbody:first-child tr:first-child td {
 82 |     border-top: 0;
 83 |   }
 84 |   // For first th or td in the first row in the first thead or tbody
 85 |   thead:first-child tr:first-child th:first-child,
 86 |   tbody:first-child tr:first-child td:first-child {
 87 |     .border-radius(4px 0 0 0);
 88 |   }
 89 |   thead:first-child tr:first-child th:last-child,
 90 |   tbody:first-child tr:first-child td:last-child {
 91 |     .border-radius(0 4px 0 0);
 92 |   }
 93 |   // For first th or td in the first row in the first thead or tbody
 94 |   thead:last-child tr:last-child th:first-child,
 95 |   tbody:last-child tr:last-child td:first-child {
 96 |     .border-radius(0 0 0 4px);
 97 |   }
 98 |   thead:last-child tr:last-child th:last-child,
 99 |   tbody:last-child tr:last-child td:last-child {
100 |     .border-radius(0 0 4px 0);
101 |   }
102 | }
103 | 
104 | 
105 | // ZEBRA-STRIPING
106 | // --------------
107 | 
108 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
109 | .table-striped {
110 |   tbody {
111 |     tr:nth-child(odd) td,
112 |     tr:nth-child(odd) th {
113 |       background-color: @tableBackgroundAccent;
114 |     }
115 |   }
116 | }
117 | 
118 | 
119 | // HOVER EFFECT
120 | // ------------
121 | // Placed here since it has to come after the potential zebra striping
122 | .table {
123 |   tbody tr:hover td,
124 |   tbody tr:hover th {
125 |     background-color: @tableBackgroundHover;
126 |   }
127 | }
128 | 
129 | 
130 | // TABLE CELL SIZING
131 | // -----------------
132 | 
133 | // Change the columns
134 | table {
135 |   .span1     { .tableColumns(1); }
136 |   .span2     { .tableColumns(2); }
137 |   .span3     { .tableColumns(3); }
138 |   .span4     { .tableColumns(4); }
139 |   .span5     { .tableColumns(5); }
140 |   .span6     { .tableColumns(6); }
141 |   .span7     { .tableColumns(7); }
142 |   .span8     { .tableColumns(8); }
143 |   .span9     { .tableColumns(9); }
144 |   .span10    { .tableColumns(10); }
145 |   .span11    { .tableColumns(11); }
146 |   .span12    { .tableColumns(12); }
147 |   .span13    { .tableColumns(13); }
148 |   .span14    { .tableColumns(14); }
149 |   .span15    { .tableColumns(15); }
150 |   .span16    { .tableColumns(16); }
151 |   .span17    { .tableColumns(17); }
152 |   .span18    { .tableColumns(18); }
153 |   .span19    { .tableColumns(19); }
154 |   .span20    { .tableColumns(20); }
155 |   .span21    { .tableColumns(21); }
156 |   .span22    { .tableColumns(22); }
157 |   .span23    { .tableColumns(23); }
158 |   .span24    { .tableColumns(24); }
159 | }
160 | 


--------------------------------------------------------------------------------
/blocks/collapse/collapse.js:
--------------------------------------------------------------------------------
  1 | /* =============================================================
  2 |  * bootstrap-collapse.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#collapse
  4 |  * =============================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ============================================================ */
 19 | 
 20 | !function( $ ){
 21 | 
 22 |   "use strict"
 23 | 
 24 |   var Collapse = function ( element, options ) {
 25 |   	this.$element = $(element)
 26 |     this.options = $.extend({}, $.fn.collapse.defaults, options)
 27 | 
 28 |     if (this.options["parent"]) {
 29 |       this.$parent = $(this.options["parent"])
 30 |     }
 31 | 
 32 |     this.options.toggle && this.toggle()
 33 |   }
 34 | 
 35 |   Collapse.prototype = {
 36 | 
 37 |     constructor: Collapse
 38 | 
 39 |   , dimension: function () {
 40 |       var hasWidth = this.$element.hasClass('width')
 41 |       return hasWidth ? 'width' : 'height'
 42 |     }
 43 | 
 44 |   , show: function () {
 45 |       var dimension = this.dimension()
 46 |         , scroll = $.camelCase(['scroll', dimension].join('-'))
 47 |         , actives = this.$parent && this.$parent.find('.in')
 48 |         , hasData
 49 | 
 50 |       if (actives && actives.length) {
 51 |         hasData = actives.data('collapse')
 52 |         actives.collapse('hide')
 53 |         hasData || actives.data('collapse', null)
 54 |       }
 55 | 
 56 |       this.$element[dimension](0)
 57 |       this.transition('addClass', 'show', 'shown')
 58 |       this.$element[dimension](this.$element[0][scroll])
 59 | 
 60 |     }
 61 | 
 62 |   , hide: function () {
 63 |       var dimension = this.dimension()
 64 |       this.reset(this.$element[dimension]())
 65 |       this.transition('removeClass', 'hide', 'hidden')
 66 |       this.$element[dimension](0)
 67 |     }
 68 | 
 69 |   , reset: function ( size ) {
 70 |       var dimension = this.dimension()
 71 | 
 72 |       this.$element
 73 |         .removeClass('collapse')
 74 |         [dimension](size || 'auto')
 75 |         [0].offsetWidth
 76 | 
 77 |       this.$element[size ? 'addClass' : 'removeClass']('collapse')
 78 | 
 79 |       return this
 80 |     }
 81 | 
 82 |   , transition: function ( method, startEvent, completeEvent ) {
 83 |       var that = this
 84 |         , complete = function () {
 85 |             if (startEvent == 'show') that.reset()
 86 |             that.$element.trigger(completeEvent)
 87 |           }
 88 | 
 89 |       this.$element
 90 |         .trigger(startEvent)
 91 |         [method]('in')
 92 | 
 93 |       $.support.transition && this.$element.hasClass('collapse') ?
 94 |         this.$element.one($.support.transition.end, complete) :
 95 |         complete()
 96 |   	}
 97 | 
 98 |   , toggle: function () {
 99 |       this[this.$element.hasClass('in') ? 'hide' : 'show']()
100 |   	}
101 | 
102 |   }
103 | 
104 |   /* COLLAPSIBLE PLUGIN DEFINITION
105 |   * ============================== */
106 | 
107 |   $.fn.collapse = function ( option ) {
108 |     return this.each(function () {
109 |       var $this = $(this)
110 |         , data = $this.data('collapse')
111 |         , options = typeof option == 'object' && option
112 |       if (!data) $this.data('collapse', (data = new Collapse(this, options)))
113 |       if (typeof option == 'string') data[option]()
114 |     })
115 |   }
116 | 
117 |   $.fn.collapse.defaults = {
118 |     toggle: true
119 |   }
120 | 
121 |   $.fn.collapse.Constructor = Collapse
122 | 
123 | 
124 |  /* COLLAPSIBLE DATA-API
125 |   * ==================== */
126 | 
127 |   $(function () {
128 |     $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
129 |       var $this = $(this), href
130 |         , target = $this.attr('data-target')
131 |           || e.preventDefault()
132 |           || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
133 |         , option = $(target).data('collapse') ? 'toggle' : $this.data()
134 |       $(target).collapse(option)
135 |     })
136 |   })
137 | 
138 | }( window.jQuery );
139 | 


--------------------------------------------------------------------------------
/blocks/type/type.less:
--------------------------------------------------------------------------------
  1 | // Typography.less
  2 | // Headings, body text, lists, code, and more for a versatile and durable typography system
  3 | // ----------------------------------------------------------------------------------------
  4 | 
  5 | 
  6 | // BODY TEXT
  7 | // ---------
  8 | 
  9 | p {
 10 |   margin: 0 0 @baseLineHeight / 2;
 11 |   font-family: @baseFontFamily;
 12 |   font-size: @baseFontSize;
 13 |   line-height: @baseLineHeight;
 14 |   small {
 15 |     font-size: @baseFontSize - 2;
 16 |     color: @grayLight;
 17 |   }
 18 | }
 19 | .lead {
 20 |   margin-bottom: @baseLineHeight;
 21 |   font-size: 20px;
 22 |   font-weight: 200;
 23 |   line-height: @baseLineHeight * 1.5;
 24 | }
 25 | 
 26 | // HEADINGS
 27 | // --------
 28 | 
 29 | h1, h2, h3, h4, h5, h6 {
 30 |   margin: 0;
 31 |   font-family: @headingsFontFamily;
 32 |   font-weight: @headingsFontWeight;
 33 |   color: @headingsColor;
 34 |   text-rendering: optimizelegibility; // Fix the character spacing for headings
 35 |   small {
 36 |     font-weight: normal;
 37 |     color: @grayLight;
 38 |   }
 39 | }
 40 | h1 {
 41 |   font-size: 30px;
 42 |   line-height: @baseLineHeight * 2;
 43 |   small {
 44 |     font-size: 18px;
 45 |   }
 46 | }
 47 | h2 {
 48 |   font-size: 24px;
 49 |   line-height: @baseLineHeight * 2;
 50 |   small {
 51 |     font-size: 18px;
 52 |   }
 53 | }
 54 | h3 {
 55 |   line-height: @baseLineHeight * 1.5;
 56 |   font-size: 18px;
 57 |   small {
 58 |     font-size: 14px;
 59 |   }
 60 | }
 61 | h4, h5, h6 {
 62 |   line-height: @baseLineHeight;
 63 | }
 64 | h4 {
 65 |   font-size: 14px;
 66 |   small {
 67 |     font-size: 12px;
 68 |   }
 69 | }
 70 | h5 {
 71 |   font-size: 12px;
 72 | }
 73 | h6 {
 74 |   font-size: 11px;
 75 |   color: @grayLight;
 76 |   text-transform: uppercase;
 77 | }
 78 | 
 79 | // Page header
 80 | .page-header {
 81 |   padding-bottom: @baseLineHeight - 1;
 82 |   margin: @baseLineHeight 0;
 83 |   border-bottom: 1px solid @grayLighter;
 84 | }
 85 | .page-header h1 {
 86 |   line-height: 1;
 87 | }
 88 | 
 89 | 
 90 | 
 91 | // LISTS
 92 | // -----
 93 | 
 94 | // Unordered and Ordered lists
 95 | ul, ol {
 96 |   padding: 0;
 97 |   margin: 0 0 @baseLineHeight / 2 25px;
 98 | }
 99 | ul ul,
100 | ul ol,
101 | ol ol,
102 | ol ul {
103 |   margin-bottom: 0;
104 | }
105 | ul {
106 |   list-style: disc;
107 | }
108 | ol {
109 |   list-style: decimal;
110 | }
111 | li {
112 |   line-height: @baseLineHeight;
113 | }
114 | ul.unstyled,
115 | ol.unstyled {
116 |   margin-left: 0;
117 |   list-style: none;
118 | }
119 | 
120 | // Description Lists
121 | dl {
122 |   margin-bottom: @baseLineHeight;
123 | }
124 | dt,
125 | dd {
126 |   line-height: @baseLineHeight;
127 | }
128 | dt {
129 |   font-weight: bold;
130 |   line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
131 | }
132 | dd {
133 |   margin-left: @baseLineHeight / 2;
134 | }
135 | // Horizontal layout (like forms)
136 | .dl-horizontal {
137 |   dt {
138 |     float: left;
139 |     clear: left;
140 |     width: 120px;
141 |     text-align: right;
142 |   }
143 |   dd {
144 |     margin-left: 130px;
145 |   }
146 | }
147 | 
148 | // MISC
149 | // ----
150 | 
151 | // Horizontal rules
152 | hr {
153 |   margin: @baseLineHeight 0;
154 |   border: 0;
155 |   border-top: 1px solid @hrBorder;
156 |   border-bottom: 1px solid @white;
157 | }
158 | 
159 | // Emphasis
160 | strong {
161 |   font-weight: bold;
162 | }
163 | em {
164 |   font-style: italic;
165 | }
166 | .muted {
167 |   color: @grayLight;
168 | }
169 | 
170 | // Abbreviations and acronyms
171 | abbr[title] {
172 |   border-bottom: 1px dotted #ddd;
173 |   cursor: help;
174 | }
175 | abbr.initialism {
176 |   font-size: 90%;
177 |   text-transform: uppercase;
178 | }
179 | 
180 | // Blockquotes
181 | blockquote {
182 |   padding: 0 0 0 15px;
183 |   margin: 0 0 @baseLineHeight;
184 |   border-left: 5px solid @grayLighter;
185 |   p {
186 |     margin-bottom: 0;
187 |     #font > .shorthand(16px,300,@baseLineHeight * 1.25);
188 |   }
189 |   small {
190 |     display: block;
191 |     line-height: @baseLineHeight;
192 |     color: @grayLight;
193 |     &:before {
194 |       content: '\2014 \00A0';
195 |     }
196 |   }
197 | 
198 |   // Float right with text-align: right
199 |   &.pull-right {
200 |     float: right;
201 |     padding-left: 0;
202 |     padding-right: 15px;
203 |     border-left: 0;
204 |     border-right: 5px solid @grayLighter;
205 |     p,
206 |     small {
207 |       text-align: right;
208 |     }
209 |   }
210 | }
211 | 
212 | // Quotes
213 | q:before,
214 | q:after,
215 | blockquote:before,
216 | blockquote:after {
217 |   content: "";
218 | }
219 | 
220 | // Addresses
221 | address {
222 |   display: block;
223 |   margin-bottom: @baseLineHeight;
224 |   line-height: @baseLineHeight;
225 |   font-style: normal;
226 | }
227 | 
228 | // Misc
229 | small {
230 |   font-size: 100%;
231 | }
232 | cite {
233 |   font-style: normal;
234 | }
235 | 


--------------------------------------------------------------------------------
/blocks/button-group/button-group.less:
--------------------------------------------------------------------------------
  1 | // BUTTON GROUPS
  2 | // -------------
  3 | 
  4 | 
  5 | // Make the div behave like a button
  6 | .button-group {
  7 |   position: relative;
  8 |   .clearfix(); // clears the floated buttons
  9 |   .ie7-restore-left-whitespace();
 10 | }
 11 | 
 12 | // Space out series of button groups
 13 | .button-group + .btn-group {
 14 |   margin-left: 5px;
 15 | }
 16 | 
 17 | // Optional: Group multiple button groups together for a toolbar
 18 | .button-toolbar {
 19 |   margin-top: @baseLineHeight / 2;
 20 |   margin-bottom: @baseLineHeight / 2;
 21 |   .button-group {
 22 |     display: inline-block;
 23 |     .ie7-inline-block();
 24 |   }
 25 | }
 26 | 
 27 | // Float them, remove border radius, then re-add to first and last elements
 28 | .button-group .btn {
 29 |   position: relative;
 30 |   float: left;
 31 |   margin-left: -1px;
 32 |   .border-radius(0);
 33 | }
 34 | // Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
 35 | .button-group .btn:first-child {
 36 |   margin-left: 0;
 37 |      -webkit-border-top-left-radius: 4px;
 38 |          -moz-border-radius-topleft: 4px;
 39 |              border-top-left-radius: 4px;
 40 |   -webkit-border-bottom-left-radius: 4px;
 41 |       -moz-border-radius-bottomleft: 4px;
 42 |           border-bottom-left-radius: 4px;
 43 | }
 44 | .button-group .btn:last-child,
 45 | .button-group .dropdown-toggle {
 46 |      -webkit-border-top-right-radius: 4px;
 47 |          -moz-border-radius-topright: 4px;
 48 |              border-top-right-radius: 4px;
 49 |   -webkit-border-bottom-right-radius: 4px;
 50 |       -moz-border-radius-bottomright: 4px;
 51 |           border-bottom-right-radius: 4px;
 52 | }
 53 | // Reset corners for large buttons
 54 | .button-group .btn.large:first-child {
 55 |   margin-left: 0;
 56 |      -webkit-border-top-left-radius: 6px;
 57 |          -moz-border-radius-topleft: 6px;
 58 |              border-top-left-radius: 6px;
 59 |   -webkit-border-bottom-left-radius: 6px;
 60 |       -moz-border-radius-bottomleft: 6px;
 61 |           border-bottom-left-radius: 6px;
 62 | }
 63 | .button-group .btn.large:last-child,
 64 | .button-group .large.dropdown-toggle {
 65 |      -webkit-border-top-right-radius: 6px;
 66 |          -moz-border-radius-topright: 6px;
 67 |              border-top-right-radius: 6px;
 68 |   -webkit-border-bottom-right-radius: 6px;
 69 |       -moz-border-radius-bottomright: 6px;
 70 |           border-bottom-right-radius: 6px;
 71 | }
 72 | 
 73 | // On hover/focus/active, bring the proper btn to front
 74 | .button-group .btn:hover,
 75 | .button-group .btn:focus,
 76 | .button-group .btn:active,
 77 | .button-group .btn.active {
 78 |   z-index: 2;
 79 | }
 80 | 
 81 | // On active and open, don't show outline
 82 | .button-group .dropdown-toggle:active,
 83 | .button-group.open .dropdown-toggle {
 84 |   outline: 0;
 85 | }
 86 | 
 87 | 
 88 | 
 89 | // Split button dropdowns
 90 | // ----------------------
 91 | 
 92 | // Give the line between buttons some depth
 93 | .button-group .dropdown-toggle {
 94 |   padding-left: 8px;
 95 |   padding-right: 8px;
 96 |   @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 97 |   .box-shadow(@shadow);
 98 |   *padding-top: 3px;
 99 |   *padding-bottom: 3px;
100 | }
101 | .button-group .btn_size_mini.dropdown-toggle {
102 |   padding-left: 5px;
103 |   padding-right: 5px;
104 |   *padding-top: 1px;
105 |   *padding-bottom: 1px;
106 | }
107 | .button-group .btn_size_small.dropdown-toggle {
108 |   *padding-top: 4px;
109 |   *padding-bottom: 4px;
110 | }
111 | .button-group .btn_size_large.dropdown-toggle {
112 |   padding-left: 12px;
113 |   padding-right: 12px;
114 | }
115 | 
116 | .button-group.open {
117 |   // IE7's z-index only goes to the nearest positioned ancestor, which would
118 |   // make the menu appear below buttons that appeared later on the page
119 |   *z-index: @zindexDropdown;
120 | 
121 |   // Reposition menu on open and round all corners
122 |   .dropdown-menu {
123 |     display: block;
124 |     margin-top: 1px;
125 |     .border-radius(5px);
126 |   }
127 | 
128 |   .dropdown-toggle {
129 |     background-image: none;
130 |     @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
131 |     .box-shadow(@shadow);
132 |   }
133 | }
134 | 
135 | // Reposition the caret
136 | .button .caret {
137 |   margin-top: 7px;
138 |   margin-left: 0;
139 | }
140 | .button:hover .caret,
141 | .open.button-group .caret {
142 |   .opacity(100);
143 | }
144 | // Carets in other button sizes
145 | .button_size_mini .caret {
146 |   margin-top: 5px;
147 | }
148 | .button_size_small .caret {
149 |   margin-top: 6px;
150 | }
151 | .button_size_large .caret {
152 |   margin-top: 6px;
153 |   border-left:  5px solid transparent;
154 |   border-right: 5px solid transparent;
155 |   border-top:   5px solid @black;
156 | }
157 | 
158 | 
159 | // Account for other colors
160 | .button_theme_primary,
161 | .button_theme_warning,
162 | .button_theme_danger,
163 | .button_theme_info,
164 | .button_theme_success,
165 | .button_theme_inverse {
166 |   .caret {
167 |     border-top-color: @white;
168 |     border-bottom-color: @white;
169 |     .opacity(75);
170 |   }
171 | }
172 | 
173 | 


--------------------------------------------------------------------------------
/blocks/button/button.less:
--------------------------------------------------------------------------------
  1 | // BUTTON STYLES
  2 | // -------------
  3 | 
  4 | 
  5 | // Base styles
  6 | // --------------------------------------------------
  7 | 
  8 | // Core
  9 | .button {
 10 |   display: inline-block;
 11 |   .ie7-inline-block();
 12 |   padding: 4px 10px 4px;
 13 |   margin-bottom: 0; // For input.button
 14 |   font-size: @baseFontSize;
 15 |   line-height: @baseLineHeight;
 16 |   color: @grayDark;
 17 |   text-align: center;
 18 |   text-shadow: 0 1px 1px rgba(255,255,255,.75);
 19 |   vertical-align: middle;
 20 |   .buttonBackground(@btnBackground, @btnBackgroundHighlight);
 21 |   border: 1px solid @btnBorder;
 22 |   border-bottom-color: darken(@btnBorder, 10%);
 23 |   .border-radius(4px);
 24 |   @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 25 |   .box-shadow(@shadow);
 26 |   cursor: pointer;
 27 | 
 28 |   // Give IE7 some love
 29 |   .ie7-restore-left-whitespace();
 30 | }
 31 | 
 32 | // Hover state
 33 | .button:hover {
 34 |   color: @grayDark;
 35 |   text-decoration: none;
 36 |   background-color: darken(@white, 10%);
 37 |   background-position: 0 -15px;
 38 | 
 39 |   // transition is only when going to hover, otherwise the background
 40 |   // behind the gradient (there for IE<=9 fallback) gets mismatched
 41 |   .transition(background-position .1s linear);
 42 | }
 43 | 
 44 | // Focus state for keyboard and accessibility
 45 | .button:focus {
 46 |   .tab-focus();
 47 | }
 48 | 
 49 | // Active state
 50 | .button.active,
 51 | .button:active {
 52 |   background-image: none;
 53 |   @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
 54 |   .box-shadow(@shadow);
 55 |   background-color: darken(@white, 10%);
 56 |   background-color: darken(@white, 15%) e("\9");
 57 |   outline: 0;
 58 | }
 59 | 
 60 | // Disabled state
 61 | .button.disabled,
 62 | .button[disabled] {
 63 |   cursor: default;
 64 |   background-image: none;
 65 |   background-color: darken(@white, 10%);
 66 |   .opacity(65);
 67 |   .box-shadow(none);
 68 | }
 69 | 
 70 | 
 71 | // Button Sizes
 72 | // --------------------------------------------------
 73 | 
 74 | // Large
 75 | .button_size_large {
 76 |   padding: 9px 14px;
 77 |   font-size: @baseFontSize + 2px;
 78 |   line-height: normal;
 79 |   .border-radius(5px);
 80 | }
 81 | .button_size_large [class^="icon-"] {
 82 |   margin-top: 1px;
 83 | }
 84 | 
 85 | // Small
 86 | .button_size_small {
 87 |   padding: 5px 9px;
 88 |   font-size: @baseFontSize - 2px;
 89 |   line-height: @baseLineHeight - 2px;
 90 | }
 91 | .button_size_small [class^="icon-"] {
 92 |   margin-top: -1px;
 93 | }
 94 | 
 95 | // Mini
 96 | .button_size_mini {
 97 |   padding: 2px 6px;
 98 |   font-size: @baseFontSize - 2px;
 99 |   line-height: @baseLineHeight - 4px;
100 | }
101 | 
102 | 
103 | // Alternate buttons
104 | // --------------------------------------------------
105 | 
106 | // Set text color
107 | // -------------------------
108 | .button_theme_primary,
109 | .button_theme_primary:hover,
110 | .button_theme_warning,
111 | .button_theme_warning:hover,
112 | .button_theme_danger,
113 | .button_theme_danger:hover,
114 | .button_theme_success,
115 | .button_theme_success:hover,
116 | .button_theme_info,
117 | .button_theme_info:hover,
118 | .button_theme_inverse,
119 | .button_theme_inverse:hover {
120 |   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
121 |   color: @white;
122 | }
123 | // Provide *some* extra contrast for those who can get it
124 | .button_theme_primary.active,
125 | .button_theme_warning.active,
126 | .button_theme_danger.active,
127 | .button_theme_success.active,
128 | .button_theme_info.active,
129 | .button_theme_inverse.active {
130 |   color: rgba(255,255,255,.75);
131 | }
132 | 
133 | // Set the backgrounds
134 | // -------------------------
135 | .button_theme_primary {
136 |   .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
137 | }
138 | // Warning appears are orange
139 | .button_theme_warning {
140 |   .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
141 | }
142 | // Danger and error appear as red
143 | .button_theme_danger {
144 |   .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
145 | }
146 | // Success appears as green
147 | .button_theme_success {
148 |   .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
149 | }
150 | // Info appears as a neutral blue
151 | .button_theme_info {
152 |   .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
153 | }
154 | // Inverse appears as dark gray
155 | .button_theme_inverse {
156 |   .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
157 | }
158 | 
159 | 
160 | // Cross-browser Jank
161 | // --------------------------------------------------
162 | 
163 | button.button,
164 | input[type="submit"].button {
165 | 
166 |   // Firefox 3.6 only I believe
167 |   &::-moz-focus-inner {
168 |     padding: 0;
169 |     border: 0;
170 |   }
171 | 
172 |   // IE7 has some default padding on button controls
173 |   *padding-top: 2px;
174 |   *padding-bottom: 2px;
175 |   &.button_size_large {
176 |     *padding-top: 7px;
177 |     *padding-bottom: 7px;
178 |   }
179 |   &.button_size_small {
180 |     *padding-top: 3px;
181 |     *padding-bottom: 3px;
182 |   }
183 |   &.button_size_mini {
184 |     *padding-top: 1px;
185 |     *padding-bottom: 1px;
186 |   }
187 | }
188 | 


--------------------------------------------------------------------------------
/blocks/modal/modal.js:
--------------------------------------------------------------------------------
  1 | /* =========================================================
  2 |  * bootstrap-modal.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#modals
  4 |  * =========================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ========================================================= */
 19 | 
 20 | 
 21 | !function( $ ){
 22 | 
 23 |   "use strict"
 24 | 
 25 |  /* MODAL CLASS DEFINITION
 26 |   * ====================== */
 27 | 
 28 |   var Modal = function ( content, options ) {
 29 |     this.options = options
 30 |     this.$element = $(content)
 31 |       .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
 32 |   }
 33 | 
 34 |   Modal.prototype = {
 35 | 
 36 |       constructor: Modal
 37 | 
 38 |     , toggle: function () {
 39 |         return this[!this.isShown ? 'show' : 'hide']()
 40 |       }
 41 | 
 42 |     , show: function () {
 43 |         var that = this
 44 | 
 45 |         if (this.isShown) return
 46 | 
 47 |         $('body').addClass('modal-open')
 48 | 
 49 |         this.isShown = true
 50 |         this.$element.trigger('show')
 51 | 
 52 |         escape.call(this)
 53 |         backdrop.call(this, function () {
 54 |           var transition = $.support.transition && that.$element.hasClass('fade')
 55 | 
 56 |           !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position
 57 | 
 58 |           that.$element
 59 |             .show()
 60 | 
 61 |           if (transition) {
 62 |             that.$element[0].offsetWidth // force reflow
 63 |           }
 64 | 
 65 |           that.$element.addClass('in')
 66 | 
 67 |           transition ?
 68 |             that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
 69 |             that.$element.trigger('shown')
 70 | 
 71 |         })
 72 |       }
 73 | 
 74 |     , hide: function ( e ) {
 75 |         e && e.preventDefault()
 76 | 
 77 |         if (!this.isShown) return
 78 | 
 79 |         var that = this
 80 |         this.isShown = false
 81 | 
 82 |         $('body').removeClass('modal-open')
 83 | 
 84 |         escape.call(this)
 85 | 
 86 |         this.$element
 87 |           .trigger('hide')
 88 |           .removeClass('in')
 89 | 
 90 |         $.support.transition && this.$element.hasClass('fade') ?
 91 |           hideWithTransition.call(this) :
 92 |           hideModal.call(this)
 93 |       }
 94 | 
 95 |   }
 96 | 
 97 | 
 98 |  /* MODAL PRIVATE METHODS
 99 |   * ===================== */
100 | 
101 |   function hideWithTransition() {
102 |     var that = this
103 |       , timeout = setTimeout(function () {
104 |           that.$element.off($.support.transition.end)
105 |           hideModal.call(that)
106 |         }, 500)
107 | 
108 |     this.$element.one($.support.transition.end, function () {
109 |       clearTimeout(timeout)
110 |       hideModal.call(that)
111 |     })
112 |   }
113 | 
114 |   function hideModal( that ) {
115 |     this.$element
116 |       .hide()
117 |       .trigger('hidden')
118 | 
119 |     backdrop.call(this)
120 |   }
121 | 
122 |   function backdrop( callback ) {
123 |     var that = this
124 |       , animate = this.$element.hasClass('fade') ? 'fade' : ''
125 | 
126 |     if (this.isShown && this.options.backdrop) {
127 |       var doAnimate = $.support.transition && animate
128 | 
129 |       this.$backdrop = $('
    ')
130 |         .appendTo(document.body)
131 | 
132 |       if (this.options.backdrop != 'static') {
133 |         this.$backdrop.click($.proxy(this.hide, this))
134 |       }
135 | 
136 |       if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
137 | 
138 |       this.$backdrop.addClass('in')
139 | 
140 |       doAnimate ?
141 |         this.$backdrop.one($.support.transition.end, callback) :
142 |         callback()
143 | 
144 |     } else if (!this.isShown && this.$backdrop) {
145 |       this.$backdrop.removeClass('in')
146 | 
147 |       $.support.transition && this.$element.hasClass('fade')?
148 |         this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
149 |         removeBackdrop.call(this)
150 | 
151 |     } else if (callback) {
152 |       callback()
153 |     }
154 |   }
155 | 
156 |   function removeBackdrop() {
157 |     this.$backdrop.remove()
158 |     this.$backdrop = null
159 |   }
160 | 
161 |   function escape() {
162 |     var that = this
163 |     if (this.isShown && this.options.keyboard) {
164 |       $(document).on('keyup.dismiss.modal', function ( e ) {
165 |         e.which == 27 && that.hide()
166 |       })
167 |     } else if (!this.isShown) {
168 |       $(document).off('keyup.dismiss.modal')
169 |     }
170 |   }
171 | 
172 | 
173 |  /* MODAL PLUGIN DEFINITION
174 |   * ======================= */
175 | 
176 |   $.fn.modal = function ( option ) {
177 |     return this.each(function () {
178 |       var $this = $(this)
179 |         , data = $this.data('modal')
180 |         , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
181 |       if (!data) $this.data('modal', (data = new Modal(this, options)))
182 |       if (typeof option == 'string') data[option]()
183 |       else if (options.show) data.show()
184 |     })
185 |   }
186 | 
187 |   $.fn.modal.defaults = {
188 |       backdrop: true
189 |     , keyboard: true
190 |     , show: true
191 |   }
192 | 
193 |   $.fn.modal.Constructor = Modal
194 | 
195 | 
196 |  /* MODAL DATA-API
197 |   * ============== */
198 | 
199 |   $(function () {
200 |     $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
201 |       var $this = $(this), href
202 |         , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
203 |         , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
204 | 
205 |       e.preventDefault()
206 |       $target.modal(option)
207 |     })
208 |   })
209 | 
210 | }( window.jQuery );
211 | 


--------------------------------------------------------------------------------
/blocks/variables/variables.less:
--------------------------------------------------------------------------------
  1 | // Variables.less
  2 | // Variables to customize the look and feel of Bootstrap
  3 | // -----------------------------------------------------
  4 | 
  5 | 
  6 | 
  7 | // GLOBAL VALUES
  8 | // --------------------------------------------------
  9 | 
 10 | 
 11 | // Grays
 12 | // -------------------------
 13 | @black:                 #000;
 14 | @grayDarker:            #222;
 15 | @grayDark:              #333;
 16 | @gray:                  #555;
 17 | @grayLight:             #999;
 18 | @grayLighter:           #eee;
 19 | @white:                 #fff;
 20 | 
 21 | 
 22 | // Accent colors
 23 | // -------------------------
 24 | @blue:                  #049cdb;
 25 | @blueDark:              #0064cd;
 26 | @green:                 #46a546;
 27 | @red:                   #9d261d;
 28 | @yellow:                #ffc40d;
 29 | @orange:                #f89406;
 30 | @pink:                  #c3325f;
 31 | @purple:                #7a43b6;
 32 | 
 33 | 
 34 | // Scaffolding
 35 | // -------------------------
 36 | @bodyBackground:        @white;
 37 | @textColor:             @grayDark;
 38 | 
 39 | 
 40 | // Links
 41 | // -------------------------
 42 | @linkColor:             #08c;
 43 | @linkColorHover:        darken(@linkColor, 15%);
 44 | 
 45 | 
 46 | // Typography
 47 | // -------------------------
 48 | @baseFontSize:          13px;
 49 | @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 50 | @baseLineHeight:        18px;
 51 | @altFontFamily:         Georgia, "Times New Roman", Times, serif;
 52 | 
 53 | @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
 54 | @headingsFontWeight:    bold;    // instead of browser default, bold
 55 | @headingsColor:         inherit; // empty to use BS default, @textColor
 56 | 
 57 | 
 58 | // Tables
 59 | // -------------------------
 60 | @tableBackground:                   transparent; // overall background-color
 61 | @tableBackgroundAccent:             #f9f9f9; // for striping
 62 | @tableBackgroundHover:              #f5f5f5; // for hover
 63 | @tableBorder:                       #ddd; // table and cell border
 64 | 
 65 | 
 66 | // Buttons
 67 | // -------------------------
 68 | @btnBackground:                     @white;
 69 | @btnBackgroundHighlight:            darken(@white, 10%);
 70 | @btnBorder:                         darken(@white, 20%);
 71 | 
 72 | @btnPrimaryBackground:              @linkColor;
 73 | @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
 74 | 
 75 | @btnInfoBackground:                 #5bc0de;
 76 | @btnInfoBackgroundHighlight:        #2f96b4;
 77 | 
 78 | @btnSuccessBackground:              #62c462;
 79 | @btnSuccessBackgroundHighlight:     #51a351;
 80 | 
 81 | @btnWarningBackground:              lighten(@orange, 15%);
 82 | @btnWarningBackgroundHighlight:     @orange;
 83 | 
 84 | @btnDangerBackground:               #ee5f5b;
 85 | @btnDangerBackgroundHighlight:      #bd362f;
 86 | 
 87 | @btnInverseBackground:              @gray;
 88 | @btnInverseBackgroundHighlight:     @grayDarker;
 89 | 
 90 | 
 91 | // Forms
 92 | // -------------------------
 93 | @inputBackground:               @white;
 94 | @inputBorder:                   #ccc;
 95 | @inputDisabledBackground:       @grayLighter;
 96 | 
 97 | 
 98 | // Dropdowns
 99 | // -------------------------
100 | @dropdownBackground:            @white;
101 | @dropdownBorder:                rgba(0,0,0,.2);
102 | @dropdownLinkColor:             @grayDark;
103 | @dropdownLinkColorHover:        @white;
104 | @dropdownLinkBackgroundHover:   @linkColor;
105 | 
106 | 
107 | 
108 | 
109 | // COMPONENT VARIABLES
110 | // --------------------------------------------------
111 | 
112 | // Z-index master list
113 | // -------------------------
114 | // Used for a bird's eye view of components dependent on the z-axis
115 | // Try to avoid customizing these :)
116 | @zindexDropdown:          1000;
117 | @zindexPopover:           1010;
118 | @zindexTooltip:           1020;
119 | @zindexFixedNavbar:       1030;
120 | @zindexModalBackdrop:     1040;
121 | @zindexModal:             1050;
122 | 
123 | 
124 | // Sprite icons path
125 | // -------------------------
126 | @iconSpritePath:          "../img/glyphicons-halflings.png";
127 | @iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
128 | 
129 | 
130 | // Input placeholder text color
131 | // -------------------------
132 | @placeholderText:         @grayLight;
133 | 
134 | 
135 | // Hr border color
136 | // -------------------------
137 | @hrBorder:                @grayLighter;
138 | 
139 | 
140 | // Navbar
141 | // -------------------------
142 | @navbarHeight:                    40px;
143 | @navbarBackground:                @grayDarker;
144 | @navbarBackgroundHighlight:       @grayDark;
145 | 
146 | @navbarText:                      @grayLight;
147 | @navbarLinkColor:                 @grayLight;
148 | @navbarLinkColorHover:            @white;
149 | @navbarLinkColorActive:           @navbarLinkColorHover;
150 | @navbarLinkBackgroundHover:       transparent;
151 | @navbarLinkBackgroundActive:      @navbarBackground;
152 | 
153 | @navbarSearchBackground:          lighten(@navbarBackground, 25%);
154 | @navbarSearchBackgroundFocus:     @white;
155 | @navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
156 | @navbarSearchPlaceholderColor:    #ccc;
157 | 
158 | 
159 | // Hero unit
160 | // -------------------------
161 | @heroUnitBackground:              @grayLighter;
162 | @heroUnitHeadingColor:            inherit;
163 | @heroUnitLeadColor:               inherit;
164 | 
165 | 
166 | // Form states and alerts
167 | // -------------------------
168 | @warningText:             #c09853;
169 | @warningBackground:       #fcf8e3;
170 | @warningBorder:           darken(spin(@warningBackground, -10), 3%);
171 | 
172 | @errorText:               #b94a48;
173 | @errorBackground:         #f2dede;
174 | @errorBorder:             darken(spin(@errorBackground, -10), 3%);
175 | 
176 | @successText:             #468847;
177 | @successBackground:       #dff0d8;
178 | @successBorder:           darken(spin(@successBackground, -10), 5%);
179 | 
180 | @infoText:                #3a87ad;
181 | @infoBackground:          #d9edf7;
182 | @infoBorder:              darken(spin(@infoBackground, -10), 7%);
183 | 
184 | 
185 | 
186 | 
187 | // GRID
188 | // --------------------------------------------------
189 | 
190 | // Default 940px grid
191 | // -------------------------
192 | @gridColumns:             12;
193 | @gridColumnWidth:         60px;
194 | @gridGutterWidth:         20px;
195 | @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
196 | 
197 | 
198 | // Fluid grid
199 | // -------------------------
200 | @fluidGridColumnWidth:    6.382978723%;
201 | @fluidGridGutterWidth:    2.127659574%;
202 | 


--------------------------------------------------------------------------------
/blocks/typeahead/typeahead.js:
--------------------------------------------------------------------------------
  1 | /* =============================================================
  2 |  * bootstrap-typeahead.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#typeahead
  4 |  * =============================================================
  5 |  * Copyright 2012 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ============================================================ */
 19 | 
 20 | !function( $ ){
 21 | 
 22 |   "use strict"
 23 | 
 24 |   var Typeahead = function ( element, options ) {
 25 |     this.$element = $(element)
 26 |     this.options = $.extend({}, $.fn.typeahead.defaults, options)
 27 |     this.matcher = this.options.matcher || this.matcher
 28 |     this.sorter = this.options.sorter || this.sorter
 29 |     this.highlighter = this.options.highlighter || this.highlighter
 30 |     this.$menu = $(this.options.menu).appendTo('body')
 31 |     this.source = this.options.source
 32 |     this.shown = false
 33 |     this.listen()
 34 |   }
 35 | 
 36 |   Typeahead.prototype = {
 37 | 
 38 |     constructor: Typeahead
 39 | 
 40 |   , select: function () {
 41 |       var val = this.$menu.find('.active').attr('data-value')
 42 |       this.$element.val(val)
 43 |       this.$element.change();
 44 |       return this.hide()
 45 |     }
 46 | 
 47 |   , show: function () {
 48 |       var pos = $.extend({}, this.$element.offset(), {
 49 |         height: this.$element[0].offsetHeight
 50 |       })
 51 | 
 52 |       this.$menu.css({
 53 |         top: pos.top + pos.height
 54 |       , left: pos.left
 55 |       })
 56 | 
 57 |       this.$menu.show()
 58 |       this.shown = true
 59 |       return this
 60 |     }
 61 | 
 62 |   , hide: function () {
 63 |       this.$menu.hide()
 64 |       this.shown = false
 65 |       return this
 66 |     }
 67 | 
 68 |   , lookup: function (event) {
 69 |       var that = this
 70 |         , items
 71 |         , q
 72 | 
 73 |       this.query = this.$element.val()
 74 | 
 75 |       if (!this.query) {
 76 |         return this.shown ? this.hide() : this
 77 |       }
 78 | 
 79 |       items = $.grep(this.source, function (item) {
 80 |         if (that.matcher(item)) return item
 81 |       })
 82 | 
 83 |       items = this.sorter(items)
 84 | 
 85 |       if (!items.length) {
 86 |         return this.shown ? this.hide() : this
 87 |       }
 88 | 
 89 |       return this.render(items.slice(0, this.options.items)).show()
 90 |     }
 91 | 
 92 |   , matcher: function (item) {
 93 |       return ~item.toLowerCase().indexOf(this.query.toLowerCase())
 94 |     }
 95 | 
 96 |   , sorter: function (items) {
 97 |       var beginswith = []
 98 |         , caseSensitive = []
 99 |         , caseInsensitive = []
100 |         , item
101 | 
102 |       while (item = items.shift()) {
103 |         if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
104 |         else if (~item.indexOf(this.query)) caseSensitive.push(item)
105 |         else caseInsensitive.push(item)
106 |       }
107 | 
108 |       return beginswith.concat(caseSensitive, caseInsensitive)
109 |     }
110 | 
111 |   , highlighter: function (item) {
112 |       return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
113 |         return '' + match + ''
114 |       })
115 |     }
116 | 
117 |   , render: function (items) {
118 |       var that = this
119 | 
120 |       items = $(items).map(function (i, item) {
121 |         i = $(that.options.item).attr('data-value', item)
122 |         i.find('a').html(that.highlighter(item))
123 |         return i[0]
124 |       })
125 | 
126 |       items.first().addClass('active')
127 |       this.$menu.html(items)
128 |       return this
129 |     }
130 | 
131 |   , next: function (event) {
132 |       var active = this.$menu.find('.active').removeClass('active')
133 |         , next = active.next()
134 | 
135 |       if (!next.length) {
136 |         next = $(this.$menu.find('li')[0])
137 |       }
138 | 
139 |       next.addClass('active')
140 |     }
141 | 
142 |   , prev: function (event) {
143 |       var active = this.$menu.find('.active').removeClass('active')
144 |         , prev = active.prev()
145 | 
146 |       if (!prev.length) {
147 |         prev = this.$menu.find('li').last()
148 |       }
149 | 
150 |       prev.addClass('active')
151 |     }
152 | 
153 |   , listen: function () {
154 |       this.$element
155 |         .on('blur',     $.proxy(this.blur, this))
156 |         .on('keypress', $.proxy(this.keypress, this))
157 |         .on('keyup',    $.proxy(this.keyup, this))
158 | 
159 |       if ($.browser.webkit || $.browser.msie) {
160 |         this.$element.on('keydown', $.proxy(this.keypress, this))
161 |       }
162 | 
163 |       this.$menu
164 |         .on('click', $.proxy(this.click, this))
165 |         .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
166 |     }
167 | 
168 |   , keyup: function (e) {
169 |       switch(e.keyCode) {
170 |         case 40: // down arrow
171 |         case 38: // up arrow
172 |           break
173 | 
174 |         case 9: // tab
175 |         case 13: // enter
176 |           if (!this.shown) return
177 |           this.select()
178 |           break
179 | 
180 |         case 27: // escape
181 |           if (!this.shown) return
182 |           this.hide()
183 |           break
184 | 
185 |         default:
186 |           this.lookup()
187 |       }
188 | 
189 |       e.stopPropagation()
190 |       e.preventDefault()
191 |   }
192 | 
193 |   , keypress: function (e) {
194 |       if (!this.shown) return
195 | 
196 |       switch(e.keyCode) {
197 |         case 9: // tab
198 |         case 13: // enter
199 |         case 27: // escape
200 |           e.preventDefault()
201 |           break
202 | 
203 |         case 38: // up arrow
204 |           e.preventDefault()
205 |           this.prev()
206 |           break
207 | 
208 |         case 40: // down arrow
209 |           e.preventDefault()
210 |           this.next()
211 |           break
212 |       }
213 | 
214 |       e.stopPropagation()
215 |     }
216 | 
217 |   , blur: function (e) {
218 |       var that = this
219 |       setTimeout(function () { that.hide() }, 150)
220 |     }
221 | 
222 |   , click: function (e) {
223 |       e.stopPropagation()
224 |       e.preventDefault()
225 |       this.select()
226 |     }
227 | 
228 |   , mouseenter: function (e) {
229 |       this.$menu.find('.active').removeClass('active')
230 |       $(e.currentTarget).addClass('active')
231 |     }
232 | 
233 |   }
234 | 
235 | 
236 |   /* TYPEAHEAD PLUGIN DEFINITION
237 |    * =========================== */
238 | 
239 |   $.fn.typeahead = function ( option ) {
240 |     return this.each(function () {
241 |       var $this = $(this)
242 |         , data = $this.data('typeahead')
243 |         , options = typeof option == 'object' && option
244 |       if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
245 |       if (typeof option == 'string') data[option]()
246 |     })
247 |   }
248 | 
249 |   $.fn.typeahead.defaults = {
250 |     source: []
251 |   , items: 8
252 |   , menu: '
      '
253 |   , item: '
      • '
254 |   }
255 | 
256 |   $.fn.typeahead.Constructor = Typeahead
257 | 
258 | 
259 |  /* TYPEAHEAD DATA-API
260 |   * ================== */
261 | 
262 |   $(function () {
263 |     $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
264 |       var $this = $(this)
265 |       if ($this.data('typeahead')) return
266 |       e.preventDefault()
267 |       $this.typeahead($this.data())
268 |     })
269 |   })
270 | 
271 | }( window.jQuery );
272 | 


--------------------------------------------------------------------------------
/blocks/nav/nav.less:
--------------------------------------------------------------------------------
  1 | // NAVIGATIONS
  2 | // -----------
  3 | 
  4 | 
  5 | 
  6 | // BASE CLASS
  7 | // ----------
  8 | 
  9 | .nav {
 10 |   margin-left: 0;
 11 |   margin-bottom: @baseLineHeight;
 12 |   list-style: none;
 13 | }
 14 | 
 15 | // Make links block level
 16 | .nav > li > a {
 17 |   display: block;
 18 | }
 19 | .nav > li > a:hover {
 20 |   text-decoration: none;
 21 |   background-color: @grayLighter;
 22 | }
 23 | 
 24 | // Nav headers (for dropdowns and lists)
 25 | .nav .nav-header {
 26 |   display: block;
 27 |   padding: 3px 15px;
 28 |   font-size: 11px;
 29 |   font-weight: bold;
 30 |   line-height: @baseLineHeight;
 31 |   color: @grayLight;
 32 |   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 33 |   text-transform: uppercase;
 34 | }
 35 | // Space them out when they follow another list item (link)
 36 | .nav li + .nav-header {
 37 |   margin-top: 9px;
 38 | }
 39 | 
 40 | 
 41 | // NAV LIST
 42 | // --------
 43 | 
 44 | .nav-list {
 45 |   padding-left: 15px;
 46 |   padding-right: 15px;
 47 |   margin-bottom: 0;
 48 | }
 49 | .nav-list > li > a,
 50 | .nav-list .nav-header {
 51 |   margin-left:  -15px;
 52 |   margin-right: -15px;
 53 |   text-shadow: 0 1px 0 rgba(255,255,255,.5);
 54 | }
 55 | .nav-list > li > a {
 56 |   padding: 3px 15px;
 57 | }
 58 | .nav-list > .active > a,
 59 | .nav-list > .active > a:hover {
 60 |   color: @white;
 61 |   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
 62 |   background-color: @linkColor;
 63 | }
 64 | .nav-list [class^="icon-"] {
 65 |   margin-right: 2px;
 66 | }
 67 | // Dividers (basically an hr) within the dropdown
 68 | .nav-list .divider {
 69 |   .nav-divider();
 70 | }
 71 | 
 72 | 
 73 | 
 74 | // TABS AND PILLS
 75 | // -------------
 76 | 
 77 | // Common styles
 78 | .nav-tabs,
 79 | .nav-pills {
 80 |   .clearfix();
 81 | }
 82 | .nav-tabs > li,
 83 | .nav-pills > li {
 84 |   float: left;
 85 | }
 86 | .nav-tabs > li > a,
 87 | .nav-pills > li > a {
 88 |   padding-right: 12px;
 89 |   padding-left: 12px;
 90 |   margin-right: 2px;
 91 |   line-height: 14px; // keeps the overall height an even number
 92 | }
 93 | 
 94 | // TABS
 95 | // ----
 96 | 
 97 | // Give the tabs something to sit on
 98 | .nav-tabs {
 99 |   border-bottom: 1px solid #ddd;
100 | }
101 | 
102 | // Make the list-items overlay the bottom border
103 | .nav-tabs > li {
104 |   margin-bottom: -1px;
105 | }
106 | 
107 | // Actual tabs (as links)
108 | .nav-tabs > li > a {
109 |   padding-top: 8px;
110 |   padding-bottom: 8px;
111 |   line-height: @baseLineHeight;
112 |   border: 1px solid transparent;
113 |   .border-radius(4px 4px 0 0);
114 |   &:hover {
115 |     border-color: @grayLighter @grayLighter #ddd;
116 |   }
117 | }
118 | // Active state, and it's :hover to override normal :hover
119 | .nav-tabs > .active > a,
120 | .nav-tabs > .active > a:hover {
121 |   color: @gray;
122 |   background-color: @white;
123 |   border: 1px solid #ddd;
124 |   border-bottom-color: transparent;
125 |   cursor: default;
126 | }
127 | 
128 | // PILLS
129 | // -----
130 | 
131 | // Links rendered as pills
132 | .nav-pills > li > a {
133 |   padding-top: 8px;
134 |   padding-bottom: 8px;
135 |   margin-top: 2px;
136 |   margin-bottom: 2px;
137 |   .border-radius(5px);
138 | }
139 | 
140 | // Active state
141 | .nav-pills > .active > a,
142 | .nav-pills > .active > a:hover {
143 |   color: @white;
144 |   background-color: @linkColor;
145 | }
146 | 
147 | 
148 | 
149 | // STACKED NAV
150 | // -----------
151 | 
152 | // Stacked tabs and pills
153 | .nav-stacked > li {
154 |   float: none;
155 | }
156 | .nav-stacked > li > a {
157 |   margin-right: 0; // no need for the gap between nav items
158 | }
159 | 
160 | // Tabs
161 | .nav-tabs.nav-stacked {
162 |   border-bottom: 0;
163 | }
164 | .nav-tabs.nav-stacked > li > a {
165 |   border: 1px solid #ddd;
166 |   .border-radius(0);
167 | }
168 | .nav-tabs.nav-stacked > li:first-child > a {
169 |   .border-radius(4px 4px 0 0);
170 | }
171 | .nav-tabs.nav-stacked > li:last-child > a {
172 |   .border-radius(0 0 4px 4px);
173 | }
174 | .nav-tabs.nav-stacked > li > a:hover {
175 |   border-color: #ddd;
176 |   z-index: 2;
177 | }
178 | 
179 | // Pills
180 | .nav-pills.nav-stacked > li > a {
181 |   margin-bottom: 3px;
182 | }
183 | .nav-pills.nav-stacked > li:last-child > a {
184 |   margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
185 | }
186 | 
187 | 
188 | 
189 | // DROPDOWNS
190 | // ---------
191 | 
192 | // Position the menu
193 | .nav-tabs .dropdown-menu,
194 | .nav-pills .dropdown-menu {
195 |   margin-top: 1px;
196 |   border-width: 1px;
197 | }
198 | .nav-pills .dropdown-menu {
199 |   .border-radius(4px);
200 | }
201 | 
202 | // Default dropdown links
203 | // -------------------------
204 | // Make carets use linkColor to start
205 | .nav-tabs .dropdown-toggle .caret,
206 | .nav-pills .dropdown-toggle .caret {
207 |   border-top-color: @linkColor;
208 |   border-bottom-color: @linkColor;
209 |   margin-top: 6px;
210 | }
211 | .nav-tabs .dropdown-toggle:hover .caret,
212 | .nav-pills .dropdown-toggle:hover .caret {
213 |   border-top-color: @linkColorHover;
214 |   border-bottom-color: @linkColorHover;
215 | }
216 | 
217 | // Active dropdown links
218 | // -------------------------
219 | .nav-tabs .active .dropdown-toggle .caret,
220 | .nav-pills .active .dropdown-toggle .caret {
221 |   border-top-color: @grayDark;
222 |   border-bottom-color: @grayDark;
223 | }
224 | 
225 | // Active:hover dropdown links
226 | // -------------------------
227 | .nav > .dropdown.active > a:hover {
228 |   color: @black;
229 |   cursor: pointer;
230 | }
231 | 
232 | // Open dropdowns
233 | // -------------------------
234 | .nav-tabs .open .dropdown-toggle,
235 | .nav-pills .open .dropdown-toggle,
236 | .nav > .open.active > a:hover {
237 |   color: @white;
238 |   background-color: @grayLight;
239 |   border-color: @grayLight;
240 | }
241 | .nav .open .caret,
242 | .nav .open.active .caret,
243 | .nav .open a:hover .caret {
244 |   border-top-color: @white;
245 |   border-bottom-color: @white;
246 |   .opacity(100);
247 | }
248 | 
249 | // Dropdowns in stacked tabs
250 | .tabs-stacked .open > a:hover {
251 |   border-color: @grayLight;
252 | }
253 | 
254 | 
255 | 
256 | // TABBABLE
257 | // --------
258 | 
259 | 
260 | // COMMON STYLES
261 | // -------------
262 | 
263 | // Clear any floats
264 | .tabbable {
265 |   .clearfix();
266 | }
267 | .tab-content {
268 |   display: table; // prevent content from running below tabs
269 |   width: 100%;
270 | }
271 | 
272 | // Remove border on bottom, left, right
273 | .tabs-below .nav-tabs,
274 | .tabs-right .nav-tabs,
275 | .tabs-left .nav-tabs {
276 |   border-bottom: 0;
277 | }
278 | 
279 | // Show/hide tabbable areas
280 | .tab-content > .tab-pane,
281 | .pill-content > .pill-pane {
282 |   display: none;
283 | }
284 | .tab-content > .active,
285 | .pill-content > .active {
286 |   display: block;
287 | }
288 | 
289 | 
290 | // BOTTOM
291 | // ------
292 | 
293 | .tabs-below .nav-tabs {
294 |   border-top: 1px solid #ddd;
295 | }
296 | .tabs-below .nav-tabs > li {
297 |   margin-top: -1px;
298 |   margin-bottom: 0;
299 | }
300 | .tabs-below .nav-tabs > li > a {
301 |   .border-radius(0 0 4px 4px);
302 |   &:hover {
303 |     border-bottom-color: transparent;
304 |     border-top-color: #ddd;
305 |   }
306 | }
307 | .tabs-below .nav-tabs .active > a,
308 | .tabs-below .nav-tabs .active > a:hover {
309 |   border-color: transparent #ddd #ddd #ddd;
310 | }
311 | 
312 | // LEFT & RIGHT
313 | // ------------
314 | 
315 | // Common styles
316 | .tabs-left .nav-tabs > li,
317 | .tabs-right .nav-tabs > li {
318 |   float: none;
319 | }
320 | .tabs-left .nav-tabs > li > a,
321 | .tabs-right .nav-tabs > li > a {
322 |   min-width: 74px;
323 |   margin-right: 0;
324 |   margin-bottom: 3px;
325 | }
326 | 
327 | // Tabs on the left
328 | .tabs-left .nav-tabs {
329 |   float: left;
330 |   margin-right: 19px;
331 |   border-right: 1px solid #ddd;
332 | }
333 | .tabs-left .nav-tabs > li > a {
334 |   margin-right: -1px;
335 |   .border-radius(4px 0 0 4px);
336 | }
337 | .tabs-left .nav-tabs > li > a:hover {
338 |   border-color: @grayLighter #ddd @grayLighter @grayLighter;
339 | }
340 | .tabs-left .nav-tabs .active > a,
341 | .tabs-left .nav-tabs .active > a:hover {
342 |   border-color: #ddd transparent #ddd #ddd;
343 |   *border-right-color: @white;
344 | }
345 | 
346 | // Tabs on the right
347 | .tabs-right .nav-tabs {
348 |   float: right;
349 |   margin-left: 19px;
350 |   border-left: 1px solid #ddd;
351 | }
352 | .tabs-right .nav-tabs > li > a {
353 |   margin-left: -1px;
354 |   .border-radius(0 4px 4px 0);
355 | }
356 | .tabs-right .nav-tabs > li > a:hover {
357 |   border-color: @grayLighter @grayLighter @grayLighter #ddd;
358 | }
359 | .tabs-right .nav-tabs .active > a,
360 | .tabs-right .nav-tabs .active > a:hover {
361 |   border-color: #ddd #ddd #ddd transparent;
362 |   *border-left-color: @white;
363 | }
364 | 


--------------------------------------------------------------------------------
/blocks/tooltip/tooltip.js:
--------------------------------------------------------------------------------
  1 | /* ===========================================================
  2 |  * bootstrap-tooltip.js v2.0.2
  3 |  * http://twitter.github.com/bootstrap/javascript.html#tooltips
  4 |  * Inspired by the original jQuery.tipsy by Jason Frame
  5 |  * ===========================================================
  6 |  * Copyright 2012 Twitter, Inc.
  7 |  *
  8 |  * Licensed under the Apache License, Version 2.0 (the "License");
  9 |  * you may not use this file except in compliance with the License.
 10 |  * You may obtain a copy of the License at
 11 |  *
 12 |  * http://www.apache.org/licenses/LICENSE-2.0
 13 |  *
 14 |  * Unless required by applicable law or agreed to in writing, software
 15 |  * distributed under the License is distributed on an "AS IS" BASIS,
 16 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 17 |  * See the License for the specific language governing permissions and
 18 |  * limitations under the License.
 19 |  * ========================================================== */
 20 | 
 21 | !function( $ ) {
 22 | 
 23 |   "use strict"
 24 | 
 25 |  /* TOOLTIP PUBLIC CLASS DEFINITION
 26 |   * =============================== */
 27 | 
 28 |   var Tooltip = function ( element, options ) {
 29 |     this.init('tooltip', element, options)
 30 |   }
 31 | 
 32 |   Tooltip.prototype = {
 33 | 
 34 |     constructor: Tooltip
 35 | 
 36 |   , init: function ( type, element, options ) {
 37 |       var eventIn
 38 |         , eventOut
 39 | 
 40 |       this.type = type
 41 |       this.$element = $(element)
 42 |       this.options = this.getOptions(options)
 43 |       this.enabled = true
 44 | 
 45 |       if (this.options.trigger != 'manual') {
 46 |         eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
 47 |         eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
 48 |         this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
 49 |         this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
 50 |       }
 51 | 
 52 |       this.options.selector ?
 53 |         (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
 54 |         this.fixTitle()
 55 |     }
 56 | 
 57 |   , getOptions: function ( options ) {
 58 |       options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
 59 | 
 60 |       if (options.delay && typeof options.delay == 'number') {
 61 |         options.delay = {
 62 |           show: options.delay
 63 |         , hide: options.delay
 64 |         }
 65 |       }
 66 | 
 67 |       return options
 68 |     }
 69 | 
 70 |   , enter: function ( e ) {
 71 |       var self = $(e.currentTarget)[this.type](this._options).data(this.type)
 72 | 
 73 |       if (!self.options.delay || !self.options.delay.show) {
 74 |         self.show()
 75 |       } else {
 76 |         self.hoverState = 'in'
 77 |         setTimeout(function() {
 78 |           if (self.hoverState == 'in') {
 79 |             self.show()
 80 |           }
 81 |         }, self.options.delay.show)
 82 |       }
 83 |     }
 84 | 
 85 |   , leave: function ( e ) {
 86 |       var self = $(e.currentTarget)[this.type](this._options).data(this.type)
 87 | 
 88 |       if (!self.options.delay || !self.options.delay.hide) {
 89 |         self.hide()
 90 |       } else {
 91 |         self.hoverState = 'out'
 92 |         setTimeout(function() {
 93 |           if (self.hoverState == 'out') {
 94 |             self.hide()
 95 |           }
 96 |         }, self.options.delay.hide)
 97 |       }
 98 |     }
 99 | 
100 |   , show: function () {
101 |       var $tip
102 |         , inside
103 |         , pos
104 |         , actualWidth
105 |         , actualHeight
106 |         , placement
107 |         , tp
108 | 
109 |       if (this.hasContent() && this.enabled) {
110 |         $tip = this.tip()
111 |         this.setContent()
112 | 
113 |         if (this.options.animation) {
114 |           $tip.addClass('fade')
115 |         }
116 | 
117 |         placement = typeof this.options.placement == 'function' ?
118 |           this.options.placement.call(this, $tip[0], this.$element[0]) :
119 |           this.options.placement
120 | 
121 |         inside = /in/.test(placement)
122 | 
123 |         $tip
124 |           .remove()
125 |           .css({ top: 0, left: 0, display: 'block' })
126 |           .appendTo(inside ? this.$element : document.body)
127 | 
128 |         pos = this.getPosition(inside)
129 | 
130 |         actualWidth = $tip[0].offsetWidth
131 |         actualHeight = $tip[0].offsetHeight
132 | 
133 |         switch (inside ? placement.split(' ')[1] : placement) {
134 |           case 'bottom':
135 |             tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
136 |             break
137 |           case 'top':
138 |             tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
139 |             break
140 |           case 'left':
141 |             tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
142 |             break
143 |           case 'right':
144 |             tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
145 |             break
146 |         }
147 | 
148 |         $tip
149 |           .css(tp)
150 |           .addClass(placement)
151 |           .addClass('in')
152 |       }
153 |     }
154 | 
155 |   , setContent: function () {
156 |       var $tip = this.tip()
157 |       $tip.find('.tooltip-inner').html(this.getTitle())
158 |       $tip.removeClass('fade in top bottom left right')
159 |     }
160 | 
161 |   , hide: function () {
162 |       var that = this
163 |         , $tip = this.tip()
164 | 
165 |       $tip.removeClass('in')
166 | 
167 |       function removeWithAnimation() {
168 |         var timeout = setTimeout(function () {
169 |           $tip.off($.support.transition.end).remove()
170 |         }, 500)
171 | 
172 |         $tip.one($.support.transition.end, function () {
173 |           clearTimeout(timeout)
174 |           $tip.remove()
175 |         })
176 |       }
177 | 
178 |       $.support.transition && this.$tip.hasClass('fade') ?
179 |         removeWithAnimation() :
180 |         $tip.remove()
181 |     }
182 | 
183 |   , fixTitle: function () {
184 |       var $e = this.$element
185 |       if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
186 |         $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
187 |       }
188 |     }
189 | 
190 |   , hasContent: function () {
191 |       return this.getTitle()
192 |     }
193 | 
194 |   , getPosition: function (inside) {
195 |       return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
196 |         width: this.$element[0].offsetWidth
197 |       , height: this.$element[0].offsetHeight
198 |       })
199 |     }
200 | 
201 |   , getTitle: function () {
202 |       var title
203 |         , $e = this.$element
204 |         , o = this.options
205 | 
206 |       title = $e.attr('data-original-title')
207 |         || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
208 | 
209 |       title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
210 | 
211 |       return title
212 |     }
213 | 
214 |   , tip: function () {
215 |       return this.$tip = this.$tip || $(this.options.template)
216 |     }
217 | 
218 |   , validate: function () {
219 |       if (!this.$element[0].parentNode) {
220 |         this.hide()
221 |         this.$element = null
222 |         this.options = null
223 |       }
224 |     }
225 | 
226 |   , enable: function () {
227 |       this.enabled = true
228 |     }
229 | 
230 |   , disable: function () {
231 |       this.enabled = false
232 |     }
233 | 
234 |   , toggleEnabled: function () {
235 |       this.enabled = !this.enabled
236 |     }
237 | 
238 |   , toggle: function () {
239 |       this[this.tip().hasClass('in') ? 'hide' : 'show']()
240 |     }
241 | 
242 |   }
243 | 
244 | 
245 |  /* TOOLTIP PLUGIN DEFINITION
246 |   * ========================= */
247 | 
248 |   $.fn.tooltip = function ( option ) {
249 |     return this.each(function () {
250 |       var $this = $(this)
251 |         , data = $this.data('tooltip')
252 |         , options = typeof option == 'object' && option
253 |       if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
254 |       if (typeof option == 'string') data[option]()
255 |     })
256 |   }
257 | 
258 |   $.fn.tooltip.Constructor = Tooltip
259 | 
260 |   $.fn.tooltip.defaults = {
261 |     animation: true
262 |   , delay: 0
263 |   , selector: false
264 |   , placement: 'top'
265 |   , trigger: 'hover'
266 |   , title: ''
267 |   , template: '
      '
268 |   }
269 | 
270 | }( window.jQuery );
271 | 


--------------------------------------------------------------------------------
/blocks/sprite/sprite.less:
--------------------------------------------------------------------------------
  1 | // SPRITES
  2 | // Glyphs and icons for buttons, nav, and more
  3 | // -------------------------------------------
  4 | 
  5 | 
  6 | // ICONS
  7 | // -----
  8 | 
  9 | // All icons receive the styles of the  tag with a base class 
 10 | // of .i and are then given a unique class to add width, height, 
 11 | // and background-position. Your resulting HTML will look like
 12 | // .
 13 | 
 14 | // For the white version of the icons, just add the .icon-white class:
 15 | // 
 16 | 
 17 | [class^="icon-"],
 18 | [class*=" icon-"] {
 19 |   display: inline-block;
 20 |   width: 14px;
 21 |   height: 14px;
 22 |   line-height: 14px;
 23 |   vertical-align: text-top;
 24 |   background-image: url("@{iconSpritePath}");
 25 |   background-position: 14px 14px;
 26 |   background-repeat: no-repeat;
 27 | 
 28 |   .ie7-restore-right-whitespace();
 29 | }
 30 | .icon-white {
 31 |   background-image: url("@{iconWhiteSpritePath}");
 32 | }
 33 | 
 34 | .icon-glass              { background-position: 0      0; }
 35 | .icon-music              { background-position: -24px  0; }
 36 | .icon-search             { background-position: -48px  0; }
 37 | .icon-envelope           { background-position: -72px  0; }
 38 | .icon-heart              { background-position: -96px  0; }
 39 | .icon-star               { background-position: -120px 0; }
 40 | .icon-star-empty         { background-position: -144px 0; }
 41 | .icon-user               { background-position: -168px 0; }
 42 | .icon-film               { background-position: -192px 0; }
 43 | .icon-th_size_large           { background-position: -216px 0; }
 44 | .icon-th                 { background-position: -240px 0; }
 45 | .icon-th-list            { background-position: -264px 0; }
 46 | .icon-ok                 { background-position: -288px 0; }
 47 | .icon-remove             { background-position: -312px 0; }
 48 | .icon-zoom-in            { background-position: -336px 0; }
 49 | .icon-zoom-out           { background-position: -360px 0; }
 50 | .icon-off                { background-position: -384px 0; }
 51 | .icon-signal             { background-position: -408px 0; }
 52 | .icon-cog                { background-position: -432px 0; }
 53 | .icon-trash              { background-position: -456px 0; }
 54 | 
 55 | .icon-home               { background-position: 0      -24px; }
 56 | .icon-file               { background-position: -24px  -24px; }
 57 | .icon-time               { background-position: -48px  -24px; }
 58 | .icon-road               { background-position: -72px  -24px; }
 59 | .icon-download-alt       { background-position: -96px  -24px; }
 60 | .icon-download           { background-position: -120px -24px; }
 61 | .icon-upload             { background-position: -144px -24px; }
 62 | .icon-inbox              { background-position: -168px -24px; }
 63 | .icon-play-circle        { background-position: -192px -24px; }
 64 | .icon-repeat             { background-position: -216px -24px; }
 65 | .icon-refresh            { background-position: -240px -24px; }
 66 | .icon-list-alt           { background-position: -264px -24px; }
 67 | .icon-lock               { background-position: -287px -24px; } // 1px off
 68 | .icon-flag               { background-position: -312px -24px; }
 69 | .icon-headphones         { background-position: -336px -24px; }
 70 | .icon-volume-off         { background-position: -360px -24px; }
 71 | .icon-volume-down        { background-position: -384px -24px; }
 72 | .icon-volume-up          { background-position: -408px -24px; }
 73 | .icon-qrcode             { background-position: -432px -24px; }
 74 | .icon-barcode            { background-position: -456px -24px; }
 75 | 
 76 | .icon-tag                { background-position: 0      -48px; }
 77 | .icon-tags               { background-position: -25px  -48px; } // 1px off
 78 | .icon-book               { background-position: -48px  -48px; }
 79 | .icon-bookmark           { background-position: -72px  -48px; }
 80 | .icon-print              { background-position: -96px  -48px; }
 81 | .icon-camera             { background-position: -120px -48px; }
 82 | .icon-font               { background-position: -144px -48px; }
 83 | .icon-bold               { background-position: -167px -48px; } // 1px off
 84 | .icon-italic             { background-position: -192px -48px; }
 85 | .icon-text-height        { background-position: -216px -48px; }
 86 | .icon-text-width         { background-position: -240px -48px; }
 87 | .icon-align-left         { background-position: -264px -48px; }
 88 | .icon-align-center       { background-position: -288px -48px; }
 89 | .icon-align-right        { background-position: -312px -48px; }
 90 | .icon-align-justify      { background-position: -336px -48px; }
 91 | .icon-list               { background-position: -360px -48px; }
 92 | .icon-indent-left        { background-position: -384px -48px; }
 93 | .icon-indent-right       { background-position: -408px -48px; }
 94 | .icon-facetime-video     { background-position: -432px -48px; }
 95 | .icon-picture            { background-position: -456px -48px; }
 96 | 
 97 | .icon-pencil             { background-position: 0      -72px; }
 98 | .icon-map-marker         { background-position: -24px  -72px; }
 99 | .icon-adjust             { background-position: -48px  -72px; }
100 | .icon-tint               { background-position: -72px  -72px; }
101 | .icon-edit               { background-position: -96px  -72px; }
102 | .icon-share              { background-position: -120px -72px; }
103 | .icon-check              { background-position: -144px -72px; }
104 | .icon-move               { background-position: -168px -72px; }
105 | .icon-step-backward      { background-position: -192px -72px; }
106 | .icon-fast-backward      { background-position: -216px -72px; }
107 | .icon-backward           { background-position: -240px -72px; }
108 | .icon-play               { background-position: -264px -72px; }
109 | .icon-pause              { background-position: -288px -72px; }
110 | .icon-stop               { background-position: -312px -72px; }
111 | .icon-forward            { background-position: -336px -72px; }
112 | .icon-fast-forward       { background-position: -360px -72px; }
113 | .icon-step-forward       { background-position: -384px -72px; }
114 | .icon-eject              { background-position: -408px -72px; }
115 | .icon-chevron-left       { background-position: -432px -72px; }
116 | .icon-chevron-right      { background-position: -456px -72px; }
117 | 
118 | .icon-plus-sign          { background-position: 0      -96px; }
119 | .icon-minus-sign         { background-position: -24px  -96px; }
120 | .icon-remove-sign        { background-position: -48px  -96px; }
121 | .icon-ok-sign            { background-position: -72px  -96px; }
122 | .icon-question-sign      { background-position: -96px  -96px; }
123 | .icon_theme_info-sign          { background-position: -120px -96px; }
124 | .icon-screenshot         { background-position: -144px -96px; }
125 | .icon-remove-circle      { background-position: -168px -96px; }
126 | .icon-ok-circle          { background-position: -192px -96px; }
127 | .icon-ban-circle         { background-position: -216px -96px; }
128 | .icon-arrow-left         { background-position: -240px -96px; }
129 | .icon-arrow-right        { background-position: -264px -96px; }
130 | .icon-arrow-up           { background-position: -289px -96px; } // 1px off
131 | .icon-arrow-down         { background-position: -312px -96px; }
132 | .icon-share-alt          { background-position: -336px -96px; }
133 | .icon-resize-full        { background-position: -360px -96px; }
134 | .icon-resize_size_small       { background-position: -384px -96px; }
135 | .icon-plus               { background-position: -408px -96px; }
136 | .icon-minus              { background-position: -433px -96px; }
137 | .icon-asterisk           { background-position: -456px -96px; }
138 | 
139 | .icon-exclamation-sign   { background-position: 0      -120px; }
140 | .icon-gift               { background-position: -24px  -120px; }
141 | .icon-leaf               { background-position: -48px  -120px; }
142 | .icon-fire               { background-position: -72px  -120px; }
143 | .icon-eye-open           { background-position: -96px  -120px; }
144 | .icon-eye-close          { background-position: -120px -120px; }
145 | .icon_theme_warning-sign       { background-position: -144px -120px; }
146 | .icon-plane              { background-position: -168px -120px; }
147 | .icon-calendar           { background-position: -192px -120px; }
148 | .icon-random             { background-position: -216px -120px; }
149 | .icon-comment            { background-position: -240px -120px; }
150 | .icon-magnet             { background-position: -264px -120px; }
151 | .icon-chevron-up         { background-position: -288px -120px; }
152 | .icon-chevron-down       { background-position: -313px -119px; } // 1px off
153 | .icon-retweet            { background-position: -336px -120px; }
154 | .icon-shopping-cart      { background-position: -360px -120px; }
155 | .icon-folder-close       { background-position: -384px -120px; }
156 | .icon-folder-open        { background-position: -408px -120px; }
157 | .icon-resize-vertical    { background-position: -432px -119px; }
158 | .icon-resize-horizontal  { background-position: -456px -118px; }
159 | 


--------------------------------------------------------------------------------
/blocks/navbar/navbar.less:
--------------------------------------------------------------------------------
  1 | // NAVBAR (FIXED AND STATIC)
  2 | // -------------------------
  3 | 
  4 | 
  5 | // COMMON STYLES
  6 | // -------------
  7 | 
  8 | .navbar {
  9 |   // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
 10 |   *position: relative;
 11 |   *z-index: 2;
 12 | 
 13 |   overflow: visible;
 14 |   margin-bottom: @baseLineHeight;
 15 | }
 16 | 
 17 | // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 18 | .navbar-inner {
 19 |   padding-left:  20px;
 20 |   padding-right: 20px;
 21 |   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
 22 |   .border-radius(4px);
 23 |   @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
 24 |   .box-shadow(@shadow);
 25 | }
 26 | 
 27 | // Set width to auto for default container
 28 | // We then reset it for fixed navbars in the #gridSystem mixin
 29 | .navbar .container {
 30 |   width: auto;
 31 | }
 32 | 
 33 | // Navbar button for toggling navbar items in responsive layouts
 34 | .button-navbar {
 35 |   display: none;
 36 |   float: right;
 37 |   padding: 7px 10px;
 38 |   margin-left: 5px;
 39 |   margin-right: 5px;
 40 |   .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
 41 |   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
 42 |   .box-shadow(@shadow);
 43 | }
 44 | .button-navbar .icon-bar {
 45 |   display: block;
 46 |   width: 18px;
 47 |   height: 2px;
 48 |   background-color: #f5f5f5;
 49 |   .border-radius(1px);
 50 |   .box-shadow(0 1px 0 rgba(0,0,0,.25));
 51 | }
 52 | .button-navbar .icon-bar + .icon-bar {
 53 |   margin-top: 3px;
 54 | }
 55 | // Override the default collapsed state
 56 | .nav-collapse.collapse {
 57 |   height: auto;
 58 | }
 59 | 
 60 | 
 61 | // Brand, links, text, and buttons
 62 | .navbar {
 63 |   color: @navbarText;
 64 |   // Hover and active states
 65 |   .brand:hover {
 66 |     text-decoration: none;
 67 |   }
 68 |   // Website or project name
 69 |   .brand {
 70 |     float: left;
 71 |     display: block;
 72 |     padding: 8px 20px 12px;
 73 |     margin-left: -20px; // negative indent to left-align the text down the page
 74 |     font-size: 20px;
 75 |     font-weight: 200;
 76 |     line-height: 1;
 77 |     color: @white;
 78 |   }
 79 |   // Plain text in topbar
 80 |   .navbar-text {
 81 |     margin-bottom: 0;
 82 |     line-height: @navbarHeight;
 83 |   }
 84 |   // Buttons in navbar
 85 |   .button,
 86 |   .button-group {
 87 |     .navbarVerticalAlign(30px); // Vertically center in navbar
 88 |   }
 89 |   .button-group .btn {
 90 |     margin-top: 0; // then undo the margin here so we don't accidentally double it
 91 |   }
 92 | }
 93 | 
 94 | // Navbar forms
 95 | .navbar-form {
 96 |   margin-bottom: 0; // remove default bottom margin
 97 |   .clearfix();
 98 |   input,
 99 |   select,
100 |   .radio,
101 |   .checkbox {
102 |     .navbarVerticalAlign(30px); // Vertically center in navbar
103 |   }
104 |   input,
105 |   select {
106 |     display: inline-block;
107 |     margin-bottom: 0;
108 |   }
109 |   input[type="image"],
110 |   input[type="checkbox"],
111 |   input[type="radio"] {
112 |     margin-top: 3px;
113 |   }
114 |   .input-append,
115 |   .input-prepend {
116 |     margin-top: 6px;
117 |     white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
118 |     input {
119 |       margin-top: 0; // remove the margin on top since it's on the parent
120 |     }
121 |   }
122 | }
123 | 
124 | // Navbar search
125 | .navbar-search {
126 |   position: relative;
127 |   float: left;
128 |   .navbarVerticalAlign(28px); // Vertically center in navbar
129 |   margin-bottom: 0;
130 |   .search-query {
131 |     padding: 4px 9px;
132 |     #font > .sans-serif(13px, normal, 1);
133 |     color: @white;
134 |     background-color: @navbarSearchBackground;
135 |     border: 1px solid @navbarSearchBorder;
136 |     @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
137 |     .box-shadow(@shadow);
138 |     .transition(none);
139 | 
140 |     // Placeholder text gets special styles; can't be a grouped selector
141 |     &:-moz-placeholder {
142 |       color: @navbarSearchPlaceholderColor;
143 |     }
144 |     &::-webkit-input-placeholder {
145 |       color: @navbarSearchPlaceholderColor;
146 |     }
147 | 
148 |     // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
149 |     &:focus,
150 |     &.focused {
151 |       padding: 5px 10px;
152 |       color: @grayDark;
153 |       text-shadow: 0 1px 0 @white;
154 |       background-color: @navbarSearchBackgroundFocus;
155 |       border: 0;
156 |       .box-shadow(0 0 3px rgba(0,0,0,.15));
157 |       outline: 0;
158 |     }
159 |   }
160 | }
161 | 
162 | 
163 | 
164 | // FIXED NAVBAR
165 | // ------------
166 | 
167 | // Shared (top/bottom) styles
168 | .navbar-fixed-top,
169 | .navbar-fixed-bottom {
170 |   position: fixed;
171 |   right: 0;
172 |   left: 0;
173 |   z-index: @zindexFixedNavbar;
174 |   margin-bottom: 0; // remove 18px margin for static navbar
175 | }
176 | .navbar-fixed-top .navbar-inner,
177 | .navbar-fixed-bottom .navbar-inner {
178 |   padding-left:  0;
179 |   padding-right: 0;
180 |   .border-radius(0);
181 | }
182 | 
183 | .navbar-fixed-top .container,
184 | .navbar-fixed-bottom .container {
185 |   #grid > .core > .span(@gridColumns);
186 | }
187 | 
188 | // Fixed to top
189 | .navbar-fixed-top {
190 |   top: 0;
191 | }
192 | 
193 | // Fixed to bottom
194 | .navbar-fixed-bottom {
195 |   bottom: 0;
196 | }
197 | 
198 | 
199 | 
200 | // NAVIGATION
201 | // ----------
202 | 
203 | .navbar .nav {
204 |   position: relative;
205 |   left: 0;
206 |   display: block;
207 |   float: left;
208 |   margin: 0 10px 0 0;
209 | }
210 | .navbar .nav.pull-right {
211 |   float: right; // redeclare due to specificity
212 | }
213 | .navbar .nav > li {
214 |   display: block;
215 |   float: left;
216 | }
217 | 
218 | // Links
219 | .navbar .nav > li > a {
220 |   float: none;
221 |   padding: 10px 10px 11px;
222 |   line-height: 19px;
223 |   color: @navbarLinkColor;
224 |   text-decoration: none;
225 |   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
226 | }
227 | // Hover
228 | .navbar .nav > li > a:hover {
229 |   background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
230 |   color: @navbarLinkColorHover;
231 |   text-decoration: none;
232 | }
233 | 
234 | // Active nav items
235 | .navbar .nav .active > a,
236 | .navbar .nav .active > a:hover {
237 |   color: @navbarLinkColorActive;
238 |   text-decoration: none;
239 |   background-color: @navbarLinkBackgroundActive;
240 | }
241 | 
242 | // Dividers (basically a vertical hr)
243 | .navbar .divider-vertical {
244 |   height: @navbarHeight;
245 |   width: 1px;
246 |   margin: 0 9px;
247 |   overflow: hidden;
248 |   background-color: @navbarBackground;
249 |   border-right: 1px solid @navbarBackgroundHighlight;
250 | }
251 | 
252 | // Secondary (floated right) nav in topbar
253 | .navbar .nav.pull-right {
254 |   margin-left: 10px;
255 |   margin-right: 0;
256 | }
257 | 
258 | 
259 | 
260 | // Dropdown menus
261 | // --------------
262 | 
263 | // Menu position and menu carets
264 | .navbar .dropdown-menu {
265 |   margin-top: 1px;
266 |   .border-radius(4px);
267 |   &:before {
268 |     content: '';
269 |     display: inline-block;
270 |     border-left:   7px solid transparent;
271 |     border-right:  7px solid transparent;
272 |     border-bottom: 7px solid #ccc;
273 |     border-bottom-color: @dropdownBorder;
274 |     position: absolute;
275 |     top: -7px;
276 |     left: 9px;
277 |   }
278 |   &:after {
279 |     content: '';
280 |     display: inline-block;
281 |     border-left:   6px solid transparent;
282 |     border-right:  6px solid transparent;
283 |     border-bottom: 6px solid @dropdownBackground;
284 |     position: absolute;
285 |     top: -6px;
286 |     left: 10px;
287 |   }
288 | }
289 | // Menu position and menu caret support for dropups via extra dropup class
290 | .navbar-fixed-bottom .dropdown-menu {
291 |   &:before {
292 |     border-top: 7px solid #ccc;
293 |     border-top-color: @dropdownBorder;
294 |     border-bottom: 0;
295 |     bottom: -7px;
296 |     top: auto;
297 |   }
298 |   &:after {
299 |     border-top: 6px solid @dropdownBackground;
300 |     border-bottom: 0;
301 |     bottom: -6px;
302 |     top: auto;
303 |   }
304 | }
305 | // Dropdown toggle caret
306 | .navbar .nav .dropdown-toggle .caret,
307 | .navbar .nav .open.dropdown .caret {
308 |   border-top-color: @white;
309 |   border-bottom-color: @white;
310 | }
311 | .navbar .nav .active .caret {
312 |   .opacity(100);
313 | }
314 | 
315 | // Remove background color from open dropdown
316 | .navbar .nav .open > .dropdown-toggle,
317 | .navbar .nav .active > .dropdown-toggle,
318 | .navbar .nav .open.active > .dropdown-toggle {
319 |   background-color: transparent;
320 | }
321 | 
322 | // Dropdown link on hover
323 | .navbar .nav .active > .dropdown-toggle:hover {
324 |   color: @white;
325 | }
326 | 
327 | // Right aligned menus need alt position
328 | // TODO: rejigger this at some point to simplify the selectors
329 | .navbar .nav.pull-right .dropdown-menu,
330 | .navbar .nav .dropdown-menu.pull-right {
331 |   left: auto;
332 |   right: 0;
333 |   &:before {
334 |     left: auto;
335 |     right: 12px;
336 |   }
337 |   &:after {
338 |     left: auto;
339 |     right: 13px;
340 |   }
341 | }
342 | 


--------------------------------------------------------------------------------
/blocks/responsive/responsive.less:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Bootstrap Responsive v2.0.2
  3 |  *
  4 |  * Copyright 2012 Twitter, Inc
  5 |  * Licensed under the Apache License v2.0
  6 |  * http://www.apache.org/licenses/LICENSE-2.0
  7 |  *
  8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  9 |  */
 10 | 
 11 | // Responsive.less
 12 | // For phone and tablet devices
 13 | // -------------------------------------------------------------
 14 | 
 15 | 
 16 | // REPEAT VARIABLES & MIXINS
 17 | // -------------------------
 18 | // Required since we compile the responsive stuff separately
 19 | 
 20 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc
 21 | @import "mixins.less";
 22 | 
 23 | 
 24 | // RESPONSIVE CLASSES
 25 | // ------------------
 26 | 
 27 | // Hide from screenreaders and browsers
 28 | // Credit: HTML5 Boilerplate
 29 | .hidden {
 30 |   display: none;
 31 |   visibility: hidden;
 32 | }
 33 | 
 34 | // Visibility utilities
 35 | 
 36 | // For desktops
 37 | .visible-phone     { display: none; }
 38 | .visible-tablet    { display: none; }
 39 | .visible-desktop   { display: block; }
 40 | .hidden-phone      { display: block; }
 41 | .hidden-tablet     { display: block; }
 42 | .hidden-desktop    { display: none; }
 43 | 
 44 | // Phones only
 45 | @media (max-width: 767px) {
 46 |   // Show
 47 |   .visible-phone     { display: block; }
 48 |   // Hide
 49 |   .hidden-phone      { display: none; }
 50 |   // Hide everything else
 51 |   .hidden-desktop    { display: block; }
 52 |   .visible-desktop   { display: none; }
 53 | }
 54 | 
 55 | // Tablets & small desktops only
 56 | @media (min-width: 768px) and (max-width: 979px) {
 57 |   // Show
 58 |   .visible-tablet    { display: block; }
 59 |   // Hide
 60 |   .hidden-tablet     { display: none; }
 61 |   // Hide everything else
 62 |   .hidden-desktop    { display: block; }
 63 |   .visible-desktop   { display: none; }
 64 | }
 65 | 
 66 | 
 67 | // UP TO LANDSCAPE PHONE
 68 | // ---------------------
 69 | 
 70 | @media (max-width: 480px) {
 71 | 
 72 |   // Smooth out the collapsing/expanding nav
 73 |   .nav-collapse {
 74 |     -webkit-transform: translate3d(0, 0, 0); // activate the GPU
 75 |   }
 76 | 
 77 |   // Block level the page header small tag for readability
 78 |   .page-header h1 small {
 79 |     display: block;
 80 |     line-height: @baseLineHeight;
 81 |   }
 82 | 
 83 |   // Update checkboxes for iOS
 84 |   input[type="checkbox"],
 85 |   input[type="radio"] {
 86 |     border: 1px solid #ccc;
 87 |   }
 88 | 
 89 |   // Remove the horizontal form styles
 90 |   .form-horizontal .control-group > label {
 91 |     float: none;
 92 |     width: auto;
 93 |     padding-top: 0;
 94 |     text-align: left;
 95 |   }
 96 |   // Move over all input controls and content
 97 |   .form-horizontal .controls {
 98 |     margin-left: 0;
 99 |   }
100 |   // Move the options list down to align with labels
101 |   .form-horizontal .control-list {
102 |     padding-top: 0; // has to be padding because margin collaspes
103 |   }
104 |   // Move over buttons in .form-actions to align with .controls
105 |   .form-horizontal .form-actions {
106 |     padding-left: 10px;
107 |     padding-right: 10px;
108 |   }
109 | 
110 |   // Modals
111 |   .modal {
112 |     position: absolute;
113 |     top:   10px;
114 |     left:  10px;
115 |     right: 10px;
116 |     width: auto;
117 |     margin: 0;
118 |     &.fade.in { top: auto; }
119 |   }
120 |   .modal-header .close {
121 |     padding: 10px;
122 |     margin: -10px;
123 |   }
124 | 
125 |   // Carousel
126 |   .carousel-caption {
127 |     position: static;
128 |   }
129 | 
130 | }
131 | 
132 | 
133 | 
134 | // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
135 | // --------------------------------------------------
136 | 
137 | @media (max-width: 767px) {
138 | 
139 |   // Padding to set content in a bit
140 |   body {
141 |     padding-left: 20px;
142 |     padding-right: 20px;
143 |   }
144 |   .navbar-fixed-top {
145 |     margin-left: -20px;
146 |     margin-right: -20px;
147 |   }
148 | 
149 |   // GRID & CONTAINERS
150 |   // -----------------
151 |   // Remove width from containers
152 |   .container {
153 |     width: auto;
154 |   }
155 |   // Fluid rows
156 |   .row-fluid {
157 |     width: 100%;
158 |   }
159 |   // Undo negative margin on rows
160 |   .row {
161 |     margin-left: 0;
162 |   }
163 |   // Make all columns even
164 |   .row > [class*="span"],
165 |   .row-fluid > [class*="span"] {
166 |     float: none;
167 |     display: block;
168 |     width: auto;
169 |     margin: 0;
170 |   }
171 | 
172 |   // THUMBNAILS
173 |   // ----------
174 |   .thumbnails [class*="span"] {
175 |     width: auto;
176 |   }
177 | 
178 |   // FORM FIELDS
179 |   // -----------
180 |   // Make span* classes full width
181 |   input[class*="span"],
182 |   select[class*="span"],
183 |   textarea[class*="span"],
184 |   .uneditable-input {
185 |     .input-block-level();
186 |   }
187 |   // But don't let it screw up prepend/append inputs
188 |   .input-prepend input[class*="span"],
189 |   .input-append input[class*="span"] {
190 |     width: auto;
191 |   }
192 | 
193 | }
194 | 
195 | 
196 | 
197 | // PORTRAIT TABLET TO DEFAULT DESKTOP
198 | // ----------------------------------
199 | 
200 | @media (min-width: 768px) and (max-width: 979px) {
201 | 
202 |   // Fixed grid
203 |   #grid > .core(42px, 20px);
204 | 
205 |   // Fluid grid
206 |   #grid > .fluid(5.801104972%, 2.762430939%);
207 | 
208 |   // Input grid
209 |   #grid > .input(42px, 20px);
210 | 
211 | }
212 | 
213 | 
214 | 
215 | // TABLETS AND BELOW
216 | // -----------------
217 | @media (max-width: 979px) {
218 | 
219 |   // UNFIX THE TOPBAR
220 |   // ----------------
221 |   // Remove any padding from the body
222 |   body {
223 |     padding-top: 0;
224 |   }
225 |   // Unfix the navbar
226 |   .navbar-fixed-top {
227 |     position: static;
228 |     margin-bottom: @baseLineHeight;
229 |   }
230 |   .navbar-fixed-top .navbar-inner {
231 |     padding: 5px;
232 |   }
233 |   .navbar .container {
234 |     width: auto;
235 |     padding: 0;
236 |   }
237 |   // Account for brand name
238 |   .navbar .brand {
239 |     padding-left: 10px;
240 |     padding-right: 10px;
241 |     margin: 0 0 0 -5px;
242 |   }
243 |   // Nav collapse clears brand
244 |   .navbar .nav-collapse {
245 |     clear: left;
246 |   }
247 |   // Block-level the nav
248 |   .navbar .nav {
249 |     float: none;
250 |     margin: 0 0 (@baseLineHeight / 2);
251 |   }
252 |   .navbar .nav > li {
253 |     float: none;
254 |   }
255 |   .navbar .nav > li > a {
256 |     margin-bottom: 2px;
257 |   }
258 |   .navbar .nav > .divider-vertical {
259 |     display: none;
260 |   }
261 |   .navbar .nav .nav-header {
262 |     color: @navbarText;
263 |     text-shadow: none;
264 |   }
265 |   // Nav and dropdown links in navbar
266 |   .navbar .nav > li > a,
267 |   .navbar .dropdown-menu a {
268 |     padding: 6px 15px;
269 |     font-weight: bold;
270 |     color: @navbarLinkColor;
271 |     .border-radius(3px);
272 |   }
273 |   .navbar .dropdown-menu li + li a {
274 |     margin-bottom: 2px;
275 |   }
276 |   .navbar .nav > li > a:hover,
277 |   .navbar .dropdown-menu a:hover {
278 |     background-color: @navbarBackground;
279 |   }
280 |   // Dropdowns in the navbar
281 |   .navbar .dropdown-menu {
282 |     position: static;
283 |     top: auto;
284 |     left: auto;
285 |     float: none;
286 |     display: block;
287 |     max-width: none;
288 |     margin: 0 15px;
289 |     padding: 0;
290 |     background-color: transparent;
291 |     border: none;
292 |     .border-radius(0);
293 |     .box-shadow(none);
294 |   }
295 |   .navbar .dropdown-menu:before,
296 |   .navbar .dropdown-menu:after {
297 |     display: none;
298 |   }
299 |   .navbar .dropdown-menu .divider {
300 |     display: none;
301 |   }
302 |   // Forms in navbar
303 |   .navbar-form,
304 |   .navbar-search {
305 |     float: none;
306 |     padding: (@baseLineHeight / 2) 15px;
307 |     margin: (@baseLineHeight / 2) 0;
308 |     border-top: 1px solid @navbarBackground;
309 |     border-bottom: 1px solid @navbarBackground;
310 |     @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
311 |     .box-shadow(@shadow);
312 |   }
313 |   // Pull right (secondary) nav content
314 |   .navbar .nav.pull-right {
315 |     float: none;
316 |     margin-left: 0;
317 |   }
318 |   // Static navbar
319 |   .navbar-static .navbar-inner {
320 |     padding-left:  10px;
321 |     padding-right: 10px;
322 |   }
323 |   // Navbar button
324 |   .button-navbar {
325 |     display: block;
326 |   }
327 | 
328 |   // Hide everything in the navbar save .brand and toggle button */
329 |   .nav-collapse {
330 |     overflow: hidden;
331 |     height: 0;
332 |   }
333 | }
334 | 
335 | 
336 | 
337 | // DEFAULT DESKTOP
338 | // ---------------
339 | 
340 | @media (min-width: 980px) {
341 |   .nav-collapse.collapse {
342 |     height: auto !important;
343 |     overflow: visible !important;
344 |   }
345 | }
346 | 
347 | 
348 | 
349 | // LARGE DESKTOP & UP
350 | // ------------------
351 | 
352 | @media (min-width: 1200px) {
353 | 
354 |   // Fixed grid
355 |   #grid > .core(70px, 30px);
356 | 
357 |   // Fluid grid
358 |   #grid > .fluid(5.982905983%, 2.564102564%);
359 | 
360 |   // Input grid
361 |   #grid > .input(70px, 30px);
362 | 
363 |   // Thumbnails
364 |   .thumbnails {
365 |     margin-left: -30px;
366 |   }
367 |   .thumbnails > li {
368 |     margin-left: 30px;
369 |   }
370 | 
371 | }
372 | 


--------------------------------------------------------------------------------
/blocks/form/form.less:
--------------------------------------------------------------------------------
  1 | // Forms.less
  2 | // Base styles for various input types, form layouts, and states
  3 | // -------------------------------------------------------------
  4 | 
  5 | 
  6 | // GENERAL STYLES
  7 | // --------------
  8 | 
  9 | // Make all forms have space below them
 10 | form {
 11 |   margin: 0 0 @baseLineHeight;
 12 | }
 13 | 
 14 | fieldset {
 15 |   padding: 0;
 16 |   margin: 0;
 17 |   border: 0;
 18 | }
 19 | 
 20 | // Groups of fields with labels on top (legends)
 21 | legend {
 22 |   display: block;
 23 |   width: 100%;
 24 |   padding: 0;
 25 |   margin-bottom: @baseLineHeight * 1.5;
 26 |   font-size: @baseFontSize * 1.5;
 27 |   line-height: @baseLineHeight * 2;
 28 |   color: @grayDark;
 29 |   border: 0;
 30 |   border-bottom: 1px solid #eee;
 31 | 
 32 |   // Small
 33 |   small {
 34 |     font-size: @baseLineHeight * .75;
 35 |     color: @grayLight;
 36 |   }
 37 | }
 38 | 
 39 | // Set font for forms
 40 | label,
 41 | input,
 42 | button,
 43 | select,
 44 | textarea {
 45 |   #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
 46 | }
 47 | input,
 48 | button,
 49 | select,
 50 | textarea {
 51 |   font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
 52 | }
 53 | 
 54 | // Identify controls by their labels
 55 | label {
 56 |   display: block;
 57 |   margin-bottom: 5px;
 58 |   color: @grayDark;
 59 | }
 60 | 
 61 | // Inputs, Textareas, Selects
 62 | input,
 63 | textarea,
 64 | select,
 65 | .uneditable-input {
 66 |   display: inline-block;
 67 |   width: 210px;
 68 |   height: @baseLineHeight;
 69 |   padding: 4px;
 70 |   margin-bottom: 9px;
 71 |   font-size: @baseFontSize;
 72 |   line-height: @baseLineHeight;
 73 |   color: @gray;
 74 |   border: 1px solid @inputBorder;
 75 |   .border-radius(3px);
 76 | }
 77 | .uneditable-textarea {
 78 |   width: auto;
 79 |   height: auto;
 80 | }
 81 | 
 82 | // Inputs within a label
 83 | label input,
 84 | label textarea,
 85 | label select {
 86 |   display: block;
 87 | }
 88 | 
 89 | // Mini reset for unique input types
 90 | input[type="image"],
 91 | input[type="checkbox"],
 92 | input[type="radio"] {
 93 |   width: auto;
 94 |   height: auto;
 95 |   padding: 0;
 96 |   margin: 3px 0;
 97 |   *margin-top: 0; /* IE7 */
 98 |   line-height: normal;
 99 |   cursor: pointer;
100 |   .border-radius(0);
101 |   border: 0 \9; /* IE9 and down */
102 | }
103 | input[type="image"] {
104 |   border: 0;
105 | }
106 | 
107 | // Reset the file input to browser defaults
108 | input[type="file"] {
109 |   width: auto;
110 |   padding: initial;
111 |   line-height: initial;
112 |   border: initial;
113 |   background-color: @inputBackground;
114 |   background-color: initial;
115 |   .box-shadow(none);
116 | }
117 | 
118 | // Help out input buttons
119 | input[type="button"],
120 | input[type="reset"],
121 | input[type="submit"] {
122 |   width: auto;
123 |   height: auto;
124 | }
125 | 
126 | // Set the height of select and file controls to match text inputs
127 | select,
128 | input[type="file"] {
129 |   height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
130 |   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
131 |   line-height: 28px;
132 | }
133 | 
134 | // Reset line-height for IE
135 | input[type="file"] {
136 |   line-height: 18px \9;
137 | }
138 | 
139 | // Chrome on Linux and Mobile Safari need background-color
140 | select {
141 |   width: 220px; // default input width + 10px of padding that doesn't get applied
142 |   background-color: @inputBackground;
143 | }
144 | 
145 | // Make multiple select elements height not fixed
146 | select[multiple],
147 | select[size] {
148 |   height: auto;
149 | }
150 | 
151 | // Remove shadow from image inputs
152 | input[type="image"] {
153 |   .box-shadow(none);
154 | }
155 | 
156 | // Make textarea height behave
157 | textarea {
158 |   height: auto;
159 | }
160 | 
161 | // Hidden inputs
162 | input[type="hidden"] {
163 |   display: none;
164 | }
165 | 
166 | 
167 | 
168 | // CHECKBOXES & RADIOS
169 | // -------------------
170 | 
171 | // Indent the labels to position radios/checkboxes as hanging
172 | .radio,
173 | .checkbox {
174 |   padding-left: 18px;
175 | }
176 | .radio input[type="radio"],
177 | .checkbox input[type="checkbox"] {
178 |   float: left;
179 |   margin-left: -18px;
180 | }
181 | 
182 | // Move the options list down to align with labels
183 | .controls > .radio:first-child,
184 | .controls > .checkbox:first-child {
185 |   padding-top: 5px; // has to be padding because margin collaspes
186 | }
187 | 
188 | // Radios and checkboxes on same line
189 | // TODO v3: Convert .inline to .control-inline
190 | .radio.inline,
191 | .checkbox.inline {
192 |   display: inline-block;
193 |   padding-top: 5px;
194 |   margin-bottom: 0;
195 |   vertical-align: middle;
196 | }
197 | .radio.inline + .radio.inline,
198 | .checkbox.inline + .checkbox.inline {
199 |   margin-left: 10px; // space out consecutive inline controls
200 | }
201 | 
202 | 
203 | 
204 | // FOCUS STATE
205 | // -----------
206 | 
207 | input,
208 | textarea {
209 |   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
210 |   @transition: border linear .2s, box-shadow linear .2s;
211 |   .transition(@transition);
212 | }
213 | input:focus,
214 | textarea:focus {
215 |   border-color: rgba(82,168,236,.8);
216 |   @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
217 |   .box-shadow(@shadow);
218 |   outline: 0;
219 |   outline: thin dotted \9; /* IE6-9 */
220 | }
221 | input[type="file"]:focus,
222 | input[type="radio"]:focus,
223 | input[type="checkbox"]:focus,
224 | select:focus {
225 |   .box-shadow(none); // override for file inputs
226 |   .tab-focus();
227 | }
228 | 
229 | 
230 | 
231 | // INPUT SIZES
232 | // -----------
233 | 
234 | // General classes for quick sizes
235 | .input_size_mini       { width: 60px; }
236 | .input_size_small      { width: 90px; }
237 | .input-medium     { width: 150px; }
238 | .input_size_large      { width: 210px; }
239 | .input-xlarge     { width: 270px; }
240 | .input-xxlarge    { width: 530px; }
241 | 
242 | // Grid style input sizes
243 | input[class*="span"],
244 | select[class*="span"],
245 | textarea[class*="span"],
246 | .uneditable-input {
247 |   float: none;
248 |   margin-left: 0;
249 | }
250 | 
251 | 
252 | 
253 | // GRID SIZING FOR INPUTS
254 | // ----------------------
255 | 
256 | #grid > .input (@gridColumnWidth, @gridGutterWidth);
257 | 
258 | 
259 | 
260 | 
261 | // DISABLED STATE
262 | // --------------
263 | 
264 | // Disabled and read-only inputs
265 | input[disabled],
266 | select[disabled],
267 | textarea[disabled],
268 | input[readonly],
269 | select[readonly],
270 | textarea[readonly] {
271 |   background-color: @inputDisabledBackground;
272 |   border-color: #ddd;
273 |   cursor: not-allowed;
274 | }
275 | 
276 | 
277 | 
278 | 
279 | // FORM FIELD FEEDBACK STATES
280 | // --------------------------
281 | 
282 | // Warning
283 | .control-group.warning {
284 |   .formFieldState(@warningText, @warningText, @warningBackground);
285 | }
286 | // Error
287 | .control-group.error {
288 |   .formFieldState(@errorText, @errorText, @errorBackground);
289 | }
290 | // Success
291 | .control-group.success {
292 |   .formFieldState(@successText, @successText, @successBackground);
293 | }
294 | 
295 | // HTML5 invalid states
296 | // Shares styles with the .control-group.error above
297 | input:focus:required:invalid,
298 | textarea:focus:required:invalid,
299 | select:focus:required:invalid {
300 |   color: #b94a48;
301 |   border-color: #ee5f5b;
302 |   &:focus {
303 |     border-color: darken(#ee5f5b, 10%);
304 |     .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
305 |   }
306 | }
307 | 
308 | 
309 | 
310 | // FORM ACTIONS
311 | // ------------
312 | 
313 | .form-actions {
314 |   padding: (@baseLineHeight - 1) 20px @baseLineHeight;
315 |   margin-top: @baseLineHeight;
316 |   margin-bottom: @baseLineHeight;
317 |   background-color: @grayLighter;
318 |   border-top: 1px solid #ddd;
319 |   .clearfix(); // Adding clearfix to allow for .pull-right button containers
320 | }
321 | 
322 | // For text that needs to appear as an input but should not be an input
323 | .uneditable-input {
324 |   display: block;
325 |   background-color: @inputBackground;
326 |   border-color: #eee;
327 |   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
328 |   cursor: not-allowed;
329 | }
330 | 
331 | // Placeholder text gets special styles; can't be bundled together though for some reason
332 | .placeholder(@grayLight);
333 | 
334 | 
335 | 
336 | // HELP TEXT
337 | // ---------
338 | 
339 | .help-block,
340 | .help-inline {
341 |   color: @gray; // lighten the text some for contrast
342 | }
343 | 
344 | .help-block {
345 |   display: block; // account for any element using help-block
346 |   margin-bottom: @baseLineHeight / 2;
347 | }
348 | 
349 | .help-inline {
350 |   display: inline-block;
351 |   .ie7-inline-block();
352 |   vertical-align: middle;
353 |   padding-left: 5px;
354 | }
355 | 
356 | 
357 | 
358 | // INPUT GROUPS
359 | // ------------
360 | 
361 | // Allow us to put symbols and text within the input field for a cleaner look
362 | .input-prepend,
363 | .input-append {
364 |   margin-bottom: 5px;
365 |   input,
366 |   select,
367 |   .uneditable-input {
368 |     *margin-left: 0;
369 |     .border-radius(0 3px 3px 0);
370 |     &:focus {
371 |       position: relative;
372 |       z-index: 2;
373 |     }
374 |   }
375 |   .uneditable-input {
376 |     border-left-color: #ccc;
377 |   }
378 |   .add-on {
379 |     display: inline-block;
380 |     width: auto;
381 |     min-width: 16px;
382 |     height: @baseLineHeight;
383 |     padding: 4px 5px;
384 |     font-weight: normal;
385 |     line-height: @baseLineHeight;
386 |     text-align: center;
387 |     text-shadow: 0 1px 0 @white;
388 |     vertical-align: middle;
389 |     background-color: @grayLighter;
390 |     border: 1px solid #ccc;
391 |   }
392 |   .add-on,
393 |   .button {
394 |     .border-radius(3px 0 0 3px);
395 |   }
396 |   .active {
397 |     background-color: lighten(@green, 30);
398 |     border-color: @green;
399 |   }
400 | }
401 | .input-prepend {
402 |   .add-on,
403 |   .button {
404 |     margin-right: -1px;
405 |   }
406 | }
407 | .input-append {
408 |   input,
409 |   select
410 |   .uneditable-input {
411 |     .border-radius(3px 0 0 3px);
412 |   }
413 |   .uneditable-input {
414 |     border-left-color: #eee;
415 |     border-right-color: #ccc;
416 |   }
417 |   .add-on,
418 |   .button {
419 |     margin-left: -1px;
420 |     .border-radius(0 3px 3px 0);
421 |   }
422 | }
423 | // Remove all border-radius for inputs with both prepend and append
424 | .input-prepend.input-append {
425 |   input,
426 |   select,
427 |   .uneditable-input {
428 |     .border-radius(0);
429 |   }
430 |   .add-on:first-child,
431 |   .button:first-child {
432 |     margin-right: -1px;
433 |     .border-radius(3px 0 0 3px);
434 |   }
435 |   .add-on:last-child,
436 |   .button:last-child {
437 |     margin-left: -1px;
438 |     .border-radius(0 3px 3px 0);
439 |   }
440 | }
441 | 
442 | 
443 | 
444 | // SEARCH FORM
445 | // -----------
446 | 
447 | .search-query {
448 |   padding-left: 14px;
449 |   padding-right: 14px;
450 |   margin-bottom: 0; // remove the default margin on all inputs
451 |   .border-radius(14px);
452 | }
453 | 
454 | 
455 | 
456 | // HORIZONTAL & VERTICAL FORMS
457 | // ---------------------------
458 | 
459 | // Common properties
460 | // -----------------
461 | 
462 | .form-search,
463 | .form-inline,
464 | .form-horizontal {
465 |   input,
466 |   textarea,
467 |   select,
468 |   .help-inline,
469 |   .uneditable-input,
470 |   .input-prepend,
471 |   .input-append {
472 |     display: inline-block;
473 |     margin-bottom: 0;
474 |   }
475 |   // Re-hide hidden elements due to specifity
476 |   .hide {
477 |     display: none;
478 |   }
479 | }
480 | .form-search label,
481 | .form-inline label {
482 |   display: inline-block;
483 | }
484 | // Remove margin for input-prepend/-append
485 | .form-search .input-append,
486 | .form-inline .input-append,
487 | .form-search .input-prepend,
488 | .form-inline .input-prepend {
489 |   margin-bottom: 0;
490 | }
491 | // Inline checkbox/radio labels (remove padding on left)
492 | .form-search .radio,
493 | .form-search .checkbox,
494 | .form-inline .radio,
495 | .form-inline .checkbox {
496 |   padding-left: 0;
497 |   margin-bottom: 0;
498 |   vertical-align: middle;
499 | }
500 | // Remove float and margin, set to inline-block
501 | .form-search .radio input[type="radio"],
502 | .form-search .checkbox input[type="checkbox"],
503 | .form-inline .radio input[type="radio"],
504 | .form-inline .checkbox input[type="checkbox"] {
505 |   float: left;
506 |   margin-left: 0;
507 |   margin-right: 3px;
508 | }
509 | 
510 | 
511 | // Margin to space out fieldsets
512 | .control-group {
513 |   margin-bottom: @baseLineHeight / 2;
514 | }
515 | 
516 | // Legend collapses margin, so next element is responsible for spacing
517 | legend + .control-group {
518 |   margin-top: @baseLineHeight;
519 |   -webkit-margin-top-collapse: separate;
520 | }
521 | 
522 | // Horizontal-specific styles
523 | // --------------------------
524 | 
525 | .form-horizontal {
526 |   // Increase spacing between groups
527 |   .control-group {
528 |     margin-bottom: @baseLineHeight;
529 |     .clearfix();
530 |   }
531 |   // Float the labels left
532 |   .control-label {
533 |     float: left;
534 |     width: 140px;
535 |     padding-top: 5px;
536 |     text-align: right;
537 |   }
538 |   // Move over all input controls and content
539 |   .controls {
540 |     margin-left: 160px;
541 |     /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
542 |     *display: inline-block;
543 |     *margin-left: 0;
544 |     *padding-left: 20px;
545 |   }
546 |   // Remove bottom margin on block level help text since that's accounted for on .control-group
547 |   .help-block {
548 |     margin-top: @baseLineHeight / 2;
549 |     margin-bottom: 0;
550 |   }
551 |   // Move over buttons in .form-actions to align with .controls
552 |   .form-actions {
553 |     padding-left: 160px;
554 |   }
555 | }
556 | 


--------------------------------------------------------------------------------
/blocks/mixin/mixin.less:
--------------------------------------------------------------------------------
  1 | // Mixins.less
  2 | // Snippets of reusable CSS to develop faster and keep code readable
  3 | // -----------------------------------------------------------------
  4 | 
  5 | 
  6 | // UTILITY MIXINS
  7 | // --------------------------------------------------
  8 | 
  9 | // Clearfix
 10 | // --------
 11 | // For clearing floats like a boss h5bp.com/q
 12 | .clearfix {
 13 |   *zoom: 1;
 14 |   &:before,
 15 |   &:after {
 16 |     display: table;
 17 |     content: "";
 18 |   }
 19 |   &:after {
 20 |     clear: both;
 21 |   }
 22 | }
 23 | 
 24 | // Webkit-style focus
 25 | // ------------------
 26 | .tab-focus() {
 27 |   // Default
 28 |   outline: thin dotted #333;
 29 |   // Webkit
 30 |   outline: 5px auto -webkit-focus-ring-color;
 31 |   outline-offset: -2px;
 32 | }
 33 | 
 34 | // Center-align a block level element
 35 | // ----------------------------------
 36 | .center-block() {
 37 |   display: block;
 38 |   margin-left: auto;
 39 |   margin-right: auto;
 40 | }
 41 | 
 42 | // IE7 inline-block
 43 | // ----------------
 44 | .ie7-inline-block() {
 45 |   *display: inline; /* IE7 inline-block hack */
 46 |   *zoom: 1;
 47 | }
 48 | 
 49 | // IE7 likes to collapse whitespace on either side of the inline-block elements.
 50 | // Ems because we're attempting to match the width of a space character. Left
 51 | // version is for form buttons, which typically come after other elements, and
 52 | // right version is for icons, which come before. Applying both is ok, but it will
 53 | // mean that space between those elements will be .6em (~2 space characters) in IE7,
 54 | // instead of the 1 space in other browsers.
 55 | .ie7-restore-left-whitespace() {
 56 |   *margin-left: .3em;
 57 | 
 58 |   &:first-child {
 59 |     *margin-left: 0;
 60 |   }
 61 | }
 62 | 
 63 | .ie7-restore-right-whitespace() {
 64 |   *margin-right: .3em;
 65 | 
 66 |   &:last-child {
 67 |     *margin-left: 0;
 68 |   }
 69 | }
 70 | 
 71 | // Sizing shortcuts
 72 | // -------------------------
 73 | .size(@height: 5px, @width: 5px) {
 74 |   width: @width;
 75 |   height: @height;
 76 | }
 77 | .square(@size: 5px) {
 78 |   .size(@size, @size);
 79 | }
 80 | 
 81 | // Placeholder text
 82 | // -------------------------
 83 | .placeholder(@color: @placeholderText) {
 84 |   :-moz-placeholder {
 85 |     color: @color;
 86 |   }
 87 |   ::-webkit-input-placeholder {
 88 |     color: @color;
 89 |   }
 90 | }
 91 | 
 92 | // Text overflow
 93 | // -------------------------
 94 | // Requires inline-block or block for proper styling
 95 | .text-overflow() {
 96 |   overflow: hidden;
 97 |   text-overflow: ellipsis;
 98 |   white-space: nowrap;
 99 | }
100 | 
101 | // New image replacement
102 | // -------------------------
103 | // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
104 | .hide-text {
105 |   overflow: hidden;
106 |   text-indent: 100%;
107 |   white-space: nowrap;
108 | }
109 | 
110 | 
111 | // FONTS
112 | // --------------------------------------------------
113 | 
114 | #font {
115 |   #family {
116 |     .serif() {
117 |       font-family: Georgia, "Times New Roman", Times, serif;
118 |     }
119 |     .sans-serif() {
120 |       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
121 |     }
122 |     .monospace() {
123 |       font-family: Menlo, Monaco, "Courier New", monospace;
124 |     }
125 |   }
126 |   .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
127 |     font-size: @size;
128 |     font-weight: @weight;
129 |     line-height: @lineHeight;
130 |   }
131 |   .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
132 |     #font > #family > .serif;
133 |     #font > .shorthand(@size, @weight, @lineHeight);
134 |   }
135 |   .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136 |     #font > #family > .sans-serif;
137 |     #font > .shorthand(@size, @weight, @lineHeight);
138 |   }
139 |   .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140 |     #font > #family > .monospace;
141 |     #font > .shorthand(@size, @weight, @lineHeight);
142 |   }
143 | }
144 | 
145 | 
146 | // FORMS
147 | // --------------------------------------------------
148 | 
149 | // Block level inputs
150 | .input-block-level {
151 |   display: block;
152 |   width: 100%;
153 |   min-height: 28px; /* Make inputs at least the height of their button counterpart */
154 |   /* Makes inputs behave like true block-level elements */
155 |   .box-sizing(border-box);
156 | }
157 | 
158 | 
159 | // Mixin for form field states
160 | .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
161 |   // Set the text color
162 |   > label,
163 |   .help-block,
164 |   .help-inline {
165 |     color: @textColor;
166 |   }
167 |   // Style inputs accordingly
168 |   input,
169 |   select,
170 |   textarea {
171 |     color: @textColor;
172 |     border-color: @borderColor;
173 |     &:focus {
174 |       border-color: darken(@borderColor, 10%);
175 |       .box-shadow(0 0 6px lighten(@borderColor, 20%));
176 |     }
177 |   }
178 |   // Give a small background color for input-prepend/-append
179 |   .input-prepend .add-on,
180 |   .input-append .add-on {
181 |     color: @textColor;
182 |     background-color: @backgroundColor;
183 |     border-color: @textColor;
184 |   }
185 | }
186 | 
187 | 
188 | 
189 | // CSS3 PROPERTIES
190 | // --------------------------------------------------
191 | 
192 | // Border Radius
193 | .border-radius(@radius: 5px) {
194 |   -webkit-border-radius: @radius;
195 |      -moz-border-radius: @radius;
196 |           border-radius: @radius;
197 | }
198 | 
199 | // Drop shadows
200 | .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
201 |   -webkit-box-shadow: @shadow;
202 |      -moz-box-shadow: @shadow;
203 |           box-shadow: @shadow;
204 | }
205 | 
206 | // Transitions
207 | .transition(@transition) {
208 |   -webkit-transition: @transition;
209 |      -moz-transition: @transition;
210 |       -ms-transition: @transition;
211 |        -o-transition: @transition;
212 |           transition: @transition;
213 | }
214 | 
215 | // Transformations
216 | .rotate(@degrees) {
217 |   -webkit-transform: rotate(@degrees);
218 |      -moz-transform: rotate(@degrees);
219 |       -ms-transform: rotate(@degrees);
220 |        -o-transform: rotate(@degrees);
221 |           transform: rotate(@degrees);
222 | }
223 | .scale(@ratio) {
224 |   -webkit-transform: scale(@ratio);
225 |      -moz-transform: scale(@ratio);
226 |       -ms-transform: scale(@ratio);
227 |        -o-transform: scale(@ratio);
228 |           transform: scale(@ratio);
229 | }
230 | .translate(@x: 0, @y: 0) {
231 |   -webkit-transform: translate(@x, @y);
232 |      -moz-transform: translate(@x, @y);
233 |       -ms-transform: translate(@x, @y);
234 |        -o-transform: translate(@x, @y);
235 |           transform: translate(@x, @y);
236 | }
237 | .skew(@x: 0, @y: 0) {
238 |   -webkit-transform: skew(@x, @y);
239 |      -moz-transform: skew(@x, @y);
240 |       -ms-transform: skew(@x, @y);
241 |        -o-transform: skew(@x, @y);
242 |           transform: skew(@x, @y);
243 | }
244 | .translate3d(@x: 0, @y: 0, @z: 0) {
245 |   -webkit-transform: translate(@x, @y, @z);
246 |      -moz-transform: translate(@x, @y, @z);
247 |       -ms-transform: translate(@x, @y, @z);
248 |        -o-transform: translate(@x, @y, @z);
249 |           transform: translate(@x, @y, @z);
250 | }
251 | 
252 | // Background clipping
253 | // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
254 | .background-clip(@clip) {
255 |   -webkit-background-clip: @clip;
256 |      -moz-background-clip: @clip;
257 |           background-clip: @clip;
258 | }
259 | 
260 | // Background sizing
261 | .background-size(@size){
262 |   -webkit-background-size: @size;
263 |      -moz-background-size: @size;
264 |        -o-background-size: @size;
265 |           background-size: @size;
266 | }
267 | 
268 | 
269 | // Box sizing
270 | .box-sizing(@boxmodel) {
271 |   -webkit-box-sizing: @boxmodel;
272 |      -moz-box-sizing: @boxmodel;
273 |       -ms-box-sizing: @boxmodel;
274 |           box-sizing: @boxmodel;
275 | }
276 | 
277 | // User select
278 | // For selecting text on the page
279 | .user-select(@select) {
280 |   -webkit-user-select: @select;
281 |      -moz-user-select: @select;
282 |        -o-user-select: @select;
283 |           user-select: @select;
284 | }
285 | 
286 | // Resize anything
287 | .resizable(@direction: both) {
288 |   resize: @direction; // Options: horizontal, vertical, both
289 |   overflow: auto; // Safari fix
290 | }
291 | 
292 | // CSS3 Content Columns
293 | .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
294 |   -webkit-column-count: @columnCount;
295 |      -moz-column-count: @columnCount;
296 |           column-count: @columnCount;
297 |   -webkit-column-gap: @columnGap;
298 |      -moz-column-gap: @columnGap;
299 |           column-gap: @columnGap;
300 | }
301 | 
302 | // Opacity
303 | .opacity(@opacity: 100) {
304 |   opacity: @opacity / 100;
305 |    filter: ~"alpha(opacity=@{opacity})";
306 | }
307 | 
308 | 
309 | 
310 | // BACKGROUNDS
311 | // --------------------------------------------------
312 | 
313 | // Add an alphatransparency value to any background or border color (via Elyse Holladay)
314 | #translucent {
315 |   .background(@color: @white, @alpha: 1) {
316 |     background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
317 |   }
318 |   .border(@color: @white, @alpha: 1) {
319 |     border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
320 |     .background-clip(padding-box);
321 |   }
322 | }
323 | 
324 | // Gradient Bar Colors for buttons and alerts
325 | .gradientBar(@primaryColor, @secondaryColor) {
326 |   #gradient > .vertical(@primaryColor, @secondaryColor);
327 |   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
328 |   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
329 | }
330 | 
331 | // Gradients
332 | #gradient {
333 |   .horizontal(@startColor: #555, @endColor: #333) {
334 |     background-color: @endColor;
335 |     background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
336 |     background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
337 |     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
338 |     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
339 |     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
340 |     background-image: linear-gradient(left, @startColor, @endColor); // Le standard
341 |     background-repeat: repeat-x;
342 |     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
343 |   }
344 |   .vertical(@startColor: #555, @endColor: #333) {
345 |     background-color: mix(@startColor, @endColor, 60%);
346 |     background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
347 |     background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
348 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
349 |     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
350 |     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
351 |     background-image: linear-gradient(top, @startColor, @endColor); // The standard
352 |     background-repeat: repeat-x;
353 |     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
354 |   }
355 |   .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
356 |     background-color: @endColor;
357 |     background-repeat: repeat-x;
358 |     background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
359 |     background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
360 |     background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
361 |     background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
362 |     background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
363 |   }
364 |   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
365 |     background-color: mix(@midColor, @endColor, 80%);
366 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
367 |     background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
368 |     background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
369 |     background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
370 |     background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
371 |     background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
372 |     background-repeat: no-repeat;
373 |     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
374 |   }
375 |   .radial(@innerColor: #555, @outerColor: #333)  {
376 |     background-color: @outerColor;
377 |     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
378 |     background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
379 |     background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
380 |     background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
381 |     background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
382 |     background-repeat: no-repeat;
383 |   }
384 |   .striped(@color, @angle: -45deg) {
385 |     background-color: @color;
386 |     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
387 |     background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
388 |     background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
389 |     background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
390 |     background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
391 |     background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
392 |   }
393 | }
394 | // Reset filters for IE
395 | .reset-filter() {
396 |   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
397 | }
398 | 
399 | 
400 | 
401 | // COMPONENT MIXINS
402 | // --------------------------------------------------
403 | 
404 | // Horizontal dividers
405 | // -------------------------
406 | // Dividers (basically an hr) within dropdowns and nav lists
407 | .nav-divider() {
408 |   height: 1px;
409 |   margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
410 |   overflow: hidden;
411 |   background-color: #e5e5e5;
412 |   border-bottom: 1px solid @white;
413 | 
414 |   // IE7 needs a set width since we gave a height. Restricting just
415 |   // to IE7 to keep the 1px left/right space in other browsers.
416 |   // It is unclear where IE is getting the extra space that we need
417 |   // to negative-margin away, but so it goes.
418 |   *width: 100%;
419 |   *margin: -5px 0 5px;
420 | }
421 | 
422 | // Button backgrounds
423 | // ------------------
424 | .buttonBackground(@startColor, @endColor) {
425 |   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
426 |   .gradientBar(@startColor, @endColor);
427 |   .reset-filter();
428 | 
429 |   // in these cases the gradient won't cover the background, so we override
430 |   &:hover, &:active, &.active, &.disabled, &[disabled] {
431 |     background-color: @endColor;
432 |   }
433 | 
434 |   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
435 |   &:active,
436 |   &.active {
437 |     background-color: darken(@endColor, 10%) e("\9");
438 |   }
439 | }
440 | 
441 | // Navbar vertical align
442 | // -------------------------
443 | // Vertically center elements in the navbar.
444 | // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
445 | .navbarVerticalAlign(@elementHeight) {
446 |   margin-top: (@navbarHeight - @elementHeight) / 2;
447 | }
448 | 
449 | // Popover arrows
450 | // -------------------------
451 | // For tipsies and popovers
452 | #popoverArrow {
453 |   .top(@arrowWidth: 5px, @color: @black) {
454 |     bottom: 0;
455 |     left: 50%;
456 |     margin-left: -@arrowWidth;
457 |     border-left: @arrowWidth solid transparent;
458 |     border-right: @arrowWidth solid transparent;
459 |     border-top: @arrowWidth solid @color;
460 |   }
461 |   .left(@arrowWidth: 5px, @color: @black) {
462 |     top: 50%;
463 |     right: 0;
464 |     margin-top: -@arrowWidth;
465 |     border-top: @arrowWidth solid transparent;
466 |     border-bottom: @arrowWidth solid transparent;
467 |     border-left: @arrowWidth solid @color;
468 |   }
469 |   .bottom(@arrowWidth: 5px, @color: @black) {
470 |     top: 0;
471 |     left: 50%;
472 |     margin-left: -@arrowWidth;
473 |     border-left: @arrowWidth solid transparent;
474 |     border-right: @arrowWidth solid transparent;
475 |     border-bottom: @arrowWidth solid @color;
476 |   }
477 |   .right(@arrowWidth: 5px, @color: @black) {
478 |     top: 50%;
479 |     left: 0;
480 |     margin-top: -@arrowWidth;
481 |     border-top: @arrowWidth solid transparent;
482 |     border-bottom: @arrowWidth solid transparent;
483 |     border-right: @arrowWidth solid @color;
484 |   }
485 | }
486 | 
487 | // Grid System
488 | // -----------
489 | 
490 | // Centered container element
491 | .container-fixed() {
492 |   margin-left: auto;
493 |   margin-right: auto;
494 |   .clearfix();
495 | }
496 | 
497 | // Table columns
498 | .tableColumns(@columnSpan: 1) {
499 |   float: none; // undo default grid column styles
500 |   width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
501 |   margin-left: 0; // undo default grid column styles
502 | }
503 | 
504 | // Make a Grid
505 | // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
506 | .makeRow() {
507 |   margin-left: @gridGutterWidth * -1;
508 |   .clearfix();
509 | }
510 | .makeColumn(@columns: 1) {
511 |   float: left;
512 |   margin-left: @gridGutterWidth;
513 |   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
514 | }
515 | 
516 | // The Grid
517 | #grid {
518 | 
519 |   .core (@gridColumnWidth, @gridGutterWidth) {
520 | 
521 |     .spanX (@index) when (@index > 0) {
522 |       (~".span@{index}") { .span(@index); }
523 |       .spanX(@index - 1);
524 |     }
525 |     .spanX (0) {}
526 | 
527 |     .offsetX (@index) when (@index > 0) {
528 |       (~".offset@{index}") { .offset(@index); }
529 |       .offsetX(@index - 1);
530 |     }
531 |     .offsetX (0) {}
532 | 
533 |     .offset (@columns) {
534 |       margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
535 |     }
536 | 
537 |     .span (@columns) {
538 |       width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
539 |     }
540 | 
541 |     .row {
542 |       margin-left: @gridGutterWidth * -1;
543 |       .clearfix();
544 |     }
545 | 
546 |     [class*="span"] {
547 |       float: left;
548 |       margin-left: @gridGutterWidth;
549 |     }
550 | 
551 |     // Set the container width, and override it for fixed navbars in media queries
552 |     .container,
553 |     .navbar-fixed-top .container,
554 |     .navbar-fixed-bottom .container { .span(@gridColumns); }
555 | 
556 |     // generate .spanX and .offsetX
557 |     .spanX (@gridColumns);
558 |     .offsetX (@gridColumns);
559 | 
560 |   }
561 | 
562 |   .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
563 | 
564 |     .spanX (@index) when (@index > 0) {
565 |       (~"> .span@{index}") { .span(@index); }
566 |       .spanX(@index - 1);
567 |     }
568 |     .spanX (0) {}
569 | 
570 |     .span (@columns) {
571 |       width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
572 |     }
573 | 
574 |     .row-fluid {
575 |       width: 100%;
576 |       .clearfix();
577 |       > [class*="span"] {
578 |         float: left;
579 |         margin-left: @fluidGridGutterWidth;
580 |       }
581 |       > [class*="span"]:first-child {
582 |         margin-left: 0;
583 |       }
584 | 
585 |       // generate .spanX
586 |       .spanX (@gridColumns);
587 |     }
588 | 
589 |   }
590 | 
591 |   .input(@gridColumnWidth, @gridGutterWidth) {
592 | 
593 |     .spanX (@index) when (@index > 0) {
594 |       (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
595 |       .spanX(@index - 1);
596 |     }
597 |     .spanX (0) {}
598 | 
599 |     .span(@columns) {
600 |       width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
601 |     }
602 | 
603 |     input,
604 |     textarea,
605 |     .uneditable-input {
606 |       margin-left: 0; // override margin-left from core grid system
607 |     }
608 | 
609 |     // generate .spanX
610 |     .spanX (@gridColumns);
611 | 
612 |   }
613 | 
614 | }
615 | 


--------------------------------------------------------------------------------