├── .gitattributes ├── app ├── .buildignore ├── robots.txt ├── styles │ ├── main.scss │ ├── main.css │ ├── compass_twitter_bootstrap │ │ ├── _layouts.scss │ │ ├── _component-animations.scss │ │ ├── _utilities.scss │ │ ├── _grid.scss │ │ ├── _breadcrumbs.scss │ │ ├── _responsive-768px-979px.scss │ │ ├── _hero-unit.scss │ │ ├── _responsive-1200px-min.scss │ │ ├── _wells.scss │ │ ├── _close.scss │ │ ├── _accordion.scss │ │ ├── _pager.scss │ │ ├── _media.scss │ │ ├── _scaffolding.scss │ │ ├── _responsive.scss │ │ ├── _responsive-utilities.scss │ │ ├── _thumbnails.scss │ │ ├── _code.scss │ │ ├── _alerts.scss │ │ ├── _tooltip.scss │ │ ├── _labels-badges.scss │ │ ├── _modals.scss │ │ ├── _carousel.scss │ │ ├── _pagination.scss │ │ ├── _progress-bars.scss │ │ ├── _popovers.scss │ │ ├── _responsive-767px-max.scss │ │ ├── _responsive-navbar.scss │ │ ├── _reset.scss │ │ ├── _type.scss │ │ ├── _buttons.scss │ │ ├── _dropdowns.scss │ │ ├── _button-groups.scss │ │ ├── _tables.scss │ │ ├── _navs.scss │ │ ├── _sprites.scss │ │ ├── _variables.scss │ │ ├── _navbar.scss │ │ ├── _forms.scss │ │ └── _font-awesome.scss │ ├── _compass_twitter_bootstrap_responsive.scss │ ├── _compass_twitter_bootstrap_awesome.scss │ └── _compass_twitter_bootstrap.scss ├── favicon.ico ├── scripts │ ├── controllers │ │ └── main.js │ └── app.js ├── views │ └── main.html ├── index.html └── 404.html ├── .gitignore ├── .bowerrc ├── test ├── runner.html └── spec │ └── controllers │ └── main.js ├── bower.json ├── .editorconfig ├── .jshintrc ├── package.json ├── karma-e2e.conf.js ├── karma.conf.js └── Gruntfile.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /app/.buildignore: -------------------------------------------------------------------------------- 1 | *.coffee -------------------------------------------------------------------------------- /app/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org 2 | 3 | User-agent: * 4 | -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import "compass_twitter_bootstrap"; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .tmp 4 | .sass-cache 5 | app/components 6 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/components", 3 | "json": "bower.json" 4 | } 5 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradbarrow/sp-yeoman/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /app/styles/main.css: -------------------------------------------------------------------------------- 1 | /* Will be compiled down to a single stylesheet with your sass files */ -------------------------------------------------------------------------------- /test/runner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | End2end Test Runner 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /app/scripts/controllers/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('testApp') 4 | .controller('MainCtrl', function ($scope) { 5 | $scope.awesomeThings = [ 6 | 'HTML5 Boilerplate', 7 | 'AngularJS', 8 | 'Karma', 9 | 'SitePoint' 10 | ]; 11 | }); 12 | -------------------------------------------------------------------------------- /app/views/main.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /app/scripts/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('testApp', ['ui.bootstrap']) 4 | .config(function ($routeProvider) { 5 | $routeProvider 6 | .when('/', { 7 | templateUrl: 'views/main.html', 8 | controller: 'MainCtrl' 9 | }) 10 | .otherwise({ 11 | redirectTo: '/' 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "angular": "~1.0.5", 6 | "json3": "~3.2.4", 7 | "es5-shim": "~2.0.8", 8 | "angular-resource": "~1.0.5", 9 | "angular-bootstrap": "~0.4.0" 10 | }, 11 | "devDependencies": { 12 | "angular-mocks": "~1.0.5", 13 | "angular-scenario": "~1.0.5" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_layouts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Layouts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container (centered, fixed-width layouts) 7 | .container { 8 | @include ctb-container-fixed(); 9 | } 10 | 11 | // Fluid layouts (left aligned, with sidebar, min- & max-width content) 12 | .container-fluid { 13 | padding-right: $gridGutterWidth; 14 | padding-left: $gridGutterWidth; 15 | @include ctb-clearfix(); 16 | } -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | 6 | .fade { 7 | opacity: 0; 8 | @include ctb-transition(opacity .15s linear); 9 | &.in { 10 | opacity: 1; 11 | } 12 | } 13 | 14 | .collapse { 15 | position: relative; 16 | height: 0; 17 | overflow: hidden; 18 | @include ctb-transition(height .35s ease); 19 | &.in { 20 | height: auto; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "es5": true, 5 | "esnext": true, 6 | "bitwise": true, 7 | "camelcase": true, 8 | "curly": true, 9 | "eqeqeq": true, 10 | "immed": true, 11 | "indent": 2, 12 | "latedef": true, 13 | "newcap": true, 14 | "noarg": true, 15 | "quotmark": "single", 16 | "regexp": true, 17 | "undef": true, 18 | "unused": true, 19 | "strict": true, 20 | "trailing": true, 21 | "smarttabs": true, 22 | "globals": { 23 | "angular": false 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Quick floats 7 | .pull-right { 8 | float: right; 9 | } 10 | .pull-left { 11 | float: left; 12 | } 13 | .clearfix { 14 | @include ctb-clearfix(); 15 | } 16 | // Toggling content 17 | .hide { 18 | display: none; 19 | } 20 | .show { 21 | display: block; 22 | } 23 | 24 | // Visibility 25 | .invisible { 26 | visibility: hidden; 27 | } 28 | 29 | // For Affix plugin 30 | .affix { 31 | position: fixed; 32 | } 33 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Fixed (940px) 7 | @include ctb-grid-core($gridColumnWidth, $gridGutterWidth); 8 | 9 | // Fluid (940px) 10 | @include ctb-grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth); 11 | 12 | // Reset utility classes due to specificity 13 | [class*="span"].hide, 14 | .row-fluid [class*="span"].hide { 15 | display: none; 16 | } 17 | 18 | [class*="span"].pull-right, 19 | .row-fluid [class*="span"].pull-right { 20 | float: right; 21 | } 22 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: 8px 15px; 8 | margin: 0 0 $baseLineHeight; 9 | list-style: none; 10 | background-color: #f5f5f5; 11 | @include ctb-border-radius($baseBorderRadius); 12 | > li { 13 | display: inline-block; 14 | @include ctb-ie7-inline-block(); 15 | text-shadow: 0 1px 0 $white; 16 | > .divider { 17 | padding: 0 5px; 18 | color: #ccc; 19 | } 20 | } 21 | > .active { 22 | color: $grayLight; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive-768px-979px.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Tablet to desktop 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (min-width: 768px) and (max-width: 979px) { 7 | 8 | // Fixed grid 9 | @include ctb-grid-core($gridColumnWidth768, $gridGutterWidth768); 10 | 11 | // Fluid grid 12 | @include ctb-grid-fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); 13 | 14 | // Input grid 15 | @include ctb-grid-input($gridColumnWidth768, $gridGutterWidth768); 16 | 17 | // No need to reset .thumbnails here since it's the same $gridGutterWidth 18 | 19 | } 20 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_hero-unit.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Hero unit 3 | // -------------------------------------------------- 4 | 5 | 6 | .hero-unit { 7 | padding: 60px; 8 | margin-bottom: 30px; 9 | font-size: 18px; 10 | font-weight: 200; 11 | line-height: $baseLineHeight * 1.5; 12 | color: $heroUnitLeadColor; 13 | background-color: $heroUnitBackground; 14 | @include ctb-border-radius(6px); 15 | h1 { 16 | margin-bottom: 0; 17 | font-size: 60px; 18 | line-height: 1; 19 | color: $heroUnitHeadingColor; 20 | letter-spacing: -1px; 21 | } 22 | li { 23 | line-height: $baseLineHeight * 1.5; // Reset since we specify in type.less 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /test/spec/controllers/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | describe('Controller: MainCtrl', function () { 4 | 5 | // load the controller's module 6 | beforeEach(module('testApp')); 7 | // load the BootstrapUI module 8 | beforeEach(module('ui.bootstrap')); 9 | 10 | var MainCtrl, 11 | scope; 12 | 13 | // Initialize the controller and a mock scope 14 | beforeEach(inject(function ($controller, $rootScope) { 15 | scope = $rootScope.$new(); 16 | MainCtrl = $controller('MainCtrl', { 17 | $scope: scope 18 | }); 19 | })); 20 | 21 | it('should attach a list of awesomeThings to the scope', function () { 22 | expect(scope.awesomeThings.length).toBe(4); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive-1200px-min.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Large desktop and up 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (min-width: 1200px) { 7 | 8 | // Fixed grid 9 | @include ctb-grid-core($gridColumnWidth1200, $gridGutterWidth1200); 10 | 11 | // Fluid grid 12 | @include ctb-grid-fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); 13 | 14 | // Input grid 15 | @include ctb-grid-input($gridColumnWidth1200, $gridGutterWidth1200); 16 | 17 | // Thumbnails 18 | .thumbnails { 19 | margin-left: -$gridGutterWidth1200; 20 | } 21 | .thumbnails > li { 22 | margin-left: $gridGutterWidth1200; 23 | } 24 | .row-fluid .thumbnails { 25 | margin-left: 0; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_wells.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: $wellBackground; 12 | border: 1px solid darken($wellBackground, 7%); 13 | @include ctb-border-radius($baseBorderRadius); 14 | @include ctb-box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-large { 23 | padding: 24px; 24 | @include ctb-border-radius($borderRadiusLarge); 25 | } 26 | .well-small { 27 | padding: 9px; 28 | @include ctb-border-radius($borderRadiusSmall); 29 | } 30 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: 20px; 9 | font-weight: bold; 10 | line-height: $baseLineHeight; 11 | color: $black; 12 | text-shadow: 0 1px 0 rgba(255,255,255,1); 13 | @include ctb-opacity(20); 14 | &:hover { 15 | color: $black; 16 | text-decoration: none; 17 | cursor: pointer; 18 | @include ctb-opacity(40); 19 | } 20 | } 21 | 22 | // Additional properties for button version 23 | // iOS requires the button element instead of an anchor tag. 24 | // If you want the anchor version, it requires `href="#"`. 25 | button.close { 26 | padding: 0; 27 | cursor: pointer; 28 | background: transparent; 29 | border: 0; 30 | -webkit-appearance: none; 31 | } -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_accordion.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Accordion 3 | // -------------------------------------------------- 4 | 5 | 6 | // Parent container 7 | .accordion { 8 | margin-bottom: $baseLineHeight; 9 | } 10 | 11 | // Group == heading + body 12 | .accordion-group { 13 | margin-bottom: 2px; 14 | border: 1px solid #e5e5e5; 15 | @include ctb-border-radius($baseBorderRadius); 16 | } 17 | .accordion-heading { 18 | border-bottom: 0; 19 | } 20 | .accordion-heading .accordion-toggle { 21 | display: block; 22 | padding: 8px 15px; 23 | } 24 | 25 | // General toggle styles 26 | .accordion-toggle { 27 | cursor: pointer; 28 | } 29 | 30 | // Inner needs the styles because you can't animate properly with any styles on the element 31 | .accordion-inner { 32 | padding: 9px 15px; 33 | border-top: 1px solid #e5e5e5; 34 | } 35 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_pager.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | margin: $baseLineHeight 0; 8 | list-style: none; 9 | text-align: center; 10 | @include ctb-clearfix(); 11 | } 12 | .pager li { 13 | display: inline; 14 | } 15 | .pager li > a, 16 | .pager li > span { 17 | display: inline-block; 18 | padding: 5px 14px; 19 | background-color: #fff; 20 | border: 1px solid #ddd; 21 | @include ctb-border-radius(15px); 22 | } 23 | .pager li > a:hover { 24 | text-decoration: none; 25 | background-color: #f5f5f5; 26 | } 27 | .pager .next > a, 28 | .pager .next > span { 29 | float: right; 30 | } 31 | .pager .previous > a, 32 | .pager .previous > span { 33 | float: left; 34 | } 35 | .pager .disabled > a, 36 | .pager .disabled > a:hover, 37 | .pager .disabled > span { 38 | color: $grayLight; 39 | background-color: #fff; 40 | cursor: default; 41 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "0.0.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "grunt": "~0.4.1", 7 | "grunt-contrib-copy": "~0.4.0", 8 | "grunt-contrib-concat": "~0.1.3", 9 | "grunt-contrib-coffee": "~0.6.4", 10 | "grunt-contrib-uglify": "~0.2.0", 11 | "grunt-contrib-compass": "~0.1.3", 12 | "grunt-contrib-jshint": "~0.3.0", 13 | "grunt-contrib-cssmin": "~0.5.0", 14 | "grunt-contrib-connect": "~0.2.0", 15 | "grunt-contrib-clean": "~0.4.0", 16 | "grunt-contrib-htmlmin": "~0.1.1", 17 | "grunt-contrib-imagemin": "~0.1.2", 18 | "grunt-contrib-livereload": "~0.1.2", 19 | "grunt-bower-requirejs": "~0.4.1", 20 | "grunt-usemin": "~0.1.10", 21 | "grunt-regarde": "~0.1.1", 22 | "grunt-rev": "~0.1.0", 23 | "grunt-karma": "~0.3.0", 24 | "grunt-open": "~0.2.0", 25 | "matchdep": "~0.1.1", 26 | "grunt-google-cdn": "~0.1.1", 27 | "grunt-ngmin": "~0.0.2" 28 | }, 29 | "engines": { 30 | "node": ">=0.8.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | *overflow: visible; 14 | zoom: 1; 15 | } 16 | 17 | // Proper spacing between instances of .media 18 | .media, 19 | .media .media { 20 | margin-top: 15px; 21 | } 22 | .media:first-child { 23 | margin-top: 0; 24 | } 25 | 26 | // For images and videos, set to block 27 | .media-object { 28 | display: block; 29 | } 30 | 31 | // Reset margins on headings for tighter default spacing 32 | .media-heading { 33 | margin: 0 0 5px; 34 | } 35 | 36 | 37 | // Media image alignment 38 | // ------------------------- 39 | 40 | .media .pull-left { 41 | margin-right: 10px; 42 | } 43 | .media .pull-right { 44 | margin-left: 10px; 45 | } 46 | 47 | 48 | // Media list variation 49 | // ------------------------- 50 | 51 | // Undo default ul/ol styles 52 | .media-list { 53 | margin-left: 0; 54 | list-style: none; 55 | } 56 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // -------------------------------------------------- 4 | 5 | 6 | // Body reset 7 | // ------------------------- 8 | 9 | body { 10 | margin: 0; 11 | font-family: $baseFontFamily; 12 | font-size: $baseFontSize; 13 | line-height: $baseLineHeight; 14 | color: $textColor; 15 | background-color: $bodyBackground; 16 | } 17 | 18 | 19 | // Links 20 | // ------------------------- 21 | 22 | a { 23 | color: $linkColor; 24 | text-decoration: none; 25 | } 26 | a:hover { 27 | color: $linkColorHover; 28 | text-decoration: underline; 29 | } 30 | 31 | 32 | // Images 33 | // ------------------------- 34 | 35 | // Rounded corners 36 | .img-rounded { 37 | @include ctb-border-radius(6px); 38 | } 39 | 40 | // Add polaroid-esque trim 41 | .img-polaroid { 42 | padding: 4px; 43 | background-color: #fff; 44 | border: 1px solid #ccc; 45 | border: 1px solid rgba(0,0,0,.2); 46 | @include ctb-box-shadow(0 1px 3px rgba(0,0,0,.1)); 47 | } 48 | 49 | // Perfect circle 50 | .img-circle { 51 | @include ctb-border-radius(500px); // crank the border-radius so it works with most reasonably sized images 52 | } 53 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.1.0 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | 11 | 12 | // responsive.scss 13 | // For phone and tablet devices 14 | // ------------------------------------------------------------- 15 | 16 | 17 | // REPEAT VARIABLES & MIXINS 18 | // ------------------------- 19 | // Required since we compile the responsive stuff separately 20 | 21 | @import "variables"; // Modify this for custom colors, font-sizes, etc 22 | @import "mixins"; 23 | 24 | 25 | // RESPONSIVE CLASSES 26 | // ------------------ 27 | 28 | @import "responsive-utilities"; 29 | 30 | 31 | // MEDIA QUERIES 32 | // ------------------ 33 | 34 | // Large desktops 35 | @import "responsive-1200px-min"; 36 | 37 | // Tablets to regular desktops 38 | @import "responsive-768px-979px"; 39 | 40 | // Phones to portrait tablets and narrow desktops 41 | @import "responsive-767px-max"; 42 | 43 | 44 | // RESPONSIVE NAVBAR 45 | // ------------------ 46 | 47 | // From 979px and below, show a button to toggle navbar contents 48 | @import "responsive-navbar"; 49 | -------------------------------------------------------------------------------- /karma-e2e.conf.js: -------------------------------------------------------------------------------- 1 | // Karma E2E configuration 2 | 3 | // base path, that will be used to resolve files and exclude 4 | basePath = ''; 5 | 6 | // list of files / patterns to load in the browser 7 | files = [ 8 | ANGULAR_SCENARIO, 9 | ANGULAR_SCENARIO_ADAPTER, 10 | 'test/e2e/**/*.js' 11 | ]; 12 | 13 | // list of files to exclude 14 | exclude = []; 15 | 16 | // test results reporter to use 17 | // possible values: dots || progress || growl 18 | reporters = ['progress']; 19 | 20 | // web server port 21 | port = 8080; 22 | 23 | // cli runner port 24 | runnerPort = 9100; 25 | 26 | // enable / disable colors in the output (reporters and logs) 27 | colors = true; 28 | 29 | // level of logging 30 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 31 | logLevel = LOG_INFO; 32 | 33 | // enable / disable watching file and executing tests whenever any file changes 34 | autoWatch = false; 35 | 36 | // Start these browsers, currently available: 37 | // - Chrome 38 | // - ChromeCanary 39 | // - Firefox 40 | // - Opera 41 | // - Safari (only Mac) 42 | // - PhantomJS 43 | // - IE (only Windows) 44 | browsers = ['Chrome']; 45 | 46 | // If browser does not capture in given timeout [ms], kill it 47 | captureTimeout = 5000; 48 | 49 | // Continuous Integration mode 50 | // if true, it capture browsers, run tests and exit 51 | singleRun = false; 52 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive-utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Hide from screenreaders and browsers 7 | // Credit: HTML5 Boilerplate 8 | .hidden { 9 | display: none; 10 | visibility: hidden; 11 | } 12 | 13 | // Visibility utilities 14 | 15 | // For desktops 16 | .visible-phone { display: none !important; } 17 | .visible-tablet { display: none !important; } 18 | .hidden-phone { } 19 | .hidden-tablet { } 20 | .hidden-desktop { display: none !important; } 21 | .visible-desktop { display: inherit !important; } 22 | 23 | // Tablets & small desktops only 24 | @media (min-width: 768px) and (max-width: 979px) { 25 | // Hide everything else 26 | .hidden-desktop { display: inherit !important; } 27 | .visible-desktop { display: none !important ; } 28 | // Show 29 | .visible-tablet { display: inherit !important; } 30 | // Hide 31 | .hidden-tablet { display: none !important; } 32 | } 33 | 34 | // Phones only 35 | @media (max-width: 767px) { 36 | // Hide everything else 37 | .hidden-desktop { display: inherit !important; } 38 | .visible-desktop { display: none !important; } 39 | // Show 40 | .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior 41 | // Hide 42 | .hidden-phone { display: none !important; } 43 | } 44 | -------------------------------------------------------------------------------- /app/styles/_compass_twitter_bootstrap_responsive.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.1.0 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | 11 | 12 | // Responsive 13 | // For phone and tablet devices 14 | // ------------------------------------------------------------- 15 | 16 | 17 | // REPEAT VARIABLES & MIXINS 18 | // ------------------------- 19 | // Required since we compile the responsive stuff separately 20 | 21 | @import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 22 | @import "compass_twitter_bootstrap/mixins"; 23 | 24 | 25 | // RESPONSIVE CLASSES 26 | // ------------------ 27 | 28 | @import "compass_twitter_bootstrap/responsive-utilities"; 29 | 30 | 31 | // MEDIA QUERIES 32 | // ------------------ 33 | 34 | // Phones to portrait tablets and narrow desktops 35 | @import "compass_twitter_bootstrap/responsive-767px-max"; 36 | 37 | // Tablets to regular desktops 38 | @import "compass_twitter_bootstrap/responsive-768px-979px"; 39 | 40 | // Large desktops 41 | @import "compass_twitter_bootstrap/responsive-1200px-min"; 42 | 43 | 44 | // RESPONSIVE NAVBAR 45 | // ------------------ 46 | 47 | // From 979px and below, show a button to toggle navbar contents 48 | @import "compass_twitter_bootstrap/responsive-navbar"; 49 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files 7 | 8 | // Make wrapper ul behave like the grid 9 | .thumbnails { 10 | margin-left: -$gridGutterWidth; 11 | list-style: none; 12 | @include ctb-clearfix(); 13 | } 14 | // Fluid rows have no left margin 15 | .row-fluid .thumbnails { 16 | margin-left: 0; 17 | } 18 | 19 | // Float li to make thumbnails appear in a row 20 | .thumbnails > li { 21 | float: left; // Explicity set the float since we don't require .span* classes 22 | margin-bottom: $baseLineHeight; 23 | margin-left: $gridGutterWidth; 24 | } 25 | 26 | // The actual thumbnail (can be `a` or `div`) 27 | .thumbnail { 28 | display: block; 29 | padding: 4px; 30 | line-height: $baseLineHeight; 31 | border: 1px solid #ddd; 32 | @include ctb-border-radius($baseBorderRadius); 33 | @include ctb-box-shadow(0 1px 3px rgba(0,0,0,.055)); 34 | @include ctb-transition(all .2s ease-in-out); 35 | } 36 | // Add a hover state for linked versions only 37 | a.thumbnail:hover { 38 | border-color: $linkColor; 39 | @include ctb-box-shadow(0 1px 4px rgba(0,105,214,.25)); 40 | } 41 | 42 | // Images and captions 43 | .thumbnail > img { 44 | display: block; 45 | max-width: 100%; 46 | margin-left: auto; 47 | margin-right: auto; 48 | } 49 | .thumbnail .caption { 50 | padding: 9px; 51 | color: $gray; 52 | } 53 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | 3 | // base path, that will be used to resolve files and exclude 4 | basePath = ''; 5 | 6 | // list of files / patterns to load in the browser 7 | files = [ 8 | JASMINE, 9 | JASMINE_ADAPTER, 10 | 'app/components/angular/angular.js', 11 | 'app/components/angular-mocks/angular-mocks.js', 12 | 'app/components/angular-bootstrap/ui-bootstrap.js', 13 | 'app/scripts/*.js', 14 | 'app/scripts/**/*.js', 15 | 'test/mock/**/*.js', 16 | 'test/spec/**/*.js' 17 | ]; 18 | 19 | // list of files to exclude 20 | exclude = []; 21 | 22 | // test results reporter to use 23 | // possible values: dots || progress || growl 24 | reporters = ['progress']; 25 | 26 | // web server port 27 | port = 8080; 28 | 29 | // cli runner port 30 | runnerPort = 9100; 31 | 32 | // enable / disable colors in the output (reporters and logs) 33 | colors = true; 34 | 35 | // level of logging 36 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 37 | logLevel = LOG_INFO; 38 | 39 | // enable / disable watching file and executing tests whenever any file changes 40 | autoWatch = false; 41 | 42 | // Start these browsers, currently available: 43 | // - Chrome 44 | // - ChromeCanary 45 | // - Firefox 46 | // - Opera 47 | // - Safari (only Mac) 48 | // - PhantomJS 49 | // - IE (only Windows) 50 | browsers = ['Chrome']; 51 | 52 | // If browser does not capture in given timeout [ms], kill it 53 | captureTimeout = 5000; 54 | 55 | // Continuous Integration mode 56 | // if true, it capture browsers, run tests and exit 57 | singleRun = false; 58 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and blocK) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | pre { 9 | padding: 0 3px 2px; 10 | @include ctb-font-family-monospace; 11 | font-size: $baseFontSize - 2; 12 | color: $grayDark; 13 | @include ctb-border-radius(3px); 14 | } 15 | 16 | // Inline code 17 | code { 18 | padding: 2px 4px; 19 | color: #d14; 20 | background-color: #f7f7f9; 21 | border: 1px solid #e1e1e8; 22 | white-space: nowrap; 23 | } 24 | 25 | // Blocks of code 26 | pre { 27 | display: block; 28 | padding: ($baseLineHeight - 1) / 2; 29 | margin: 0 0 $baseLineHeight / 2; 30 | font-size: $baseFontSize - 1; // 14px to 13px 31 | line-height: $baseLineHeight; 32 | word-break: break-all; 33 | word-wrap: break-word; 34 | white-space: pre; 35 | white-space: pre-wrap; 36 | background-color: #f5f5f5; 37 | border: 1px solid #ccc; // fallback for IE7-8 38 | border: 1px solid rgba(0,0,0,.15); 39 | @include ctb-border-radius($baseBorderRadius); 40 | 41 | // Make prettyprint styles more spaced out for readability 42 | &.prettyprint { 43 | margin-bottom: $baseLineHeight; 44 | } 45 | 46 | // Account for some code outputs that place code tags in pre tags 47 | code { 48 | padding: 0; 49 | color: inherit; 50 | white-space: pre; 51 | white-space: pre-wrap; 52 | background-color: transparent; 53 | border: 0; 54 | } 55 | } 56 | 57 | // Enable scrollable blocks of code 58 | .pre-scrollable { 59 | max-height: 340px; 60 | overflow-y: scroll; 61 | } -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: 8px 35px 8px 14px; 11 | margin-bottom: $baseLineHeight; 12 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 13 | background-color: $warningBackground; 14 | border: 1px solid $warningBorder; 15 | @include ctb-border-radius($baseBorderRadius); 16 | } 17 | .alert, 18 | .alert h4 { 19 | // Specified for the h4 to prevent conflicts of changing $headingsColor 20 | color: $warningText; 21 | } 22 | .alert h4 { 23 | margin: 0; 24 | } 25 | 26 | // Adjust close link position 27 | .alert .close { 28 | position: relative; 29 | top: -2px; 30 | right: -21px; 31 | line-height: $baseLineHeight; 32 | } 33 | 34 | 35 | // Alternate styles 36 | // ------------------------- 37 | 38 | .alert-success { 39 | background-color: $successBackground; 40 | border-color: $successBorder; 41 | color: $successText; 42 | } 43 | .alert-success h4 { 44 | color: $successText; 45 | } 46 | .alert-danger, 47 | .alert-error { 48 | background-color: $errorBackground; 49 | border-color: $errorBorder; 50 | color: $errorText; 51 | } 52 | .alert-danger h4, 53 | .alert-error h4 { 54 | color: $errorText; 55 | } 56 | .alert-info { 57 | background-color: $infoBackground; 58 | border-color: $infoBorder; 59 | color: $infoText; 60 | } 61 | .alert-info h4 { 62 | color: $infoText; 63 | } 64 | 65 | 66 | // Block alerts 67 | // ------------------------- 68 | 69 | .alert-block { 70 | padding-top: 14px; 71 | padding-bottom: 14px; 72 | } 73 | .alert-block > p, 74 | .alert-block > ul { 75 | margin-bottom: 0; 76 | } 77 | .alert-block p + p { 78 | margin-top: 5px; 79 | } 80 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Tooltips 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .tooltip { 8 | position: absolute; 9 | z-index: $zindexTooltip; 10 | display: block; 11 | visibility: visible; 12 | padding: 5px; 13 | font-size: 11px; 14 | @include ctb-opacity(0); 15 | &.in { @include ctb-opacity(80); } 16 | &.top { margin-top: -3px; } 17 | &.right { margin-left: 3px; } 18 | &.bottom { margin-top: 3px; } 19 | &.left { margin-left: -3px; } 20 | } 21 | 22 | // Wrapper for the tooltip content 23 | .tooltip-inner { 24 | max-width: 200px; 25 | padding: 3px 8px; 26 | color: $tooltipColor; 27 | text-align: center; 28 | text-decoration: none; 29 | background-color: $tooltipBackground; 30 | @include ctb-border-radius($baseBorderRadius); 31 | } 32 | 33 | // Arrows 34 | .tooltip-arrow { 35 | position: absolute; 36 | width: 0; 37 | height: 0; 38 | border-color: transparent; 39 | border-style: solid; 40 | } 41 | .tooltip { 42 | &.top .tooltip-arrow { 43 | bottom: 0; 44 | left: 50%; 45 | margin-left: -$tooltipArrowWidth; 46 | border-width: $tooltipArrowWidth $tooltipArrowWidth 0; 47 | border-top-color: $tooltipArrowColor; 48 | } 49 | &.right .tooltip-arrow { 50 | top: 50%; 51 | left: 0; 52 | margin-top: -$tooltipArrowWidth; 53 | border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0; 54 | border-right-color: $tooltipArrowColor; 55 | } 56 | &.left .tooltip-arrow { 57 | top: 50%; 58 | right: 0; 59 | margin-top: -$tooltipArrowWidth; 60 | border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth; 61 | border-left-color: $tooltipArrowColor; 62 | } 63 | &.bottom .tooltip-arrow { 64 | top: 0; 65 | left: 50%; 66 | margin-left: -$tooltipArrowWidth; 67 | border-width: 0 $tooltipArrowWidth $tooltipArrowWidth; 68 | border-bottom-color: $tooltipArrowColor; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_labels-badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels and badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base classes 7 | .label, 8 | .badge { 9 | display: inline-block; 10 | padding: 2px 4px; 11 | font-size: $baseFontSize * .846; 12 | font-weight: bold; 13 | line-height: 14px; // ensure proper line-height if floated 14 | color: $white; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 18 | background-color: $grayLight; 19 | } 20 | // Set unique padding and border-radii 21 | .label { 22 | @include ctb-border-radius(3px); 23 | } 24 | .badge { 25 | padding-left: 9px; 26 | padding-right: 9px; 27 | @include ctb-border-radius(9px); 28 | } 29 | 30 | // Empty labels/badges collapse 31 | .label, 32 | .badge { 33 | &:empty { 34 | display: none; 35 | } 36 | } 37 | 38 | // Hover state, but only for links 39 | a { 40 | &.label:hover, 41 | &.badge:hover { 42 | color: $white; 43 | text-decoration: none; 44 | cursor: pointer; 45 | } 46 | } 47 | 48 | // Colors 49 | // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) 50 | // Important (red) 51 | .label-important, .badge-important { background-color: $errorText; } 52 | .label-important[href], .badge-important[href] { background-color: darken($errorText, 10%); } 53 | // Warnings (orange) 54 | .label-warning, .badge-warning { background-color: $orange; } 55 | .label-warning[href], .badge-warning[href] { background-color: darken($orange, 10%); } 56 | // Success (green) 57 | .label-success, .badge-success { background-color: $successText; } 58 | .label-success[href], .badge-success[href] { background-color: darken($successText, 10%); } 59 | // Info (turquoise) 60 | .label-info, .badge-info { background-color: $infoText; } 61 | .label-info[href], .badge-info[href] { background-color: darken($infoText, 10%); } 62 | // Inverse (black) 63 | .label-inverse, .badge-inverse { background-color: $grayDark; } 64 | .label-inverse[href], .badge-inverse[href] { background-color: darken($grayDark, 10%); } 65 | 66 | // Quick fix for labels/badges in buttons 67 | .btn { 68 | .label, 69 | .badge { 70 | position: relative; 71 | top: -1px; 72 | } 73 | } 74 | .btn-mini { 75 | .label, 76 | .badge { 77 | top: 0; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /app/styles/_compass_twitter_bootstrap_awesome.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Bootstrap v2.2.2 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | 11 | @import "compass"; 12 | 13 | @import "compass_twitter_bootstrap/mixins"; 14 | 15 | // CSS Reset 16 | @import "compass_twitter_bootstrap/reset"; 17 | 18 | // Core variables and mixins 19 | @import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 20 | 21 | 22 | // Grid system and page structure 23 | @import "compass_twitter_bootstrap/scaffolding"; 24 | @import "compass_twitter_bootstrap/grid"; 25 | @import "compass_twitter_bootstrap/layouts"; 26 | 27 | // Base CSS 28 | @import "compass_twitter_bootstrap/type"; 29 | @import "compass_twitter_bootstrap/code"; 30 | @import "compass_twitter_bootstrap/forms"; 31 | @import "compass_twitter_bootstrap/tables"; 32 | 33 | // Components: common 34 | @import "compass_twitter_bootstrap/font-awesome"; 35 | @import "compass_twitter_bootstrap/dropdowns"; 36 | @import "compass_twitter_bootstrap/wells"; 37 | @import "compass_twitter_bootstrap/component-animations"; 38 | @import "compass_twitter_bootstrap/close"; 39 | 40 | // Components: Buttons & Alerts 41 | @import "compass_twitter_bootstrap/buttons"; 42 | @import "compass_twitter_bootstrap/button-groups"; 43 | @import "compass_twitter_bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less 44 | 45 | // Components: Nav 46 | @import "compass_twitter_bootstrap/navs"; 47 | @import "compass_twitter_bootstrap/navbar"; 48 | @import "compass_twitter_bootstrap/breadcrumbs"; 49 | @import "compass_twitter_bootstrap/pagination"; 50 | @import "compass_twitter_bootstrap/pager"; 51 | 52 | // Components: Popovers 53 | @import "compass_twitter_bootstrap/modals"; 54 | @import "compass_twitter_bootstrap/tooltip"; 55 | @import "compass_twitter_bootstrap/popovers"; 56 | 57 | // Components: Misc 58 | @import "compass_twitter_bootstrap/thumbnails"; 59 | @import "compass_twitter_bootstrap/labels-badges"; 60 | @import "compass_twitter_bootstrap/progress-bars"; 61 | @import "compass_twitter_bootstrap/accordion"; 62 | @import "compass_twitter_bootstrap/carousel"; 63 | @import "compass_twitter_bootstrap/hero-unit"; 64 | 65 | // Utility classes 66 | @import "compass_twitter_bootstrap/utilities"; // Has to be last to override when necessary 67 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_modals.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modals 3 | // -------------------------------------------------- 4 | 5 | // Background 6 | .modal-backdrop { 7 | position: fixed; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $zindexModalBackdrop; 13 | background-color: $black; 14 | // Fade for backdrop 15 | &.fade { opacity: 0; } 16 | } 17 | 18 | .modal-backdrop, 19 | .modal-backdrop.fade.in { 20 | @include ctb-opacity(80); 21 | } 22 | 23 | // Base modal 24 | .modal { 25 | position: fixed; 26 | top: 10%; 27 | left: 50%; 28 | z-index: $zindexModal; 29 | width: 560px; 30 | margin-left: -280px; 31 | background-color: $white; 32 | border: 1px solid #999; 33 | border: 1px solid rgba(0,0,0,.3); 34 | *border: 1px solid #999; /* IE6-7 */ 35 | @include ctb-border-radius(6px); 36 | @include ctb-box-shadow(0 3px 7px rgba(0,0,0,0.3)); 37 | @include ctb-background-clip(padding-box); 38 | // Remove focus outline from opened modal 39 | outline: none; 40 | 41 | &.fade { 42 | @include ctb-transition('opacity .3s linear, top .3s ease-out'); 43 | top: -25%; 44 | } 45 | &.fade.in { top: 10%; } 46 | } 47 | .modal-header { 48 | padding: 9px 15px; 49 | border-bottom: 1px solid #eee; 50 | // Close icon 51 | .close { margin-top: 2px; } 52 | // Heading 53 | h3 { 54 | margin: 0; 55 | line-height: 30px; 56 | } 57 | } 58 | 59 | // Body (where all modal content resides) 60 | .modal-body { 61 | position: relative; 62 | overflow-y: auto; 63 | max-height: 400px; 64 | padding: 15px; 65 | } 66 | // Remove bottom margin if need be 67 | .modal-form { 68 | margin-bottom: 0; 69 | } 70 | 71 | // Footer (for actions) 72 | .modal-footer { 73 | padding: 14px 15px 15px; 74 | margin-bottom: 0; 75 | text-align: right; // right align buttons 76 | background-color: #f5f5f5; 77 | border-top: 1px solid #ddd; 78 | @include ctb-border-radius(0 0 6px 6px); 79 | @include ctb-box-shadow(inset 0 1px 0 $white); 80 | @include ctb-clearfix(); // clear it in case folks use .pull-* classes on buttons 81 | 82 | // Properly space out buttons 83 | .btn + .btn { 84 | margin-left: 5px; 85 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 86 | } 87 | // but override that for button groups 88 | .btn-group .btn + .btn { 89 | margin-left: -1px; 90 | } 91 | // and override it for block buttons as well 92 | .btn-block + .btn-block { 93 | margin-left: 0; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /app/styles/_compass_twitter_bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v2.2.2 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | 11 | @import "compass"; 12 | 13 | @import "compass_twitter_bootstrap/mixins"; 14 | 15 | // CSS Reset 16 | @import "compass_twitter_bootstrap/reset"; 17 | 18 | // Core variables and mixins 19 | @import "compass_twitter_bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 20 | 21 | 22 | // Grid system and page structure 23 | @import "compass_twitter_bootstrap/scaffolding"; 24 | @import "compass_twitter_bootstrap/grid"; 25 | @import "compass_twitter_bootstrap/layouts"; 26 | 27 | // Base CSS 28 | @import "compass_twitter_bootstrap/type"; 29 | @import "compass_twitter_bootstrap/code"; 30 | @import "compass_twitter_bootstrap/forms"; 31 | @import "compass_twitter_bootstrap/tables"; 32 | 33 | // Components: common 34 | @import "compass_twitter_bootstrap/sprites"; 35 | @import "compass_twitter_bootstrap/dropdowns"; 36 | @import "compass_twitter_bootstrap/wells"; 37 | @import "compass_twitter_bootstrap/component-animations"; 38 | @import "compass_twitter_bootstrap/close"; 39 | 40 | // Components: Buttons & Alerts 41 | @import "compass_twitter_bootstrap/buttons"; 42 | @import "compass_twitter_bootstrap/button-groups"; 43 | @import "compass_twitter_bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less 44 | 45 | // Components: Nav 46 | @import "compass_twitter_bootstrap/navs"; 47 | @import "compass_twitter_bootstrap/navbar"; 48 | @import "compass_twitter_bootstrap/breadcrumbs"; 49 | @import "compass_twitter_bootstrap/pagination"; 50 | @import "compass_twitter_bootstrap/pager"; 51 | 52 | // Components: Popovers 53 | @import "compass_twitter_bootstrap/modals"; 54 | @import "compass_twitter_bootstrap/tooltip"; 55 | @import "compass_twitter_bootstrap/popovers"; 56 | 57 | // Components: Misc 58 | @import "compass_twitter_bootstrap/thumbnails"; 59 | @import "compass_twitter_bootstrap/media"; 60 | @import "compass_twitter_bootstrap/labels-badges"; 61 | @import "compass_twitter_bootstrap/progress-bars"; 62 | @import "compass_twitter_bootstrap/accordion"; 63 | @import "compass_twitter_bootstrap/carousel"; 64 | @import "compass_twitter_bootstrap/hero-unit"; 65 | 66 | // Utility classes 67 | @import "compass_twitter_bootstrap/utilities"; // Has to be last to override when necessary 68 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_carousel.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Carousel 3 | // -------------------------------------------------- 4 | 5 | 6 | .carousel { 7 | position: relative; 8 | margin-bottom: $baseLineHeight; 9 | line-height: 1; 10 | } 11 | 12 | .carousel-inner { 13 | overflow: hidden; 14 | width: 100%; 15 | position: relative; 16 | } 17 | 18 | .carousel-inner { 19 | 20 | > .item { 21 | display: none; 22 | position: relative; 23 | @include ctb-transition(.6s ease-in-out left); 24 | } 25 | 26 | // Account for jankitude on images 27 | > .item > img { 28 | display: block; 29 | line-height: 1; 30 | } 31 | 32 | > .active, 33 | > .next, 34 | > .prev { display: block; } 35 | 36 | > .active { 37 | left: 0; 38 | } 39 | 40 | > .next, 41 | > .prev { 42 | position: absolute; 43 | top: 0; 44 | width: 100%; 45 | } 46 | 47 | > .next { 48 | left: 100%; 49 | } 50 | > .prev { 51 | left: -100%; 52 | } 53 | > .next.left, 54 | > .prev.right { 55 | left: 0; 56 | } 57 | 58 | > .active.left { 59 | left: -100%; 60 | } 61 | > .active.right { 62 | left: 100%; 63 | } 64 | 65 | } 66 | 67 | // Left/right controls for nav 68 | // --------------------------- 69 | 70 | .carousel-control { 71 | position: absolute; 72 | top: 40%; 73 | left: 15px; 74 | width: 40px; 75 | height: 40px; 76 | margin-top: -20px; 77 | font-size: 60px; 78 | font-weight: 100; 79 | line-height: 30px; 80 | color: $white; 81 | text-align: center; 82 | background: $grayDarker; 83 | border: 3px solid $white; 84 | @include ctb-border-radius(23px); 85 | @include ctb-opacity(50); 86 | 87 | // we can't have this transition here 88 | // because webkit cancels the carousel 89 | // animation if you trip this while 90 | // in the middle of another animation 91 | // ;_; 92 | // @include ctb-transition(opacity .2s linear); 93 | 94 | // Reposition the right one 95 | &.right { 96 | left: auto; 97 | right: 15px; 98 | } 99 | 100 | // Hover state 101 | &:hover { 102 | color: $white; 103 | text-decoration: none; 104 | @include ctb-opacity(90); 105 | } 106 | } 107 | 108 | 109 | // Caption for text below images 110 | // ----------------------------- 111 | 112 | .carousel-caption { 113 | position: absolute; 114 | left: 0; 115 | right: 0; 116 | bottom: 0; 117 | padding: 15px; 118 | background: $grayDark; 119 | background: rgba(0,0,0,.75); 120 | } 121 | .carousel-caption h4, 122 | .carousel-caption p { 123 | color: $white; 124 | line-height: $baseLineHeight; 125 | } 126 | .carousel-caption h4 { 127 | margin: 0 0 5px; 128 | } 129 | .carousel-caption p { 130 | margin-bottom: 0; 131 | } 132 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | 5 | // Space out pagination from surrounding content 6 | .pagination { 7 | margin: $baseLineHeight 0; 8 | } 9 | 10 | .pagination ul { 11 | // Allow for text-based alignment 12 | display: inline-block; 13 | @include ctb-ie7-inline-block(); 14 | // Reset default ul styles 15 | margin-left: 0; 16 | margin-bottom: 0; 17 | // Visuals 18 | @include ctb-border-radius($baseBorderRadius); 19 | @include ctb-box-shadow(0 1px 2px rgba(0,0,0,.05)); 20 | } 21 | .pagination ul > li { 22 | display: inline; // Remove list-style and block-level defaults 23 | } 24 | .pagination ul > li > a, 25 | .pagination ul > li > span { 26 | float: left; // Collapse white-space 27 | padding: 4px 12px; 28 | line-height: $baseLineHeight; 29 | text-decoration: none; 30 | background-color: $paginationBackground; 31 | border: 1px solid $paginationBorder; 32 | border-left-width: 0; 33 | } 34 | .pagination ul > li > a:hover, 35 | .pagination ul > .active > a, 36 | .pagination ul > .active > span { 37 | background-color: $paginationActiveBackground; 38 | } 39 | .pagination ul > .active > a, 40 | .pagination ul > .active > span { 41 | color: $grayLight; 42 | cursor: default; 43 | } 44 | .pagination ul > .disabled > span, 45 | .pagination ul > .disabled > a, 46 | .pagination ul > .disabled > a:hover { 47 | color: $grayLight; 48 | background-color: transparent; 49 | cursor: default; 50 | } 51 | .pagination ul > li:first-child > a, 52 | .pagination ul > li:first-child > span { 53 | border-left-width: 1px; 54 | @include ctb-border-left-radius($baseBorderRadius); 55 | } 56 | .pagination ul > li:last-child > a, 57 | .pagination ul > li:last-child > span { 58 | @include ctb-border-right-radius($baseBorderRadius); 59 | } 60 | 61 | 62 | // Alignment 63 | // -------------------------------------------------- 64 | 65 | .pagination-centered { 66 | text-align: center; 67 | } 68 | .pagination-right { 69 | text-align: right; 70 | } 71 | 72 | 73 | // Sizing 74 | // -------------------------------------------------- 75 | 76 | // Large 77 | .pagination-large { 78 | ul > li > a, 79 | ul > li > span { 80 | padding: $paddingLarge; 81 | font-size: $fontSizeLarge; 82 | } 83 | ul > li:first-child > a, 84 | ul > li:first-child > span { 85 | @include ctb-border-left-radius($borderRadiusLarge); 86 | } 87 | ul > li:last-child > a, 88 | ul > li:last-child > span { 89 | @include ctb-border-right-radius($borderRadiusLarge); 90 | } 91 | } 92 | 93 | // Small and mini 94 | .pagination-mini, 95 | .pagination-small { 96 | ul > li:first-child > a, 97 | ul > li:first-child > span { 98 | @include ctb-border-left-radius($borderRadiusSmall); 99 | } 100 | ul > li:last-child > a, 101 | ul > li:last-child > span { 102 | @include ctb-border-right-radius($borderRadiusSmall); 103 | } 104 | } 105 | 106 | // Small 107 | .pagination-small { 108 | ul > li > a, 109 | ul > li > span { 110 | padding: $paddingSmall; 111 | font-size: $fontSizeSmall; 112 | } 113 | } 114 | // Mini 115 | .pagination-mini { 116 | ul > li > a, 117 | ul > li > span { 118 | padding: $paddingMini; 119 | font-size: $fontSizeMini; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // ANIMATIONS 7 | // ---------- 8 | 9 | // Webkit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Firefox 16 | @-moz-keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | // IE9 22 | @-ms-keyframes progress-bar-stripes { 23 | from { background-position: 40px 0; } 24 | to { background-position: 0 0; } 25 | } 26 | 27 | // Opera 28 | @-o-keyframes progress-bar-stripes { 29 | from { background-position: 0 0; } 30 | to { background-position: 40px 0; } 31 | } 32 | 33 | // Spec 34 | @keyframes progress-bar-stripes { 35 | from { background-position: 40px 0; } 36 | to { background-position: 0 0; } 37 | } 38 | 39 | 40 | 41 | // THE BARS 42 | // -------- 43 | 44 | // Outer container 45 | .progress { 46 | overflow: hidden; 47 | height: $baseLineHeight; 48 | margin-bottom: $baseLineHeight; 49 | @include ctb-gradient-vertical(#f5f5f5, #f9f9f9); 50 | @include ctb-box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 51 | @include ctb-border-radius($baseBorderRadius); 52 | } 53 | 54 | // Bar of progress 55 | .progress .bar { 56 | width: 0%; 57 | height: 100%; 58 | color: $white; 59 | float: left; 60 | font-size: 12px; 61 | text-align: center; 62 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 63 | @include ctb-gradient-vertical(#149bdf, #0480be); 64 | @include ctb-box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 65 | @include ctb-box-sizing(border-box); 66 | @include ctb-transition(width .6s ease); 67 | } 68 | .progress .bar + .bar { 69 | @include ctb-box-shadow(#{inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)}); 70 | } 71 | 72 | // Striped bars 73 | .progress-striped .bar { 74 | @include ctb-gradient-striped(#149bdf); 75 | @include ctb-background-size(40px 40px); 76 | } 77 | 78 | // Call animation for the active one 79 | .progress.active .bar { 80 | -webkit-animation: progress-bar-stripes 2s linear infinite; 81 | -moz-animation: progress-bar-stripes 2s linear infinite; 82 | -ms-animation: progress-bar-stripes 2s linear infinite; 83 | -o-animation: progress-bar-stripes 2s linear infinite; 84 | animation: progress-bar-stripes 2s linear infinite; 85 | } 86 | 87 | 88 | 89 | // COLORS 90 | // ------ 91 | 92 | // Danger (red) 93 | .progress-danger .bar, .progress .bar-danger { 94 | @include ctb-gradient-vertical(#ee5f5b, #c43c35); 95 | } 96 | .progress-danger.progress-striped .bar, .progress-striped .bar-danger { 97 | @include ctb-gradient-striped(#ee5f5b); 98 | } 99 | 100 | // Success (green) 101 | .progress-success .bar, .progress .bar-success { 102 | @include ctb-gradient-vertical(#62c462, #57a957); 103 | } 104 | .progress-success.progress-striped .bar, .progress-striped .bar-success { 105 | @include ctb-gradient-striped(#62c462); 106 | } 107 | 108 | // Info (teal) 109 | .progress-info .bar, .progress .bar-info { 110 | @include ctb-gradient-vertical(#5bc0de, #339bb9); 111 | } 112 | .progress-info.progress-striped .bar, .progress-striped .bar-info { 113 | @include ctb-gradient-striped(#5bc0de); 114 | } 115 | 116 | // Warning (orange) 117 | .progress-warning .bar, .progress .bar-warning { 118 | @include ctb-gradient-vertical(lighten($orange, 15%), $orange); 119 | } 120 | .progress-warning.progress-striped .bar, .progress-striped .bar-warning { 121 | @include ctb-gradient-striped(lighten($orange, 15%)); 122 | } 123 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_popovers.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Popovers 3 | // -------------------------------------------------- 4 | 5 | 6 | .popover { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | z-index: $zindexPopover; 11 | display: none; 12 | width: 236px; 13 | padding: 1px; 14 | text-align: left; // Reset given new insertion method 15 | background-color: $popoverBackground; 16 | -webkit-background-clip: padding-box; 17 | -moz-background-clip: padding; 18 | background-clip: padding-box; 19 | border: 1px solid #ccc; 20 | border: 1px solid rgba(0,0,0,.2); 21 | @include ctb-border-radius(6px); 22 | @include ctb-box-shadow(0 5px 10px rgba(0,0,0,.2)); 23 | 24 | // Overrides for proper insertion 25 | white-space: normal; 26 | 27 | // Offset the popover to account for the popover arrow 28 | &.top { margin-top: -10px; } 29 | &.right { margin-left: 10px; } 30 | &.bottom { margin-top: 10px; } 31 | &.left { margin-left: -10px; } 32 | } 33 | 34 | .popover-title { 35 | margin: 0; // reset heading margin 36 | padding: 8px 14px; 37 | font-size: 14px; 38 | font-weight: normal; 39 | line-height: 18px; 40 | background-color: $popoverTitleBackground; 41 | border-bottom: 1px solid darken($popoverTitleBackground, 5%); 42 | @include ctb-border-radius(5px 5px 0 0); 43 | } 44 | 45 | .popover-content { 46 | padding: 9px 14px; 47 | } 48 | 49 | // Arrows 50 | // 51 | // .arrow is outer, .arrow:after is inner 52 | 53 | .popover .arrow, 54 | .popover .arrow:after { 55 | position: absolute; 56 | display: block; 57 | width: 0; 58 | height: 0; 59 | border-color: transparent; 60 | border-style: solid; 61 | } 62 | .popover .arrow { 63 | border-width: $popoverArrowOuterWidth; 64 | } 65 | .popover .arrow:after { 66 | border-width: $popoverArrowWidth; 67 | content: ""; 68 | } 69 | 70 | .popover { 71 | &.top .arrow { 72 | left: 50%; 73 | margin-left: -$popoverArrowOuterWidth; 74 | border-bottom-width: 0; 75 | border-top-color: #999; // IE8 fallback 76 | border-top-color: $popoverArrowOuterColor; 77 | bottom: -$popoverArrowOuterWidth; 78 | &:after { 79 | bottom: 1px; 80 | margin-left: -$popoverArrowWidth; 81 | border-bottom-width: 0; 82 | border-top-color: $popoverArrowColor; 83 | } 84 | } 85 | &.right .arrow { 86 | top: 50%; 87 | left: -$popoverArrowOuterWidth; 88 | margin-top: -$popoverArrowOuterWidth; 89 | border-left-width: 0; 90 | border-right-color: #999; // IE8 fallback 91 | border-right-color: $popoverArrowOuterColor; 92 | &:after { 93 | left: 1px; 94 | bottom: -$popoverArrowWidth; 95 | border-left-width: 0; 96 | border-right-color: $popoverArrowColor; 97 | } 98 | } 99 | &.bottom .arrow { 100 | left: 50%; 101 | margin-left: -$popoverArrowOuterWidth; 102 | border-top-width: 0; 103 | border-bottom-color: #999; // IE8 fallback 104 | border-bottom-color: $popoverArrowOuterColor; 105 | top: -$popoverArrowOuterWidth; 106 | &:after { 107 | top: 1px; 108 | margin-left: -$popoverArrowWidth; 109 | border-top-width: 0; 110 | border-bottom-color: $popoverArrowColor; 111 | } 112 | } 113 | 114 | &.left .arrow { 115 | top: 50%; 116 | right: -$popoverArrowOuterWidth; 117 | margin-top: -$popoverArrowOuterWidth; 118 | border-right-width: 0; 119 | border-left-color: #999; // IE8 fallback 120 | border-left-color: $popoverArrowOuterColor; 121 | &:after { 122 | right: 1px; 123 | border-right-width: 0; 124 | border-left-color: $popoverArrowColor; 125 | bottom: -$popoverArrowWidth; 126 | } 127 | } 128 | 129 | } 130 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive-767px-max.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Landscape phone to desktop/tablet 3 | // -------------------------------------------------- 4 | 5 | 6 | @media (max-width: 767px) { 7 | 8 | // Padding to set content in a bit 9 | body { 10 | padding-left: 20px; 11 | padding-right: 20px; 12 | } 13 | // Negative indent the now static "fixed" navbar 14 | .navbar-fixed-top, 15 | .navbar-fixed-bottom, 16 | .navbar-static-top { 17 | margin-left: -20px; 18 | margin-right: -20px; 19 | } 20 | // Remove padding on container given explicit padding set on body 21 | .container-fluid { 22 | padding: 0; 23 | } 24 | 25 | // TYPOGRAPHY 26 | // ---------- 27 | // Reset horizontal dl 28 | .dl-horizontal { 29 | dt { 30 | float: none; 31 | clear: none; 32 | width: auto; 33 | text-align: left; 34 | } 35 | dd { 36 | margin-left: 0; 37 | } 38 | } 39 | 40 | // GRID & CONTAINERS 41 | // ----------------- 42 | // Remove width from containers 43 | .container { 44 | width: auto; 45 | } 46 | // Fluid rows 47 | .row-fluid { 48 | width: 100%; 49 | } 50 | // Undo negative margin on rows and thumbnails 51 | .row, 52 | .thumbnails { 53 | margin-left: 0; 54 | } 55 | .thumbnails > li { 56 | float: none; 57 | margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present 58 | } 59 | // Make all grid-sized elements block level again 60 | [class*="span"], 61 | .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing 62 | .row-fluid [class*="span"] { 63 | float: none; 64 | display: block; 65 | width: 100%; 66 | margin-left: 0; 67 | @include ctb-box-sizing(border-box); 68 | } 69 | .span12, 70 | .row-fluid .span12 { 71 | width: 100%; 72 | @include ctb-box-sizing(border-box); 73 | } 74 | .row-fluid [class*="offset"]:first-child { 75 | margin-left: 0; 76 | } 77 | 78 | // FORM FIELDS 79 | // ----------- 80 | // Make span* classes full width 81 | .input-large, 82 | .input-xlarge, 83 | .input-xxlarge, 84 | input[class*="span"], 85 | select[class*="span"], 86 | textarea[class*="span"], 87 | .uneditable-input { 88 | @include ctb-input-block-level(); 89 | } 90 | // But don't let it screw up prepend/append inputs 91 | .input-prepend input, 92 | .input-append input, 93 | .input-prepend input[class*="span"], 94 | .input-append input[class*="span"] { 95 | display: inline-block; // redeclare so they don't wrap to new lines 96 | width: auto; 97 | } 98 | .controls-row [class*="span"] + [class*="span"] { 99 | margin-left: 0; 100 | } 101 | 102 | // Modals 103 | .modal { 104 | position: fixed; 105 | top: 20px; 106 | left: 20px; 107 | right: 20px; 108 | width: auto; 109 | margin: 0; 110 | &.fade { top: -100px; } 111 | &.fade.in { top: 20px; } 112 | } 113 | 114 | } 115 | 116 | 117 | 118 | // UP TO LANDSCAPE PHONE 119 | // --------------------- 120 | 121 | @media (max-width: 480px) { 122 | 123 | // Smooth out the collapsing/expanding nav 124 | .nav-collapse { 125 | -webkit-transform: translate3d(0, 0, 0); // activate the GPU 126 | } 127 | 128 | // Block level the page header small tag for readability 129 | .page-header h1 small { 130 | display: block; 131 | line-height: $baseLineHeight; 132 | } 133 | 134 | // Update checkboxes for iOS 135 | input[type="checkbox"], 136 | input[type="radio"] { 137 | border: 1px solid #ccc; 138 | } 139 | 140 | // Remove the horizontal form styles 141 | .form-horizontal { 142 | .control-label { 143 | float: none; 144 | width: auto; 145 | padding-top: 0; 146 | text-align: left; 147 | } 148 | // Move over all input controls and content 149 | .controls { 150 | margin-left: 0; 151 | } 152 | // Move the options list down to align with labels 153 | .control-list { 154 | padding-top: 0; // has to be padding because margin collaspes 155 | } 156 | // Move over buttons in .form-actions to align with .controls 157 | .form-actions { 158 | padding-left: 10px; 159 | padding-right: 10px; 160 | } 161 | } 162 | 163 | // Medias 164 | // Reset float and spacing to stack 165 | .media .pull-left, 166 | .media .pull-right { 167 | float: none; 168 | display: block; 169 | margin-bottom: 10px; 170 | } 171 | // Remove side margins since we stack instead of indent 172 | .media-object { 173 | margin-right: 0; 174 | margin-left: 0; 175 | } 176 | 177 | // Modals 178 | .modal { 179 | top: 10px; 180 | left: 10px; 181 | right: 10px; 182 | } 183 | .modal-header .close { 184 | padding: 10px; 185 | margin: -10px; 186 | } 187 | 188 | // Carousel 189 | .carousel-caption { 190 | position: static; 191 | } 192 | 193 | } 194 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_responsive-navbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Navbar 3 | // -------------------------------------------------- 4 | 5 | 6 | // TABLETS AND BELOW 7 | // ----------------- 8 | @media (max-width: $navbarCollapseWidth) { 9 | 10 | // UNFIX THE TOPBAR 11 | // ---------------- 12 | // Remove any padding from the body 13 | body { 14 | padding-top: 0; 15 | } 16 | // Unfix the navbars 17 | .navbar-fixed-top, 18 | .navbar-fixed-bottom { 19 | position: static; 20 | } 21 | .navbar-fixed-top { 22 | margin-bottom: $baseLineHeight; 23 | } 24 | .navbar-fixed-bottom { 25 | margin-top: $baseLineHeight; 26 | } 27 | .navbar-fixed-top .navbar-inner, 28 | .navbar-fixed-bottom .navbar-inner { 29 | padding: 5px; 30 | } 31 | .navbar .container { 32 | width: auto; 33 | padding: 0; 34 | } 35 | // Account for brand name 36 | .navbar .brand { 37 | padding-left: 10px; 38 | padding-right: 10px; 39 | margin: 0 0 0 -5px; 40 | } 41 | 42 | // COLLAPSIBLE NAVBAR 43 | // ------------------ 44 | // Nav collapse clears brand 45 | .nav-collapse { 46 | clear: both; 47 | } 48 | // Block-level the nav 49 | .nav-collapse .nav { 50 | float: none; 51 | margin: 0 0 ($baseLineHeight / 2); 52 | } 53 | .nav-collapse .nav > li { 54 | float: none; 55 | } 56 | .nav-collapse .nav > li > a { 57 | margin-bottom: 2px; 58 | } 59 | .nav-collapse .nav > .divider-vertical { 60 | display: none; 61 | } 62 | .nav-collapse .nav .nav-header { 63 | color: $navbarText; 64 | text-shadow: none; 65 | } 66 | // Nav and dropdown links in navbar 67 | .nav-collapse .nav > li > a, 68 | .nav-collapse .dropdown-menu a { 69 | padding: 9px 15px; 70 | font-weight: bold; 71 | color: $navbarLinkColor; 72 | @include ctb-border-radius(3px); 73 | } 74 | // Buttons 75 | .nav-collapse .btn { 76 | padding: 4px 10px 4px; 77 | font-weight: normal; 78 | @include ctb-border-radius($baseBorderRadius); 79 | } 80 | .nav-collapse .dropdown-menu li + li a { 81 | margin-bottom: 2px; 82 | } 83 | .nav-collapse .nav > li > a:hover, 84 | .nav-collapse .dropdown-menu a:hover { 85 | background-color: $navbarBackground; 86 | } 87 | .navbar-inverse .nav-collapse .nav > li > a, 88 | .navbar-inverse .nav-collapse .dropdown-menu a { 89 | color: $navbarInverseLinkColor; 90 | } 91 | .navbar-inverse .nav-collapse .nav > li > a:hover, 92 | .navbar-inverse .nav-collapse .dropdown-menu a:hover { 93 | background-color: $navbarInverseBackground; 94 | } 95 | // Buttons in the navbar 96 | .nav-collapse.in .btn-group { 97 | margin-top: 5px; 98 | padding: 0; 99 | } 100 | // Dropdowns in the navbar 101 | .nav-collapse .dropdown-menu { 102 | position: static; 103 | top: auto; 104 | left: auto; 105 | float: none; 106 | display: none; 107 | max-width: none; 108 | margin: 0 15px; 109 | padding: 0; 110 | background-color: transparent; 111 | border: none; 112 | @include ctb-border-radius(0); 113 | @include ctb-box-shadow(none); 114 | } 115 | .nav-collapse .open > .dropdown-menu { 116 | display: block; 117 | } 118 | 119 | .nav-collapse .dropdown-menu:before, 120 | .nav-collapse .dropdown-menu:after { 121 | display: none; 122 | } 123 | .nav-collapse .dropdown-menu .divider { 124 | display: none; 125 | } 126 | .nav-collapse .nav > li > .dropdown-menu { 127 | &:before, 128 | &:after { 129 | display: none; 130 | } 131 | } 132 | // Forms in navbar 133 | .nav-collapse .navbar-form, 134 | .nav-collapse .navbar-search { 135 | float: none; 136 | padding: ($baseLineHeight / 2) 15px; 137 | margin: ($baseLineHeight / 2) 0; 138 | border-top: 1px solid $navbarBackground; 139 | border-bottom: 1px solid $navbarBackground; 140 | @include ctb-box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)}); 141 | } 142 | .navbar-inverse .nav-collapse .navbar-form, 143 | .navbar-inverse .nav-collapse .navbar-search { 144 | border-top-color: $navbarInverseBackground; 145 | border-bottom-color: $navbarInverseBackground; 146 | } 147 | // Pull right (secondary) nav content 148 | .navbar .nav-collapse .nav.pull-right { 149 | float: none; 150 | margin-left: 0; 151 | } 152 | // Hide everything in the navbar save .brand and toggle button */ 153 | .nav-collapse, 154 | .nav-collapse.collapse { 155 | overflow: hidden; 156 | height: 0; 157 | } 158 | // Navbar button 159 | .navbar .btn-navbar { 160 | display: block; 161 | } 162 | 163 | // STATIC NAVBAR 164 | // ------------- 165 | .navbar-static .navbar-inner { 166 | padding-left: 10px; 167 | padding-right: 10px; 168 | } 169 | 170 | 171 | } 172 | 173 | 174 | // DEFAULT DESKTOP 175 | // --------------- 176 | 177 | @media (min-width: $navbarCollapseDesktopWidth) { 178 | 179 | // Required to make the collapsing navbar work on regular desktops 180 | .nav-collapse.collapse { 181 | height: auto !important; 182 | overflow: visible !important; 183 | } 184 | 185 | } 186 | -------------------------------------------------------------------------------- /app/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 | 151 | 154 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_reset.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Reset CSS 3 | // Adapted from http://github.com/necolas/normalize.css 4 | // -------------------------------------------------- 5 | 6 | 7 | // Display in IE6-9 and FF3 8 | // ------------------------- 9 | 10 | article, 11 | aside, 12 | details, 13 | figcaption, 14 | figure, 15 | footer, 16 | header, 17 | hgroup, 18 | nav, 19 | section { 20 | display: block; 21 | } 22 | 23 | // Display block in IE6-9 and FF3 24 | // ------------------------- 25 | 26 | audio, 27 | canvas, 28 | video { 29 | display: inline-block; 30 | *display: inline; 31 | *zoom: 1; 32 | } 33 | 34 | // Prevents modern browsers from displaying 'audio' without controls 35 | // ------------------------- 36 | 37 | audio:not([controls]) { 38 | display: none; 39 | } 40 | 41 | // Base settings 42 | // ------------------------- 43 | 44 | html { 45 | font-size: 100%; 46 | -webkit-text-size-adjust: 100%; 47 | -ms-text-size-adjust: 100%; 48 | } 49 | // Focus states 50 | a:focus { 51 | @include ctb-tab-focus(); 52 | } 53 | // Hover & Active 54 | a:hover, 55 | a:active { 56 | outline: 0; 57 | } 58 | 59 | // Prevents sub and sup affecting line-height in all browsers 60 | // ------------------------- 61 | 62 | sub, 63 | sup { 64 | position: relative; 65 | font-size: 75%; 66 | line-height: 0; 67 | vertical-align: baseline; 68 | } 69 | sup { 70 | top: -0.5em; 71 | } 72 | sub { 73 | bottom: -0.25em; 74 | } 75 | 76 | // Img border in a's and image quality 77 | // ------------------------- 78 | 79 | img { 80 | /* Responsive images (ensure images don't scale beyond their parents) */ 81 | max-width: 100%; /* Part 1: Set a maxium relative to the parent */ 82 | width: auto\9; /* IE7-8 need help adjusting responsive images */ 83 | height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ 84 | 85 | vertical-align: middle; 86 | border: 0; 87 | -ms-interpolation-mode: bicubic; 88 | } 89 | 90 | // Prevent max-width from affecting Google Maps 91 | #map_canvas img, 92 | .google-maps img { 93 | max-width: none; 94 | } 95 | 96 | // Forms 97 | // ------------------------- 98 | 99 | // Font size in all browsers, margin changes, misc consistency 100 | button, 101 | input, 102 | select, 103 | textarea { 104 | margin: 0; 105 | font-size: 100%; 106 | vertical-align: middle; 107 | } 108 | button, 109 | input { 110 | *overflow: visible; // Inner spacing ie IE6/7 111 | line-height: normal; // FF3/4 have !important on line-height in UA stylesheet 112 | } 113 | button::-moz-focus-inner, 114 | input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 115 | padding: 0; 116 | border: 0; 117 | } 118 | button, 119 | html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 120 | input[type="reset"], 121 | input[type="submit"] { 122 | -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. 123 | cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 124 | } 125 | label, 126 | select, 127 | button, 128 | input[type="button"], 129 | input[type="reset"], 130 | input[type="submit"], 131 | input[type="radio"], 132 | input[type="checkbox"] { 133 | cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 134 | } 135 | input[type="search"] { // Appearance in Safari/Chrome 136 | @include ctb-box-sizing(content-box); 137 | -webkit-appearance: textfield; 138 | } 139 | input[type="search"]::-webkit-search-decoration, 140 | input[type="search"]::-webkit-search-cancel-button { 141 | -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 142 | } 143 | textarea { 144 | overflow: auto; // Remove vertical scrollbar in IE6-9 145 | vertical-align: top; // Readability and alignment cross-browser 146 | } 147 | 148 | 149 | // Printing 150 | // ------------------------- 151 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 152 | 153 | @media print { 154 | 155 | * { 156 | text-shadow: none !important; 157 | color: #000 !important; // Black prints faster: h5bp.com/s 158 | background: transparent !important; 159 | box-shadow: none !important; 160 | } 161 | 162 | a, 163 | a:visited { 164 | text-decoration: underline; 165 | } 166 | 167 | a[href]:after { 168 | content: " (" attr(href) ")"; 169 | } 170 | 171 | abbr[title]:after { 172 | content: " (" attr(title) ")"; 173 | } 174 | 175 | // Don't show links for images, or javascript/internal links 176 | .ir a:after, 177 | a[href^="javascript:"]:after, 178 | a[href^="#"]:after { 179 | content: ""; 180 | } 181 | 182 | pre, 183 | blockquote { 184 | border: 1px solid #999; 185 | page-break-inside: avoid; 186 | } 187 | 188 | thead { 189 | display: table-header-group; // h5bp.com/t 190 | } 191 | 192 | tr, 193 | img { 194 | page-break-inside: avoid; 195 | } 196 | 197 | img { 198 | max-width: 100% !important; 199 | } 200 | 201 | @page { 202 | margin: 0.5cm; 203 | } 204 | 205 | p, 206 | h2, 207 | h3 { 208 | orphans: 3; 209 | widows: 3; 210 | } 211 | 212 | h2, 213 | h3 { 214 | page-break-after: avoid; 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // -------------------------------------------------- 4 | 5 | 6 | // Body text 7 | // ------------------------- 8 | 9 | p { 10 | margin: 0 0 $baseLineHeight / 2; 11 | } 12 | .lead { 13 | margin-bottom: $baseLineHeight; 14 | font-size: $baseFontSize * 1.5; 15 | font-weight: 200; 16 | line-height: $baseLineHeight * 1.5; 17 | } 18 | 19 | 20 | // Emphasis & misc 21 | // ------------------------- 22 | 23 | // Ex: 14px base font * 85% = about 12px 24 | small { font-size: 85%; } 25 | 26 | strong { font-weight: bold; } 27 | em { font-style: italic; } 28 | cite { font-style: normal; } 29 | 30 | // Utility classes 31 | .muted { color: $grayLight; } 32 | a.muted:hover { color: darken($grayLight, 10%); } 33 | 34 | .text-warning { color: $warningText; } 35 | a.text-warning:hover { color: darken($warningText, 10%); } 36 | 37 | .text-error { color: $errorText; } 38 | a.text-error:hover { color: darken($errorText, 10%); } 39 | 40 | .text-info { color: $infoText; } 41 | a.text-info:hover { color: darken($infoText, 10%); } 42 | 43 | .text-success { color: $successText; } 44 | a.text-success:hover { color: darken($successText, 10%); } 45 | 46 | 47 | // Headings 48 | // ------------------------- 49 | 50 | h1, h2, h3, h4, h5, h6 { 51 | margin: ($baseLineHeight / 2) 0; 52 | font-family: $headingsFontFamily; 53 | font-weight: $headingsFontWeight; 54 | line-height: $baseLineHeight; 55 | color: $headingsColor; 56 | text-rendering: optimizelegibility; // Fix the character spacing for headings 57 | small { 58 | font-weight: normal; 59 | line-height: 1; 60 | color: $grayLight; 61 | } 62 | } 63 | 64 | h1, 65 | h2, 66 | h3 { line-height: $baseLineHeight * 2; } 67 | 68 | h1 { font-size: $baseFontSize * 2.75; } // ~38px 69 | h2 { font-size: $baseFontSize * 2.25; } // ~32px 70 | h3 { font-size: $baseFontSize * 1.75; } // ~24px 71 | h4 { font-size: $baseFontSize * 1.25; } // ~18px 72 | h5 { font-size: $baseFontSize; } 73 | h6 { font-size: $baseFontSize * 0.85; } // ~12px 74 | 75 | h1 small { font-size: $baseFontSize * 1.75; } // ~24px 76 | h2 small { font-size: $baseFontSize * 1.25; } // ~18px 77 | h3 small { font-size: $baseFontSize; } 78 | h4 small { font-size: $baseFontSize; } 79 | 80 | 81 | // Page header 82 | // ------------------------- 83 | 84 | .page-header { 85 | padding-bottom: ($baseLineHeight / 2) - 1; 86 | margin: $baseLineHeight 0 ($baseLineHeight * 1.5); 87 | border-bottom: 1px solid $grayLighter; 88 | } 89 | 90 | 91 | 92 | // Lists 93 | // -------------------------------------------------- 94 | 95 | // Unordered and Ordered lists 96 | ul, ol { 97 | padding: 0; 98 | margin: 0 0 $baseLineHeight / 2 25px; 99 | } 100 | ul ul, 101 | ul ol, 102 | ol ol, 103 | ol ul { 104 | margin-bottom: 0; 105 | } 106 | li { 107 | line-height: $baseLineHeight; 108 | } 109 | 110 | // Remove default list styles 111 | ul.unstyled, 112 | ol.unstyled { 113 | margin-left: 0; 114 | list-style: none; 115 | } 116 | 117 | // Single-line list items 118 | ul.inline, 119 | ol.inline { 120 | margin-left: 0; 121 | list-style: none; 122 | & > li { 123 | display: inline-block; 124 | padding-left: 5px; 125 | padding-right: 5px; 126 | } 127 | } 128 | 129 | // Description Lists 130 | dl { 131 | margin-bottom: $baseLineHeight; 132 | } 133 | dt, 134 | dd { 135 | line-height: $baseLineHeight; 136 | } 137 | dt { 138 | font-weight: bold; 139 | } 140 | dd { 141 | margin-left: $baseLineHeight / 2; 142 | } 143 | // Horizontal layout (like forms) 144 | .dl-horizontal { 145 | @include ctb-clearfix(); // Ensure dl clears floats if empty dd elements present 146 | dt { 147 | float: left; 148 | width: $horizontalComponentOffset - 20; 149 | clear: left; 150 | text-align: right; 151 | @include ctb-text-overflow(); 152 | } 153 | dd { 154 | margin-left: $horizontalComponentOffset; 155 | } 156 | } 157 | 158 | // MISC 159 | // ---- 160 | 161 | // Horizontal rules 162 | hr { 163 | margin: $baseLineHeight 0; 164 | border: 0; 165 | border-top: 1px solid $hrBorder; 166 | border-bottom: 1px solid $white; 167 | } 168 | 169 | // Abbreviations and acronyms 170 | abbr[title], 171 | // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 172 | abbr[data-original-title] { 173 | cursor: help; 174 | border-bottom: 1px dotted $grayLight; 175 | } 176 | abbr.initialism { 177 | font-size: 90%; 178 | text-transform: uppercase; 179 | } 180 | 181 | // Blockquotes 182 | blockquote { 183 | padding: 0 0 0 15px; 184 | margin: 0 0 $baseLineHeight; 185 | border-left: 5px solid $grayLighter; 186 | p { 187 | margin-bottom: 0; 188 | @include ctb-font-shorthand(16px,300,$baseLineHeight * 1.25); 189 | } 190 | small { 191 | display: block; 192 | line-height: $baseLineHeight; 193 | color: $grayLight; 194 | &:before { 195 | content: '\2014 \00A0'; 196 | } 197 | } 198 | 199 | // Float right with text-align: right 200 | &.pull-right { 201 | float: right; 202 | padding-right: 15px; 203 | padding-left: 0; 204 | border-right: 5px solid $grayLighter; 205 | border-left: 0; 206 | p, 207 | small { 208 | text-align: right; 209 | } 210 | small { 211 | &:before { 212 | content: ''; 213 | } 214 | &:after { 215 | content: '\00A0 \2014'; 216 | } 217 | } 218 | } 219 | } 220 | 221 | // Quotes 222 | q:before, 223 | q:after, 224 | blockquote:before, 225 | blockquote:after { 226 | content: ""; 227 | } 228 | 229 | // Addresses 230 | address { 231 | display: block; 232 | margin-bottom: $baseLineHeight; 233 | font-style: normal; 234 | line-height: $baseLineHeight; 235 | } 236 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_buttons.scss: -------------------------------------------------------------------------------- 1 | @import "compass_twitter_bootstrap/mixins"; 2 | @import "compass_twitter_bootstrap/variables"; 3 | 4 | // 5 | // Buttons 6 | // -------------------------------------------------- 7 | 8 | 9 | // Base styles 10 | // -------------------------------------------------- 11 | 12 | // Core 13 | .btn { 14 | display: inline-block; 15 | @include ctb-ie7-inline-block(); 16 | padding: 4px 12px; 17 | margin-bottom: 0; // For input.btn 18 | font-size: $baseFontSize; 19 | line-height: $baseLineHeight; 20 | text-align: center; 21 | vertical-align: middle; 22 | cursor: pointer; 23 | @include ctb-buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); 24 | border: 1px solid $btnBorder; 25 | *border: 0; // Remove the border to prevent IE7's black border on input:focus 26 | border-bottom-color: darken($btnBorder, 10%); 27 | @include ctb-border-radius($baseBorderRadius); 28 | @include ctb-ie7-restore-left-whitespace(); // Give IE7 some love 29 | @include ctb-box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)}); 30 | 31 | // Hover state 32 | &:hover { 33 | color: $grayDark; 34 | text-decoration: none; 35 | background-position: 0 -15px; 36 | 37 | // transition is only when going to hover, otherwise the background 38 | // behind the gradient (there for IE<=9 fallback) gets mismatched 39 | @include ctb-transition(background-position .1s linear); 40 | } 41 | 42 | // Focus state for keyboard and accessibility 43 | &:focus { 44 | @include ctb-tab-focus(); 45 | } 46 | 47 | // Active state 48 | &.active, 49 | &:active { 50 | background-image: none; 51 | outline: 0; 52 | @include ctb-box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)}); 53 | } 54 | 55 | // Disabled state 56 | &.disabled, 57 | &[disabled] { 58 | cursor: default; 59 | background-image: none; 60 | @include ctb-opacity(65); 61 | @include ctb-box-shadow(none); 62 | } 63 | 64 | } 65 | 66 | 67 | 68 | // Button Sizes 69 | // -------------------------------------------------- 70 | 71 | // Large 72 | .btn-large { 73 | padding: $paddingLarge; 74 | font-size: $fontSizeLarge; 75 | @include ctb-border-radius($borderRadiusLarge); 76 | } 77 | .btn-large [class^="icon-"], 78 | .btn-large [class*=" icon-"] { 79 | margin-top: 4px; 80 | } 81 | 82 | // Small 83 | .btn-small { 84 | padding: $paddingSmall; 85 | font-size: $fontSizeSmall; 86 | @include ctb-border-radius($borderRadiusSmall); 87 | } 88 | .btn-small [class^="icon-"], 89 | .btn-small [class*=" icon-"] { 90 | margin-top: 0; 91 | } 92 | .btn-mini [class^="icon-"], 93 | .btn-mini [class*=" icon-"] { 94 | margin-top: -1px; 95 | } 96 | 97 | // Mini 98 | .btn-mini { 99 | padding: $paddingMini; 100 | font-size: $fontSizeMini; 101 | @include ctb-border-radius($borderRadiusSmall); 102 | } 103 | 104 | 105 | // Block button 106 | // ------------------------- 107 | 108 | .btn-block { 109 | display: block; 110 | width: 100%; 111 | padding-left: 0; 112 | padding-right: 0; 113 | @include ctb-box-sizing(border-box); 114 | } 115 | 116 | // Vertically space out multiple block buttons 117 | .btn-block + .btn-block { 118 | margin-top: 5px; 119 | } 120 | 121 | // Specificity overrides 122 | input[type="submit"], 123 | input[type="reset"], 124 | input[type="button"] { 125 | &.btn-block { 126 | width: 100%; 127 | } 128 | } 129 | 130 | 131 | 132 | // Alternate buttons 133 | // -------------------------------------------------- 134 | 135 | // Provide *some* extra contrast for those who can get it 136 | .btn-primary.active, 137 | .btn-warning.active, 138 | .btn-danger.active, 139 | .btn-success.active, 140 | .btn-info.active, 141 | .btn-inverse.active { 142 | color: rgba(255,255,255,.75); 143 | } 144 | 145 | // Set the backgrounds 146 | // ------------------------- 147 | .btn { 148 | // reset here as of 2.0.3 due to Recess property order 149 | border-color: #c5c5c5; 150 | border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); 151 | } 152 | .btn-primary { 153 | @include ctb-buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 154 | } 155 | // Warning appears are orange 156 | .btn-warning { 157 | @include ctb-buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); 158 | } 159 | // Danger and error appear as red 160 | .btn-danger { 161 | @include ctb-buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); 162 | } 163 | // Success appears as green 164 | .btn-success { 165 | @include ctb-buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); 166 | } 167 | // Info appears as a neutral blue 168 | .btn-info { 169 | @include ctb-buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); 170 | } 171 | // Inverse appears as dark gray 172 | .btn-inverse { 173 | @include ctb-buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); 174 | } 175 | 176 | 177 | // Cross-browser Jank 178 | // -------------------------------------------------- 179 | 180 | button.btn, 181 | input[type="submit"].btn { 182 | 183 | // Firefox 3.6 only I believe 184 | &::-moz-focus-inner { 185 | padding: 0; 186 | border: 0; 187 | } 188 | 189 | // IE7 has some default padding on button controls 190 | *padding-top: 3px; 191 | *padding-bottom: 3px; 192 | 193 | &.btn-large { 194 | *padding-top: 7px; 195 | *padding-bottom: 7px; 196 | } 197 | &.btn-small { 198 | *padding-top: 3px; 199 | *padding-bottom: 3px; 200 | } 201 | &.btn-mini { 202 | *padding-top: 1px; 203 | *padding-bottom: 1px; 204 | } 205 | } 206 | 207 | 208 | // Link buttons 209 | // -------------------------------------------------- 210 | 211 | // Make a button look and behave like a link 212 | .btn-link, 213 | .btn-link:active, 214 | .btn-link[disabled] { 215 | background-color: transparent; 216 | background-image: none; 217 | @include ctb-box-shadow(none); 218 | } 219 | .btn-link { 220 | border-color: transparent; 221 | cursor: pointer; 222 | color: $linkColor; 223 | @include ctb-border-radius(0); 224 | } 225 | .btn-link:hover { 226 | color: $linkColorHover; 227 | text-decoration: underline; 228 | background-color: transparent; 229 | } 230 | .btn-link[disabled]:hover { 231 | color: $grayDark; 232 | text-decoration: none; 233 | } 234 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_dropdowns.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Dropdown menus 3 | // -------------------------------------------------- 4 | 5 | 6 | // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns 7 | .dropup, 8 | .dropdown { 9 | position: relative; 10 | } 11 | .dropdown-toggle { 12 | // The caret makes the toggle a bit too tall in IE7 13 | *margin-bottom: -3px; 14 | } 15 | .dropdown-toggle:active, 16 | .open .dropdown-toggle { 17 | outline: 0; 18 | } 19 | 20 | // Dropdown arrow/caret 21 | // -------------------- 22 | .caret { 23 | display: inline-block; 24 | width: 0; 25 | height: 0; 26 | vertical-align: top; 27 | border-top: 4px solid $black; 28 | border-right: 4px solid transparent; 29 | border-left: 4px solid transparent; 30 | content: ""; 31 | } 32 | 33 | // Place the caret 34 | .dropdown .caret { 35 | margin-top: 8px; 36 | margin-left: 2px; 37 | } 38 | 39 | // The dropdown menu (ul) 40 | // ---------------------- 41 | .dropdown-menu { 42 | position: absolute; 43 | top: 100%; 44 | left: 0; 45 | z-index: $zindexDropdown; 46 | display: none; // none by default, but block on "open" of the menu 47 | float: left; 48 | min-width: 160px; 49 | padding: 5px 0; 50 | margin: 2px 0 0; // override default ul 51 | list-style: none; 52 | background-color: $dropdownBackground; 53 | border: 1px solid #ccc; // Fallback for IE7-8 54 | border: 1px solid $dropdownBorder; 55 | *border-right-width: 2px; 56 | *border-bottom-width: 2px; 57 | @include ctb-border-radius(6px); 58 | @include ctb-box-shadow(0 5px 10px rgba(0,0,0,.2)); 59 | -webkit-background-clip: padding-box; 60 | -moz-background-clip: padding; 61 | background-clip: padding-box; 62 | 63 | // Aligns the dropdown menu to right 64 | &.pull-right { 65 | right: 0; 66 | left: auto; 67 | } 68 | 69 | // Dividers (basically an hr) within the dropdown 70 | .divider { 71 | @include ctb-nav-divider($dropdownDividerTop, $dropdownDividerBottom); 72 | } 73 | 74 | // Links within the dropdown menu 75 | li > a { 76 | display: block; 77 | padding: 3px 20px; 78 | clear: both; 79 | font-weight: normal; 80 | line-height: $baseLineHeight; 81 | color: $dropdownLinkColor; 82 | white-space: nowrap; 83 | } 84 | } 85 | 86 | // Hover state 87 | // ----------- 88 | .dropdown-menu li > a:hover, 89 | .dropdown-menu li > a:focus, 90 | .dropdown-submenu:hover > a { 91 | text-decoration: none; 92 | color: $dropdownLinkColorHover; 93 | @include ctb-gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%)); 94 | } 95 | 96 | // Active state 97 | // ------------ 98 | .dropdown-menu .active > a, 99 | .dropdown-menu .active > a:hover { 100 | color: $dropdownLinkColorActive; 101 | text-decoration: none; 102 | outline: 0; 103 | @include ctb-gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%)); 104 | } 105 | 106 | // Disabled state 107 | // -------------- 108 | // Gray out text and ensure the hover state remains gray 109 | .dropdown-menu .disabled > a, 110 | .dropdown-menu .disabled > a:hover { 111 | color: $grayLight; 112 | } 113 | // Nuke hover effects 114 | .dropdown-menu .disabled > a:hover { 115 | text-decoration: none; 116 | background-color: transparent; 117 | background-image: none; // Remove CSS gradient 118 | @include ctb-gradient-reset-filter(); 119 | cursor: default; 120 | } 121 | 122 | // Open state for the dropdown 123 | // --------------------------- 124 | .open { 125 | // IE7's z-index only goes to the nearest positioned ancestor, which would 126 | // make the menu appear below buttons that appeared later on the page 127 | *z-index: $zindexDropdown; 128 | 129 | & > .dropdown-menu { 130 | display: block; 131 | } 132 | } 133 | 134 | // Right aligned dropdowns 135 | // --------------------------- 136 | .pull-right > .dropdown-menu { 137 | right: 0; 138 | left: auto; 139 | } 140 | 141 | // Allow for dropdowns to go bottom up (aka, dropup-menu) 142 | // ------------------------------------------------------ 143 | // Just add .dropup after the standard .dropdown class and you're set, bro. 144 | // TODO: abstract this so that the navbar fixed styles are not placed here? 145 | .dropup, 146 | .navbar-fixed-bottom .dropdown { 147 | // Reverse the caret 148 | .caret { 149 | border-top: 0; 150 | border-bottom: 4px solid $black; 151 | content: ""; 152 | } 153 | // Different positioning for bottom up menu 154 | .dropdown-menu { 155 | top: auto; 156 | bottom: 100%; 157 | margin-bottom: 1px; 158 | } 159 | } 160 | 161 | // Sub menus 162 | // --------------------------- 163 | .dropdown-submenu { 164 | position: relative; 165 | } 166 | // Default dropdowns 167 | .dropdown-submenu > .dropdown-menu { 168 | top: 0; 169 | left: 100%; 170 | margin-top: -6px; 171 | margin-left: -1px; 172 | @include ctb-border-radius(0 6px 6px 6px); 173 | } 174 | .dropdown-submenu:hover > .dropdown-menu { 175 | display: block; 176 | } 177 | 178 | // Dropups 179 | .dropup .dropdown-submenu > .dropdown-menu { 180 | top: auto; 181 | bottom: 0; 182 | margin-top: 0; 183 | margin-bottom: -2px; 184 | @include ctb-border-radius(5px 5px 5px 0); 185 | } 186 | 187 | // Caret to indicate there is a submenu 188 | .dropdown-submenu > a:after { 189 | display: block; 190 | content: " "; 191 | float: right; 192 | width: 0; 193 | height: 0; 194 | border-color: transparent; 195 | border-style: solid; 196 | border-width: 5px 0 5px 5px; 197 | border-left-color: darken($dropdownBackground, 20%); 198 | margin-top: 5px; 199 | margin-right: -10px; 200 | } 201 | .dropdown-submenu:hover > a:after { 202 | border-left-color: $dropdownLinkColorHover; 203 | } 204 | 205 | // Left aligned submenus 206 | .dropdown-submenu.pull-left { 207 | // Undo the float 208 | // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. 209 | float: none; 210 | 211 | // Positioning the submenu 212 | > .dropdown-menu { 213 | left: -100%; 214 | margin-left: 10px; 215 | @include ctb-border-radius(6px 0 6px 6px); 216 | } 217 | } 218 | 219 | // Tweak nav headers 220 | // ----------------- 221 | // Increase padding from 15px to 20px on sides 222 | .dropdown .dropdown-menu .nav-header { 223 | padding-left: 20px; 224 | padding-right: 20px; 225 | } 226 | 227 | // Typeahead 228 | // --------- 229 | .typeahead { 230 | z-index: 1051; 231 | margin-top: 2px; // give it some space to breathe 232 | @include ctb-border-radius($baseBorderRadius); 233 | } 234 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_button-groups.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Button groups 3 | // -------------------------------------------------- 4 | 5 | 6 | // Make the div behave like a button 7 | .btn-group { 8 | position: relative; 9 | display: inline-block; 10 | @include ctb-ie7-inline-block(); 11 | font-size: 0; // remove as part 1 of font-size inline-block hack 12 | vertical-align: middle; // match .btn alignment given font-size hack above 13 | white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) 14 | @include ctb-ie7-restore-left-whitespace(); 15 | } 16 | 17 | // Space out series of button groups 18 | .btn-group + .btn-group { 19 | margin-left: 5px; 20 | } 21 | 22 | // Optional: Group multiple button groups together for a toolbar 23 | .btn-toolbar { 24 | font-size: 0; // Hack to remove whitespace that results from using inline-block 25 | margin-top: $baseLineHeight / 2; 26 | margin-bottom: $baseLineHeight / 2; 27 | > .btn + .btn, 28 | > .btn-group + .btn, 29 | > .btn + .btn-group { 30 | margin-left: 5px; 31 | } 32 | } 33 | 34 | // Float them, remove border radius, then re-add to first and last elements 35 | .btn-group > .btn { 36 | position: relative; 37 | @include ctb-border-radius(0); 38 | } 39 | .btn-group > .btn + .btn { 40 | margin-left: -1px; 41 | } 42 | .btn-group > .btn, 43 | .btn-group > .dropdown-menu, 44 | .btn-group > .popover { 45 | font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack 46 | } 47 | 48 | // Reset fonts for other sizes 49 | .btn-group > .btn-mini { 50 | font-size: $fontSizeMini; 51 | } 52 | .btn-group > .btn-small { 53 | font-size: $fontSizeSmall; 54 | } 55 | .btn-group > .btn-large { 56 | font-size: $fontSizeLarge; 57 | } 58 | 59 | // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match 60 | .btn-group > .btn:first-child { 61 | margin-left: 0; 62 | @include ctb-border-top-left-radius($baseBorderRadius); 63 | @include ctb-border-bottom-left-radius($baseBorderRadius); 64 | } 65 | // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it 66 | .btn-group > .btn:last-child, 67 | .btn-group > .dropdown-toggle { 68 | @include ctb-border-top-right-radius($baseBorderRadius); 69 | @include ctb-border-bottom-right-radius($baseBorderRadius); 70 | } 71 | // Reset corners for large buttons 72 | .btn-group > .btn.large:first-child { 73 | margin-left: 0; 74 | @include ctb-border-top-left-radius($borderRadiusLarge); 75 | @include ctb-border-bottom-left-radius($borderRadiusLarge); 76 | } 77 | .btn-group > .btn.large:last-child, 78 | .btn-group > .large.dropdown-toggle { 79 | @include ctb-border-top-right-radius($borderRadiusLarge); 80 | @include ctb-border-bottom-right-radius($borderRadiusLarge); 81 | } 82 | 83 | // On hover/focus/active, bring the proper btn to front 84 | .btn-group > .btn:hover, 85 | .btn-group > .btn:focus, 86 | .btn-group > .btn:active, 87 | .btn-group > .btn.active { 88 | z-index: 2; 89 | } 90 | 91 | // On active and open, don't show outline 92 | .btn-group .dropdown-toggle:active, 93 | .btn-group.open .dropdown-toggle { 94 | outline: 0; 95 | } 96 | 97 | 98 | 99 | // Split button dropdowns 100 | // ---------------------- 101 | 102 | // Give the line between buttons some depth 103 | .btn-group > .btn + .dropdown-toggle { 104 | padding-left: 8px; 105 | padding-right: 8px; 106 | @include ctb-box-shadow(#{inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)}); 107 | *padding-top: 5px; 108 | *padding-bottom: 5px; 109 | } 110 | .btn-group > .btn-mini + .dropdown-toggle { 111 | padding-left: 5px; 112 | padding-right: 5px; 113 | *padding-top: 2px; 114 | *padding-bottom: 2px; 115 | } 116 | .btn-group > .btn-small + .dropdown-toggle { 117 | *padding-top: 5px; 118 | *padding-bottom: 4px; 119 | } 120 | .btn-group > .btn-large + .dropdown-toggle { 121 | padding-left: 12px; 122 | padding-right: 12px; 123 | *padding-top: 7px; 124 | *padding-bottom: 7px; 125 | } 126 | 127 | .btn-group.open { 128 | 129 | // The clickable button for toggling the menu 130 | // Remove the gradient and set the same inset shadow as the :active state 131 | .dropdown-toggle { 132 | background-image: none; 133 | @include ctb-box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)}); 134 | } 135 | 136 | // Keep the hover's background when dropdown is open 137 | .btn.dropdown-toggle { 138 | background-color: $btnBackgroundHighlight; 139 | } 140 | .btn-primary.dropdown-toggle { 141 | background-color: $btnPrimaryBackgroundHighlight; 142 | } 143 | .btn-warning.dropdown-toggle { 144 | background-color: $btnWarningBackgroundHighlight; 145 | } 146 | .btn-danger.dropdown-toggle { 147 | background-color: $btnDangerBackgroundHighlight; 148 | } 149 | .btn-success.dropdown-toggle { 150 | background-color: $btnSuccessBackgroundHighlight; 151 | } 152 | .btn-info.dropdown-toggle { 153 | background-color: $btnInfoBackgroundHighlight; 154 | } 155 | .btn-inverse.dropdown-toggle { 156 | background-color: $btnInverseBackgroundHighlight; 157 | } 158 | } 159 | 160 | 161 | // Reposition the caret 162 | .btn .caret { 163 | margin-top: 8px; 164 | margin-left: 0; 165 | } 166 | // Carets in other button sizes 167 | .btn-mini .caret, 168 | .btn-small .caret, 169 | .btn-large .caret { 170 | margin-top: 6px; 171 | } 172 | .btn-large .caret { 173 | border-left-width: 5px; 174 | border-right-width: 5px; 175 | border-top-width: 5px; 176 | } 177 | // Upside down carets for .dropup 178 | .dropup .btn-large .caret { 179 | border-bottom-width: 5px; 180 | } 181 | 182 | 183 | 184 | // Account for other colors 185 | .btn-primary, 186 | .btn-warning, 187 | .btn-danger, 188 | .btn-info, 189 | .btn-success, 190 | .btn-inverse { 191 | .caret { 192 | border-top-color: $white; 193 | border-bottom-color: $white; 194 | } 195 | } 196 | 197 | 198 | 199 | // Vertical button groups 200 | // ---------------------- 201 | 202 | .btn-group-vertical { 203 | display: inline-block; // makes buttons only take up the width they need 204 | @include ctb-ie7-inline-block(); 205 | } 206 | .btn-group-vertical > .btn { 207 | display: block; 208 | float: none; 209 | max-width: 100%; 210 | @include ctb-border-radius(0); 211 | } 212 | .btn-group-vertical > .btn + .btn { 213 | margin-left: 0; 214 | margin-top: -1px; 215 | } 216 | .btn-group-vertical > .btn:first-child { 217 | @include ctb-border-radius($baseBorderRadius $baseBorderRadius 0 0); 218 | } 219 | .btn-group-vertical > .btn:last-child { 220 | @include ctb-border-radius(0 0 $baseBorderRadius $baseBorderRadius); 221 | } 222 | .btn-group-vertical > .btn-large:first-child { 223 | @include ctb-border-radius($borderRadiusLarge $borderRadiusLarge 0 0); 224 | } 225 | .btn-group-vertical > .btn-large:last-child { 226 | @include ctb-border-radius(0 0 $borderRadiusLarge $borderRadiusLarge); 227 | } 228 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_tables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Tables 3 | // -------------------------------------------------- 4 | 5 | 6 | // BASE TABLES 7 | // ----------------- 8 | 9 | table { 10 | max-width: 100%; 11 | background-color: $tableBackground; 12 | border-collapse: collapse; 13 | border-spacing: 0; 14 | } 15 | 16 | // BASELINE STYLES 17 | // --------------- 18 | 19 | .table { 20 | width: 100%; 21 | margin-bottom: $baseLineHeight; 22 | // Cells 23 | th, 24 | td { 25 | padding: 8px; 26 | line-height: $baseLineHeight; 27 | text-align: left; 28 | vertical-align: top; 29 | border-top: 1px solid $tableBorder; 30 | } 31 | th { 32 | font-weight: bold; 33 | } 34 | // Bottom align for column headings 35 | thead th { 36 | vertical-align: bottom; 37 | } 38 | // Remove top border from thead by default 39 | caption + thead tr:first-child th, 40 | caption + thead tr:first-child td, 41 | colgroup + thead tr:first-child th, 42 | colgroup + thead tr:first-child td, 43 | thead:first-child tr:first-child th, 44 | thead:first-child tr:first-child td { 45 | border-top: 0; 46 | } 47 | // Account for multiple tbody instances 48 | tbody + tbody { 49 | border-top: 2px solid $tableBorder; 50 | } 51 | 52 | // Nesting 53 | .table { 54 | background-color: $bodyBackground; 55 | } 56 | } 57 | 58 | 59 | 60 | // CONDENSED TABLE W/ HALF PADDING 61 | // ------------------------------- 62 | 63 | .table-condensed { 64 | th, 65 | td { 66 | padding: 4px 5px; 67 | } 68 | } 69 | 70 | 71 | // BORDERED VERSION 72 | // ---------------- 73 | 74 | .table-bordered { 75 | border: 1px solid $tableBorder; 76 | border-collapse: separate; // Done so we can round those corners! 77 | *border-collapse: collapse; // IE7 can't round corners anyway 78 | border-left: 0; 79 | @include ctb-border-radius($baseBorderRadius); 80 | th, 81 | td { 82 | border-left: 1px solid $tableBorder; 83 | } 84 | // Prevent a double border 85 | caption + thead tr:first-child th, 86 | caption + tbody tr:first-child th, 87 | caption + tbody tr:first-child td, 88 | colgroup + thead tr:first-child th, 89 | colgroup + tbody tr:first-child th, 90 | colgroup + tbody tr:first-child td, 91 | thead:first-child tr:first-child th, 92 | tbody:first-child tr:first-child th, 93 | tbody:first-child tr:first-child td { 94 | border-top: 0; 95 | } 96 | // For first th or td in the first row in the first thead or tbody 97 | thead:first-child tr:first-child > th:first-child, 98 | tbody:first-child tr:first-child > td:first-child { 99 | @include ctb-border-top-left-radius($baseBorderRadius); 100 | } 101 | thead:first-child tr:first-child > th:last-child, 102 | tbody:first-child tr:first-child > td:last-child { 103 | @include ctb-border-top-right-radius($baseBorderRadius); 104 | } 105 | // For first th or td in the last row in the last thead or tbody 106 | thead:last-child tr:last-child > th:first-child, 107 | tbody:last-child tr:last-child > td:first-child, 108 | tfoot:last-child tr:last-child > td:first-child { 109 | @include ctb-border-bottom-left-radius($baseBorderRadius); 110 | } 111 | thead:last-child tr:last-child > th:last-child, 112 | tbody:last-child tr:last-child > td:last-child, 113 | tfoot:last-child tr:last-child > td:last-child { 114 | @include ctb-border-bottom-right-radius($baseBorderRadius); 115 | } 116 | 117 | // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot 118 | tfoot + tbody:last-child tr:last-child td:first-child { 119 | @include ctb-border-bottom-left-radius(0); 120 | } 121 | tfoot + tbody:last-child tr:last-child td:last-child { 122 | @include ctb-border-bottom-right-radius(0); 123 | } 124 | 125 | 126 | // Special fixes to round the left border on the first td/th 127 | caption + thead tr:first-child th:first-child, 128 | caption + tbody tr:first-child td:first-child, 129 | colgroup + thead tr:first-child th:first-child, 130 | colgroup + tbody tr:first-child td:first-child { 131 | @include ctb-border-top-left-radius($baseBorderRadius); 132 | } 133 | caption + thead tr:first-child th:last-child, 134 | caption + tbody tr:first-child td:last-child, 135 | colgroup + thead tr:first-child th:last-child, 136 | colgroup + tbody tr:first-child td:last-child { 137 | @include ctb-border-top-right-radius($baseBorderRadius); 138 | } 139 | 140 | } 141 | 142 | 143 | 144 | 145 | // ZEBRA-STRIPING 146 | // -------------- 147 | 148 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) 149 | .table-striped { 150 | tbody { 151 | > tr:nth-child(odd) > td, 152 | > tr:nth-child(odd) > th { 153 | background-color: $tableBackgroundAccent; 154 | } 155 | } 156 | } 157 | 158 | 159 | // HOVER EFFECT 160 | // ------------ 161 | // Placed here since it has to come after the potential zebra striping 162 | .table-hover { 163 | tbody { 164 | tr:hover td, 165 | tr:hover th { 166 | background-color: $tableBackgroundHover; 167 | } 168 | } 169 | } 170 | 171 | 172 | // TABLE CELL SIZING 173 | // ----------------- 174 | 175 | // Reset default grid behavior 176 | table td[class*="span"], 177 | table th[class*="span"], 178 | .row-fluid table td[class*="span"], 179 | .row-fluid table th[class*="span"] { 180 | display: table-cell; 181 | float: none; // undo default grid column styles 182 | margin-left: 0; // undo default grid column styles 183 | } 184 | 185 | // Change the column widths to account for td/th padding 186 | .table td, 187 | .table th { 188 | &.span1 { @include ctb-tableColumns(1); } 189 | &.span2 { @include ctb-tableColumns(2); } 190 | &.span3 { @include ctb-tableColumns(3); } 191 | &.span4 { @include ctb-tableColumns(4); } 192 | &.span5 { @include ctb-tableColumns(5); } 193 | &.span6 { @include ctb-tableColumns(6); } 194 | &.span7 { @include ctb-tableColumns(7); } 195 | &.span8 { @include ctb-tableColumns(8); } 196 | &.span9 { @include ctb-tableColumns(9); } 197 | &.span10 { @include ctb-tableColumns(10); } 198 | &.span11 { @include ctb-tableColumns(11); } 199 | &.span12 { @include ctb-tableColumns(12); } 200 | } 201 | 202 | 203 | 204 | // TABLE BACKGROUNDS 205 | // ----------------- 206 | // Exact selectors below required to override .table-striped 207 | 208 | .table tbody tr { 209 | &.success td { 210 | background-color: $successBackground; 211 | } 212 | &.error td { 213 | background-color: $errorBackground; 214 | } 215 | &.warning td { 216 | background-color: $warningBackground; 217 | } 218 | &.info td { 219 | background-color: $infoBackground; 220 | } 221 | } 222 | 223 | // Hover states for .table-hover 224 | .table-hover tbody tr { 225 | &.success:hover td { 226 | background-color: darken($successBackground, 5%); 227 | } 228 | &.error:hover td { 229 | background-color: darken($errorBackground, 5%); 230 | } 231 | &.warning:hover td { 232 | background-color: darken($warningBackground, 5%); 233 | } 234 | &.info:hover td { 235 | background-color: darken($infoBackground, 5%); 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; 3 | var mountFolder = function (connect, dir) { 4 | return connect.static(require('path').resolve(dir)); 5 | }; 6 | 7 | module.exports = function (grunt) { 8 | // load all grunt tasks 9 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 10 | 11 | // configurable paths 12 | var yeomanConfig = { 13 | app: 'app', 14 | dist: 'dist' 15 | }; 16 | 17 | try { 18 | yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app; 19 | } catch (e) {} 20 | 21 | grunt.initConfig({ 22 | yeoman: yeomanConfig, 23 | watch: { 24 | coffee: { 25 | files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], 26 | tasks: ['coffee:dist'] 27 | }, 28 | coffeeTest: { 29 | files: ['test/spec/{,*/}*.coffee'], 30 | tasks: ['coffee:test'] 31 | }, 32 | compass: { 33 | files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], 34 | tasks: ['compass'] 35 | }, 36 | livereload: { 37 | files: [ 38 | '<%= yeoman.app %>/{,*/}*.html', 39 | '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', 40 | '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', 41 | '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 42 | ], 43 | tasks: ['livereload'] 44 | } 45 | }, 46 | connect: { 47 | options: { 48 | port: 9000, 49 | // Change this to '0.0.0.0' to access the server from outside. 50 | hostname: 'localhost' 51 | }, 52 | livereload: { 53 | options: { 54 | middleware: function (connect) { 55 | return [ 56 | lrSnippet, 57 | mountFolder(connect, '.tmp'), 58 | mountFolder(connect, yeomanConfig.app) 59 | ]; 60 | } 61 | } 62 | }, 63 | test: { 64 | options: { 65 | middleware: function (connect) { 66 | return [ 67 | mountFolder(connect, '.tmp'), 68 | mountFolder(connect, 'test') 69 | ]; 70 | } 71 | } 72 | } 73 | }, 74 | open: { 75 | server: { 76 | url: 'http://localhost:<%= connect.options.port %>' 77 | } 78 | }, 79 | clean: { 80 | dist: { 81 | files: [{ 82 | dot: true, 83 | src: [ 84 | '.tmp', 85 | '<%= yeoman.dist %>/*', 86 | '!<%= yeoman.dist %>/.git*' 87 | ] 88 | }] 89 | }, 90 | server: '.tmp' 91 | }, 92 | jshint: { 93 | options: { 94 | jshintrc: '.jshintrc' 95 | }, 96 | all: [ 97 | 'Gruntfile.js', 98 | '<%= yeoman.app %>/scripts/{,*/}*.js' 99 | ] 100 | }, 101 | karma: { 102 | unit: { 103 | configFile: 'karma.conf.js', 104 | singleRun: true 105 | } 106 | }, 107 | coffee: { 108 | dist: { 109 | files: [{ 110 | expand: true, 111 | cwd: '<%= yeoman.app %>/scripts', 112 | src: '{,*/}*.coffee', 113 | dest: '.tmp/scripts', 114 | ext: '.js' 115 | }] 116 | }, 117 | test: { 118 | files: [{ 119 | expand: true, 120 | cwd: 'test/spec', 121 | src: '{,*/}*.coffee', 122 | dest: '.tmp/spec', 123 | ext: '.js' 124 | }] 125 | } 126 | }, 127 | compass: { 128 | options: { 129 | sassDir: '<%= yeoman.app %>/styles', 130 | cssDir: '.tmp/styles', 131 | imagesDir: '<%= yeoman.app %>/images', 132 | javascriptsDir: '<%= yeoman.app %>/scripts', 133 | fontsDir: '<%= yeoman.app %>/styles/fonts', 134 | importPath: '<%= yeoman.app %>/components', 135 | relativeAssets: true 136 | }, 137 | dist: {}, 138 | server: { 139 | options: { 140 | debugInfo: true 141 | } 142 | } 143 | }, 144 | concat: { 145 | dist: { 146 | files: { 147 | '<%= yeoman.dist %>/scripts/scripts.js': [ 148 | '.tmp/scripts/{,*/}*.js', 149 | '<%= yeoman.app %>/scripts/{,*/}*.js' 150 | ] 151 | } 152 | } 153 | }, 154 | useminPrepare: { 155 | html: '<%= yeoman.app %>/index.html', 156 | options: { 157 | dest: '<%= yeoman.dist %>' 158 | } 159 | }, 160 | usemin: { 161 | html: ['<%= yeoman.dist %>/{,*/}*.html'], 162 | css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 163 | options: { 164 | dirs: ['<%= yeoman.dist %>'] 165 | } 166 | }, 167 | imagemin: { 168 | dist: { 169 | files: [{ 170 | expand: true, 171 | cwd: '<%= yeoman.app %>/images', 172 | src: '{,*/}*.{png,jpg,jpeg}', 173 | dest: '<%= yeoman.dist %>/images' 174 | }] 175 | } 176 | }, 177 | cssmin: { 178 | dist: { 179 | files: { 180 | '<%= yeoman.dist %>/styles/main.css': [ 181 | '.tmp/styles/{,*/}*.css', 182 | '<%= yeoman.app %>/styles/{,*/}*.css' 183 | ] 184 | } 185 | } 186 | }, 187 | htmlmin: { 188 | dist: { 189 | options: { 190 | /*removeCommentsFromCDATA: true, 191 | // https://github.com/yeoman/grunt-usemin/issues/44 192 | //collapseWhitespace: true, 193 | collapseBooleanAttributes: true, 194 | removeAttributeQuotes: true, 195 | removeRedundantAttributes: true, 196 | useShortDoctype: true, 197 | removeEmptyAttributes: true, 198 | removeOptionalTags: true*/ 199 | }, 200 | files: [{ 201 | expand: true, 202 | cwd: '<%= yeoman.app %>', 203 | src: ['*.html', 'views/*.html'], 204 | dest: '<%= yeoman.dist %>' 205 | }] 206 | } 207 | }, 208 | cdnify: { 209 | dist: { 210 | html: ['<%= yeoman.dist %>/*.html'] 211 | } 212 | }, 213 | ngmin: { 214 | dist: { 215 | files: [{ 216 | expand: true, 217 | cwd: '<%= yeoman.dist %>/scripts', 218 | src: '*.js', 219 | dest: '<%= yeoman.dist %>/scripts' 220 | }] 221 | } 222 | }, 223 | uglify: { 224 | dist: { 225 | files: { 226 | '<%= yeoman.dist %>/scripts/scripts.js': [ 227 | '<%= yeoman.dist %>/scripts/scripts.js' 228 | ], 229 | } 230 | } 231 | }, 232 | rev: { 233 | dist: { 234 | files: { 235 | src: [ 236 | '<%= yeoman.dist %>/scripts/{,*/}*.js', 237 | '<%= yeoman.dist %>/styles/{,*/}*.css', 238 | '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}', 239 | '<%= yeoman.dist %>/styles/fonts/*' 240 | ] 241 | } 242 | } 243 | }, 244 | copy: { 245 | dist: { 246 | files: [{ 247 | expand: true, 248 | dot: true, 249 | cwd: '<%= yeoman.app %>', 250 | dest: '<%= yeoman.dist %>', 251 | src: [ 252 | '*.{ico,txt}', 253 | '.htaccess', 254 | 'components/**/*', 255 | 'images/{,*/}*.{gif,webp}' 256 | ] 257 | }] 258 | } 259 | } 260 | }); 261 | 262 | grunt.renameTask('regarde', 'watch'); 263 | 264 | grunt.registerTask('server', [ 265 | 'clean:server', 266 | 'coffee:dist', 267 | 'compass:server', 268 | 'livereload-start', 269 | 'connect:livereload', 270 | 'open', 271 | 'watch' 272 | ]); 273 | 274 | grunt.registerTask('test', [ 275 | 'clean:server', 276 | 'coffee', 277 | 'compass', 278 | 'connect:test', 279 | 'karma' 280 | ]); 281 | 282 | grunt.registerTask('build', [ 283 | 'clean:dist', 284 | 'jshint', 285 | 'test', 286 | 'coffee', 287 | 'compass:dist', 288 | 'useminPrepare', 289 | 'imagemin', 290 | 'cssmin', 291 | 'htmlmin', 292 | 'concat', 293 | 'copy', 294 | 'cdnify', 295 | 'ngmin', 296 | 'uglify', 297 | 'rev', 298 | 'usemin' 299 | ]); 300 | 301 | grunt.registerTask('default', ['build']); 302 | }; 303 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_navs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navs 3 | // -------------------------------------------------- 4 | 5 | 6 | // BASE CLASS 7 | // ---------- 8 | 9 | .nav { 10 | margin-left: 0; 11 | margin-bottom: $baseLineHeight; 12 | list-style: none; 13 | } 14 | 15 | // Make links block level 16 | .nav > li > a { 17 | display: block; 18 | } 19 | .nav > li > a:hover { 20 | text-decoration: none; 21 | background-color: $grayLighter; 22 | } 23 | 24 | // Prevent IE8 from misplacing imgs 25 | // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 26 | .nav > li > a > img { 27 | max-width: none; 28 | } 29 | 30 | // Redeclare pull classes because of specifity 31 | .nav > .pull-right { 32 | float: right; 33 | } 34 | 35 | // Nav headers (for dropdowns and lists) 36 | .nav-header { 37 | display: block; 38 | padding: 3px 15px; 39 | font-size: 11px; 40 | font-weight: bold; 41 | line-height: $baseLineHeight; 42 | color: $grayLight; 43 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 44 | text-transform: uppercase; 45 | } 46 | // Space them out when they follow another list item (link) 47 | .nav li + .nav-header { 48 | margin-top: 9px; 49 | } 50 | 51 | 52 | 53 | // NAV LIST 54 | // -------- 55 | 56 | .nav-list { 57 | padding-left: 15px; 58 | padding-right: 15px; 59 | margin-bottom: 0; 60 | } 61 | .nav-list > li > a, 62 | .nav-list .nav-header { 63 | margin-left: -15px; 64 | margin-right: -15px; 65 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 66 | } 67 | .nav-list > li > a { 68 | padding: 3px 15px; 69 | } 70 | .nav-list > .active > a, 71 | .nav-list > .active > a:hover { 72 | color: $white; 73 | text-shadow: 0 -1px 0 rgba(0,0,0,.2); 74 | background-color: $linkColor; 75 | } 76 | .nav-list [class^="icon-"], 77 | .nav-list [class*=" icon-"] { 78 | margin-right: 2px; 79 | } 80 | // Dividers (basically an hr) within the dropdown 81 | .nav-list .divider { 82 | @include ctb-nav-divider(); 83 | } 84 | 85 | 86 | 87 | // TABS AND PILLS 88 | // ------------- 89 | 90 | // Common styles 91 | .nav-tabs, 92 | .nav-pills { 93 | @include ctb-clearfix(); 94 | } 95 | .nav-tabs > li, 96 | .nav-pills > li { 97 | float: left; 98 | } 99 | .nav-tabs > li > a, 100 | .nav-pills > li > a { 101 | padding-right: 12px; 102 | padding-left: 12px; 103 | margin-right: 2px; 104 | line-height: 14px; // keeps the overall height an even number 105 | } 106 | 107 | // TABS 108 | // ---- 109 | 110 | // Give the tabs something to sit on 111 | .nav-tabs { 112 | border-bottom: 1px solid #ddd; 113 | } 114 | // Make the list-items overlay the bottom border 115 | .nav-tabs > li { 116 | margin-bottom: -1px; 117 | } 118 | // Actual tabs (as links) 119 | .nav-tabs > li > a { 120 | padding-top: 8px; 121 | padding-bottom: 8px; 122 | line-height: $baseLineHeight; 123 | border: 1px solid transparent; 124 | @include ctb-border-radius(4px 4px 0 0); 125 | &:hover { 126 | border-color: $grayLighter $grayLighter #ddd; 127 | } 128 | } 129 | // Active state, and it's :hover to override normal :hover 130 | .nav-tabs > .active > a, 131 | .nav-tabs > .active > a:hover { 132 | color: $gray; 133 | background-color: $bodyBackground; 134 | border: 1px solid #ddd; 135 | border-bottom-color: transparent; 136 | cursor: default; 137 | } 138 | 139 | 140 | // PILLS 141 | // ----- 142 | 143 | // Links rendered as pills 144 | .nav-pills > li > a { 145 | padding-top: 8px; 146 | padding-bottom: 8px; 147 | margin-top: 2px; 148 | margin-bottom: 2px; 149 | @include ctb-border-radius(5px); 150 | } 151 | 152 | // Active state 153 | .nav-pills > .active > a, 154 | .nav-pills > .active > a:hover { 155 | color: $white; 156 | background-color: $linkColor; 157 | } 158 | 159 | 160 | 161 | // STACKED NAV 162 | // ----------- 163 | 164 | // Stacked tabs and pills 165 | .nav-stacked > li { 166 | float: none; 167 | } 168 | .nav-stacked > li > a { 169 | margin-right: 0; // no need for the gap between nav items 170 | } 171 | 172 | // Tabs 173 | .nav-tabs.nav-stacked { 174 | border-bottom: 0; 175 | } 176 | .nav-tabs.nav-stacked > li > a { 177 | border: 1px solid #ddd; 178 | @include ctb-border-radius(0); 179 | } 180 | .nav-tabs.nav-stacked > li:first-child > a { 181 | @include ctb-border-top-radius(4px); 182 | } 183 | .nav-tabs.nav-stacked > li:last-child > a { 184 | @include ctb-border-bottom-radius(4px); 185 | } 186 | .nav-tabs.nav-stacked > li > a:hover { 187 | border-color: #ddd; 188 | z-index: 2; 189 | } 190 | 191 | // Pills 192 | .nav-pills.nav-stacked > li > a { 193 | margin-bottom: 3px; 194 | } 195 | .nav-pills.nav-stacked > li:last-child > a { 196 | margin-bottom: 1px; // decrease margin to match sizing of stacked tabs 197 | } 198 | 199 | 200 | 201 | // DROPDOWNS 202 | // --------- 203 | 204 | .nav-tabs .dropdown-menu { 205 | @include ctb-border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu 206 | } 207 | .nav-pills .dropdown-menu { 208 | @include ctb-border-radius(6px); // make rounded corners match the pills 209 | } 210 | 211 | // Default dropdown links 212 | // ------------------------- 213 | // Make carets use linkColor to start 214 | .nav .dropdown-toggle .caret { 215 | border-top-color: $linkColor; 216 | border-bottom-color: $linkColor; 217 | margin-top: 6px; 218 | } 219 | .nav .dropdown-toggle:hover .caret { 220 | border-top-color: $linkColorHover; 221 | border-bottom-color: $linkColorHover; 222 | } 223 | /* move down carets for tabs */ 224 | .nav-tabs .dropdown-toggle .caret { 225 | margin-top: 8px; 226 | } 227 | 228 | // Active dropdown links 229 | // ------------------------- 230 | .nav .active .dropdown-toggle .caret { 231 | border-top-color: #fff; 232 | border-bottom-color: #fff; 233 | } 234 | .nav-tabs .active .dropdown-toggle .caret { 235 | border-top-color: $gray; 236 | border-bottom-color: $gray; 237 | } 238 | 239 | // Active:hover dropdown links 240 | // ------------------------- 241 | .nav > .dropdown.active > a:hover { 242 | cursor: pointer; 243 | } 244 | 245 | // Open dropdowns 246 | // ------------------------- 247 | .nav-tabs .open .dropdown-toggle, 248 | .nav-pills .open .dropdown-toggle, 249 | .nav > li.dropdown.open.active > a:hover { 250 | color: $white; 251 | background-color: $grayLight; 252 | border-color: $grayLight; 253 | } 254 | .nav li.dropdown.open .caret, 255 | .nav li.dropdown.open.active .caret, 256 | .nav li.dropdown.open a:hover .caret { 257 | border-top-color: $white; 258 | border-bottom-color: $white; 259 | @include ctb-opacity(1); 260 | } 261 | 262 | // Dropdowns in stacked tabs 263 | .tabs-stacked .open > a:hover { 264 | border-color: $grayLight; 265 | } 266 | 267 | 268 | 269 | // TABBABLE 270 | // -------- 271 | 272 | 273 | // COMMON STYLES 274 | // ------------- 275 | 276 | // Clear any floats 277 | .tabbable { 278 | @include ctb-clearfix(); 279 | } 280 | .tab-content { 281 | overflow: auto; // prevent content from running below tabs 282 | } 283 | 284 | // Remove border on bottom, left, right 285 | .tabs-below > .nav-tabs, 286 | .tabs-right > .nav-tabs, 287 | .tabs-left > .nav-tabs { 288 | border-bottom: 0; 289 | } 290 | 291 | // Show/hide tabbable areas 292 | .tab-content > .tab-pane, 293 | .pill-content > .pill-pane { 294 | display: none; 295 | } 296 | .tab-content > .active, 297 | .pill-content > .active { 298 | display: block; 299 | } 300 | 301 | 302 | // BOTTOM 303 | // ------ 304 | 305 | .tabs-below > .nav-tabs { 306 | border-top: 1px solid #ddd; 307 | } 308 | .tabs-below > .nav-tabs > li { 309 | margin-top: -1px; 310 | margin-bottom: 0; 311 | } 312 | .tabs-below > .nav-tabs > li > a { 313 | @include ctb-border-radius(0 0 4px 4px); 314 | &:hover { 315 | border-bottom-color: transparent; 316 | border-top-color: #ddd; 317 | } 318 | } 319 | .tabs-below > .nav-tabs > .active > a, 320 | .tabs-below > .nav-tabs > .active > a:hover { 321 | border-color: transparent #ddd #ddd #ddd; 322 | } 323 | 324 | // LEFT & RIGHT 325 | // ------------ 326 | 327 | // Common styles 328 | .tabs-left > .nav-tabs > li, 329 | .tabs-right > .nav-tabs > li { 330 | float: none; 331 | } 332 | .tabs-left > .nav-tabs > li > a, 333 | .tabs-right > .nav-tabs > li > a { 334 | min-width: 74px; 335 | margin-right: 0; 336 | margin-bottom: 3px; 337 | } 338 | 339 | // Tabs on the left 340 | .tabs-left > .nav-tabs { 341 | float: left; 342 | margin-right: 19px; 343 | border-right: 1px solid #ddd; 344 | } 345 | .tabs-left > .nav-tabs > li > a { 346 | margin-right: -1px; 347 | @include ctb-border-radius(4px 0 0 4px); 348 | } 349 | .tabs-left > .nav-tabs > li > a:hover { 350 | border-color: $grayLighter #ddd $grayLighter $grayLighter; 351 | } 352 | .tabs-left > .nav-tabs .active > a, 353 | .tabs-left > .nav-tabs .active > a:hover { 354 | border-color: #ddd transparent #ddd #ddd; 355 | *border-right-color: $white; 356 | } 357 | 358 | // Tabs on the right 359 | .tabs-right > .nav-tabs { 360 | float: right; 361 | margin-left: 19px; 362 | border-left: 1px solid #ddd; 363 | } 364 | .tabs-right > .nav-tabs > li > a { 365 | margin-left: -1px; 366 | @include ctb-border-radius(0 4px 4px 0); 367 | } 368 | .tabs-right > .nav-tabs > li > a:hover { 369 | border-color: $grayLighter $grayLighter $grayLighter #ddd; 370 | } 371 | .tabs-right > .nav-tabs .active > a, 372 | .tabs-right > .nav-tabs .active > a:hover { 373 | border-color: #ddd #ddd #ddd transparent; 374 | *border-left-color: $white; 375 | } 376 | 377 | 378 | 379 | // DISABLED STATES 380 | // --------------- 381 | 382 | // Gray out text 383 | .nav > .disabled > a { 384 | color: $grayLight; 385 | } 386 | // Nuke hover effects 387 | .nav > .disabled > a:hover { 388 | text-decoration: none; 389 | background-color: transparent; 390 | cursor: default; 391 | } 392 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_sprites.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Sprites 3 | // -------------------------------------------------- 4 | 5 | 6 | // ICONS 7 | // ----- 8 | 9 | // All icons receive the styles of the tag with a base class 10 | // of .i and are then given a unique class to add width, height, 11 | // and background-position. Your resulting HTML will look like 12 | // . 13 | 14 | // For the white version of the icons, just add the .icon-white class: 15 | // 16 | 17 | [class^="icon-"], 18 | [class*=" icon-"] { 19 | display: inline-block; 20 | width: 14px; 21 | height: 14px; 22 | @include ctb-ie7-restore-right-whitespace(); 23 | line-height: 14px; 24 | vertical-align: text-top; 25 | background-image: image-url("#{$iconSpritePath}"); 26 | background-position: 14px 14px; 27 | background-repeat: no-repeat; 28 | margin-top: 1px; 29 | } 30 | 31 | /* White icons with optional class, or on hover/active states of certain elements */ 32 | .icon-white, 33 | .nav-pills > .active > a > [class^="icon-"], 34 | .nav-pills > .active > a > [class*=" icon-"], 35 | .nav-list > .active > a > [class^="icon-"], 36 | .nav-list > .active > a > [class*=" icon-"], 37 | .navbar-inverse .nav > .active > a > [class^="icon-"], 38 | .navbar-inverse .nav > .active > a > [class*=" icon-"], 39 | .dropdown-menu > li > a:hover > [class^="icon-"], 40 | .dropdown-menu > li > a:hover > [class*=" icon-"], 41 | .dropdown-menu > .active > a > [class^="icon-"], 42 | .dropdown-menu > .active > a > [class*=" icon-"], 43 | .dropdown-submenu:hover > a > [class^="icon-"], 44 | .dropdown-submenu:hover > a > [class*=" icon-"] { 45 | background-image: image-url("#{$iconWhiteSpritePath}"); 46 | } 47 | 48 | .icon-glass { background-position: 0 0; } 49 | .icon-music { background-position: -24px 0; } 50 | .icon-search { background-position: -48px 0; } 51 | .icon-envelope { background-position: -72px 0; } 52 | .icon-heart { background-position: -96px 0; } 53 | .icon-star { background-position: -120px 0; } 54 | .icon-star-empty { background-position: -144px 0; } 55 | .icon-user { background-position: -168px 0; } 56 | .icon-film { background-position: -192px 0; } 57 | .icon-th-large { background-position: -216px 0; } 58 | .icon-th { background-position: -240px 0; } 59 | .icon-th-list { background-position: -264px 0; } 60 | .icon-ok { background-position: -288px 0; } 61 | .icon-remove { background-position: -312px 0; } 62 | .icon-zoom-in { background-position: -336px 0; } 63 | .icon-zoom-out { background-position: -360px 0; } 64 | .icon-off { background-position: -384px 0; } 65 | .icon-signal { background-position: -408px 0; } 66 | .icon-cog { background-position: -432px 0; } 67 | .icon-trash { background-position: -456px 0; } 68 | 69 | .icon-home { background-position: 0 -24px; } 70 | .icon-file { background-position: -24px -24px; } 71 | .icon-time { background-position: -48px -24px; } 72 | .icon-road { background-position: -72px -24px; } 73 | .icon-download-alt { background-position: -96px -24px; } 74 | .icon-download { background-position: -120px -24px; } 75 | .icon-upload { background-position: -144px -24px; } 76 | .icon-inbox { background-position: -168px -24px; } 77 | .icon-play-circle { background-position: -192px -24px; } 78 | .icon-repeat { background-position: -216px -24px; } 79 | .icon-refresh { background-position: -240px -24px; } 80 | .icon-list-alt { background-position: -264px -24px; } 81 | .icon-lock { background-position: -287px -24px; } // 1px off 82 | .icon-flag { background-position: -312px -24px; } 83 | .icon-headphones { background-position: -336px -24px; } 84 | .icon-volume-off { background-position: -360px -24px; } 85 | .icon-volume-down { background-position: -384px -24px; } 86 | .icon-volume-up { background-position: -408px -24px; } 87 | .icon-qrcode { background-position: -432px -24px; } 88 | .icon-barcode { background-position: -456px -24px; } 89 | 90 | .icon-tag { background-position: 0 -48px; } 91 | .icon-tags { background-position: -25px -48px; } // 1px off 92 | .icon-book { background-position: -48px -48px; } 93 | .icon-bookmark { background-position: -72px -48px; } 94 | .icon-print { background-position: -96px -48px; } 95 | .icon-camera { background-position: -120px -48px; } 96 | .icon-font { background-position: -144px -48px; } 97 | .icon-bold { background-position: -167px -48px; } // 1px off 98 | .icon-italic { background-position: -192px -48px; } 99 | .icon-text-height { background-position: -216px -48px; } 100 | .icon-text-width { background-position: -240px -48px; } 101 | .icon-align-left { background-position: -264px -48px; } 102 | .icon-align-center { background-position: -288px -48px; } 103 | .icon-align-right { background-position: -312px -48px; } 104 | .icon-align-justify { background-position: -336px -48px; } 105 | .icon-list { background-position: -360px -48px; } 106 | .icon-indent-left { background-position: -384px -48px; } 107 | .icon-indent-right { background-position: -408px -48px; } 108 | .icon-facetime-video { background-position: -432px -48px; } 109 | .icon-picture { background-position: -456px -48px; } 110 | 111 | .icon-pencil { background-position: 0 -72px; } 112 | .icon-map-marker { background-position: -24px -72px; } 113 | .icon-adjust { background-position: -48px -72px; } 114 | .icon-tint { background-position: -72px -72px; } 115 | .icon-edit { background-position: -96px -72px; } 116 | .icon-share { background-position: -120px -72px; } 117 | .icon-check { background-position: -144px -72px; } 118 | .icon-move { background-position: -168px -72px; } 119 | .icon-step-backward { background-position: -192px -72px; } 120 | .icon-fast-backward { background-position: -216px -72px; } 121 | .icon-backward { background-position: -240px -72px; } 122 | .icon-play { background-position: -264px -72px; } 123 | .icon-pause { background-position: -288px -72px; } 124 | .icon-stop { background-position: -312px -72px; } 125 | .icon-forward { background-position: -336px -72px; } 126 | .icon-fast-forward { background-position: -360px -72px; } 127 | .icon-step-forward { background-position: -384px -72px; } 128 | .icon-eject { background-position: -408px -72px; } 129 | .icon-chevron-left { background-position: -432px -72px; } 130 | .icon-chevron-right { background-position: -456px -72px; } 131 | 132 | .icon-plus-sign { background-position: 0 -96px; } 133 | .icon-minus-sign { background-position: -24px -96px; } 134 | .icon-remove-sign { background-position: -48px -96px; } 135 | .icon-ok-sign { background-position: -72px -96px; } 136 | .icon-question-sign { background-position: -96px -96px; } 137 | .icon-info-sign { background-position: -120px -96px; } 138 | .icon-screenshot { background-position: -144px -96px; } 139 | .icon-remove-circle { background-position: -168px -96px; } 140 | .icon-ok-circle { background-position: -192px -96px; } 141 | .icon-ban-circle { background-position: -216px -96px; } 142 | .icon-arrow-left { background-position: -240px -96px; } 143 | .icon-arrow-right { background-position: -264px -96px; } 144 | .icon-arrow-up { background-position: -289px -96px; } // 1px off 145 | .icon-arrow-down { background-position: -312px -96px; } 146 | .icon-share-alt { background-position: -336px -96px; } 147 | .icon-resize-full { background-position: -360px -96px; } 148 | .icon-resize-small { background-position: -384px -96px; } 149 | .icon-plus { background-position: -408px -96px; } 150 | .icon-minus { background-position: -433px -96px; } 151 | .icon-asterisk { background-position: -456px -96px; } 152 | 153 | .icon-exclamation-sign { background-position: 0 -120px; } 154 | .icon-gift { background-position: -24px -120px; } 155 | .icon-leaf { background-position: -48px -120px; } 156 | .icon-fire { background-position: -72px -120px; } 157 | .icon-eye-open { background-position: -96px -120px; } 158 | .icon-eye-close { background-position: -120px -120px; } 159 | .icon-warning-sign { background-position: -144px -120px; } 160 | .icon-plane { background-position: -168px -120px; } 161 | .icon-calendar { background-position: -192px -120px; } 162 | .icon-random { background-position: -216px -120px; width: 16px; } 163 | .icon-comment { background-position: -240px -120px; } 164 | .icon-magnet { background-position: -264px -120px; } 165 | .icon-chevron-up { background-position: -288px -120px; } 166 | .icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off 167 | .icon-retweet { background-position: -336px -120px; } 168 | .icon-shopping-cart { background-position: -360px -120px; } 169 | .icon-folder-close { background-position: -384px -120px; } 170 | .icon-folder-open { background-position: -408px -120px; width: 16px; } 171 | .icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off 172 | .icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off 173 | 174 | .icon-hdd { background-position: 0 -144px; } 175 | .icon-bullhorn { background-position: -24px -144px; } 176 | .icon-bell { background-position: -48px -144px; } 177 | .icon-certificate { background-position: -72px -144px; } 178 | .icon-thumbs-up { background-position: -96px -144px; } 179 | .icon-thumbs-down { background-position: -120px -144px; } 180 | .icon-hand-right { background-position: -144px -144px; } 181 | .icon-hand-left { background-position: -168px -144px; } 182 | .icon-hand-up { background-position: -192px -144px; } 183 | .icon-hand-down { background-position: -216px -144px; } 184 | .icon-circle-arrow-right { background-position: -240px -144px; } 185 | .icon-circle-arrow-left { background-position: -264px -144px; } 186 | .icon-circle-arrow-up { background-position: -288px -144px; } 187 | .icon-circle-arrow-down { background-position: -312px -144px; } 188 | .icon-globe { background-position: -336px -144px; } 189 | .icon-wrench { background-position: -360px -144px; } 190 | .icon-tasks { background-position: -384px -144px; } 191 | .icon-filter { background-position: -408px -144px; } 192 | .icon-briefcase { background-position: -432px -144px; } 193 | .icon-fullscreen { background-position: -456px -144px; } 194 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | 6 | // Global values 7 | // -------------------------------------------------- 8 | 9 | 10 | // Grays 11 | // ------------------------- 12 | $black: #000 !default; 13 | $grayDarker: #222 !default; 14 | $grayDark: #333 !default; 15 | $gray: #555 !default; 16 | $grayLight: #999 !default; 17 | $grayLighter: #eee !default; 18 | $white: #fff !default; 19 | 20 | 21 | // Accent colors 22 | // ------------------------- 23 | $blue: #049cdb !default; 24 | $blueDark: #0064cd !default; 25 | $green: #46a546 !default; 26 | $red: #9d261d !default; 27 | $yellow: #ffc40d !default; 28 | $orange: #f89406 !default; 29 | $pink: #c3325f !default; 30 | $purple: #7a43b6 !default; 31 | 32 | 33 | // Scaffolding 34 | // ------------------------- 35 | $bodyBackground: $white !default; 36 | $textColor: $grayDark !default; 37 | 38 | 39 | // Links 40 | // ------------------------- 41 | $linkColor: #08c !default; 42 | $linkColorHover: darken($linkColor, 15%) !default; 43 | 44 | 45 | // Typography 46 | // ------------------------- 47 | $sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default; 48 | $serifFontFamily: Georgia, "Times New Roman", Times, serif !default; 49 | $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default; 50 | 51 | $baseFontSize: 14px !default; 52 | $baseFontFamily: $sansFontFamily !default; 53 | $baseLineHeight: 20px !default; 54 | $altFontFamily: $serifFontFamily !default; 55 | 56 | $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily 57 | $headingsFontWeight: bold; // instead of browser default, bold 58 | $headingsColor: inherit; // empty to use BS default, $textColor 59 | 60 | 61 | // Component sizing 62 | // ------------------------- 63 | // Based on 14px font-size and 20px line-height 64 | 65 | $fontSizeLarge: $baseFontSize * 1.25; // ~18px 66 | $fontSizeSmall: $baseFontSize * 0.85; // ~12px 67 | $fontSizeMini: $baseFontSize * 0.75; // ~11px 68 | 69 | $paddingLarge: 11px 19px; // 44px 70 | $paddingSmall: 2px 10px; // 26px 71 | $paddingMini: 0 6px; // 22px 72 | 73 | $baseBorderRadius: 4px !default; 74 | $borderRadiusLarge: 6px !default; 75 | $borderRadiusSmall: 3px !default; 76 | 77 | 78 | // Tables 79 | // ------------------------- 80 | $tableBackground: transparent; // overall background-color 81 | $tableBackgroundAccent: #f9f9f9; // for striping 82 | $tableBackgroundHover: #f5f5f5; // for hover 83 | $tableBorder: #ddd; // table and cell border 84 | 85 | // Buttons 86 | // ------------------------- 87 | $btnBackground: $white !default; 88 | $btnBackgroundHighlight: darken($white, 10%) !default; 89 | $btnBorder: #bbb !default; 90 | 91 | $btnPrimaryBackground: $linkColor !default; 92 | $btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%) !default; 93 | 94 | $btnInfoBackground: #5bc0de !default; 95 | $btnInfoBackgroundHighlight: #2f96b4 !default; 96 | 97 | $btnSuccessBackground: #62c462 !default; 98 | $btnSuccessBackgroundHighlight: #51a351 !default; 99 | 100 | $btnWarningBackground: lighten($orange, 15%) !default; 101 | $btnWarningBackgroundHighlight: $orange !default; 102 | 103 | $btnDangerBackground: #ee5f5b !default; 104 | $btnDangerBackgroundHighlight: #bd362f !default; 105 | 106 | $btnInverseBackground: #444 !default; 107 | $btnInverseBackgroundHighlight: $grayDarker !default; 108 | 109 | 110 | // Forms 111 | // ------------------------- 112 | $inputBackground: $white !default; 113 | $inputBorder: #ccc !default; 114 | $inputBorderRadius: $baseBorderRadius !default; 115 | $inputDisabledBackground: $grayLighter !default; 116 | $formActionsBackground: #f5f5f5 !default; 117 | $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border 118 | 119 | 120 | // Dropdowns 121 | // ------------------------- 122 | $dropdownBackground: $white !default; 123 | $dropdownBorder: rgba(0,0,0,.2) !default; 124 | $dropdownDividerTop: #e5e5e5 !default; 125 | $dropdownDividerBottom: $white !default; 126 | 127 | $dropdownLinkColor: $grayDark !default; 128 | $dropdownLinkColorHover: $white !default; 129 | $dropdownLinkColorActive: $white !default; 130 | 131 | $dropdownLinkBackgroundActive: $linkColor !default; 132 | $dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive !default; 133 | 134 | 135 | 136 | // COMPONENT VARIABLES 137 | // -------------------------------------------------- 138 | 139 | 140 | // Z-index master list 141 | // ------------------------- 142 | // Used for a bird's eye view of components dependent on the z-axis 143 | // Try to avoid customizing these :) 144 | $zindexDropdown: 1000 !default; 145 | $zindexPopover: 1010 !default; 146 | $zindexTooltip: 1030 !default; 147 | $zindexFixedNavbar: 1030 !default; 148 | $zindexModalBackdrop: 1040 !default; 149 | $zindexModal: 1050 !default; 150 | 151 | 152 | // Sprite icons path 153 | // ------------------------- 154 | $iconSpritePath: "glyphicons-halflings.png" !default; 155 | $iconWhiteSpritePath: "glyphicons-halflings-white.png" !default; 156 | 157 | 158 | // Input placeholder text color 159 | // ------------------------- 160 | $placeholderText: $grayLight !default; 161 | 162 | 163 | // Hr border color 164 | // ------------------------- 165 | $hrBorder: $grayLighter !default; 166 | 167 | 168 | // Horizontal forms & lists 169 | // ------------------------- 170 | $horizontalComponentOffset: 180px !default; 171 | 172 | 173 | // Wells 174 | // ------------------------- 175 | $wellBackground: #f5f5f5 !default; 176 | 177 | 178 | // Navbar 179 | // ------------------------- 180 | $navbarCollapseWidth: 979px !default; 181 | $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1 !default; 182 | 183 | $navbarHeight: 40px !default; 184 | $navbarBackgroundHighlight: #ffffff !default; 185 | $navbarBackground: darken($navbarBackgroundHighlight, 5%) !default; 186 | $navbarBorder: darken($navbarBackground, 12%) !default; 187 | 188 | $navbarText: #777 !default; 189 | $navbarLinkColor: #777 !default; 190 | $navbarLinkColorHover: $grayDark !default; 191 | $navbarLinkColorActive: $gray !default; 192 | $navbarLinkBackgroundHover: transparent !default; 193 | $navbarLinkBackgroundActive: darken($navbarBackground, 5%) !default; 194 | 195 | $navbarBrandColor: $navbarLinkColor !default; 196 | 197 | // Inverted navbar 198 | $navbarInverseBackground: #111111 !default; 199 | $navbarInverseBackgroundHighlight: #222222 !default; 200 | $navbarInverseBorder: #252525 !default; 201 | 202 | $navbarInverseText: $grayLight !default; 203 | $navbarInverseLinkColor: $grayLight !default; 204 | $navbarInverseLinkColorHover: $white !default; 205 | $navbarInverseLinkColorActive: $navbarInverseLinkColorHover !default; 206 | $navbarInverseLinkBackgroundHover: transparent !default; 207 | $navbarInverseLinkBackgroundActive: $navbarInverseBackground !default; 208 | 209 | $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%) !default; 210 | $navbarInverseSearchBackgroundFocus: $white !default; 211 | $navbarInverseSearchBorder: $navbarInverseBackground !default; 212 | $navbarInverseSearchPlaceholderColor: #ccc !default; 213 | 214 | $navbarInverseBrandColor: $navbarInverseLinkColor !default; 215 | 216 | 217 | // Pagination 218 | // ------------------------- 219 | $paginationBackground: #fff !default; 220 | $paginationBorder: #ddd !default; 221 | $paginationActiveBackground: #f5f5f5 !default; 222 | 223 | 224 | // Hero unit 225 | // ------------------------- 226 | $heroUnitBackground: $grayLighter !default; 227 | $heroUnitHeadingColor: inherit !default; 228 | $heroUnitLeadColor: inherit !default; 229 | 230 | 231 | // Form states and alerts 232 | // ------------------------- 233 | $warningText: #c09853 !default; 234 | $warningBackground: #fcf8e3 !default; 235 | $warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default; 236 | 237 | $errorText: #b94a48 !default; 238 | $errorBackground: #f2dede !default; 239 | $errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default; 240 | 241 | $successText: #468847 !default; 242 | $successBackground: #dff0d8 !default; 243 | $successBorder: darken(adjust-hue($successBackground, -10), 5%) !default; 244 | 245 | $infoText: #3a87ad !default; 246 | $infoBackground: #d9edf7 !default; 247 | $infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default; 248 | 249 | 250 | // Tooltips and popovers 251 | // ------------------------- 252 | $tooltipColor: #fff !default; 253 | $tooltipBackground: #000 !default; 254 | $tooltipArrowWidth: 5px !default; 255 | $tooltipArrowColor: $tooltipBackground !default; 256 | 257 | $popoverBackground: #fff !default; 258 | $popoverArrowWidth: 10px !default; 259 | $popoverArrowColor: #fff !default; 260 | $popoverTitleBackground: darken($popoverBackground, 3%) !default; 261 | 262 | // Special enhancement for popovers 263 | $popoverArrowOuterWidth: $popoverArrowWidth + 1 !default; 264 | $popoverArrowOuterColor: rgba(0,0,0,.25) !default; 265 | 266 | 267 | 268 | // GRID 269 | // -------------------------------------------------- 270 | 271 | 272 | // Default 940px grid 273 | // ------------------------- 274 | $gridColumns: 12 !default; 275 | $gridColumnWidth: 60px !default; 276 | $gridGutterWidth: 20px !default; 277 | $gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default; 278 | 279 | // 1200px min 280 | $gridColumnWidth1200: 70px !default; 281 | $gridGutterWidth1200: 30px !default; 282 | $gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default; 283 | 284 | // 768px-979px 285 | $gridColumnWidth768: 42px !default; 286 | $gridGutterWidth768: 20px !default; 287 | $gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default; 288 | 289 | 290 | // Fluid grid 291 | // ------------------------- 292 | $fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default; 293 | $fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default; 294 | 295 | // 1200px min 296 | $fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default; 297 | $fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default; 298 | 299 | // 768px-979px 300 | $fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default; 301 | $fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default; 302 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_navbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navbars (Redux) 3 | // -------------------------------------------------- 4 | 5 | 6 | // COMMON STYLES 7 | // ------------- 8 | 9 | // Base class and wrapper 10 | .navbar { 11 | overflow: visible; 12 | margin-bottom: $baseLineHeight; 13 | 14 | // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar 15 | *position: relative; 16 | *z-index: 2; 17 | } 18 | 19 | // Inner for background effects 20 | // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present 21 | .navbar-inner { 22 | min-height: $navbarHeight; 23 | padding-left: 20px; 24 | padding-right: 20px; 25 | @include ctb-gradient-vertical($navbarBackgroundHighlight, $navbarBackground); 26 | border: 1px solid $navbarBorder; 27 | @include ctb-border-radius($baseBorderRadius); 28 | @include ctb-box-shadow(0 1px 4px rgba(0,0,0,.065)); 29 | 30 | // Prevent floats from breaking the navbar 31 | @include ctb-clearfix(); 32 | } 33 | 34 | // Set width to auto for default container 35 | // We then reset it for fixed navbars in the #gridSystem mixin 36 | .navbar .container { 37 | width: auto; 38 | } 39 | 40 | // Override the default collapsed state 41 | .nav-collapse.collapse { 42 | height: auto; 43 | overflow: visible; 44 | } 45 | 46 | 47 | // Brand: website or project name 48 | // ------------------------- 49 | .navbar .brand { 50 | float: left; 51 | display: block; 52 | // Vertically center the text given $navbarHeight 53 | padding: (($navbarHeight - $baseLineHeight) / 2) 20px (($navbarHeight - $baseLineHeight) / 2); 54 | margin-left: -20px; // negative indent to left-align the text down the page 55 | font-size: 20px; 56 | font-weight: 200; 57 | color: $navbarBrandColor; 58 | text-shadow: 0 1px 0 $navbarBackgroundHighlight; 59 | &:hover { 60 | text-decoration: none; 61 | } 62 | } 63 | 64 | // Plain text in topbar 65 | // ------------------------- 66 | .navbar-text { 67 | margin-bottom: 0; 68 | line-height: $navbarHeight; 69 | color: $navbarText; 70 | } 71 | 72 | // Janky solution for now to account for links outside the .nav 73 | // ------------------------- 74 | .navbar-link { 75 | color: $navbarLinkColor; 76 | &:hover { 77 | color: $navbarLinkColorHover; 78 | } 79 | } 80 | 81 | // Dividers in navbar 82 | // ------------------------- 83 | .navbar .divider-vertical { 84 | height: $navbarHeight; 85 | margin: 0 9px; 86 | border-left: 1px solid $navbarBackground; 87 | border-right: 1px solid $navbarBackgroundHighlight; 88 | } 89 | 90 | // Buttons in navbar 91 | // ------------------------- 92 | .navbar .btn, 93 | .navbar .btn-group { 94 | @include ctb-navbarVerticalAlign(30px); // Vertically center in navbar 95 | } 96 | .navbar .btn-group .btn, 97 | .navbar .input-prepend .btn, 98 | .navbar .input-append .btn { 99 | margin-top: 0; // then undo the margin here so we don't accidentally double it 100 | } 101 | 102 | // Navbar forms 103 | // ------------------------- 104 | .navbar-form { 105 | margin-bottom: 0; // remove default bottom margin 106 | @include ctb-clearfix(); 107 | input, 108 | select, 109 | .radio, 110 | .checkbox { 111 | @include ctb-navbarVerticalAlign(30px); // Vertically center in navbar 112 | } 113 | input, 114 | select, 115 | .btn { 116 | display: inline-block; 117 | margin-bottom: 0; 118 | } 119 | input[type="image"], 120 | input[type="checkbox"], 121 | input[type="radio"] { 122 | margin-top: 3px; 123 | } 124 | .input-append, 125 | .input-prepend { 126 | margin-top: 5px; 127 | white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left 128 | input { 129 | margin-top: 0; // remove the margin on top since it's on the parent 130 | } 131 | } 132 | } 133 | 134 | // Navbar search 135 | // ------------------------- 136 | .navbar-search { 137 | position: relative; 138 | float: left; 139 | @include ctb-navbarVerticalAlign(30px); // Vertically center in navbar 140 | margin-bottom: 0; 141 | .search-query { 142 | margin-bottom: 0; 143 | padding: 4px 14px; 144 | @include ctb-font-sans-serif(13px, normal, 1); 145 | @include ctb-border-radius(15px); // redeclare because of specificity of the type attribute 146 | } 147 | } 148 | 149 | 150 | 151 | // Static navbar 152 | // ------------------------- 153 | 154 | .navbar-static-top { 155 | position: static; 156 | margin-bottom: 0; // remove 18px margin for default navbar 157 | .navbar-inner { 158 | @include ctb-border-radius(0); 159 | } 160 | } 161 | 162 | 163 | 164 | // Fixed navbar 165 | // ------------------------- 166 | 167 | // Shared (top/bottom) styles 168 | .navbar-fixed-top, 169 | .navbar-fixed-bottom { 170 | position: fixed; 171 | right: 0; 172 | left: 0; 173 | z-index: $zindexFixedNavbar; 174 | margin-bottom: 0; // remove 18px margin for default navbar 175 | } 176 | .navbar-fixed-top .navbar-inner, 177 | .navbar-static-top .navbar-inner { 178 | border-width: 0 0 1px; 179 | } 180 | .navbar-fixed-bottom .navbar-inner { 181 | border-width: 1px 0 0; 182 | } 183 | .navbar-fixed-top .navbar-inner, 184 | .navbar-fixed-bottom .navbar-inner { 185 | padding-left: 0; 186 | padding-right: 0; 187 | @include ctb-border-radius(0); 188 | } 189 | 190 | // Reset container width 191 | // Required here as we reset the width earlier on and the grid mixins don't override early enough 192 | .navbar-static-top .container, 193 | .navbar-fixed-top .container, 194 | .navbar-fixed-bottom .container { 195 | @include ctb-core-span($gridColumns); 196 | } 197 | 198 | // Fixed to top 199 | .navbar-fixed-top { 200 | top: 0; 201 | } 202 | .navbar-fixed-top, 203 | .navbar-static-top { 204 | .navbar-inner { 205 | @include ctb-box-shadow(#{0 1px 10px rgba(0,0,0,.1)}); 206 | } 207 | } 208 | 209 | // Fixed to bottom 210 | .navbar-fixed-bottom { 211 | bottom: 0; 212 | .navbar-inner { 213 | @include ctb-box-shadow(#{0 -1px 10px rgba(0,0,0,.1)}); 214 | } 215 | } 216 | 217 | 218 | 219 | // NAVIGATION 220 | // ---------- 221 | 222 | .navbar .nav { 223 | position: relative; 224 | left: 0; 225 | display: block; 226 | float: left; 227 | margin: 0 10px 0 0; 228 | } 229 | .navbar .nav.pull-right { 230 | float: right; // redeclare due to specificity 231 | margin-right: 0; // remove margin on float right nav 232 | } 233 | .navbar .nav > li { 234 | float: left; 235 | } 236 | 237 | // Links 238 | .navbar .nav > li > a { 239 | float: none; 240 | // Vertically center the text given $navbarHeight 241 | padding: (($navbarHeight - $baseLineHeight) / 2) 15px (($navbarHeight - $baseLineHeight) / 2); 242 | color: $navbarLinkColor; 243 | text-decoration: none; 244 | text-shadow: 0 1px 0 $navbarBackgroundHighlight; 245 | } 246 | .navbar .nav .dropdown-toggle .caret { 247 | margin-top: 8px; 248 | 249 | } 250 | 251 | // Hover 252 | .navbar .nav > li > a:focus, 253 | .navbar .nav > li > a:hover { 254 | background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active 255 | color: $navbarLinkColorHover; 256 | text-decoration: none; 257 | } 258 | 259 | // Active nav items 260 | .navbar .nav > .active > a, 261 | .navbar .nav > .active > a:hover, 262 | .navbar .nav > .active > a:focus { 263 | color: $navbarLinkColorActive; 264 | text-decoration: none; 265 | background-color: $navbarLinkBackgroundActive; 266 | @include ctb-box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); 267 | } 268 | 269 | // Navbar button for toggling navbar items in responsive layouts 270 | // These definitions need to come after '.navbar .btn' 271 | .navbar .btn-navbar { 272 | display: none; 273 | float: right; 274 | padding: 7px 10px; 275 | margin-left: 5px; 276 | margin-right: 5px; 277 | @include ctb-buttonBackground(darken($navbarBackgroundHighlight, 5%), darken($navbarBackground, 5%)); 278 | @include ctb-box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)}); 279 | } 280 | .navbar .btn-navbar .icon-bar { 281 | display: block; 282 | width: 18px; 283 | height: 2px; 284 | background-color: #f5f5f5; 285 | @include ctb-border-radius(1px); 286 | @include ctb-box-shadow(0 1px 0 rgba(0,0,0,.25)); 287 | } 288 | .btn-navbar .icon-bar + .icon-bar { 289 | margin-top: 3px; 290 | } 291 | 292 | 293 | 294 | // Dropdown menus 295 | // -------------- 296 | 297 | // Menu position and menu carets 298 | .navbar .nav > li > .dropdown-menu { 299 | &:before { 300 | content: ''; 301 | display: inline-block; 302 | border-left: 7px solid transparent; 303 | border-right: 7px solid transparent; 304 | border-bottom: 7px solid #ccc; 305 | border-bottom-color: $dropdownBorder; 306 | position: absolute; 307 | top: -7px; 308 | left: 9px; 309 | } 310 | &:after { 311 | content: ''; 312 | display: inline-block; 313 | border-left: 6px solid transparent; 314 | border-right: 6px solid transparent; 315 | border-bottom: 6px solid $dropdownBackground; 316 | position: absolute; 317 | top: -6px; 318 | left: 10px; 319 | } 320 | } 321 | // Menu position and menu caret support for dropups via extra dropup class 322 | .navbar-fixed-bottom .nav > li > .dropdown-menu { 323 | &:before { 324 | border-top: 7px solid #ccc; 325 | border-top-color: $dropdownBorder; 326 | border-bottom: 0; 327 | bottom: -7px; 328 | top: auto; 329 | } 330 | &:after { 331 | border-top: 6px solid $dropdownBackground; 332 | border-bottom: 0; 333 | bottom: -6px; 334 | top: auto; 335 | } 336 | } 337 | 338 | // Caret should match text color on hover 339 | .navbar .nav li.dropdown > a:hover .caret { 340 | border-top-color: $navbarLinkColorActive; 341 | border-bottom-color: $navbarLinkColorActive; 342 | } 343 | 344 | // Remove background color from open dropdown 345 | .navbar .nav li.dropdown.open > .dropdown-toggle, 346 | .navbar .nav li.dropdown.active > .dropdown-toggle, 347 | .navbar .nav li.dropdown.open.active > .dropdown-toggle { 348 | background-color: $navbarLinkBackgroundActive; 349 | color: $navbarLinkColorActive; 350 | } 351 | .navbar .nav li.dropdown > .dropdown-toggle .caret { 352 | border-top-color: $navbarLinkColor; 353 | border-bottom-color: $navbarLinkColor; 354 | } 355 | .navbar .nav li.dropdown.open > .dropdown-toggle .caret, 356 | .navbar .nav li.dropdown.active > .dropdown-toggle .caret, 357 | .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { 358 | border-top-color: $navbarLinkColorActive; 359 | border-bottom-color: $navbarLinkColorActive; 360 | } 361 | 362 | // Right aligned menus need alt position 363 | .navbar .pull-right > li > .dropdown-menu, 364 | .navbar .nav > li > .dropdown-menu.pull-right { 365 | left: auto; 366 | right: 0; 367 | &:before { 368 | left: auto; 369 | right: 12px; 370 | } 371 | &:after { 372 | left: auto; 373 | right: 13px; 374 | } 375 | .dropdown-menu { 376 | left: auto; 377 | right: 100%; 378 | margin-left: 0; 379 | margin-right: -1px; 380 | @include ctb-border-radius(6px 0 6px 6px); 381 | } 382 | } 383 | 384 | 385 | // Inverted navbar 386 | // ------------------------- 387 | 388 | .navbar-inverse { 389 | 390 | .navbar-inner { 391 | @include ctb-gradient-vertical($navbarInverseBackgroundHighlight, $navbarInverseBackground); 392 | border-color: $navbarInverseBorder; 393 | } 394 | 395 | .brand, 396 | .nav > li > a { 397 | color: $navbarInverseLinkColor; 398 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 399 | &:hover { 400 | color: $navbarInverseLinkColorHover; 401 | } 402 | } 403 | 404 | .brand { 405 | color: $navbarInverseBrandColor; 406 | } 407 | 408 | .navbar-text { 409 | color: $navbarInverseText; 410 | } 411 | 412 | .nav > li > a:focus, 413 | .nav > li > a:hover { 414 | background-color: $navbarInverseLinkBackgroundHover; 415 | color: $navbarInverseLinkColorHover; 416 | } 417 | 418 | .nav .active > a, 419 | .nav .active > a:hover, 420 | .nav .active > a:focus { 421 | color: $navbarInverseLinkColorActive; 422 | background-color: $navbarInverseLinkBackgroundActive; 423 | } 424 | 425 | // Inline text links 426 | .navbar-link { 427 | color: $navbarInverseLinkColor; 428 | &:hover { 429 | color: $navbarInverseLinkColorHover; 430 | } 431 | } 432 | 433 | // Dividers in navbar 434 | .divider-vertical { 435 | border-left-color: $navbarInverseBackground; 436 | border-right-color: $navbarInverseBackgroundHighlight; 437 | } 438 | 439 | // Dropdowns 440 | .nav li.dropdown.open > .dropdown-toggle, 441 | .nav li.dropdown.active > .dropdown-toggle, 442 | .nav li.dropdown.open.active > .dropdown-toggle { 443 | background-color: $navbarInverseLinkBackgroundActive; 444 | color: $navbarInverseLinkColorActive; 445 | } 446 | .nav li.dropdown > a:hover .caret { 447 | border-top-color: $navbarInverseLinkColorActive; 448 | border-bottom-color: $navbarInverseLinkColorActive; 449 | } 450 | .nav li.dropdown > .dropdown-toggle .caret { 451 | border-top-color: $navbarInverseLinkColor; 452 | border-bottom-color: $navbarInverseLinkColor; 453 | } 454 | .nav li.dropdown.open > .dropdown-toggle .caret, 455 | .nav li.dropdown.active > .dropdown-toggle .caret, 456 | .nav li.dropdown.open.active > .dropdown-toggle .caret { 457 | border-top-color: $navbarInverseLinkColorActive; 458 | border-bottom-color: $navbarInverseLinkColorActive; 459 | } 460 | 461 | // Navbar search 462 | .navbar-search { 463 | .search-query { 464 | color: $white; 465 | background-color: $navbarInverseSearchBackground; 466 | border-color: $navbarInverseSearchBorder; 467 | @include ctb-box-shadow(#{inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)}); 468 | @include ctb-transition(none); 469 | @include ctb-placeholder($navbarInverseSearchPlaceholderColor); 470 | 471 | // Focus states (we use .focused since IE7-8 and down doesn't support :focus) 472 | &:focus, 473 | &.focused { 474 | padding: 5px 15px; 475 | color: $grayDark; 476 | text-shadow: 0 1px 0 $white; 477 | background-color: $navbarInverseSearchBackgroundFocus; 478 | border: 0; 479 | @include ctb-box-shadow(0 0 3px rgba(0,0,0,.15)); 480 | outline: 0; 481 | } 482 | } 483 | } 484 | 485 | // Navbar collapse button 486 | .btn-navbar { 487 | @include ctb-buttonBackground(darken($navbarInverseBackgroundHighlight, 5%), darken($navbarInverseBackground, 5%)); 488 | } 489 | 490 | } 491 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_forms.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Forms 3 | // -------------------------------------------------- 4 | 5 | 6 | // GENERAL STYLES 7 | // -------------- 8 | 9 | // Make all forms have space below them 10 | form { 11 | margin: 0 0 $baseLineHeight; 12 | } 13 | 14 | fieldset { 15 | padding: 0; 16 | margin: 0; 17 | border: 0; 18 | } 19 | 20 | // Groups of fields with labels on top (legends) 21 | legend { 22 | display: block; 23 | width: 100%; 24 | padding: 0; 25 | margin-bottom: $baseLineHeight; 26 | font-size: $baseFontSize * 1.5; 27 | line-height: $baseLineHeight * 2; 28 | color: $grayDark; 29 | border: 0; 30 | border-bottom: 1px solid #e5e5e5; 31 | 32 | // Small 33 | small { 34 | font-size: $baseLineHeight * .75; 35 | color: $grayLight; 36 | } 37 | } 38 | 39 | // Set font for forms 40 | label, 41 | input, 42 | button, 43 | select, 44 | textarea { 45 | @include ctb-font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here 46 | } 47 | input, 48 | button, 49 | select, 50 | textarea { 51 | font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element) 52 | } 53 | 54 | // Identify controls by their labels 55 | label { 56 | display: block; 57 | margin-bottom: 5px; 58 | } 59 | 60 | // Form controls 61 | // ------------------------- 62 | 63 | // Shared size and type resets 64 | select, 65 | textarea, 66 | input[type="text"], 67 | input[type="password"], 68 | input[type="datetime"], 69 | input[type="datetime-local"], 70 | input[type="date"], 71 | input[type="month"], 72 | input[type="time"], 73 | input[type="week"], 74 | input[type="number"], 75 | input[type="email"], 76 | input[type="url"], 77 | input[type="search"], 78 | input[type="tel"], 79 | input[type="color"], 80 | .uneditable-input { 81 | display: inline-block; 82 | height: $baseLineHeight; 83 | padding: 4px 6px; 84 | margin-bottom: $baseLineHeight / 2; 85 | font-size: $baseFontSize; 86 | line-height: $baseLineHeight; 87 | color: $gray; 88 | @include ctb-border-radius($inputBorderRadius); 89 | vertical-align: middle; 90 | } 91 | 92 | // Reset appearance properties for textual inputs and textarea 93 | // Declare width for legacy (can't be on input[type=*] selectors or it's too specific) 94 | input, 95 | textarea, 96 | .uneditable-input { 97 | width: 206px; // plus 12px padding and 2px border 98 | } 99 | // Reset height since textareas have rows 100 | textarea { 101 | height: auto; 102 | } 103 | // Everything else 104 | textarea, 105 | input[type="text"], 106 | input[type="password"], 107 | input[type="datetime"], 108 | input[type="datetime-local"], 109 | input[type="date"], 110 | input[type="month"], 111 | input[type="time"], 112 | input[type="week"], 113 | input[type="number"], 114 | input[type="email"], 115 | input[type="url"], 116 | input[type="search"], 117 | input[type="tel"], 118 | input[type="color"], 119 | .uneditable-input { 120 | background-color: $inputBackground; 121 | border: 1px solid $inputBorder; 122 | @include ctb-box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 123 | @include ctb-transition(#{border linear .2s, box-shadow linear .2s}); 124 | 125 | // Focus state 126 | &:focus { 127 | border-color: rgba(82,168,236,.8); 128 | outline: 0; 129 | outline: thin dotted \9; /* IE6-9 */ 130 | @include ctb-box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)}); 131 | } 132 | } 133 | 134 | // Position radios and checkboxes better 135 | input[type="radio"], 136 | input[type="checkbox"] { 137 | margin: 4px 0 0; 138 | *margin-top: 0; /* IE7 */ 139 | margin-top: 1px \9; /* IE8-9 */ 140 | line-height: normal; 141 | } 142 | 143 | // Reset width of input images, buttons, radios, checkboxes 144 | input[type="file"], 145 | input[type="image"], 146 | input[type="submit"], 147 | input[type="reset"], 148 | input[type="button"], 149 | input[type="radio"], 150 | input[type="checkbox"] { 151 | width: auto; // Override of generic input selector 152 | } 153 | 154 | // Set the height of select and file controls to match text inputs 155 | select, 156 | input[type="file"] { 157 | height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ 158 | *margin-top: 4px; /* For IE7, add top margin to align select with labels */ 159 | line-height: $inputHeight; 160 | } 161 | 162 | // Make select elements obey height by applying a border 163 | select { 164 | width: 220px; // default input width + 10px of padding that doesn't get applied 165 | border: 1px solid $inputBorder; 166 | background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color 167 | } 168 | 169 | // Make multiple select elements height not fixed 170 | select[multiple], 171 | select[size] { 172 | height: auto; 173 | } 174 | 175 | // Focus for select, file, radio, and checkbox 176 | select:focus, 177 | input[type="file"]:focus, 178 | input[type="radio"]:focus, 179 | input[type="checkbox"]:focus { 180 | @include ctb-tab-focus(); 181 | } 182 | 183 | 184 | // Uneditable inputs 185 | // ------------------------- 186 | 187 | // Make uneditable inputs look inactive 188 | .uneditable-input, 189 | .uneditable-textarea { 190 | color: $grayLight; 191 | background-color: darken($inputBackground, 1%); 192 | border-color: $inputBorder; 193 | @include ctb-box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); 194 | cursor: not-allowed; 195 | } 196 | 197 | // For text that needs to appear as an input but should not be an input 198 | .uneditable-input { 199 | overflow: hidden; // prevent text from wrapping, but still cut it off like an input does 200 | white-space: nowrap; 201 | } 202 | 203 | // Make uneditable textareas behave like a textarea 204 | .uneditable-textarea { 205 | width: auto; 206 | height: auto; 207 | } 208 | 209 | 210 | // Placeholder 211 | // ------------------------- 212 | 213 | // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector 214 | input, 215 | textarea { 216 | @include ctb-placeholder(); 217 | } 218 | 219 | 220 | // CHECKBOXES & RADIOS 221 | // ------------------- 222 | 223 | // Indent the labels to position radios/checkboxes as hanging 224 | .radio, 225 | .checkbox { 226 | min-height: $baseLineHeight; // clear the floating input if there is no label text 227 | padding-left: 20px; 228 | } 229 | .radio input[type="radio"], 230 | .checkbox input[type="checkbox"] { 231 | float: left; 232 | margin-left: -20px; 233 | } 234 | 235 | // Move the options list down to align with labels 236 | .controls > .radio:first-child, 237 | .controls > .checkbox:first-child { 238 | padding-top: 5px; // has to be padding because margin collaspes 239 | } 240 | 241 | // Radios and checkboxes on same line 242 | // TODO v3: Convert .inline to .control-inline 243 | .radio.inline, 244 | .checkbox.inline { 245 | display: inline-block; 246 | padding-top: 5px; 247 | margin-bottom: 0; 248 | vertical-align: middle; 249 | } 250 | .radio.inline + .radio.inline, 251 | .checkbox.inline + .checkbox.inline { 252 | margin-left: 10px; // space out consecutive inline controls 253 | } 254 | 255 | 256 | 257 | // INPUT SIZES 258 | // ----------- 259 | 260 | // General classes for quick sizes 261 | .input-mini { width: 60px; } 262 | .input-small { width: 90px; } 263 | .input-medium { width: 150px; } 264 | .input-large { width: 210px; } 265 | .input-xlarge { width: 270px; } 266 | .input-xxlarge { width: 530px; } 267 | 268 | // Grid style input sizes 269 | input[class*="span"], 270 | select[class*="span"], 271 | textarea[class*="span"], 272 | .uneditable-input[class*="span"], 273 | // Redeclare since the fluid row class is more specific 274 | .row-fluid input[class*="span"], 275 | .row-fluid select[class*="span"], 276 | .row-fluid textarea[class*="span"], 277 | .row-fluid .uneditable-input[class*="span"] { 278 | float: none; 279 | margin-left: 0; 280 | } 281 | // Ensure input-prepend/append never wraps 282 | .input-append input[class*="span"], 283 | .input-append .uneditable-input[class*="span"], 284 | .input-prepend input[class*="span"], 285 | .input-prepend .uneditable-input[class*="span"], 286 | .row-fluid input[class*="span"], 287 | .row-fluid select[class*="span"], 288 | .row-fluid textarea[class*="span"], 289 | .row-fluid .uneditable-input[class*="span"], 290 | .row-fluid .input-prepend [class*="span"], 291 | .row-fluid .input-append [class*="span"] { 292 | display: inline-block; 293 | } 294 | 295 | 296 | 297 | // GRID SIZING FOR INPUTS 298 | // ---------------------- 299 | 300 | // Grid sizes 301 | @include ctb-grid-input($gridColumnWidth, $gridGutterWidth); 302 | 303 | // Control row for multiple inputs per line 304 | .controls-row { 305 | @include ctb-clearfix(); // Clear the float from controls 306 | } 307 | 308 | // Float to collapse white-space for proper grid alignment 309 | .controls-row [class*="span"], 310 | // Redeclare the fluid grid collapse since we undo the float for inputs 311 | .row-fluid .controls-row [class*="span"] { 312 | float: left; 313 | } 314 | // Explicity set top padding on all checkboxes/radios, not just first-child 315 | .controls-row .checkbox[class*="span"], 316 | .controls-row .radio[class*="span"] { 317 | padding-top: 5px; 318 | } 319 | 320 | 321 | 322 | 323 | // DISABLED STATE 324 | // -------------- 325 | 326 | // Disabled and read-only inputs 327 | input[disabled], 328 | select[disabled], 329 | textarea[disabled], 330 | input[readonly], 331 | select[readonly], 332 | textarea[readonly] { 333 | cursor: not-allowed; 334 | background-color: $inputDisabledBackground; 335 | } 336 | // Explicitly reset the colors here 337 | input[type="radio"][disabled], 338 | input[type="checkbox"][disabled], 339 | input[type="radio"][readonly], 340 | input[type="checkbox"][readonly] { 341 | background-color: transparent; 342 | } 343 | 344 | 345 | 346 | 347 | // FORM FIELD FEEDBACK STATES 348 | // -------------------------- 349 | 350 | // Warning 351 | .control-group.warning { 352 | @include ctb-formFieldState($warningText, $warningText, $warningBackground); 353 | } 354 | // Error 355 | .control-group.error { 356 | @include ctb-formFieldState($errorText, $errorText, $errorBackground); 357 | } 358 | // Success 359 | .control-group.success { 360 | @include ctb-formFieldState($successText, $successText, $successBackground); 361 | } 362 | // Success 363 | .control-group.info { 364 | @include ctb-formFieldState($infoText, $infoText, $infoBackground); 365 | } 366 | 367 | // HTML5 invalid states 368 | // Shares styles with the .control-group.error above 369 | input:focus:invalid, 370 | textarea:focus:invalid, 371 | select:focus:invalid { 372 | color: #b94a48; 373 | border-color: #ee5f5b; 374 | &:focus { 375 | border-color: darken(#ee5f5b, 10%); 376 | $shadow: 0 0 6px lighten(#ee5f5b, 20%); 377 | @include ctb-box-shadow($shadow); 378 | } 379 | } 380 | 381 | 382 | 383 | // FORM ACTIONS 384 | // ------------ 385 | 386 | .form-actions { 387 | padding: ($baseLineHeight - 1) 20px $baseLineHeight; 388 | margin-top: $baseLineHeight; 389 | margin-bottom: $baseLineHeight; 390 | background-color: $formActionsBackground; 391 | border-top: 1px solid #e5e5e5; 392 | @include ctb-clearfix(); // Adding clearfix to allow for .pull-right button containers 393 | } 394 | 395 | 396 | 397 | // HELP TEXT 398 | // --------- 399 | 400 | .help-block, 401 | .help-inline { 402 | color: lighten($textColor, 15%); // lighten the text some for contrast 403 | } 404 | 405 | .help-block { 406 | display: block; // account for any element using help-block 407 | margin-bottom: $baseLineHeight / 2; 408 | } 409 | 410 | .help-inline { 411 | display: inline-block; 412 | @include ctb-ie7-inline-block(); 413 | vertical-align: middle; 414 | padding-left: 5px; 415 | } 416 | 417 | 418 | 419 | // INPUT GROUPS 420 | // ------------ 421 | 422 | // Allow us to put symbols and text within the input field for a cleaner look 423 | .input-append, 424 | .input-prepend { 425 | margin-bottom: 5px; 426 | font-size: 0; // white space collapse hack 427 | white-space: nowrap; // Prevent span and input from separating 428 | 429 | // Reset the white space collapse hack 430 | input, 431 | select, 432 | .uneditable-input, 433 | .dropdown-menu { 434 | font-size: $baseFontSize; 435 | } 436 | 437 | input, 438 | select, 439 | .uneditable-input { 440 | position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness 441 | margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms 442 | *margin-left: 0; 443 | vertical-align: top; 444 | @include ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0); 445 | // Make input on top when focused so blue border and shadow always show 446 | &:focus { 447 | z-index: 2; 448 | } 449 | } 450 | .add-on { 451 | display: inline-block; 452 | width: auto; 453 | height: $baseLineHeight; 454 | min-width: 16px; 455 | padding: 4px 5px; 456 | font-size: $baseFontSize; 457 | font-weight: normal; 458 | line-height: $baseLineHeight; 459 | text-align: center; 460 | text-shadow: 0 1px 0 $white; 461 | background-color: $grayLighter; 462 | border: 1px solid #ccc; 463 | } 464 | .add-on, 465 | .btn, 466 | .btn-group > .dropdown-toggle { 467 | vertical-align: top; 468 | @include ctb-border-radius(0); 469 | } 470 | .active { 471 | background-color: lighten($green, 30); 472 | border-color: $green; 473 | } 474 | } 475 | 476 | .input-prepend { 477 | .add-on, 478 | .btn { 479 | margin-right: -1px; 480 | } 481 | .add-on:first-child, 482 | .btn:first-child { 483 | // FYI, `.btn:first-child` accounts for a button group that's prepended 484 | @include ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius); 485 | } 486 | } 487 | 488 | .input-append { 489 | input, 490 | select, 491 | .uneditable-input { 492 | @include ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius); 493 | + .btn-group .btn:last-child { 494 | @include ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0); 495 | } 496 | } 497 | .add-on, 498 | .btn, 499 | .btn-group { 500 | margin-left: -1px; 501 | } 502 | .add-on:last-child, 503 | .btn:last-child, 504 | .btn-group:last-child > .dropdown-toggle { 505 | @include ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0); 506 | } 507 | } 508 | 509 | // Remove all border-radius for inputs with both prepend and append 510 | .input-prepend.input-append { 511 | input, 512 | select, 513 | .uneditable-input { 514 | @include ctb-border-radius(0); 515 | + .btn-group .btn { 516 | @include ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0); 517 | } 518 | } 519 | .add-on:first-child, 520 | .btn:first-child { 521 | margin-right: -1px; 522 | @include ctb-border-radius($inputBorderRadius 0 0 $inputBorderRadius); 523 | } 524 | .add-on:last-child, 525 | .btn:last-child { 526 | margin-left: -1px; 527 | @include ctb-border-radius(0 $inputBorderRadius $inputBorderRadius 0); 528 | } 529 | .btn-group:first-child { 530 | margin-left: 0; 531 | } 532 | } 533 | 534 | 535 | 536 | 537 | // SEARCH FORM 538 | // ----------- 539 | 540 | input.search-query { 541 | padding-right: 14px; 542 | padding-right: 4px \9; 543 | padding-left: 14px; 544 | padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ 545 | margin-bottom: 0; // Remove the default margin on all inputs 546 | @include ctb-border-radius(15px); 547 | } 548 | 549 | /* Allow for input prepend/append in search forms */ 550 | .form-search .input-append .search-query, 551 | .form-search .input-prepend .search-query { 552 | @include ctb-border-radius(0); // Override due to specificity 553 | } 554 | .form-search .input-append .search-query { 555 | @include ctb-border-radius(14px 0 0 14px); 556 | } 557 | .form-search .input-append .btn { 558 | @include ctb-border-radius(0 14px 14px 0); 559 | } 560 | .form-search .input-prepend .search-query { 561 | @include ctb-border-radius(0 14px 14px 0); 562 | } 563 | .form-search .input-prepend .btn { 564 | @include ctb-border-radius(14px 0 0 14px); 565 | } 566 | 567 | 568 | 569 | 570 | // HORIZONTAL & VERTICAL FORMS 571 | // --------------------------- 572 | 573 | // Common properties 574 | // ----------------- 575 | 576 | .form-search, 577 | .form-inline, 578 | .form-horizontal { 579 | input, 580 | textarea, 581 | select, 582 | .help-inline, 583 | .uneditable-input, 584 | .input-prepend, 585 | .input-append { 586 | display: inline-block; 587 | @include ctb-ie7-inline-block(); 588 | margin-bottom: 0; 589 | vertical-align: middle; 590 | } 591 | // Re-hide hidden elements due to specifity 592 | .hide { 593 | display: none; 594 | } 595 | } 596 | .form-search label, 597 | .form-inline label, 598 | .form-search .btn-group, 599 | .form-inline .btn-group { 600 | display: inline-block; 601 | } 602 | // Remove margin for input-prepend/-append 603 | .form-search .input-append, 604 | .form-inline .input-append, 605 | .form-search .input-prepend, 606 | .form-inline .input-prepend { 607 | margin-bottom: 0; 608 | } 609 | // Inline checkbox/radio labels (remove padding on left) 610 | .form-search .radio, 611 | .form-search .checkbox, 612 | .form-inline .radio, 613 | .form-inline .checkbox { 614 | padding-left: 0; 615 | margin-bottom: 0; 616 | vertical-align: middle; 617 | } 618 | // Remove float and margin, set to inline-block 619 | .form-search .radio input[type="radio"], 620 | .form-search .checkbox input[type="checkbox"], 621 | .form-inline .radio input[type="radio"], 622 | .form-inline .checkbox input[type="checkbox"] { 623 | float: left; 624 | margin-right: 3px; 625 | margin-left: 0; 626 | } 627 | 628 | 629 | // Margin to space out fieldsets 630 | .control-group { 631 | margin-bottom: $baseLineHeight / 2; 632 | } 633 | 634 | // Legend collapses margin, so next element is responsible for spacing 635 | legend + .control-group { 636 | margin-top: $baseLineHeight; 637 | -webkit-margin-top-collapse: separate; 638 | } 639 | 640 | // Horizontal-specific styles 641 | // -------------------------- 642 | 643 | .form-horizontal { 644 | // Increase spacing between groups 645 | .control-group { 646 | margin-bottom: $baseLineHeight; 647 | @include ctb-clearfix(); 648 | } 649 | // Float the labels left 650 | .control-label { 651 | float: left; 652 | width: $horizontalComponentOffset - 20; 653 | padding-top: 5px; 654 | text-align: right; 655 | } 656 | // Move over all input controls and content 657 | .controls { 658 | // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend 659 | // don't inherit the margin of the parent, in this case .controls 660 | *display: inline-block; 661 | *padding-left: 20px; 662 | margin-left: $horizontalComponentOffset; 663 | *margin-left: 0; 664 | &:first-child { 665 | *padding-left: $horizontalComponentOffset; 666 | } 667 | } 668 | // Remove bottom margin on block level help text since that's accounted for on .control-group 669 | .help-block { 670 | margin-bottom: 0; 671 | } 672 | // And apply it only to .help-block instances that follow a form control 673 | input, 674 | select, 675 | textarea, 676 | .uneditable-input, 677 | .input-prepend, 678 | .input-append { 679 | + .help-block { 680 | margin-top: $baseLineHeight / 2; 681 | } 682 | } 683 | // Move over buttons in .form-actions to align with .controls 684 | .form-actions { 685 | padding-left: $horizontalComponentOffset; 686 | } 687 | } 688 | -------------------------------------------------------------------------------- /app/styles/compass_twitter_bootstrap/_font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 3.0.1 3 | * the iconic font designed for use with Twitter Bootstrap 4 | * ------------------------------------------------------- 5 | * The full suite of pictographic icons, examples, and documentation 6 | * can be found at: http://fortawesome.github.com/Font-Awesome/ 7 | * 8 | * License 9 | * ------------------------------------------------------- 10 | * - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL 11 | * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License - 12 | * http://opensource.org/licenses/mit-license.html 13 | * - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/ 14 | * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: 15 | * "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome" 16 | * 17 | * Contact 18 | * ------------------------------------------------------- 19 | * Email: dave@davegandy.com 20 | * Twitter: http://twitter.com/fortaweso_me 21 | * Work: Lead Product Designer @ http://kyruus.com 22 | */ 23 | 24 | @import "compass/css3/font-face"; 25 | $fontAwesomePath: "fontawesome-webfont" !default; 26 | $borderColor: #eee; 27 | $iconMuted: #eee; 28 | @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } 29 | 30 | 31 | @include font-face( 32 | 'FontAwesome', 33 | font-files( 34 | "#{$fontAwesomePath}.woff?v=3.0.1", woff, 35 | "#{$fontAwesomePath}.ttf?v=3.0.1", truetype), 36 | '#{$fontAwesomePath}.eot?v=3.0.1', 37 | normal, 38 | normal); 39 | 40 | 41 | /* Font Awesome styles 42 | ------------------------------------------------------- */ 43 | [class^="icon-"], 44 | [class*=" icon-"] { 45 | font-family: FontAwesome; 46 | font-weight: normal; 47 | font-style: normal; 48 | text-decoration: inherit; 49 | -webkit-font-smoothing: antialiased; 50 | 51 | /* sprites.less reset */ 52 | display: inline; 53 | width: auto; 54 | height: auto; 55 | line-height: normal; 56 | vertical-align: baseline; 57 | background-image: none; 58 | background-position: 0% 0%; 59 | background-repeat: repeat; 60 | margin-top: 0; 61 | } 62 | 63 | /* more sprites.less reset */ 64 | .icon-white, 65 | .nav-pills > .active > a > [class^="icon-"], 66 | .nav-pills > .active > a > [class*=" icon-"], 67 | .nav-list > .active > a > [class^="icon-"], 68 | .nav-list > .active > a > [class*=" icon-"], 69 | .navbar-inverse .nav > .active > a > [class^="icon-"], 70 | .navbar-inverse .nav > .active > a > [class*=" icon-"], 71 | .dropdown-menu > li > a:hover > [class^="icon-"], 72 | .dropdown-menu > li > a:hover > [class*=" icon-"], 73 | .dropdown-menu > .active > a > [class^="icon-"], 74 | .dropdown-menu > .active > a > [class*=" icon-"], 75 | .dropdown-submenu:hover > a > [class^="icon-"], 76 | .dropdown-submenu:hover > a > [class*=" icon-"] { 77 | background-image: none; 78 | } 79 | 80 | [class^="icon-"]:before, 81 | [class*=" icon-"]:before { 82 | text-decoration: inherit; 83 | display: inline-block; 84 | speak: none; 85 | } 86 | 87 | /* makes sure icons active on rollover in links */ 88 | a { 89 | [class^="icon-"], 90 | [class*=" icon-"] { 91 | display: inline-block; 92 | } 93 | } 94 | 95 | /* makes the font 33% larger relative to the icon container */ 96 | .icon-large:before { 97 | vertical-align: -10%; 98 | font-size: 1.3333333333333333em; 99 | } 100 | 101 | .btn, .nav { 102 | [class^="icon-"], 103 | [class*=" icon-"] { 104 | display: inline; 105 | /* keeps button heights with and without icons the same */ 106 | &.icon-large { line-height: .9em; } 107 | &.icon-spin { display: inline-block; } 108 | } 109 | } 110 | 111 | .nav-tabs, .nav-pills { 112 | [class^="icon-"], 113 | [class*=" icon-"] { 114 | /* keeps button heights with and without icons the same */ 115 | &, &.icon-large { line-height: .9em; } 116 | } 117 | } 118 | 119 | li, .nav li { 120 | [class^="icon-"], 121 | [class*=" icon-"] { 122 | display: inline-block; 123 | width: 1.25em; 124 | text-align: center; 125 | &.icon-large { 126 | /* increased font size for icon-large */ 127 | width: 1.5625em; 128 | } 129 | } 130 | } 131 | 132 | ul.icons { 133 | list-style-type: none; 134 | text-indent: -.75em; 135 | 136 | li { 137 | [class^="icon-"], 138 | [class*=" icon-"] { 139 | width: .75em; 140 | } 141 | } 142 | } 143 | 144 | .icon-muted { 145 | color: $iconMuted; 146 | } 147 | 148 | // Icon Borders 149 | // ------------------------- 150 | 151 | .icon-border { 152 | border: solid 1px $borderColor; 153 | padding: .2em .25em .15em; 154 | @include border-radius(3px); 155 | } 156 | 157 | // Icon Sizes 158 | // ------------------------- 159 | 160 | .icon-2x { 161 | font-size: 2em; 162 | &.icon-border { 163 | border-width: 2px; 164 | @include border-radius(4px); 165 | } 166 | } 167 | .icon-3x { 168 | font-size: 3em; 169 | &.icon-border { 170 | border-width: 3px; 171 | @include border-radius(5px); 172 | } 173 | } 174 | .icon-4x { 175 | font-size: 4em; 176 | &.icon-border { 177 | border-width: 4px; 178 | @include border-radius(6px); 179 | } 180 | } 181 | 182 | // Floats 183 | // ------------------------- 184 | 185 | // Quick floats 186 | .pull-right { float: right; } 187 | .pull-left { float: left; } 188 | 189 | [class^="icon-"], 190 | [class*=" icon-"] { 191 | &.pull-left { 192 | margin-right: .3em; 193 | } 194 | &.pull-right { 195 | margin-left: .3em; 196 | } 197 | } 198 | 199 | .btn { 200 | [class^="icon-"], 201 | [class*=" icon-"] { 202 | &.pull-left, &.pull-right { 203 | &.icon-2x { margin-top: .18em; } 204 | } 205 | &.icon-spin.icon-large { line-height: .8em; } 206 | } 207 | } 208 | 209 | .btn.btn-small { 210 | [class^="icon-"], 211 | [class*=" icon-"] { 212 | &.pull-left, &.pull-right { 213 | &.icon-2x { margin-top: .25em; } 214 | } 215 | } 216 | } 217 | 218 | .btn.btn-large { 219 | [class^="icon-"], 220 | [class*=" icon-"] { 221 | margin-top: 0; // overrides bootstrap default 222 | &.pull-left, &.pull-right { 223 | &.icon-2x { margin-top: .05em; } 224 | } 225 | &.pull-left.icon-2x { margin-right: .2em; } 226 | &.pull-right.icon-2x { margin-left: .2em; } 227 | } 228 | } 229 | 230 | 231 | .icon-spin { 232 | display: inline-block; 233 | -moz-animation: spin 2s infinite linear; 234 | -o-animation: spin 2s infinite linear; 235 | -webkit-animation: spin 2s infinite linear; 236 | animation: spin 2s infinite linear; 237 | } 238 | 239 | @-moz-keyframes spin { 240 | 0% { -moz-transform: rotate(0deg); } 241 | 100% { -moz-transform: rotate(359deg); } 242 | } 243 | @-webkit-keyframes spin { 244 | 0% { -webkit-transform: rotate(0deg); } 245 | 100% { -webkit-transform: rotate(359deg); } 246 | } 247 | @-o-keyframes spin { 248 | 0% { -o-transform: rotate(0deg); } 249 | 100% { -o-transform: rotate(359deg); } 250 | } 251 | @-ms-keyframes spin { 252 | 0% { -ms-transform: rotate(0deg); } 253 | 100% { -ms-transform: rotate(359deg); } 254 | } 255 | @keyframes spin { 256 | 0% { transform: rotate(0deg); } 257 | 100% { transform: rotate(359deg); } 258 | } 259 | 260 | @-moz-document url-prefix() { 261 | .icon-spin { height: .9em; } 262 | .btn .icon-spin { height: auto; } 263 | .icon-spin.icon-large { height: 1.25em; } 264 | .btn .icon-spin.icon-large { height: .75em; } 265 | } 266 | 267 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 268 | readers do not read off random characters that represent icons */ 269 | .icon-glass:before { content: "\f000"; } 270 | .icon-music:before { content: "\f001"; } 271 | .icon-search:before { content: "\f002"; } 272 | .icon-envelope:before { content: "\f003"; } 273 | .icon-heart:before { content: "\f004"; } 274 | .icon-star:before { content: "\f005"; } 275 | .icon-star-empty:before { content: "\f006"; } 276 | .icon-user:before { content: "\f007"; } 277 | .icon-film:before { content: "\f008"; } 278 | .icon-th-large:before { content: "\f009"; } 279 | .icon-th:before { content: "\f00a"; } 280 | .icon-th-list:before { content: "\f00b"; } 281 | .icon-ok:before { content: "\f00c"; } 282 | .icon-remove:before { content: "\f00d"; } 283 | .icon-zoom-in:before { content: "\f00e"; } 284 | 285 | .icon-zoom-out:before { content: "\f010"; } 286 | .icon-off:before { content: "\f011"; } 287 | .icon-signal:before { content: "\f012"; } 288 | .icon-cog:before { content: "\f013"; } 289 | .icon-trash:before { content: "\f014"; } 290 | .icon-home:before { content: "\f015"; } 291 | .icon-file:before { content: "\f016"; } 292 | .icon-time:before { content: "\f017"; } 293 | .icon-road:before { content: "\f018"; } 294 | .icon-download-alt:before { content: "\f019"; } 295 | .icon-download:before { content: "\f01a"; } 296 | .icon-upload:before { content: "\f01b"; } 297 | .icon-inbox:before { content: "\f01c"; } 298 | .icon-play-circle:before { content: "\f01d"; } 299 | .icon-repeat:before { content: "\f01e"; } 300 | 301 | /* \f020 doesn't work in Safari. all shifted one down */ 302 | .icon-refresh:before { content: "\f021"; } 303 | .icon-list-alt:before { content: "\f022"; } 304 | .icon-lock:before { content: "\f023"; } 305 | .icon-flag:before { content: "\f024"; } 306 | .icon-headphones:before { content: "\f025"; } 307 | .icon-volume-off:before { content: "\f026"; } 308 | .icon-volume-down:before { content: "\f027"; } 309 | .icon-volume-up:before { content: "\f028"; } 310 | .icon-qrcode:before { content: "\f029"; } 311 | .icon-barcode:before { content: "\f02a"; } 312 | .icon-tag:before { content: "\f02b"; } 313 | .icon-tags:before { content: "\f02c"; } 314 | .icon-book:before { content: "\f02d"; } 315 | .icon-bookmark:before { content: "\f02e"; } 316 | .icon-print:before { content: "\f02f"; } 317 | 318 | .icon-camera:before { content: "\f030"; } 319 | .icon-font:before { content: "\f031"; } 320 | .icon-bold:before { content: "\f032"; } 321 | .icon-italic:before { content: "\f033"; } 322 | .icon-text-height:before { content: "\f034"; } 323 | .icon-text-width:before { content: "\f035"; } 324 | .icon-align-left:before { content: "\f036"; } 325 | .icon-align-center:before { content: "\f037"; } 326 | .icon-align-right:before { content: "\f038"; } 327 | .icon-align-justify:before { content: "\f039"; } 328 | .icon-list:before { content: "\f03a"; } 329 | .icon-indent-left:before { content: "\f03b"; } 330 | .icon-indent-right:before { content: "\f03c"; } 331 | .icon-facetime-video:before { content: "\f03d"; } 332 | .icon-picture:before { content: "\f03e"; } 333 | 334 | .icon-pencil:before { content: "\f040"; } 335 | .icon-map-marker:before { content: "\f041"; } 336 | .icon-adjust:before { content: "\f042"; } 337 | .icon-tint:before { content: "\f043"; } 338 | .icon-edit:before { content: "\f044"; } 339 | .icon-share:before { content: "\f045"; } 340 | .icon-check:before { content: "\f046"; } 341 | .icon-move:before { content: "\f047"; } 342 | .icon-step-backward:before { content: "\f048"; } 343 | .icon-fast-backward:before { content: "\f049"; } 344 | .icon-backward:before { content: "\f04a"; } 345 | .icon-play:before { content: "\f04b"; } 346 | .icon-pause:before { content: "\f04c"; } 347 | .icon-stop:before { content: "\f04d"; } 348 | .icon-forward:before { content: "\f04e"; } 349 | 350 | .icon-fast-forward:before { content: "\f050"; } 351 | .icon-step-forward:before { content: "\f051"; } 352 | .icon-eject:before { content: "\f052"; } 353 | .icon-chevron-left:before { content: "\f053"; } 354 | .icon-chevron-right:before { content: "\f054"; } 355 | .icon-plus-sign:before { content: "\f055"; } 356 | .icon-minus-sign:before { content: "\f056"; } 357 | .icon-remove-sign:before { content: "\f057"; } 358 | .icon-ok-sign:before { content: "\f058"; } 359 | .icon-question-sign:before { content: "\f059"; } 360 | .icon-info-sign:before { content: "\f05a"; } 361 | .icon-screenshot:before { content: "\f05b"; } 362 | .icon-remove-circle:before { content: "\f05c"; } 363 | .icon-ok-circle:before { content: "\f05d"; } 364 | .icon-ban-circle:before { content: "\f05e"; } 365 | 366 | .icon-arrow-left:before { content: "\f060"; } 367 | .icon-arrow-right:before { content: "\f061"; } 368 | .icon-arrow-up:before { content: "\f062"; } 369 | .icon-arrow-down:before { content: "\f063"; } 370 | .icon-share-alt:before { content: "\f064"; } 371 | .icon-resize-full:before { content: "\f065"; } 372 | .icon-resize-small:before { content: "\f066"; } 373 | .icon-plus:before { content: "\f067"; } 374 | .icon-minus:before { content: "\f068"; } 375 | .icon-asterisk:before { content: "\f069"; } 376 | .icon-exclamation-sign:before { content: "\f06a"; } 377 | .icon-gift:before { content: "\f06b"; } 378 | .icon-leaf:before { content: "\f06c"; } 379 | .icon-fire:before { content: "\f06d"; } 380 | .icon-eye-open:before { content: "\f06e"; } 381 | 382 | .icon-eye-close:before { content: "\f070"; } 383 | .icon-warning-sign:before { content: "\f071"; } 384 | .icon-plane:before { content: "\f072"; } 385 | .icon-calendar:before { content: "\f073"; } 386 | .icon-random:before { content: "\f074"; } 387 | .icon-comment:before { content: "\f075"; } 388 | .icon-magnet:before { content: "\f076"; } 389 | .icon-chevron-up:before { content: "\f077"; } 390 | .icon-chevron-down:before { content: "\f078"; } 391 | .icon-retweet:before { content: "\f079"; } 392 | .icon-shopping-cart:before { content: "\f07a"; } 393 | .icon-folder-close:before { content: "\f07b"; } 394 | .icon-folder-open:before { content: "\f07c"; } 395 | .icon-resize-vertical:before { content: "\f07d"; } 396 | .icon-resize-horizontal:before { content: "\f07e"; } 397 | 398 | .icon-bar-chart:before { content: "\f080"; } 399 | .icon-twitter-sign:before { content: "\f081"; } 400 | .icon-facebook-sign:before { content: "\f082"; } 401 | .icon-camera-retro:before { content: "\f083"; } 402 | .icon-key:before { content: "\f084"; } 403 | .icon-cogs:before { content: "\f085"; } 404 | .icon-comments:before { content: "\f086"; } 405 | .icon-thumbs-up:before { content: "\f087"; } 406 | .icon-thumbs-down:before { content: "\f088"; } 407 | .icon-star-half:before { content: "\f089"; } 408 | .icon-heart-empty:before { content: "\f08a"; } 409 | .icon-signout:before { content: "\f08b"; } 410 | .icon-linkedin-sign:before { content: "\f08c"; } 411 | .icon-pushpin:before { content: "\f08d"; } 412 | .icon-external-link:before { content: "\f08e"; } 413 | 414 | .icon-signin:before { content: "\f090"; } 415 | .icon-trophy:before { content: "\f091"; } 416 | .icon-github-sign:before { content: "\f092"; } 417 | .icon-upload-alt:before { content: "\f093"; } 418 | .icon-lemon:before { content: "\f094"; } 419 | .icon-phone:before { content: "\f095"; } 420 | .icon-check-empty:before { content: "\f096"; } 421 | .icon-bookmark-empty:before { content: "\f097"; } 422 | .icon-phone-sign:before { content: "\f098"; } 423 | .icon-twitter:before { content: "\f099"; } 424 | .icon-facebook:before { content: "\f09a"; } 425 | .icon-github:before { content: "\f09b"; } 426 | .icon-unlock:before { content: "\f09c"; } 427 | .icon-credit-card:before { content: "\f09d"; } 428 | .icon-rss:before { content: "\f09e"; } 429 | 430 | .icon-hdd:before { content: "\f0a0"; } 431 | .icon-bullhorn:before { content: "\f0a1"; } 432 | .icon-bell:before { content: "\f0a2"; } 433 | .icon-certificate:before { content: "\f0a3"; } 434 | .icon-hand-right:before { content: "\f0a4"; } 435 | .icon-hand-left:before { content: "\f0a5"; } 436 | .icon-hand-up:before { content: "\f0a6"; } 437 | .icon-hand-down:before { content: "\f0a7"; } 438 | .icon-circle-arrow-left:before { content: "\f0a8"; } 439 | .icon-circle-arrow-right:before { content: "\f0a9"; } 440 | .icon-circle-arrow-up:before { content: "\f0aa"; } 441 | .icon-circle-arrow-down:before { content: "\f0ab"; } 442 | .icon-globe:before { content: "\f0ac"; } 443 | .icon-wrench:before { content: "\f0ad"; } 444 | .icon-tasks:before { content: "\f0ae"; } 445 | 446 | .icon-filter:before { content: "\f0b0"; } 447 | .icon-briefcase:before { content: "\f0b1"; } 448 | .icon-fullscreen:before { content: "\f0b2"; } 449 | 450 | .icon-group:before { content: "\f0c0"; } 451 | .icon-link:before { content: "\f0c1"; } 452 | .icon-cloud:before { content: "\f0c2"; } 453 | .icon-beaker:before { content: "\f0c3"; } 454 | .icon-cut:before { content: "\f0c4"; } 455 | .icon-copy:before { content: "\f0c5"; } 456 | .icon-paper-clip:before { content: "\f0c6"; } 457 | .icon-save:before { content: "\f0c7"; } 458 | .icon-sign-blank:before { content: "\f0c8"; } 459 | .icon-reorder:before { content: "\f0c9"; } 460 | .icon-list-ul:before { content: "\f0ca"; } 461 | .icon-list-ol:before { content: "\f0cb"; } 462 | .icon-strikethrough:before { content: "\f0cc"; } 463 | .icon-underline:before { content: "\f0cd"; } 464 | .icon-table:before { content: "\f0ce"; } 465 | 466 | .icon-magic:before { content: "\f0d0"; } 467 | .icon-truck:before { content: "\f0d1"; } 468 | .icon-pinterest:before { content: "\f0d2"; } 469 | .icon-pinterest-sign:before { content: "\f0d3"; } 470 | .icon-google-plus-sign:before { content: "\f0d4"; } 471 | .icon-google-plus:before { content: "\f0d5"; } 472 | .icon-money:before { content: "\f0d6"; } 473 | .icon-caret-down:before { content: "\f0d7"; } 474 | .icon-caret-up:before { content: "\f0d8"; } 475 | .icon-caret-left:before { content: "\f0d9"; } 476 | .icon-caret-right:before { content: "\f0da"; } 477 | .icon-columns:before { content: "\f0db"; } 478 | .icon-sort:before { content: "\f0dc"; } 479 | .icon-sort-down:before { content: "\f0dd"; } 480 | .icon-sort-up:before { content: "\f0de"; } 481 | 482 | .icon-envelope-alt:before { content: "\f0e0"; } 483 | .icon-linkedin:before { content: "\f0e1"; } 484 | .icon-undo:before { content: "\f0e2"; } 485 | .icon-legal:before { content: "\f0e3"; } 486 | .icon-dashboard:before { content: "\f0e4"; } 487 | .icon-comment-alt:before { content: "\f0e5"; } 488 | .icon-comments-alt:before { content: "\f0e6"; } 489 | .icon-bolt:before { content: "\f0e7"; } 490 | .icon-sitemap:before { content: "\f0e8"; } 491 | .icon-umbrella:before { content: "\f0e9"; } 492 | .icon-paste:before { content: "\f0ea"; } 493 | .icon-lightbulb:before { content: "\f0eb"; } 494 | .icon-exchange:before { content: "\f0ec"; } 495 | .icon-cloud-download:before { content: "\f0ed"; } 496 | .icon-cloud-upload:before { content: "\f0ee"; } 497 | 498 | .icon-user-md:before { content: "\f0f0"; } 499 | .icon-stethoscope:before { content: "\f0f1"; } 500 | .icon-suitcase:before { content: "\f0f2"; } 501 | .icon-bell-alt:before { content: "\f0f3"; } 502 | .icon-coffee:before { content: "\f0f4"; } 503 | .icon-food:before { content: "\f0f5"; } 504 | .icon-file-alt:before { content: "\f0f6"; } 505 | .icon-building:before { content: "\f0f7"; } 506 | .icon-hospital:before { content: "\f0f8"; } 507 | .icon-ambulance:before { content: "\f0f9"; } 508 | .icon-medkit:before { content: "\f0fa"; } 509 | .icon-fighter-jet:before { content: "\f0fb"; } 510 | .icon-beer:before { content: "\f0fc"; } 511 | .icon-h-sign:before { content: "\f0fd"; } 512 | .icon-plus-sign-alt:before { content: "\f0fe"; } 513 | 514 | .icon-double-angle-left:before { content: "\f100"; } 515 | .icon-double-angle-right:before { content: "\f101"; } 516 | .icon-double-angle-up:before { content: "\f102"; } 517 | .icon-double-angle-down:before { content: "\f103"; } 518 | .icon-angle-left:before { content: "\f104"; } 519 | .icon-angle-right:before { content: "\f105"; } 520 | .icon-angle-up:before { content: "\f106"; } 521 | .icon-angle-down:before { content: "\f107"; } 522 | .icon-desktop:before { content: "\f108"; } 523 | .icon-laptop:before { content: "\f109"; } 524 | .icon-tablet:before { content: "\f10a"; } 525 | .icon-mobile-phone:before { content: "\f10b"; } 526 | .icon-circle-blank:before { content: "\f10c"; } 527 | .icon-quote-left:before { content: "\f10d"; } 528 | .icon-quote-right:before { content: "\f10e"; } 529 | 530 | .icon-spinner:before { content: "\f110"; } 531 | .icon-circle:before { content: "\f111"; } 532 | .icon-reply:before { content: "\f112"; } 533 | .icon-github-alt:before { content: "\f113"; } 534 | .icon-folder-close-alt:before { content: "\f114"; } 535 | .icon-folder-open-alt:before { content: "\f115"; } 536 | --------------------------------------------------------------------------------