| @@ -0,0 +1,250 @@ | ||
| { | ||
| "private": true, | ||
| "scripts": { | ||
| "build": "webpack --config client-config/webpack-production.config.js --progress --profile --colors" | ||
| }, | ||
| "dependencies": { | ||
| "autoprefixer-loader": "^3.0.0", | ||
| "babel-core": "^5.0.12", | ||
| "babel-loader": "^5.0.0", | ||
| "body-parser": "^1.9.3", | ||
| "css-loader": "^0.18.0", | ||
| "extract-text-webpack-plugin": "^0.8.0", | ||
| "file-loader": "^0.8.1", | ||
| "html-loader": "^0.3.0", | ||
| "less": "^2.1.2", | ||
| "less-loader": "^2.0.0", | ||
| "markdown-loader": "^0.1.6", | ||
| "node-sass": "^3.3.2", | ||
| "null-loader": "^0.1.0", | ||
| "react-proxy-loader": "^0.3.1", | ||
| "sass-loader": "^2.0.1", | ||
| "style-loader": "^0.12.0", | ||
| "url-loader": "^0.5.5", | ||
| "uuid": "^2.0.1", | ||
| "webpack": "^1.8.5", | ||
| "webpack-dev-server": "^1.4.7" | ||
| }, | ||
| "devDependencies": {}, | ||
| "eslintConfig": { | ||
| "parser": "babel-eslint", | ||
| "root": true, | ||
| "globals": {}, | ||
| "env": { | ||
| "es6": true, | ||
| "node": true, | ||
| "browser": true | ||
| }, | ||
| "plugins": [ | ||
| "react" | ||
| ], | ||
| "ecmaFeatures": { | ||
| "arrowFunctions": true, | ||
| "binaryLiterals": true, | ||
| "blockBindings": true, | ||
| "classes": true, | ||
| "defaultParams": true, | ||
| "destructuring": true, | ||
| "forOf": true, | ||
| "generators": true, | ||
| "modules": true, | ||
| "objectLiteralComputedProperties": true, | ||
| "objectLiteralDuplicateProperties": true, | ||
| "objectLiteralShorthandMethods": true, | ||
| "objectLiteralShorthandProperties": true, | ||
| "octalLiterals": true, | ||
| "regexUFlag": true, | ||
| "regexYFlag": true, | ||
| "spread": true, | ||
| "superInFunctions": true, | ||
| "templateStrings": true, | ||
| "unicodeCodePointEscapes": true, | ||
| "globalReturn": true, | ||
| "jsx": true | ||
| }, | ||
| "rules": { | ||
| "indent": [ | ||
| 1, | ||
| "tab" | ||
| ], | ||
| "quotes": [ | ||
| 1, | ||
| "double" | ||
| ], | ||
| "linebreak-style": [ | ||
| 2, | ||
| "unix" | ||
| ], | ||
| "semi": [ | ||
| 2, | ||
| "always" | ||
| ], | ||
| "brace-style": [ | ||
| 2, | ||
| "stroustrup", | ||
| { | ||
| "allowSingleLine": true | ||
| } | ||
| ], | ||
| "camelcase": 1, | ||
| "comma-spacing": [ | ||
| 1, | ||
| { | ||
| "before": false, | ||
| "after": true | ||
| } | ||
| ], | ||
| "comma-style": [ | ||
| 1, | ||
| "last" | ||
| ], | ||
| "consistent-this": [ | ||
| 1, | ||
| "_this" | ||
| ], | ||
| "eol-last": 1, | ||
| "func-names": 0, | ||
| "func-style": 0, | ||
| "key-spacing": [ | ||
| 1, | ||
| { | ||
| "beforeColon": false, | ||
| "afterColon": true | ||
| } | ||
| ], | ||
| "max-nested-callbacks": [ | ||
| 1, | ||
| 3 | ||
| ], | ||
| "new-parens": 1, | ||
| "newline-after-var": 0, | ||
| "no-array-constructor": 1, | ||
| "no-alert": 1, | ||
| "no-inline-comments": 1, | ||
| "no-lonely-if": 1, | ||
| "no-mixed-spaces-and-tabs": 1, | ||
| "no-multiple-empty-lines": [ | ||
| 1, | ||
| { | ||
| "max": 1 | ||
| } | ||
| ], | ||
| "no-nested-ternary": 1, | ||
| "no-new-object": 1, | ||
| "no-spaced-func": 1, | ||
| "no-ternary": 0, | ||
| "no-trailing-spaces": 1, | ||
| "operator-assignment": [ | ||
| 1, | ||
| "never" | ||
| ], | ||
| "padded-blocks": [ | ||
| 1, | ||
| "never" | ||
| ], | ||
| "quote-props": [ | ||
| 1, | ||
| "as-needed" | ||
| ], | ||
| "semi-spacing": [ | ||
| 1, | ||
| { | ||
| "before": false, | ||
| "after": true | ||
| } | ||
| ], | ||
| "sort-vars": 0, | ||
| "space-after-keywords": [ | ||
| 1, | ||
| "always" | ||
| ], | ||
| "space-before-blocks": [ | ||
| 1, | ||
| "always" | ||
| ], | ||
| "space-before-function-paren": [ | ||
| 1, | ||
| { | ||
| "anonymous": "always", | ||
| "named": "never" | ||
| } | ||
| ], | ||
| "space-in-parens": [ | ||
| 1, | ||
| "never" | ||
| ], | ||
| "space-unary-ops": [ | ||
| 1, | ||
| { | ||
| "words": true, | ||
| "nonwords": false | ||
| } | ||
| ], | ||
| "wrap-regex": 0, | ||
| "strict": 0, | ||
| "comma-dangle": 2, | ||
| "no-cond-assign": 2, | ||
| "no-console": 1, | ||
| "no-constant-condition": 2, | ||
| "no-control-regex": 2, | ||
| "no-debugger": 2, | ||
| "no-dupe-args": 2, | ||
| "no-dupe-keys": 2, | ||
| "no-duplicate-case": 2, | ||
| "no-ex-assign": 2, | ||
| "no-extra-boolean-cast": 2, | ||
| "no-extra-parens": 0, | ||
| "no-extra-semi": 2, | ||
| "no-extra-bind": 2, | ||
| "no-func-assign": 2, | ||
| "no-inner-declarations": 2, | ||
| "no-invalid-regexp": 2, | ||
| "no-irregular-whitespace": 2, | ||
| "no-negated-in-lhs": 2, | ||
| "no-obj-calls": 2, | ||
| "no-regex-spaces": 2, | ||
| "no-sparse-arrays": 2, | ||
| "no-unreachable": 2, | ||
| "no-unused-expressions": 1, | ||
| "no-unused-vars": 1, | ||
| "no-use-before-define": 1, | ||
| "use-isnan": 2, | ||
| "valid-jsdoc": 2, | ||
| "valid-typeof": 2, | ||
| "complexity": 0, | ||
| "consistent-return": 2, | ||
| "dot-notation": 2, | ||
| "eqeqeq": 2, | ||
| "no-div-regex": 2, | ||
| "no-eval": 2, | ||
| "no-fallthrough": 2, | ||
| "no-floating-decimal": 2, | ||
| "no-implied-eval": 2, | ||
| "no-iterator": 2, | ||
| "no-lone-blocks": 2, | ||
| "no-loop-func": 2, | ||
| "no-multi-spaces": 2, | ||
| "no-undef": 2, | ||
| "react/display-name": 0, | ||
| "react/jsx-boolean-value": 1, | ||
| "react/jsx-curly-spacing": 1, | ||
| "react/jsx-no-duplicate-props": 1, | ||
| "react/jsx-no-undef": 2, | ||
| "react/jsx-sort-prop-types": 0, | ||
| "react/jsx-sort-props": 0, | ||
| "react/jsx-uses-react": 2, | ||
| "react/jsx-uses-vars": 2, | ||
| "react/no-danger": 1, | ||
| "react/no-did-mount-set-state": 2, | ||
| "react/no-did-update-set-state": 2, | ||
| "react/no-multi-comp": 0, | ||
| "react/no-unknown-property": 2, | ||
| "react/prop-types": 2, | ||
| "react/react-in-jsx-scope": 2, | ||
| "react/require-extension": 1, | ||
| "react/self-closing-comp": 2, | ||
| "react/sort-comp": 1, | ||
| "react/wrap-multilines": 2 | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,9 @@ | ||
| @function twbs-font-path($path) { | ||
| @return font-url($path, true); | ||
| } | ||
|
|
||
| @function twbs-image-path($path) { | ||
| @return image-url($path, true); | ||
| } | ||
|
|
||
| $bootstrap-sass-asset-helper: true; |
| @@ -0,0 +1,19 @@ | ||
| // Mincer asset helper functions | ||
| // | ||
| // This must be imported into a .css.ejs.scss file. | ||
| // Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation. | ||
|
|
||
|
|
||
| @function twbs-font-path($path) { | ||
| // do something like following | ||
| // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>" | ||
| // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>" | ||
| // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>" | ||
| @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>"; | ||
| } | ||
|
|
||
| @function twbs-image-path($file) { | ||
| @return "<%- asset_path('#{$file}') %>"; | ||
| } | ||
|
|
||
| $bootstrap-sass-asset-helper: true; |
| @@ -0,0 +1,9 @@ | ||
| @function twbs-font-path($path) { | ||
| @return font-path($path); | ||
| } | ||
|
|
||
| @function twbs-image-path($path) { | ||
| @return image-path($path); | ||
| } | ||
|
|
||
| $bootstrap-sass-asset-helper: true; |
| @@ -0,0 +1,56 @@ | ||
| /*! | ||
| * Bootstrap v3.3.5 (http://getbootstrap.com) | ||
| * Copyright 2011-2015 Twitter, Inc. | ||
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | ||
| */ | ||
|
|
||
| // Core variables and mixins | ||
| @import "bootstrap/variables"; | ||
| @import "bootstrap/mixins"; | ||
|
|
||
| // Reset and dependencies | ||
| @import "bootstrap/normalize"; | ||
| @import "bootstrap/print"; | ||
| @import "bootstrap/glyphicons"; | ||
|
|
||
| // Core CSS | ||
| @import "bootstrap/scaffolding"; | ||
| @import "bootstrap/type"; | ||
| @import "bootstrap/code"; | ||
| @import "bootstrap/grid"; | ||
| @import "bootstrap/tables"; | ||
| @import "bootstrap/forms"; | ||
| @import "bootstrap/buttons"; | ||
|
|
||
| // Components | ||
| @import "bootstrap/component-animations"; | ||
| @import "bootstrap/dropdowns"; | ||
| @import "bootstrap/button-groups"; | ||
| @import "bootstrap/input-groups"; | ||
| @import "bootstrap/navs"; | ||
| @import "bootstrap/navbar"; | ||
| @import "bootstrap/breadcrumbs"; | ||
| @import "bootstrap/pagination"; | ||
| @import "bootstrap/pager"; | ||
| @import "bootstrap/labels"; | ||
| @import "bootstrap/badges"; | ||
| @import "bootstrap/jumbotron"; | ||
| @import "bootstrap/thumbnails"; | ||
| @import "bootstrap/alerts"; | ||
| @import "bootstrap/progress-bars"; | ||
| @import "bootstrap/media"; | ||
| @import "bootstrap/list-group"; | ||
| @import "bootstrap/panels"; | ||
| @import "bootstrap/responsive-embed"; | ||
| @import "bootstrap/wells"; | ||
| @import "bootstrap/close"; | ||
|
|
||
| // Components w/ JavaScript | ||
| @import "bootstrap/modals"; | ||
| @import "bootstrap/tooltip"; | ||
| @import "bootstrap/popovers"; | ||
| @import "bootstrap/carousel"; | ||
|
|
||
| // Utility classes | ||
| @import "bootstrap/utilities"; | ||
| @import "bootstrap/responsive-utilities"; |
| @@ -0,0 +1,73 @@ | ||
| // | ||
| // Alerts | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base styles | ||
| // ------------------------- | ||
|
|
||
| .alert { | ||
| padding: $alert-padding; | ||
| margin-bottom: $line-height-computed; | ||
| border: 1px solid transparent; | ||
| border-radius: $alert-border-radius; | ||
|
|
||
| // Headings for larger alerts | ||
| h4 { | ||
| margin-top: 0; | ||
| // Specified for the h4 to prevent conflicts of changing $headings-color | ||
| color: inherit; | ||
| } | ||
|
|
||
| // Provide class for links that match alerts | ||
| .alert-link { | ||
| font-weight: $alert-link-font-weight; | ||
| } | ||
|
|
||
| // Improve alignment and spacing of inner content | ||
| > p, | ||
| > ul { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| > p + p { | ||
| margin-top: 5px; | ||
| } | ||
| } | ||
|
|
||
| // Dismissible alerts | ||
| // | ||
| // Expand the right padding and account for the close button's positioning. | ||
|
|
||
| .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. | ||
| .alert-dismissible { | ||
| padding-right: ($alert-padding + 20); | ||
|
|
||
| // Adjust close link position | ||
| .close { | ||
| position: relative; | ||
| top: -2px; | ||
| right: -21px; | ||
| color: inherit; | ||
| } | ||
| } | ||
|
|
||
| // Alternate styles | ||
| // | ||
| // Generate contextual modifier classes for colorizing the alert. | ||
|
|
||
| .alert-success { | ||
| @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); | ||
| } | ||
|
|
||
| .alert-info { | ||
| @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); | ||
| } | ||
|
|
||
| .alert-warning { | ||
| @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); | ||
| } | ||
|
|
||
| .alert-danger { | ||
| @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); | ||
| } |
| @@ -0,0 +1,68 @@ | ||
| // | ||
| // Badges | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| .badge { | ||
| display: inline-block; | ||
| min-width: 10px; | ||
| padding: 3px 7px; | ||
| font-size: $font-size-small; | ||
| font-weight: $badge-font-weight; | ||
| color: $badge-color; | ||
| line-height: $badge-line-height; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| background-color: $badge-bg; | ||
| border-radius: $badge-border-radius; | ||
|
|
||
| // Empty badges collapse automatically (not available in IE8) | ||
| &:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| // Quick fix for badges in buttons | ||
| .btn & { | ||
| position: relative; | ||
| top: -1px; | ||
| } | ||
|
|
||
| .btn-xs &, | ||
| .btn-group-xs > .btn & { | ||
| top: 0; | ||
| padding: 1px 5px; | ||
| } | ||
|
|
||
| // [converter] extracted a& to a.badge | ||
|
|
||
| // Account for badges in navs | ||
| .list-group-item.active > &, | ||
| .nav-pills > .active > a > & { | ||
| color: $badge-active-color; | ||
| background-color: $badge-active-bg; | ||
| } | ||
|
|
||
| .list-group-item > & { | ||
| float: right; | ||
| } | ||
|
|
||
| .list-group-item > & + & { | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| .nav-pills > li > a > & { | ||
| margin-left: 3px; | ||
| } | ||
| } | ||
|
|
||
| // Hover state, but only for links | ||
| a.badge { | ||
| &:hover, | ||
| &:focus { | ||
| color: $badge-link-hover-color; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } | ||
| } |
| @@ -0,0 +1,26 @@ | ||
| // | ||
| // Breadcrumbs | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .breadcrumb { | ||
| padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; | ||
| margin-bottom: $line-height-computed; | ||
| list-style: none; | ||
| background-color: $breadcrumb-bg; | ||
| border-radius: $border-radius-base; | ||
|
|
||
| > li { | ||
| display: inline-block; | ||
|
|
||
| + li:before { | ||
| content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space | ||
| padding: 0 5px; | ||
| color: $breadcrumb-color; | ||
| } | ||
| } | ||
|
|
||
| > .active { | ||
| color: $breadcrumb-active-color; | ||
| } | ||
| } |
| @@ -0,0 +1,244 @@ | ||
| // | ||
| // Button groups | ||
| // -------------------------------------------------- | ||
|
|
||
| // Make the div behave like a button | ||
| .btn-group, | ||
| .btn-group-vertical { | ||
| position: relative; | ||
| display: inline-block; | ||
| vertical-align: middle; // match .btn alignment given font-size hack above | ||
| > .btn { | ||
| position: relative; | ||
| float: left; | ||
| // Bring the "active" button to the front | ||
| &:hover, | ||
| &:focus, | ||
| &:active, | ||
| &.active { | ||
| z-index: 2; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Prevent double borders when buttons are next to each other | ||
| .btn-group { | ||
| .btn + .btn, | ||
| .btn + .btn-group, | ||
| .btn-group + .btn, | ||
| .btn-group + .btn-group { | ||
| margin-left: -1px; | ||
| } | ||
| } | ||
|
|
||
| // Optional: Group multiple button groups together for a toolbar | ||
| .btn-toolbar { | ||
| margin-left: -5px; // Offset the first child's margin | ||
| @include clearfix; | ||
|
|
||
| .btn, | ||
| .btn-group, | ||
| .input-group { | ||
| float: left; | ||
| } | ||
| > .btn, | ||
| > .btn-group, | ||
| > .input-group { | ||
| margin-left: 5px; | ||
| } | ||
| } | ||
|
|
||
| .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| // 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 | ||
| .btn-group > .btn:first-child { | ||
| margin-left: 0; | ||
| &:not(:last-child):not(.dropdown-toggle) { | ||
| @include border-right-radius(0); | ||
| } | ||
| } | ||
| // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it | ||
| .btn-group > .btn:last-child:not(:first-child), | ||
| .btn-group > .dropdown-toggle:not(:first-child) { | ||
| @include border-left-radius(0); | ||
| } | ||
|
|
||
| // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) | ||
| .btn-group > .btn-group { | ||
| float: left; | ||
| } | ||
| .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { | ||
| border-radius: 0; | ||
| } | ||
| .btn-group > .btn-group:first-child:not(:last-child) { | ||
| > .btn:last-child, | ||
| > .dropdown-toggle { | ||
| @include border-right-radius(0); | ||
| } | ||
| } | ||
| .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { | ||
| @include border-left-radius(0); | ||
| } | ||
|
|
||
| // On active and open, don't show outline | ||
| .btn-group .dropdown-toggle:active, | ||
| .btn-group.open .dropdown-toggle { | ||
| outline: 0; | ||
| } | ||
|
|
||
|
|
||
| // Sizing | ||
| // | ||
| // Remix the default button sizing classes into new ones for easier manipulation. | ||
|
|
||
| .btn-group-xs > .btn { @extend .btn-xs; } | ||
| .btn-group-sm > .btn { @extend .btn-sm; } | ||
| .btn-group-lg > .btn { @extend .btn-lg; } | ||
|
|
||
|
|
||
| // Split button dropdowns | ||
| // ---------------------- | ||
|
|
||
| // Give the line between buttons some depth | ||
| .btn-group > .btn + .dropdown-toggle { | ||
| padding-left: 8px; | ||
| padding-right: 8px; | ||
| } | ||
| .btn-group > .btn-lg + .dropdown-toggle { | ||
| padding-left: 12px; | ||
| padding-right: 12px; | ||
| } | ||
|
|
||
| // The clickable button for toggling the menu | ||
| // Remove the gradient and set the same inset shadow as the :active state | ||
| .btn-group.open .dropdown-toggle { | ||
| @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); | ||
|
|
||
| // Show no shadow for `.btn-link` since it has no other button styles. | ||
| &.btn-link { | ||
| @include box-shadow(none); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Reposition the caret | ||
| .btn .caret { | ||
| margin-left: 0; | ||
| } | ||
| // Carets in other button sizes | ||
| .btn-lg .caret { | ||
| border-width: $caret-width-large $caret-width-large 0; | ||
| border-bottom-width: 0; | ||
| } | ||
| // Upside down carets for .dropup | ||
| .dropup .btn-lg .caret { | ||
| border-width: 0 $caret-width-large $caret-width-large; | ||
| } | ||
|
|
||
|
|
||
| // Vertical button groups | ||
| // ---------------------- | ||
|
|
||
| .btn-group-vertical { | ||
| > .btn, | ||
| > .btn-group, | ||
| > .btn-group > .btn { | ||
| display: block; | ||
| float: none; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| // Clear floats so dropdown menus can be properly placed | ||
| > .btn-group { | ||
| @include clearfix; | ||
| > .btn { | ||
| float: none; | ||
| } | ||
| } | ||
|
|
||
| > .btn + .btn, | ||
| > .btn + .btn-group, | ||
| > .btn-group + .btn, | ||
| > .btn-group + .btn-group { | ||
| margin-top: -1px; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| .btn-group-vertical > .btn { | ||
| &:not(:first-child):not(:last-child) { | ||
| border-radius: 0; | ||
| } | ||
| &:first-child:not(:last-child) { | ||
| border-top-right-radius: $btn-border-radius-base; | ||
| @include border-bottom-radius(0); | ||
| } | ||
| &:last-child:not(:first-child) { | ||
| border-bottom-left-radius: $btn-border-radius-base; | ||
| @include border-top-radius(0); | ||
| } | ||
| } | ||
| .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { | ||
| border-radius: 0; | ||
| } | ||
| .btn-group-vertical > .btn-group:first-child:not(:last-child) { | ||
| > .btn:last-child, | ||
| > .dropdown-toggle { | ||
| @include border-bottom-radius(0); | ||
| } | ||
| } | ||
| .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { | ||
| @include border-top-radius(0); | ||
| } | ||
|
|
||
|
|
||
| // Justified button groups | ||
| // ---------------------- | ||
|
|
||
| .btn-group-justified { | ||
| display: table; | ||
| width: 100%; | ||
| table-layout: fixed; | ||
| border-collapse: separate; | ||
| > .btn, | ||
| > .btn-group { | ||
| float: none; | ||
| display: table-cell; | ||
| width: 1%; | ||
| } | ||
| > .btn-group .btn { | ||
| width: 100%; | ||
| } | ||
|
|
||
| > .btn-group .dropdown-menu { | ||
| left: auto; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Checkbox and radio options | ||
| // | ||
| // In order to support the browser's form validation feedback, powered by the | ||
| // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use | ||
| // `display: none;` or `visibility: hidden;` as that also hides the popover. | ||
| // Simply visually hiding the inputs via `opacity` would leave them clickable in | ||
| // certain cases which is prevented by using `clip` and `pointer-events`. | ||
| // This way, we ensure a DOM element is visible to position the popover from. | ||
| // | ||
| // See https://github.com/twbs/bootstrap/pull/12794 and | ||
| // https://github.com/twbs/bootstrap/pull/14559 for more information. | ||
|
|
||
| [data-toggle="buttons"] { | ||
| > .btn, | ||
| > .btn-group > .btn { | ||
| input[type="radio"], | ||
| input[type="checkbox"] { | ||
| position: absolute; | ||
| clip: rect(0,0,0,0); | ||
| pointer-events: none; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,168 @@ | ||
| // | ||
| // Buttons | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base styles | ||
| // -------------------------------------------------- | ||
|
|
||
| .btn { | ||
| display: inline-block; | ||
| margin-bottom: 0; // For input.btn | ||
| font-weight: $btn-font-weight; | ||
| text-align: center; | ||
| vertical-align: middle; | ||
| touch-action: manipulation; | ||
| cursor: pointer; | ||
| background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | ||
| border: 1px solid transparent; | ||
| white-space: nowrap; | ||
| @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base); | ||
| @include user-select(none); | ||
|
|
||
| &, | ||
| &:active, | ||
| &.active { | ||
| &:focus, | ||
| &.focus { | ||
| @include tab-focus; | ||
| } | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus, | ||
| &.focus { | ||
| color: $btn-default-color; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| &:active, | ||
| &.active { | ||
| outline: 0; | ||
| background-image: none; | ||
| @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); | ||
| } | ||
|
|
||
| &.disabled, | ||
| &[disabled], | ||
| fieldset[disabled] & { | ||
| cursor: $cursor-disabled; | ||
| @include opacity(.65); | ||
| @include box-shadow(none); | ||
| } | ||
|
|
||
| // [converter] extracted a& to a.btn | ||
| } | ||
|
|
||
| a.btn { | ||
| &.disabled, | ||
| fieldset[disabled] & { | ||
| pointer-events: none; // Future-proof disabling of clicks on `<a>` elements | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Alternate buttons | ||
| // -------------------------------------------------- | ||
|
|
||
| .btn-default { | ||
| @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); | ||
| } | ||
| .btn-primary { | ||
| @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); | ||
| } | ||
| // Success appears as green | ||
| .btn-success { | ||
| @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); | ||
| } | ||
| // Info appears as blue-green | ||
| .btn-info { | ||
| @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); | ||
| } | ||
| // Warning appears as orange | ||
| .btn-warning { | ||
| @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); | ||
| } | ||
| // Danger and error appear as red | ||
| .btn-danger { | ||
| @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); | ||
| } | ||
|
|
||
|
|
||
| // Link buttons | ||
| // ------------------------- | ||
|
|
||
| // Make a button look and behave like a link | ||
| .btn-link { | ||
| color: $link-color; | ||
| font-weight: normal; | ||
| border-radius: 0; | ||
|
|
||
| &, | ||
| &:active, | ||
| &.active, | ||
| &[disabled], | ||
| fieldset[disabled] & { | ||
| background-color: transparent; | ||
| @include box-shadow(none); | ||
| } | ||
| &, | ||
| &:hover, | ||
| &:focus, | ||
| &:active { | ||
| border-color: transparent; | ||
| } | ||
| &:hover, | ||
| &:focus { | ||
| color: $link-hover-color; | ||
| text-decoration: $link-hover-decoration; | ||
| background-color: transparent; | ||
| } | ||
| &[disabled], | ||
| fieldset[disabled] & { | ||
| &:hover, | ||
| &:focus { | ||
| color: $btn-link-disabled-color; | ||
| text-decoration: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Button Sizes | ||
| // -------------------------------------------------- | ||
|
|
||
| .btn-lg { | ||
| // line-height: ensure even-numbered height of button next to large input | ||
| @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large); | ||
| } | ||
| .btn-sm { | ||
| // line-height: ensure proper height of button next to small input | ||
| @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); | ||
| } | ||
| .btn-xs { | ||
| @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); | ||
| } | ||
|
|
||
|
|
||
| // Block button | ||
| // -------------------------------------------------- | ||
|
|
||
| .btn-block { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| // Vertically space out multiple block buttons | ||
| .btn-block + .btn-block { | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
| // Specificity overrides | ||
| input[type="submit"], | ||
| input[type="reset"], | ||
| input[type="button"] { | ||
| &.btn-block { | ||
| width: 100%; | ||
| } | ||
| } |
| @@ -0,0 +1,269 @@ | ||
| // | ||
| // Carousel | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Wrapper for the slide container and indicators | ||
| .carousel { | ||
| position: relative; | ||
| } | ||
|
|
||
| .carousel-inner { | ||
| position: relative; | ||
| overflow: hidden; | ||
| width: 100%; | ||
|
|
||
| > .item { | ||
| display: none; | ||
| position: relative; | ||
| @include transition(.6s ease-in-out left); | ||
|
|
||
| // Account for jankitude on images | ||
| > img, | ||
| > a > img { | ||
| @include img-responsive; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| // WebKit CSS3 transforms for supported devices | ||
| @media all and (transform-3d), (-webkit-transform-3d) { | ||
| @include transition-transform(0.6s ease-in-out); | ||
| @include backface-visibility(hidden); | ||
| @include perspective(1000px); | ||
|
|
||
| &.next, | ||
| &.active.right { | ||
| @include translate3d(100%, 0, 0); | ||
| left: 0; | ||
| } | ||
| &.prev, | ||
| &.active.left { | ||
| @include translate3d(-100%, 0, 0); | ||
| left: 0; | ||
| } | ||
| &.next.left, | ||
| &.prev.right, | ||
| &.active { | ||
| @include translate3d(0, 0, 0); | ||
| left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > .active, | ||
| > .next, | ||
| > .prev { | ||
| display: block; | ||
| } | ||
|
|
||
| > .active { | ||
| left: 0; | ||
| } | ||
|
|
||
| > .next, | ||
| > .prev { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| > .next { | ||
| left: 100%; | ||
| } | ||
| > .prev { | ||
| left: -100%; | ||
| } | ||
| > .next.left, | ||
| > .prev.right { | ||
| left: 0; | ||
| } | ||
|
|
||
| > .active.left { | ||
| left: -100%; | ||
| } | ||
| > .active.right { | ||
| left: 100%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // Left/right controls for nav | ||
| // --------------------------- | ||
|
|
||
| .carousel-control { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: $carousel-control-width; | ||
| @include opacity($carousel-control-opacity); | ||
| font-size: $carousel-control-font-size; | ||
| color: $carousel-control-color; | ||
| text-align: center; | ||
| text-shadow: $carousel-text-shadow; | ||
| // We can't have this transition here because WebKit cancels the carousel | ||
| // animation if you trip this while in the middle of another animation. | ||
|
|
||
| // Set gradients for backgrounds | ||
| &.left { | ||
| @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); | ||
| } | ||
| &.right { | ||
| left: auto; | ||
| right: 0; | ||
| @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); | ||
| } | ||
|
|
||
| // Hover/focus state | ||
| &:hover, | ||
| &:focus { | ||
| outline: 0; | ||
| color: $carousel-control-color; | ||
| text-decoration: none; | ||
| @include opacity(.9); | ||
| } | ||
|
|
||
| // Toggles | ||
| .icon-prev, | ||
| .icon-next, | ||
| .glyphicon-chevron-left, | ||
| .glyphicon-chevron-right { | ||
| position: absolute; | ||
| top: 50%; | ||
| margin-top: -10px; | ||
| z-index: 5; | ||
| display: inline-block; | ||
| } | ||
| .icon-prev, | ||
| .glyphicon-chevron-left { | ||
| left: 50%; | ||
| margin-left: -10px; | ||
| } | ||
| .icon-next, | ||
| .glyphicon-chevron-right { | ||
| right: 50%; | ||
| margin-right: -10px; | ||
| } | ||
| .icon-prev, | ||
| .icon-next { | ||
| width: 20px; | ||
| height: 20px; | ||
| line-height: 1; | ||
| font-family: serif; | ||
| } | ||
|
|
||
|
|
||
| .icon-prev { | ||
| &:before { | ||
| content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) | ||
| } | ||
| } | ||
| .icon-next { | ||
| &:before { | ||
| content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Optional indicator pips | ||
| // | ||
| // Add an unordered list with the following class and add a list item for each | ||
| // slide your carousel holds. | ||
|
|
||
| .carousel-indicators { | ||
| position: absolute; | ||
| bottom: 10px; | ||
| left: 50%; | ||
| z-index: 15; | ||
| width: 60%; | ||
| margin-left: -30%; | ||
| padding-left: 0; | ||
| list-style: none; | ||
| text-align: center; | ||
|
|
||
| li { | ||
| display: inline-block; | ||
| width: 10px; | ||
| height: 10px; | ||
| margin: 1px; | ||
| text-indent: -999px; | ||
| border: 1px solid $carousel-indicator-border-color; | ||
| border-radius: 10px; | ||
| cursor: pointer; | ||
|
|
||
| // IE8-9 hack for event handling | ||
| // | ||
| // Internet Explorer 8-9 does not support clicks on elements without a set | ||
| // `background-color`. We cannot use `filter` since that's not viewed as a | ||
| // background color by the browser. Thus, a hack is needed. | ||
| // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer | ||
| // | ||
| // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we | ||
| // set alpha transparency for the best results possible. | ||
| background-color: #000 \9; // IE8 | ||
| background-color: rgba(0,0,0,0); // IE9 | ||
| } | ||
| .active { | ||
| margin: 0; | ||
| width: 12px; | ||
| height: 12px; | ||
| background-color: $carousel-indicator-active-bg; | ||
| } | ||
| } | ||
|
|
||
| // Optional captions | ||
| // ----------------------------- | ||
| // Hidden by default for smaller viewports | ||
| .carousel-caption { | ||
| position: absolute; | ||
| left: 15%; | ||
| right: 15%; | ||
| bottom: 20px; | ||
| z-index: 10; | ||
| padding-top: 20px; | ||
| padding-bottom: 20px; | ||
| color: $carousel-caption-color; | ||
| text-align: center; | ||
| text-shadow: $carousel-text-shadow; | ||
| & .btn { | ||
| text-shadow: none; // No shadow for button elements in carousel-caption | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Scale up controls for tablets and up | ||
| @media screen and (min-width: $screen-sm-min) { | ||
|
|
||
| // Scale up the controls a smidge | ||
| .carousel-control { | ||
| .glyphicon-chevron-left, | ||
| .glyphicon-chevron-right, | ||
| .icon-prev, | ||
| .icon-next { | ||
| width: 30px; | ||
| height: 30px; | ||
| margin-top: -15px; | ||
| font-size: 30px; | ||
| } | ||
| .glyphicon-chevron-left, | ||
| .icon-prev { | ||
| margin-left: -15px; | ||
| } | ||
| .glyphicon-chevron-right, | ||
| .icon-next { | ||
| margin-right: -15px; | ||
| } | ||
| } | ||
|
|
||
| // Show and left align the captions | ||
| .carousel-caption { | ||
| left: 20%; | ||
| right: 20%; | ||
| padding-bottom: 30px; | ||
| } | ||
|
|
||
| // Move up the indicators | ||
| .carousel-indicators { | ||
| bottom: 20px; | ||
| } | ||
| } |
| @@ -0,0 +1,36 @@ | ||
| // | ||
| // Close icons | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .close { | ||
| float: right; | ||
| font-size: ($font-size-base * 1.5); | ||
| font-weight: $close-font-weight; | ||
| line-height: 1; | ||
| color: $close-color; | ||
| text-shadow: $close-text-shadow; | ||
| @include opacity(.2); | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: $close-color; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| @include opacity(.5); | ||
| } | ||
|
|
||
| // [converter] extracted button& to button.close | ||
| } | ||
|
|
||
| // Additional properties for button version | ||
| // iOS requires the button element instead of an anchor tag. | ||
| // If you want the anchor version, it requires `href="#"`. | ||
| // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile | ||
| button.close { | ||
| padding: 0; | ||
| cursor: pointer; | ||
| background: transparent; | ||
| border: 0; | ||
| -webkit-appearance: none; | ||
| } |
| @@ -0,0 +1,69 @@ | ||
| // | ||
| // Code (inline and block) | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Inline and block code styles | ||
| code, | ||
| kbd, | ||
| pre, | ||
| samp { | ||
| font-family: $font-family-monospace; | ||
| } | ||
|
|
||
| // Inline code | ||
| code { | ||
| padding: 2px 4px; | ||
| font-size: 90%; | ||
| color: $code-color; | ||
| background-color: $code-bg; | ||
| border-radius: $border-radius-base; | ||
| } | ||
|
|
||
| // User input typically entered via keyboard | ||
| kbd { | ||
| padding: 2px 4px; | ||
| font-size: 90%; | ||
| color: $kbd-color; | ||
| background-color: $kbd-bg; | ||
| border-radius: $border-radius-small; | ||
| box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); | ||
|
|
||
| kbd { | ||
| padding: 0; | ||
| font-size: 100%; | ||
| font-weight: bold; | ||
| box-shadow: none; | ||
| } | ||
| } | ||
|
|
||
| // Blocks of code | ||
| pre { | ||
| display: block; | ||
| padding: (($line-height-computed - 1) / 2); | ||
| margin: 0 0 ($line-height-computed / 2); | ||
| font-size: ($font-size-base - 1); // 14px to 13px | ||
| line-height: $line-height-base; | ||
| word-break: break-all; | ||
| word-wrap: break-word; | ||
| color: $pre-color; | ||
| background-color: $pre-bg; | ||
| border: 1px solid $pre-border-color; | ||
| border-radius: $border-radius-base; | ||
|
|
||
| // Account for some code outputs that place code tags in pre tags | ||
| code { | ||
| padding: 0; | ||
| font-size: inherit; | ||
| color: inherit; | ||
| white-space: pre-wrap; | ||
| background-color: transparent; | ||
| border-radius: 0; | ||
| } | ||
| } | ||
|
|
||
| // Enable scrollable blocks of code | ||
| .pre-scrollable { | ||
| max-height: $pre-scrollable-max-height; | ||
| overflow-y: scroll; | ||
| } |
| @@ -0,0 +1,37 @@ | ||
| // | ||
| // Component animations | ||
| // -------------------------------------------------- | ||
|
|
||
| // Heads up! | ||
| // | ||
| // We don't use the `.opacity()` mixin here since it causes a bug with text | ||
| // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. | ||
|
|
||
| .fade { | ||
| opacity: 0; | ||
| @include transition(opacity .15s linear); | ||
| &.in { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .collapse { | ||
| display: none; | ||
|
|
||
| &.in { display: block; } | ||
| // [converter] extracted tr&.in to tr.collapse.in | ||
| // [converter] extracted tbody&.in to tbody.collapse.in | ||
| } | ||
|
|
||
| tr.collapse.in { display: table-row; } | ||
|
|
||
| tbody.collapse.in { display: table-row-group; } | ||
|
|
||
| .collapsing { | ||
| position: relative; | ||
| height: 0; | ||
| overflow: hidden; | ||
| @include transition-property(height, visibility); | ||
| @include transition-duration(.35s); | ||
| @include transition-timing-function(ease); | ||
| } |
| @@ -0,0 +1,216 @@ | ||
| // | ||
| // Dropdown menus | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Dropdown arrow/caret | ||
| .caret { | ||
| display: inline-block; | ||
| width: 0; | ||
| height: 0; | ||
| margin-left: 2px; | ||
| vertical-align: middle; | ||
| border-top: $caret-width-base dashed; | ||
| border-top: $caret-width-base solid \9; // IE8 | ||
| border-right: $caret-width-base solid transparent; | ||
| border-left: $caret-width-base solid transparent; | ||
| } | ||
|
|
||
| // The dropdown wrapper (div) | ||
| .dropup, | ||
| .dropdown { | ||
| position: relative; | ||
| } | ||
|
|
||
| // Prevent the focus on the dropdown toggle when closing dropdowns | ||
| .dropdown-toggle:focus { | ||
| outline: 0; | ||
| } | ||
|
|
||
| // The dropdown menu (ul) | ||
| .dropdown-menu { | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 0; | ||
| z-index: $zindex-dropdown; | ||
| display: none; // none by default, but block on "open" of the menu | ||
| float: left; | ||
| min-width: 160px; | ||
| padding: 5px 0; | ||
| margin: 2px 0 0; // override default ul | ||
| list-style: none; | ||
| font-size: $font-size-base; | ||
| text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | ||
| background-color: $dropdown-bg; | ||
| border: 1px solid $dropdown-fallback-border; // IE8 fallback | ||
| border: 1px solid $dropdown-border; | ||
| border-radius: $border-radius-base; | ||
| @include box-shadow(0 6px 12px rgba(0,0,0,.175)); | ||
| background-clip: padding-box; | ||
|
|
||
| // Aligns the dropdown menu to right | ||
| // | ||
| // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` | ||
| &.pull-right { | ||
| right: 0; | ||
| left: auto; | ||
| } | ||
|
|
||
| // Dividers (basically an hr) within the dropdown | ||
| .divider { | ||
| @include nav-divider($dropdown-divider-bg); | ||
| } | ||
|
|
||
| // Links within the dropdown menu | ||
| > li > a { | ||
| display: block; | ||
| padding: 3px 20px; | ||
| clear: both; | ||
| font-weight: normal; | ||
| line-height: $line-height-base; | ||
| color: $dropdown-link-color; | ||
| white-space: nowrap; // prevent links from randomly breaking onto new lines | ||
| } | ||
| } | ||
|
|
||
| // Hover/Focus state | ||
| .dropdown-menu > li > a { | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| color: $dropdown-link-hover-color; | ||
| background-color: $dropdown-link-hover-bg; | ||
| } | ||
| } | ||
|
|
||
| // Active state | ||
| .dropdown-menu > .active > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| color: $dropdown-link-active-color; | ||
| text-decoration: none; | ||
| outline: 0; | ||
| background-color: $dropdown-link-active-bg; | ||
| } | ||
| } | ||
|
|
||
| // Disabled state | ||
| // | ||
| // Gray out text and ensure the hover/focus state remains gray | ||
|
|
||
| .dropdown-menu > .disabled > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| color: $dropdown-link-disabled-color; | ||
| } | ||
|
|
||
| // Nuke hover/focus effects | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| background-color: transparent; | ||
| background-image: none; // Remove CSS gradient | ||
| @include reset-filter; | ||
| cursor: $cursor-disabled; | ||
| } | ||
| } | ||
|
|
||
| // Open state for the dropdown | ||
| .open { | ||
| // Show the menu | ||
| > .dropdown-menu { | ||
| display: block; | ||
| } | ||
|
|
||
| // Remove the outline when :focus is triggered | ||
| > a { | ||
| outline: 0; | ||
| } | ||
| } | ||
|
|
||
| // Menu positioning | ||
| // | ||
| // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | ||
| // menu with the parent. | ||
| .dropdown-menu-right { | ||
| left: auto; // Reset the default from `.dropdown-menu` | ||
| right: 0; | ||
| } | ||
| // With v3, we enabled auto-flipping if you have a dropdown within a right | ||
| // aligned nav component. To enable the undoing of that, we provide an override | ||
| // to restore the default dropdown menu alignment. | ||
| // | ||
| // This is only for left-aligning a dropdown menu within a `.navbar-right` or | ||
| // `.pull-right` nav component. | ||
| .dropdown-menu-left { | ||
| left: 0; | ||
| right: auto; | ||
| } | ||
|
|
||
| // Dropdown section headers | ||
| .dropdown-header { | ||
| display: block; | ||
| padding: 3px 20px; | ||
| font-size: $font-size-small; | ||
| line-height: $line-height-base; | ||
| color: $dropdown-header-color; | ||
| white-space: nowrap; // as with > li > a | ||
| } | ||
|
|
||
| // Backdrop to catch body clicks on mobile, etc. | ||
| .dropdown-backdrop { | ||
| position: fixed; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| top: 0; | ||
| z-index: ($zindex-dropdown - 10); | ||
| } | ||
|
|
||
| // Right aligned dropdowns | ||
| .pull-right > .dropdown-menu { | ||
| right: 0; | ||
| left: auto; | ||
| } | ||
|
|
||
| // Allow for dropdowns to go bottom up (aka, dropup-menu) | ||
| // | ||
| // Just add .dropup after the standard .dropdown class and you're set, bro. | ||
| // TODO: abstract this so that the navbar fixed styles are not placed here? | ||
|
|
||
| .dropup, | ||
| .navbar-fixed-bottom .dropdown { | ||
| // Reverse the caret | ||
| .caret { | ||
| border-top: 0; | ||
| border-bottom: $caret-width-base dashed; | ||
| border-bottom: $caret-width-base solid \9; // IE8 | ||
| content: ""; | ||
| } | ||
| // Different positioning for bottom up menu | ||
| .dropdown-menu { | ||
| top: auto; | ||
| bottom: 100%; | ||
| margin-bottom: 2px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Component alignment | ||
| // | ||
| // Reiterate per navbar.less and the modified component alignment there. | ||
|
|
||
| @media (min-width: $grid-float-breakpoint) { | ||
| .navbar-right { | ||
| .dropdown-menu { | ||
| right: 0; left: auto; | ||
| } | ||
| // Necessary for overrides of the default right aligned menu. | ||
| // Will remove come v4 in all likelihood. | ||
| .dropdown-menu-left { | ||
| left: 0; right: auto; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,84 @@ | ||
| // | ||
| // Grid system | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Container widths | ||
| // | ||
| // Set the container width, and override it for fixed navbars in media queries. | ||
|
|
||
| .container { | ||
| @include container-fixed; | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| width: $container-sm; | ||
| } | ||
| @media (min-width: $screen-md-min) { | ||
| width: $container-md; | ||
| } | ||
| @media (min-width: $screen-lg-min) { | ||
| width: $container-lg; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Fluid container | ||
| // | ||
| // Utilizes the mixin meant for fixed width containers, but without any defined | ||
| // width for fluid, full width layouts. | ||
|
|
||
| .container-fluid { | ||
| @include container-fixed; | ||
| } | ||
|
|
||
|
|
||
| // Row | ||
| // | ||
| // Rows contain and clear the floats of your columns. | ||
|
|
||
| .row { | ||
| @include make-row; | ||
| } | ||
|
|
||
|
|
||
| // Columns | ||
| // | ||
| // Common styles for small and large grid columns | ||
|
|
||
| @include make-grid-columns; | ||
|
|
||
|
|
||
| // Extra small grid | ||
| // | ||
| // Columns, offsets, pushes, and pulls for extra small devices like | ||
| // smartphones. | ||
|
|
||
| @include make-grid(xs); | ||
|
|
||
|
|
||
| // Small grid | ||
| // | ||
| // Columns, offsets, pushes, and pulls for the small device range, from phones | ||
| // to tablets. | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| @include make-grid(sm); | ||
| } | ||
|
|
||
|
|
||
| // Medium grid | ||
| // | ||
| // Columns, offsets, pushes, and pulls for the desktop device range. | ||
|
|
||
| @media (min-width: $screen-md-min) { | ||
| @include make-grid(md); | ||
| } | ||
|
|
||
|
|
||
| // Large grid | ||
| // | ||
| // Columns, offsets, pushes, and pulls for the large desktop device range. | ||
|
|
||
| @media (min-width: $screen-lg-min) { | ||
| @include make-grid(lg); | ||
| } |
| @@ -0,0 +1,167 @@ | ||
| // | ||
| // Input groups | ||
| // -------------------------------------------------- | ||
|
|
||
| // Base styles | ||
| // ------------------------- | ||
| .input-group { | ||
| position: relative; // For dropdowns | ||
| display: table; | ||
| border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table | ||
|
|
||
| // Undo padding and float of grid classes | ||
| &[class*="col-"] { | ||
| float: none; | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| } | ||
|
|
||
| .form-control { | ||
| // Ensure that the input is always above the *appended* addon button for | ||
| // proper border colors. | ||
| position: relative; | ||
| z-index: 2; | ||
|
|
||
| // IE9 fubars the placeholder attribute in text inputs and the arrows on | ||
| // select elements in input groups. To fix it, we float the input. Details: | ||
| // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 | ||
| float: left; | ||
|
|
||
| width: 100%; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| // Sizing options | ||
| // | ||
| // Remix the default form control sizing classes into new ones for easier | ||
| // manipulation. | ||
|
|
||
| .input-group-lg > .form-control, | ||
| .input-group-lg > .input-group-addon, | ||
| .input-group-lg > .input-group-btn > .btn { | ||
| @extend .input-lg; | ||
| } | ||
| .input-group-sm > .form-control, | ||
| .input-group-sm > .input-group-addon, | ||
| .input-group-sm > .input-group-btn > .btn { | ||
| @extend .input-sm; | ||
| } | ||
|
|
||
|
|
||
| // Display as table-cell | ||
| // ------------------------- | ||
| .input-group-addon, | ||
| .input-group-btn, | ||
| .input-group .form-control { | ||
| display: table-cell; | ||
|
|
||
| &:not(:first-child):not(:last-child) { | ||
| border-radius: 0; | ||
| } | ||
| } | ||
| // Addon and addon wrapper for buttons | ||
| .input-group-addon, | ||
| .input-group-btn { | ||
| width: 1%; | ||
| white-space: nowrap; | ||
| vertical-align: middle; // Match the inputs | ||
| } | ||
|
|
||
| // Text input groups | ||
| // ------------------------- | ||
| .input-group-addon { | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| font-size: $font-size-base; | ||
| font-weight: normal; | ||
| line-height: 1; | ||
| color: $input-color; | ||
| text-align: center; | ||
| background-color: $input-group-addon-bg; | ||
| border: 1px solid $input-group-addon-border-color; | ||
| border-radius: $border-radius-base; | ||
|
|
||
| // Sizing | ||
| &.input-sm { | ||
| padding: $padding-small-vertical $padding-small-horizontal; | ||
| font-size: $font-size-small; | ||
| border-radius: $border-radius-small; | ||
| } | ||
| &.input-lg { | ||
| padding: $padding-large-vertical $padding-large-horizontal; | ||
| font-size: $font-size-large; | ||
| border-radius: $border-radius-large; | ||
| } | ||
|
|
||
| // Nuke default margins from checkboxes and radios to vertically center within. | ||
| input[type="radio"], | ||
| input[type="checkbox"] { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
|
|
||
| // Reset rounded corners | ||
| .input-group .form-control:first-child, | ||
| .input-group-addon:first-child, | ||
| .input-group-btn:first-child > .btn, | ||
| .input-group-btn:first-child > .btn-group > .btn, | ||
| .input-group-btn:first-child > .dropdown-toggle, | ||
| .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), | ||
| .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { | ||
| @include border-right-radius(0); | ||
| } | ||
| .input-group-addon:first-child { | ||
| border-right: 0; | ||
| } | ||
| .input-group .form-control:last-child, | ||
| .input-group-addon:last-child, | ||
| .input-group-btn:last-child > .btn, | ||
| .input-group-btn:last-child > .btn-group > .btn, | ||
| .input-group-btn:last-child > .dropdown-toggle, | ||
| .input-group-btn:first-child > .btn:not(:first-child), | ||
| .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { | ||
| @include border-left-radius(0); | ||
| } | ||
| .input-group-addon:last-child { | ||
| border-left: 0; | ||
| } | ||
|
|
||
| // Button input groups | ||
| // ------------------------- | ||
| .input-group-btn { | ||
| position: relative; | ||
| // Jankily prevent input button groups from wrapping with `white-space` and | ||
| // `font-size` in combination with `inline-block` on buttons. | ||
| font-size: 0; | ||
| white-space: nowrap; | ||
|
|
||
| // Negative margin for spacing, position for bringing hovered/focused/actived | ||
| // element above the siblings. | ||
| > .btn { | ||
| position: relative; | ||
| + .btn { | ||
| margin-left: -1px; | ||
| } | ||
| // Bring the "active" button to the front | ||
| &:hover, | ||
| &:focus, | ||
| &:active { | ||
| z-index: 2; | ||
| } | ||
| } | ||
|
|
||
| // Negative margin to only have a 1px border between the two | ||
| &:first-child { | ||
| > .btn, | ||
| > .btn-group { | ||
| margin-right: -1px; | ||
| } | ||
| } | ||
| &:last-child { | ||
| > .btn, | ||
| > .btn-group { | ||
| z-index: 2; | ||
| margin-left: -1px; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,52 @@ | ||
| // | ||
| // Jumbotron | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .jumbotron { | ||
| padding-top: $jumbotron-padding; | ||
| padding-bottom: $jumbotron-padding; | ||
| margin-bottom: $jumbotron-padding; | ||
| color: $jumbotron-color; | ||
| background-color: $jumbotron-bg; | ||
|
|
||
| h1, | ||
| .h1 { | ||
| color: $jumbotron-heading-color; | ||
| } | ||
|
|
||
| p { | ||
| margin-bottom: ($jumbotron-padding / 2); | ||
| font-size: $jumbotron-font-size; | ||
| font-weight: 200; | ||
| } | ||
|
|
||
| > hr { | ||
| border-top-color: darken($jumbotron-bg, 10%); | ||
| } | ||
|
|
||
| .container &, | ||
| .container-fluid & { | ||
| border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| @media screen and (min-width: $screen-sm-min) { | ||
| padding-top: ($jumbotron-padding * 1.6); | ||
| padding-bottom: ($jumbotron-padding * 1.6); | ||
|
|
||
| .container &, | ||
| .container-fluid & { | ||
| padding-left: ($jumbotron-padding * 2); | ||
| padding-right: ($jumbotron-padding * 2); | ||
| } | ||
|
|
||
| h1, | ||
| .h1 { | ||
| font-size: $jumbotron-heading-font-size; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,66 @@ | ||
| // | ||
| // Labels | ||
| // -------------------------------------------------- | ||
|
|
||
| .label { | ||
| display: inline; | ||
| padding: .2em .6em .3em; | ||
| font-size: 75%; | ||
| font-weight: bold; | ||
| line-height: 1; | ||
| color: $label-color; | ||
| text-align: center; | ||
| white-space: nowrap; | ||
| vertical-align: baseline; | ||
| border-radius: .25em; | ||
|
|
||
| // [converter] extracted a& to a.label | ||
|
|
||
| // Empty labels collapse automatically (not available in IE8) | ||
| &:empty { | ||
| display: none; | ||
| } | ||
|
|
||
| // Quick fix for labels in buttons | ||
| .btn & { | ||
| position: relative; | ||
| top: -1px; | ||
| } | ||
| } | ||
|
|
||
| // Add hover effects, but only for links | ||
| a.label { | ||
| &:hover, | ||
| &:focus { | ||
| color: $label-link-hover-color; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| // Colors | ||
| // Contextual variations (linked labels get darker on :hover) | ||
|
|
||
| .label-default { | ||
| @include label-variant($label-default-bg); | ||
| } | ||
|
|
||
| .label-primary { | ||
| @include label-variant($label-primary-bg); | ||
| } | ||
|
|
||
| .label-success { | ||
| @include label-variant($label-success-bg); | ||
| } | ||
|
|
||
| .label-info { | ||
| @include label-variant($label-info-bg); | ||
| } | ||
|
|
||
| .label-warning { | ||
| @include label-variant($label-warning-bg); | ||
| } | ||
|
|
||
| .label-danger { | ||
| @include label-variant($label-danger-bg); | ||
| } |
| @@ -0,0 +1,130 @@ | ||
| // | ||
| // List groups | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| // | ||
| // Easily usable on <ul>, <ol>, or <div>. | ||
|
|
||
| .list-group { | ||
| // No need to set list-style: none; since .list-group-item is block level | ||
| margin-bottom: 20px; | ||
| padding-left: 0; // reset padding because ul and ol | ||
| } | ||
|
|
||
|
|
||
| // Individual list items | ||
| // | ||
| // Use on `li`s or `div`s within the `.list-group` parent. | ||
|
|
||
| .list-group-item { | ||
| position: relative; | ||
| display: block; | ||
| padding: 10px 15px; | ||
| // Place the border on the list items and negative margin up for better styling | ||
| margin-bottom: -1px; | ||
| background-color: $list-group-bg; | ||
| border: 1px solid $list-group-border; | ||
|
|
||
| // Round the first and last items | ||
| &:first-child { | ||
| @include border-top-radius($list-group-border-radius); | ||
| } | ||
| &:last-child { | ||
| margin-bottom: 0; | ||
| @include border-bottom-radius($list-group-border-radius); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Interactive list items | ||
| // | ||
| // Use anchor or button elements instead of `li`s or `div`s to create interactive items. | ||
| // Includes an extra `.active` modifier class for showing selected items. | ||
|
|
||
| a.list-group-item, | ||
| button.list-group-item { | ||
| color: $list-group-link-color; | ||
|
|
||
| .list-group-item-heading { | ||
| color: $list-group-link-heading-color; | ||
| } | ||
|
|
||
| // Hover state | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| color: $list-group-link-hover-color; | ||
| background-color: $list-group-hover-bg; | ||
| } | ||
| } | ||
|
|
||
| button.list-group-item { | ||
| width: 100%; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .list-group-item { | ||
| // Disabled state | ||
| &.disabled, | ||
| &.disabled:hover, | ||
| &.disabled:focus { | ||
| background-color: $list-group-disabled-bg; | ||
| color: $list-group-disabled-color; | ||
| cursor: $cursor-disabled; | ||
|
|
||
| // Force color to inherit for custom content | ||
| .list-group-item-heading { | ||
| color: inherit; | ||
| } | ||
| .list-group-item-text { | ||
| color: $list-group-disabled-text-color; | ||
| } | ||
| } | ||
|
|
||
| // Active class on item itself, not parent | ||
| &.active, | ||
| &.active:hover, | ||
| &.active:focus { | ||
| z-index: 2; // Place active items above their siblings for proper border styling | ||
| color: $list-group-active-color; | ||
| background-color: $list-group-active-bg; | ||
| border-color: $list-group-active-border; | ||
|
|
||
| // Force color to inherit for custom content | ||
| .list-group-item-heading, | ||
| .list-group-item-heading > small, | ||
| .list-group-item-heading > .small { | ||
| color: inherit; | ||
| } | ||
| .list-group-item-text { | ||
| color: $list-group-active-text-color; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Contextual variants | ||
| // | ||
| // Add modifier classes to change text and background color on individual items. | ||
| // Organizationally, this must come after the `:hover` states. | ||
|
|
||
| @include list-group-item-variant(success, $state-success-bg, $state-success-text); | ||
| @include list-group-item-variant(info, $state-info-bg, $state-info-text); | ||
| @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); | ||
| @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); | ||
|
|
||
|
|
||
| // Custom content options | ||
| // | ||
| // Extra classes for creating well-formatted content within `.list-group-item`s. | ||
|
|
||
| .list-group-item-heading { | ||
| margin-top: 0; | ||
| margin-bottom: 5px; | ||
| } | ||
| .list-group-item-text { | ||
| margin-bottom: 0; | ||
| line-height: 1.3; | ||
| } |
| @@ -0,0 +1,66 @@ | ||
| .media { | ||
| // Proper spacing between instances of .media | ||
| margin-top: 15px; | ||
|
|
||
| &:first-child { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
|
|
||
| .media, | ||
| .media-body { | ||
| zoom: 1; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .media-body { | ||
| width: 10000px; | ||
| } | ||
|
|
||
| .media-object { | ||
| display: block; | ||
|
|
||
| // Fix collapse in webkit from max-width: 100% and display: table-cell. | ||
| &.img-thumbnail { | ||
| max-width: none; | ||
| } | ||
| } | ||
|
|
||
| .media-right, | ||
| .media > .pull-right { | ||
| padding-left: 10px; | ||
| } | ||
|
|
||
| .media-left, | ||
| .media > .pull-left { | ||
| padding-right: 10px; | ||
| } | ||
|
|
||
| .media-left, | ||
| .media-right, | ||
| .media-body { | ||
| display: table-cell; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .media-middle { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .media-bottom { | ||
| vertical-align: bottom; | ||
| } | ||
|
|
||
| // Reset margins on headings for tighter default spacing | ||
| .media-heading { | ||
| margin-top: 0; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| // Media list variation | ||
| // | ||
| // Undo default ul/ol styles | ||
| .media-list { | ||
| padding-left: 0; | ||
| list-style: none; | ||
| } |
| @@ -0,0 +1,40 @@ | ||
| // Mixins | ||
| // -------------------------------------------------- | ||
|
|
||
| // Utilities | ||
| @import "mixins/hide-text"; | ||
| @import "mixins/opacity"; | ||
| @import "mixins/image"; | ||
| @import "mixins/labels"; | ||
| @import "mixins/reset-filter"; | ||
| @import "mixins/resize"; | ||
| @import "mixins/responsive-visibility"; | ||
| @import "mixins/size"; | ||
| @import "mixins/tab-focus"; | ||
| @import "mixins/reset-text"; | ||
| @import "mixins/text-emphasis"; | ||
| @import "mixins/text-overflow"; | ||
| @import "mixins/vendor-prefixes"; | ||
|
|
||
| // Components | ||
| @import "mixins/alerts"; | ||
| @import "mixins/buttons"; | ||
| @import "mixins/panels"; | ||
| @import "mixins/pagination"; | ||
| @import "mixins/list-group"; | ||
| @import "mixins/nav-divider"; | ||
| @import "mixins/forms"; | ||
| @import "mixins/progress-bar"; | ||
| @import "mixins/table-row"; | ||
|
|
||
| // Skins | ||
| @import "mixins/background-variant"; | ||
| @import "mixins/border-radius"; | ||
| @import "mixins/gradients"; | ||
|
|
||
| // Layout | ||
| @import "mixins/clearfix"; | ||
| @import "mixins/center-block"; | ||
| @import "mixins/nav-vertical-align"; | ||
| @import "mixins/grid-framework"; | ||
| @import "mixins/grid"; |
| @@ -0,0 +1,150 @@ | ||
| // | ||
| // Modals | ||
| // -------------------------------------------------- | ||
|
|
||
| // .modal-open - body class for killing the scroll | ||
| // .modal - container to scroll within | ||
| // .modal-dialog - positioning shell for the actual modal | ||
| // .modal-content - actual modal w/ bg and corners and shit | ||
|
|
||
| // Kill the scroll on the body | ||
| .modal-open { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| // Container that the modal scrolls within | ||
| .modal { | ||
| display: none; | ||
| overflow: hidden; | ||
| position: fixed; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: $zindex-modal; | ||
| -webkit-overflow-scrolling: touch; | ||
|
|
||
| // Prevent Chrome on Windows from adding a focus outline. For details, see | ||
| // https://github.com/twbs/bootstrap/pull/10951. | ||
| outline: 0; | ||
|
|
||
| // When fading in the modal, animate it to slide down | ||
| &.fade .modal-dialog { | ||
| @include translate(0, -25%); | ||
| @include transition-transform(0.3s ease-out); | ||
| } | ||
| &.in .modal-dialog { @include translate(0, 0) } | ||
| } | ||
| .modal-open .modal { | ||
| overflow-x: hidden; | ||
| overflow-y: auto; | ||
| } | ||
|
|
||
| // Shell div to position the modal with bottom padding | ||
| .modal-dialog { | ||
| position: relative; | ||
| width: auto; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| // Actual modal | ||
| .modal-content { | ||
| position: relative; | ||
| background-color: $modal-content-bg; | ||
| border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) | ||
| border: 1px solid $modal-content-border-color; | ||
| border-radius: $border-radius-large; | ||
| @include box-shadow(0 3px 9px rgba(0,0,0,.5)); | ||
| background-clip: padding-box; | ||
| // Remove focus outline from opened modal | ||
| outline: 0; | ||
| } | ||
|
|
||
| // Modal background | ||
| .modal-backdrop { | ||
| position: fixed; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| z-index: $zindex-modal-background; | ||
| background-color: $modal-backdrop-bg; | ||
| // Fade for backdrop | ||
| &.fade { @include opacity(0); } | ||
| &.in { @include opacity($modal-backdrop-opacity); } | ||
| } | ||
|
|
||
| // Modal header | ||
| // Top section of the modal w/ title and dismiss | ||
| .modal-header { | ||
| padding: $modal-title-padding; | ||
| border-bottom: 1px solid $modal-header-border-color; | ||
| min-height: ($modal-title-padding + $modal-title-line-height); | ||
| } | ||
| // Close icon | ||
| .modal-header .close { | ||
| margin-top: -2px; | ||
| } | ||
|
|
||
| // Title text within header | ||
| .modal-title { | ||
| margin: 0; | ||
| line-height: $modal-title-line-height; | ||
| } | ||
|
|
||
| // Modal body | ||
| // Where all modal content resides (sibling of .modal-header and .modal-footer) | ||
| .modal-body { | ||
| position: relative; | ||
| padding: $modal-inner-padding; | ||
| } | ||
|
|
||
| // Footer (for actions) | ||
| .modal-footer { | ||
| padding: $modal-inner-padding; | ||
| text-align: right; // right align buttons | ||
| border-top: 1px solid $modal-footer-border-color; | ||
| @include clearfix; // clear it in case folks use .pull-* classes on buttons | ||
|
|
||
| // Properly space out buttons | ||
| .btn + .btn { | ||
| margin-left: 5px; | ||
| margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs | ||
| } | ||
| // but override that for button groups | ||
| .btn-group .btn + .btn { | ||
| margin-left: -1px; | ||
| } | ||
| // and override it for block buttons as well | ||
| .btn-block + .btn-block { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
|
|
||
| // Measure scrollbar width for padding body during modal show/hide | ||
| .modal-scrollbar-measure { | ||
| position: absolute; | ||
| top: -9999px; | ||
| width: 50px; | ||
| height: 50px; | ||
| overflow: scroll; | ||
| } | ||
|
|
||
| // Scale up the modal | ||
| @media (min-width: $screen-sm-min) { | ||
| // Automatically set modal's width for larger viewports | ||
| .modal-dialog { | ||
| width: $modal-md; | ||
| margin: 30px auto; | ||
| } | ||
| .modal-content { | ||
| @include box-shadow(0 5px 15px rgba(0,0,0,.5)); | ||
| } | ||
|
|
||
| // Modal sizes | ||
| .modal-sm { width: $modal-sm; } | ||
| } | ||
|
|
||
| @media (min-width: $screen-md-min) { | ||
| .modal-lg { width: $modal-lg; } | ||
| } |
| @@ -0,0 +1,242 @@ | ||
| // | ||
| // Navs | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| // -------------------------------------------------- | ||
|
|
||
| .nav { | ||
| margin-bottom: 0; | ||
| padding-left: 0; // Override default ul/ol | ||
| list-style: none; | ||
| @include clearfix; | ||
|
|
||
| > li { | ||
| position: relative; | ||
| display: block; | ||
|
|
||
| > a { | ||
| position: relative; | ||
| display: block; | ||
| padding: $nav-link-padding; | ||
| &:hover, | ||
| &:focus { | ||
| text-decoration: none; | ||
| background-color: $nav-link-hover-bg; | ||
| } | ||
| } | ||
|
|
||
| // Disabled state sets text to gray and nukes hover/tab effects | ||
| &.disabled > a { | ||
| color: $nav-disabled-link-color; | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| color: $nav-disabled-link-hover-color; | ||
| text-decoration: none; | ||
| background-color: transparent; | ||
| cursor: $cursor-disabled; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Open dropdowns | ||
| .open > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| background-color: $nav-link-hover-bg; | ||
| border-color: $link-color; | ||
| } | ||
| } | ||
|
|
||
| // Nav dividers (deprecated with v3.0.1) | ||
| // | ||
| // This should have been removed in v3 with the dropping of `.nav-list`, but | ||
| // we missed it. We don't currently support this anywhere, but in the interest | ||
| // of maintaining backward compatibility in case you use it, it's deprecated. | ||
| .nav-divider { | ||
| @include nav-divider; | ||
| } | ||
|
|
||
| // Prevent IE8 from misplacing imgs | ||
| // | ||
| // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | ||
| > li > a > img { | ||
| max-width: none; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Tabs | ||
| // ------------------------- | ||
|
|
||
| // Give the tabs something to sit on | ||
| .nav-tabs { | ||
| border-bottom: 1px solid $nav-tabs-border-color; | ||
| > li { | ||
| float: left; | ||
| // Make the list-items overlay the bottom border | ||
| margin-bottom: -1px; | ||
|
|
||
| // Actual tabs (as links) | ||
| > a { | ||
| margin-right: 2px; | ||
| line-height: $line-height-base; | ||
| border: 1px solid transparent; | ||
| border-radius: $border-radius-base $border-radius-base 0 0; | ||
| &:hover { | ||
| border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; | ||
| } | ||
| } | ||
|
|
||
| // Active state, and its :hover to override normal :hover | ||
| &.active > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| color: $nav-tabs-active-link-hover-color; | ||
| background-color: $nav-tabs-active-link-hover-bg; | ||
| border: 1px solid $nav-tabs-active-link-hover-border-color; | ||
| border-bottom-color: transparent; | ||
| cursor: default; | ||
| } | ||
| } | ||
| } | ||
| // pulling this in mainly for less shorthand | ||
| &.nav-justified { | ||
| @extend .nav-justified; | ||
| @extend .nav-tabs-justified; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Pills | ||
| // ------------------------- | ||
| .nav-pills { | ||
| > li { | ||
| float: left; | ||
|
|
||
| // Links rendered as pills | ||
| > a { | ||
| border-radius: $nav-pills-border-radius; | ||
| } | ||
| + li { | ||
| margin-left: 2px; | ||
| } | ||
|
|
||
| // Active state | ||
| &.active > a { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| color: $nav-pills-active-link-hover-color; | ||
| background-color: $nav-pills-active-link-hover-bg; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Stacked pills | ||
| .nav-stacked { | ||
| > li { | ||
| float: none; | ||
| + li { | ||
| margin-top: 2px; | ||
| margin-left: 0; // no need for this gap between nav items | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Nav variations | ||
| // -------------------------------------------------- | ||
|
|
||
| // Justified nav links | ||
| // ------------------------- | ||
|
|
||
| .nav-justified { | ||
| width: 100%; | ||
|
|
||
| > li { | ||
| float: none; | ||
| > a { | ||
| text-align: center; | ||
| margin-bottom: 5px; | ||
| } | ||
| } | ||
|
|
||
| > .dropdown .dropdown-menu { | ||
| top: auto; | ||
| left: auto; | ||
| } | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| > li { | ||
| display: table-cell; | ||
| width: 1%; | ||
| > a { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Move borders to anchors instead of bottom of list | ||
| // | ||
| // Mixin for adding on top the shared `.nav-justified` styles for our tabs | ||
| .nav-tabs-justified { | ||
| border-bottom: 0; | ||
|
|
||
| > li > a { | ||
| // Override margin from .nav-tabs | ||
| margin-right: 0; | ||
| border-radius: $border-radius-base; | ||
| } | ||
|
|
||
| > .active > a, | ||
| > .active > a:hover, | ||
| > .active > a:focus { | ||
| border: 1px solid $nav-tabs-justified-link-border-color; | ||
| } | ||
|
|
||
| @media (min-width: $screen-sm-min) { | ||
| > li > a { | ||
| border-bottom: 1px solid $nav-tabs-justified-link-border-color; | ||
| border-radius: $border-radius-base $border-radius-base 0 0; | ||
| } | ||
| > .active > a, | ||
| > .active > a:hover, | ||
| > .active > a:focus { | ||
| border-bottom-color: $nav-tabs-justified-active-link-border-color; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Tabbable tabs | ||
| // ------------------------- | ||
|
|
||
| // Hide tabbable panes to start, show them when `.active` | ||
| .tab-content { | ||
| > .tab-pane { | ||
| display: none; | ||
| } | ||
| > .active { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Dropdowns | ||
| // ------------------------- | ||
|
|
||
| // Specific dropdowns | ||
| .nav-tabs .dropdown-menu { | ||
| // make dropdown border overlap tab border | ||
| margin-top: -1px; | ||
| // Remove the top rounded corners here since there is a hard edge above the menu | ||
| @include border-top-radius(0); | ||
| } |
| @@ -0,0 +1,54 @@ | ||
| // | ||
| // Pager pagination | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| .pager { | ||
| padding-left: 0; | ||
| margin: $line-height-computed 0; | ||
| list-style: none; | ||
| text-align: center; | ||
| @include clearfix; | ||
| li { | ||
| display: inline; | ||
| > a, | ||
| > span { | ||
| display: inline-block; | ||
| padding: 5px 14px; | ||
| background-color: $pager-bg; | ||
| border: 1px solid $pager-border; | ||
| border-radius: $pager-border-radius; | ||
| } | ||
|
|
||
| > a:hover, | ||
| > a:focus { | ||
| text-decoration: none; | ||
| background-color: $pager-hover-bg; | ||
| } | ||
| } | ||
|
|
||
| .next { | ||
| > a, | ||
| > span { | ||
| float: right; | ||
| } | ||
| } | ||
|
|
||
| .previous { | ||
| > a, | ||
| > span { | ||
| float: left; | ||
| } | ||
| } | ||
|
|
||
| .disabled { | ||
| > a, | ||
| > a:hover, | ||
| > a:focus, | ||
| > span { | ||
| color: $pager-disabled-color; | ||
| background-color: $pager-bg; | ||
| cursor: $cursor-disabled; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,89 @@ | ||
| // | ||
| // Pagination (multiple pages) | ||
| // -------------------------------------------------- | ||
| .pagination { | ||
| display: inline-block; | ||
| padding-left: 0; | ||
| margin: $line-height-computed 0; | ||
| border-radius: $border-radius-base; | ||
|
|
||
| > li { | ||
| display: inline; // Remove list-style and block-level defaults | ||
| > a, | ||
| > span { | ||
| position: relative; | ||
| float: left; // Collapse white-space | ||
| padding: $padding-base-vertical $padding-base-horizontal; | ||
| line-height: $line-height-base; | ||
| text-decoration: none; | ||
| color: $pagination-color; | ||
| background-color: $pagination-bg; | ||
| border: 1px solid $pagination-border; | ||
| margin-left: -1px; | ||
| } | ||
| &:first-child { | ||
| > a, | ||
| > span { | ||
| margin-left: 0; | ||
| @include border-left-radius($border-radius-base); | ||
| } | ||
| } | ||
| &:last-child { | ||
| > a, | ||
| > span { | ||
| @include border-right-radius($border-radius-base); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| > li > a, | ||
| > li > span { | ||
| &:hover, | ||
| &:focus { | ||
| z-index: 3; | ||
| color: $pagination-hover-color; | ||
| background-color: $pagination-hover-bg; | ||
| border-color: $pagination-hover-border; | ||
| } | ||
| } | ||
|
|
||
| > .active > a, | ||
| > .active > span { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| z-index: 2; | ||
| color: $pagination-active-color; | ||
| background-color: $pagination-active-bg; | ||
| border-color: $pagination-active-border; | ||
| cursor: default; | ||
| } | ||
| } | ||
|
|
||
| > .disabled { | ||
| > span, | ||
| > span:hover, | ||
| > span:focus, | ||
| > a, | ||
| > a:hover, | ||
| > a:focus { | ||
| color: $pagination-disabled-color; | ||
| background-color: $pagination-disabled-bg; | ||
| border-color: $pagination-disabled-border; | ||
| cursor: $cursor-disabled; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Sizing | ||
| // -------------------------------------------------- | ||
|
|
||
| // Large | ||
| .pagination-lg { | ||
| @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); | ||
| } | ||
|
|
||
| // Small | ||
| .pagination-sm { | ||
| @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); | ||
| } |
| @@ -0,0 +1,271 @@ | ||
| // | ||
| // Panels | ||
| // -------------------------------------------------- | ||
|
|
||
|
|
||
| // Base class | ||
| .panel { | ||
| margin-bottom: $line-height-computed; | ||
| background-color: $panel-bg; | ||
| border: 1px solid transparent; | ||
| border-radius: $panel-border-radius; | ||
| @include box-shadow(0 1px 1px rgba(0,0,0,.05)); | ||
| } | ||
|
|
||
| // Panel contents | ||
| .panel-body { | ||
| padding: $panel-body-padding; | ||
| @include clearfix; | ||
| } | ||
|
|
||
| // Optional heading | ||
| .panel-heading { | ||
| padding: $panel-heading-padding; | ||
| border-bottom: 1px solid transparent; | ||
| @include border-top-radius(($panel-border-radius - 1)); | ||
|
|
||
| > .dropdown .dropdown-toggle { | ||
| color: inherit; | ||
| } | ||
| } | ||
|
|
||
| // Within heading, strip any `h*` tag of its default margins for spacing. | ||
| .panel-title { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| font-size: ceil(($font-size-base * 1.125)); | ||
| color: inherit; | ||
|
|
||
| > a, | ||
| > small, | ||
| > .small, | ||
| > small > a, | ||
| > .small > a { | ||
| color: inherit; | ||
| } | ||
| } | ||
|
|
||
| // Optional footer (stays gray in every modifier class) | ||
| .panel-footer { | ||
| padding: $panel-footer-padding; | ||
| background-color: $panel-footer-bg; | ||
| border-top: 1px solid $panel-inner-border; | ||
| @include border-bottom-radius(($panel-border-radius - 1)); | ||
| } | ||
|
|
||
|
|
||
| // List groups in panels | ||
| // | ||
| // By default, space out list group content from panel headings to account for | ||
| // any kind of custom content between the two. | ||
|
|
||
| .panel { | ||
| > .list-group, | ||
| > .panel-collapse > .list-group { | ||
| margin-bottom: 0; | ||
|
|
||
| .list-group-item { | ||
| border-width: 1px 0; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| // Add border top radius for first one | ||
| &:first-child { | ||
| .list-group-item:first-child { | ||
| border-top: 0; | ||
| @include border-top-radius(($panel-border-radius - 1)); | ||
| } | ||
| } | ||
|
|
||
| // Add border bottom radius for last one | ||
| &:last-child { | ||
| .list-group-item:last-child { | ||
| border-bottom: 0; | ||
| @include border-bottom-radius(($panel-border-radius - 1)); | ||
| } | ||
| } | ||
| } | ||
| > .panel-heading + .panel-collapse > .list-group { | ||
| .list-group-item:first-child { | ||
| @include border-top-radius(0); | ||
| } | ||
| } | ||
| } | ||
| // Collapse space between when there's no additional content. | ||
| .panel-heading + .list-group { | ||
| .list-group-item:first-child { | ||
| border-top-width: 0; | ||
| } | ||
| } | ||
| .list-group + .panel-footer { | ||
| border-top-width: 0; | ||
| } | ||
|
|
||
| // Tables in panels | ||
| // | ||
| // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and | ||
| // watch it go full width. | ||
|
|
||
| .panel { | ||
| > .table, | ||
| > .table-responsive > .table, | ||
| > .panel-collapse > .table { | ||
| margin-bottom: 0; | ||
|
|
||
| caption { | ||
| padding-left: $panel-body-padding; | ||
| padding-right: $panel-body-padding; | ||
| } | ||
| } | ||
| // Add border top radius for first one | ||
| > .table:first-child, | ||
| > .table-responsive:first-child > .table:first-child { | ||
| @include border-top-radius(($panel-border-radius - 1)); | ||
|
|
||
| > thead:first-child, | ||
| > tbody:first-child { | ||
| > tr:first-child { | ||
| border-top-left-radius: ($panel-border-radius - 1); | ||
| border-top-right-radius: ($panel-border-radius - 1); | ||
|
|
||
| td:first-child, | ||
| th:first-child { | ||
| border-top-left-radius: ($panel-border-radius - 1); | ||
| } | ||
| td:last-child, | ||
| th:last-child { | ||
| border-top-right-radius: ($panel-border-radius - 1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // Add border bottom radius for last one | ||
| > .table:last-child, | ||
| > .table-responsive:last-child > .table:last-child { | ||
| @include border-bottom-radius(($panel-border-radius - 1)); | ||
|
|
||
| > tbody:last-child, | ||
| > tfoot:last-child { | ||
| > tr:last-child { | ||
| border-bottom-left-radius: ($panel-border-radius - 1); | ||
| border-bottom-right-radius: ($panel-border-radius - 1); | ||
|
|
||
| td:first-child, | ||
| th:first-child { | ||
| border-bottom-left-radius: ($panel-border-radius - 1); | ||
| } | ||
| td:last-child, | ||
| th:last-child { | ||
| border-bottom-right-radius: ($panel-border-radius - 1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .panel-body + .table, | ||
| > .panel-body + .table-responsive, | ||
| > .table + .panel-body, | ||
| > .table-responsive + .panel-body { | ||
| border-top: 1px solid $table-border-color; | ||
| } | ||
| > .table > tbody:first-child > tr:first-child th, | ||
| > .table > tbody:first-child > tr:first-child td { | ||
| border-top: 0; | ||
| } | ||
| > .table-bordered, | ||
| > .table-responsive > .table-bordered { | ||
| border: 0; | ||
| > thead, | ||
| > tbody, | ||
| > tfoot { | ||
| > tr { | ||
| > th:first-child, | ||
| > td:first-child { | ||
| border-left: 0; | ||
| } | ||
| > th:last-child, | ||
| > td:last-child { | ||
| border-right: 0; | ||
| } | ||
| } | ||
| } | ||
| > thead, | ||
| > tbody { | ||
| > tr:first-child { | ||
| > td, | ||
| > th { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| > tbody, | ||
| > tfoot { | ||
| > tr:last-child { | ||
| > td, | ||
| > th { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .table-responsive { | ||
| border: 0; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Collapsable panels (aka, accordion) | ||
| // | ||
| // Wrap a series of panels in `.panel-group` to turn them into an accordion with | ||
| // the help of our collapse JavaScript plugin. | ||
|
|
||
| .panel-group { | ||
| margin-bottom: $line-height-computed; | ||
|
|
||
| // Tighten up margin so it's only between panels | ||
| .panel { | ||
| margin-bottom: 0; | ||
| border-radius: $panel-border-radius; | ||
|
|
||
| + .panel { | ||
| margin-top: 5px; | ||
| } | ||
| } | ||
|
|
||
| .panel-heading { | ||
| border-bottom: 0; | ||
|
|
||
| + .panel-collapse > .panel-body, | ||
| + .panel-collapse > .list-group { | ||
| border-top: 1px solid $panel-inner-border; | ||
| } | ||
| } | ||
|
|
||
| .panel-footer { | ||
| border-top: 0; | ||
| + .panel-collapse .panel-body { | ||
| border-bottom: 1px solid $panel-inner-border; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Contextual variations | ||
| .panel-default { | ||
| @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border); | ||
| } | ||
| .panel-primary { | ||
| @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border); | ||
| } | ||
| .panel-success { | ||
| @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border); | ||
| } | ||
| .panel-info { | ||
| @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border); | ||
| } | ||
| .panel-warning { | ||
| @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border); | ||
| } | ||
| .panel-danger { | ||
| @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border); | ||
| } |