├── .gitignore ├── lib ├── index.js ├── bootstrap.styl ├── variables.styl ├── type.styl ├── scaffolding.styl ├── reset.styl ├── tables.styl ├── mixins.styl ├── forms.styl └── patterns.styl ├── package.json ├── README.md ├── test ├── test.js └── bootstrap.css.org └── LICENSE.txt /.gitignore: -------------------------------------------------------------------------------- 1 | thumbs.db 2 | *~ 3 | node_modules 4 | .DS_Store 5 | test/bootstrap.css.gen -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | //Support NIB-like including in project 2 | 3 | exports.path = __dirname; 4 | 5 | exports = module.exports = function () { 6 | return function(style){ 7 | style.include(__dirname); 8 | } 9 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-stylus", 3 | "description": "Twitter Bootstrap CSS framework ported to stylus", 4 | "homepage": "http://github.com/dz0ny/bootstrap-stylus", 5 | "keywords": ["server", "stylus"], 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/dz0ny/bootstrap-stylus.git" 9 | }, 10 | "author": "Michael Prasuhn ", 11 | "main" : "./lib", 12 | "directories": { 13 | "lib": "." 14 | }, 15 | "version": "0.2.1" 16 | } -------------------------------------------------------------------------------- /lib/bootstrap.styl: -------------------------------------------------------------------------------- 1 | /*! 2 | * bootstrap-stylus 0.2.0 3 | * Date: Fri Nov 25 13:11:45 PST 2011 4 | * 5 | * Copyright 2011 Twitter, Inc 6 | * Licensed under the Apache License v2.0 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Originally by @twitter by @mdo and @fat. 10 | * 11 | * Stylus conversion by Michael Prasuhn. 12 | */ 13 | 14 | // CSS Reset 15 | @import "reset"; 16 | 17 | // Core variables and mixins 18 | @import "variables"; 19 | @import "mixins"; 20 | 21 | // Grid system and page structure 22 | @import "scaffolding"; 23 | 24 | // Styled patterns and elements 25 | @import "type"; 26 | @import "forms"; 27 | @import "tables"; 28 | @import "patterns"; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bootstrap-stylus 2 | 3 | A basic port of the Twitter Bootstrap CSS framework to stylus. Ideal for node.js apps using connect or express. 4 | 5 | To learn more about using the framework see the bootstrap docs at http://twitter.github.com/bootstrap. 6 | 7 | 8 | ## Use 9 | 10 | Javascript - add just like you'd use nib: 11 | 12 | ```javascript 13 | var bootstrap = require('bootstrap-stylus'), 14 | stylus = require('stylus'); 15 | 16 | function compile(str, path) { 17 | return stylus(str) 18 | .set('filename', path) 19 | .use(bootstrap()); 20 | } 21 | 22 | app.use(stylus.middleware({ 23 | src: __dirname + '/public', 24 | compile: compile 25 | })); 26 | ``` 27 | 28 | in your .style files: 29 | 30 | ```css 31 | @import bootstrap 32 | ```` 33 | 34 | or set variables before importing: 35 | 36 | ```css 37 | $linkColor = red 38 | @import bootstrap 39 | ``` 40 | 41 | You can also import individual files by specifying their filename: 42 | 43 | ```css 44 | @import reset 45 | ``` 46 | 47 | ## Authors 48 | 49 | ### Twitter Bootstrap by: 50 | 51 | **Mark Otto** 52 | 53 | + http://twitter.com/mdo 54 | + http://github.com/markdotto 55 | 56 | **Jacob Thornton** 57 | 58 | + http://twitter.com/fat 59 | + http://github.com/fat 60 | 61 | ### Port to stylus by 62 | 63 | **Michael Prasuhn** 64 | 65 | + http://twitter.com/mikey_p 66 | + https://github.com/mikeyp 67 | 68 | ## License 69 | 70 | Copyright 2011 Twitter, Inc. 71 | 72 | Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0 -------------------------------------------------------------------------------- /lib/variables.styl: -------------------------------------------------------------------------------- 1 | /* Variables.less 2 | * 3 | * Variables to customize the look and feel of Bootstrap 4 | */ 5 | 6 | lighten-fixed($color, $percent) 7 | $h = hue($color) 8 | $s = saturation($color) 9 | $l = lightness($color) 10 | $l += $percent 11 | rgb(hsl($h,$s,$l)) 12 | 13 | darken-fixed($color, $percent) 14 | $h = hue($color) 15 | $s = saturation($color) 16 | $l = lightness($color) 17 | $l -= $percent 18 | rgb(hsl($h,$s,$l)) 19 | 20 | 21 | // Links 22 | $linkColor ?= #0069d6 23 | $linkColorHover ?= darken-fixed($linkColor, 15) 24 | 25 | // Grays 26 | $black ?= #000 27 | $grayDark ?= lighten-fixed($black, 25%) 28 | $gray ?= lighten-fixed($black, 50%) 29 | $grayLight ?= lighten-fixed($black, 75%) 30 | $grayLighter ?= lighten-fixed($black, 90%) 31 | $white ?= #ffffff 32 | 33 | // Accent Colors 34 | $blue ?= #049CDB 35 | $blueDark ?= #0064CD 36 | $green ?= #46a546 37 | $red ?= #9d261d 38 | $yellow ?= #ffc40d 39 | $orange ?= #f89406 40 | $pink ?= #c3325f 41 | $purple ?= #7a43b6 42 | 43 | // Baseline grid 44 | $basefont ?= 13px 45 | $baseline ?= 18px 46 | 47 | // Griditude 48 | // Modify the grid styles in mixins.less 49 | $gridColumns ?= 16 50 | $gridColumnWidth ?= 40px 51 | $gridGutterWidth ?= 20px 52 | $extraSpace ?= ($gridGutterWidth * 2) // For our grid calculations 53 | $siteWidth ?= ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) 54 | 55 | // Color Scheme 56 | // Use this to roll your own color schemes if you like (unused by Bootstrap by default) 57 | $baseColor ?= $blue // Set a base color 58 | $complement ?= spin($baseColor, 180) // Determine a complementary color 59 | $split1 ?= spin($baseColor, 158) // Split complements 60 | $split2 ?= spin($baseColor, -158) 61 | $triad1 ?= spin($baseColor, 135) // Triads colors 62 | $triad2 ?= spin($baseColor, -135) 63 | $tetra1 ?= spin($baseColor, 90) // Tetra colors 64 | $tetra2 ?= spin($baseColor, -90) 65 | $analog1 ?= spin($baseColor, 22) // Analogs colors 66 | $analog2 ?= spin($baseColor, -22) 67 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Module dependencies. 4 | */ 5 | 6 | var stylus = require('stylus') 7 | , basename = require('path').basename 8 | , fs = require('fs') 9 | , diff = require('diff'); 10 | 11 | // whitespace 12 | 13 | function _removeMultiliner(str) { 14 | str = str || ''; 15 | str = str.replace(/,\n/gi ,','); 16 | str = str.replace(/, /gi ,','); 17 | return str; 18 | } 19 | 20 | function removeComments(str) { 21 | 22 | var uid = '_' + +new Date(), 23 | primatives = [], 24 | primIndex = 0; 25 | 26 | return ( 27 | str 28 | /* Remove strings */ 29 | .replace(/(['"])(\\\1|.)+?\1/g, function(match){ 30 | primatives[primIndex] = match; 31 | return (uid + '') + primIndex++; 32 | }) 33 | 34 | /* Remove Regexes */ 35 | .replace(/([^\/])(\/(?!\*|\/)(\\\/|.)+?\/[gim]{0,3})/g, function(match, $1, $2){ 36 | primatives[primIndex] = $2; 37 | return $1 + (uid + '') + primIndex++; 38 | }) 39 | 40 | /* 41 | - Remove single-line comments that contain would-be multi-line delimiters 42 | E.g. // Comment /* <-- 43 | - Remove multi-line comments that contain would be single-line delimiters 44 | E.g. /* // <-- 45 | */ 46 | .replace(/\/\/.*?\/?\*.+?(?=\n|\r|$)|\/\*[\s\S]*?\/\/[\s\S]*?\*\//g, '') 47 | 48 | /* 49 | Remove single and multi-line comments, 50 | no consideration of inner-contents 51 | */ 52 | .replace(/\/\/.+?(?=\n|\r|$)|\/\*[\s\S]+?\*\//g, '') 53 | 54 | /* 55 | Remove multi-line comments that have a replaced ending (string/regex) 56 | Greedy, so no inner strings/regexes will stop it. 57 | */ 58 | .replace(RegExp('\\/\\*[\\s\\S]+' + uid + '\\d+', 'g'), '') 59 | 60 | /* Bring back strings & regexes */ 61 | .replace(RegExp(uid + '(\\d+)', 'g'), function(match, n){ 62 | return primatives[n]; 63 | }) 64 | ); 65 | 66 | } 67 | 68 | /** 69 | * Test the given `test`. 70 | * 71 | * @param {String} test 72 | * @param {Function} fn 73 | */ 74 | 75 | function test(file, fn) { 76 | 77 | var path = __dirname + '/../lib/' + file + '.styl' 78 | , csspath = __dirname + '/' + file + '.css.org'; 79 | 80 | fs.readFile(path, 'utf8', function(err, str){ 81 | if (err) throw err; 82 | 83 | var style = stylus(str) 84 | .set('filename', path) 85 | .define('url', stylus.url()); 86 | 87 | style.render(function(err, actual){ 88 | if (err) throw err; 89 | fs.readFile(csspath, 'utf8', function(err, expected){ 90 | if (err) throw err; 91 | fn(_removeMultiliner(actual), _removeMultiliner(expected)); 92 | }); 93 | }); 94 | }); 95 | } 96 | 97 | /** 98 | * Auto-load and run tests. 99 | */ 100 | var curr = "bootstrap"; 101 | test(curr, function(actual, expected){ 102 | var path = __dirname + '/' + curr + '.css'; 103 | fs.writeFile(path+".gen", actual, function (err) { 104 | if (err) throw err; 105 | 106 | }); 107 | fs.writeFile(path+".org", expected, function (err) { 108 | if (err) throw err; 109 | 110 | }); 111 | }); -------------------------------------------------------------------------------- /lib/type.styl: -------------------------------------------------------------------------------- 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 | font-shorthand(normal, $basefont, $baseline); 11 | margin-bottom: ($baseline / 2) 12 | small 13 | font-size: ($basefont - 2) 14 | color: $grayLight 15 | 16 | 17 | // HEADINGS 18 | h1, h2, h3, h4, h5, h6 19 | font-weight: bold 20 | color: $grayDark 21 | small 22 | color: $grayLight 23 | 24 | h1 25 | margin-bottom: $baseline 26 | font-size: 30px 27 | line-height: ($baseline * 2) 28 | small 29 | font-size: 18px 30 | 31 | h2 32 | font-size: 24px 33 | line-height: ($baseline * 2) 34 | small 35 | font-size: 14px 36 | 37 | h3, h4, h5, h6 38 | line-height: ($baseline * 2) 39 | 40 | h3 41 | font-size: 18px 42 | small 43 | font-size: 14px 44 | 45 | h4 46 | font-size: 16px 47 | small 48 | font-size: 12px 49 | 50 | h5 51 | font-size: 14px 52 | 53 | h6 54 | font-size: 13px 55 | color: $grayLight 56 | text-transform: uppercase 57 | 58 | // COLORS 59 | 60 | // Unordered and Ordered lists 61 | ul, ol 62 | margin: 0 0 $baseline 25px 63 | 64 | ul ul, 65 | ul ol, 66 | ol ol, 67 | ol ul 68 | margin-bottom: 0 69 | 70 | ul 71 | list-style: disc 72 | 73 | ol 74 | list-style: decimal 75 | 76 | li 77 | line-height: $baseline 78 | color: $gray 79 | 80 | ul.unstyled 81 | list-style: none 82 | margin-left: 0 83 | 84 | // Description Lists 85 | dl 86 | margin-bottom: $baseline 87 | dt, dd 88 | line-height: $baseline 89 | dt 90 | font-weight: bold 91 | dd 92 | margin-left: ($baseline / 2) 93 | 94 | 95 | // MISC 96 | 97 | // Horizontal rules 98 | hr 99 | margin: 20px 0 19px 100 | border: 0 101 | border-bottom: 1px solid #eee 102 | 103 | // Emphasis 104 | strong 105 | font-style: inherit 106 | font-weight: bold 107 | 108 | em 109 | font-style: italic 110 | font-weight: inherit 111 | line-height: inherit 112 | 113 | .muted 114 | color: $grayLight 115 | 116 | 117 | // Blockquotes 118 | blockquote 119 | margin-bottom: $baseline 120 | border-left: 5px solid #eee 121 | padding-left: 15px 122 | p 123 | font-shorthand(300, 14px, $baseline) 124 | margin-bottom: 0 125 | small 126 | display: block 127 | font-shorthand(300, 12px, $baseline) 128 | color: $grayLight 129 | &:before 130 | content: '\2014 \00A0' 131 | 132 | // Addresses 133 | address 134 | display: block 135 | line-height: $baseline 136 | margin-bottom: $baseline 137 | 138 | // Inline and block code styles 139 | code, pre 140 | padding: 0 3px 2px 141 | font-family: Monaco, Andale Mono, Courier New, monospace 142 | font-size: 12px 143 | border-radius(3px) 144 | 145 | code 146 | background-color: lighten-fixed($orange, 40%) 147 | color: rgba(0, 0, 0, .75) 148 | padding: 1px 3px 149 | 150 | pre 151 | background-color: #f5f5f5 152 | display: block 153 | padding: (($baseline - 1) / 2) 154 | margin: 0 0 $baseline 155 | line-height: $baseline 156 | font-size: 12px 157 | border: 1px solid #ccc 158 | border: 1px solid rgba(0, 0, 0, .15) 159 | border-radius(3px) 160 | white-space: pre 161 | white-space: pre-wrap 162 | word-wrap: break-word 163 | -------------------------------------------------------------------------------- /lib/scaffolding.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Scaffolding 3 | * Basic and global styles for generating a grid system, structural layout, and page templates 4 | * ------------------------------------------------------------------------------------------- */ 5 | 6 | 7 | // STRUCTURAL LAYOUT 8 | // ----------------- 9 | 10 | body 11 | background-color: $white 12 | margin: 0 13 | font-sans-serif(normal, $basefont, $baseline) 14 | color: $grayDark 15 | 16 | // Container (centered, fixed-width layouts) 17 | .container 18 | fixed-container() 19 | 20 | // Fluid layouts (left aligned, with sidebar, min- & max-width content) 21 | .container-fluid 22 | position: relative 23 | min-width: 940px 24 | padding-left: 20px 25 | padding-right: 20px 26 | clearfix() 27 | > .sidebar 28 | position: absolute 29 | top: 0 30 | left: 20px 31 | width: 220px 32 | // TODO in v2: rename this and .popover .content to be more specific 33 | > .content 34 | margin-left: 240px 35 | 36 | 37 | // BASE STYLES 38 | // ----------- 39 | 40 | // Links 41 | a 42 | color: $linkColor 43 | text-decoration: none 44 | line-height: inherit 45 | font-weight: inherit 46 | &:hover 47 | color: $linkColorHover 48 | text-decoration: underline 49 | 50 | // Quick floats 51 | .pull-right 52 | float: right 53 | .pull-left 54 | float: left 55 | 56 | // Toggling content 57 | .hide 58 | display: none 59 | .show 60 | display: block 61 | 62 | 63 | // GRID SYSTEM 64 | // ----------- 65 | // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there 66 | 67 | .row 68 | clearfix() 69 | margin-left: ($gridGutterWidth * -1) 70 | 71 | // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) 72 | // Credit to @dhg for the idea 73 | .row > [class*="span"] 74 | gridColumn() 75 | 76 | // Default columns 77 | .span1 78 | columns(1) 79 | .span2 80 | columns(2) 81 | .span3 82 | columns(3) 83 | .span4 84 | columns(4) 85 | .span5 86 | columns(5) 87 | .span6 88 | columns(6) 89 | .span7 90 | columns(7) 91 | .span8 92 | columns(8) 93 | .span9 94 | columns(9) 95 | .span10 96 | columns(10) 97 | .span11 98 | columns(11) 99 | .span12 100 | columns(12) 101 | .span13 102 | columns(13) 103 | .span14 104 | columns(14) 105 | .span15 106 | columns(15) 107 | .span16 108 | columns(16) 109 | 110 | // For optional 24-column grid 111 | .span17 112 | columns(17) 113 | .span18 114 | columns(18) 115 | .span19 116 | columns(19) 117 | .span20 118 | columns(20) 119 | .span21 120 | columns(21) 121 | .span22 122 | columns(22) 123 | .span23 124 | columns(23) 125 | .span24 126 | columns(24) 127 | 128 | // Offset column options 129 | .row 130 | & > .offset1 131 | offset(1) 132 | & > .offset2 133 | offset(2) 134 | & > .offset3 135 | offset(3) 136 | & > .offset4 137 | offset(4) 138 | & > .offset5 139 | offset(5) 140 | & > .offset6 141 | offset(6) 142 | & > .offset7 143 | offset(7) 144 | & > .offset8 145 | offset(8) 146 | & > .offset9 147 | offset(9) 148 | & > .offset10 149 | offset(10) 150 | & > .offset11 151 | offset(11) 152 | & > .offset12 153 | offset(12) 154 | 155 | // Unique column sizes for 16-column grid 156 | .span-one-third 157 | width: 300px 158 | .span-two-thirds 159 | width: 620px 160 | .row > .offset-one-third 161 | margin-left: 340px 162 | .row > .offset-two-thirds 163 | margin-left: 660px 164 | -------------------------------------------------------------------------------- /lib/reset.styl: -------------------------------------------------------------------------------- 1 | /* Reset.less 2 | * 3 | * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an 4 | * adapted version here that cuts out some of the reset HTML elements we will 5 | * never need here (i.e., dfn, samp, etc). 6 | */ 7 | 8 | // ERIC MEYER RESET 9 | // -------------------------------------------------- 10 | html, body 11 | margin: 0 12 | padding: 0 13 | 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | p, 21 | blockquote, 22 | pre, 23 | a, 24 | abbr, 25 | acronym, 26 | address, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | q, 34 | s, 35 | samp, 36 | small, 37 | strike, 38 | strong, 39 | sub, 40 | sup, 41 | tt, 42 | var, 43 | dd, 44 | dl, 45 | dt, 46 | li, 47 | ol, 48 | ul, 49 | fieldset, 50 | form, 51 | label, 52 | legend, 53 | button, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td 62 | margin: 0 63 | padding: 0 64 | border: 0 65 | font-weight: normal 66 | font-style: normal 67 | font-size: 100% 68 | line-height: 1 69 | font-family: inherit 70 | 71 | table 72 | border-collapse: collapse 73 | border-spacing: 0 74 | 75 | ol, ul 76 | list-style: none 77 | 78 | q:before, 79 | q:after, 80 | blockquote:before, 81 | blockquote:after 82 | content: "" 83 | 84 | // Normalize.css 85 | // Pulling in select resets form the normalize.css project 86 | // -------------------------------------------------- 87 | 88 | // Display in IE6-9 and FF3 89 | // ------------------------- 90 | // Source: http://github.com/necolas/normalize.css 91 | html 92 | overflow-y: scroll 93 | font-size: 100% 94 | -webkit-text-size-adjust: 100% 95 | -ms-text-size-adjust: 100% 96 | 97 | // Focus states 98 | a:focus 99 | outline: thin dotted 100 | 101 | a:hover, a:active 102 | outline: 0 103 | 104 | // Display in IE6-9 and FF3 105 | // ------------------------- 106 | // Source: http://github.com/necolas/normalize.css 107 | article, 108 | aside, 109 | details, 110 | figcaption, 111 | figure, 112 | footer, 113 | header, 114 | hgroup, 115 | nav, 116 | section 117 | display: block 118 | 119 | // Display block in IE6-9 and FF3 120 | // ------------------------- 121 | // Source: http://github.com/necolas/normalize.css 122 | audio, canvas, video 123 | display: inline-block 124 | *display: inline 125 | *zoom: 1 126 | 127 | // Prevents modern browsers from displaying 'audio' without controls 128 | // ------------------------- 129 | // Source: http://github.com/necolas/normalize.css 130 | audio:not([controls]) 131 | display: none 132 | 133 | // Prevents sub and sup affecting line-height in all browsers 134 | // ------------------------- 135 | // Source: http://github.com/necolas/normalize.css 136 | sub, sup 137 | font-size: 75% 138 | line-height: 0 139 | position: relative 140 | vertical-align: baseline 141 | 142 | sup 143 | top: -0.5em 144 | 145 | sub 146 | bottom: -0.25em 147 | 148 | // Img border in a's and image quality 149 | // ------------------------- 150 | // Source: http://github.com/necolas/normalize.css 151 | img 152 | border: 0 153 | -ms-interpolation-mode: bicubic 154 | 155 | // Forms 156 | // ------------------------- 157 | // Source: http://github.com/necolas/normalize.css 158 | button, 159 | input, 160 | select, 161 | textarea 162 | font-size: 100% 163 | margin: 0 164 | vertical-align: baseline 165 | *vertical-align: middle 166 | 167 | button, input 168 | line-height: normal 169 | *overflow: visible 170 | 171 | button::-moz-focus-inner, input::-moz-focus-inner 172 | border: 0 173 | padding: 0 174 | 175 | button, 176 | input[type="button"], 177 | input[type="reset"], 178 | input[type="submit"] 179 | cursor: pointer 180 | -webkit-appearance: button 181 | 182 | input[type="search"] 183 | -webkit-appearance: textfield 184 | -webkit-box-sizing: content-box 185 | -moz-box-sizing: content-box 186 | box-sizing: content-box 187 | 188 | input[type="search"]::-webkit-search-decoration 189 | -webkit-appearance: none 190 | 191 | textarea 192 | overflow: auto 193 | vertical-align: top 194 | 195 | -------------------------------------------------------------------------------- /lib/tables.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * Tables.less 3 | * Tables for, you guessed it, tabular data 4 | * ---------------------------------------- */ 5 | 6 | 7 | // BASELINE STYLES 8 | // --------------- 9 | 10 | table 11 | width: 100% 12 | margin-bottom: $baseline 13 | padding: 0 14 | font-size: $basefont 15 | border-collapse: collapse 16 | th, 17 | td 18 | padding: 10px 10px 9px 19 | line-height: $baseline 20 | text-align: left 21 | th 22 | padding-top: 9px 23 | font-weight: bold 24 | vertical-align: middle 25 | td 26 | vertical-align: top 27 | border-top: 1px solid #ddd 28 | // When scoped to row, fix th in tbody 29 | tbody th 30 | border-top: 1px solid #ddd 31 | vertical-align: top 32 | 33 | // CONDENSED VERSION 34 | // ----------------- 35 | .condensed-table 36 | th, 37 | td 38 | padding: 5px 5px 4px 39 | 40 | 41 | 42 | 43 | // BORDERED VERSION 44 | // ---------------- 45 | 46 | .bordered-table 47 | border: 1px solid #ddd 48 | border-collapse: separate // Done so we can round those corners! 49 | *border-collapse: collapse /* IE7, collapse table to remove spacing */ 50 | border-radius(4px) 51 | th + th, 52 | td + td, 53 | th + td 54 | border-left: 1px solid #ddd 55 | 56 | thead tr:first-child th:first-child, 57 | tbody tr:first-child td:first-child 58 | border-radius(4px 0 0 0) 59 | 60 | thead tr:first-child th:last-child, 61 | tbody tr:first-child td:last-child 62 | border-radius(0 4px 0 0) 63 | 64 | tbody tr:last-child td:first-child 65 | border-radius(0 0 0 4px) 66 | 67 | tbody tr:last-child td:last-child 68 | border-radius(0 0 4px 0) 69 | 70 | 71 | 72 | 73 | // TABLE CELL SIZES 74 | // ---------------- 75 | 76 | // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border 77 | tableColumns($columnSpan = 1) 78 | width: (($gridColumnWidth - 20) * $columnSpan) + (($gridColumnWidth - 20) * ($columnSpan - 1)) 79 | 80 | table 81 | // Default columns 82 | .span1 83 | tableColumns(1) 84 | .span2 85 | tableColumns(2) 86 | .span3 87 | tableColumns(3) 88 | .span4 89 | tableColumns(4) 90 | .span5 91 | tableColumns(5) 92 | .span6 93 | tableColumns(6) 94 | .span7 95 | tableColumns(7) 96 | .span8 97 | tableColumns(8) 98 | .span9 99 | tableColumns(9) 100 | .span10 101 | tableColumns(10) 102 | .span11 103 | tableColumns(11) 104 | .span12 105 | tableColumns(12) 106 | .span13 107 | tableColumns(13) 108 | .span14 109 | tableColumns(14) 110 | .span15 111 | tableColumns(15) 112 | .span16 113 | tableColumns(16) 114 | 115 | // ZEBRA-STRIPING 116 | // -------------- 117 | 118 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) 119 | .zebra-striped 120 | tbody 121 | tr:nth-child(odd) td, 122 | tr:nth-child(odd) th 123 | background-color: #f9f9f9 124 | tr:hover td, 125 | tr:hover th 126 | background-color: #f5f5f5 127 | 128 | table 129 | // Tablesorting styles w/ jQuery plugin 130 | .header 131 | cursor: pointer 132 | &:after 133 | content: "" 134 | float: right 135 | margin-top: 7px 136 | border-width: 0 4px 4px 137 | border-style: solid 138 | border-color: #000 transparent 139 | visibility: hidden 140 | // Style the sorted column headers (THs) 141 | .headerSortUp, 142 | .headerSortDown 143 | background-color: rgba(141,192,219,.25) 144 | text-shadow: 0 1px 1px rgba(255,255,255,.75) 145 | // Style the ascending (reverse alphabetical) column header 146 | .header:hover 147 | &:after 148 | visibility: visible 149 | // Style the descending (alphabetical) column header 150 | .headerSortDown, 151 | .headerSortDown:hover 152 | &:after 153 | visibility:visible 154 | opacity(60) 155 | // Style the ascending (reverse alphabetical) column header 156 | .headerSortUp 157 | &:after 158 | border-bottom: none 159 | border-left: 4px solid transparent 160 | border-right: 4px solid transparent 161 | border-top: 4px solid #000 162 | visibility:visible 163 | box-shadow(none) //can't add boxshadow to downward facing arrow :( 164 | opacity(60) 165 | // Blue Table Headings 166 | .blue 167 | color: $blue 168 | border-bottom-color: $blue 169 | .headerSortUp.blue, 170 | .headerSortDown.blue 171 | background-color: lighten-fixed($blue, 40%) 172 | // Green Table Headings 173 | .green 174 | color: $green 175 | border-bottom-color: $green 176 | .headerSortUp.green, 177 | .headerSortDown.green 178 | background-color: lighten-fixed($green, 40%) 179 | // Red Table Headings 180 | .red 181 | color: $red 182 | border-bottom-color: $red 183 | .headerSortUp.red, 184 | .headerSortDown.red 185 | background-color: lighten-fixed($red, 50%) 186 | // Yellow Table Headings 187 | .yellow 188 | color: $yellow 189 | border-bottom-color: $yellow 190 | .headerSortUp.yellow, 191 | .headerSortDown.yellow 192 | background-color: lighten-fixed($yellow, 40%) 193 | // Orange Table Headings 194 | .orange 195 | color: $orange 196 | border-bottom-color: $orange 197 | .headerSortUp.orange, 198 | .headerSortDown.orange 199 | background-color: lighten-fixed($orange, 40%) 200 | // Purple Table Headings 201 | .purple 202 | color: $purple 203 | border-bottom-color: $purple 204 | .headerSortUp.purple, 205 | .headerSortDown.purple 206 | background-color: lighten-fixed($purple, 40%) -------------------------------------------------------------------------------- /lib/mixins.styl: -------------------------------------------------------------------------------- 1 | /* Mixins.less 2 | * 3 | * Snippets of reusable CSS to develop faster and keep code readable 4 | */ 5 | 6 | fadein($color, $amount) 7 | $r = red($color) 8 | $g = green($color) 9 | $b = blue($color) 10 | $a = alpha($color) 11 | $a += ($amount / 100) 12 | rgba($r,$g,$b,$a) 13 | 14 | // Clearfix for clearing floats like a boss h5bp.com/q 15 | clearfix() 16 | zoom: 1 17 | &:before, 18 | &:after 19 | display: table 20 | content: "" 21 | zoom: 1 22 | &:after 23 | clear: both 24 | 25 | // Center-align a block level element 26 | center-block() 27 | display: block 28 | margin-left: auto 29 | margin-right: auto 30 | 31 | // Sizing shortcuts 32 | size($height = 5px, $width = 5px) 33 | height: $height 34 | width: $width 35 | 36 | square($size = 5px) 37 | size($size, $size) 38 | 39 | // Input placeholder text 40 | placeholder($color = $grayLight) 41 | :-moz-placeholder 42 | color: $color 43 | ::-webkit-input-placeholder 44 | color: $color 45 | 46 | // Font Stacks 47 | font-shorthand($weight = normal, $size = 14px, $lineHeight = 20px) 48 | font-size: $size 49 | font-weight: $weight 50 | line-height: $lineHeight 51 | font-sans-serif($weight = normal, $size = 14px, $lineHeight = 20px) 52 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 53 | font-size: $size 54 | font-weight: $weight 55 | line-height: $lineHeight 56 | font-serif($weight = normal, $size = 14px, $lineHeight = 20px) 57 | font-family: "Georgia", Times New Roman, Times, serif 58 | font-size: $size 59 | font-weight: $weight 60 | line-height: $lineHeight 61 | font-monospace($weight = normal, $size = 12px, $lineHeight = 20px) 62 | font-family: "Monaco", Courier New, monospace 63 | font-size: $size 64 | font-weight: $weight 65 | line-height: $lineHeight 66 | 67 | // Grid System 68 | fixed-container() 69 | width: $siteWidth 70 | margin-left: auto 71 | margin-right: auto 72 | clearfix() 73 | 74 | columns($columnSpan = 1) 75 | width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) 76 | 77 | offset($columnOffset = 1) 78 | margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace 79 | 80 | // Necessary grid styles for every column to make them appear next to each other horizontally 81 | gridColumn() 82 | display: inline 83 | float: left 84 | margin-left: $gridGutterWidth 85 | 86 | // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something 87 | makeColumn($columnSpan = 1) 88 | gridColumn() 89 | columns($columnSpan) 90 | 91 | // Border Radius 92 | border-radius($radius = 5px) 93 | -webkit-border-radius: $radius 94 | -moz-border-radius: $radius 95 | border-radius: $radius 96 | 97 | // Drop shadows 98 | box-shadow($shadow = 0 1px 3px rgba(0,0,0,.25)) 99 | -webkit-box-shadow: $shadow 100 | -moz-box-shadow: $shadow 101 | box-shadow: $shadow 102 | 103 | // Transitions 104 | transition($transition) 105 | -webkit-transition: $transition 106 | -moz-transition: $transition 107 | -ms-transition: $transition 108 | -o-transition: $transition 109 | transition: $transition 110 | 111 | // Background clipping 112 | background-clip($clip) 113 | -webkit-background-clip: $clip 114 | -moz-background-clip: $clip 115 | background-clip: $clip 116 | 117 | // CSS3 Content Columns 118 | content-columns($columnCount, $columnGap = 20px) 119 | -webkit-column-count: $columnCount 120 | -moz-column-count: $columnCount 121 | column-count: $columnCount 122 | -webkit-column-gap: $columnGap 123 | -moz-column-gap: $columnGap 124 | column-gap: $columnGap 125 | 126 | // Make any element resizable for prototyping 127 | resizable($direction = both) 128 | resize: $direction // Options are horizontal, vertical, both 129 | overflow: auto // Safari fix 130 | 131 | // Add an alphatransparency value to any background or border color (via Elyse Holladay) 132 | translucent-background($color = $white, $alpha = 1) 133 | background-color: hsla(hue($color), saturation($color), lightness($color), $alpha) 134 | translucent-border($color = $white, $alpha = 1) 135 | border-color: hsla(hue($color), saturation($color), lightness($color), $alpha) 136 | background-clip: padding-box 137 | 138 | // Gradient Bar Colors for buttons and allerts 139 | gradientBar($primaryColor, $secondaryColor) 140 | gradient-vertical($primaryColor, $secondaryColor) 141 | text-shadow: 0 -1px 0 rgba(0,0,0,.25) 142 | border-color: $secondaryColor $secondaryColor darken-fixed($secondaryColor, 15%) 143 | border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%) 144 | 145 | // Gradients 146 | gradient-horizontal($startColor = #555, $endColor = #333) 147 | background-color: $endColor 148 | background-repeat: repeat-x 149 | background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)) // Konqueror 150 | background-image: -moz-linear-gradient(left, $startColor, $endColor) // FF 3.6+ 151 | background-image: -ms-linear-gradient(left, $startColor, $endColor) // IE10 152 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)) // Safari 4+, Chrome 2+ 153 | background-image: -webkit-linear-gradient(left, $startColor, $endColor) // Safari 5.1+, Chrome 10+ 154 | background-image: -o-linear-gradient(left, $startColor, $endColor) // Opera 11.10 155 | background-image: linear-gradient(left, $startColor, $endColor) // Le standard 156 | filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=1)",$startColor,$endColor) // IE9 and down 157 | gradient-vertical($startColor = #555, $endColor = #333) 158 | background-color: $endColor 159 | background-repeat: repeat-x 160 | background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)) // Konqueror 161 | background-image: -moz-linear-gradient(top, $startColor, $endColor) // FF 3.6+ 162 | background-image: -ms-linear-gradient(top, $startColor, $endColor) // IE10 163 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)) // Safari 4+, Chrome 2+ 164 | background-image: -webkit-linear-gradient(top, $startColor, $endColor) // Safari 5.1+, Chrome 10+ 165 | background-image: -o-linear-gradient(top, $startColor, $endColor) // Opera 11.10 166 | background-image: linear-gradient(top, $startColor, $endColor) // The standard 167 | filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)",$startColor,$endColor) // IE9 and down 168 | gradient-directional($startColor = #555, $endColor = #333, $deg = 45deg) 169 | background-color: $endColor 170 | background-repeat: repeat-x 171 | background-image: -moz-linear-gradient($deg, $startColor, $endColor) // FF 3.6+ 172 | background-image: -ms-linear-gradient($deg, $startColor, $endColor) // IE10 173 | background-image: -webkit-linear-gradient($deg, $startColor, $endColor) // Safari 5.1+, Chrome 10+ 174 | background-image: -o-linear-gradient($deg, $startColor, $endColor) // Opera 11.10 175 | background-image: linear-gradient($deg, $startColor, $endColor) // The standard 176 | gradient-vertical-three-colors($startColor = #00b3ee, $midColor = #7a43b6, $colorStop = 50%, $endColor = #c3325f) 177 | background-color: $endColor 178 | background-repeat: no-repeat 179 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)) 180 | background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor) 181 | background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor) 182 | background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor) 183 | background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor) 184 | background-image: linear-gradient($startColor, $midColor $colorStop, $endColor) 185 | filter: s("progid:DXImageTransform.Microsoft.gradient(startColorstr='%s', endColorstr='%s', GradientType=0)",$startColor,$endColor) // IE9 and down, gets no color-stop at all for proper fallback 186 | 187 | // Reset filters for IE 188 | reset-filter() 189 | filter: s("progid:DXImageTransform.Microsoft.gradient(enabled = false)") 190 | 191 | // Opacity 192 | opacity($opacity = 100) 193 | filter: s("alpha(opacity=%d)", $opacity) 194 | -khtml-opacity: ($opacity / 100) 195 | -moz-opacity: ($opacity / 100) 196 | opacity: ($opacity / 100) -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS -------------------------------------------------------------------------------- /lib/forms.styl: -------------------------------------------------------------------------------- 1 | /* Forms.less 2 | * Base styles for various input types, form layouts, and states 3 | * ------------------------------------------------------------- */ 4 | 5 | 6 | // FORM STYLES 7 | // ----------- 8 | 9 | form 10 | margin-bottom: $baseline 11 | 12 | // Groups of fields with labels on top (legends) 13 | fieldset 14 | margin-bottom: $baseline 15 | padding-top: $baseline 16 | legend 17 | display: block 18 | padding-left: 150px 19 | font-size: ($basefont * 1.5) 20 | line-height: 1 21 | color: $grayDark 22 | *padding: 0 0 5px 145px /* IE6-7 */ 23 | *line-height: 1.5 /* IE6-7 */ 24 | 25 | // Parent element that clears floats and wraps labels and fields together 26 | form .clearfix 27 | margin-bottom: $baseline 28 | clearfix() 29 | 30 | // Set font for forms 31 | label, 32 | input, 33 | select, 34 | textarea 35 | font-sans-serif(normal, 13px, normal) 36 | 37 | // Float labels left 38 | label 39 | padding-top: 6px 40 | font-size: $basefont 41 | line-height: $baseline 42 | float: left 43 | width: 130px 44 | text-align: right 45 | color: $grayDark 46 | 47 | // Shift over the inside div to align all label's relevant content 48 | form .input 49 | margin-left: 150px 50 | 51 | // Checkboxs and radio buttons 52 | input[type=checkbox], 53 | input[type=radio] 54 | cursor: pointer 55 | 56 | // Inputs, Textareas, Selects 57 | input, 58 | textarea, 59 | select, 60 | .uneditable-input 61 | display: inline-block 62 | width: 210px 63 | height: $baseline 64 | padding: 4px 65 | font-size: $basefont 66 | line-height: $baseline 67 | color: $gray 68 | border: 1px solid #ccc 69 | border-radius(3px) 70 | 71 | // remove padding from select 72 | select 73 | padding: initial 74 | 75 | // mini reset for non-html5 file types 76 | input[type=checkbox], 77 | input[type=radio] 78 | width: auto 79 | height: auto 80 | padding: 0 81 | margin: 3px 0 82 | *margin-top: 0 /* IE6-7 */ 83 | line-height: normal 84 | border: none 85 | 86 | input[type=file] 87 | background-color: $white 88 | padding: initial 89 | border: initial 90 | line-height: initial 91 | box-shadow(none) 92 | 93 | input[type=button], 94 | input[type=reset], 95 | input[type=submit] 96 | width: auto 97 | height: auto 98 | 99 | select, 100 | input[type=file] 101 | height: ($baseline * 1.5) // In IE7, the height of the select element cannot be changed by height, only font-size 102 | *height: auto // Reset for IE7 103 | line-height: ($baseline * 1.5) 104 | *margin-top: 4px /* For IE7, add top margin to align select with labels */ 105 | 106 | // Make multiple select elements height not fixed 107 | select[multiple] 108 | height: inherit 109 | background-color: $white // Fixes Chromium bug of unreadable items 110 | 111 | textarea 112 | height: auto 113 | 114 | // For text that needs to appear as an input but should not be an input 115 | .uneditable-input 116 | background-color: $white 117 | display: block 118 | border-color: #eee 119 | box-shadow(inset 0 1px 2px rgba(0,0,0,.025)) 120 | cursor: not-allowed 121 | 122 | // Placeholder text gets special styles; can't be bundled together though for some reason 123 | :-moz-placeholder 124 | color: $grayLight 125 | 126 | ::-webkit-input-placeholder 127 | color: $grayLight 128 | 129 | // Focus states 130 | input, 131 | textarea 132 | transitions = border linear .2s, box-shadow linear .2s 133 | transition(transitions) 134 | box-shadow(inset 0 1px 3px rgba(0,0,0,.1)) 135 | 136 | input:focus, 137 | textarea:focus 138 | outline: 0 139 | border-color: rgba(82,168,236,.8) 140 | shadow = inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6) 141 | box-shadow(shadow) 142 | 143 | input[type=file]:focus, 144 | input[type=checkbox]:focus, 145 | select:focus 146 | box-shadow(none) // override for file inputs 147 | outline: 1px dotted #666 // Selet elements don't get box-shadow styles, so instead we do outline 148 | 149 | 150 | // FORM FIELD FEEDBACK STATES 151 | // -------------------------- 152 | 153 | // Mixin for form field states 154 | formFieldState(textColor = #555, borderColor = #ccc, backgroundColor =#f5f5f5) 155 | // Set the text color 156 | > label, 157 | .help-block, 158 | .help-inline 159 | color: textColor 160 | // Style inputs accordingly 161 | input, 162 | textarea 163 | color: textColor 164 | border-color: borderColor 165 | &:focus 166 | border-color: darken-fixed(borderColor, 10%) 167 | box-shadow(0 0 6px lighten-fixed(borderColor, 20%)) 168 | // Give a small background color for input-prepend/-append 169 | .input-prepend .add-on, 170 | .input-append .add-on 171 | color: textColor 172 | background-color: backgroundColor 173 | border-color: textColor 174 | 175 | // Error 176 | form .clearfix.error 177 | formFieldState(#b94a48, #ee5f5b, lighten-fixed(#ee5f5b, 30%)) 178 | 179 | // Warning 180 | form .clearfix.warning 181 | formFieldState(#c09853, #ccae64, lighten-fixed(#CCAE64, 5%)) 182 | 183 | // Success 184 | form .clearfix.success 185 | formFieldState(#468847, #57a957, lighten-fixed(#57a957, 30%)) 186 | 187 | 188 | // Form element sizes 189 | // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes 190 | .input-mini, 191 | input.mini, 192 | textarea.mini, 193 | select.mini 194 | width: 60px 195 | 196 | .input-small, 197 | input.small, 198 | textarea.small, 199 | select.small 200 | width: 90px 201 | 202 | .input-medium, 203 | input.medium, 204 | textarea.medium, 205 | select.medium 206 | width: 150px 207 | 208 | .input-large, 209 | input.large, 210 | textarea.large, 211 | select.large 212 | width: 210px 213 | 214 | .input-xlarge, 215 | input.xlarge, 216 | textarea.xlarge, 217 | select.xlarge 218 | width: 270px 219 | 220 | .input-xxlarge, 221 | input.xxlarge, 222 | textarea.xxlarge, 223 | select.xxlarge 224 | width: 530px 225 | 226 | textarea.xxlarge 227 | overflow-y: auto 228 | 229 | 230 | // Grid style input sizes 231 | // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border 232 | formColumns(columnSpan = 1) 233 | display: inline-block 234 | float: none 235 | width: (($gridColumnWidth) * columnSpan) + ($gridGutterWidth * (columnSpan - 1)) - 10 236 | margin-left: 0 237 | 238 | input, 239 | textarea 240 | // Default columns 241 | &.span1 242 | formColumns(1) 243 | &.span2 244 | formColumns(2) 245 | &.span3 246 | formColumns(3) 247 | &.span4 248 | formColumns(4) 249 | &.span5 250 | formColumns(5) 251 | &.span6 252 | formColumns(6) 253 | &.span7 254 | formColumns(7) 255 | &.span8 256 | formColumns(8) 257 | &.span9 258 | formColumns(9) 259 | &.span10 260 | formColumns(10) 261 | &.span11 262 | formColumns(11) 263 | &.span12 264 | formColumns(12) 265 | &.span13 266 | formColumns(13) 267 | &.span14 268 | formColumns(14) 269 | &.span15 270 | formColumns(15) 271 | &.span16 272 | formColumns(16) 273 | 274 | 275 | // Disabled and read-only inputs 276 | input[disabled], 277 | select[disabled], 278 | textarea[disabled], 279 | input[readonly], 280 | select[readonly], 281 | textarea[readonly] 282 | background-color: #f5f5f5 283 | border-color: #ddd 284 | cursor: not-allowed 285 | 286 | 287 | // Actions (the buttons) 288 | .actions 289 | background: #f5f5f5 290 | margin-top: $baseline 291 | margin-bottom: $baseline 292 | padding: ($baseline - 1) 20px $baseline 150px 293 | border-top: 1px solid #ddd 294 | border-radius(0 0 3px 3px) 295 | .secondary-action 296 | float: right 297 | a 298 | line-height: 30px 299 | &:hover 300 | text-decoration: underline 301 | 302 | // Help Text 303 | // TODO: Do we need to set $basefont and $baseline here? 304 | .help-inline, 305 | .help-block 306 | font-size: $basefont 307 | line-height: $baseline 308 | color: $grayLight 309 | 310 | .help-inline 311 | padding-left: 5px 312 | *position: relative /* IE6-7 */ 313 | *top: -5px /* IE6-7 */ 314 | 315 | 316 | // Big blocks of help text 317 | .help-block 318 | display: block 319 | max-width: 600px 320 | 321 | 322 | // Inline Fields (input fields that appear as inline objects 323 | .inline-inputs 324 | color: $gray 325 | span 326 | padding: 0 2px 0 1px 327 | 328 | // Allow us to put symbols and text within the input field for a cleaner look 329 | .input-prepend, 330 | .input-append 331 | input 332 | border-radius(0 3px 3px 0) 333 | .add-on 334 | position: relative 335 | background: #f5f5f5 336 | border: 1px solid #ccc 337 | z-index: 2 338 | float: left 339 | display: block 340 | width: auto 341 | min-width: 16px 342 | height: 18px 343 | padding: 4px 4px 4px 5px 344 | margin-right: -1px 345 | font-weight: normal 346 | line-height: 18px 347 | color: $grayLight 348 | text-align: center 349 | text-shadow: 0 1px 0 $white 350 | border-radius(3px 0 0 3px) 351 | .active 352 | background: lighten-fixed($green, 30) 353 | border-color: $green 354 | 355 | .input-prepend 356 | .add-on 357 | *margin-top: 1px /* IE6-7 */ 358 | 359 | .input-append 360 | input 361 | float: left 362 | border-radius(3px 0 0 3px) 363 | .add-on 364 | border-radius(0 3px 3px 0) 365 | margin-right: 0 366 | margin-left: -1px 367 | 368 | // Stacked options for forms (radio buttons or checkboxes) 369 | .inputs-list 370 | margin: 0 0 5px 371 | width: 100% 372 | li 373 | display: block 374 | padding: 0 375 | width: 100% 376 | label 377 | display: block 378 | float: none 379 | width: auto 380 | padding: 0 381 | margin-left: 20px 382 | line-height: $baseline 383 | text-align: left 384 | white-space: normal 385 | strong 386 | color: $gray 387 | small 388 | font-size: ($basefont - 2) 389 | font-weight: normal 390 | .inputs-list 391 | margin-left: 25px 392 | margin-bottom: 10px 393 | padding-top: 0 394 | &:first-child 395 | padding-top: 6px 396 | li + li 397 | padding-top: 2px 398 | input[type=radio], 399 | input[type=checkbox] 400 | margin-bottom: 0 401 | margin-left: -20px 402 | float: left 403 | 404 | // Stacked forms 405 | .form-stacked 406 | padding-left: 20px 407 | fieldset 408 | padding-top: ($baseline / 2) 409 | legend 410 | padding-left: 0 411 | label 412 | display: block 413 | float: none 414 | width: auto 415 | font-weight: bold 416 | text-align: left 417 | line-height: 20px 418 | padding-top: 0 419 | .clearfix 420 | margin-bottom: ($baseline / 2) 421 | div.input 422 | margin-left: 0 423 | .inputs-list 424 | margin-bottom: 0 425 | li 426 | padding-top: 0 427 | label 428 | font-weight: normal 429 | padding-top: 0 430 | div.clearfix.error 431 | padding-top: 10px 432 | padding-bottom: 10px 433 | padding-left: 10px 434 | margin-top: 0 435 | margin-left: -10px 436 | .actions 437 | margin-left: -20px 438 | padding-left: 20px 439 | -------------------------------------------------------------------------------- /lib/patterns.styl: -------------------------------------------------------------------------------- 1 | /* Patterns.less 2 | * Repeatable UI elements outside the base styles provided from the scaffolding 3 | * ---------------------------------------------------------------------------- */ 4 | 5 | 6 | // TOPBAR 7 | // ------ 8 | 9 | // Topbar for Branding and Nav 10 | .topbar 11 | height: 40px 12 | position: fixed 13 | top: 0 14 | left: 0 15 | right: 0 16 | z-index: 10000 17 | overflow: visible 18 | // Links get text shadow 19 | a 20 | color: $grayLight 21 | text-shadow: 0 -1px 0 rgba(0,0,0,.25) 22 | // Hover and active states 23 | // h3 for backwards compatibility 24 | h3 a:hover, 25 | .brand:hover, 26 | ul .active > a 27 | background-color: #333 28 | background-color: rgba(255,255,255,.05) 29 | color: $white 30 | text-decoration: none 31 | // Website name 32 | // h3 left for backwards compatibility 33 | h3 34 | position: relative 35 | h3 a, 36 | .brand 37 | float: left 38 | display: block 39 | padding: 8px 20px 12px 40 | margin-left: -20px // negative indent to left-align the text down the page 41 | color: $white 42 | font-size: 20px 43 | font-weight: 200 44 | line-height: 1 45 | // Plain text in topbar 46 | p 47 | margin: 0 48 | line-height: 40px 49 | a:hover 50 | background-color: transparent 51 | color: $white 52 | // Search Form 53 | form 54 | float: left 55 | margin: 5px 0 0 0 56 | position: relative 57 | opacity(100) 58 | // Todo: remove from v2.0 when ready, added for legacy 59 | form.pull-right 60 | float: right 61 | input 62 | background-color: #444 63 | background-color: rgba(255,255,255,.3) 64 | font-sans-serif(13px, normal, 1) 65 | padding: 4px 9px 66 | color: $white 67 | color: rgba(255,255,255,.75) 68 | border: 1px solid #111 69 | border-radius(4px) 70 | shadow = inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25) 71 | box-shadow(shadow) 72 | transition(none) 73 | // Placeholder text gets special styles can't be bundled together though for some reason 74 | &:-moz-placeholder 75 | color: $grayLighter 76 | &::-webkit-input-placeholder 77 | color: $grayLighter 78 | // Hover states 79 | &:hover 80 | background-color: $grayLight 81 | background-color: rgba(255,255,255,.5) 82 | color: $white 83 | // Focus states (we use .focused since IE8 and down doesn't support :focus) 84 | &:focus, 85 | &.focused 86 | outline: 0 87 | background-color: $white 88 | color: $grayDark 89 | text-shadow: 0 1px 0 $white 90 | border: 0 91 | padding: 5px 10px 92 | box-shadow(0 0 3px rgba(0,0,0,.15)) 93 | 94 | // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present 95 | // For backwards compatibility, include .topbar .fill 96 | .topbar-inner, 97 | .topbar .fill 98 | background-color: #222 99 | gradient-vertical(#333, #222) 100 | shadow = 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1) 101 | box-shadow(shadow) 102 | 103 | // NAVIGATION 104 | // ---------- 105 | 106 | // Topbar Nav 107 | // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity 108 | // For backwards compatibility, leave in .topbar div > ul 109 | .topbar div > ul, 110 | .nav 111 | display: block 112 | float: left 113 | margin: 0 10px 0 0 114 | position: relative 115 | left: 0 116 | > li 117 | display: block 118 | float: left 119 | a 120 | display: block 121 | float: none 122 | padding: 10px 10px 11px 123 | line-height: 19px 124 | text-decoration: none 125 | &:hover 126 | color: $white 127 | text-decoration: none 128 | .active > a 129 | background-color: #222 130 | background-color: rgba(0,0,0,.5) 131 | // Secondary (floated right) nav in topbar 132 | &.secondary-nav 133 | float: right 134 | margin-left: 10px 135 | margin-right: 0 136 | // backwards compatibility 137 | .menu-dropdown, 138 | .dropdown-menu 139 | right: 0 140 | border: 0 141 | // Dropdowns within the .nav 142 | // a.menu:hover and li.open .menu for backwards compatibility 143 | a.menu:hover, 144 | li.open .menu, 145 | .dropdown-toggle:hover, 146 | .dropdown.open .dropdown-toggle 147 | background: #444 148 | background: rgba(255,255,255,.05) 149 | // .menu-dropdown for backwards compatibility 150 | .menu-dropdown, 151 | .dropdown-menu 152 | background-color: #333 153 | // a.menu for backwards compatibility 154 | a.menu, 155 | .dropdown-toggle 156 | color: $white 157 | &.open 158 | background: #444 159 | background: rgba(255,255,255,.05) 160 | li a 161 | color: #999 162 | text-shadow: 0 1px 0 rgba(0,0,0,.5) 163 | &:hover 164 | gradient-vertical(#292929,#191919) 165 | color: $white 166 | .active a 167 | color: $white 168 | .divider 169 | background-color: #222 170 | border-color: #444 171 | 172 | // For backwards compatibility with new dropdowns, redeclare dropdown link padding 173 | .topbar ul .menu-dropdown li a, 174 | .topbar ul .dropdown-menu li a 175 | padding: 4px 15px 176 | 177 | // Dropdown Menus 178 | // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns 179 | // li.menu for backwards compatibility 180 | li.menu, 181 | .dropdown 182 | position: relative 183 | 184 | // The link that is clicked to toggle the dropdown 185 | // a.menu for backwards compatibility 186 | a.menu:after, 187 | .dropdown-toggle:after 188 | width: 0 189 | height: 0 190 | display: inline-block 191 | content: "↓" 192 | text-indent: -99999px 193 | vertical-align: top 194 | margin-top: 8px 195 | margin-left: 4px 196 | border-left: 4px solid transparent 197 | border-right: 4px solid transparent 198 | border-top: 4px solid $white 199 | opacity(50) 200 | 201 | // The dropdown menu (ul) 202 | // .menu-dropdown for backwards compatibility 203 | .menu-dropdown, 204 | .dropdown-menu 205 | background-color: $white 206 | float: left 207 | display: none // None by default, but block on "open" of the menu 208 | position: absolute 209 | top: 40px 210 | z-index: 900 211 | min-width: 160px 212 | max-width: 220px 213 | _width: 160px 214 | margin-left: 0 // override default ul styles 215 | margin-right: 0 216 | padding: 6px 0 217 | zoom: 1 // do we need this? 218 | border-color: #999 219 | border-color: rgba(0,0,0,.2) 220 | border-style: solid 221 | border-width: 0 1px 1px 222 | border-radius(0 0 6px 6px) 223 | box-shadow(0 2px 4px rgba(0,0,0,.2)) 224 | background-clip(padding-box) 225 | // Unfloat any li's to make them stack 226 | li 227 | float: none 228 | display: block 229 | background-color: none 230 | // Dividers (basically an hr) within the dropdown 231 | .divider 232 | height: 1px 233 | margin: 5px 0 234 | overflow: hidden 235 | background-color: #eee 236 | border-bottom: 1px solid $white 237 | 238 | .topbar .dropdown-menu, 239 | .dropdown-menu 240 | // Links within the dropdown menu 241 | a 242 | display: block 243 | padding: 4px 15px 244 | clear: both 245 | font-weight: normal 246 | line-height: 18px 247 | color: $gray 248 | text-shadow: 0 1px 0 $white 249 | // Hover state 250 | &:hover, 251 | &.hover 252 | gradient-vertical(#eeeeee, #dddddd) 253 | color: $grayDark 254 | text-decoration: none 255 | shadow = inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025) 256 | box-shadow(shadow) 257 | 258 | // Open state for the dropdown 259 | // .open for backwards compatibility 260 | .open, 261 | .dropdown.open 262 | // .menu for backwards compatibility 263 | .menu, 264 | .dropdown-toggle 265 | color: $white 266 | background: #ccc 267 | background: rgba(0,0,0,.3) 268 | // .menu-dropdown for backwards compatibility 269 | .menu-dropdown, 270 | .dropdown-menu 271 | display: block 272 | 273 | // TABS AND PILLS 274 | // -------------- 275 | 276 | // Common styles 277 | .tabs, 278 | .pills 279 | margin: 0 0 $baseline 280 | padding: 0 281 | list-style: none 282 | clearfix() 283 | > li 284 | float: left 285 | > a 286 | display: block 287 | 288 | // Tabs 289 | .tabs 290 | border-color: #ddd 291 | border-style: solid 292 | border-width: 0 0 1px 293 | > li 294 | position: relative // For the dropdowns mostly 295 | margin-bottom: -1px 296 | > a 297 | padding: 0 15px 298 | margin-right: 2px 299 | line-height: ($baseline * 2) - 2 300 | border: 1px solid transparent 301 | border-radius(4px 4px 0 0) 302 | &:hover 303 | text-decoration: none 304 | background-color: #eee 305 | border-color: #eee #eee #ddd 306 | // Active state, and it's :hover to override normal :hover 307 | .active > a, 308 | .active > a:hover 309 | color: $gray 310 | background-color: $white 311 | border: 1px solid #ddd 312 | border-bottom-color: transparent 313 | cursor: default 314 | 315 | // Dropdowns in tabs 316 | .tabs 317 | // first one for backwards compatibility 318 | .menu-dropdown, 319 | .dropdown-menu 320 | top: 35px 321 | border-width: 1px 322 | border-radius(0 6px 6px 6px) 323 | // first one for backwards compatibility 324 | a.menu:after, 325 | .dropdown-toggle:after 326 | border-top-color: #999 327 | margin-top: 15px 328 | margin-left: 5px 329 | // first one for backwards compatibility 330 | li.open.menu .menu, 331 | .open.dropdown .dropdown-toggle 332 | border-color: #999 333 | // first one for backwards compatibility 334 | li.open a.menu:after, 335 | .dropdown.open .dropdown-toggle:after 336 | border-top-color: #555 337 | 338 | // Pills 339 | .pills 340 | a 341 | margin: 5px 3px 5px 0 342 | padding: 0 15px 343 | line-height: 30px 344 | text-shadow: 0 1px 1px $white 345 | border-radius(15px) 346 | &:hover 347 | color: $white 348 | text-decoration: none 349 | text-shadow: 0 1px 1px rgba(0,0,0,.25) 350 | background-color: $linkColorHover 351 | .active a 352 | color: $white 353 | text-shadow: 0 1px 1px rgba(0,0,0,.25) 354 | background-color: $linkColor 355 | 356 | // Stacked pills 357 | .pills-vertical > li 358 | float: none 359 | 360 | // Tabbable areas 361 | .tab-content > .tab-pane, 362 | .pill-content > .pill-pane, 363 | .tab-content > div, 364 | .pill-content > div 365 | display: none 366 | 367 | .tab-content > .active, 368 | .pill-content > .active 369 | display: block 370 | 371 | // BREADCRUMBS 372 | // ----------- 373 | 374 | .breadcrumb 375 | padding: 7px 14px 376 | margin: 0 0 $baseline 377 | gradient-vertical(#ffffff, #f5f5f5) 378 | border: 1px solid #ddd 379 | border-radius(3px) 380 | box-shadow(inset 0 1px 0 $white) 381 | li 382 | display: inline 383 | text-shadow: 0 1px 0 $white 384 | .divider 385 | padding: 0 5px 386 | color: $grayLight 387 | .active a 388 | color: $grayDark 389 | 390 | // PAGE HEADERS 391 | // ------------ 392 | 393 | .hero-unit 394 | background-color: #f5f5f5 395 | margin-bottom: 30px 396 | padding: 60px 397 | border-radius(6px) 398 | h1 399 | margin-bottom: 0 400 | font-size: 60px 401 | line-height: 1 402 | letter-spacing: -1px 403 | p 404 | font-size: 18px 405 | font-weight: 200 406 | line-height: ($baseline * 1.5) 407 | 408 | footer 409 | margin-top: ($baseline - 1) 410 | padding-top: ($baseline - 1) 411 | border-top: 1px solid #eee 412 | 413 | // PAGE HEADERS 414 | // ------------ 415 | 416 | .page-header 417 | margin-bottom: ($baseline - 1) 418 | border-bottom: 1px solid #ddd 419 | box-shadow(0 1px 0 rgba(255,255,255,.5)) 420 | h1 421 | margin-bottom: (($baseline / 2) - 1px) 422 | 423 | 424 | // BUTTON STYLES 425 | // ------------- 426 | 427 | // Shared colors for buttons and alerts 428 | .btn, 429 | .alert-message 430 | // Set text color 431 | &.danger, 432 | &.danger:hover, 433 | &.error, 434 | &.error:hover, 435 | &.success, 436 | &.success:hover, 437 | &.info, 438 | &.info:hover 439 | color: $white 440 | // Sets the close button to the middle of message 441 | .close 442 | font-family: Arial, sans-serif 443 | line-height: 18px 444 | // Danger and error appear as red 445 | &.danger, 446 | &.error 447 | gradientBar(#ee5f5b, #c43c35) 448 | // Success appears as green 449 | &.success 450 | gradientBar(#62c462, #57a957) 451 | // Info appears as a neutral blue 452 | &.info 453 | gradientBar(#5bc0de, #339bb9) 454 | 455 | // Base .btn styles 456 | .btn 457 | // Button Base 458 | cursor: pointer 459 | display: inline-block 460 | gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken-fixed(#ffffff, 10%)) // Don't use .gradientbar() here since it does a three-color gradient 461 | padding: 5px 14px 6px 462 | text-shadow: 0 1px 1px rgba(255,255,255,.75) 463 | color: #333 464 | font-size: $basefont 465 | line-height: normal 466 | border: 1px solid #ccc 467 | border-bottom-color: #bbb 468 | border-radius(4px) 469 | shadow = inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05) 470 | box-shadow(shadow) 471 | &:hover 472 | background-position: 0 -15px 473 | color: #333 474 | text-decoration: none 475 | // Focus state for keyboard and accessibility 476 | &:focus 477 | outline: 1px dotted #666 478 | // Primary Button Type 479 | &.primary 480 | color: $white 481 | gradientBar($blue, $blueDark) 482 | // Transitions 483 | transition(.1s linear all) 484 | // Active and Disabled states 485 | &.active, 486 | :active 487 | shadow = inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05) 488 | box-shadow(shadow) 489 | &.disabled 490 | cursor: default 491 | background-image: none 492 | reset-filter() 493 | opacity(65) 494 | box-shadow(none) 495 | &[disabled] 496 | // disabled pseudo can't be included with .disabled 497 | // def because IE8 and below will drop it _ 498 | cursor: default 499 | background-image: none 500 | reset-filter() 501 | opacity(65) 502 | box-shadow(none) 503 | // Button Sizes 504 | &.large 505 | font-size: ($basefont + 2px) 506 | line-height: normal 507 | padding: 9px 14px 9px 508 | border-radius(6px) 509 | &.small 510 | padding: 7px 9px 7px 511 | font-size: ($basefont - 2px) 512 | 513 | // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons 514 | :root .alert-message, 515 | :root .btn 516 | border-radius: s("0 \0") 517 | 518 | 519 | 520 | // Help Firefox not be a jerk about adding extra padding to buttons 521 | button.btn, 522 | input[type=submit].btn 523 | &::-moz-focus-inner 524 | padding: 0 525 | border: 0 526 | 527 | // CLOSE ICONS 528 | // ----------- 529 | .close 530 | float: right 531 | color: $black 532 | font-size: 20px 533 | font-weight: bold 534 | line-height: ($baseline * .75) 535 | text-shadow: 0 1px 0 rgba(255,255,255,1) 536 | opacity(25) 537 | &:hover 538 | color: $black 539 | text-decoration: none 540 | opacity(40) 541 | 542 | // ERROR STYLES 543 | // ------------ 544 | 545 | // Base alert styles 546 | .alert-message 547 | position: relative 548 | padding: 7px 15px 549 | margin-bottom: $baseline 550 | color: $grayDark 551 | gradientBar(#fceec1, #eedc94) // warning by default 552 | text-shadow: 0 1px 0 rgba(255,255,255,.5) 553 | border-width: 1px 554 | border-style: solid 555 | border-radius(4px) 556 | box-shadow(inset 0 1px 0 rgba(255,255,255,.25)) 557 | // Adjust close icon 558 | .close 559 | margin-top: 1px 560 | *margin-top: 0 // For IE7 561 | // Make links same color as text and stand out more 562 | a 563 | font-weight: bold 564 | color: $grayDark 565 | &.danger p a, 566 | &.error p a, 567 | &.success p a, 568 | &.info p a 569 | color: $white 570 | // Remove extra margin from content 571 | h5 572 | line-height: $baseline 573 | p 574 | margin-bottom: 0 575 | div 576 | margin-top: 5px 577 | margin-bottom: 2px 578 | line-height: 28px 579 | .btn 580 | // Provide actions with buttons 581 | box-shadow(0 1px 0 rgba(255,255,255,.25)) 582 | &.block-message 583 | background-image: none 584 | background-color: lighten-fixed(#fceec1, 5%) 585 | reset-filter() 586 | padding: 14px 587 | border-color: #fceec1 588 | box-shadow(none) 589 | ul, p 590 | margin-right: 30px 591 | ul 592 | margin-bottom: 0 593 | li 594 | color: $grayDark 595 | .alert-actions 596 | margin-top: 5px 597 | &.error, 598 | &.success, 599 | &.info 600 | color: $grayDark 601 | text-shadow: 0 1px 0 rgba(255,255,255,.5) 602 | &.error 603 | background-color: lighten-fixed(#f56a66, 25%) 604 | border-color: lighten-fixed(#f56a66, 20%) 605 | &.success 606 | background-color: lighten-fixed(#62c462, 30%) 607 | border-color: lighten-fixed(#62c462, 25%) 608 | &.info 609 | background-color: lighten-fixed(#6bd0ee, 25%) 610 | border-color: lighten-fixed(#6bd0ee, 20%) 611 | // Change link color back 612 | &.danger p a, 613 | &.error p a, 614 | &.success p a, 615 | &.info p a 616 | color: $grayDark 617 | 618 | // PAGINATION 619 | // ---------- 620 | 621 | .pagination 622 | height: ($baseline * 2) 623 | margin: $baseline 0 624 | ul 625 | float: left 626 | margin: 0 627 | border: 1px solid #ddd 628 | border: 1px solid rgba(0,0,0,.15) 629 | border-radius(3px) 630 | box-shadow(0 1px 2px rgba(0,0,0,.05)) 631 | li 632 | display: inline 633 | a 634 | float: left 635 | padding: 0 14px 636 | line-height: (($baseline * 2) - 2) 637 | border-right: 1px solid 638 | border-right-color: #ddd 639 | border-right-color: rgba(0,0,0,.15) 640 | *border-right-color: #ddd /* IE6-7 */ 641 | text-decoration: none 642 | a:hover, 643 | .active a 644 | background-color: lighten-fixed($blue, 45%) 645 | .disabled a, 646 | .disabled a:hover 647 | background-color: transparent 648 | color: $grayLight 649 | .next a 650 | border: 0 651 | 652 | // WELLS 653 | // ----- 654 | 655 | .well 656 | background-color: #f5f5f5 657 | margin-bottom: 20px 658 | padding: 19px 659 | min-height: 20px 660 | border: 1px solid #eee 661 | border: 1px solid rgba(0,0,0,.05) 662 | border-radius(4px) 663 | box-shadow(inset 0 1px 1px rgba(0,0,0,.05)) 664 | blockquote 665 | border-color: #ddd 666 | border-color: rgba(0,0,0,.15) 667 | 668 | // MODALS 669 | // ------ 670 | 671 | .modal-backdrop 672 | background-color: $black 673 | position: fixed 674 | top: 0 675 | left: 0 676 | right: 0 677 | bottom: 0 678 | z-index: 10000 679 | // Fade for backdrop 680 | &.fade 681 | opacity: 0 682 | 683 | .modal-backdrop, 684 | .modal-backdrop.fade.in 685 | opacity(80) 686 | 687 | .modal 688 | position: fixed 689 | top: 50% 690 | left: 50% 691 | z-index: 11000 692 | max-height: 500px 693 | overflow: auto 694 | width: 560px 695 | margin: -250px 0 0 -280px 696 | background-color: $white 697 | border: 1px solid #999 698 | border: 1px solid rgba(0,0,0,.3) 699 | *border: 1px solid #999 /* IE6-7 */ 700 | border-radius(6px) 701 | box-shadow(0 3px 7px rgba(0,0,0,0.3)) 702 | background-clip(padding-box) 703 | .close 704 | margin-top: 7px 705 | &.fade 706 | transitions = opacity .3s linear, top .3s ease-out 707 | transition(transitions) 708 | top: -25% 709 | &.fade.in 710 | top: 50% 711 | 712 | .modal-header 713 | border-bottom: 1px solid #eee 714 | padding: 5px 15px 715 | 716 | .modal-body 717 | padding: 15px 718 | 719 | .modal-body form 720 | margin-bottom: 0 721 | 722 | .modal-footer 723 | background-color: #f5f5f5 724 | padding: 14px 15px 15px 725 | border-top: 1px solid #ddd 726 | border-radius(0 0 6px 6px) 727 | box-shadow(inset 0 1px 0 $white) 728 | clearfix() 729 | margin-bottom: 0 730 | .btn 731 | float: right 732 | margin-left: 5px 733 | 734 | // Fix the stacking of these components when in modals 735 | .modal .popover, 736 | .modal .twipsy 737 | z-index: 12000 738 | 739 | // POPOVER ARROWS 740 | // -------------- 741 | 742 | 743 | popoverArrow-above(arrowWidth = 5px) 744 | bottom: 0 745 | left: 50% 746 | margin-left: (arrowWidth * -1) 747 | border-left: arrowWidth solid transparent 748 | border-right: arrowWidth solid transparent 749 | border-top: arrowWidth solid $black 750 | popoverArrow-left(arrowWidth = 5px) 751 | top: 50% 752 | right: 0 753 | margin-top: (arrowWidth * -1) 754 | border-top: arrowWidth solid transparent 755 | border-bottom: arrowWidth solid transparent 756 | border-left: arrowWidth solid $black 757 | popoverArrow-below(arrowWidth = 5px) 758 | top: 0 759 | left: 50% 760 | margin-left: (arrowWidth * -1) 761 | border-left: arrowWidth solid transparent 762 | border-right: arrowWidth solid transparent 763 | border-bottom: arrowWidth solid $black 764 | popoverArrow-right(arrowWidth = 5px) 765 | top: 50% 766 | left: 0 767 | margin-top: (arrowWidth * -1) 768 | border-top: arrowWidth solid transparent 769 | border-bottom: arrowWidth solid transparent 770 | border-right: arrowWidth solid $black 771 | 772 | // TWIPSY 773 | // ------ 774 | .twipsy 775 | display: block 776 | position: absolute 777 | visibility: visible 778 | padding: 5px 779 | font-size: 11px 780 | z-index: 1000 781 | opacity(80) 782 | &.fade.in 783 | opacity(80) 784 | 785 | &.above .twipsy-arrow 786 | popoverArrow-above() 787 | &.left .twipsy-arrow 788 | popoverArrow-left() 789 | &.below .twipsy-arrow 790 | popoverArrow-below() 791 | &.right .twipsy-arrow 792 | popoverArrow-right() 793 | 794 | .twipsy-inner 795 | padding: 3px 8px 796 | background-color: $black 797 | color: $white 798 | text-align: center 799 | max-width: 200px 800 | text-decoration: none 801 | border-radius(4px) 802 | 803 | .twipsy-arrow 804 | position: absolute 805 | width: 0 806 | height: 0 807 | 808 | // POPOVERS 809 | // -------- 810 | 811 | .popover 812 | position: absolute 813 | top: 0 814 | left: 0 815 | z-index: 1000 816 | padding: 5px 817 | display: none 818 | &.above .arrow 819 | popoverArrow-above() 820 | &.right .arrow 821 | popoverArrow-right() 822 | &.below .arrow 823 | popoverArrow-below() 824 | &.left .arrow 825 | popoverArrow-left() 826 | .arrow 827 | position: absolute 828 | width: 0 829 | height: 0 830 | .inner 831 | background: $black 832 | background: rgba(0,0,0,.8) 833 | padding: 3px 834 | overflow: hidden 835 | width: 280px 836 | border-radius(6px) 837 | box-shadow(0 3px 7px rgba(0,0,0,0.3)) 838 | .title 839 | background-color: #f5f5f5 840 | padding: 9px 15px 841 | line-height: 1 842 | border-radius(3px 3px 0 0) 843 | border-bottom:1px solid #eee 844 | .content 845 | background-color: $white 846 | padding: 14px 847 | border-radius(0 0 3px 3px) 848 | background-clip(padding-box) 849 | p, ul, ol 850 | margin-bottom: 0 851 | 852 | // PATTERN ANIMATIONS 853 | // ------------------ 854 | 855 | .fade 856 | transition(opacity .15s linear) 857 | opacity(0) 858 | &.in 859 | opacity(100) 860 | 861 | // LABELS 862 | // ------ 863 | 864 | .label 865 | padding: 1px 3px 2px 866 | font-size: ($basefont * .75) 867 | font-weight: bold 868 | color: $white 869 | text-transform: uppercase 870 | white-space: nowrap 871 | background-color: $grayLight 872 | border-radius(3px) 873 | text-shadow: none 874 | &.important 875 | background-color: #c43c35 876 | &.warning 877 | background-color: $orange 878 | &.success 879 | background-color: $green 880 | &.notice 881 | background-color: lighten-fixed($blue, 25%) 882 | 883 | // MEDIA GRIDS 884 | // ----------- 885 | 886 | .media-grid 887 | margin-left: ($gridGutterWidth * -1) 888 | margin-bottom: 0 889 | clearfix() 890 | li 891 | display: inline 892 | a 893 | float: left 894 | padding: 4px 895 | margin: 0 0 $baseline $gridGutterWidth 896 | border: 1px solid #ddd 897 | border-radius(4px) 898 | box-shadow(0 1px 1px rgba(0,0,0,.075)) 899 | img 900 | display: block 901 | 902 | &:hover 903 | border-color: $linkColor 904 | box-shadow(0 1px 4px rgba(0,105,214,.25)) 905 | 906 | 907 | 908 | -------------------------------------------------------------------------------- /test/bootstrap.css.org: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v1.4.0 3 | * 4 | * Copyright 2011 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 | * Date: Sun Dec 25 20:18:31 PST 2011 10 | */ 11 | /* Reset.less 12 | * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e.,dfn,samp,etc). 13 | * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ 14 | html,body { 15 | margin: 0; 16 | padding: 0; 17 | } 18 | h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-weight: normal; 23 | font-style: normal; 24 | font-size: 100%; 25 | line-height: 1; 26 | font-family: inherit; 27 | } 28 | table { 29 | border-collapse: collapse; 30 | border-spacing: 0; 31 | } 32 | ol,ul { 33 | list-style: none; 34 | } 35 | q:before,q:after,blockquote:before,blockquote:after { 36 | content: ""; 37 | } 38 | html { 39 | overflow-y: scroll; 40 | font-size: 100%; 41 | -webkit-text-size-adjust: 100%; 42 | -ms-text-size-adjust: 100%; 43 | } 44 | a:focus { 45 | outline: thin dotted; 46 | } 47 | a:hover,a:active { 48 | outline: 0; 49 | } 50 | article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { 51 | display: block; 52 | } 53 | audio,canvas,video { 54 | display: inline-block; 55 | *display: inline; 56 | *zoom: 1; 57 | } 58 | audio:not([controls]) { 59 | display: none; 60 | } 61 | sub,sup { 62 | font-size: 75%; 63 | line-height: 0; 64 | position: relative; 65 | vertical-align: baseline; 66 | } 67 | sup { 68 | top: -0.5em; 69 | } 70 | sub { 71 | bottom: -0.25em; 72 | } 73 | img { 74 | border: 0; 75 | -ms-interpolation-mode: bicubic; 76 | } 77 | button,input,select,textarea { 78 | font-size: 100%; 79 | margin: 0; 80 | vertical-align: baseline; 81 | *vertical-align: middle; 82 | } 83 | button,input { 84 | line-height: normal; 85 | *overflow: visible; 86 | } 87 | button::-moz-focus-inner,input::-moz-focus-inner { 88 | border: 0; 89 | padding: 0; 90 | } 91 | button,input[type="button"],input[type="reset"],input[type="submit"] { 92 | cursor: pointer; 93 | -webkit-appearance: button; 94 | } 95 | input[type="search"] { 96 | -webkit-appearance: textfield; 97 | -webkit-box-sizing: content-box; 98 | -moz-box-sizing: content-box; 99 | box-sizing: content-box; 100 | } 101 | input[type="search"]::-webkit-search-decoration { 102 | -webkit-appearance: none; 103 | } 104 | textarea { 105 | overflow: auto; 106 | vertical-align: top; 107 | } 108 | /* Variables.less 109 | * Variables to customize the look and feel of Bootstrap 110 | * ----------------------------------------------------- */ 111 | /* Mixins.less 112 | * Snippets of reusable CSS to develop faster and keep code readable 113 | * ----------------------------------------------------------------- */ 114 | /* 115 | * Scaffolding 116 | * Basic and global styles for generating a grid system,structural layout,and page templates 117 | * ------------------------------------------------------------------------------------------- */ 118 | body { 119 | background-color: #ffffff; 120 | margin: 0; 121 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 122 | font-size: 13px; 123 | font-weight: normal; 124 | line-height: 18px; 125 | color: #404040; 126 | } 127 | .container { 128 | width: 940px; 129 | margin-left: auto; 130 | margin-right: auto; 131 | zoom: 1; 132 | } 133 | .container:before,.container:after { 134 | display: table; 135 | content: ""; 136 | zoom: 1; 137 | } 138 | .container:after { 139 | clear: both; 140 | } 141 | .container-fluid { 142 | position: relative; 143 | min-width: 940px; 144 | padding-left: 20px; 145 | padding-right: 20px; 146 | zoom: 1; 147 | } 148 | .container-fluid:before,.container-fluid:after { 149 | display: table; 150 | content: ""; 151 | zoom: 1; 152 | } 153 | .container-fluid:after { 154 | clear: both; 155 | } 156 | .container-fluid > .sidebar { 157 | position: absolute; 158 | top: 0; 159 | left: 20px; 160 | width: 220px; 161 | } 162 | .container-fluid > .content { 163 | margin-left: 240px; 164 | } 165 | a { 166 | color: #0069d6; 167 | text-decoration: none; 168 | line-height: inherit; 169 | font-weight: inherit; 170 | } 171 | a:hover { 172 | color: #00438a; 173 | text-decoration: underline; 174 | } 175 | .pull-right { 176 | float: right; 177 | } 178 | .pull-left { 179 | float: left; 180 | } 181 | .hide { 182 | display: none; 183 | } 184 | .show { 185 | display: block; 186 | } 187 | .row { 188 | zoom: 1; 189 | margin-left: -20px; 190 | } 191 | .row:before,.row:after { 192 | display: table; 193 | content: ""; 194 | zoom: 1; 195 | } 196 | .row:after { 197 | clear: both; 198 | } 199 | .row > [class*="span"] { 200 | display: inline; 201 | float: left; 202 | margin-left: 20px; 203 | } 204 | .span1 { 205 | width: 40px; 206 | } 207 | .span2 { 208 | width: 100px; 209 | } 210 | .span3 { 211 | width: 160px; 212 | } 213 | .span4 { 214 | width: 220px; 215 | } 216 | .span5 { 217 | width: 280px; 218 | } 219 | .span6 { 220 | width: 340px; 221 | } 222 | .span7 { 223 | width: 400px; 224 | } 225 | .span8 { 226 | width: 460px; 227 | } 228 | .span9 { 229 | width: 520px; 230 | } 231 | .span10 { 232 | width: 580px; 233 | } 234 | .span11 { 235 | width: 640px; 236 | } 237 | .span12 { 238 | width: 700px; 239 | } 240 | .span13 { 241 | width: 760px; 242 | } 243 | .span14 { 244 | width: 820px; 245 | } 246 | .span15 { 247 | width: 880px; 248 | } 249 | .span16 { 250 | width: 940px; 251 | } 252 | .span17 { 253 | width: 1000px; 254 | } 255 | .span18 { 256 | width: 1060px; 257 | } 258 | .span19 { 259 | width: 1120px; 260 | } 261 | .span20 { 262 | width: 1180px; 263 | } 264 | .span21 { 265 | width: 1240px; 266 | } 267 | .span22 { 268 | width: 1300px; 269 | } 270 | .span23 { 271 | width: 1360px; 272 | } 273 | .span24 { 274 | width: 1420px; 275 | } 276 | .row > .offset1 { 277 | margin-left: 80px; 278 | } 279 | .row > .offset2 { 280 | margin-left: 140px; 281 | } 282 | .row > .offset3 { 283 | margin-left: 200px; 284 | } 285 | .row > .offset4 { 286 | margin-left: 260px; 287 | } 288 | .row > .offset5 { 289 | margin-left: 320px; 290 | } 291 | .row > .offset6 { 292 | margin-left: 380px; 293 | } 294 | .row > .offset7 { 295 | margin-left: 440px; 296 | } 297 | .row > .offset8 { 298 | margin-left: 500px; 299 | } 300 | .row > .offset9 { 301 | margin-left: 560px; 302 | } 303 | .row > .offset10 { 304 | margin-left: 620px; 305 | } 306 | .row > .offset11 { 307 | margin-left: 680px; 308 | } 309 | .row > .offset12 { 310 | margin-left: 740px; 311 | } 312 | .span-one-third { 313 | width: 300px; 314 | } 315 | .span-two-thirds { 316 | width: 620px; 317 | } 318 | .row > .offset-one-third { 319 | margin-left: 340px; 320 | } 321 | .row > .offset-two-thirds { 322 | margin-left: 660px; 323 | } 324 | /* Typography.less 325 | * Headings,body text,lists,code,and more for a versatile and durable typography system 326 | * ---------------------------------------------------------------------------------------- */ 327 | p { 328 | font-size: 13px; 329 | font-weight: normal; 330 | line-height: 18px; 331 | margin-bottom: 9px; 332 | } 333 | p small { 334 | font-size: 11px; 335 | color: #bfbfbf; 336 | } 337 | h1,h2,h3,h4,h5,h6 { 338 | font-weight: bold; 339 | color: #404040; 340 | } 341 | h1 small,h2 small,h3 small,h4 small,h5 small,h6 small { 342 | color: #bfbfbf; 343 | } 344 | h1 { 345 | margin-bottom: 18px; 346 | font-size: 30px; 347 | line-height: 36px; 348 | } 349 | h1 small { 350 | font-size: 18px; 351 | } 352 | h2 { 353 | font-size: 24px; 354 | line-height: 36px; 355 | } 356 | h2 small { 357 | font-size: 14px; 358 | } 359 | h3,h4,h5,h6 { 360 | line-height: 36px; 361 | } 362 | h3 { 363 | font-size: 18px; 364 | } 365 | h3 small { 366 | font-size: 14px; 367 | } 368 | h4 { 369 | font-size: 16px; 370 | } 371 | h4 small { 372 | font-size: 12px; 373 | } 374 | h5 { 375 | font-size: 14px; 376 | } 377 | h6 { 378 | font-size: 13px; 379 | color: #bfbfbf; 380 | text-transform: uppercase; 381 | } 382 | ul,ol { 383 | margin: 0 0 18px 25px; 384 | } 385 | ul ul,ul ol,ol ol,ol ul { 386 | margin-bottom: 0; 387 | } 388 | ul { 389 | list-style: disc; 390 | } 391 | ol { 392 | list-style: decimal; 393 | } 394 | li { 395 | line-height: 18px; 396 | color: #808080; 397 | } 398 | ul.unstyled { 399 | list-style: none; 400 | margin-left: 0; 401 | } 402 | dl { 403 | margin-bottom: 18px; 404 | } 405 | dl dt,dl dd { 406 | line-height: 18px; 407 | } 408 | dl dt { 409 | font-weight: bold; 410 | } 411 | dl dd { 412 | margin-left: 9px; 413 | } 414 | hr { 415 | margin: 20px 0 19px; 416 | border: 0; 417 | border-bottom: 1px solid #eee; 418 | } 419 | strong { 420 | font-style: inherit; 421 | font-weight: bold; 422 | } 423 | em { 424 | font-style: italic; 425 | font-weight: inherit; 426 | line-height: inherit; 427 | } 428 | .muted { 429 | color: #bfbfbf; 430 | } 431 | blockquote { 432 | margin-bottom: 18px; 433 | border-left: 5px solid #eee; 434 | padding-left: 15px; 435 | } 436 | blockquote p { 437 | font-size: 14px; 438 | font-weight: 300; 439 | line-height: 18px; 440 | margin-bottom: 0; 441 | } 442 | blockquote small { 443 | display: block; 444 | font-size: 12px; 445 | font-weight: 300; 446 | line-height: 18px; 447 | color: #bfbfbf; 448 | } 449 | blockquote small:before { 450 | content: '\2014 \00A0'; 451 | } 452 | address { 453 | display: block; 454 | line-height: 18px; 455 | margin-bottom: 18px; 456 | } 457 | code,pre { 458 | padding: 0 3px 2px; 459 | font-family: Monaco,Andale Mono,Courier New,monospace; 460 | font-size: 12px; 461 | -webkit-border-radius: 3px; 462 | -moz-border-radius: 3px; 463 | border-radius: 3px; 464 | } 465 | code { 466 | background-color: #fee9cc; 467 | color: rgba(0,0,0,0.75); 468 | padding: 1px 3px; 469 | } 470 | pre { 471 | background-color: #f5f5f5; 472 | display: block; 473 | padding: 8.5px; 474 | margin: 0 0 18px; 475 | line-height: 18px; 476 | font-size: 12px; 477 | border: 1px solid #ccc; 478 | border: 1px solid rgba(0,0,0,0.15); 479 | -webkit-border-radius: 3px; 480 | -moz-border-radius: 3px; 481 | border-radius: 3px; 482 | white-space: pre; 483 | white-space: pre-wrap; 484 | word-wrap: break-word; 485 | } 486 | /* Forms.less 487 | * Base styles for various input types,form layouts,and states 488 | * ------------------------------------------------------------- */ 489 | form { 490 | margin-bottom: 18px; 491 | } 492 | fieldset { 493 | margin-bottom: 18px; 494 | padding-top: 18px; 495 | } 496 | fieldset legend { 497 | display: block; 498 | padding-left: 150px; 499 | font-size: 19.5px; 500 | line-height: 1; 501 | color: #404040; 502 | *padding: 0 0 5px 145px; 503 | /* IE6-7 */ 504 | 505 | *line-height: 1.5; 506 | /* IE6-7 */ 507 | 508 | } 509 | form .clearfix { 510 | margin-bottom: 18px; 511 | zoom: 1; 512 | } 513 | form .clearfix:before,form .clearfix:after { 514 | display: table; 515 | content: ""; 516 | zoom: 1; 517 | } 518 | form .clearfix:after { 519 | clear: both; 520 | } 521 | label,input,select,textarea { 522 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 523 | font-size: 13px; 524 | font-weight: normal; 525 | line-height: normal; 526 | } 527 | label { 528 | padding-top: 6px; 529 | font-size: 13px; 530 | line-height: 18px; 531 | float: left; 532 | width: 130px; 533 | text-align: right; 534 | color: #404040; 535 | } 536 | form .input { 537 | margin-left: 150px; 538 | } 539 | input[type=checkbox],input[type=radio] { 540 | cursor: pointer; 541 | } 542 | input,textarea,select,.uneditable-input { 543 | display: inline-block; 544 | width: 210px; 545 | height: 18px; 546 | padding: 4px; 547 | font-size: 13px; 548 | line-height: 18px; 549 | color: #808080; 550 | border: 1px solid #ccc; 551 | -webkit-border-radius: 3px; 552 | -moz-border-radius: 3px; 553 | border-radius: 3px; 554 | } 555 | select { 556 | padding: initial; 557 | } 558 | input[type=checkbox],input[type=radio] { 559 | width: auto; 560 | height: auto; 561 | padding: 0; 562 | margin: 3px 0; 563 | *margin-top: 0; 564 | /* IE6-7 */ 565 | 566 | line-height: normal; 567 | border: none; 568 | } 569 | input[type=file] { 570 | background-color: #ffffff; 571 | padding: initial; 572 | border: initial; 573 | line-height: initial; 574 | -webkit-box-shadow: none; 575 | -moz-box-shadow: none; 576 | box-shadow: none; 577 | } 578 | input[type=button],input[type=reset],input[type=submit] { 579 | width: auto; 580 | height: auto; 581 | } 582 | select,input[type=file] { 583 | height: 27px; 584 | *height: auto; 585 | line-height: 27px; 586 | *margin-top: 4px; 587 | /* For IE7,add top margin to align select with labels */ 588 | 589 | } 590 | select[multiple] { 591 | height: inherit; 592 | background-color: #ffffff; 593 | } 594 | textarea { 595 | height: auto; 596 | } 597 | .uneditable-input { 598 | background-color: #ffffff; 599 | display: block; 600 | border-color: #eee; 601 | -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025); 602 | -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.025); 603 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.025); 604 | cursor: not-allowed; 605 | } 606 | :-moz-placeholder { 607 | color: #bfbfbf; 608 | } 609 | ::-webkit-input-placeholder { 610 | color: #bfbfbf; 611 | } 612 | input,textarea { 613 | -webkit-transition: border linear 0.2s,box-shadow linear 0.2s; 614 | -moz-transition: border linear 0.2s,box-shadow linear 0.2s; 615 | -ms-transition: border linear 0.2s,box-shadow linear 0.2s; 616 | -o-transition: border linear 0.2s,box-shadow linear 0.2s; 617 | transition: border linear 0.2s,box-shadow linear 0.2s; 618 | -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 619 | -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 620 | box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 621 | } 622 | input:focus,textarea:focus { 623 | outline: 0; 624 | border-color: rgba(82,168,236,0.8); 625 | -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); 626 | -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); 627 | box-shadow: inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); 628 | } 629 | input[type=file]:focus,input[type=checkbox]:focus,select:focus { 630 | -webkit-box-shadow: none; 631 | -moz-box-shadow: none; 632 | box-shadow: none; 633 | outline: 1px dotted #666; 634 | } 635 | form .clearfix.error > label,form .clearfix.error .help-block,form .clearfix.error .help-inline { 636 | color: #b94a48; 637 | } 638 | form .clearfix.error input,form .clearfix.error textarea { 639 | color: #b94a48; 640 | border-color: #ee5f5b; 641 | } 642 | form .clearfix.error input:focus,form .clearfix.error textarea:focus { 643 | border-color: #e9322d; 644 | -webkit-box-shadow: 0 0 6px #f8b9b7; 645 | -moz-box-shadow: 0 0 6px #f8b9b7; 646 | box-shadow: 0 0 6px #f8b9b7; 647 | } 648 | form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on { 649 | color: #b94a48; 650 | background-color: #fce6e6; 651 | border-color: #b94a48; 652 | } 653 | form .clearfix.warning > label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline { 654 | color: #c09853; 655 | } 656 | form .clearfix.warning input,form .clearfix.warning textarea { 657 | color: #c09853; 658 | border-color: #ccae64; 659 | } 660 | form .clearfix.warning input:focus,form .clearfix.warning textarea:focus { 661 | border-color: #be9a3f; 662 | -webkit-box-shadow: 0 0 6px #e5d6b1; 663 | -moz-box-shadow: 0 0 6px #e5d6b1; 664 | box-shadow: 0 0 6px #e5d6b1; 665 | } 666 | form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on { 667 | color: #c09853; 668 | background-color: #d2b877; 669 | border-color: #c09853; 670 | } 671 | form .clearfix.success > label,form .clearfix.success .help-block,form .clearfix.success .help-inline { 672 | color: #468847; 673 | } 674 | form .clearfix.success input,form .clearfix.success textarea { 675 | color: #468847; 676 | border-color: #57a957; 677 | } 678 | form .clearfix.success input:focus,form .clearfix.success textarea:focus { 679 | border-color: #458845; 680 | -webkit-box-shadow: 0 0 6px #9acc9a; 681 | -moz-box-shadow: 0 0 6px #9acc9a; 682 | box-shadow: 0 0 6px #9acc9a; 683 | } 684 | form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on { 685 | color: #468847; 686 | background-color: #bcddbc; 687 | border-color: #468847; 688 | } 689 | .input-mini,input.mini,textarea.mini,select.mini { 690 | width: 60px; 691 | } 692 | .input-small,input.small,textarea.small,select.small { 693 | width: 90px; 694 | } 695 | .input-medium,input.medium,textarea.medium,select.medium { 696 | width: 150px; 697 | } 698 | .input-large,input.large,textarea.large,select.large { 699 | width: 210px; 700 | } 701 | .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge { 702 | width: 270px; 703 | } 704 | .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge { 705 | width: 530px; 706 | } 707 | textarea.xxlarge { 708 | overflow-y: auto; 709 | } 710 | input.span1,textarea.span1 { 711 | display: inline-block; 712 | float: none; 713 | width: 30px; 714 | margin-left: 0; 715 | } 716 | input.span2,textarea.span2 { 717 | display: inline-block; 718 | float: none; 719 | width: 90px; 720 | margin-left: 0; 721 | } 722 | input.span3,textarea.span3 { 723 | display: inline-block; 724 | float: none; 725 | width: 150px; 726 | margin-left: 0; 727 | } 728 | input.span4,textarea.span4 { 729 | display: inline-block; 730 | float: none; 731 | width: 210px; 732 | margin-left: 0; 733 | } 734 | input.span5,textarea.span5 { 735 | display: inline-block; 736 | float: none; 737 | width: 270px; 738 | margin-left: 0; 739 | } 740 | input.span6,textarea.span6 { 741 | display: inline-block; 742 | float: none; 743 | width: 330px; 744 | margin-left: 0; 745 | } 746 | input.span7,textarea.span7 { 747 | display: inline-block; 748 | float: none; 749 | width: 390px; 750 | margin-left: 0; 751 | } 752 | input.span8,textarea.span8 { 753 | display: inline-block; 754 | float: none; 755 | width: 450px; 756 | margin-left: 0; 757 | } 758 | input.span9,textarea.span9 { 759 | display: inline-block; 760 | float: none; 761 | width: 510px; 762 | margin-left: 0; 763 | } 764 | input.span10,textarea.span10 { 765 | display: inline-block; 766 | float: none; 767 | width: 570px; 768 | margin-left: 0; 769 | } 770 | input.span11,textarea.span11 { 771 | display: inline-block; 772 | float: none; 773 | width: 630px; 774 | margin-left: 0; 775 | } 776 | input.span12,textarea.span12 { 777 | display: inline-block; 778 | float: none; 779 | width: 690px; 780 | margin-left: 0; 781 | } 782 | input.span13,textarea.span13 { 783 | display: inline-block; 784 | float: none; 785 | width: 750px; 786 | margin-left: 0; 787 | } 788 | input.span14,textarea.span14 { 789 | display: inline-block; 790 | float: none; 791 | width: 810px; 792 | margin-left: 0; 793 | } 794 | input.span15,textarea.span15 { 795 | display: inline-block; 796 | float: none; 797 | width: 870px; 798 | margin-left: 0; 799 | } 800 | input.span16,textarea.span16 { 801 | display: inline-block; 802 | float: none; 803 | width: 930px; 804 | margin-left: 0; 805 | } 806 | input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly] { 807 | background-color: #f5f5f5; 808 | border-color: #ddd; 809 | cursor: not-allowed; 810 | } 811 | .actions { 812 | background: #f5f5f5; 813 | margin-top: 18px; 814 | margin-bottom: 18px; 815 | padding: 17px 20px 18px 150px; 816 | border-top: 1px solid #ddd; 817 | -webkit-border-radius: 0 0 3px 3px; 818 | -moz-border-radius: 0 0 3px 3px; 819 | border-radius: 0 0 3px 3px; 820 | } 821 | .actions .secondary-action { 822 | float: right; 823 | } 824 | .actions .secondary-action a { 825 | line-height: 30px; 826 | } 827 | .actions .secondary-action a:hover { 828 | text-decoration: underline; 829 | } 830 | .help-inline,.help-block { 831 | font-size: 13px; 832 | line-height: 18px; 833 | color: #bfbfbf; 834 | } 835 | .help-inline { 836 | padding-left: 5px; 837 | *position: relative; 838 | /* IE6-7 */ 839 | 840 | *top: -5px; 841 | /* IE6-7 */ 842 | 843 | } 844 | .help-block { 845 | display: block; 846 | max-width: 600px; 847 | } 848 | .inline-inputs { 849 | color: #808080; 850 | } 851 | .inline-inputs span { 852 | padding: 0 2px 0 1px; 853 | } 854 | .input-prepend input,.input-append input { 855 | -webkit-border-radius: 0 3px 3px 0; 856 | -moz-border-radius: 0 3px 3px 0; 857 | border-radius: 0 3px 3px 0; 858 | } 859 | .input-prepend .add-on,.input-append .add-on { 860 | position: relative; 861 | background: #f5f5f5; 862 | border: 1px solid #ccc; 863 | z-index: 2; 864 | float: left; 865 | display: block; 866 | width: auto; 867 | min-width: 16px; 868 | height: 18px; 869 | padding: 4px 4px 4px 5px; 870 | margin-right: -1px; 871 | font-weight: normal; 872 | line-height: 18px; 873 | color: #bfbfbf; 874 | text-align: center; 875 | text-shadow: 0 1px 0 #ffffff; 876 | -webkit-border-radius: 3px 0 0 3px; 877 | -moz-border-radius: 3px 0 0 3px; 878 | border-radius: 3px 0 0 3px; 879 | } 880 | .input-prepend .active,.input-append .active { 881 | background: #a9dba9; 882 | border-color: #46a546; 883 | } 884 | .input-prepend .add-on { 885 | *margin-top: 1px; 886 | /* IE6-7 */ 887 | 888 | } 889 | .input-append input { 890 | float: left; 891 | -webkit-border-radius: 3px 0 0 3px; 892 | -moz-border-radius: 3px 0 0 3px; 893 | border-radius: 3px 0 0 3px; 894 | } 895 | .input-append .add-on { 896 | -webkit-border-radius: 0 3px 3px 0; 897 | -moz-border-radius: 0 3px 3px 0; 898 | border-radius: 0 3px 3px 0; 899 | margin-right: 0; 900 | margin-left: -1px; 901 | } 902 | .inputs-list { 903 | margin: 0 0 5px; 904 | width: 100%; 905 | } 906 | .inputs-list li { 907 | display: block; 908 | padding: 0; 909 | width: 100%; 910 | } 911 | .inputs-list label { 912 | display: block; 913 | float: none; 914 | width: auto; 915 | padding: 0; 916 | margin-left: 20px; 917 | line-height: 18px; 918 | text-align: left; 919 | white-space: normal; 920 | } 921 | .inputs-list label strong { 922 | color: #808080; 923 | } 924 | .inputs-list label small { 925 | font-size: 11px; 926 | font-weight: normal; 927 | } 928 | .inputs-list .inputs-list { 929 | margin-left: 25px; 930 | margin-bottom: 10px; 931 | padding-top: 0; 932 | } 933 | .inputs-list:first-child { 934 | padding-top: 6px; 935 | } 936 | .inputs-list li + li { 937 | padding-top: 2px; 938 | } 939 | .inputs-list input[type=radio],.inputs-list input[type=checkbox] { 940 | margin-bottom: 0; 941 | margin-left: -20px; 942 | float: left; 943 | } 944 | .form-stacked { 945 | padding-left: 20px; 946 | } 947 | .form-stacked fieldset { 948 | padding-top: 9px; 949 | } 950 | .form-stacked legend { 951 | padding-left: 0; 952 | } 953 | .form-stacked label { 954 | display: block; 955 | float: none; 956 | width: auto; 957 | font-weight: bold; 958 | text-align: left; 959 | line-height: 20px; 960 | padding-top: 0; 961 | } 962 | .form-stacked .clearfix { 963 | margin-bottom: 9px; 964 | } 965 | .form-stacked .clearfix div.input { 966 | margin-left: 0; 967 | } 968 | .form-stacked .inputs-list { 969 | margin-bottom: 0; 970 | } 971 | .form-stacked .inputs-list li { 972 | padding-top: 0; 973 | } 974 | .form-stacked .inputs-list li label { 975 | font-weight: normal; 976 | padding-top: 0; 977 | } 978 | .form-stacked div.clearfix.error { 979 | padding-top: 10px; 980 | padding-bottom: 10px; 981 | padding-left: 10px; 982 | margin-top: 0; 983 | margin-left: -10px; 984 | } 985 | .form-stacked .actions { 986 | margin-left: -20px; 987 | padding-left: 20px; 988 | } 989 | /* 990 | * Tables.less 991 | * Tables for,you guessed it,tabular data 992 | * ---------------------------------------- */ 993 | table { 994 | width: 100%; 995 | margin-bottom: 18px; 996 | padding: 0; 997 | font-size: 13px; 998 | border-collapse: collapse; 999 | } 1000 | table th,table td { 1001 | padding: 10px 10px 9px; 1002 | line-height: 18px; 1003 | text-align: left; 1004 | } 1005 | table th { 1006 | padding-top: 9px; 1007 | font-weight: bold; 1008 | vertical-align: middle; 1009 | } 1010 | table td { 1011 | vertical-align: top; 1012 | border-top: 1px solid #ddd; 1013 | } 1014 | table tbody th { 1015 | border-top: 1px solid #ddd; 1016 | vertical-align: top; 1017 | } 1018 | .condensed-table th,.condensed-table td { 1019 | padding: 5px 5px 4px; 1020 | } 1021 | .bordered-table { 1022 | border: 1px solid #ddd; 1023 | border-collapse: separate; 1024 | *border-collapse: collapse; 1025 | /* IE7,collapse table to remove spacing */ 1026 | 1027 | -webkit-border-radius: 4px; 1028 | -moz-border-radius: 4px; 1029 | border-radius: 4px; 1030 | } 1031 | .bordered-table th + th,.bordered-table td + td,.bordered-table th + td { 1032 | border-left: 1px solid #ddd; 1033 | } 1034 | .bordered-table thead tr:first-child th:first-child,.bordered-table tbody tr:first-child td:first-child { 1035 | -webkit-border-radius: 4px 0 0 0; 1036 | -moz-border-radius: 4px 0 0 0; 1037 | border-radius: 4px 0 0 0; 1038 | } 1039 | .bordered-table thead tr:first-child th:last-child,.bordered-table tbody tr:first-child td:last-child { 1040 | -webkit-border-radius: 0 4px 0 0; 1041 | -moz-border-radius: 0 4px 0 0; 1042 | border-radius: 0 4px 0 0; 1043 | } 1044 | .bordered-table tbody tr:last-child td:first-child { 1045 | -webkit-border-radius: 0 0 0 4px; 1046 | -moz-border-radius: 0 0 0 4px; 1047 | border-radius: 0 0 0 4px; 1048 | } 1049 | .bordered-table tbody tr:last-child td:last-child { 1050 | -webkit-border-radius: 0 0 4px 0; 1051 | -moz-border-radius: 0 0 4px 0; 1052 | border-radius: 0 0 4px 0; 1053 | } 1054 | table .span1 { 1055 | width: 20px; 1056 | } 1057 | table .span2 { 1058 | width: 60px; 1059 | } 1060 | table .span3 { 1061 | width: 100px; 1062 | } 1063 | table .span4 { 1064 | width: 140px; 1065 | } 1066 | table .span5 { 1067 | width: 180px; 1068 | } 1069 | table .span6 { 1070 | width: 220px; 1071 | } 1072 | table .span7 { 1073 | width: 260px; 1074 | } 1075 | table .span8 { 1076 | width: 300px; 1077 | } 1078 | table .span9 { 1079 | width: 340px; 1080 | } 1081 | table .span10 { 1082 | width: 380px; 1083 | } 1084 | table .span11 { 1085 | width: 420px; 1086 | } 1087 | table .span12 { 1088 | width: 460px; 1089 | } 1090 | table .span13 { 1091 | width: 500px; 1092 | } 1093 | table .span14 { 1094 | width: 540px; 1095 | } 1096 | table .span15 { 1097 | width: 580px; 1098 | } 1099 | table .span16 { 1100 | width: 620px; 1101 | } 1102 | .zebra-striped tbody tr:nth-child(odd) td,.zebra-striped tbody tr:nth-child(odd) th { 1103 | background-color: #f9f9f9; 1104 | } 1105 | .zebra-striped tbody tr:hover td,.zebra-striped tbody tr:hover th { 1106 | background-color: #f5f5f5; 1107 | } 1108 | table .header { 1109 | cursor: pointer; 1110 | } 1111 | table .header:after { 1112 | content: ""; 1113 | float: right; 1114 | margin-top: 7px; 1115 | border-width: 0 4px 4px; 1116 | border-style: solid; 1117 | border-color: #000 transparent; 1118 | visibility: hidden; 1119 | } 1120 | table .headerSortUp,table .headerSortDown { 1121 | background-color: rgba(141,192,219,0.25); 1122 | text-shadow: 0 1px 1px rgba(255,255,255,0.75); 1123 | } 1124 | table .header:hover:after { 1125 | visibility: visible; 1126 | } 1127 | table .headerSortDown:after,table .headerSortDown:hover:after { 1128 | visibility: visible; 1129 | filter: alpha(opacity=60); 1130 | -khtml-opacity: 0.6; 1131 | -moz-opacity: 0.6; 1132 | opacity: 0.6; 1133 | } 1134 | table .headerSortUp:after { 1135 | border-bottom: none; 1136 | border-left: 4px solid transparent; 1137 | border-right: 4px solid transparent; 1138 | border-top: 4px solid #000; 1139 | visibility: visible; 1140 | -webkit-box-shadow: none; 1141 | -moz-box-shadow: none; 1142 | box-shadow: none; 1143 | filter: alpha(opacity=60); 1144 | -khtml-opacity: 0.6; 1145 | -moz-opacity: 0.6; 1146 | opacity: 0.6; 1147 | } 1148 | table .blue { 1149 | color: #049cdb; 1150 | border-bottom-color: #049cdb; 1151 | } 1152 | table .headerSortUp.blue,table .headerSortDown.blue { 1153 | background-color: #ade6fe; 1154 | } 1155 | table .green { 1156 | color: #46a546; 1157 | border-bottom-color: #46a546; 1158 | } 1159 | table .headerSortUp.green,table .headerSortDown.green { 1160 | background-color: #cdeacd; 1161 | } 1162 | table .red { 1163 | color: #9d261d; 1164 | border-bottom-color: #9d261d; 1165 | } 1166 | table .headerSortUp.red,table .headerSortDown.red { 1167 | background-color: #f4c8c5; 1168 | } 1169 | table .yellow { 1170 | color: #ffc40d; 1171 | border-bottom-color: #ffc40d; 1172 | } 1173 | table .headerSortUp.yellow,table .headerSortDown.yellow { 1174 | background-color: #fff6d9; 1175 | } 1176 | table .orange { 1177 | color: #f89406; 1178 | border-bottom-color: #f89406; 1179 | } 1180 | table .headerSortUp.orange,table .headerSortDown.orange { 1181 | background-color: #fee9cc; 1182 | } 1183 | table .purple { 1184 | color: #7a43b6; 1185 | border-bottom-color: #7a43b6; 1186 | } 1187 | table .headerSortUp.purple,table .headerSortDown.purple { 1188 | background-color: #e2d5f0; 1189 | } 1190 | /* Patterns.less 1191 | * Repeatable UI elements outside the base styles provided from the scaffolding 1192 | * ---------------------------------------------------------------------------- */ 1193 | .topbar { 1194 | height: 40px; 1195 | position: fixed; 1196 | top: 0; 1197 | left: 0; 1198 | right: 0; 1199 | z-index: 10000; 1200 | overflow: visible; 1201 | } 1202 | .topbar a { 1203 | color: #bfbfbf; 1204 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1205 | } 1206 | .topbar h3 a:hover,.topbar .brand:hover,.topbar ul .active > a { 1207 | background-color: #333; 1208 | background-color: rgba(255,255,255,0.05); 1209 | color: #ffffff; 1210 | text-decoration: none; 1211 | } 1212 | .topbar h3 { 1213 | position: relative; 1214 | } 1215 | .topbar h3 a,.topbar .brand { 1216 | float: left; 1217 | display: block; 1218 | padding: 8px 20px 12px; 1219 | margin-left: -20px; 1220 | color: #ffffff; 1221 | font-size: 20px; 1222 | font-weight: 200; 1223 | line-height: 1; 1224 | } 1225 | .topbar p { 1226 | margin: 0; 1227 | line-height: 40px; 1228 | } 1229 | .topbar p a:hover { 1230 | background-color: transparent; 1231 | color: #ffffff; 1232 | } 1233 | .topbar form { 1234 | float: left; 1235 | margin: 5px 0 0 0; 1236 | position: relative; 1237 | filter: alpha(opacity=100); 1238 | -khtml-opacity: 1; 1239 | -moz-opacity: 1; 1240 | opacity: 1; 1241 | } 1242 | .topbar form.pull-right { 1243 | float: right; 1244 | } 1245 | .topbar input { 1246 | background-color: #444; 1247 | background-color: rgba(255,255,255,0.3); 1248 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 1249 | font-size: normal; 1250 | font-weight: 13px; 1251 | line-height: 1; 1252 | padding: 4px 9px; 1253 | color: #ffffff; 1254 | color: rgba(255,255,255,0.75); 1255 | border: 1px solid #111; 1256 | -webkit-border-radius: 4px; 1257 | -moz-border-radius: 4px; 1258 | border-radius: 4px; 1259 | -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0px rgba(255,255,255,0.25); 1260 | -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0px rgba(255,255,255,0.25); 1261 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 1px 0px rgba(255,255,255,0.25); 1262 | -webkit-transition: none; 1263 | -moz-transition: none; 1264 | -ms-transition: none; 1265 | -o-transition: none; 1266 | transition: none; 1267 | } 1268 | .topbar input:-moz-placeholder { 1269 | color: #e6e6e6; 1270 | } 1271 | .topbar input::-webkit-input-placeholder { 1272 | color: #e6e6e6; 1273 | } 1274 | .topbar input:hover { 1275 | background-color: #bfbfbf; 1276 | background-color: rgba(255,255,255,0.5); 1277 | color: #ffffff; 1278 | } 1279 | .topbar input:focus,.topbar input.focused { 1280 | outline: 0; 1281 | background-color: #ffffff; 1282 | color: #404040; 1283 | text-shadow: 0 1px 0 #ffffff; 1284 | border: 0; 1285 | padding: 5px 10px; 1286 | -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15); 1287 | -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15); 1288 | box-shadow: 0 0 3px rgba(0,0,0,0.15); 1289 | } 1290 | .topbar-inner,.topbar .fill { 1291 | background-color: #222; 1292 | background-color: #222222; 1293 | background-repeat: repeat-x; 1294 | background-image: -khtml-gradient(linear,left top,left bottom,from(#333333),to(#222222)); 1295 | background-image: -moz-linear-gradient(top,#333333,#222222); 1296 | background-image: -ms-linear-gradient(top,#333333,#222222); 1297 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#333333),color-stop(100%,#222222)); 1298 | background-image: -webkit-linear-gradient(top,#333333,#222222); 1299 | background-image: -o-linear-gradient(top,#333333,#222222); 1300 | background-image: linear-gradient(top,#333333,#222222); 1301 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0); 1302 | -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); 1303 | -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); 1304 | box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1); 1305 | } 1306 | .topbar div > ul,.nav { 1307 | display: block; 1308 | float: left; 1309 | margin: 0 10px 0 0; 1310 | position: relative; 1311 | left: 0; 1312 | } 1313 | .topbar div > ul > li,.nav > li { 1314 | display: block; 1315 | float: left; 1316 | } 1317 | .topbar div > ul a,.nav a { 1318 | display: block; 1319 | float: none; 1320 | padding: 10px 10px 11px; 1321 | line-height: 19px; 1322 | text-decoration: none; 1323 | } 1324 | .topbar div > ul a:hover,.nav a:hover { 1325 | color: #ffffff; 1326 | text-decoration: none; 1327 | } 1328 | .topbar div > ul .active > a,.nav .active > a { 1329 | background-color: #222; 1330 | background-color: rgba(0,0,0,0.5); 1331 | } 1332 | .topbar div > ul.secondary-nav,.nav.secondary-nav { 1333 | float: right; 1334 | margin-left: 10px; 1335 | margin-right: 0; 1336 | } 1337 | .topbar div > ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div > ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu { 1338 | right: 0; 1339 | border: 0; 1340 | } 1341 | .topbar div > ul a.menu:hover,.nav a.menu:hover,.topbar div > ul li.open .menu,.nav li.open .menu,.topbar div > ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div > ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle { 1342 | background: #444; 1343 | background: rgba(255,255,255,0.05); 1344 | } 1345 | .topbar div > ul .menu-dropdown,.nav .menu-dropdown,.topbar div > ul .dropdown-menu,.nav .dropdown-menu { 1346 | background-color: #333; 1347 | } 1348 | .topbar div > ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div > ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div > ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div > ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle { 1349 | color: #ffffff; 1350 | } 1351 | .topbar div > ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div > ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div > ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div > ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open { 1352 | background: #444; 1353 | background: rgba(255,255,255,0.05); 1354 | } 1355 | .topbar div > ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div > ul .dropdown-menu li a,.nav .dropdown-menu li a { 1356 | color: #999; 1357 | text-shadow: 0 1px 0 rgba(0,0,0,0.5); 1358 | } 1359 | .topbar div > ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div > ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover { 1360 | background-color: #191919; 1361 | background-repeat: repeat-x; 1362 | background-image: -khtml-gradient(linear,left top,left bottom,from(#292929),to(#191919)); 1363 | background-image: -moz-linear-gradient(top,#292929,#191919); 1364 | background-image: -ms-linear-gradient(top,#292929,#191919); 1365 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#292929),color-stop(100%,#191919)); 1366 | background-image: -webkit-linear-gradient(top,#292929,#191919); 1367 | background-image: -o-linear-gradient(top,#292929,#191919); 1368 | background-image: linear-gradient(top,#292929,#191919); 1369 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929',endColorstr='#191919',GradientType=0); 1370 | color: #ffffff; 1371 | } 1372 | .topbar div > ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div > ul .dropdown-menu .active a,.nav .dropdown-menu .active a { 1373 | color: #ffffff; 1374 | } 1375 | .topbar div > ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div > ul .dropdown-menu .divider,.nav .dropdown-menu .divider { 1376 | background-color: #222; 1377 | border-color: #444; 1378 | } 1379 | .topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a { 1380 | padding: 4px 15px; 1381 | } 1382 | li.menu,.dropdown { 1383 | position: relative; 1384 | } 1385 | a.menu:after,.dropdown-toggle:after { 1386 | width: 0; 1387 | height: 0; 1388 | display: inline-block; 1389 | content: "↓"; 1390 | text-indent: -99999px; 1391 | vertical-align: top; 1392 | margin-top: 8px; 1393 | margin-left: 4px; 1394 | border-left: 4px solid transparent; 1395 | border-right: 4px solid transparent; 1396 | border-top: 4px solid #ffffff; 1397 | filter: alpha(opacity=50); 1398 | -khtml-opacity: 0.5; 1399 | -moz-opacity: 0.5; 1400 | opacity: 0.5; 1401 | } 1402 | .menu-dropdown,.dropdown-menu { 1403 | background-color: #ffffff; 1404 | float: left; 1405 | display: none; 1406 | position: absolute; 1407 | top: 40px; 1408 | z-index: 900; 1409 | min-width: 160px; 1410 | max-width: 220px; 1411 | _width: 160px; 1412 | margin-left: 0; 1413 | margin-right: 0; 1414 | padding: 6px 0; 1415 | zoom: 1; 1416 | border-color: #999; 1417 | border-color: rgba(0,0,0,0.2); 1418 | border-style: solid; 1419 | border-width: 0 1px 1px; 1420 | -webkit-border-radius: 0 0 6px 6px; 1421 | -moz-border-radius: 0 0 6px 6px; 1422 | border-radius: 0 0 6px 6px; 1423 | -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); 1424 | -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2); 1425 | box-shadow: 0 2px 4px rgba(0,0,0,0.2); 1426 | -webkit-background-clip: padding-box; 1427 | -moz-background-clip: padding-box; 1428 | background-clip: padding-box; 1429 | } 1430 | .menu-dropdown li,.dropdown-menu li { 1431 | float: none; 1432 | display: block; 1433 | background-color: none; 1434 | } 1435 | .menu-dropdown .divider,.dropdown-menu .divider { 1436 | height: 1px; 1437 | margin: 5px 0; 1438 | overflow: hidden; 1439 | background-color: #eee; 1440 | border-bottom: 1px solid #ffffff; 1441 | } 1442 | .topbar .dropdown-menu a,.dropdown-menu a { 1443 | display: block; 1444 | padding: 4px 15px; 1445 | clear: both; 1446 | font-weight: normal; 1447 | line-height: 18px; 1448 | color: #808080; 1449 | text-shadow: 0 1px 0 #ffffff; 1450 | } 1451 | .topbar .dropdown-menu a:hover,.dropdown-menu a:hover,.topbar .dropdown-menu a.hover,.dropdown-menu a.hover { 1452 | background-color: #dddddd; 1453 | background-repeat: repeat-x; 1454 | background-image: -khtml-gradient(linear,left top,left bottom,from(#eeeeee),to(#dddddd)); 1455 | background-image: -moz-linear-gradient(top,#eeeeee,#dddddd); 1456 | background-image: -ms-linear-gradient(top,#eeeeee,#dddddd); 1457 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#eeeeee),color-stop(100%,#dddddd)); 1458 | background-image: -webkit-linear-gradient(top,#eeeeee,#dddddd); 1459 | background-image: -o-linear-gradient(top,#eeeeee,#dddddd); 1460 | background-image: linear-gradient(top,#eeeeee,#dddddd); 1461 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#dddddd',GradientType=0); 1462 | color: #404040; 1463 | text-decoration: none; 1464 | -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.025),inset 0 -1px rgba(0,0,0,0.025); 1465 | -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.025),inset 0 -1px rgba(0,0,0,0.025); 1466 | box-shadow: inset 0 1px 0 rgba(0,0,0,0.025),inset 0 -1px rgba(0,0,0,0.025); 1467 | } 1468 | .open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle { 1469 | color: #ffffff; 1470 | background: #ccc; 1471 | background: rgba(0,0,0,0.3); 1472 | } 1473 | .open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu { 1474 | display: block; 1475 | } 1476 | .tabs,.pills { 1477 | margin: 0 0 18px; 1478 | padding: 0; 1479 | list-style: none; 1480 | zoom: 1; 1481 | } 1482 | .tabs:before,.pills:before,.tabs:after,.pills:after { 1483 | display: table; 1484 | content: ""; 1485 | zoom: 1; 1486 | } 1487 | .tabs:after,.pills:after { 1488 | clear: both; 1489 | } 1490 | .tabs > li,.pills > li { 1491 | float: left; 1492 | } 1493 | .tabs > li > a,.pills > li > a { 1494 | display: block; 1495 | } 1496 | .tabs { 1497 | border-color: #ddd; 1498 | border-style: solid; 1499 | border-width: 0 0 1px; 1500 | } 1501 | .tabs > li { 1502 | position: relative; 1503 | margin-bottom: -1px; 1504 | } 1505 | .tabs > li > a { 1506 | padding: 0 15px; 1507 | margin-right: 2px; 1508 | line-height: 34px; 1509 | border: 1px solid transparent; 1510 | -webkit-border-radius: 4px 4px 0 0; 1511 | -moz-border-radius: 4px 4px 0 0; 1512 | border-radius: 4px 4px 0 0; 1513 | } 1514 | .tabs > li > a:hover { 1515 | text-decoration: none; 1516 | background-color: #eee; 1517 | border-color: #eee #eee #ddd; 1518 | } 1519 | .tabs .active > a,.tabs .active > a:hover { 1520 | color: #808080; 1521 | background-color: #ffffff; 1522 | border: 1px solid #ddd; 1523 | border-bottom-color: transparent; 1524 | cursor: default; 1525 | } 1526 | .tabs .menu-dropdown,.tabs .dropdown-menu { 1527 | top: 35px; 1528 | border-width: 1px; 1529 | -webkit-border-radius: 0 6px 6px 6px; 1530 | -moz-border-radius: 0 6px 6px 6px; 1531 | border-radius: 0 6px 6px 6px; 1532 | } 1533 | .tabs a.menu:after,.tabs .dropdown-toggle:after { 1534 | border-top-color: #999; 1535 | margin-top: 15px; 1536 | margin-left: 5px; 1537 | } 1538 | .tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle { 1539 | border-color: #999; 1540 | } 1541 | .tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after { 1542 | border-top-color: #555; 1543 | } 1544 | .pills a { 1545 | margin: 5px 3px 5px 0; 1546 | padding: 0 15px; 1547 | line-height: 30px; 1548 | text-shadow: 0 1px 1px #ffffff; 1549 | -webkit-border-radius: 15px; 1550 | -moz-border-radius: 15px; 1551 | border-radius: 15px; 1552 | } 1553 | .pills a:hover { 1554 | color: #ffffff; 1555 | text-decoration: none; 1556 | text-shadow: 0 1px 1px rgba(0,0,0,0.25); 1557 | background-color: #00438a; 1558 | } 1559 | .pills .active a { 1560 | color: #ffffff; 1561 | text-shadow: 0 1px 1px rgba(0,0,0,0.25); 1562 | background-color: #0069d6; 1563 | } 1564 | .pills-vertical > li { 1565 | float: none; 1566 | } 1567 | .tab-content > .tab-pane,.pill-content > .pill-pane,.tab-content > div,.pill-content > div { 1568 | display: none; 1569 | } 1570 | .tab-content > .active,.pill-content > .active { 1571 | display: block; 1572 | } 1573 | .breadcrumb { 1574 | padding: 7px 14px; 1575 | margin: 0 0 18px; 1576 | background-color: #f5f5f5; 1577 | background-repeat: repeat-x; 1578 | background-image: -khtml-gradient(linear,left top,left bottom,from(#ffffff),to(#f5f5f5)); 1579 | background-image: -moz-linear-gradient(top,#ffffff,#f5f5f5); 1580 | background-image: -ms-linear-gradient(top,#ffffff,#f5f5f5); 1581 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#f5f5f5)); 1582 | background-image: -webkit-linear-gradient(top,#ffffff,#f5f5f5); 1583 | background-image: -o-linear-gradient(top,#ffffff,#f5f5f5); 1584 | background-image: linear-gradient(top,#ffffff,#f5f5f5); 1585 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f5f5f5',GradientType=0); 1586 | border: 1px solid #ddd; 1587 | -webkit-border-radius: 3px; 1588 | -moz-border-radius: 3px; 1589 | border-radius: 3px; 1590 | -webkit-box-shadow: inset 0 1px 0 #ffffff; 1591 | -moz-box-shadow: inset 0 1px 0 #ffffff; 1592 | box-shadow: inset 0 1px 0 #ffffff; 1593 | } 1594 | .breadcrumb li { 1595 | display: inline; 1596 | text-shadow: 0 1px 0 #ffffff; 1597 | } 1598 | .breadcrumb .divider { 1599 | padding: 0 5px; 1600 | color: #bfbfbf; 1601 | } 1602 | .breadcrumb .active a { 1603 | color: #404040; 1604 | } 1605 | .hero-unit { 1606 | background-color: #f5f5f5; 1607 | margin-bottom: 30px; 1608 | padding: 60px; 1609 | -webkit-border-radius: 6px; 1610 | -moz-border-radius: 6px; 1611 | border-radius: 6px; 1612 | } 1613 | .hero-unit h1 { 1614 | margin-bottom: 0; 1615 | font-size: 60px; 1616 | line-height: 1; 1617 | letter-spacing: -1px; 1618 | } 1619 | .hero-unit p { 1620 | font-size: 18px; 1621 | font-weight: 200; 1622 | line-height: 27px; 1623 | } 1624 | footer { 1625 | margin-top: 17px; 1626 | padding-top: 17px; 1627 | border-top: 1px solid #eee; 1628 | } 1629 | .page-header { 1630 | margin-bottom: 17px; 1631 | border-bottom: 1px solid #ddd; 1632 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5); 1633 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5); 1634 | box-shadow: 0 1px 0 rgba(255,255,255,0.5); 1635 | } 1636 | .page-header h1 { 1637 | margin-bottom: 8px; 1638 | } 1639 | .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover { 1640 | color: #ffffff; 1641 | } 1642 | .btn .close,.alert-message .close { 1643 | font-family: Arial,sans-serif; 1644 | line-height: 18px; 1645 | } 1646 | .btn.danger,.alert-message.danger,.btn.error,.alert-message.error { 1647 | background-color: #c43c35; 1648 | background-repeat: repeat-x; 1649 | background-image: -khtml-gradient(linear,left top,left bottom,from(#ee5f5b),to(#c43c35)); 1650 | background-image: -moz-linear-gradient(top,#ee5f5b,#c43c35); 1651 | background-image: -ms-linear-gradient(top,#ee5f5b,#c43c35); 1652 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ee5f5b),color-stop(100%,#c43c35)); 1653 | background-image: -webkit-linear-gradient(top,#ee5f5b,#c43c35); 1654 | background-image: -o-linear-gradient(top,#ee5f5b,#c43c35); 1655 | background-image: linear-gradient(top,#ee5f5b,#c43c35); 1656 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b',endColorstr='#c43c35',GradientType=0); 1657 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1658 | border-color: #c43c35 #c43c35 #882a25; 1659 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 1660 | } 1661 | .btn.success,.alert-message.success { 1662 | background-color: #57a957; 1663 | background-repeat: repeat-x; 1664 | background-image: -khtml-gradient(linear,left top,left bottom,from(#62c462),to(#57a957)); 1665 | background-image: -moz-linear-gradient(top,#62c462,#57a957); 1666 | background-image: -ms-linear-gradient(top,#62c462,#57a957); 1667 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#62c462),color-stop(100%,#57a957)); 1668 | background-image: -webkit-linear-gradient(top,#62c462,#57a957); 1669 | background-image: -o-linear-gradient(top,#62c462,#57a957); 1670 | background-image: linear-gradient(top,#62c462,#57a957); 1671 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462',endColorstr='#57a957',GradientType=0); 1672 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1673 | border-color: #57a957 #57a957 #3d773d; 1674 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 1675 | } 1676 | .btn.info,.alert-message.info { 1677 | background-color: #339bb9; 1678 | background-repeat: repeat-x; 1679 | background-image: -khtml-gradient(linear,left top,left bottom,from(#5bc0de),to(#339bb9)); 1680 | background-image: -moz-linear-gradient(top,#5bc0de,#339bb9); 1681 | background-image: -ms-linear-gradient(top,#5bc0de,#339bb9); 1682 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5bc0de),color-stop(100%,#339bb9)); 1683 | background-image: -webkit-linear-gradient(top,#5bc0de,#339bb9); 1684 | background-image: -o-linear-gradient(top,#5bc0de,#339bb9); 1685 | background-image: linear-gradient(top,#5bc0de,#339bb9); 1686 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de',endColorstr='#339bb9',GradientType=0); 1687 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1688 | border-color: #339bb9 #339bb9 #22697d; 1689 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 1690 | } 1691 | .btn { 1692 | cursor: pointer; 1693 | display: inline-block; 1694 | background-color: #e6e6e6; 1695 | background-repeat: no-repeat; 1696 | background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),color-stop(25%,#ffffff),to(#e6e6e6)); 1697 | background-image: -webkit-linear-gradient(#ffffff,#ffffff 25%,#e6e6e6); 1698 | background-image: -moz-linear-gradient(top,#ffffff,#ffffff 25%,#e6e6e6); 1699 | background-image: -ms-linear-gradient(#ffffff,#ffffff 25%,#e6e6e6); 1700 | background-image: -o-linear-gradient(#ffffff,#ffffff 25%,#e6e6e6); 1701 | background-image: linear-gradient(#ffffff,#ffffff 25%,#e6e6e6); 1702 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0); 1703 | padding: 5px 14px 6px; 1704 | text-shadow: 0 1px 1px rgba(255,255,255,0.75); 1705 | color: #333; 1706 | font-size: 13px; 1707 | line-height: normal; 1708 | border: 1px solid #ccc; 1709 | border-bottom-color: #bbb; 1710 | -webkit-border-radius: 4px; 1711 | -moz-border-radius: 4px; 1712 | border-radius: 4px; 1713 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 1714 | -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 1715 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); 1716 | -webkit-transition: 0.1s linear all; 1717 | -moz-transition: 0.1s linear all; 1718 | -ms-transition: 0.1s linear all; 1719 | -o-transition: 0.1s linear all; 1720 | transition: 0.1s linear all; 1721 | } 1722 | .btn:hover { 1723 | background-position: 0 -15px; 1724 | color: #333; 1725 | text-decoration: none; 1726 | } 1727 | .btn:focus { 1728 | outline: 1px dotted #666; 1729 | } 1730 | .btn.primary { 1731 | color: #ffffff; 1732 | background-color: #0064cd; 1733 | background-repeat: repeat-x; 1734 | background-image: -khtml-gradient(linear,left top,left bottom,from(#049cdb),to(#0064cd)); 1735 | background-image: -moz-linear-gradient(top,#049cdb,#0064cd); 1736 | background-image: -ms-linear-gradient(top,#049cdb,#0064cd); 1737 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#049cdb),color-stop(100%,#0064cd)); 1738 | background-image: -webkit-linear-gradient(top,#049cdb,#0064cd); 1739 | background-image: -o-linear-gradient(top,#049cdb,#0064cd); 1740 | background-image: linear-gradient(top,#049cdb,#0064cd); 1741 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb',endColorstr='#0064cd',GradientType=0); 1742 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1743 | border-color: #0064cd #0064cd #003f81; 1744 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 1745 | } 1746 | .btn.active,.btn:active { 1747 | -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.05); 1748 | -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.05); 1749 | box-shadow: inset 0 2px 4px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.05); 1750 | } 1751 | .btn.disabled { 1752 | cursor: default; 1753 | background-image: none; 1754 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 1755 | filter: alpha(opacity=65); 1756 | -khtml-opacity: 0.65; 1757 | -moz-opacity: 0.65; 1758 | opacity: 0.65; 1759 | -webkit-box-shadow: none; 1760 | -moz-box-shadow: none; 1761 | box-shadow: none; 1762 | } 1763 | .btn[disabled] { 1764 | cursor: default; 1765 | background-image: none; 1766 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 1767 | filter: alpha(opacity=65); 1768 | -khtml-opacity: 0.65; 1769 | -moz-opacity: 0.65; 1770 | opacity: 0.65; 1771 | -webkit-box-shadow: none; 1772 | -moz-box-shadow: none; 1773 | box-shadow: none; 1774 | } 1775 | .btn.large { 1776 | font-size: 15px; 1777 | line-height: normal; 1778 | padding: 9px 14px 9px; 1779 | -webkit-border-radius: 6px; 1780 | -moz-border-radius: 6px; 1781 | border-radius: 6px; 1782 | } 1783 | .btn.small { 1784 | padding: 7px 9px 7px; 1785 | font-size: 11px; 1786 | } 1787 | :root .alert-message,:root .btn { 1788 | border-radius: 0 \0; 1789 | } 1790 | button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner { 1791 | padding: 0; 1792 | border: 0; 1793 | } 1794 | .close { 1795 | float: right; 1796 | color: #000000; 1797 | font-size: 20px; 1798 | font-weight: bold; 1799 | line-height: 13.5px; 1800 | text-shadow: 0 1px 0 #ffffff; 1801 | filter: alpha(opacity=25); 1802 | -khtml-opacity: 0.25; 1803 | -moz-opacity: 0.25; 1804 | opacity: 0.25; 1805 | } 1806 | .close:hover { 1807 | color: #000000; 1808 | text-decoration: none; 1809 | filter: alpha(opacity=40); 1810 | -khtml-opacity: 0.4; 1811 | -moz-opacity: 0.4; 1812 | opacity: 0.4; 1813 | } 1814 | .alert-message { 1815 | position: relative; 1816 | padding: 7px 15px; 1817 | margin-bottom: 18px; 1818 | color: #404040; 1819 | background-color: #eedc94; 1820 | background-repeat: repeat-x; 1821 | background-image: -khtml-gradient(linear,left top,left bottom,from(#fceec1),to(#eedc94)); 1822 | background-image: -moz-linear-gradient(top,#fceec1,#eedc94); 1823 | background-image: -ms-linear-gradient(top,#fceec1,#eedc94); 1824 | background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fceec1),color-stop(100%,#eedc94)); 1825 | background-image: -webkit-linear-gradient(top,#fceec1,#eedc94); 1826 | background-image: -o-linear-gradient(top,#fceec1,#eedc94); 1827 | background-image: linear-gradient(top,#fceec1,#eedc94); 1828 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1',endColorstr='#eedc94',GradientType=0); 1829 | text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 1830 | border-color: #eedc94 #eedc94 #e4c652; 1831 | border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 1832 | text-shadow: 0 1px 0 rgba(255,255,255,0.5); 1833 | border-width: 1px; 1834 | border-style: solid; 1835 | -webkit-border-radius: 4px; 1836 | -moz-border-radius: 4px; 1837 | border-radius: 4px; 1838 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); 1839 | -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); 1840 | box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); 1841 | } 1842 | .alert-message .close { 1843 | margin-top: 1px; 1844 | *margin-top: 0; 1845 | } 1846 | .alert-message a { 1847 | font-weight: bold; 1848 | color: #404040; 1849 | } 1850 | .alert-message.danger p a,.alert-message.error p a,.alert-message.success p a,.alert-message.info p a { 1851 | color: #ffffff; 1852 | } 1853 | .alert-message h5 { 1854 | line-height: 18px; 1855 | } 1856 | .alert-message p { 1857 | margin-bottom: 0; 1858 | } 1859 | .alert-message div { 1860 | margin-top: 5px; 1861 | margin-bottom: 2px; 1862 | line-height: 28px; 1863 | } 1864 | .alert-message .btn { 1865 | -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.25); 1866 | -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.25); 1867 | box-shadow: 0 1px 0 rgba(255,255,255,0.25); 1868 | } 1869 | .alert-message.block-message { 1870 | background-image: none; 1871 | background-color: #fdf5d9; 1872 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 1873 | padding: 14px; 1874 | border-color: #fceec1; 1875 | -webkit-box-shadow: none; 1876 | -moz-box-shadow: none; 1877 | box-shadow: none; 1878 | } 1879 | .alert-message.block-message ul,.alert-message.block-message p { 1880 | margin-right: 30px; 1881 | } 1882 | .alert-message.block-message ul { 1883 | margin-bottom: 0; 1884 | } 1885 | .alert-message.block-message li { 1886 | color: #404040; 1887 | } 1888 | .alert-message.block-message .alert-actions { 1889 | margin-top: 5px; 1890 | } 1891 | .alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info { 1892 | color: #404040; 1893 | text-shadow: 0 1px 0 rgba(255,255,255,0.5); 1894 | } 1895 | .alert-message.block-message.error { 1896 | background-color: #fddfde; 1897 | border-color: #fbc7c6; 1898 | } 1899 | .alert-message.block-message.success { 1900 | background-color: #d1eed1; 1901 | border-color: #bfe7bf; 1902 | } 1903 | .alert-message.block-message.info { 1904 | background-color: #ddf4fb; 1905 | border-color: #c6edf9; 1906 | } 1907 | .alert-message.block-message.danger p a,.alert-message.block-message.error p a,.alert-message.block-message.success p a,.alert-message.block-message.info p a { 1908 | color: #404040; 1909 | } 1910 | .pagination { 1911 | height: 36px; 1912 | margin: 18px 0; 1913 | } 1914 | .pagination ul { 1915 | float: left; 1916 | margin: 0; 1917 | border: 1px solid #ddd; 1918 | border: 1px solid rgba(0,0,0,0.15); 1919 | -webkit-border-radius: 3px; 1920 | -moz-border-radius: 3px; 1921 | border-radius: 3px; 1922 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); 1923 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05); 1924 | box-shadow: 0 1px 2px rgba(0,0,0,0.05); 1925 | } 1926 | .pagination li { 1927 | display: inline; 1928 | } 1929 | .pagination a { 1930 | float: left; 1931 | padding: 0 14px; 1932 | line-height: 34px; 1933 | border-right: 1px solid; 1934 | border-right-color: #ddd; 1935 | border-right-color: rgba(0,0,0,0.15); 1936 | *border-right-color: #ddd; 1937 | /* IE6-7 */ 1938 | 1939 | text-decoration: none; 1940 | } 1941 | .pagination a:hover,.pagination .active a { 1942 | background-color: #c7eefe; 1943 | } 1944 | .pagination .disabled a,.pagination .disabled a:hover { 1945 | background-color: transparent; 1946 | color: #bfbfbf; 1947 | } 1948 | .pagination .next a { 1949 | border: 0; 1950 | } 1951 | .well { 1952 | background-color: #f5f5f5; 1953 | margin-bottom: 20px; 1954 | padding: 19px; 1955 | min-height: 20px; 1956 | border: 1px solid #eee; 1957 | border: 1px solid rgba(0,0,0,0.05); 1958 | -webkit-border-radius: 4px; 1959 | -moz-border-radius: 4px; 1960 | border-radius: 4px; 1961 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 1962 | -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 1963 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 1964 | } 1965 | .well blockquote { 1966 | border-color: #ddd; 1967 | border-color: rgba(0,0,0,0.15); 1968 | } 1969 | .modal-backdrop { 1970 | background-color: #000000; 1971 | position: fixed; 1972 | top: 0; 1973 | left: 0; 1974 | right: 0; 1975 | bottom: 0; 1976 | z-index: 10000; 1977 | } 1978 | .modal-backdrop.fade { 1979 | opacity: 0; 1980 | } 1981 | .modal-backdrop,.modal-backdrop.fade.in { 1982 | filter: alpha(opacity=80); 1983 | -khtml-opacity: 0.8; 1984 | -moz-opacity: 0.8; 1985 | opacity: 0.8; 1986 | } 1987 | .modal { 1988 | position: fixed; 1989 | top: 50%; 1990 | left: 50%; 1991 | z-index: 11000; 1992 | max-height: 500px; 1993 | overflow: auto; 1994 | width: 560px; 1995 | margin: -250px 0 0 -280px; 1996 | background-color: #ffffff; 1997 | border: 1px solid #999; 1998 | border: 1px solid rgba(0,0,0,0.3); 1999 | *border: 1px solid #999; 2000 | /* IE6-7 */ 2001 | 2002 | -webkit-border-radius: 6px; 2003 | -moz-border-radius: 6px; 2004 | border-radius: 6px; 2005 | -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2006 | -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2007 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2008 | -webkit-background-clip: padding-box; 2009 | -moz-background-clip: padding-box; 2010 | background-clip: padding-box; 2011 | } 2012 | .modal .close { 2013 | margin-top: 7px; 2014 | } 2015 | .modal.fade { 2016 | -webkit-transition: opacity .3s linear,top .3s ease-out; 2017 | -moz-transition: opacity .3s linear,top .3s ease-out; 2018 | -ms-transition: opacity .3s linear,top .3s ease-out; 2019 | -o-transition: opacity .3s linear,top .3s ease-out; 2020 | transition: opacity .3s linear,top .3s ease-out; 2021 | top: -25%; 2022 | } 2023 | .modal.fade.in { 2024 | top: 50%; 2025 | } 2026 | .modal-header { 2027 | border-bottom: 1px solid #eee; 2028 | padding: 5px 15px; 2029 | } 2030 | .modal-body { 2031 | padding: 15px; 2032 | } 2033 | .modal-body form { 2034 | margin-bottom: 0; 2035 | } 2036 | .modal-footer { 2037 | background-color: #f5f5f5; 2038 | padding: 14px 15px 15px; 2039 | border-top: 1px solid #ddd; 2040 | -webkit-border-radius: 0 0 6px 6px; 2041 | -moz-border-radius: 0 0 6px 6px; 2042 | border-radius: 0 0 6px 6px; 2043 | -webkit-box-shadow: inset 0 1px 0 #ffffff; 2044 | -moz-box-shadow: inset 0 1px 0 #ffffff; 2045 | box-shadow: inset 0 1px 0 #ffffff; 2046 | zoom: 1; 2047 | margin-bottom: 0; 2048 | } 2049 | .modal-footer:before,.modal-footer:after { 2050 | display: table; 2051 | content: ""; 2052 | zoom: 1; 2053 | } 2054 | .modal-footer:after { 2055 | clear: both; 2056 | } 2057 | .modal-footer .btn { 2058 | float: right; 2059 | margin-left: 5px; 2060 | } 2061 | .modal .popover,.modal .twipsy { 2062 | z-index: 12000; 2063 | } 2064 | .twipsy { 2065 | display: block; 2066 | position: absolute; 2067 | visibility: visible; 2068 | padding: 5px; 2069 | font-size: 11px; 2070 | z-index: 1000; 2071 | filter: alpha(opacity=80); 2072 | -khtml-opacity: 0.8; 2073 | -moz-opacity: 0.8; 2074 | opacity: 0.8; 2075 | } 2076 | .twipsy.fade.in { 2077 | filter: alpha(opacity=80); 2078 | -khtml-opacity: 0.8; 2079 | -moz-opacity: 0.8; 2080 | opacity: 0.8; 2081 | } 2082 | .twipsy.above .twipsy-arrow { 2083 | bottom: 0; 2084 | left: 50%; 2085 | margin-left: -5px; 2086 | border-left: 5px solid transparent; 2087 | border-right: 5px solid transparent; 2088 | border-top: 5px solid #000000; 2089 | } 2090 | .twipsy.left .twipsy-arrow { 2091 | top: 50%; 2092 | right: 0; 2093 | margin-top: -5px; 2094 | border-top: 5px solid transparent; 2095 | border-bottom: 5px solid transparent; 2096 | border-left: 5px solid #000000; 2097 | } 2098 | .twipsy.below .twipsy-arrow { 2099 | top: 0; 2100 | left: 50%; 2101 | margin-left: -5px; 2102 | border-left: 5px solid transparent; 2103 | border-right: 5px solid transparent; 2104 | border-bottom: 5px solid #000000; 2105 | } 2106 | .twipsy.right .twipsy-arrow { 2107 | top: 50%; 2108 | left: 0; 2109 | margin-top: -5px; 2110 | border-top: 5px solid transparent; 2111 | border-bottom: 5px solid transparent; 2112 | border-right: 5px solid #000000; 2113 | } 2114 | .twipsy-inner { 2115 | padding: 3px 8px; 2116 | background-color: #000000; 2117 | color: white; 2118 | text-align: center; 2119 | max-width: 200px; 2120 | text-decoration: none; 2121 | -webkit-border-radius: 4px; 2122 | -moz-border-radius: 4px; 2123 | border-radius: 4px; 2124 | } 2125 | .twipsy-arrow { 2126 | position: absolute; 2127 | width: 0; 2128 | height: 0; 2129 | } 2130 | .popover { 2131 | position: absolute; 2132 | top: 0; 2133 | left: 0; 2134 | z-index: 1000; 2135 | padding: 5px; 2136 | display: none; 2137 | } 2138 | .popover.above .arrow { 2139 | bottom: 0; 2140 | left: 50%; 2141 | margin-left: -5px; 2142 | border-left: 5px solid transparent; 2143 | border-right: 5px solid transparent; 2144 | border-top: 5px solid #000000; 2145 | } 2146 | .popover.right .arrow { 2147 | top: 50%; 2148 | left: 0; 2149 | margin-top: -5px; 2150 | border-top: 5px solid transparent; 2151 | border-bottom: 5px solid transparent; 2152 | border-right: 5px solid #000000; 2153 | } 2154 | .popover.below .arrow { 2155 | top: 0; 2156 | left: 50%; 2157 | margin-left: -5px; 2158 | border-left: 5px solid transparent; 2159 | border-right: 5px solid transparent; 2160 | border-bottom: 5px solid #000000; 2161 | } 2162 | .popover.left .arrow { 2163 | top: 50%; 2164 | right: 0; 2165 | margin-top: -5px; 2166 | border-top: 5px solid transparent; 2167 | border-bottom: 5px solid transparent; 2168 | border-left: 5px solid #000000; 2169 | } 2170 | .popover .arrow { 2171 | position: absolute; 2172 | width: 0; 2173 | height: 0; 2174 | } 2175 | .popover .inner { 2176 | background: #000000; 2177 | background: rgba(0,0,0,0.8); 2178 | padding: 3px; 2179 | overflow: hidden; 2180 | width: 280px; 2181 | -webkit-border-radius: 6px; 2182 | -moz-border-radius: 6px; 2183 | border-radius: 6px; 2184 | -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2185 | -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2186 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); 2187 | } 2188 | .popover .title { 2189 | background-color: #f5f5f5; 2190 | padding: 9px 15px; 2191 | line-height: 1; 2192 | -webkit-border-radius: 3px 3px 0 0; 2193 | -moz-border-radius: 3px 3px 0 0; 2194 | border-radius: 3px 3px 0 0; 2195 | border-bottom: 1px solid #eee; 2196 | } 2197 | .popover .content { 2198 | background-color: #ffffff; 2199 | padding: 14px; 2200 | -webkit-border-radius: 0 0 3px 3px; 2201 | -moz-border-radius: 0 0 3px 3px; 2202 | border-radius: 0 0 3px 3px; 2203 | -webkit-background-clip: padding-box; 2204 | -moz-background-clip: padding-box; 2205 | background-clip: padding-box; 2206 | } 2207 | .popover .content p,.popover .content ul,.popover .content ol { 2208 | margin-bottom: 0; 2209 | } 2210 | .fade { 2211 | -webkit-transition: opacity 0.15s linear; 2212 | -moz-transition: opacity 0.15s linear; 2213 | -ms-transition: opacity 0.15s linear; 2214 | -o-transition: opacity 0.15s linear; 2215 | transition: opacity 0.15s linear; 2216 | opacity: 0; 2217 | } 2218 | .fade.in { 2219 | opacity: 1; 2220 | } 2221 | .label { 2222 | padding: 1px 3px 2px; 2223 | font-size: 9.75px; 2224 | font-weight: bold; 2225 | color: #ffffff; 2226 | text-transform: uppercase; 2227 | white-space: nowrap; 2228 | background-color: #bfbfbf; 2229 | -webkit-border-radius: 3px; 2230 | -moz-border-radius: 3px; 2231 | border-radius: 3px; 2232 | text-shadow: none; 2233 | } 2234 | .label.important { 2235 | background-color: #c43c35; 2236 | } 2237 | .label.warning { 2238 | background-color: #f89406; 2239 | } 2240 | .label.success { 2241 | background-color: #46a546; 2242 | } 2243 | .label.notice { 2244 | background-color: #62cffc; 2245 | } 2246 | .media-grid { 2247 | margin-left: -20px; 2248 | margin-bottom: 0; 2249 | zoom: 1; 2250 | } 2251 | .media-grid:before,.media-grid:after { 2252 | display: table; 2253 | content: ""; 2254 | zoom: 1; 2255 | } 2256 | .media-grid:after { 2257 | clear: both; 2258 | } 2259 | .media-grid li { 2260 | display: inline; 2261 | } 2262 | .media-grid a { 2263 | float: left; 2264 | padding: 4px; 2265 | margin: 0 0 18px 20px; 2266 | border: 1px solid #ddd; 2267 | -webkit-border-radius: 4px; 2268 | -moz-border-radius: 4px; 2269 | border-radius: 4px; 2270 | -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.075); 2271 | -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.075); 2272 | box-shadow: 0 1px 1px rgba(0,0,0,0.075); 2273 | } 2274 | .media-grid a img { 2275 | display: block; 2276 | } 2277 | .media-grid a:hover { 2278 | border-color: #0069d6; 2279 | -webkit-box-shadow: 0 1px 4px rgba(0,105,214,0.25); 2280 | -moz-box-shadow: 0 1px 4px rgba(0,105,214,0.25); 2281 | box-shadow: 0 1px 4px rgba(0,105,214,0.25); 2282 | } --------------------------------------------------------------------------------