Compare commits

..

79 Commits

Author SHA1 Message Date
Rowan Manning
aa7d694da7 Version 2.4.0 2017-11-23 10:01:18 +00:00
Elena Musatova
b144970564 Results page: export graph in PNG (#197) 2017-11-23 09:56:23 +00:00
Rowan Manning
37d94b0005 Version 2.3.0 2017-10-31 16:13:13 +00:00
Elena Musatova
66d97769a0 Updated results page (#196)
* Update gitignore

* Update makefile. Add hbs helper

* Collect all selectors for errors/warnings/notices

* Add list of techniques that help to solve problems

* Remove task-stats block from sidebar

* Remove script from Makefile

* Update tooltips. Map standards and techniques

* Update layout for new components: new tabs, errors panels, lists of selectors, tooltips and popovers

* Update styles for new layout and components

* Graph buttons and popovers styles

* Reformat less code

* Include popover. Update IE styles

* Problem details. Context popovers

* Update graph buttons. Add sorting by number of errors

* Update graph buttons params

* Fix tooltip names

* Swap details and ignore link-buttons

* Set ignore link colors
2017-10-31 16:10:24 +00:00
Michael Mior
a8013834c5 Fix Travis CI badge in README (#193) 2017-09-27 09:44:56 +01:00
Hollie Kay
bfe47003c7 remove survey (#192) 2017-09-12 13:54:40 +01:00
Hollie Kay
fb062fba48 Add Danny's article to resources (#191) 2017-08-17 13:46:42 +01:00
Hollie Kay
774b522676 add survey link to readme (#190)
also adds a header to make it look more exciting and like a proper section, instead of a list of random sentences
2017-08-14 11:55:48 +01:00
Jose Bolos
defb044f19 Version 2.2.2 2017-03-23 09:06:29 +00:00
Snyk bot
8f6ef9f204 fix: package.json to reduce vulnerabilities (#185)
The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/npm:qs:20170213
- https://snyk.io/vuln/npm:qs:20170213

Latest report for pa11y/dashboard:
https://snyk.io/test/github/pa11y/dashboard
2017-03-23 09:00:24 +00:00
Rowan Manning
b24076abf1 Tooling update (#184)
* Use a common Makefile/build process

* Use ESLint with the pa11y lint config
2017-03-21 13:41:46 +00:00
Snyk bot
e27e129677 fix: package.json to reduce vulnerabilities (#179)
The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/npm:moment:20161019

Latest report for pa11y/dashboard:
https://snyk.io/test/github/pa11y/dashboard
2017-02-20 15:16:48 +00:00
Rowan Manning
f7c3b5e99a Version 2.2.1 2017-02-07 13:21:23 +00:00
Rowan Manning
2ec9139ab0 Fix task editing when no actions are specified (#178) 2017-02-07 13:20:36 +00:00
Rowan Manning
ce9219c01e Version 2.2.0 2017-01-27 11:14:26 +00:00
Rowan Manning
28a0a861f3 Add support for Pa11y actions (#176) 2017-01-27 10:58:48 +00:00
Rowan Manning
acba762a66 Update missed copyright reference (#174) 2017-01-19 13:45:25 +00:00
Rowan Manning
9b80bfa6ab Update the copyright notice and author (#173) 2017-01-19 13:32:17 +00:00
Jose Bolos
926cb5af3b Change support details for v1 of dashboard (#172) 2017-01-18 14:46:30 +00:00
Hollie Kay
503ed16265 Remove phantom reference (#170) 2017-01-10 11:36:19 +00:00
Rowan Manning
6d0c6e821b Version 2.1.2 2016-12-12 11:49:01 +00:00
Usman Iqbal
cc5b3f19e5 Remove Add new URL button when readonly is true (#166) 2016-12-12 11:47:04 +00:00
Rowan Manning
11e64e27c4 Add a contributing guide (#163) 2016-12-01 15:04:30 +00:00
Rowan Manning
ff4a9fa7b0 Use two spaces in package.json (#162) 2016-11-25 13:25:47 +00:00
Rowan Manning
5bc32fc68e Version 2.1.1 2016-11-20 18:56:21 +00:00
Frank van Gemeren
c2fbcf4fa1 Use arrows instead of plus and minus for collapsibles/expanders (#153) 2016-11-19 00:18:24 +00:00
Una Kravets
f60d1ca0ce more detailed 500 message (#159) 2016-11-19 00:17:34 +00:00
Rowan Manning
227de3638a Version 2.1.0 2016-11-07 15:03:19 +00:00
Rowan Manning
79c849d42b Use the latest Pa11y webservice 2016-11-07 14:58:15 +00:00
Rowan Manning
8195c5d2c5 Fix lint errors 2016-11-07 14:58:15 +00:00
Rowan Manning
568e068613 Parse task headers as HTTP headers rather than JSON 2016-11-07 14:58:15 +00:00
Rowan Manning
ee729d1d55 Write integration tests for hideElements and headers 2016-11-07 14:58:15 +00:00
Rowan Manning
509914d19a Fix the hideElements option
I broke this with my incorrect advice :D
2016-11-07 14:58:15 +00:00
Laura Carvajal
9df456c7c1 hide-elements and placeholders 2016-11-07 14:58:15 +00:00
Laura Carvajal
36dad55bb8 restore config filename 2016-11-07 14:58:15 +00:00
Laura Carvajal
39435f37e4 header and hide fields 2016-11-07 14:58:15 +00:00
Rowan Manning
c562bb07f3 Make optional fields optional (#154)
This fixes an issue that required people to manually specify a timeout
and wait for their tasks when they're created.
2016-11-07 14:06:12 +00:00
Frank van Gemeren
2976d5e391 Better client-side validation (#152) 2016-11-07 13:36:20 +00:00
Laura Carvajal
344efb9da3 allow for .js config 2016-10-20 14:15:55 +01:00
Hollie Kay
c2b1b1d1a1 Merge pull request #148 from pa11y/troubleshooting
add troubleshooting guide and link on the index page
2016-10-06 17:00:44 +01:00
hollsk
8c4517c830 put the links and refs the right way around 2016-10-06 17:12:50 +01:00
hollsk
40b6e79f81 add troubleshooting guide and link on the index page 2016-10-06 16:40:22 +01:00
Jose Bolos
02ce731e83 Version 2.0.1 2016-09-12 14:09:38 +01:00
Jose Bolos
4f46351d68 Merge pull request #143 from pa11y/secfixes
Update several packages in order to fix several vulns
2016-09-12 13:58:30 +01:00
Jose Bolos
ee7795a7a9 Merge pull request #144 from pa11y/license
Add license field to package.json
2016-09-09 14:09:43 +01:00
Jose Bolos
3a3cca881a Add license field to package.json 2016-09-09 12:58:55 +01:00
Jose Bolos
fa0c523e3f Require webservice-client-node 1.2.1 or greater
Fixes https://nodesecurity.io/advisories/130
2016-09-09 12:52:11 +01:00
Jose Bolos
36a677948b Upgrade mocha to version 3 2016-09-09 12:27:42 +01:00
Jose Bolos
22aab6bee2 Require request 2.74 or greater
Fixes https://nodesecurity.io/advisories/130
2016-09-09 12:27:09 +01:00
Jose Bolos
a30e82d5be Require webservice 2.0.1 or greater
Addresses the following vulns present on 2.0.0:
* https://nodesecurity.io/advisories/45
* https://nodesecurity.io/advisories/63
* https://nodesecurity.io/advisories/65
* https://nodesecurity.io/advisories/121
2016-09-09 12:22:34 +01:00
Jose Bolos
71432a3063 Upgrade express to 4.14 or greater
Prevents https://nodesecurity.io/advisories/106
2016-09-09 12:19:28 +01:00
Rowan Manning
6cd7630049 Merge pull request #141 from pa11y/digitial
Fix a typo in link text
2016-08-15 09:09:32 +01:00
Jose Bolos
979f7f244b Fix a typo in link text 2016-08-15 08:02:48 +01:00
Rowan Manning
e431fefbd8 Use the ES6 linting rules from the website (#138) 2016-07-22 14:34:10 +01:00
Rowan Manning
df8f5a7d07 Version 2.0.0 2016-06-05 13:35:36 +01:00
Rowan Manning
b727251862 Use Pa11y Webservice 2.0 2016-06-05 13:33:31 +01:00
Rowan Manning
9d53739c06 Add a migration guide 2016-06-05 12:59:10 +01:00
Rowan Manning
2633248ea1 Drop support for Node.js 0.10-0.12 2016-06-05 12:56:50 +01:00
Rowan Manning
ea7e6f4052 Version 1.12.1 2016-06-05 12:55:43 +01:00
Andrew Mee
a3bc8c0443 Merge pull request #136 from pa11y/repo-rename
Rename all the repos and uppercase Pa11y
2016-06-02 10:26:20 +01:00
Rowan Manning
b1ae55c802 Rename all the repos and uppercase Pa11y 2016-06-01 20:57:09 +01:00
Andrew Mee
0a14a321d2 Version 1.12.0 2016-05-26 15:45:03 +01:00
Rowan Manning
ae6208d87e Support Node.js 0.10–6 (#132)
* Update dependencies

* Switch from jsdom to cheerio

* Update the supported Node.js versions

* Recompile the client-side CSS and JS
2016-05-26 15:33:58 +01:00
Rowan Manning
6bfb4f72d9 Version 1.11.0 2016-05-23 19:13:46 +01:00
Rowan Manning
b3a28bb1e8 Update the README based on review comments 2016-05-23 19:07:23 +01:00
Rowan Manning
4bd5613427 Update references to the new Pa11y organisation 2016-05-23 19:00:22 +01:00
Rowan Manning
17b04daae0 Document how to use environment variables 2016-05-22 13:10:52 +01:00
Rowan Manning
c15cc32542 Fix some lint errors 2016-05-22 13:05:08 +01:00
Josh Chisholm
08a1a9060f allow configuration by environment variables 2016-05-22 13:01:05 +01:00
Rowan Manning
1358d0f38d Add a changelog 2016-05-22 12:58:13 +01:00
Rowan Manning
4eb2fba6aa Bring the README into line with newer projects 2016-05-22 11:45:57 +01:00
Rowan Manning
6a1e06a435 Update to the latest version of the webservice 2016-05-22 11:39:00 +01:00
Rayraegah
5bfc958270 Revert "if wait value is null or undefined, set it to 0"
This reverts commit 7ce4127908.
2016-05-21 16:14:53 +01:00
Rayraegah
7ce4127908 if wait value is null or undefined, set it to 0 2016-05-21 15:43:58 +01:00
Rayraegah
2a15773e04 Added "wait" field in new task and edit task pages
Added UI control to set `wait` option in pa11y script. Updated test
cases.

[pa11y-dashboard issue
#127](https://github.com/springernature/pa11y-dashboard/issues/127)
2016-05-21 14:13:38 +01:00
Hollie Kay
aa3f0eb727 Merge pull request #128 from springernature/sidekick-update
Sidekick update
2016-05-20 16:21:35 +01:00
hollsk
aad26d8cd1 add horizontal rules 2016-05-20 16:20:47 +01:00
hollsk
fbe6875cf0 moar space 2016-05-20 15:45:37 +01:00
hollsk
c0ee197138 add sidekick update 2016-05-20 15:44:19 +01:00
118 changed files with 7585 additions and 4723 deletions

View File

@@ -1,3 +1,2 @@
coverage coverage
node_modules
public/js public/js

3
.eslintrc.js Normal file
View File

@@ -0,0 +1,3 @@
'use strict';
module.exports = require('pa11y-lint-config/eslint/es6');

3
.gitignore vendored
View File

@@ -7,3 +7,6 @@ config/test.json
# Generated npm files # Generated npm files
node_modules node_modules
npm-debug.log npm-debug.log
# JetBrains IDE
.idea

88
.jscsrc
View File

@@ -1,88 +0,0 @@
{
"disallowEmptyBlocks": true,
"disallowImplicitTypeConversion": [
"binary",
"numeric",
"string"
],
"disallowKeywordsOnNewLine": [
"catch",
"else"
],
"disallowMixedSpacesAndTabs": true,
"disallowMultipleSpaces": true,
"disallowMultipleVarDecl": true,
"disallowNewlineBeforeBlockStatements": true,
"disallowQuotedKeysInObjects": true,
"disallowSpaceAfterObjectKeys": true,
"disallowSpaceAfterPrefixUnaryOperators": true,
"disallowSpaceBeforeComma": true,
"disallowSpaceBeforeSemicolon": true,
"disallowSpacesInCallExpression": true,
"disallowSpacesInFunction": {
"beforeOpeningRoundBrace": true
},
"disallowSpacesInsideArrayBrackets": true,
"disallowSpacesInsideBrackets": true,
"disallowSpacesInsideObjectBrackets": true,
"disallowSpacesInsideParentheses": true,
"disallowTrailingComma": true,
"disallowTrailingWhitespace": true,
"disallowYodaConditions": true,
"maximumLineLength": 200,
"requireBlocksOnNewline": true,
"requireCapitalizedConstructors": true,
"requireCommaBeforeLineBreak": true,
"requireCurlyBraces": [
"if",
"else",
"for",
"while",
"do",
"switch",
"try",
"catch"
],
"requireDotNotation": true,
"requireLineBreakAfterVariableAssignment": true,
"requireLineFeedAtFileEnd": true,
"requireObjectKeysOnNewLine": true,
"requireParenthesesAroundIIFE": true,
"requireSemicolons": true,
"requireSpaceAfterBinaryOperators": true,
"requireSpaceAfterKeywords": [
"if",
"else",
"for",
"while",
"do",
"switch",
"try",
"catch"
],
"requireSpaceAfterLineComment": {
"allExcept": [
"="
]
},
"requireSpaceBeforeBinaryOperators": true,
"requireSpaceBeforeBlockStatements": true,
"requireSpaceBeforeObjectValues": true,
"requireSpaceBetweenArguments": true,
"requireSpacesInConditionalExpression": true,
"requireSpacesInForStatement": true,
"requireSpacesInFunction": {
"beforeOpeningCurlyBrace": true
},
"validateIndentation": "\t",
"validateLineBreaks": "LF",
"validateNewlineAfterArrayElements": true,
"validateParameterSeparator": ", ",
"validateQuoteMarks": "'",
"excludeFiles": [
"coverage",
"node_modules",
"public/js"
]
}

View File

@@ -1,29 +0,0 @@
{
"browser": true,
"curly": true,
"eqeqeq": true,
"forin": true,
"globals": {
"after": true,
"afterEach": true,
"before": true,
"beforeEach": true,
"describe": true,
"it": true
},
"latedef": "nofunc",
"maxcomplexity": 6,
"maxdepth": 2,
"maxparams": 4,
"noarg": true,
"node": true,
"nonew": true,
"nonstandard": true,
"regexp": true,
"shadow": true,
"strict": true,
"sub": true,
"trailing": true,
"undef": true,
"unused": true
}

View File

@@ -3,16 +3,9 @@
language: node_js language: node_js
matrix: matrix:
include: include:
- node_js: '4'
# Run tests in Node.js 0.10 (unsupported) - node_js: '5'
- node_js: '0.10' - node_js: '6'
# Run tests in Node.js 0.12
- node_js: '0.12'
# Allow Node.js 0.10 to fail it's unsupported
allow_failures:
- node_js: '0.10'
# Build only master (and pull-requests) # Build only master (and pull-requests)
branches: branches:

253
CHANGELOG.md Normal file
View File

@@ -0,0 +1,253 @@
# Changelog
## 2.4.0 (2017-11-23)
* Add the ability to export the results graph as a PNG, see #197 for more information
## 2.3.0 (2017-10-31)
* Large overhaul of the results page, see #196 for more information
## 2.2.2 (2017-03-23)
* Upgrades `body-parser` and `express`. Fixes a vulnerability in `qs`: https://snyk.io/vuln/npm:qs:20170213
## 2.2.1 (2017-02-07)
* Fix task editing when no actions are specified
## 2.2.0 (2017-01-27)
* Add support for Pa11y actions
* Update dependencies
* pa11y-webservice: ~2.1.2 to ^2.3.0
## 2.1.2 (2016-12-12)
* Hide the "add" button in readonly mode
* Add a contributing guide
## 2.1.1 (2016-11-20)
* Use arrows instead of plus and minus for collapsibles/expanders
* Supply more detailed 500 messages
## 2.1.0 (2016-11-07)
* Allow for configuration files to be JavaScript rather than JSON
* Allow setting of HTTP headers for task runs
* Allow hiding/ignoring elements for task runs
* Update dependencies and devDependencies
* pa11y-webservice: ~2.0.1 to ^2.1.2
* mocha: ^3 to ^2 (temporary tests weren't running)
## 2.0.1 (2016-09-12)
* Update dependencies and devDependencies
* express: ~4.13 to ~4.14
* pa11y-webservice: ~2.0 to ^2.0.1
* request: ^2 to ^2.74
* mocha: ^2 to ^3
* pa11y-webservice-client-node: ~1.2 to ^1.2.1
This fixes the following vulnerabilities:
* https://nodesecurity.io/advisories/45
* https://nodesecurity.io/advisories/63
* https://nodesecurity.io/advisories/65
* https://nodesecurity.io/advisories/106
* https://nodesecurity.io/advisories/121
* https://nodesecurity.io/advisories/130
## 2.0.0 (2016-06-05)
* Drop Node.js 0.100.12 support
* Update dependencies
* pa11y-webservice: ~1.11 to ~2.0
* See the [migration guide](https://github.com/pa11y/dashboard/blob/master/MIGRATION.md#migrating-from-10-to-20) for details
## 1.12.1 (2016-06-05)
* Update references/links after a repo rename
## 1.12.0 (2016-05-26)
* Update Node.js version support to 0.106.0
* Update dependencies
* body-parser: added at ~1.15
* chalk: ~0.2 to ~1.1
* compression: added at ~1.6
* express: ~3.4 to ~4.13
* express-hbs: ~0.2 to ~1.0
* moment: ~2.2 to ~2.13
* pa11y-webservice: ~1.10 to ~1.11
* pa11y-webservice-client-node: ~1.1 to ~1.2
* bower: ~1.2 to ~1.7
* cheerio: added at ~0.20
* jsdom: removed
* request: ~2.27 to ^2
* uglify-js: ~2.4 to ~2.6
## 1.11.0 (2016-05-23)
* Add the ability to configure task wait times
* Allow configuration by environment variables
* Update repository references to the new Pa11y organisation
* Add a changelog
## 1.10.0 (2016-05-18)
* Automatically focus on the filter input box when you select the filter
* Make a task URL clickable
* Tweak the documentation to make it more usable
* Add a resources section to the README
## 1.9.0 (2016-04-25)
* Show errors' context and selector on the results page
* Add context and selector to CSV output
* Fix lint errors
* Switch from Grunt to Make
* Add a `SIGINT` handler
* Update dependencies
* pa11y-webservice: ~1.6 to ~1.8
## 1.8.2 (2016-02-10)
* Update the license in the footer
## 1.8.1 (2016-02-10)
* Update repository references to springernature
## 1.8.0 (2016-02-04)
* Make the graph more accessible to color-blind users
* Fix lint errors
## 1.7.0 (2016-01-29)
* Hide the date list from individual result pages
* Make the date selector properly keyboard accessible
* Change the options button into a more accessible list
* Make the errors/warnings/notices lists keyboard accessible
## 1.6.1 (2016-01-26)
* Add keyboard access for filters
* Fix lint errors
## 1.6.0 (2015-08-20)
* Hide all graph data except for errors by default
## 1.5.0 (2015-07-06)
* Add the ability to use HTTP basic auth with task URLs
* Update dependencies
* pa11y-webservice: ~1.5 to ~1.6
## 1.4.0 (2015-07-02)
* Add the ability to set a per-task timeout
## 1.3.2 (2015-01-17)
* Update dependencies
* pa11y-webservice: ~1.3 to ~1.4
## 1.3.1 (2014-03-05)
* Fix the URL filter position when in demo mode
## 1.3.0 (2014-03-04)
* Add filtering of tasks on the home page
* Add the ability to ignore certain rules
* Add the ability to ignore a rule from the result page
* Tweak the display of task cards
## 1.2.3 (2014-01-13)
* Fix CSV export for the OS X version of Excel
## 1.2.2 (2014-01-09)
* Fix spacing issues when the graph is not visible
* Add notes on publishing a release
## 1.2.1 (2014-01-08)
* Fix dropdown positioning in Internet Explorer 7 and 8
## 1.2.0 (2013-12-12)
* Add HTML Codesniffer links on the results page
* Display the ignore rules for results on the results page
* Link the breadcrumbs on task sub-pages
* Fix an issue with saving empty ignore rules
* Cache-bust the CSS and JavaScript
* Add the ability to edit tasks
* Fix lint errors
* Tweaks to the display of the graphs
* Update dependencies
* pa11y-webservice: ~1.1 to ~1.2
* pa11y-webservice-client-node: ~1.0 to ~1.1
## 1.1.0 (2013-11-22)
* Add a functional test suite
* Allow the webservice to run automatically
* Documentation improvements
* Add a Travis config
* Fix lint errors
## 1.0.0 (2013-11-19)
* Initial stable release
* Add the ability to set a site-wide message
* Add a demo mode for demo/public-facing sites
* Disable search engine indexing by default
* Tweak the task header at smaller screen sizes
* Make checkboxes on the graph WCAG2AA compliant
* Make checkbox inputs and labels WCAG2AA compliant on new URL page
* Colour changes to ensure there are no contrast issues
* Make the copy more consistent
* Update screenshots
* Update dependencies
* pa11y-webservice-client-node: 1.0.0-beta.7 to ~1.0
## 1.0.0-beta.3 pre-release (2013-11-12)
* Fix lint errors
* Add descriptive labels to tasks
* Add a name field to "New URL" form
* Add a WCAG 2.0 link to the footer
* Tweak the layout at smaller screen sizes
* Notify users when there are no ignored rules
* Fix the expires headers for front end assets
* Move from Make to Grunt
* Compress static files
* Minify the site JavaScript
* Compile LESS files with grunt
* Add a watch task to recompile assets on change
* Commit compiled front-end code to the repo
* Add development instructions
* Update screenshots
* Update dependencies
* pa11y-webservice-client-node: 1.0.0-beta.4 to 1.0.0-beta.7
## 1.0.0-beta.2 pre-release (2013-10-04)
* Add screenshots to the README
* Fix margins
* Add bower package management
* Stop the graph from appearing if there's only one result
* Add the ability to run tasks ad-hoc
* Add more useful information to the footer
* General copy edits
* Update dependencies
* pa11y-webservice-client-node: 1.0.0-beta.3 to 1.0.0-beta.4
## 1.0.0-beta.1 pre-release (2013-09-27)
* Initial release

21
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,21 @@
Contributing Guide
==================
Thanks for getting involved :tada:
The Pa11y team loves to see new contributors, and we strive to provide a welcoming and inclusive environment. We ask that all contributors read and follow [our code of conduct][code-of-conduct] before joining. If you represent an organisation, then you might find our [guide for companies][companies] helpful.
Our website outlines the many ways that you can contribute to Pa11y:
- [Help us to talk to our users][communications]
- [Help us out with design][designers]
- [Help us with our code][developers]
[code-of-conduct]: http://pa11y.org/contributing/code-of-conduct/
[communications]: http://pa11y.org/contributing/communications/
[companies]: http://pa11y.org/contributing/companies/
[designers]: http://pa11y.org/contributing/designers/
[developers]: http://pa11y.org/contributing/developers/

19
MIGRATION.md Normal file
View File

@@ -0,0 +1,19 @@
Migration Guide
===============
Pa11y Dashboard's API changes between major versions. This is a guide to help you make the switch when this happens.
Table Of Contents
-----------------
- [Migrating from 1.0 to 2.0](#migrating-from-10-to-20)
Migrating from 1.0 to 2.0
-------------------------
### Node.js Support
The only breaking change in Pa11y Dashboard 2.0 is that Node.js 0.10 and 0.12 are no longer supported. We'll be using newer ES6 features in upcoming releases which will not work in these older Node.js versions.

View File

@@ -1,59 +1,41 @@
include Makefile.node
# Color helpers # We need to run integration tests recursively
C_CYAN=\x1b[34;01m export INTEGRATION_FLAGS := --recursive
C_RESET=\x1b[0m
# Group targets
all: deps lint test
ci: lint test
# Install dependencies # Verify tasks
deps: # ------------
@echo "$(C_CYAN)> installing dependencies$(C_RESET)"
@npm install
# Lint JavaScript # Lint alias for backwards compatibility
lint: jshint jscs lint: verify
# Run JSHint
jshint:
@echo "$(C_CYAN)> linting javascript$(C_RESET)"
@./node_modules/.bin/jshint .
# Run JavaScript Code Style # Client-side asset tasks
jscs: # -----------------------
@echo "$(C_CYAN)> checking javascript code style$(C_RESET)"
@./node_modules/.bin/jscs .
# Run all tests
test: test-integration
# Run integration tests
test-integration:
@echo "$(C_CYAN)> running integration tests$(C_RESET)"
@./node_modules/.bin/mocha ./test/integration --reporter spec --recursive --timeout 5000 --slow 50
# Compile LESS # Compile LESS
less: less:
@echo "$(C_CYAN)> compiling less$(C_RESET)" @lessc -x ./public/less/main.less ./public/css/site.min.css
@./node_modules/.bin/lessc -x ./public/less/main.less ./public/css/site.min.css @$(TASK_DONE)
# Compile client-side JavaScript # Compile client-side JavaScript
uglify: uglify:
@echo "$(C_CYAN)> compiling client-side JavaScript$(C_RESET)" @uglifyjs \
@./node_modules/.bin/uglifyjs \
public/js/vendor/jquery/jquery.min.js \ public/js/vendor/jquery/jquery.min.js \
public/js/vendor/bootstrap/js/alert.js \ public/js/vendor/bootstrap/js/alert.js \
public/js/vendor/bootstrap/js/dropdown.js \ public/js/vendor/bootstrap/js/dropdown.js \
public/js/vendor/bootstrap/js/tooltip.js \ public/js/vendor/bootstrap/js/tooltip.js \
public/js/vendor/bootstrap/js/transition.js \ public/js/vendor/bootstrap/js/transition.js \
public/js/vendor/bootstrap/js/collapse.js \ public/js/vendor/bootstrap/js/collapse.js \
public/js/vendor/bootstrap/js/tab.js \
public/js/vendor/bootstrap/js/popover.js \
public/js/vendor/flot/jquery.flot.js \ public/js/vendor/flot/jquery.flot.js \
public/js/vendor/flot/jquery.flot.dashes.js \ public/js/vendor/flot/jquery.flot.dashes.js \
public/js/vendor/flot/jquery.flot.time.js \ public/js/vendor/flot/jquery.flot.time.js \
public/js/vendor/flot/jquery.flot.selection.js \ public/js/vendor/flot/jquery.flot.selection.js \
public/js/vendor/flot/jquery.flot.resize.js \ public/js/vendor/flot/jquery.flot.resize.js \
public/js/vendor/helpers/html2canvas.min.js \
public/js/site.js \ public/js/site.js \
-o ./public/js/site.min.js -o ./public/js/site.min.js
@$(TASK_DONE)
.PHONY: test

125
Makefile.node Normal file
View File

@@ -0,0 +1,125 @@
#
# Node.js Makefile
# ================
#
# Do not update this file manually it's maintained separately on GitHub:
# https://github.com/rowanmanning/makefiles/blob/master/Makefile.node
#
# To update to the latest version, run `make update-makefile`.
#
# Meta tasks
# ----------
.PHONY: test
# Useful variables
# ----------------
NPM_BIN = ./node_modules/.bin
export PATH := $(NPM_BIN):$(PATH)
export EXPECTED_COVERAGE := 90
export INTEGRATION_TIMEOUT := 5000
export INTEGRATION_SLOW := 4000
# Output helpers
# --------------
TASK_DONE = echo "$@ done"
# Group tasks
# -----------
all: install ci
ci: verify test
# Install tasks
# -------------
clean:
@git clean -fxd
@$(TASK_DONE)
install: node_modules
@$(TASK_DONE)
node_modules: package.json
@npm prune --production=false
@npm install
@$(TASK_DONE)
# Verify tasks
# ------------
verify: verify-javascript verify-dust verify-spaces
@$(TASK_DONE)
verify-javascript: verify-eslint verify-jshint verify-jscs
@$(TASK_DONE)
verify-dust:
@if [ -e .dustmiterc* ]; then dustmite --path ./view && $(TASK_DONE); fi
verify-eslint:
@if [ -e .eslintrc* ]; then eslint . && $(TASK_DONE); fi
verify-jshint:
@if [ -e .jshintrc* ]; then jshint . && $(TASK_DONE); fi
verify-jscs:
@if [ -e .jscsrc* ]; then jscs . && $(TASK_DONE); fi
verify-spaces:
@if [ -e .editorconfig* ] && [ -x $(NPM_BIN)/lintspaces ]; then \
git ls-files | xargs lintspaces -e .editorconfig && $(TASK_DONE); \
fi
verify-coverage:
@if [ -d coverage ]; then \
if [ -x $(NPM_BIN)/nyc ]; then \
nyc check-coverage --lines $(EXPECTED_COVERAGE) --functions $(EXPECTED_COVERAGE) --branches $(EXPECTED_COVERAGE) && $(TASK_DONE); \
else \
if [ -x $(NPM_BIN)/istanbul ]; then \
istanbul check-coverage --statement $(EXPECTED_COVERAGE) --branch $(EXPECTED_COVERAGE) --function $(EXPECTED_COVERAGE) && $(TASK_DONE); \
fi \
fi \
fi
# Test tasks
# ----------
test: test-unit-coverage verify-coverage test-integration
@$(TASK_DONE)
test-unit:
@if [ -d test/unit ]; then mocha test/unit --recursive && $(TASK_DONE); fi
test-unit-coverage:
@if [ -d test/unit ]; then \
if [ -x $(NPM_BIN)/nyc ]; then \
nyc --reporter=text --reporter=html $(NPM_BIN)/_mocha test/unit --recursive && $(TASK_DONE); \
else \
if [ -x $(NPM_BIN)/istanbul ]; then \
istanbul cover $(NPM_BIN)/_mocha -- test/unit --recursive && $(TASK_DONE); \
else \
make test-unit; \
fi \
fi \
fi
test-integration:
@if [ -d test/integration ]; then mocha test/integration --timeout $(INTEGRATION_TIMEOUT) --slow $(INTEGRATION_SLOW) $(INTEGRATION_FLAGS) && $(TASK_DONE); fi
# Tooling tasks
# -------------
update-makefile:
@curl -s https://raw.githubusercontent.com/rowanmanning/makefiles/master/Makefile.node > Makefile.node
@$(TASK_DONE)

118
README.md
View File

@@ -1,11 +1,20 @@
pa11y-dashboard Pa11y Dashboard
=============== ===============
pa11y-dashboard is a web interface to the [pa11y][pa11y] accessibility reporter; allowing you to focus on *fixing* issues rather than hunting them down. Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter; allowing you to focus on *fixing* issues rather than hunting them down.
**Current Version:** *1.10.0* ![Version][shield-version]
**Build Status:** [![Build Status][travis-img]][travis] [![Node.js version support][shield-node]][info-node]
**Node Version Support:** *0.10* [![Build status][shield-build]][info-build]
[![GPL-3.0 licensed][shield-license]][info-license]
---
## Latest news from Pa11y
✨ 🔜 ✨ The Pa11y team is very excited to announce plans for the successor to Pa11y Dashboard and Pa11y Webservice, codename "Sidekick". Help us define the features that you want to see by visiting the [proposal][sidekick-proposal]. ✨
---
![dashboard](https://f.cloud.github.com/assets/1225142/1549567/f0361e72-4de8-11e3-8d14-3fe6900cc15d.jpg) ![dashboard](https://f.cloud.github.com/assets/1225142/1549567/f0361e72-4de8-11e3-8d14-3fe6900cc15d.jpg)
@@ -15,13 +24,25 @@ pa11y-dashboard is a web interface to the [pa11y][pa11y] accessibility reporter;
Setup Setup
----- -----
pa11y-dashboard requires [Node.js][node] 0.10+ and [PhantomJS][phantom]. See the [pa11y][pa11y] documentation for detailed instructions on how to install these dependencies on your operating system. Pa11y Dashboard requires [Node.js][node] 4+. See the [Pa11y][pa11y] documentation for detailed instructions on how to install this on your operating system.
You'll also need to have [MongoDB][mongo] installed and running. See the [MongoDB install guide][mongo-install] for more information on this. You'll also need to have [MongoDB][mongo] installed and running. See the [MongoDB install guide][mongo-install] for more information on this.
You'll then need to clone this repo locally and install dependencies with `npm install`. You'll then need to clone this repo locally and install dependencies with `npm install`. Now you need to add some configuration before you can run the application. We can do this in two ways:
Once you have a local clone, you'll need to copy some sample configuration files in order to run the application. From within the repo, run the following commands: ### Option 1: Using Environment Variables
Each configuration can be set with an environment variable rather than a config file. For example to run the application on port `8080` you can use the following:
```sh
PORT=8080 node index.js
```
The [available configurations are documented here](#configurations).
### Option 2: Using Config Files
You'll need to copy and modify different config files depending on your environment (set with `NODE_ENV`):
```sh ```sh
cp config/development.sample.json config/development.json cp config/development.sample.json config/development.json
@@ -29,61 +50,59 @@ cp config/production.sample.json config/production.json
cp config/test.sample.json config/test.json cp config/test.sample.json config/test.json
``` ```
Each of these files defines configurations for a different environment. If you're just running the application locally, then you should be OK with just development configurations. The [available configurations are documented here](#configurations). Each of these files defines configurations for a different environment. If you're just running the application locally, then you should be OK with just development and test configurations. The [available configurations are documented here](#configurations).
Now that you've got your application configured, make sure you have a server running with the `mongod` command in another terminal window. You can then run in each mode with the following commands: Now that you've got your application configured, make sure you have a MongoDB server running with the `mongod` command in another terminal window. You can run in each mode by changing the `NODE_ENV` environment variable:
```sh ```sh
NODE_ENV=production node index.js # Run in production NODE_ENV=development node index.js
NODE_ENV=development node index.js # Run in development
NODE_ENV=test node index.js # Run in test
``` ```
Check the [development instructions](#development) for more information about running locally (and restarting automatically when files change). See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
If you run into problems, check the [troubleshooting guide][troubleshooting].
Configurations Configurations
-------------- --------------
The boot configurations for pa11y-dashboard are as follows. Look at the sample JSON files in the repo for example usage. The boot configurations for Pa11y Dashboard are as follows. Look at the sample JSON files in the repo for example usage.
### port ### port
*(number)* The port to run the application on. *(number)* The port to run the application on. Set via a config file or the `PORT` environment variable.
### noindex ### noindex
*(boolean)* If set to `true` (default), the dashboard will not be indexed by search engines. Set to `false` to allow indexing. *(boolean)* If set to `true` (default), the dashboard will not be indexed by search engines. Set to `false` to allow indexing. Set via a config file or the `NOINDEX` environment variable.
### readonly ### readonly
*(boolean)* If set to `true`, users will not be able to add, delete or run URLs (defaults to `false`). *(boolean)* If set to `true`, users will not be able to add, delete or run URLs (defaults to `false`). Set via a config file or the `READONLY` environment variable.
### siteMessage ### siteMessage
*(string)* A message to display prominently on the site home page. Defaults to `null`. *(string)* A message to display prominently on the site home page. Defaults to `null`.
### webservice ### webservice
This can either be an object containing [pa11y-webservice configurations][pa11y-webservice-config], or a string which is the base URL of a [pa11y-webservice][pa11y-webservice] instance you are running separately. This can either be an object containing [Pa11y Webservice configurations][pa11y-webservice-config], or a string which is the base URL of a [Pa11y Webservice][pa11y-webservice] instance you are running separately. If using environment variables, prefix the webservice vars with `WEBSERVICE_`.
Development Contributing
----------- ------------
To develop pa11y-dashboard, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup). There are many ways to contribute to Pa11y Dashboard, we cover these in the [contributing guide](CONTRIBUTING.md) for this repo.
You'll need to start the application in test mode with: If you're ready to contribute some code, you'll need to clone the repo and get set up as outlined in the [setup guide](#setup). You'll then need to start the application in test mode with:
```sh ```sh
NODE_ENV=test node index.js NODE_ENV=test node index.js
``` ```
Now you'll be able to run the following commands: You'll now be able to run the following commands:
```sh ```sh
make # Run the lint and test tasks together make verify # Verify all of the code (ESLint)
make lint # Run linters with the correct config make test # Run all tests
make test # Run integration tests make test-integration # Run the integration tests
``` ```
Code with lint errors or failing tests will not be accepted, please use the build tools outlined above.
To compile the client-side JavaScript and CSS, you'll need the following commands. Compiled code is committed to the repository. To compile the client-side JavaScript and CSS, you'll need the following commands. Compiled code is committed to the repository.
```sh ```sh
@@ -94,15 +113,29 @@ make uglify # Compile and uglify the client-side JavaScript
Useful Resources Useful Resources
------- -------
* [Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitialOcean][resource-una-k] * [Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean](https://una.im/pa11y-dash/)
* [Monitoring Web Accessibility Compliance With Pa11y Dashboard](https://www.lullabot.com/articles/monitoring-web-accessibility-compliance-with-pa11y-dashboard)
Support and Migration
---------------------
Pa11y Dashboard major versions are normally supported for 6 months after their last minor release. This means that patch-level changes will be added and bugs will be fixed. The table below outlines the end-of-support dates for major versions, and the last minor release for that version.
We also maintain a [migration guide](MIGRATION.md) to help you migrate.
| :grey_question: | Major Version | Last Minor Release | Node.js Versions | Support End Date |
| :-------------- | :------------ | :----------------- | :--------------- | :--------------- |
| :heart: | 2 | N/A | 4+ | N/A |
| :skull: | 1 | 1.12 | 0.106 | 2016-12-05 |
If you're opening issues related to these, please mention the version that the issue relates to.
License License
------- -------
[Copyright 2016 Springer Nature](LICENSE.txt). Pa11y Dashboard is licensed under the [GNU General Public License 3.0][info-license].<br/>
pa11y-dashboard is licensed under the [GNU General Public License 3.0][gpl]. Copyright &copy; 20132017, Team Pa11y
@@ -110,9 +143,18 @@ pa11y-dashboard is licensed under the [GNU General Public License 3.0][gpl].
[mongo]: http://www.mongodb.org/ [mongo]: http://www.mongodb.org/
[mongo-install]: https://docs.mongodb.org/manual/installation/ [mongo-install]: https://docs.mongodb.org/manual/installation/
[node]: http://nodejs.org/ [node]: http://nodejs.org/
[pa11y]: https://github.com/springernature/pa11y [pa11y]: https://github.com/pa11y/pa11y
[pa11y-webservice-config]: https://github.com/springernature/pa11y-webservice#configurations [pa11y-webservice-config]: https://github.com/pa11y/webservice#configurations
[phantom]: http://phantomjs.org/ [phantom]: http://phantomjs.org/
[resource-una-k]: https://una.im/pa11y-dash/ [sidekick-proposal]: https://github.com/pa11y/sidekick/blob/master/PROPOSAL.md
[travis]: https://travis-ci.org/springernature/pa11y-dashboard [travis]: https://travis-ci.org/pa11y/dashboard
[travis-img]: https://travis-ci.org/springernature/pa11y-dashboard.png?branch=master [travis-img]: https://travis-ci.org/pa11y/dashboard.png?branch=master
[troubleshooting]: https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md
[info-license]: LICENSE
[info-node]: package.json
[info-build]: https://travis-ci.org/pa11y/pa11y-dashboard
[shield-license]: https://img.shields.io/badge/license-GPL%203.0-blue.svg
[shield-node]: https://img.shields.io/badge/node.js%20support-46-brightgreen.svg
[shield-version]: https://img.shields.io/badge/version-2.4.0-blue.svg
[shield-build]: https://img.shields.io/travis/pa11y/pa11y-dashboard/master.svg

27
TROUBLESHOOTING.md Normal file
View File

@@ -0,0 +1,27 @@
Troubleshooting
===============
Common issues
-----
* `500` errors or `Could not connect to pa11y-webservice` messages are often related to MongoDB. Ensure that you have the [latest version of MongoDB][mongo-install] installed, and that it's running - it doesn't always start automatically.
* Error messages saying that pa11y-webservice isn't running may be due to dependency installation problems. Try deleting your `pa11y-dashboard/node_modules` directory and running `npm install` again.
Check to see if the issue has been reported
-----
* Check the [issue tracker][issues] for similar issues.
Create an issue
-----
If all else fails, [create an issue][create-issue] and we'll help you. Please include your node.js, Phantom, and MongoDB version numbers, and your operating system.
[issues]: https://github.com/pa11y/dashboard/issues?utf8=%E2%9C%93&q=is%3Aissue
[mongo-install]: https://docs.mongodb.org/manual/installation/
[create-issue]: https://github.com/pa11y/dashboard/issues/new

97
app.js
View File

@@ -1,26 +1,27 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var createClient = require('pa11y-webservice-client-node'); const bodyParser = require('body-parser');
var EventEmitter = require('events').EventEmitter; const compression = require('compression');
var express = require('express'); const createClient = require('pa11y-webservice-client-node');
var hbs = require('express-hbs'); const EventEmitter = require('events').EventEmitter;
var http = require('http'); const express = require('express');
var pkg = require('./package.json'); const hbs = require('express-hbs');
const http = require('http');
const pkg = require('./package.json');
module.exports = initApp; module.exports = initApp;
@@ -28,47 +29,50 @@ module.exports = initApp;
function initApp(config, callback) { function initApp(config, callback) {
config = defaultConfig(config); config = defaultConfig(config);
var webserviceUrl = config.webservice; let webserviceUrl = config.webservice;
if (typeof webserviceUrl === 'object') { if (typeof webserviceUrl === 'object') {
webserviceUrl = 'http://' + webserviceUrl.host + ':' + webserviceUrl.port + '/'; webserviceUrl = `http://${webserviceUrl.host}:${webserviceUrl.port}/`;
} }
var app = new EventEmitter(); const app = new EventEmitter();
app.address = null; app.address = null;
app.express = express(); app.express = express();
app.server = http.createServer(app.express); app.server = http.createServer(app.express);
app.webservice = createClient(webserviceUrl); app.webservice = createClient(webserviceUrl);
// Compression // Compression
app.express.use(express.compress()); app.express.use(compression());
// Public files // Public files
app.express.use(express.static(__dirname + '/public', { app.express.use(express.static(`${__dirname}/public`, {
maxAge: (process.env.NODE_ENV === 'production' ? 604800000 : 0) maxAge: (process.env.NODE_ENV === 'production' ? 604800000 : 0)
})); }));
// General express config // General express config
app.express.disable('x-powered-by'); app.express.disable('x-powered-by');
app.express.use(express.bodyParser()); app.express.use(bodyParser.urlencoded({
extended: true
}));
// View engine // View engine
app.express.set('views', __dirname + '/view'); app.express.engine('html', hbs.express4({
app.express.engine('html', hbs.express3({
extname: '.html', extname: '.html',
contentHelperName: 'content', contentHelperName: 'content',
layoutsDir: __dirname + '/view/layout', layoutsDir: `${__dirname}/view/layout`,
partialsDir: __dirname + '/view/partial', partialsDir: `${__dirname}/view/partial`,
defaultLayout: __dirname + '/view/layout/default' defaultLayout: `${__dirname}/view/layout/default`
})); }));
app.express.set('views', `${__dirname}/view`);
app.express.set('view engine', 'html'); app.express.set('view engine', 'html');
// View helpers // View helpers
require('./view/helper/date')(hbs.registerHelper); require('./view/helper/date')(hbs);
require('./view/helper/string')(hbs.registerHelper); require('./view/helper/string')(hbs);
require('./view/helper/url')(hbs.registerHelper); require('./view/helper/url')(hbs);
require('./view/helper/conditionals')(hbs);
// Populate view locals // Populate view locals
app.express.locals({ app.express.locals = {
lang: 'en', lang: 'en',
year: (new Date()).getFullYear(), year: (new Date()).getFullYear(),
version: pkg.version, version: pkg.version,
@@ -76,12 +80,13 @@ function initApp(config, callback) {
bugtracker: pkg.bugs, bugtracker: pkg.bugs,
noindex: config.noindex, noindex: config.noindex,
readonly: config.readonly, readonly: config.readonly,
siteMessage: config.siteMessage siteMessage: config.siteMessage,
}); settings: {}
};
app.express.use(function(req, res, next) { app.express.use((request, response, next) => {
res.locals.isHomePage = (req.path === '/'); response.locals.isHomePage = (request.path === '/');
res.locals.host = req.host; response.locals.host = request.hostname;
next(); next();
}); });
@@ -100,27 +105,27 @@ function initApp(config, callback) {
} }
// Error handling // Error handling
app.express.get('*', function(req, res) { app.express.get('*', (request, response) => {
res.status(404); response.status(404);
res.render('404'); response.render('404');
}); });
app.express.use(function(err, req, res, next) { app.express.use((error, request, response, next) => {
/* jshint unused: false */ /* eslint no-unused-vars: 'off' */
if (err.code === 'ECONNREFUSED') { if (error.code === 'ECONNREFUSED') {
err = new Error('Could not connect to pa11y-webservice'); error = new Error('Could not connect to Pa11y Webservice');
} }
app.emit('route-error', err); app.emit('route-error', error);
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
res.locals.error = err; response.locals.error = error;
} }
res.status(500); response.status(500);
res.render('500'); response.render('500');
}); });
app.server.listen(config.port, function(err) { app.server.listen(config.port, error => {
var address = app.server.address(); const address = app.server.address();
app.address = 'http://' + address.address + ':' + address.port; app.address = `http://${address.address}:${address.port}`;
callback(err, app); callback(error, app);
}); });
} }

44
config.js Normal file
View File

@@ -0,0 +1,44 @@
// This file is part of Pa11y Dashboard.
//
// Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict';
const fs = require('fs');
const environment = (process.env.NODE_ENV || 'development');
const jsonPath = `./config/${environment}.json`;
const jsPath = `./config/${environment}.js`;
if (fs.existsSync(jsonPath)) {
module.exports = require(jsonPath);
} else if (fs.existsSync(jsPath)) {
module.exports = require(jsPath);
} else {
module.exports = {
port: Number(env('PORT', '4000')),
noindex: env('NOINDEX', 'true') === 'true',
readonly: env('READONLY', 'false') === 'true',
webservice: env('WEBSERVICE_URL', {
database: env('WEBSERVICE_DATABASE', 'mongodb://localhost/pa11y-webservice'),
host: env('WEBSERVICE_HOST', '0.0.0.0'),
port: Number(env('WEBSERVICE_PORT', '3000')),
cron: env('WEBSERVICE_CRON', false)
})
};
}
function env(name, defaultValue) {
const value = process.env[name];
return typeof value === 'string' ? value : defaultValue;
}

8
data/.eslintrc.js Normal file
View File

@@ -0,0 +1,8 @@
'use strict';
// Clone the main config
var config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
// Disable max line length/statements
config.rules['max-len'] = 'off';
config.rules['max-statements'] = 'off';

View File

@@ -1,17 +1,17 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength // jscs:disable maximumLineLength
'use strict'; 'use strict';

608
data/techniques.js Normal file
View File

@@ -0,0 +1,608 @@
// This file is part of Pa11y Dashboard.
//
// Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength
'use strict';
module.exports = getTechniques;
function getTechniques() {
return {
H30: {
title: 'H30: Providing link text that describes the purpose of a link for anchor elements',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H30'
},
H37: {
title: 'H37: Using alt attributes on img elements',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H37'
},
H67: {
title: 'H67: Using null alt text and no title attribute on img elements for images that AT should ignore',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H67'
},
G94: {
title: 'G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G94'
},
H36: {
title: 'H36: Using alt attributes on images used as submit buttons',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H36'
},
H24: {
title: 'H24: Providing text alternatives for the area elements of image maps ',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H24'
},
G73: {
title: 'G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G73'
},
G74: {
title: 'G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G74'
},
H2: {
title: 'H2: Combining adjacent image and text links for the same resource',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H2'
},
H53: {
title: 'H53: Using the body of the object element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H53'
},
G92: {
title: 'G92: Providing long description for non-text content that serves the same purpose and presents the same information',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G92'
},
H35: {
title: 'H35: Providing text alternatives on applet elements ',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H35'
},
G158: {
title: 'G158: Providing an alternative for time-based media for audio-only content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G158'
},
G159: {
title: 'G159: Providing an alternative for time-based media for video-only content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G159'
},
G166: {
title: 'G166: Providing audio that describes the important video content and describing it as such',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G166'
},
G87: {
title: 'G87: Providing closed captions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G87'
},
G93: {
title: 'G93: Providing open (always visible) captions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G93'
},
G69: {
title: 'G69: Providing an alternative for time based media',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G69'
},
G78: {
title: 'G78: Providing a second, user-selectable, audio track that includes audio descriptions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G78'
},
G173: {
title: 'G173: Providing a version of a movie with audio descriptions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G173'
},
G8: {
title: 'G8: Providing a movie with extended audio descriptions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G8'
},
G9: {
title: 'G9: Creating captions for live synchronized media',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G9'
},
G54: {
title: 'G54: Including a sign language interpreter in the video stream',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G54'
},
G81: {
title: 'G81: Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G81'
},
G150: {
title: 'G150: Providing text based alternatives for live audio-only content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G150'
},
G151: {
title: 'G151: Providing a link to a text transcript of a prepared statement or script if the script is followed',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G151'
},
G157: {
title: 'G157: Incorporating a live audio captioning service into a Web page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G157'
},
H42: {
title: 'H42: Using h1-h6 to identify headings',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H42'
},
H93: {
title: 'H93: Ensuring that id attributes are unique on a Web page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H93'
},
H44: {
title: 'H44: Using label elements to associate text labels with form controls',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H44'
},
H65: {
title: 'H65: Using the title attribute to identify form controls when the label element cannot be used',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H65'
},
H49: {
title: 'H49: Using semantic markup to mark emphasized or special text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H49'
},
H63: {
title: 'H63: Using the scope attribute to associate header cells and data cells in data tables',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H63'
},
H43: {
title: 'H43: Using id and headers attributes to associate data cells with header cells in data tables',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H43'
},
H39: {
title: 'H39: Using caption elements to associate data table captions with data tables',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H39'
},
H73: {
title: 'H73: Using the summary attribute of the table element to give an overview of data tables',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H73'
},
H71: {
title: 'H71: Providing a description for groups of form controls using fieldset and legend elements ',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H71'
},
H85: {
title: 'H85: Using OPTGROUP to group OPTION elements inside a SELECT',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H85'
},
H48: {
title: 'H48: Using ol, ul and dl for lists or groups of links',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H48'
},
G141: {
title: 'G141: Organizing a page using headings',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G141'
},
G57: {
title: 'G57: Ordering the content in a meaningful sequence',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G57'
},
G96: {
title: 'G96: Providing textual identification of items that otherwise rely only on sensory information to be understood',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G96'
},
G14: {
title: 'G14: Ensuring that information conveyed by color differences is also available in text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G14'
},
G182: {
title: 'G182: Ensuring that additional visual cues are available when text color differences are used to convey information',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G182'
},
F23: {
title: 'F23: Failure of 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F23'
},
G18: {
title: 'G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G18'
},
G145: {
title: 'G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G145'
},
F24: {
title: 'F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F24'
},
G142: {
title: 'G142: Using a technology that has commonly-available user agents that support zoom',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G142'
},
G140: {
title: 'G140: Separating information and structure from presentation to enable different presentations',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G140'
},
C22: {
title: 'C22: Using CSS to control visual presentation of text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/C22'
},
C30: {
title: 'C30: Using CSS to replace text with images of text and providing user interface controls to switch',
url: 'http://www.w3.org/TR/WCAG20-TECHS/C30'
},
G17: {
title: 'G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G17'
},
G56: {
title: 'G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G56'
},
G148: {
title: 'G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G148'
},
G156: {
title: 'G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G156'
},
G175: {
title: 'G175: Providing a multi color selection tool on the page for foreground and background colors',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G175'
},
H87: {
title: 'G146: Using liquid layout',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G146'
},
C19: {
title: 'C19: Specifying alignment either to the left OR right in CSS',
url: 'http://www.w3.org/TR/WCAG20-TECHS/C19'
},
G172: {
title: 'G172: Providing a mechanism to remove full justification of text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G172'
},
G169: {
title: 'G169: Aligning text on only one side',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G169'
},
G188: {
title: 'G188: Providing a button on the page to increase line spaces and paragraph spaces',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G188'
},
C21: {
title: 'C21: Specifying line spacing in CSS',
url: 'http://www.w3.org/TR/WCAG20-TECHS/C21'
},
SCR20: {
title: 'SCR20: Using both keyboard and other device-specific functions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR20'
},
F10: {
title: 'F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F10'
},
F40: {
title: 'F40: Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F40'
},
F41: {
title: 'F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F41'
},
SCR33: {
title: 'SCR33: Using script to scroll content, and providing a mechanism to pause it',
url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR33'
},
SCR22: {
title: 'SCR22: Using scripts to control blinking and stop it in five seconds or less',
url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR22'
},
G187: {
title: 'G187: Using a technology to include blinking content that can be turned off via the user agent',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G187'
},
G152: {
title: 'G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G152'
},
G186: {
title: 'G186: Using a control in the Web page that stops moving, blinking, or auto-updating content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G186'
},
G191: {
title: 'G191: Providing a link, button, or other mechanism that reloads the page without any blinking content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G191'
},
F4: {
title: 'F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F4'
},
F47: {
title: 'F47: Failure of Success Criterion 2.2.2 due to using the blink element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F47'
},
G5: {
title: 'G5: Allowing users to complete an activity without any time limit',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G5'
},
SCR14: {
title: 'SCR14: Using scripts to make nonessential alerts optional',
url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR14'
},
G105: {
title: 'G105: Saving data so that it can be used after a user re-authenticates',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G105'
},
G181: {
title: 'G181: Encoding user data as hidden or encrypted data in a re-authorization page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G181'
},
G19: {
title: 'G19: Ensuring that no component of the content flashes more than three times in any 1-second period',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G19'
},
G176: {
title: 'G176: Keeping the flashing area small enough',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G176'
},
H64: {
title: 'H64: Using the title attribute of the frame and iframe elements',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H64'
},
G1: {
title: 'G1: Adding a link at the top of each page that goes directly to the main content area',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G1'
},
G123: {
title: 'G123: Adding a link at the beginning of a block of repeated content to go to the end of the block',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G123'
},
G124: {
title: 'G124: Adding links at the top of the page to each area of the content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G124'
},
H69: {
title: 'H69: Providing heading elements at the beginning of each section of content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H69'
},
H25: {
title: 'H25: Providing a title using the title element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H25'
},
H4: {
title: 'H4: Creating a logical tab order through links, form controls, and objects',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H4'
},
H77: {
title: 'H77: Identifying the purpose of a link using link text combined with its enclosing list item',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H77'
},
H78: {
title: 'H78: Identifying the purpose of a link using link text combined with its enclosing paragraph',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H78'
},
H79: {
title: 'H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H79'
},
H80: {
title: 'H80: Identifying the purpose of a link using link text combined with the preceding heading element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H80'
},
H81: {
title: 'H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H81'
},
H33: {
title: 'H33: Supplementing link text with the title attribute',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H33'
},
G125: {
title: 'G125: Providing links to navigate to related Web pages',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G125'
},
G64: {
title: 'G64: Providing a Table of Contents',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G64'
},
G63: {
title: 'G63: Providing a site map',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G63'
},
G161: {
title: 'G161: Providing a search function to help users find content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G161'
},
G126: {
title: 'G126: Providing a list of links to all other Web pages',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G126'
},
G185: {
title: 'G185: Linking to all of the pages on the site from the home page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G185'
},
G130: {
title: 'G130: Providing descriptive headings',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G130'
},
G131: {
title: 'G131: Providing descriptive labels',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G131'
},
G149: {
title: 'G149: Using user interface components that are highlighted by the user agent when they receive focus',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G149'
},
G165: {
title: 'G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G165'
},
G195: {
title: 'G195: Using an author-supplied, highly visible focus indicator',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G195'
},
C15: {
title: 'C15: Using CSS to change the presentation of a user interface component when it receives focus',
url: 'http://www.w3.org/TR/WCAG20-TECHS/C15'
},
SCR31: {
title: 'SCR31: Using script to change the background color or border of the element with focus',
url: 'http://www.w3.org/TR/WCAG20-TECHS/SCR31'
},
H59: {
title: 'H59: Using the link element and navigation tools',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H59'
},
H57: {
title: 'H57: Using language attributes on the html element ',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H57'
},
H58: {
title: 'H58: Using language attributes to identify changes in the human language ',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H58'
},
H40: {
title: 'H40: Using description lists',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H40'
},
H54: {
title: 'H54: Using the dfn element to identify the defining instance of a word',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H54'
},
H60: {
title: 'H60: Using the link element to link to a glossary',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H60'
},
G62: {
title: 'G62: Providing a glossary',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G62'
},
G70: {
title: 'G70: Providing a function to search an online dictionary',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G70'
},
G102: {
title: 'G102: Providing the expansion or explanation of an abbreviation',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G102'
},
G55: {
title: 'G55: Linking to definitions',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G55'
},
H28: {
title: 'H28: Providing definitions for abbreviations by using the abbr element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H28'
},
G97: {
title: 'G97: Providing the first use of an abbreviation immediately before or after the expanded form',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G97'
},
G86: {
title: 'G86: Providing a text summary that can be understood by people with lower secondary education level reading ability',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G86'
},
G103: {
title: 'G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G103'
},
G79: {
title: 'G79: Providing a spoken version of the text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G79'
},
G153: {
title: 'G153: Making the text easier to read',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G153'
},
G160: {
title: 'G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G160'
},
H62: {
title: 'H62: Using the ruby element',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H62'
},
G107: {
title: 'G107: Using \'activate\' rather than \'focus\' as a trigger for changes of context',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G107'
},
H32: {
title: 'H32: Providing submit buttons',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H32'
},
G61: {
title: 'G61: Presenting repeated components in the same relative order each time they appear',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G61'
},
G197: {
title: 'G197: Using labels, names, and text alternatives consistently for content that has the same functionality',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G197'
},
H83: {
title: 'H83: Using the target attribute to open a new window on user request and indicating this in link text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H83'
},
G83: {
title: 'G83: Providing text descriptions to identify required fields that were not completed',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G83'
},
G84: {
title: 'G84: Providing a text description when the user provides information that is not in the list of allowed values',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G84'
},
G85: {
title: 'G85: Providing a text description when user input falls outside the required format or values',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G85'
},
G89: {
title: 'G89: Providing expected data format and example',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G89'
},
G184: {
title: 'G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G184'
},
H90: {
title: 'H90: Indicating required form controls using label or legend',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H90'
},
G177: {
title: 'G177: Providing suggested correction text',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G177'
},
G98: {
title: 'G98: Providing the ability for the user to review and correct answers before submitting',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G98'
},
G99: {
title: 'G99: Providing the ability to recover deleted information',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G99'
},
G155: {
title: 'G155: Providing a checkbox in addition to a submit button',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G155'
},
G164: {
title: 'G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G164'
},
G168: {
title: 'G168: Requesting confirmation to continue with selected action',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G168'
},
G71: {
title: 'G71: Providing a help link on every Web page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G71'
},
G193: {
title: 'G193: Providing help by an assistant in the Web page',
url: 'http://www.w3.org/TR/WCAG20-TECHS/G193'
},
F77: {
title: 'F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID',
url: 'http://www.w3.org/TR/WCAG20-TECHS/F77'
},
H91: {
title: 'H91: Using HTML form controls and links',
url: 'http://www.w3.org/TR/WCAG20-TECHS/H91'
}
};
}

View File

@@ -1,38 +1,41 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var chalk = require('chalk'); const chalk = require('chalk');
var config = require('./config/' + (process.env.NODE_ENV || 'development') + '.json'); const config = require('./config');
process.on('SIGINT', function() { process.on('SIGINT', () => {
console.log('\nGracefully shutting down from SIGINT (Ctrl-C)'); console.log('\nGracefully shutting down from SIGINT (Ctrl-C)');
process.exit(); process.exit();
}); });
require('./app')(config, function(err, app) { require('./app')(config, (error, app) => {
if (error) {
console.error(error.stack);
process.exit(1);
}
console.log(''); console.log('');
console.log(chalk.underline.magenta('pa11y-dashboard started')); console.log(chalk.underline.magenta('Pa11y Dashboard started'));
console.log(chalk.grey('mode: %s'), process.env.NODE_ENV); console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
console.log(chalk.grey('uri: %s'), app.address); console.log(chalk.grey('uri: %s'), app.address);
app.on('route-error', function(err) { app.on('route-error', error => {
var stack = (err.stack ? err.stack.split('\n') : [err.message]); const stack = (error.stack ? error.stack.split('\n') : [error.message]);
var msg = chalk.red(stack.shift()); const msg = chalk.red(stack.shift());
console.error(''); console.error('');
console.error(msg); console.error(msg);
console.error(chalk.grey(stack.join('\n'))); console.error(chalk.grey(stack.join('\n')));
@@ -40,9 +43,14 @@ require('./app')(config, function(err, app) {
// Start the webservice if required // Start the webservice if required
if (typeof config.webservice === 'object') { if (typeof config.webservice === 'object') {
require('pa11y-webservice')(config.webservice, function(err, webservice) { require('pa11y-webservice')(config.webservice, (error, webservice) => {
if (error) {
console.error(error.stack);
process.exit(1);
}
console.log(''); console.log('');
console.log(chalk.underline.cyan('pa11y-webservice started')); console.log(chalk.underline.cyan('Pa11y Webservice started'));
console.log(chalk.grey('mode: %s'), process.env.NODE_ENV); console.log(chalk.grey('mode: %s'), process.env.NODE_ENV);
console.log(chalk.grey('uri: %s'), webservice.server.info.uri); console.log(chalk.grey('uri: %s'), webservice.server.info.uri);
}); });

View File

@@ -1,48 +1,53 @@
{ {
"name": "pa11y-dashboard", "name": "pa11y-dashboard",
"version": "1.10.0", "version": "2.4.0",
"private": true, "private": true,
"description": "Pa11y Dashboard is a visual web interface to the Pa11y accessibility reporter",
"description": "pa11y-dashboard is a visual web interface to the pa11y accessibility reporter", "keywords": [
"keywords": [ "accessibility", "analysis", "report" ], "accessibility",
"contributors": [ "analysis",
"Perry Harlock (http://www.phwebs.co.uk/)", "report"
"Rowan Manning (http://rowanmanning.com/)" ],
], "author": "Team Pa11y",
"contributors": [
"repository": { "Perry Harlock (http://www.phwebs.co.uk/)",
"type": "git", "Rowan Manning (http://rowanmanning.com/)"
"url": "https://github.com/springernature/pa11y-dashboard.git" ],
}, "repository": {
"homepage": "https://github.com/springernature/pa11y-dashboard", "type": "git",
"bugs": "https://github.com/springernature/pa11y-dashboard/issues", "url": "https://github.com/pa11y/dashboard.git"
},
"engines": { "homepage": "https://github.com/pa11y/dashboard",
"node": ">=0.10" "bugs": "https://github.com/pa11y/dashboard/issues",
}, "license": "GPL-3.0",
"dependencies": { "engines": {
"chalk": "~0.2", "node": ">=4"
"express": "~3.4", },
"express-hbs": "~0.2", "dependencies": {
"moment": "~2.2", "body-parser": "~1.17.1",
"pa11y-webservice": "~1.8", "chalk": "~1.1",
"pa11y-webservice-client-node": "~1.1", "compression": "~1.6",
"underscore": "~1.5" "express": "~4.15.2",
}, "express-hbs": "~1.0",
"devDependencies": { "http-headers": "^3.0.1",
"bower": "~1.2", "moment": "~2.15.2",
"jscs": "^2", "pa11y-webservice": "^2.3.0",
"jsdom": "^3", "pa11y-webservice-client-node": "^1.2.1",
"jshint": "^2", "underscore": "~1.8"
"less": "~1.5", },
"mocha": "^2", "devDependencies": {
"proclaim": "^3", "bower": "~1.7",
"request": "~2.27", "cheerio": "~0.20",
"uglify-js": "~2.4" "eslint": "^3.18.0",
}, "less": "~2.7",
"mocha": "^2",
"scripts": { "pa11y-lint-config": "^1.0.0",
"start": "node index.js", "proclaim": "^3",
"test": "make ci" "request": "^2.74",
} "uglify-js": "~2.6"
},
"scripts": {
"start": "node index.js",
"test": "make ci"
}
} }

File diff suppressed because one or more lines are too long

View File

@@ -1,25 +1,27 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
$(document).ready(function(){ $(document).ready(function(){
var data = {}; var data = {};
var standardsList = $('[data-role="standards-list"]'); var standardsList = $('[data-role="standards-list"]');
var standardSelect = $('[data-role="new-task-select"]'); var standardSelect = $('[data-role="new-task-select"]');
var expandLink = $('[data-role="expander"]');
var taskListSelector = $('[data-role="task-list"] a'); var taskListSelector = $('[data-role="task-list"] a');
var detailsCollapse = $('[data-role="details-collapse"]');
var contextPopover = $('[data-role="context-popover"]');
var ruleTooltip = $('[data-role="rule-tooltip"]');
var toTopLinks = $('[data-role="top"]'); var toTopLinks = $('[data-role="top"]');
var zoomResetButton = $('[data-role="zoom-reset"]'); var zoomResetButton = $('[data-role="zoom-reset"]');
var graphContainer = $('[data-role="graph"]'); var graphContainer = $('[data-role="graph"]');
@@ -73,33 +75,26 @@ $(document).ready(function(){
$('body').addClass('custom-legend'); $('body').addClass('custom-legend');
} }
// Toggle appearance of lists of error/warnings/notices // Update details button title by click
expandLink.click( function(){ detailsCollapse.click(function(){
$(this).next().slideToggle('slow', function(){}); $(this).toggleClass('btn_state_collapsed');
if ($(this).hasClass('showing')) {
$(this).find('span.expander').html('+');
$(this).attr('aria-expanded', false);
}
else {
$(this).find('span.expander').html('-');
$(this).attr('aria-expanded', true);
}
$(this).toggleClass('showing');
}); });
$(document).on('keydown.lists', '[data-role="expander"]', function (e) {
var $this = $(this);
var k = e.which || e.keyCode;
if (!/(13|32)/.test(k)) { // Initialize context popovers
return; $(contextPopover).popover({
} container: 'body',
if (k === 13 || k === 32) { placement: 'bottom'
$this.click(); });
}
e.preventDefault(); $(document.body).click(function (e) {
e.stopPropagation(); $(contextPopover).each(function () {
}); if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
if ($(this).data('bs.popover').tip().hasClass('in')) {
$(this).popover('toggle');
}
}
});
});
// Back to top links // Back to top links
toTopLinks.click( function(e){ toTopLinks.click( function(e){
@@ -137,7 +132,7 @@ $(document).ready(function(){
plotGraphData(); plotGraphData();
}); });
$('[data-role="rules-tooltip"]').tooltip(); ruleTooltip.tooltip();
// Function to animate sections // Function to animate sections
function animateSection (sectionName, offset){ function animateSection (sectionName, offset){
@@ -177,6 +172,7 @@ $(document).ready(function(){
function plotGraphData () { function plotGraphData () {
$.plot(graphContainer, getData(), graphOptions); $.plot(graphContainer, getData(), graphOptions);
exportGraph();
} }
function getData() { function getData() {
@@ -207,6 +203,37 @@ $(document).ready(function(){
zoomResetButton.toggleClass('hidden'); zoomResetButton.toggleClass('hidden');
} }
function exportGraph() {
var exportBtn = $('.btn_action_export');
exportBtn.click(function(e) {
e.preventDefault();
var fileName = $('h1').text().toLowerCase().split(' ').join('_');
var date = new Date();
fileName += '_' + date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear();
html2canvas($('.graph').get(0), {
onrendered: function (canvas) {
downloadFile(canvas.toDataURL('image/png'), fileName + '.png');
}
});
});
}
function downloadFile(dataurl, filename) {
var link = document.createElement('a');
link.href = dataurl;
link.setAttribute('download', filename);
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('click', false, true);
link.dispatchEvent(clickEvent);
return false;
}
graphContainer.bind('plotselected', function (event, ranges) { graphContainer.bind('plotselected', function (event, ranges) {
// clamp the zooming to prevent eternal zoom // clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) { if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
@@ -287,7 +314,7 @@ $(document).ready(function(){
var previousPoint = null; var previousPoint = null;
graphContainer.bind('plothover', function (event, pos, item) { graphContainer.bind('plothover', function (event, pos, item) {
if (item) { if (item) {
if (previousPoint != item.dataIndex) { if (previousPoint !== item.dataIndex) {
previousPoint = item.dataIndex; previousPoint = item.dataIndex;
$('[data-role="tooltip"]').remove(); $('[data-role="tooltip"]').remove();
var count = item.datapoint[1].toFixed(0); var count = item.datapoint[1].toFixed(0);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -2,7 +2,6 @@
// Alerts // Alerts
// -------------------------------------------------- // --------------------------------------------------
// Base styles // Base styles
// ------------------------- // -------------------------
@@ -14,22 +13,23 @@
// Headings for larger alerts // Headings for larger alerts
h4 { h4 {
margin-top: 0; margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headingsColor // Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit; color: inherit;
} }
// Provide class for links that match alerts // Provide class for links that match alerts
.alert-link { .alert-link {
font-weight: @alert-link-font-weight; font-weight: @alert-link-font-weight;
} }
// Improve alignment and spacing of inner content // Improve alignment and spacing of inner content
> p, > p,
> ul { > ul {
margin-bottom: 0; margin-bottom: 0;
} }
> p + p { > p + p {
margin-top: 5px; margin-top: 5px;
} }
} }
@@ -38,14 +38,14 @@
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissable { .alert-dismissable {
padding-right: (@alert-padding + 20); padding-right: (@alert-padding + 20);
// Adjust close link position // Adjust close link position
.close { .close {
position: relative; position: relative;
top: -2px; top: -2px;
right: -21px; right: -21px;
color: inherit; color: inherit;
} }
} }
@@ -56,12 +56,15 @@
.alert-success { .alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
} }
.alert-info { .alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
} }
.alert-warning { .alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
} }
.alert-danger { .alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
} }

View File

@@ -2,7 +2,6 @@
// Badges // Badges
// -------------------------------------------------- // --------------------------------------------------
// Base classes // Base classes
.badge { .badge {
display: inline-block; display: inline-block;
@@ -20,7 +19,7 @@
// Empty badges collapse automatically (not available in IE8) // Empty badges collapse automatically (not available in IE8)
&:empty { &:empty {
display: none; display: none;
} }
} }
@@ -28,9 +27,9 @@
a.badge { a.badge {
&:hover, &:hover,
&:focus { &:focus {
color: @badge-link-hover-color; color: @badge-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
} }
@@ -46,6 +45,7 @@ a.list-group-item.active > .badge,
color: @badge-active-color; color: @badge-active-color;
background-color: @badge-active-bg; background-color: @badge-active-bg;
} }
.nav-pills > li > a > .badge { .nav-pills > li > a > .badge {
margin-left: 3px; margin-left: 3px;
} }

View File

@@ -7,49 +7,48 @@
// Buttons ==================================================================== // Buttons ====================================================================
.btn:active { .btn:active {
.box-shadow(none); .box-shadow(none);
} }
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
.box-shadow(none); .box-shadow(none);
} }
// Typography ================================================================= // Typography =================================================================
.text-primary { .text-primary {
color: @brand-primary; color: @brand-primary;
} }
.text-success { .text-success {
color: @brand-success; color: @brand-success;
} }
.text-danger { .text-danger {
color: @brand-danger; color: @brand-danger;
} }
.text-warning { .text-warning {
color: @brand-warning; color: @brand-warning;
} }
.text-info { .text-info {
color: @brand-info; color: @brand-info;
} }
// Tables ===================================================================== // Tables =====================================================================
.table { .table {
tr.success,
tr.success, tr.warning,
tr.warning, tr.danger {
tr.danger { color: #fff;
color: #fff; }
}
} }
// Forms ====================================================================== // Forms ======================================================================
.form-control,textarea.form-control, .form-control, textarea.form-control,
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="datetime"], input[type="datetime"],
@@ -65,111 +64,109 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
border-width: 2px; border-width: 2px;
.box-shadow(none); .box-shadow(none);
&:focus { &:focus {
.box-shadow(none); .box-shadow(none);
} }
} }
.has-warning { .has-warning {
.help-block, .help-block,
.control-label { .control-label {
color: @brand-warning; color: @brand-warning;
} }
.form-control, .form-control,
.form-control:focus { .form-control:focus {
border: 2px solid @brand-warning; border: 2px solid @brand-warning;
} }
} }
.has-error { .has-error {
.help-block, .help-block,
.control-label { .control-label {
color: @brand-danger; color: @brand-danger;
} }
.form-control, .form-control,
.form-control:focus { .form-control:focus {
border: 2px solid @brand-danger; border: 2px solid @brand-danger;
} }
} }
.has-success { .has-success {
.help-block, .help-block,
.control-label { .control-label {
color: @brand-success; color: @brand-success;
} }
.form-control, .form-control,
.form-control:focus { .form-control:focus {
border: 2px solid @brand-success; border: 2px solid @brand-success;
} }
} }
// Navs ======================================================================= // Navs =======================================================================
.pagination { .pagination {
a {
a { color: #fff;
color: #fff;
&:hover { &:hover {
color: @text-color; color: @text-color;
}
} }
}
.disabled { .disabled {
&>a, & > a,
&>a:hover, & > a:hover,
&>a:focus, & > a:focus,
&>span { & > span {
background-color: lighten(@brand-success, 15%); background-color: lighten(@brand-success, 15%);
}
} }
}
} }
.pager { .pager {
a { a {
color: #fff; color: #fff;
&:hover { &:hover {
color: @text-color; color: @text-color;
}
} }
}
.disabled { .disabled {
&>a, & > a,
&>a:hover, & > a:hover,
&>a:focus, & > a:focus,
&>span { & > span {
background-color: lighten(@brand-success, 15%); background-color: lighten(@brand-success, 15%);
}
} }
}
} }
// Indicators ================================================================= // Indicators =================================================================
.alert { .alert {
a,
a, .alert-link {
.alert-link { color: #fff;
color: #fff; text-decoration: underline;
text-decoration: underline; }
}
} }
// Progress bars ============================================================== // Progress bars ==============================================================
.progress { .progress {
height: 10px; height: 10px;
.box-shadow(none); .box-shadow(none);
} }
// Containers ================================================================= // Containers =================================================================
.well { .well {
.box-shadow(none); .box-shadow(none);
border-width: 0; border-width: 0;
} }

View File

@@ -2,7 +2,6 @@
// Breadcrumbs // Breadcrumbs
// -------------------------------------------------- // --------------------------------------------------
.breadcrumb { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
@@ -10,14 +9,14 @@
background-color: @breadcrumb-bg; background-color: @breadcrumb-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
> li { > li {
display: inline-block; display: inline-block;
&+li:before { & + li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px; padding: 0 5px;
color: @breadcrumb-color; color: @breadcrumb-color;
} }
} }
> .active { > .active {
color: @breadcrumb-active-color; color: @breadcrumb-active-color;
} }
} }

View File

@@ -8,28 +8,31 @@
.caret { .caret {
.btn-default & { .btn-default & {
border-top-color: @btn-default-color; border-top-color: @btn-default-color;
} }
.btn-primary &, .btn-primary &,
.btn-success &, .btn-success &,
.btn-warning &, .btn-warning &,
.btn-danger &, .btn-danger &,
.btn-info & { .btn-info & {
border-top-color: #fff; border-top-color: #fff;
} }
} }
.dropup { .dropup {
& .btn-default .caret { & .btn-default .caret {
border-bottom-color: @btn-default-color; border-bottom-color: @btn-default-color;
} }
.btn-primary, .btn-primary,
.btn-success, .btn-success,
.btn-warning, .btn-warning,
.btn-danger, .btn-danger,
.btn-info { .btn-info {
.caret { .caret {
border-bottom-color: #fff; border-bottom-color: #fff;
} }
} }
} }
@@ -40,19 +43,19 @@
display: inline-block; display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above vertical-align: middle; // match .btn alignment given font-size hack above
> .btn { > .btn {
position: relative; position: relative;
float: left; float: left;
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
z-index: 2; z-index: 2;
} }
&:focus { &:focus {
// Remove focus outline when dropdown JS adds it after closing the menu // Remove focus outline when dropdown JS adds it after closing the menu
outline: none; outline: none;
} }
} }
} }
@@ -62,7 +65,7 @@
.btn + .btn-group, .btn + .btn-group,
.btn-group + .btn, .btn-group + .btn,
.btn-group + .btn-group { .btn-group + .btn-group {
margin-left: -1px; margin-left: -1px;
} }
} }
@@ -71,15 +74,15 @@
.clearfix(); .clearfix();
.btn-group { .btn-group {
float: left; float: left;
} }
// Space out series of button groups // Space out series of button groups
> .btn, > .btn,
> .btn-group { > .btn-group {
+ .btn, + .btn,
+ .btn-group { + .btn-group {
margin-left: 5px; margin-left: 5px;
} }
} }
} }
@@ -91,9 +94,10 @@
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) { &:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0); .border-right-radius(0);
} }
} }
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it // 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 > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) { .btn-group > .dropdown-toggle:not(:first-child) {
@@ -104,15 +108,18 @@
.btn-group > .btn-group { .btn-group > .btn-group {
float: left; float: left;
} }
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; border-radius: 0;
} }
.btn-group > .btn-group:first-child { .btn-group > .btn-group:first-child {
> .btn:last-child, > .btn:last-child,
> .dropdown-toggle { > .dropdown-toggle {
.border-right-radius(0); .border-right-radius(0);
} }
} }
.btn-group > .btn-group:last-child > .btn:first-child { .btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0); .border-left-radius(0);
} }
@@ -123,15 +130,21 @@
outline: 0; outline: 0;
} }
// Sizing // Sizing
// //
// Remix the default button sizing classes into new ones for easier manipulation. // Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { .btn-xs(); } .btn-group-xs > .btn {
.btn-group-sm > .btn { .btn-sm(); } .btn-xs();
.btn-group-lg > .btn { .btn-lg(); } }
.btn-group-sm > .btn {
.btn-sm();
}
.btn-group-lg > .btn {
.btn-lg();
}
// Split button dropdowns // Split button dropdowns
// ---------------------- // ----------------------
@@ -141,6 +154,7 @@
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
} }
.btn-group > .btn-lg + .dropdown-toggle { .btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
@@ -149,82 +163,83 @@
// The clickable button for toggling the menu // The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state // Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
} }
// Reposition the caret // Reposition the caret
.btn .caret { .btn .caret {
margin-left: 0; margin-left: 0;
} }
// Carets in other button sizes // Carets in other button sizes
.btn-lg .caret { .btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0; border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0; border-bottom-width: 0;
} }
// Upside down carets for .dropup // Upside down carets for .dropup
.dropup .btn-lg .caret { .dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large; border-width: 0 @caret-width-large @caret-width-large;
} }
// Vertical button groups // Vertical button groups
// ---------------------- // ----------------------
.btn-group-vertical { .btn-group-vertical {
> .btn, > .btn,
> .btn-group { > .btn-group {
display: block; display: block;
float: none; float: none;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
// Clear floats so dropdown menus can be properly placed // Clear floats so dropdown menus can be properly placed
> .btn-group { > .btn-group {
.clearfix(); .clearfix();
> .btn { > .btn {
float: none; float: none;
} }
} }
> .btn + .btn, > .btn + .btn,
> .btn + .btn-group, > .btn + .btn-group,
> .btn-group + .btn, > .btn-group + .btn,
> .btn-group + .btn-group { > .btn-group + .btn-group {
margin-top: -1px; margin-top: -1px;
margin-left: 0; margin-left: 0;
} }
} }
.btn-group-vertical > .btn { .btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
} }
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
.border-bottom-radius(0); .border-bottom-radius(0);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base; border-bottom-left-radius: @border-radius-base;
.border-top-radius(0); .border-top-radius(0);
} }
} }
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; border-radius: 0;
} }
.btn-group-vertical > .btn-group:first-child { .btn-group-vertical > .btn-group:first-child {
> .btn:last-child, > .btn:last-child,
> .dropdown-toggle { > .dropdown-toggle {
.border-bottom-radius(0); .border-bottom-radius(0);
} }
} }
.btn-group-vertical > .btn-group:last-child > .btn:first-child { .btn-group-vertical > .btn-group:last-child > .btn:first-child {
.border-top-radius(0); .border-top-radius(0);
} }
// Justified button groups // Justified button groups
// ---------------------- // ----------------------
@@ -233,14 +248,14 @@
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: separate; border-collapse: separate;
.btn { .btn {
float: none; float: none;
display: table-cell; display: table-cell;
width: 1%; width: 1%;
} }
} }
// Checkbox and radio options // Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] { [data-toggle="buttons"] > .btn > input[type="checkbox"] {

View File

@@ -2,7 +2,6 @@
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
// Base styles // Base styles
// -------------------------------------------------- // --------------------------------------------------
@@ -24,61 +23,64 @@
.user-select(none); .user-select(none);
&:focus { &:focus {
.tab-focus(); .tab-focus();
} }
&:hover, &:hover,
&:focus { &:focus {
color: @btn-default-color; color: @btn-default-color;
text-decoration: none; text-decoration: none;
} }
&:active, &:active,
&.active { &.active {
outline: 0; outline: 0;
background-image: none; background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
} }
&.disabled, &.disabled,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks pointer-events: none; // Future-proof disabling of clicks
.opacity(.65); .opacity(.65);
.box-shadow(none); .box-shadow(none);
} }
} }
// Alternate buttons // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
.btn-default { .btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
} }
.btn-primary { .btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
} }
// Warning appears as orange // Warning appears as orange
.btn-warning { .btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
} }
// Info appears as blue-green // Info appears as blue-green
.btn-info { .btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
} }
// Link buttons // Link buttons
// ------------------------- // -------------------------
@@ -93,32 +95,31 @@
&:active, &:active,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: transparent; background-color: transparent;
.box-shadow(none); .box-shadow(none);
} }
&, &,
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border-color: transparent; border-color: transparent;
} }
&:hover, &:hover,
&:focus { &:focus {
color: @link-hover-color; color: @link-hover-color;
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @btn-link-disabled-color; color: @btn-link-disabled-color;
text-decoration: none; text-decoration: none;
} }
} }
} }
// Button Sizes // Button Sizes
// -------------------------------------------------- // --------------------------------------------------
@@ -126,16 +127,17 @@
// line-height: ensure even-numbered height of button next to large input // line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
} }
.btn-sm, .btn-sm,
.btn-xs { .btn-xs {
// line-height: ensure proper height of button next to small input // line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
} }
.btn-xs { .btn-xs {
padding: 1px 5px; padding: 1px 5px;
} }
// Block button // Block button
// -------------------------------------------------- // --------------------------------------------------
@@ -156,6 +158,6 @@ input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
&.btn-block { &.btn-block {
width: 100%; width: 100%;
} }
} }

View File

@@ -2,7 +2,6 @@
// Carousel // Carousel
// -------------------------------------------------- // --------------------------------------------------
// Wrapper for the slide container and indicators // Wrapper for the slide container and indicators
.carousel { .carousel {
position: relative; position: relative;
@@ -14,49 +13,51 @@
width: 100%; width: 100%;
> .item { > .item {
display: none; display: none;
position: relative; position: relative;
.transition(.6s ease-in-out left); .transition(.6s ease-in-out left);
// Account for jankitude on images // Account for jankitude on images
> img, > img,
> a > img { > a > img {
.img-responsive(); .img-responsive();
line-height: 1; line-height: 1;
} }
} }
> .active, > .active,
> .next, > .next,
> .prev { display: block; } > .prev {
display: block;
}
> .active { > .active {
left: 0; left: 0;
} }
> .next, > .next,
> .prev { > .prev {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
} }
> .next { > .next {
left: 100%; left: 100%;
} }
> .prev { > .prev {
left: -100%; left: -100%;
} }
> .next.left, > .next.left,
> .prev.right { > .prev.right {
left: 0; left: 0;
} }
> .active.left { > .active.left {
left: -100%; left: -100%;
} }
> .active.right { > .active.right {
left: 100%; left: 100%;
} }
} }
@@ -80,20 +81,20 @@
// Set gradients for backgrounds // Set gradients for backgrounds
&.left { &.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
} }
&.right { &.right {
left: auto; left: auto;
right: 0; right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
} }
// Hover/focus state // Hover/focus state
&:hover, &:hover,
&:focus { &:focus {
color: @carousel-control-color; color: @carousel-control-color;
text-decoration: none; text-decoration: none;
.opacity(.9); .opacity(.9);
} }
// Toggles // Toggles
@@ -101,37 +102,41 @@
.icon-next, .icon-next,
.glyphicon-chevron-left, .glyphicon-chevron-left,
.glyphicon-chevron-right { .glyphicon-chevron-right {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 5; z-index: 5;
display: inline-block; display: inline-block;
} }
.icon-prev, .icon-prev,
.glyphicon-chevron-left { .glyphicon-chevron-left {
left: 50%; left: 50%;
} }
.icon-next, .icon-next,
.glyphicon-chevron-right { .glyphicon-chevron-right {
right: 50%; right: 50%;
} }
.icon-prev, .icon-prev,
.icon-next { .icon-next {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -10px; margin-top: -10px;
margin-left: -10px; margin-left: -10px;
font-family: serif; font-family: serif;
} }
.icon-prev { .icon-prev {
&:before { &:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
} }
} }
.icon-next { .icon-next {
&:before { &:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
} }
} }
} }
@@ -152,20 +157,21 @@
text-align: center; text-align: center;
li { li {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
margin: 1px; margin: 1px;
text-indent: -999px; text-indent: -999px;
border: 1px solid @carousel-indicator-border-color; border: 1px solid @carousel-indicator-border-color;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} }
.active { .active {
margin: 0; margin: 0;
width: 12px; width: 12px;
height: 12px; height: 12px;
background-color: @carousel-indicator-active-bg; background-color: @carousel-indicator-active-bg;
} }
} }
@@ -183,38 +189,37 @@
color: @carousel-caption-color; color: @carousel-caption-color;
text-align: center; text-align: center;
text-shadow: @carousel-text-shadow; text-shadow: @carousel-text-shadow;
& .btn { & .btn {
text-shadow: none; // No shadow for button elements in carousel-caption text-shadow: none; // No shadow for button elements in carousel-caption
} }
} }
// Scale up controls for tablets and up // Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) { @media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control { .carousel-control {
.glyphicons-chevron-left, .glyphicons-chevron-left,
.glyphicons-chevron-right, .glyphicons-chevron-right,
.icon-prev, .icon-prev,
.icon-next { .icon-next {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;
margin-left: -15px; margin-left: -15px;
font-size: 30px; font-size: 30px;
} }
} }
// Show and left align the captions // Show and left align the captions
.carousel-caption { .carousel-caption {
left: 20%; left: 20%;
right: 20%; right: 20%;
padding-bottom: 30px; padding-bottom: 30px;
} }
// Move up the indicators // Move up the indicators
.carousel-indicators { .carousel-indicators {
bottom: 20px; bottom: 20px;
} }
} }

View File

@@ -2,7 +2,6 @@
// Close icons // Close icons
// -------------------------------------------------- // --------------------------------------------------
.close { .close {
float: right; float: right;
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
@@ -14,20 +13,20 @@
&:hover, &:hover,
&:focus { &:focus {
color: @close-color; color: @close-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
.opacity(.5); .opacity(.5);
} }
// Additional properties for button version // Additional properties for button version
// iOS requires the button element instead of an anchor tag. // iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`. // If you want the anchor version, it requires `href="#"`.
button& { button& {
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
} }
} }

View File

@@ -2,7 +2,6 @@
// Code (inline and blocK) // Code (inline and blocK)
// -------------------------------------------------- // --------------------------------------------------
// Inline and block code styles // Inline and block code styles
code, code,
kdb, kdb,
@@ -36,12 +35,12 @@ pre {
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
padding: 0; padding: 0;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
white-space: pre-wrap; white-space: pre-wrap;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
} }

View File

@@ -10,17 +10,20 @@
.fade { .fade {
opacity: 0; opacity: 0;
.transition(opacity .15s linear); .transition(opacity .15s linear);
&.in { &.in {
opacity: 1; opacity: 1;
} }
} }
.collapse { .collapse {
display: none; display: none;
&.in { &.in {
display: block; display: block;
} }
} }
.collapsing { .collapsing {
position: relative; position: relative;
height: 0; height: 0;

View File

@@ -2,7 +2,6 @@
// Dropdown menus // Dropdown menus
// -------------------------------------------------- // --------------------------------------------------
// Dropdown arrow/caret // Dropdown arrow/caret
.caret { .caret {
display: inline-block; display: inline-block;
@@ -10,9 +9,9 @@
height: 0; height: 0;
margin-left: 2px; margin-left: 2px;
vertical-align: middle; vertical-align: middle;
border-top: @caret-width-base solid @dropdown-caret-color; border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent; border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this. // we can just straight up remove this.
border-bottom: 0 dotted; border-bottom: 0 dotted;
@@ -46,29 +45,29 @@
border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border; border: 1px solid @dropdown-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175)); .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
background-clip: padding-box; background-clip: padding-box;
// Aligns the dropdown menu to right // Aligns the dropdown menu to right
&.pull-right { &.pull-right {
right: 0; right: 0;
left: auto; left: auto;
} }
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
.nav-divider(@dropdown-divider-bg); .nav-divider(@dropdown-divider-bg);
} }
// Links within the dropdown menu // Links within the dropdown menu
> li > a { > li > a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: @line-height-base; line-height: @line-height-base;
color: @dropdown-link-color; color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines white-space: nowrap; // prevent links from randomly breaking onto new lines
} }
} }
@@ -76,9 +75,9 @@
.dropdown-menu > li > a { .dropdown-menu > li > a {
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: @dropdown-link-hover-color; color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg; background-color: @dropdown-link-hover-bg;
} }
} }
@@ -87,10 +86,10 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @dropdown-link-active-color; color: @dropdown-link-active-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
background-color: @dropdown-link-active-bg; background-color: @dropdown-link-active-bg;
} }
} }
@@ -102,18 +101,19 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @dropdown-link-disabled-color; color: @dropdown-link-disabled-color;
} }
} }
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a { .dropdown-menu > .disabled > a {
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; // Remove CSS gradient background-image: none; // Remove CSS gradient
.reset-filter(); .reset-filter();
cursor: not-allowed; cursor: not-allowed;
} }
} }
@@ -121,12 +121,12 @@
.open { .open {
// Show the menu // Show the menu
> .dropdown-menu { > .dropdown-menu {
display: block; display: block;
} }
// Remove the outline when :focus is triggered // Remove the outline when :focus is triggered
> a { > a {
outline: 0; outline: 0;
} }
} }
@@ -164,30 +164,30 @@
.navbar-fixed-bottom .dropdown { .navbar-fixed-bottom .dropdown {
// Reverse the caret // Reverse the caret
.caret { .caret {
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`. // gets fixed, restore `border-top: 0;`.
border-top: 0 dotted; border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color; border-bottom: 4px solid @dropdown-caret-color;
content: ""; content: "";
} }
// Different positioning for bottom up menu // Different positioning for bottom up menu
.dropdown-menu { .dropdown-menu {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 1px; margin-bottom: 1px;
} }
} }
// Component alignment // Component alignment
// //
// Reiterate per navbar.less and the modified component alignment there. // Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar-right { .navbar-right {
.dropdown-menu { .dropdown-menu {
.pull-right > .dropdown-menu(); .pull-right > .dropdown-menu();
} }
} }
} }

View File

@@ -2,7 +2,6 @@
// Forms // Forms
// -------------------------------------------------- // --------------------------------------------------
// Normalize non-controls // Normalize non-controls
// //
// Restyle and baseline non-control form elements. // Restyle and baseline non-control form elements.
@@ -31,7 +30,6 @@ label {
font-weight: bold; font-weight: bold;
} }
// Normalize form controls // Normalize form controls
// Override content-box in Normalize (* isn't specific enough) // Override content-box in Normalize (* isn't specific enough)
@@ -78,7 +76,7 @@ input[type="checkbox"]:focus {
input[type="number"] { input[type="number"] {
&::-webkit-outer-spin-button, &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button { &::-webkit-inner-spin-button {
height: auto; height: auto;
} }
} }
@@ -100,7 +98,6 @@ output {
.placeholder(); .placeholder();
} }
// Common form controls // Common form controls
// //
// Shared size and type resets for form controls. Apply `.form-control` to any // Shared size and type resets for form controls. Apply `.form-control` to any
@@ -136,7 +133,7 @@ output {
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border; border: 1px solid @input-border;
border-radius: @input-border-radius; border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
@@ -149,17 +146,16 @@ output {
&[disabled], &[disabled],
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
background-color: @input-bg-disabled; background-color: @input-bg-disabled;
} }
// Reset height for `textarea`s // Reset height for `textarea`s
textarea& { textarea& {
height: auto; height: auto;
} }
} }
// Form groups // Form groups
// //
// Designed to help with the organization and spacing of vertical forms. For // Designed to help with the organization and spacing of vertical forms. For
@@ -169,7 +165,6 @@ output {
margin-bottom: 15px; margin-bottom: 15px;
} }
// Checkboxes and radios // Checkboxes and radios
// //
// Indent the labels to position radios/checkboxes as hanging controls. // Indent the labels to position radios/checkboxes as hanging controls.
@@ -182,13 +177,15 @@ output {
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 20px; padding-left: 20px;
vertical-align: middle; vertical-align: middle;
label { label {
display: inline; display: inline;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
} }
} }
.radio input[type="radio"], .radio input[type="radio"],
.radio-inline input[type="radio"], .radio-inline input[type="radio"],
.checkbox input[type="checkbox"], .checkbox input[type="checkbox"],
@@ -196,6 +193,7 @@ output {
float: left; float: left;
margin-left: -20px; margin-left: -20px;
} }
.radio + .radio, .radio + .radio,
.checkbox + .checkbox { .checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@@ -211,6 +209,7 @@ output {
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
} }
.radio-inline + .radio-inline, .radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline { .checkbox-inline + .checkbox-inline {
margin-top: 0; margin-top: 0;
@@ -228,7 +227,7 @@ input[type="checkbox"],
.checkbox-inline { .checkbox-inline {
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@@ -241,7 +240,6 @@ input[type="checkbox"],
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
} }
// Form control feedback states // Form control feedback states
// //
// Apply contextual and semantic states to individual form controls. // Apply contextual and semantic states to individual form controls.
@@ -250,16 +248,17 @@ input[type="checkbox"],
.has-warning { .has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
} }
// Error // Error
.has-error { .has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
} }
// Success // Success
.has-success { .has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg); .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
} }
// Static form control text // Static form control text
// //
// Apply class to a `p` element to make any string of text align with labels in // Apply class to a `p` element to make any string of text align with labels in
@@ -270,7 +269,6 @@ input[type="checkbox"],
padding-top: (@padding-base-vertical + 1); padding-top: (@padding-base-vertical + 1);
} }
// Help text // Help text
// //
// Apply to any element you wish to create light text for placement immediately // Apply to any element you wish to create light text for placement immediately
@@ -283,8 +281,6 @@ input[type="checkbox"],
color: lighten(@text-color, 25%); // lighten the text some for contrast color: lighten(@text-color, 25%); // lighten the text some for contrast
} }
// Inline forms // Inline forms
// //
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -297,67 +293,65 @@ input[type="checkbox"],
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline { .form-inline {
// Kick in the inline // Kick in the inline
@media (min-width: @screen-sm) { @media (min-width: @screen-sm) {
// Inline-block all the things for "inline" // Inline-block all the things for "inline"
.form-group { .form-group {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
// In navbar-form, allow folks to *not* use `.form-group` // In navbar-form, allow folks to *not* use `.form-group`
.form-control { .form-control {
display: inline-block; display: inline-block;
} }
// Remove default margin on radios/checkboxes that were used for stacking, and // Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids // then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio, .radio,
.checkbox { .checkbox {
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; padding-left: 0;
} }
.radio input[type="radio"],
.checkbox input[type="checkbox"] { .radio input[type="radio"],
float: none; .checkbox input[type="checkbox"] {
margin-left: 0; float: none;
} margin-left: 0;
}
} }
} }
// Horizontal forms // Horizontal forms
// //
// Horizontal forms are built on grid classes and allow you to create forms with // Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right. // labels on the left and inputs on the right.
.form-horizontal { .form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes // Consistent vertical alignment of labels, radios, and checkboxes
.control-label, .control-label,
.radio, .radio,
.checkbox, .checkbox,
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border padding-top: (@padding-base-vertical + 1); // Default padding plus a border
} }
// Make form groups behave like rows // Make form groups behave like rows
.form-group { .form-group {
.make-row(); .make-row();
} }
// Only right align form labels here when the columns stop stacking // Only right align form labels here when the columns stop stacking
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
text-align: right; text-align: right;
} }
} }
} }

File diff suppressed because it is too large Load Diff

View File

@@ -2,7 +2,6 @@
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries // Set the container width, and override it for fixed navbars in media queries
.container { .container {
.container-fixed(); .container-fixed();
@@ -66,11 +65,10 @@
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@grid-gutter-width / 2); padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
} }
// Extra small grid // Extra small grid
// //
// Grid classes for extra small devices like smartphones. No offset, push, or // Grid classes for extra small devices like smartphones. No offset, push, or
@@ -92,19 +90,54 @@
.col-xs-11 { .col-xs-11 {
float: left; float: left;
} }
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
.col-xs-1 {
width: percentage((1 / @grid-columns));
}
.col-xs-2 {
width: percentage((2 / @grid-columns));
}
.col-xs-3 {
width: percentage((3 / @grid-columns));
}
.col-xs-4 {
width: percentage((4 / @grid-columns));
}
.col-xs-5 {
width: percentage((5 / @grid-columns));
}
.col-xs-6 {
width: percentage((6 / @grid-columns));
}
.col-xs-7 {
width: percentage((7 / @grid-columns));
}
.col-xs-8 {
width: percentage((8 / @grid-columns));
}
.col-xs-9 {
width: percentage((9 / @grid-columns));
}
.col-xs-10 {
width: percentage((10/ @grid-columns));
}
.col-xs-11 {
width: percentage((11/ @grid-columns));
}
.col-xs-12 {
width: 100%;
}
// Small grid // Small grid
// //
@@ -116,7 +149,7 @@
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.container { .container {
width: @container-sm; width: @container-sm;
} }
.col-sm-1, .col-sm-1,
@@ -130,60 +163,191 @@
.col-sm-9, .col-sm-9,
.col-sm-10, .col-sm-10,
.col-sm-11 { .col-sm-11 {
float: left; float: left;
}
.col-sm-1 {
width: percentage((1 / @grid-columns));
}
.col-sm-2 {
width: percentage((2 / @grid-columns));
}
.col-sm-3 {
width: percentage((3 / @grid-columns));
}
.col-sm-4 {
width: percentage((4 / @grid-columns));
}
.col-sm-5 {
width: percentage((5 / @grid-columns));
}
.col-sm-6 {
width: percentage((6 / @grid-columns));
}
.col-sm-7 {
width: percentage((7 / @grid-columns));
}
.col-sm-8 {
width: percentage((8 / @grid-columns));
}
.col-sm-9 {
width: percentage((9 / @grid-columns));
}
.col-sm-10 {
width: percentage((10/ @grid-columns));
}
.col-sm-11 {
width: percentage((11/ @grid-columns));
}
.col-sm-12 {
width: 100%;
} }
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes // Push and pull columns for source order changes
.col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-1 {
.col-sm-push-2 { left: percentage((2 / @grid-columns)); } left: percentage((1 / @grid-columns));
.col-sm-push-3 { left: percentage((3 / @grid-columns)); } }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); } .col-sm-push-2 {
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); } left: percentage((2 / @grid-columns));
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); } }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); } .col-sm-push-3 {
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); } left: percentage((3 / @grid-columns));
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); } }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); } .col-sm-push-4 {
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); } left: percentage((4 / @grid-columns));
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); } }
.col-sm-push-5 {
left: percentage((5 / @grid-columns));
}
.col-sm-push-6 {
left: percentage((6 / @grid-columns));
}
.col-sm-push-7 {
left: percentage((7 / @grid-columns));
}
.col-sm-push-8 {
left: percentage((8 / @grid-columns));
}
.col-sm-push-9 {
left: percentage((9 / @grid-columns));
}
.col-sm-push-10 {
left: percentage((10/ @grid-columns));
}
.col-sm-push-11 {
left: percentage((11/ @grid-columns));
}
.col-sm-pull-1 {
right: percentage((1 / @grid-columns));
}
.col-sm-pull-2 {
right: percentage((2 / @grid-columns));
}
.col-sm-pull-3 {
right: percentage((3 / @grid-columns));
}
.col-sm-pull-4 {
right: percentage((4 / @grid-columns));
}
.col-sm-pull-5 {
right: percentage((5 / @grid-columns));
}
.col-sm-pull-6 {
right: percentage((6 / @grid-columns));
}
.col-sm-pull-7 {
right: percentage((7 / @grid-columns));
}
.col-sm-pull-8 {
right: percentage((8 / @grid-columns));
}
.col-sm-pull-9 {
right: percentage((9 / @grid-columns));
}
.col-sm-pull-10 {
right: percentage((10/ @grid-columns));
}
.col-sm-pull-11 {
right: percentage((11/ @grid-columns));
}
// Offsets // Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-sm-offset-1 {
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); } margin-left: percentage((1 / @grid-columns));
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); } }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
.col-sm-offset-2 {
margin-left: percentage((2 / @grid-columns));
}
.col-sm-offset-3 {
margin-left: percentage((3 / @grid-columns));
}
.col-sm-offset-4 {
margin-left: percentage((4 / @grid-columns));
}
.col-sm-offset-5 {
margin-left: percentage((5 / @grid-columns));
}
.col-sm-offset-6 {
margin-left: percentage((6 / @grid-columns));
}
.col-sm-offset-7 {
margin-left: percentage((7 / @grid-columns));
}
.col-sm-offset-8 {
margin-left: percentage((8 / @grid-columns));
}
.col-sm-offset-9 {
margin-left: percentage((9 / @grid-columns));
}
.col-sm-offset-10 {
margin-left: percentage((10/ @grid-columns));
}
.col-sm-offset-11 {
margin-left: percentage((11/ @grid-columns));
}
}
// Medium grid // Medium grid
// //
@@ -194,8 +358,9 @@
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
.container { .container {
width: @container-md; width: @container-md;
} }
.col-md-1, .col-md-1,
.col-md-2, .col-md-2,
.col-md-3, .col-md-3,
@@ -207,63 +372,203 @@
.col-md-9, .col-md-9,
.col-md-10, .col-md-10,
.col-md-11 { .col-md-11 {
float: left; float: left;
}
.col-md-1 {
width: percentage((1 / @grid-columns));
}
.col-md-2 {
width: percentage((2 / @grid-columns));
}
.col-md-3 {
width: percentage((3 / @grid-columns));
}
.col-md-4 {
width: percentage((4 / @grid-columns));
}
.col-md-5 {
width: percentage((5 / @grid-columns));
}
.col-md-6 {
width: percentage((6 / @grid-columns));
}
.col-md-7 {
width: percentage((7 / @grid-columns));
}
.col-md-8 {
width: percentage((8 / @grid-columns));
}
.col-md-9 {
width: percentage((9 / @grid-columns));
}
.col-md-10 {
width: percentage((10/ @grid-columns));
}
.col-md-11 {
width: percentage((11/ @grid-columns));
}
.col-md-12 {
width: 100%;
} }
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes // Push and pull columns for source order changes
.col-md-push-0 { left: auto; } .col-md-push-0 {
.col-md-push-1 { left: percentage((1 / @grid-columns)); } left: auto;
.col-md-push-2 { left: percentage((2 / @grid-columns)); } }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; } .col-md-push-1 {
.col-md-pull-1 { right: percentage((1 / @grid-columns)); } left: percentage((1 / @grid-columns));
.col-md-pull-2 { right: percentage((2 / @grid-columns)); } }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); } .col-md-push-2 {
.col-md-pull-5 { right: percentage((5 / @grid-columns)); } left: percentage((2 / @grid-columns));
.col-md-pull-6 { right: percentage((6 / @grid-columns)); } }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); } .col-md-push-3 {
.col-md-pull-9 { right: percentage((9 / @grid-columns)); } left: percentage((3 / @grid-columns));
.col-md-pull-10 { right: percentage((10/ @grid-columns)); } }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
.col-md-push-4 {
left: percentage((4 / @grid-columns));
}
.col-md-push-5 {
left: percentage((5 / @grid-columns));
}
.col-md-push-6 {
left: percentage((6 / @grid-columns));
}
.col-md-push-7 {
left: percentage((7 / @grid-columns));
}
.col-md-push-8 {
left: percentage((8 / @grid-columns));
}
.col-md-push-9 {
left: percentage((9 / @grid-columns));
}
.col-md-push-10 {
left: percentage((10/ @grid-columns));
}
.col-md-push-11 {
left: percentage((11/ @grid-columns));
}
.col-md-pull-0 {
right: auto;
}
.col-md-pull-1 {
right: percentage((1 / @grid-columns));
}
.col-md-pull-2 {
right: percentage((2 / @grid-columns));
}
.col-md-pull-3 {
right: percentage((3 / @grid-columns));
}
.col-md-pull-4 {
right: percentage((4 / @grid-columns));
}
.col-md-pull-5 {
right: percentage((5 / @grid-columns));
}
.col-md-pull-6 {
right: percentage((6 / @grid-columns));
}
.col-md-pull-7 {
right: percentage((7 / @grid-columns));
}
.col-md-pull-8 {
right: percentage((8 / @grid-columns));
}
.col-md-pull-9 {
right: percentage((9 / @grid-columns));
}
.col-md-pull-10 {
right: percentage((10/ @grid-columns));
}
.col-md-pull-11 {
right: percentage((11/ @grid-columns));
}
// Offsets // Offsets
.col-md-offset-0 { margin-left: 0; } .col-md-offset-0 {
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } margin-left: 0;
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
.col-md-offset-1 {
margin-left: percentage((1 / @grid-columns));
}
.col-md-offset-2 {
margin-left: percentage((2 / @grid-columns));
}
.col-md-offset-3 {
margin-left: percentage((3 / @grid-columns));
}
.col-md-offset-4 {
margin-left: percentage((4 / @grid-columns));
}
.col-md-offset-5 {
margin-left: percentage((5 / @grid-columns));
}
.col-md-offset-6 {
margin-left: percentage((6 / @grid-columns));
}
.col-md-offset-7 {
margin-left: percentage((7 / @grid-columns));
}
.col-md-offset-8 {
margin-left: percentage((8 / @grid-columns));
}
.col-md-offset-9 {
margin-left: percentage((9 / @grid-columns));
}
.col-md-offset-10 {
margin-left: percentage((10/ @grid-columns));
}
.col-md-offset-11 {
margin-left: percentage((11/ @grid-columns));
}
}
// Large grid // Large grid
// //
@@ -274,7 +579,7 @@
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.container { .container {
width: @container-lg; width: @container-lg;
} }
.col-lg-1, .col-lg-1,
@@ -288,59 +593,200 @@
.col-lg-9, .col-lg-9,
.col-lg-10, .col-lg-10,
.col-lg-11 { .col-lg-11 {
float: left; float: left;
}
.col-lg-1 {
width: percentage((1 / @grid-columns));
}
.col-lg-2 {
width: percentage((2 / @grid-columns));
}
.col-lg-3 {
width: percentage((3 / @grid-columns));
}
.col-lg-4 {
width: percentage((4 / @grid-columns));
}
.col-lg-5 {
width: percentage((5 / @grid-columns));
}
.col-lg-6 {
width: percentage((6 / @grid-columns));
}
.col-lg-7 {
width: percentage((7 / @grid-columns));
}
.col-lg-8 {
width: percentage((8 / @grid-columns));
}
.col-lg-9 {
width: percentage((9 / @grid-columns));
}
.col-lg-10 {
width: percentage((10/ @grid-columns));
}
.col-lg-11 {
width: percentage((11/ @grid-columns));
}
.col-lg-12 {
width: 100%;
} }
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes // Push and pull columns for source order changes
.col-lg-push-0 { left: auto; } .col-lg-push-0 {
.col-lg-push-1 { left: percentage((1 / @grid-columns)); } left: auto;
.col-lg-push-2 { left: percentage((2 / @grid-columns)); } }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; } .col-lg-push-1 {
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); } left: percentage((1 / @grid-columns));
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); } }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); } .col-lg-push-2 {
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); } left: percentage((2 / @grid-columns));
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); } }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); } .col-lg-push-3 {
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); } left: percentage((3 / @grid-columns));
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); } }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
.col-lg-push-4 {
left: percentage((4 / @grid-columns));
}
.col-lg-push-5 {
left: percentage((5 / @grid-columns));
}
.col-lg-push-6 {
left: percentage((6 / @grid-columns));
}
.col-lg-push-7 {
left: percentage((7 / @grid-columns));
}
.col-lg-push-8 {
left: percentage((8 / @grid-columns));
}
.col-lg-push-9 {
left: percentage((9 / @grid-columns));
}
.col-lg-push-10 {
left: percentage((10/ @grid-columns));
}
.col-lg-push-11 {
left: percentage((11/ @grid-columns));
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-pull-1 {
right: percentage((1 / @grid-columns));
}
.col-lg-pull-2 {
right: percentage((2 / @grid-columns));
}
.col-lg-pull-3 {
right: percentage((3 / @grid-columns));
}
.col-lg-pull-4 {
right: percentage((4 / @grid-columns));
}
.col-lg-pull-5 {
right: percentage((5 / @grid-columns));
}
.col-lg-pull-6 {
right: percentage((6 / @grid-columns));
}
.col-lg-pull-7 {
right: percentage((7 / @grid-columns));
}
.col-lg-pull-8 {
right: percentage((8 / @grid-columns));
}
.col-lg-pull-9 {
right: percentage((9 / @grid-columns));
}
.col-lg-pull-10 {
right: percentage((10/ @grid-columns));
}
.col-lg-pull-11 {
right: percentage((11/ @grid-columns));
}
// Offsets // Offsets
.col-lg-offset-0 { margin-left: 0; } .col-lg-offset-0 {
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } margin-left: 0;
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); } .col-lg-offset-1 {
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); } margin-left: percentage((1 / @grid-columns));
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); } }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); } .col-lg-offset-2 {
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); } margin-left: percentage((2 / @grid-columns));
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.col-lg-offset-3 {
margin-left: percentage((3 / @grid-columns));
}
.col-lg-offset-4 {
margin-left: percentage((4 / @grid-columns));
}
.col-lg-offset-5 {
margin-left: percentage((5 / @grid-columns));
}
.col-lg-offset-6 {
margin-left: percentage((6 / @grid-columns));
}
.col-lg-offset-7 {
margin-left: percentage((7 / @grid-columns));
}
.col-lg-offset-8 {
margin-left: percentage((8 / @grid-columns));
}
.col-lg-offset-9 {
margin-left: percentage((9 / @grid-columns));
}
.col-lg-offset-10 {
margin-left: percentage((10/ @grid-columns));
}
.col-lg-offset-11 {
margin-left: percentage((11/ @grid-columns));
}
} }

View File

@@ -6,88 +6,198 @@
@grid-adjustment: percentage(@grid-gutter-width / @container-md-ie8); @grid-adjustment: percentage(@grid-gutter-width / @container-md-ie8);
.ie7, .ie8 { .ie7, .ie8 {
* { * {
box-sizing: content-box; box-sizing: content-box;
} }
.clearfix {
*zoom: 1;
}
ul, ol {
margin-left:0;
}
.container { .clearfix {
width: @container-md-ie8; *zoom: 1;
} }
.col-md-1, ul, ol {
.col-md-2, margin-left: 0;
.col-md-3, }
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)) - @grid-adjustment; }
.col-md-2 { width: percentage((2 / @grid-columns)) - @grid-adjustment; }
.col-md-3 { width: percentage((3 / @grid-columns)) - @grid-adjustment; }
.col-md-4 { width: percentage((4 / @grid-columns)) - @grid-adjustment; }
.col-md-5 { width: percentage((5 / @grid-columns)) - @grid-adjustment; }
.col-md-6 { width: percentage((6 / @grid-columns)) - @grid-adjustment; }
.col-md-7 { width: percentage((7 / @grid-columns)) - @grid-adjustment; }
.col-md-8 { width: percentage((8 / @grid-columns)) - @grid-adjustment; }
.col-md-9 { width: percentage((9 / @grid-columns)) - @grid-adjustment; }
.col-md-10 { width: percentage((10/ @grid-columns)) - @grid-adjustment; }
.col-md-11 { width: percentage((11/ @grid-columns)) - @grid-adjustment; }
.col-md-12 { width: 100% - @grid-adjustment; }
// Push and pull columns for source order changes .container {
.col-md-push-0 { left: auto; } width: @container-md-ie8;
.col-md-push-1 { left: percentage((1 / @grid-columns)); } }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; } .col-md-1,
.col-md-pull-1 { right: percentage((1 / @grid-columns)); } .col-md-2,
.col-md-pull-2 { right: percentage((2 / @grid-columns)); } .col-md-3,
.col-md-pull-3 { right: percentage((3 / @grid-columns)); } .col-md-4,
.col-md-pull-4 { right: percentage((4 / @grid-columns)); } .col-md-5,
.col-md-pull-5 { right: percentage((5 / @grid-columns)); } .col-md-6,
.col-md-pull-6 { right: percentage((6 / @grid-columns)); } .col-md-7,
.col-md-pull-7 { right: percentage((7 / @grid-columns)); } .col-md-8,
.col-md-pull-8 { right: percentage((8 / @grid-columns)); } .col-md-9,
.col-md-pull-9 { right: percentage((9 / @grid-columns)); } .col-md-10,
.col-md-pull-10 { right: percentage((10/ @grid-columns)); } .col-md-11 {
.col-md-pull-11 { right: percentage((11/ @grid-columns)); } float: left;
}
// Offsets .col-md-1 {
.col-md-offset-0 { margin-left: 0; } width: percentage((1 / @grid-columns)) - @grid-adjustment;
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.clearfix { .col-md-2 {
*zoom: 1; width: percentage((2 / @grid-columns)) - @grid-adjustment;
} }
.col-md-3 {
width: percentage((3 / @grid-columns)) - @grid-adjustment;
}
.col-md-4 {
width: percentage((4 / @grid-columns)) - @grid-adjustment;
}
.col-md-5 {
width: percentage((5 / @grid-columns)) - @grid-adjustment;
}
.col-md-6 {
width: percentage((6 / @grid-columns)) - @grid-adjustment;
}
.col-md-7 {
width: percentage((7 / @grid-columns)) - @grid-adjustment;
}
.col-md-8 {
width: percentage((8 / @grid-columns)) - @grid-adjustment;
}
.col-md-9 {
width: percentage((9 / @grid-columns)) - @grid-adjustment;
}
.col-md-10 {
width: percentage((10/ @grid-columns)) - @grid-adjustment;
}
.col-md-11 {
width: percentage((11/ @grid-columns)) - @grid-adjustment;
}
.col-md-12 {
width: 100% - @grid-adjustment;
}
// Push and pull columns for source order changes
.col-md-push-0 {
left: auto;
}
.col-md-push-1 {
left: percentage((1 / @grid-columns));
}
.col-md-push-2 {
left: percentage((2 / @grid-columns));
}
.col-md-push-3 {
left: percentage((3 / @grid-columns));
}
.col-md-push-4 {
left: percentage((4 / @grid-columns));
}
.col-md-push-5 {
left: percentage((5 / @grid-columns));
}
.col-md-push-6 {
left: percentage((6 / @grid-columns));
}
.col-md-push-7 {
left: percentage((7 / @grid-columns));
}
.col-md-push-8 {
left: percentage((8 / @grid-columns));
}
.col-md-push-9 {
left: percentage((9 / @grid-columns));
}
.col-md-push-10 {
left: percentage((10/ @grid-columns));
}
.col-md-push-11 {
left: percentage((11/ @grid-columns));
}
.col-md-pull-0 {
right: auto;
}
.col-md-pull-1 {
right: percentage((1 / @grid-columns));
}
.col-md-pull-2 {
right: percentage((2 / @grid-columns));
}
.col-md-pull-3 {
right: percentage((3 / @grid-columns));
}
.col-md-pull-4 {
right: percentage((4 / @grid-columns));
}
.col-md-pull-5 {
right: percentage((5 / @grid-columns));
}
.col-md-pull-6 {
right: percentage((6 / @grid-columns));
}
.col-md-pull-7 {
right: percentage((7 / @grid-columns));
}
.col-md-pull-8 {
right: percentage((8 / @grid-columns));
}
.col-md-pull-9 {
right: percentage((9 / @grid-columns));
}
.col-md-pull-10 {
right: percentage((10/ @grid-columns));
}
.col-md-pull-11 {
right: percentage((11/ @grid-columns));
}
// Offsets
.col-md-offset-0 {
margin-left: 0;
}
.col-md-offset-1 {
margin-left: percentage((1 / @grid-columns));
}
.col-md-offset-2 {
margin-left: percentage((2 / @grid-columns));
}
.col-md-offset-3 {
margin-left: percentage((3 / @grid-columns));
}
.col-md-offset-4 {
margin-left: percentage((4 / @grid-columns));
}
.col-md-offset-5 {
margin-left: percentage((5 / @grid-columns));
}
.col-md-offset-6 {
margin-left: percentage((6 / @grid-columns));
}
.col-md-offset-7 {
margin-left: percentage((7 / @grid-columns));
}
.col-md-offset-8 {
margin-left: percentage((8 / @grid-columns));
}
.col-md-offset-9 {
margin-left: percentage((9 / @grid-columns));
}
.col-md-offset-10 {
margin-left: percentage((10/ @grid-columns));
}
.col-md-offset-11 {
margin-left: percentage((11/ @grid-columns));
}
.clearfix {
*zoom: 1;
}
} }

View File

@@ -11,14 +11,14 @@
// Undo padding and float of grid classes // Undo padding and float of grid classes
&.col { &.col {
float: none; float: none;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.form-control { .form-control {
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -29,11 +29,15 @@
.input-group-lg > .form-control, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-sm(); } .input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell // Display as table-cell
// ------------------------- // -------------------------
@@ -43,9 +47,10 @@
display: table-cell; display: table-cell;
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
} }
} }
// Addon and addon wrapper for buttons // Addon and addon wrapper for buttons
.input-group-addon, .input-group-addon,
.input-group-btn { .input-group-btn {
@@ -69,20 +74,20 @@
// Sizing // Sizing
&.input-sm { &.input-sm {
padding: @padding-small-vertical @padding-small-horizontal; padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small; font-size: @font-size-small;
border-radius: @border-radius-small; border-radius: @border-radius-small;
} }
&.input-lg { &.input-lg {
padding: @padding-large-vertical @padding-large-horizontal; padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
border-radius: @border-radius-large; border-radius: @border-radius-large;
} }
// Nuke default margins from checkboxes and radios to vertically center within. // Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin-top: 0; margin-top: 0;
} }
} }
@@ -94,9 +99,11 @@
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0); .border-right-radius(0);
} }
.input-group-addon:first-child { .input-group-addon:first-child {
border-right: 0; border-right: 0;
} }
.input-group .form-control:last-child, .input-group .form-control:last-child,
.input-group-addon:last-child, .input-group-addon:last-child,
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn,
@@ -104,6 +111,7 @@
.input-group-btn:first-child > .btn:not(:first-child) { .input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0); .border-left-radius(0);
} }
.input-group-addon:last-child { .input-group-addon:last-child {
border-left: 0; border-left: 0;
} }
@@ -116,21 +124,22 @@
// Negative margin to only have a 1px border between the two // Negative margin to only have a 1px border between the two
&:first-child > .btn { &:first-child > .btn {
margin-right: -1px; margin-right: -1px;
} }
&:last-child > .btn { &:last-child > .btn {
margin-left: -1px; margin-left: -1px;
} }
} }
.input-group-btn > .btn { .input-group-btn > .btn {
position: relative; position: relative;
// Jankily prevent input button groups from wrapping // Jankily prevent input button groups from wrapping
+ .btn { + .btn {
margin-left: -4px; margin-left: -4px;
} }
// Bring the "active" button to the front // Bring the "active" button to the front
&:hover, &:hover,
&:active { &:active {
z-index: 2; z-index: 2;
} }
} }

View File

@@ -2,7 +2,6 @@
// Jumbotron // Jumbotron
// -------------------------------------------------- // --------------------------------------------------
.jumbotron { .jumbotron {
padding: @jumbotron-padding; padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding; margin-bottom: @jumbotron-padding;
@@ -13,28 +12,29 @@
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
h1 { h1 {
line-height: 1; line-height: 1;
color: @jumbotron-heading-color; color: @jumbotron-heading-color;
} }
p { p {
line-height: 1.4; line-height: 1.4;
} }
.container & { .container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
} }
@media screen and (min-width: @screen-sm-min) { @media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6); padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6); padding-bottom: (@jumbotron-padding * 1.6);
.container & { .container & {
padding-left: (@jumbotron-padding * 2); padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2); padding-right: (@jumbotron-padding * 2);
} }
h1 { h1 {
font-size: (@font-size-base * 4.5); font-size: (@font-size-base * 4.5);
} }
} }
} }

View File

@@ -16,17 +16,17 @@
// Add hover effects, but only for links // Add hover effects, but only for links
&[href] { &[href] {
&:hover, &:hover,
&:focus { &:focus {
color: @label-link-hover-color; color: @label-link-hover-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
} }
// Empty labels collapse automatically (not available in IE8) // Empty labels collapse automatically (not available in IE8)
&:empty { &:empty {
display: none; display: none;
} }
} }

View File

@@ -25,53 +25,53 @@
// Round the first and last items // Round the first and last items
&:first-child { &:first-child {
.border-top-radius(@list-group-border-radius); .border-top-radius(@list-group-border-radius);
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius); .border-bottom-radius(@list-group-border-radius);
} }
// Align badges within list items // Align badges within list items
> .badge { > .badge {
float: right; float: right;
} }
> .badge + .badge { > .badge + .badge {
margin-right: 5px; margin-right: 5px;
} }
// Linked list items // Linked list items
a& { a& {
color: @list-group-link-color; color: @list-group-link-color;
.list-group-item-heading { .list-group-item-heading {
color: @list-group-link-heading-color; color: @list-group-link-heading-color;
} }
// Hover state // Hover state
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @list-group-hover-bg; background-color: @list-group-hover-bg;
} }
} }
// Active class on item itself, not parent // Active class on item itself, not parent
&.active, &.active,
&.active:hover, &.active:hover,
&.active:focus { &.active:focus {
z-index: 2; // Place active items above their siblings for proper border styling z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color; color: @list-group-active-color;
background-color: @list-group-active-bg; background-color: @list-group-active-bg;
border-color: @list-group-active-border; border-color: @list-group-active-border;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {
color: lighten(@list-group-active-bg, 40%); color: lighten(@list-group-active-bg, 40%);
} }
} }
} }
@@ -82,6 +82,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.list-group-item-text { .list-group-item-text {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.3; line-height: 1.3;

View File

@@ -1,12 +1,11 @@
// Core variables and mixins // Core variables and mixins
@import "variables.less"; @import "variables.less";
@import "variables-flatly.less"; /* Bootswatch Flatly theme variables */ @import "variables-flatly.less";
/* Bootswatch Flatly theme variables */
@import "mixins.less"; @import "mixins.less";
// Reset // Reset
@import "normalize.less"; @import "normalize.less";
@import "print.less"; @import "print.less";
// Core CSS // Core CSS
@import "scaffolding.less"; @import "scaffolding.less";
@import "type.less"; @import "type.less";
@@ -15,7 +14,6 @@
@import "tables.less"; @import "tables.less";
@import "forms.less"; @import "forms.less";
@import "buttons.less"; @import "buttons.less";
// Components // Components
@import "component-animations.less"; @import "component-animations.less";
@import "glyphicons.less"; @import "glyphicons.less";
@@ -38,25 +36,20 @@
@import "panels.less"; @import "panels.less";
@import "wells.less"; @import "wells.less";
@import "close.less"; @import "close.less";
// Components w/ JavaScript // Components w/ JavaScript
//@import "modals.less"; //@import "modals.less";
@import "tooltip.less"; @import "tooltip.less";
//@import "popovers.less"; @import "popovers.less";
//@import "carousel.less"; //@import "carousel.less";
// Utility classes // Utility classes
@import "utilities.less"; @import "utilities.less";
@import "responsive-utilities.less"; @import "responsive-utilities.less";
//Bootswatch overrides //Bootswatch overrides
@import "bootswatch.less"; @import "bootswatch.less";
// Site specific // Site specific
@import "site.less"; @import "site.less";
@import "site-nojavascript.less"; @import "site-nojavascript.less";
@import "site-responsive.less"; @import "site-responsive.less";
// Stupid ie // Stupid ie
@import "ie8and.less"; @import "ie8and.less";
@import "site-ie8and.less"; @import "site-ie8and.less";

View File

@@ -2,7 +2,6 @@
// Source: http://stubbornella.org/content/?p=497 // Source: http://stubbornella.org/content/?p=497
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
// ------------------------- // -------------------------
@@ -18,6 +17,7 @@
.media .media { .media .media {
margin-top: 15px; margin-top: 15px;
} }
.media:first-child { .media:first-child {
margin-top: 0; margin-top: 0;
} }
@@ -32,20 +32,18 @@
margin: 0 0 5px; margin: 0 0 5px;
} }
// Media image alignment // Media image alignment
// ------------------------- // -------------------------
.media { .media {
> .pull-left { > .pull-left {
margin-right: 10px; margin-right: 10px;
} }
> .pull-right { > .pull-right {
margin-left: 10px; margin-left: 10px;
} }
} }
// Media list variation // Media list variation
// ------------------------- // -------------------------

View File

@@ -2,7 +2,6 @@
// Mixins // Mixins
// -------------------------------------------------- // --------------------------------------------------
// Utilities // Utilities
// ------------------------- // -------------------------
@@ -19,11 +18,11 @@
.clearfix() { .clearfix() {
&:before, &:before,
&:after { &:after {
content: " "; /* 1 */ content: " "; /* 1 */
display: table; /* 2 */ display: table; /* 2 */
} }
&:after { &:after {
clear: both; clear: both;
} }
} }
@@ -48,16 +47,29 @@
width: @width; width: @width;
height: @height; height: @height;
} }
.square(@size) { .square(@size) {
.size(@size; @size); .size(@size; @size);
} }
// Placeholder text // Placeholder text
.placeholder(@color: @input-color-placeholder) { .placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // Firefox 4-18 &:-moz-placeholder {
&::-moz-placeholder { color: @color; } // Firefox 19+ color: @color;
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ }
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome // Firefox 4-18
&::-moz-placeholder {
color: @color;
}
// Firefox 19+
&:-ms-input-placeholder {
color: @color;
}
// Internet Explorer 10+
&::-webkit-input-placeholder {
color: @color;
}
// Safari and Chrome
} }
// Text overflow // Text overflow
@@ -85,6 +97,7 @@
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
// New mixin to use as of v3.0.1 // New mixin to use as of v3.0.1
.text-hide() { .text-hide() {
font: ~"0/0" a; font: ~"0/0" a;
@@ -94,137 +107,149 @@
border: 0; border: 0;
} }
// CSS3 PROPERTIES // CSS3 PROPERTIES
// -------------------------------------------------- // --------------------------------------------------
// Single side border-radius // Single side border-radius
.border-top-radius(@radius) { .border-top-radius(@radius) {
border-top-right-radius: @radius; border-top-right-radius: @radius;
border-top-left-radius: @radius; border-top-left-radius: @radius;
} }
.border-right-radius(@radius) { .border-right-radius(@radius) {
border-bottom-right-radius: @radius; border-bottom-right-radius: @radius;
border-top-right-radius: @radius; border-top-right-radius: @radius;
} }
.border-bottom-radius(@radius) { .border-bottom-radius(@radius) {
border-bottom-right-radius: @radius; border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius; border-bottom-left-radius: @radius;
} }
.border-left-radius(@radius) { .border-left-radius(@radius) {
border-bottom-left-radius: @radius; border-bottom-left-radius: @radius;
border-top-left-radius: @radius; border-top-left-radius: @radius;
} }
// Drop shadows // Drop shadows
.box-shadow(@shadow) { .box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow; box-shadow: @shadow;
} }
// Transitions // Transitions
.transition(@transition) { .transition(@transition) {
-webkit-transition: @transition; -webkit-transition: @transition;
transition: @transition; transition: @transition;
} }
.transition-property(@transition-property) { .transition-property(@transition-property) {
-webkit-transition-property: @transition-property; -webkit-transition-property: @transition-property;
transition-property: @transition-property; transition-property: @transition-property;
} }
.transition-delay(@transition-delay) { .transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay; -webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay; transition-delay: @transition-delay;
} }
.transition-duration(@transition-duration) { .transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration; -webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration; transition-duration: @transition-duration;
} }
.transition-transform(@transition) { .transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition; -webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition; -moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition; -o-transition: -o-transform @transition;
transition: transform @transition; transition: transform @transition;
} }
// Transformations // Transformations
.rotate(@degrees) { .rotate(@degrees) {
-webkit-transform: rotate(@degrees); -webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9+ -ms-transform: rotate(@degrees); // IE9+
transform: rotate(@degrees); transform: rotate(@degrees);
} }
.scale(@ratio) { .scale(@ratio) {
-webkit-transform: scale(@ratio); -webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9+ -ms-transform: scale(@ratio); // IE9+
transform: scale(@ratio); transform: scale(@ratio);
} }
.translate(@x; @y) { .translate(@x; @y) {
-webkit-transform: translate(@x, @y); -webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+ -ms-transform: translate(@x, @y); // IE9+
transform: translate(@x, @y); transform: translate(@x, @y);
} }
.skew(@x; @y) { .skew(@x; @y) {
-webkit-transform: skew(@x, @y); -webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y); transform: skew(@x, @y);
} }
.translate3d(@x; @y; @z) { .translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z); -webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z);
} }
.rotateX(@degrees) { .rotateX(@degrees) {
-webkit-transform: rotateX(@degrees); -webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9+ -ms-transform: rotateX(@degrees); // IE9+
transform: rotateX(@degrees); transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9+
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin){
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
transform-origin: @origin;
} }
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9+
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
transform-origin: @origin;
}
// Backface visibility // Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms. // Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden` // Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){ .backface-visibility(@visibility) {
-webkit-backface-visibility: @visibility; -webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility; -moz-backface-visibility: @visibility;
backface-visibility: @visibility; backface-visibility: @visibility;
} }
// Box sizing // Box sizing
.box-sizing(@boxmodel) { .box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel; -webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel;
box-sizing: @boxmodel; box-sizing: @boxmodel;
} }
// User select // User select
// For selecting text on the page // For selecting text on the page
.user-select(@select) { .user-select(@select) {
-webkit-user-select: @select; -webkit-user-select: @select;
-moz-user-select: @select; -moz-user-select: @select;
-ms-user-select: @select; // IE10+ -ms-user-select: @select; // IE10+
-o-user-select: @select; -o-user-select: @select;
user-select: @select; user-select: @select;
} }
// Resize anything // Resize anything
@@ -236,21 +261,21 @@
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) { .content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count; -webkit-column-count: @column-count;
-moz-column-count: @column-count; -moz-column-count: @column-count;
column-count: @column-count; column-count: @column-count;
-webkit-column-gap: @column-gap; -webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap; -moz-column-gap: @column-gap;
column-gap: @column-gap; column-gap: @column-gap;
} }
// Optional hyphenation // Optional hyphenation
.hyphens(@mode: auto) { .hyphens(@mode: auto) {
word-wrap: break-word; word-wrap: break-word;
-webkit-hyphens: @mode; -webkit-hyphens: @mode;
-moz-hyphens: @mode; -moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+ -ms-hyphens: @mode; // IE10+
-o-hyphens: @mode; -o-hyphens: @mode;
hyphens: @mode; hyphens: @mode;
} }
// Opacity // Opacity
@@ -261,8 +286,6 @@
filter: ~"alpha(opacity=@{opacity-ie})"; filter: ~"alpha(opacity=@{opacity-ie})";
} }
// GRADIENTS // GRADIENTS
// -------------------------------------------------- // --------------------------------------------------
@@ -273,12 +296,12 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below. // Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down
} }
// Vertical gradient, from top to bottom // Vertical gradient, from top to bottom
@@ -286,48 +309,48 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop. // Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below. // Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down
} }
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) { .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
} }
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat; background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat; background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.radial(@inner-color: #555; @outer-color: #333) { .radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) { .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
} }
} }
@@ -339,8 +362,6 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
} }
// Retina images // Retina images
// //
// Short retina mixin for setting background-image and -size // Short retina mixin for setting background-image and -size
@@ -348,19 +369,12 @@
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}"); background-image: url("@{file-1x}");
@media @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
only screen and (-webkit-min-device-pixel-ratio: 2), background-image: url("@{file-2x}");
only screen and ( min--moz-device-pixel-ratio: 2), background-size: @width-1x @height-1x;
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
} }
} }
// Responsive image // Responsive image
// //
// Keep images from scaling beyond the width of their parents. // Keep images from scaling beyond the width of their parents.
@@ -371,7 +385,6 @@
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
} }
// COMPONENT MIXINS // COMPONENT MIXINS
// -------------------------------------------------- // --------------------------------------------------
@@ -390,17 +403,17 @@
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border; border-color: @border;
& > .panel-heading { & > .panel-heading {
color: @heading-text-color; color: @heading-text-color;
background-color: @heading-bg-color; background-color: @heading-bg-color;
border-color: @heading-border; border-color: @heading-border;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-top-color: @border; border-top-color: @border;
} }
} }
& > .panel-footer { & > .panel-footer {
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-bottom-color: @border; border-bottom-color: @border;
} }
} }
} }
@@ -411,10 +424,10 @@
border-color: @border; border-color: @border;
color: @text-color; color: @text-color;
hr { hr {
border-top-color: darken(@border, 5%); border-top-color: darken(@border, 5%);
} }
.alert-link { .alert-link {
color: darken(@text-color, 10%); color: darken(@text-color, 10%);
} }
} }
@@ -426,25 +439,25 @@
.table > thead > tr, .table > thead > tr,
.table > tbody > tr, .table > tbody > tr,
.table > tfoot > tr { .table > tfoot > tr {
> td.@{state}, > td.@{state},
> th.@{state}, > th.@{state},
&.@{state} > td, &.@{state} > td,
&.@{state} > th { &.@{state} > th {
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
} }
} }
// Hover states for `.table-hover` // Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`. // Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr { .table-hover > tbody > tr {
> td.@{state}:hover, > td.@{state}:hover,
> th.@{state}:hover, > th.@{state}:hover,
&.@{state}:hover > td, &.@{state}:hover > td,
&.@{state}:hover > th { &.@{state}:hover > th {
background-color: darken(@background, 5%); background-color: darken(@background, 5%);
border-color: darken(@border, 5%); border-color: darken(@border, 5%);
} }
} }
} }
@@ -462,26 +475,26 @@
&:active, &:active,
&.active, &.active,
.open .dropdown-toggle& { .open .dropdown-toggle& {
color: @color; color: @color;
background-color: darken(@background, 8%); background-color: darken(@background, 8%);
border-color: darken(@border, 12%); border-color: darken(@border, 12%);
} }
&:active, &:active,
&.active, &.active,
.open .dropdown-toggle& { .open .dropdown-toggle& {
background-image: none; background-image: none;
} }
&.disabled, &.disabled,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
&, &,
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
} }
} }
} }
@@ -498,23 +511,23 @@
// ------------------------- // -------------------------
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li { > li {
> a, > a,
> span { > span {
padding: @padding-vertical @padding-horizontal; padding: @padding-vertical @padding-horizontal;
font-size: @font-size; font-size: @font-size;
} }
&:first-child { &:first-child {
> a, > a,
> span { > span {
.border-left-radius(@border-radius); .border-left-radius(@border-radius);
} }
} }
&:last-child { &:last-child {
> a, > a,
> span { > span {
.border-right-radius(@border-radius); .border-right-radius(@border-radius);
} }
} }
} }
} }
@@ -523,10 +536,10 @@
.label-variant(@color) { .label-variant(@color) {
background-color: @color; background-color: @color;
&[href] { &[href] {
&:hover, &:hover,
&:focus { &:focus {
background-color: darken(@color, 10%); background-color: darken(@color, 10%);
} }
} }
} }
@@ -544,7 +557,7 @@
.progress-bar-variant(@color) { .progress-bar-variant(@color) {
background-color: @color; background-color: @color;
.progress-striped & { .progress-striped & {
#gradient > .striped(); #gradient > .striped();
} }
} }
@@ -553,16 +566,22 @@
// More easily include all the states for responsive-utilities.less. // More easily include all the states for responsive-utilities.less.
.responsive-visibility() { .responsive-visibility() {
display: block !important; display: block !important;
tr& { display: table-row !important; } tr& {
display: table-row !important;
}
th&, th&,
td& { display: table-cell !important; } td& {
display: table-cell !important;
}
} }
.responsive-invisibility() { .responsive-invisibility() {
&, &,
tr&, tr&,
th&, th&,
td& { display: none !important; } td& {
display: none !important;
}
} }
// Grid System // Grid System
@@ -572,14 +591,14 @@
.container-fixed() { .container-fixed() {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-left: (@grid-gutter-width / 2); padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
.clearfix(); .clearfix();
} }
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) { .make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2); margin-left: (@gutter / -2);
margin-right: (@gutter / -2); margin-right: (@gutter / -2);
.clearfix(); .clearfix();
} }
@@ -592,7 +611,7 @@
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
} }
@@ -602,30 +621,32 @@
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the small column offsets // Generate the small column offsets
.make-sm-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@@ -635,30 +656,32 @@
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the medium column offsets // Generate the medium column offsets
.make-md-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-push(@columns) { .make-md-column-push(@columns) {
@media (min-width: @screen-md) { @media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-md-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@@ -668,33 +691,34 @@
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the large column offsets // Generate the large column offsets
.make-lg-column-offset(@columns) { .make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
// Form validation states // Form validation states
// //
@@ -705,23 +729,23 @@
// Color the label and help text // Color the label and help text
.help-block, .help-block,
.control-label { .control-label {
color: @text-color; color: @text-color;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match
.form-control { .form-control {
border-color: @border-color; border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
&:focus { &:focus {
border-color: darken(@border-color, 10%); border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow); .box-shadow(@shadow);
} }
} }
// Set validation states also for addons // Set validation states also for addons
.input-group-addon { .input-group-addon {
color: @text-color; color: @text-color;
border-color: @border-color; border-color: @border-color;
background-color: @background-color; background-color: @background-color;
} }
} }
@@ -741,9 +765,9 @@
.form-control-focus(@color: @input-border-focus) { .form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6); @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus { &:focus {
border-color: @color; border-color: @color;
outline: 0; outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
} }
} }
@@ -761,11 +785,11 @@
border-radius: @border-radius; border-radius: @border-radius;
select& { select& {
height: @input-height; height: @input-height;
line-height: @input-height; line-height: @input-height;
} }
textarea& { textarea& {
height: auto; height: auto;
} }
} }

View File

@@ -11,12 +11,11 @@
.modal-open { .modal-open {
overflow: hidden; overflow: hidden;
// Account for hiding of scrollbar // Account for hiding of scrollbar
body&, body&,
.navbar-fixed-top, .navbar-fixed-top,
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin-right: 15px margin-right: 15px
} }
} }
@@ -34,10 +33,12 @@
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
&.fade .modal-dialog { &.fade .modal-dialog {
.translate(0, -25%); .translate(0, -25%);
.transition-transform(~"0.3s ease-out"); .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog {
.translate(0, 0)
} }
&.in .modal-dialog { .translate(0, 0)}
} }
// Shell div to position the modal with bottom padding // Shell div to position the modal with bottom padding
@@ -56,7 +57,7 @@
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color; border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large; border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5)); .box-shadow(0 3px 9px rgba(0, 0, 0, .5));
background-clip: padding-box; background-clip: padding-box;
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: none; outline: none;
@@ -72,8 +73,12 @@
z-index: (@zindex-modal-background - 10); z-index: (@zindex-modal-background - 10);
background-color: @modal-backdrop-bg; background-color: @modal-backdrop-bg;
// Fade for backdrop // Fade for backdrop
&.fade { .opacity(0); } &.fade {
&.in { .opacity(.5); } .opacity(0);
}
&.in {
.opacity(.5);
}
} }
// Modal header // Modal header
@@ -83,6 +88,7 @@
border-bottom: 1px solid @modal-header-border-color; border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height); min-height: (@modal-title-padding + @modal-title-line-height);
} }
// Close icon // Close icon
.modal-header .close { .modal-header .close {
margin-top: -2px; margin-top: -2px;
@@ -111,29 +117,28 @@
// Properly space out buttons // Properly space out buttons
.btn + .btn { .btn + .btn {
margin-left: 5px; margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
} }
// but override that for button groups // but override that for button groups
.btn-group .btn + .btn { .btn-group .btn + .btn {
margin-left: -1px; margin-left: -1px;
} }
// and override it for block buttons as well // and override it for block buttons as well
.btn-block + .btn-block { .btn-block + .btn-block {
margin-left: 0; margin-left: 0;
} }
} }
// Scale up the modal // Scale up the modal
@media screen and (min-width: @screen-sm-min) { @media screen and (min-width: @screen-sm-min) {
.modal-dialog { .modal-dialog {
width: 600px; width: 600px;
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
} }
.modal-content {
.box-shadow(0 5px 15px rgba(0, 0, 0, .5));
}
} }

View File

@@ -2,7 +2,6 @@
// Navbars // Navbars
// -------------------------------------------------- // --------------------------------------------------
// Wrapper and base class // Wrapper and base class
// //
// Provide a static navbar from which we expand to create full-width, fixed, and // Provide a static navbar from which we expand to create full-width, fixed, and
@@ -19,11 +18,10 @@
.clearfix(); .clearfix();
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius; border-radius: @navbar-border-radius;
} }
} }
// Navbar heading // Navbar heading
// //
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
@@ -33,11 +31,10 @@
.clearfix(); .clearfix();
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
float: left; float: left;
} }
} }
// Navbar collapse (body) // Navbar collapse (body)
// //
// Group your navbar content into this for easy collapsing and expanding across // Group your navbar content into this for easy collapsing and expanding across
@@ -52,46 +49,47 @@
max-height: 340px; max-height: 340px;
overflow-x: visible; overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent; border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
.clearfix(); .clearfix();
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&.in { &.in {
overflow-y: auto; overflow-y: auto;
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
width: auto; width: auto;
border-top: 0; border-top: 0;
box-shadow: none; box-shadow: none;
&.collapse { &.collapse {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
padding-bottom: 0; // Override default setting padding-bottom: 0; // Override default setting
overflow: visible !important; overflow: visible !important;
} }
&.in { &.in {
overflow-y: visible; overflow-y: visible;
} }
// Account for first and last children spacing // Account for first and last children spacing
.navbar-nav.navbar-left:first-child { .navbar-nav.navbar-left:first-child {
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
} }
.navbar-nav.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal; .navbar-nav.navbar-right:last-child {
} margin-right: -@navbar-padding-horizontal;
.navbar-text:last-child { }
margin-right: 0;
} .navbar-text:last-child {
margin-right: 0;
}
} }
} }
// Both navbar header and collapse // Both navbar header and collapse
// //
// When a container is present, change the behavior of the header and collapse. // When a container is present, change the behavior of the header and collapse.
@@ -99,15 +97,14 @@
.container > .navbar-header, .container > .navbar-header,
.container > .navbar-collapse { .container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
} }
// //
// Navbar alignment options // Navbar alignment options
// //
@@ -118,7 +115,7 @@
.navbar-static-top { .navbar-static-top {
border-width: 0 0 1px; border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
border-radius: 0; border-radius: 0;
} }
} }
@@ -132,19 +129,20 @@
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
border-radius: 0; border-radius: 0;
} }
} }
.navbar-fixed-top { .navbar-fixed-top {
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
top: 0; top: 0;
} }
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
margin-bottom: 0; // override .navbar defaults margin-bottom: 0; // override .navbar defaults
} }
// Brand/project name // Brand/project name
.navbar-brand { .navbar-brand {
@@ -154,17 +152,16 @@
line-height: @line-height-computed; line-height: @line-height-computed;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar > .container & { .navbar > .container & {
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
} }
} }
} }
// Navbar toggle // Navbar toggle
// //
// Custom button for toggling the `.navbar-collapse`, powered by the collapse // Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -182,21 +179,20 @@
// Bars // Bars
.icon-bar { .icon-bar {
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
border-radius: 1px; border-radius: 1px;
} }
.icon-bar + .icon-bar { .icon-bar + .icon-bar {
margin-top: 4px; margin-top: 4px;
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
display: none; display: none;
} }
} }
// Navbar nav links // Navbar nav links
// //
// Builds on top of the `.nav` components with it's own modifier class to make // Builds on top of the `.nav` components with it's own modifier class to make
@@ -206,52 +202,51 @@
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a { > li > a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
line-height: @line-height-computed; line-height: @line-height-computed;
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed // Dropdowns get custom display when collapsed
.open .dropdown-menu { .open .dropdown-menu {
position: static; position: static;
float: none; float: none;
width: auto; width: auto;
margin-top: 0; margin-top: 0;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
> li > a, > li > a,
.dropdown-header { .dropdown-header {
padding: 5px 15px 5px 25px; padding: 5px 15px 5px 25px;
} }
> li > a { > li > a {
line-height: @line-height-computed; line-height: @line-height-computed;
&:hover, &:hover,
&:focus { &:focus {
background-image: none; background-image: none;
} }
} }
} }
} }
// Uncollapse the nav // Uncollapse the nav
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
float: left; float: left;
margin: 0; margin: 0;
> li { > li {
float: left; float: left;
> a { > a {
padding-top: ((@navbar-height - @line-height-computed) / 2); padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2);
} }
} }
} }
} }
// Component alignment // Component alignment
// //
// Repurpose the pull utilities as their own navbar utilities to avoid specifity // Repurpose the pull utilities as their own navbar utilities to avoid specifity
@@ -259,10 +254,14 @@
// though so that navbar contents properly stack and align in mobile. // though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); } .navbar-left {
.navbar-right { .pull-right(); } .pull-left();
} }
.navbar-right {
.pull-right();
}
}
// Navbar form // Navbar form
// //
@@ -275,16 +274,16 @@
padding: 10px @navbar-padding-horizontal; padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); @shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
.box-shadow(@shadow); .box-shadow(@shadow);
// Mixin behavior for optimum display // Mixin behavior for optimum display
.form-inline(); .form-inline();
.form-group { .form-group {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
// Vertically center in expanded, horizontal navbar // Vertically center in expanded, horizontal navbar
@@ -292,17 +291,16 @@
// Undo 100% width for pull classes // Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
width: auto; width: auto;
border: 0; border: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.box-shadow(none); .box-shadow(none);
} }
} }
// Dropdown menus // Dropdown menus
// Menu position and menu carets // Menu position and menu carets
@@ -310,6 +308,7 @@
margin-top: 0; margin-top: 0;
.border-top-radius(0); .border-top-radius(0);
} }
// Menu position and menu caret support for dropups via extra dropup class // Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(0); .border-bottom-radius(0);
@@ -322,7 +321,6 @@
right: 0; right: 0;
} }
// Buttons in navbars // Buttons in navbars
// //
// Vertically center a button within a navbar (when *not* in a form). // Vertically center a button within a navbar (when *not* in a form).
@@ -331,7 +329,6 @@
.navbar-vertical-align(@input-height-base); .navbar-vertical-align(@input-height-base);
} }
// Text in navbars // Text in navbars
// //
// Add a class to make any element properly align itself vertically within the navbars. // Add a class to make any element properly align itself vertically within the navbars.
@@ -341,8 +338,8 @@
.navbar-vertical-align(@line-height-computed); .navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
margin-left: @navbar-padding-horizontal; margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal;
} }
} }
@@ -355,131 +352,129 @@
border-color: @navbar-default-border; border-color: @navbar-default-border;
.navbar-brand { .navbar-brand {
color: @navbar-default-brand-color; color: @navbar-default-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-brand-hover-color; color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg; background-color: @navbar-default-brand-hover-bg;
} }
} }
.navbar-text { .navbar-text {
color: @navbar-default-color; color: @navbar-default-color;
} }
.navbar-nav { .navbar-nav {
> li > a { > li > a {
color: @navbar-default-link-color; color: @navbar-default-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-hover-color; color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg; background-color: @navbar-default-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-active-color; color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg; background-color: @navbar-default-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-default-link-disabled-color; color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg; background-color: @navbar-default-link-disabled-bg;
} }
} }
} }
.navbar-toggle { .navbar-toggle {
border-color: @navbar-default-toggle-border-color; border-color: @navbar-default-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-default-toggle-hover-bg; background-color: @navbar-default-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg; background-color: @navbar-default-toggle-icon-bar-bg;
} }
} }
.navbar-collapse, .navbar-collapse,
.navbar-form { .navbar-form {
border-color: @navbar-default-border; border-color: @navbar-default-border;
} }
// Dropdown menu items and carets // Dropdown menu items and carets
.navbar-nav { .navbar-nav {
// Caret should match text color on hover // Caret should match text color on hover
> .dropdown > a:hover .caret, > .dropdown > a:hover .caret,
> .dropdown > a:focus .caret { > .dropdown > a:focus .caret {
border-top-color: @navbar-default-link-hover-color; border-top-color: @navbar-default-link-hover-color;
border-bottom-color: @navbar-default-link-hover-color; border-bottom-color: @navbar-default-link-hover-color;
} }
// Remove background color from open dropdown // Remove background color from open dropdown
> .open > a { > .open > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-default-link-active-bg; background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color; color: @navbar-default-link-active-color;
.caret { .caret {
border-top-color: @navbar-default-link-active-color; border-top-color: @navbar-default-link-active-color;
border-bottom-color: @navbar-default-link-active-color; border-bottom-color: @navbar-default-link-active-color;
} }
} }
} }
> .dropdown > a .caret { > .dropdown > a .caret {
border-top-color: @navbar-default-link-color; border-top-color: @navbar-default-link-color;
border-bottom-color: @navbar-default-link-color; border-bottom-color: @navbar-default-link-color;
} }
@media (max-width: @screen-xs-max) {
@media (max-width: @screen-xs-max) { // Dropdowns get custom display when collapsed
// Dropdowns get custom display when collapsed .open .dropdown-menu {
.open .dropdown-menu { > li > a {
> li > a { color: @navbar-default-link-color;
color: @navbar-default-link-color; &:hover,
&:hover, &:focus {
&:focus { color: @navbar-default-link-hover-color;
color: @navbar-default-link-hover-color; background-color: @navbar-default-link-hover-bg;
background-color: @navbar-default-link-hover-bg; }
} }
} > .active > a {
> .active > a { &,
&, &:hover,
&:hover, &:focus {
&:focus { color: @navbar-default-link-active-color;
color: @navbar-default-link-active-color; background-color: @navbar-default-link-active-bg;
background-color: @navbar-default-link-active-bg; }
} }
} > .disabled > a {
> .disabled > a { &,
&, &:hover,
&:hover, &:focus {
&:focus { color: @navbar-default-link-disabled-color;
color: @navbar-default-link-disabled-color; background-color: @navbar-default-link-disabled-bg;
background-color: @navbar-default-link-disabled-bg; }
} }
} }
} }
}
} }
// Links in navbars // Links in navbars
// //
// Add a class to ensure links outside the navbar nav are colored correctly. // Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link { .navbar-link {
color: @navbar-default-link-color; color: @navbar-default-link-color;
&:hover { &:hover {
color: @navbar-default-link-hover-color; color: @navbar-default-link-hover-color;
} }
} }
} }
@@ -491,131 +486,130 @@
border-color: @navbar-inverse-border; border-color: @navbar-inverse-border;
.navbar-brand { .navbar-brand {
color: @navbar-inverse-brand-color; color: @navbar-inverse-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-brand-hover-color; color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg; background-color: @navbar-inverse-brand-hover-bg;
} }
} }
.navbar-text { .navbar-text {
color: @navbar-inverse-color; color: @navbar-inverse-color;
} }
.navbar-nav { .navbar-nav {
> li > a { > li > a {
color: @navbar-inverse-link-color; color: @navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg; background-color: @navbar-inverse-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-active-color; color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: @navbar-inverse-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-disabled-color; color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg; background-color: @navbar-inverse-link-disabled-bg;
} }
} }
} }
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {
border-color: @navbar-inverse-toggle-border-color; border-color: @navbar-inverse-toggle-border-color;
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-inverse-toggle-hover-bg; background-color: @navbar-inverse-toggle-hover-bg;
} }
.icon-bar { .icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg; background-color: @navbar-inverse-toggle-icon-bar-bg;
} }
} }
.navbar-collapse, .navbar-collapse,
.navbar-form { .navbar-form {
border-color: darken(@navbar-inverse-bg, 7%); border-color: darken(@navbar-inverse-bg, 7%);
} }
// Dropdowns // Dropdowns
.navbar-nav { .navbar-nav {
> .open > a { > .open > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: @navbar-inverse-link-active-bg; background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color; color: @navbar-inverse-link-active-color;
} }
} }
> .dropdown > a:hover .caret { > .dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color; border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color; border-bottom-color: @navbar-inverse-link-hover-color;
} }
> .dropdown > a .caret { > .dropdown > a .caret {
border-top-color: @navbar-inverse-link-color; border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color; border-bottom-color: @navbar-inverse-link-color;
} }
> .open > a { > .open > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
.caret { .caret {
border-top-color: @navbar-inverse-link-active-color; border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color; border-bottom-color: @navbar-inverse-link-active-color;
} }
} }
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .open .dropdown-menu {
> .dropdown-header { > .dropdown-header {
border-color: @navbar-inverse-border; border-color: @navbar-inverse-border;
} }
> li > a { > li > a {
color: @navbar-inverse-link-color; color: @navbar-inverse-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-hover-color; color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg; background-color: @navbar-inverse-link-hover-bg;
} }
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-active-color; color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg; background-color: @navbar-inverse-link-active-bg;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-inverse-link-disabled-color; color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg; background-color: @navbar-inverse-link-disabled-bg;
} }
} }
} }
} }
} }
.navbar-link { .navbar-link {
color: @navbar-inverse-link-color; color: @navbar-inverse-link-color;
&:hover { &:hover {
color: @navbar-inverse-link-hover-color; color: @navbar-inverse-link-hover-color;
} }
} }
} }

View File

@@ -2,7 +2,6 @@
// Navs // Navs
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
// -------------------------------------------------- // --------------------------------------------------
@@ -13,42 +12,42 @@
.clearfix(); .clearfix();
> li { > li {
position: relative; position: relative;
display: block; display: block;
> a { > a {
position: relative; position: relative;
display: block; display: block;
padding: @nav-link-padding; padding: @nav-link-padding;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @nav-link-hover-bg; background-color: @nav-link-hover-bg;
} }
} }
// Disabled state sets text to gray and nukes hover/tab effects // Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a { &.disabled > a {
color: @nav-disabled-link-color; color: @nav-disabled-link-color;
&:hover, &:hover,
&:focus { &:focus {
color: @nav-disabled-link-hover-color; color: @nav-disabled-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }
// Open dropdowns // Open dropdowns
.open > a { .open > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: @nav-link-hover-bg; background-color: @nav-link-hover-bg;
border-color: @link-color; border-color: @link-color;
} }
} }
// Nav dividers (deprecated with v3.0.1) // Nav dividers (deprecated with v3.0.1)
@@ -57,18 +56,17 @@
// we missed it. We don't currently support this anywhere, but in the interest // 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. // of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider { .nav-divider {
.nav-divider(); .nav-divider();
} }
// Prevent IE8 from misplacing imgs // Prevent IE8 from misplacing imgs
// //
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img { > li > a > img {
max-width: none; max-width: none;
} }
} }
// Tabs // Tabs
// ------------------------- // -------------------------
@@ -76,81 +74,78 @@
.nav-tabs { .nav-tabs {
border-bottom: 1px solid @nav-tabs-border-color; border-bottom: 1px solid @nav-tabs-border-color;
> li { > li {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
margin-bottom: -1px; margin-bottom: -1px;
// Actual tabs (as links) // Actual tabs (as links)
> a { > a {
margin-right: 2px; margin-right: 2px;
line-height: @line-height-base; line-height: @line-height-base;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&:hover { &:hover {
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
} }
} }
// Active state, and it's :hover to override normal :hover // Active state, and it's :hover to override normal :hover
&.active > a { &.active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-tabs-active-link-hover-color; color: @nav-tabs-active-link-hover-color;
background-color: @nav-tabs-active-link-hover-bg; background-color: @nav-tabs-active-link-hover-bg;
border: 1px solid @nav-tabs-active-link-hover-border-color; border: 1px solid @nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
} }
} }
} }
// pulling this in mainly for less shorthand // pulling this in mainly for less shorthand
&.nav-justified { &.nav-justified {
.nav-justified(); .nav-justified();
.nav-tabs-justified(); .nav-tabs-justified();
} }
} }
// Pills // Pills
// ------------------------- // -------------------------
.nav-pills { .nav-pills {
> li { > li {
float: left; float: left;
// Links rendered as pills // Links rendered as pills
> a { > a {
border-radius: @nav-pills-border-radius; border-radius: @nav-pills-border-radius;
} }
+ li { + li {
margin-left: 2px; margin-left: 2px;
} }
// Active state // Active state
&.active > a { &.active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-pills-active-link-hover-color; color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg; background-color: @nav-pills-active-link-hover-bg;
} }
} }
} }
} }
// Stacked pills // Stacked pills
.nav-stacked { .nav-stacked {
> li { > li {
float: none; float: none;
+ li { + li {
margin-top: 2px; margin-top: 2px;
margin-left: 0; // no need for this gap between nav items margin-left: 0; // no need for this gap between nav items
} }
} }
} }
// Nav variations // Nav variations
// -------------------------------------------------- // --------------------------------------------------
@@ -161,21 +156,21 @@
width: 100%; width: 100%;
> li { > li {
float: none; float: none;
> a { > a {
text-align: center; text-align: center;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
> li { > li {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
> a { > a {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
} }
@@ -184,31 +179,31 @@
border-bottom: 0; border-bottom: 0;
> li > a { > li > a {
// Override margin from .nav-tabs // Override margin from .nav-tabs
margin-right: 0; margin-right: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
> .active > a, > .active > a,
> .active > a:hover, > .active > a:hover,
> .active > a:focus { > .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color; border: 1px solid @nav-tabs-justified-link-border-color;
} }
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
> li > a { > li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color; border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
} }
> .active > a,
> .active > a:hover, > .active > a,
> .active > a:focus { > .active > a:hover,
border-bottom-color: @nav-tabs-justified-active-link-border-color; > .active > a:focus {
} border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
} }
} }
// Tabbable tabs // Tabbable tabs
// ------------------------- // -------------------------
@@ -222,15 +217,14 @@
.pill-content > .pill-pane { .pill-content > .pill-pane {
display: none; display: none;
} }
.tab-content, .tab-content,
.pill-content { .pill-content {
> .active { > .active {
display: block; display: block;
} }
} }
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@@ -239,6 +233,7 @@
border-top-color: @link-color; border-top-color: @link-color;
border-bottom-color: @link-color; border-bottom-color: @link-color;
} }
.nav a:hover .caret { .nav a:hover .caret {
border-top-color: @link-hover-color; border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color; border-bottom-color: @link-hover-color;

View File

@@ -2,54 +2,53 @@
// Pager pagination // Pager pagination
// -------------------------------------------------- // --------------------------------------------------
.pager { .pager {
padding-left: 0; padding-left: 0;
margin: @line-height-computed 0; margin: @line-height-computed 0;
list-style: none; list-style: none;
text-align: center; text-align: center;
.clearfix(); .clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-radius: @pager-border-radius;
}
> a:hover, li {
> a:focus { display: inline;
text-decoration: none; > a,
background-color: @pagination-hover-bg; > span {
} display: inline-block;
padding: 5px 14px;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-radius: @pager-border-radius;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pagination-hover-bg;
}
} }
.next { .next {
> a, > a,
> span { > span {
float: right; float: right;
} }
} }
.previous { .previous {
> a, > a,
> span { > span {
float: left; float: left;
} }
} }
.disabled { .disabled {
> a, > a,
> a:hover, > a:hover,
> a:focus, > a:focus,
> span { > span {
color: @pager-disabled-color; color: @pager-disabled-color;
background-color: @pagination-bg; background-color: @pagination-bg;
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }

View File

@@ -8,66 +8,66 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
> li { > li {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, > a,
> span { > span {
position: relative; position: relative;
float: left; // Collapse white-space float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal; padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base; line-height: @line-height-base;
text-decoration: none; text-decoration: none;
background-color: @pagination-bg; background-color: @pagination-bg;
border: 1px solid @pagination-border; border: 1px solid @pagination-border;
margin-left: -1px; margin-left: -1px;
} }
&:first-child { &:first-child {
> a, > a,
> span { > span {
margin-left: 0; margin-left: 0;
.border-left-radius(@border-radius-base); .border-left-radius(@border-radius-base);
} }
} }
&:last-child { &:last-child {
> a, > a,
> span { > span {
.border-right-radius(@border-radius-base); .border-right-radius(@border-radius-base);
} }
} }
} }
> li > a, > li > a,
> li > span { > li > span {
&:hover, &:hover,
&:focus { &:focus {
background-color: @pagination-hover-bg; background-color: @pagination-hover-bg;
} }
} }
> .active > a, > .active > a,
> .active > span { > .active > span {
&, &,
&:hover, &:hover,
&:focus { &:focus {
z-index: 2; z-index: 2;
color: @pagination-active-color; color: @pagination-active-color;
background-color: @pagination-active-bg; background-color: @pagination-active-bg;
border-color: @pagination-active-bg; border-color: @pagination-active-bg;
cursor: default; cursor: default;
} }
} }
> .disabled { > .disabled {
> span, > span,
> span:hover, > span:hover,
> span:focus, > span:focus,
> a, > a,
> a:hover, > a:hover,
> a:focus { > a:focus {
color: @pagination-disabled-color; color: @pagination-disabled-color;
background-color: @pagination-bg; background-color: @pagination-bg;
border-color: @pagination-border; border-color: @pagination-border;
cursor: not-allowed; cursor: not-allowed;
} }
} }
} }

View File

@@ -2,14 +2,13 @@
// Panels // Panels
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.panel { .panel {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
background-color: @panel-bg; background-color: @panel-bg;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05)); .box-shadow(0 1px 1px rgba(0, 0, 0, .05));
} }
// Panel contents // Panel contents
@@ -18,7 +17,6 @@
.clearfix(); .clearfix();
} }
// List groups in panels // List groups in panels
// //
// By default, space out list group content from panel headings to account for // By default, space out list group content from panel headings to account for
@@ -26,30 +24,30 @@
.panel { .panel {
> .list-group { > .list-group {
margin-bottom: 0; margin-bottom: 0;
.list-group-item { .list-group-item {
border-width: 1px 0; border-width: 1px 0;
// Remove border radius for top one // Remove border radius for top one
&:first-child { &:first-child {
.border-top-radius(0); .border-top-radius(0);
} }
// But keep it for the last one // But keep it for the last one
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
} }
// Collapse space between when there's no additional content. // Collapse space between when there's no additional content.
.panel-heading + .list-group { .panel-heading + .list-group {
.list-group-item:first-child { .list-group-item:first-child {
border-top-width: 0; border-top-width: 0;
} }
} }
// Tables in panels // Tables in panels
// //
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@@ -58,38 +56,37 @@
.panel { .panel {
> .table, > .table,
> .table-responsive { > .table-responsive {
margin-bottom: 0; margin-bottom: 0;
} }
> .panel-body + .table, > .panel-body + .table,
> .panel-body + .table-responsive { > .panel-body + .table-responsive {
border-top: 1px solid @table-border-color; border-top: 1px solid @table-border-color;
} }
> .table-bordered, > .table-bordered,
> .table-responsive > .table-bordered { > .table-responsive > .table-bordered {
border: 0; border: 0;
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th:first-child, > th:first-child,
> td:first-child { > td:first-child {
border-left: 0; border-left: 0;
} }
> th:last-child, > th:last-child,
> td:last-child { > td:last-child {
border-right: 0; border-right: 0;
} }
&:last-child > th, &:last-child > th,
&:last-child > td { &:last-child > td {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
} }
} }
// Optional heading // Optional heading
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
@@ -103,7 +100,7 @@
margin-bottom: 0; margin-bottom: 0;
font-size: ceil((@font-size-base * 1.125)); font-size: ceil((@font-size-base * 1.125));
> a { > a {
color: inherit; color: inherit;
} }
} }
@@ -115,7 +112,6 @@
.border-bottom-radius(@panel-border-radius - 1); .border-bottom-radius(@panel-border-radius - 1);
} }
// Collapsable panels (aka, accordion) // Collapsable panels (aka, accordion)
// //
// Wrap a series of panels in `.panel-group` to turn them into an accordion with // Wrap a series of panels in `.panel-group` to turn them into an accordion with
@@ -124,45 +120,49 @@
.panel-group { .panel-group {
// Tighten up margin so it's only between panels // Tighten up margin so it's only between panels
.panel { .panel {
margin-bottom: 0; margin-bottom: 0;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
overflow: hidden; // crop contents when collapsed overflow: hidden; // crop contents when collapsed
+ .panel { + .panel {
margin-top: 5px; margin-top: 5px;
} }
} }
.panel-heading { .panel-heading {
border-bottom: 0; border-bottom: 0;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-top: 1px solid @panel-inner-border; border-top: 1px solid @panel-inner-border;
} }
} }
.panel-footer { .panel-footer {
border-top: 0; border-top: 0;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-bottom: 1px solid @panel-inner-border; border-bottom: 1px solid @panel-inner-border;
} }
} }
} }
// Contextual variations // Contextual variations
.panel-default { .panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
} }
.panel-primary { .panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
} }
.panel-success { .panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
} }
.panel-warning { .panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
} }
.panel-danger { .panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
} }
.panel-info { .panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
} }

View File

@@ -2,7 +2,6 @@
// Popovers // Popovers
// -------------------------------------------------- // --------------------------------------------------
.popover { .popover {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -17,16 +16,24 @@
border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color; border: 1px solid @popover-border-color;
border-radius: @border-radius-large; border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2)); .box-shadow(0 5px 10px rgba(0, 0, 0, .2));
// Overrides for proper insertion // Overrides for proper insertion
white-space: normal; white-space: normal;
// Offset the popover to account for the popover arrow // Offset the popover to account for the popover arrow
&.top { margin-top: -10px; } &.top {
&.right { margin-left: 10px; } margin-top: -10px;
&.bottom { margin-top: 10px; } }
&.left { margin-left: -10px; } &.right {
margin-left: 10px;
}
&.bottom {
margin-top: 10px;
}
&.left {
margin-left: -10px;
}
} }
.popover-title { .popover-title {
@@ -51,17 +58,19 @@
.popover .arrow { .popover .arrow {
&, &,
&:after { &:after {
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
} }
.popover .arrow { .popover .arrow {
border-width: @popover-arrow-outer-width; border-width: @popover-arrow-outer-width;
} }
.popover .arrow:after { .popover .arrow:after {
border-width: @popover-arrow-width; border-width: @popover-arrow-width;
content: ""; content: "";
@@ -69,65 +78,64 @@
.popover { .popover {
&.top .arrow { &.top .arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color; border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width; bottom: -@popover-arrow-outer-width;
&:after { &:after {
content: " "; content: " ";
bottom: 1px; bottom: 1px;
margin-left: -@popover-arrow-width; margin-left: -@popover-arrow-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popover-arrow-color; border-top-color: @popover-arrow-color;
} }
} }
&.right .arrow { &.right .arrow {
top: 50%; top: 50%;
left: -@popover-arrow-outer-width; left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
border-left-width: 0; border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color; border-right-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";
left: 1px; left: 1px;
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
border-left-width: 0; border-left-width: 0;
border-right-color: @popover-arrow-color; border-right-color: @popover-arrow-color;
} }
} }
&.bottom .arrow { &.bottom .arrow {
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color; border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width; top: -@popover-arrow-outer-width;
&:after { &:after {
content: " "; content: " ";
top: 1px; top: 1px;
margin-left: -@popover-arrow-width; margin-left: -@popover-arrow-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popover-arrow-color; border-bottom-color: @popover-arrow-color;
} }
} }
&.left .arrow { &.left .arrow {
top: 50%; top: 50%;
right: -@popover-arrow-outer-width; right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color; border-left-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";
right: 1px; right: 1px;
border-right-width: 0; border-right-width: 0;
border-left-color: @popover-arrow-color; border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
} }
} }
} }

View File

@@ -6,95 +6,99 @@
@media print { @media print {
* { * {
text-shadow: none !important; text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
a, a,
a:visited { a:visited {
text-decoration: underline; text-decoration: underline;
} }
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: " (" attr(href) ")";
} }
abbr[title]:after { abbr[title]:after {
content: " (" attr(title) ")"; content: " (" attr(title) ")";
} }
// Don't show links for images, or javascript/internal links // Don't show links for images, or javascript/internal links
.ir a:after, .ir a:after,
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content: ""; content: "";
} }
pre, pre,
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999;
page-break-inside: avoid; page-break-inside: avoid;
} }
thead { thead {
display: table-header-group; // h5bp.com/t display: table-header-group; // h5bp.com/t
} }
tr, tr,
img { img {
page-break-inside: avoid; page-break-inside: avoid;
} }
img { img {
max-width: 100% !important; max-width: 100% !important;
} }
@page { @page {
margin: 2cm .5cm; margin: 2cm .5cm;
} }
p, p,
h2, h2,
h3 { h3 {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
h2, h2,
h3 { h3 {
page-break-after: avoid; page-break-after: avoid;
} }
// Bootstrap components // Bootstrap components
.navbar { .navbar {
display: none; display: none;
}
.table {
td,
th {
background-color: #fff !important;
}
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
} }
.table { .table {
border-collapse: collapse !important; td,
th {
background-color: #fff !important;
}
} }
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered { .table-bordered {
th, th,
td { td {
border: 1px solid #ddd !important; border: 1px solid #ddd !important;
} }
} }
} }

View File

@@ -2,36 +2,49 @@
// Progress bars // Progress bars
// -------------------------------------------------- // --------------------------------------------------
// Bar animations // Bar animations
// ------------------------- // -------------------------
// Webkit // Webkit
@-webkit-keyframes progress-bar-stripes { @-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; } from {
to { background-position: 0 0; } background-position: 40px 0;
}
to {
background-position: 0 0;
}
} }
// Firefox // Firefox
@-moz-keyframes progress-bar-stripes { @-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; } from {
to { background-position: 0 0; } background-position: 40px 0;
}
to {
background-position: 0 0;
}
} }
// Opera // Opera
@-o-keyframes progress-bar-stripes { @-o-keyframes progress-bar-stripes {
from { background-position: 0 0; } from {
to { background-position: 40px 0; } background-position: 0 0;
}
to {
background-position: 40px 0;
}
} }
// Spec and IE10+ // Spec and IE10+
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { background-position: 40px 0; } from {
to { background-position: 0 0; } background-position: 40px 0;
}
to {
background-position: 0 0;
}
} }
// Bar itself // Bar itself
// ------------------------- // -------------------------
@@ -42,7 +55,7 @@
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
background-color: @progress-bg; background-color: @progress-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
} }
// Bar of progress // Bar of progress
@@ -55,7 +68,7 @@
color: @progress-bar-color; color: @progress-bar-color;
text-align: center; text-align: center;
background-color: @progress-bar-bg; background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
.transition(width .6s ease); .transition(width .6s ease);
} }
@@ -68,14 +81,12 @@
// Call animation for the active one // Call animation for the active one
.progress.active .progress-bar { .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite; -webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;
} }
// Variations // Variations
// ------------------------- // -------------------------

View File

@@ -2,7 +2,6 @@
// Responsive: Utility classes // Responsive: Utility classes
// -------------------------------------------------- // --------------------------------------------------
// IE10 in Windows (Phone) 8 // IE10 in Windows (Phone) 8
// //
// Support for responsive views via media queries is kind of borked in IE10, for // Support for responsive views via media queries is kind of borked in IE10, for
@@ -21,7 +20,6 @@
width: device-width; width: device-width;
} }
// Hide from screenreaders and browsers // Hide from screenreaders and browsers
// //
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
@@ -31,176 +29,181 @@
visibility: hidden !important; visibility: hidden !important;
} }
// Visibility utilities // Visibility utilities
.visible-xs { .visible-xs {
.responsive-invisibility(); .responsive-invisibility();
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-visibility();
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
} }
.visible-sm { .visible-sm {
.responsive-invisibility(); .responsive-invisibility();
&.visible-xs { &.visible-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
} }
.visible-md { .visible-md {
.responsive-invisibility(); .responsive-invisibility();
&.visible-xs { &.visible-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
} }
.visible-lg { .visible-lg {
.responsive-invisibility(); .responsive-invisibility();
&.visible-xs { &.visible-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
.hidden-xs { .hidden-xs {
.responsive-visibility(); .responsive-visibility();
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
} }
.hidden-sm { .hidden-sm {
.responsive-visibility(); .responsive-visibility();
&.hidden-xs { &.hidden-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
} }
.hidden-md { .hidden-md {
.responsive-visibility(); .responsive-visibility();
&.hidden-xs { &.hidden-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
} }
.hidden-lg { .hidden-lg {
.responsive-visibility(); .responsive-visibility();
&.hidden-xs { &.hidden-xs {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@@ -211,9 +214,10 @@
@media print { @media print {
.visible-print { .visible-print {
.responsive-visibility(); .responsive-visibility();
} }
.hidden-print { .hidden-print {
.responsive-invisibility(); .responsive-invisibility();
} }
} }

View File

@@ -2,7 +2,6 @@
// Scaffolding // Scaffolding
// -------------------------------------------------- // --------------------------------------------------
// Reset the box-sizing // Reset the box-sizing
*, *,
@@ -11,12 +10,11 @@
.box-sizing(border-box); .box-sizing(border-box);
} }
// Body reset // Body reset
html { html {
font-size: 62.5%; font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
body { body {
@@ -37,7 +35,6 @@ textarea {
line-height: inherit; line-height: inherit;
} }
// Links // Links
a { a {
@@ -46,16 +43,15 @@ a {
&:hover, &:hover,
&:focus { &:focus {
color: @link-hover-color; color: @link-hover-color;
text-decoration: underline; text-decoration: underline;
} }
&:focus { &:focus {
.tab-focus(); .tab-focus();
} }
} }
// Images // Images
img { img {
@@ -92,17 +88,15 @@ img {
border-radius: 50%; // set radius in percents border-radius: 50%; // set radius in percents
} }
// Horizontal rules // Horizontal rules
hr { hr {
margin-top: @line-height-computed; margin-top: @line-height-computed;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
border: 0; border: 0;
border-top: 1px solid @hr-border; border-top: 1px solid @hr-border;
} }
// Only display content to screen readers // Only display content to screen readers
// //
// See: http://a11yproject.com/posts/how-to-hide-content/ // See: http://a11yproject.com/posts/how-to-hide-content/

View File

@@ -1,128 +1,146 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// Making up for the non support of IE8 and IE7 in Bootstrap 3 // Making up for the non support of IE8 and IE7 in Bootstrap 3
.ie7, .ie8 { .ie7, .ie8 {
.legend { .legend {
display: block; display: block;
width: 100%; width: 100%;
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
line-height: inherit; line-height: inherit;
color: @legend-color; color: @legend-color;
border: 0; border: 0;
border-bottom: 1px solid @legend-border-color; border-bottom: 1px solid @legend-border-color;
margin-bottom:20px; margin-bottom: 20px;
}
.tooltip-inner {
background-color: #000;
}
.date {
font-size: 85%;
}
.task-card-link {
min-height: 160px;
}
.series-checkboxes li {
margin-right: 1%;
}
.stat-type {
font-size: floor(@font-size-base * 0.65); // ~10px;
}
.aside .action-buttons .btn {
width: 79%;
}
.pull-right.dropdown-menu {
right: 134px;
}
.run-details .pull-right.dropdown-menu {
right: 64px;
}
.date-selector .btn-full-width {
width: 90%;
}
.filter-toggle {
&:before {
height: 110%;
width: 100%;
left: 0;
top: 0;
} }
.tooltip-inner {
background-color: #000000; input {
width: 92%;
} }
.date {
font-size:85%; .filter-trigger {
} padding-bottom: 0;
.task-card-link {
min-height:160px;
}
.series-checkboxes li {
margin-right:1%;
}
.stat-type {
font-size:floor(@font-size-base * 0.65); // ~10px;
}
.aside .action-buttons .btn {
width:79%;
}
.pull-right.dropdown-menu {
right:134px;
}
.run-details .pull-right.dropdown-menu {
right:64px;
}
.date-selector .btn-full-width {
width:90%;
}
.filter-toggle {
&:before {
height:110%;
width:100%;
left:0;
top:0;
}
input {
width:92%;
}
.filter-trigger {
padding-bottom:0;
}
} }
}
} }
.ie7 { .ie7 {
.aside .task-stats li { .zfix {
width:31.5%; position: relative;
} z-index: 1001;
.zfix { }
position:relative;
z-index:1001;
}
.list-group li .list-group-item {
margin:0;
position:static;
}
.graph-spacer {
margin-bottom:90px;
padding-bottom:90px;
}
.date-selector {
zoom:1;
.btn-full-width { .list-group li .list-group-item {
width:100%; margin: 0;
} position: static;
} }
.sr-only {
position:relative;
}
.breadcrumb li {
vertical-align: top;
zoom: 1;
display: inline;
margin-right:10px;
}
.pull-right.dropdown-menu {
right:0px;
}
.run-details .pull-right.dropdown-menu {
right:82px;
}
.tasks-list li {
padding-right:105px;
}
.filter-toggle {
width:30%;
margin:0 35%;
margin-top:-10px;
background-color:lighten(@gray-lighter, 4%);
padding-bottom:10px;
.glyphicon { .graph-spacer {
display:none; margin-bottom: 90px;
} padding-bottom: 90px;
}
input { .date-selector {
width:80%; zoom: 1;
margin-left:-25%;
} .btn-full-width {
width: 100%;
} }
}
.sr-only {
position: relative;
}
.breadcrumb li {
vertical-align: top;
zoom: 1;
display: inline;
margin-right: 10px;
}
.pull-right.dropdown-menu {
right: 0;
}
.run-details .pull-right.dropdown-menu {
right: 82px;
}
.tasks-list li {
padding-right: 105px;
}
.filter-toggle {
width: 30%;
margin: 0 35%;
margin-top: -10px;
background-color: lighten(@gray-lighter, 4%);
padding-bottom: 10px;
.glyphicon {
display: none;
}
input {
width: 80%;
margin-left: -25%;
}
}
} }

View File

@@ -1,47 +1,55 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
/* No javascript */ /* No javascript */
.no-javascript { .no-javascript {
.graph-container, .expander { .graph-container, .expander {
display:none; display: none;
} }
.hidden {
display:block !important; .hidden {
visibility:visible !important; display: block !important;
} visibility: visible !important;
.date-links.hidden { }
display:none !important;
} .date-links.hidden {
.btn-group:hover ul { display: none !important;
display:block !important; }
}
table.hidden { .btn-group:hover ul {
display:table !important; display: block !important;
} }
.collapse {
display:block; table.hidden {
} display: table !important;
.heading { }
margin-top:0;
border-radius: 3px 3px 0 0; .collapse {
} display: block;
.show-class { }
display:block;
} .heading {
.no-js-hide { margin-top: 0;
display: none; border-radius: 3px 3px 0 0;
} }
.show-class {
display: block;
}
.no-js-hide {
display: none;
}
} }

View File

@@ -1,194 +1,231 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
/* Media queries */ /* Media queries */
@media (max-width:991px) { @media (max-width: 991px) {
.h1, h1 { .h1, h1 {
font-size:floor(@font-size-base * 2.15); // ~32px; font-size: floor(@font-size-base * 2.15); // ~32px;
}
.h2, h2 {
font-size: floor(@font-size-base * 1.9); // ~28px;
}
.task-header .h4 {
font-size: floor(@font-size-base * 1.15); // ~17px;
}
.header {
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.task-header .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5rem;
}
.task-header h2 {
margin-bottom: 3px;
}
.date {
margin-top: 10px;
float: right;
}
.other-tasks {
.sr-only();
}
.task-stats,
.btn-full-width {
margin-bottom: 0;
}
.task-card .task-stats {
margin-bottom: 10px;
}
.action-buttons {
margin-bottom: 20px;
}
.aside {
margin-bottom: 15px;
}
.graph-spacer {
padding-bottom: 80px;
}
.footer {
text-align: center;
.nav {
float: none;
li {
width: 25%;
}
} }
.h2, h2 { }
font-size:floor(@font-size-base * 1.9); // ~28px; }
}
.task-header .h4 { @media (max-width: 767px) {
font-size:floor(@font-size-base * 1.15); // ~17px; .date-selector {
} margin-top: 0;
.header { margin-bottom: 25px;
margin-bottom:2rem; }
padding-bottom:1rem;
} .readonly-mode .date {
.task-header .btn { margin-top: 0;
padding:5px 10px; margin-bottom: 5px;
font-size:12px; float: none;
line-height:1.5rem; }
}
.task-header h2 { .graph-spacer {
margin-bottom:3px; padding-bottom: 20px;
} margin-bottom: 15px;
.date { }
margin-top:10px;
float:right; .action-buttons {
} margin-top: 10px;
.other-tasks { margin-bottom: 0;
.sr-only();
}
.task-stats,
.btn-full-width { .btn-full-width {
margin-bottom:0; margin-bottom: 10px;
} }
.task-card .task-stats { }
margin-bottom:10px;
}
.action-buttons {
margin-bottom:20px;
}
.aside {
margin-bottom:15px;
}
.graph-spacer {
padding-bottom:80px;
}
.footer {
text-align:center;
.nav { .task-header {
float:none; .run-details {
text-align: left;
}
}
li { .task-card .task-card-link {
width:25%; min-height: 0;
} }
}
}
} }
@media (max-width:767px) {
.date-selector {
margin-top:0;
margin-bottom:25px;
}
.readonly-mode .date {
margin-top:0;
margin-bottom:5px;
float:none;
}
.graph-spacer {
padding-bottom:20px;
margin-bottom:15px;
}
.action-buttons {
margin-top:10px;
margin-bottom:0;
.btn-full-width { @media (max-width: 640px) {
margin-bottom:10px; body {
} font-size: 14px;
}
.h1, h1 {
font-size: floor(@font-size-base * 1.75); // ~26px;
}
.h2, h2 {
font-size: floor(@font-size-base * 1.6); // ~24px;
}
.task-header .h4 {
font-size: floor(@font-size-base * 1.1); // ~16px;
}
.badge {
font-size: floor(@font-size-base * 0.75); // ~11px;
padding: 7px;
}
.rule-name .badge {
padding: 3px;
}
.graph {
margin-bottom: 3rem;
}
.delete-button {
font-size: floor(@font-size-base * 1.35); // ~20px;
top: 10px;
right: 25px;
}
.standards-lists {
.tooltip {
&.top .tooltip-inner {
max-width: 400px;
}
} }
.task-header { }
.run-details {
text-align:left; .tasks-list {
} .panel {
margin-bottom: 20px;
} }
.task-card .task-card-link { }
min-height:0;
.footer .nav {
li {
width: 50%;
} }
}
} }
@media (max-width:640px) {
body { @media (max-width: 479px) {
font-size:14px; .graph {
} height: 200px;
.h1, h1 { margin-bottom: 1.5rem;
font-size:floor(@font-size-base * 1.75); // ~26px; }
}
.h2, h2 { .series-checkboxes li {
font-size:floor(@font-size-base * 1.6); // ~24px; font-size: floor(@font-size-base * 0.8); // ~12px;
} }
.task-header .h4 {
font-size:floor(@font-size-base * 1.1); // ~16px; .task-header .h3 {
} float: none !important;
.badge { text-align: center;
font-size:floor(@font-size-base * 0.75); // ~11px; margin-bottom: 15px !important;
padding:7px; padding: 10px;
} }
.rule-name .badge {
padding:3px; .task-header h1 {
} margin-bottom: 3px;
.graph { }
margin-bottom:3rem;
}
.delete-button {
font-size:floor(@font-size-base * 1.35); // ~20px;
top:10px;
right:25px;
}
.standards-lists {
.tooltip {
&.top .tooltip-inner {
max-width:400px;
}
}
}
.tasks-list {
li {
margin-bottom:20px;
}
}
.footer .nav {
li {
width:50%;
}
}
} }
@media (max-width:479px) {
.graph { @media (max-width: 360px) {
height:200px; .delete-button {
margin-bottom:1.5rem; display: block !important;
font-size: floor(@font-size-base * 1); // ~15px;
top: 5px;
right: 20px;
.opacity(0.7)
}
.standards-lists {
.checkbox {
font-size: floor(@font-size-base * 0.9); // ~13px;
} }
.series-checkboxes li { .tooltip {
font-size:floor(@font-size-base * 0.8); // ~12px; &.top .tooltip-inner {
max-width: 260px;
}
} }
.task-header .h3 { }
float:none !important;
text-align:center; .footer {
margin-bottom:15px !important; .nav {
padding:10px; a {
} padding: 10px 5px;
.task-header h1 { }
margin-bottom:3px;
}
}
@media (max-width:360px) {
.delete-button {
display:block !important;
font-size:floor(@font-size-base * 1); // ~15px;
top:5px;
right:20px;
.opacity(0.7)
}
.standards-lists {
.checkbox {
font-size:floor(@font-size-base * 0.9); // ~13px;
}
.tooltip {
&.top .tooltip-inner {
max-width:260px;
}
}
}
.footer {
.nav {
a {
padding:10px 5px;
}
}
} }
}
} }

File diff suppressed because it is too large Load Diff

View File

@@ -2,16 +2,15 @@
// Tables // Tables
// -------------------------------------------------- // --------------------------------------------------
table { table {
max-width: 100%; max-width: 100%;
background-color: @table-bg; background-color: @table-bg;
} }
th { th {
text-align: left; text-align: left;
} }
// Baseline styles // Baseline styles
.table { .table {
@@ -21,60 +20,58 @@ th {
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
padding: @table-cell-padding; padding: @table-cell-padding;
line-height: @line-height-base; line-height: @line-height-base;
vertical-align: top; vertical-align: top;
border-top: 1px solid @table-border-color; border-top: 1px solid @table-border-color;
} }
} }
} }
// Bottom align for column headings // Bottom align for column headings
> thead > tr > th { > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color; border-bottom: 2px solid @table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
> caption + thead, > caption + thead,
> colgroup + thead, > colgroup + thead,
> thead:first-child { > thead:first-child {
> tr:first-child { > tr:first-child {
> th, > th,
> td { > td {
border-top: 0; border-top: 0;
} }
} }
} }
// Account for multiple tbody instances // Account for multiple tbody instances
> tbody + tbody { > tbody + tbody {
border-top: 2px solid @table-border-color; border-top: 2px solid @table-border-color;
} }
// Nesting // Nesting
.table { .table {
background-color: @body-bg; background-color: @body-bg;
} }
} }
// Condensed table w/ half padding // Condensed table w/ half padding
.table-condensed { .table-condensed {
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
padding: @table-condensed-cell-padding; padding: @table-condensed-cell-padding;
} }
} }
} }
} }
// Bordered version // Bordered version
// //
// Add borders all around the table and between all the columns. // Add borders all around the table and between all the columns.
@@ -84,56 +81,53 @@ th {
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
} }
} }
} }
> thead { > thead {
> tr { > tr {
> th, > th,
> td { > td {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
} }
} }
} }
// Zebra-striping // Zebra-striping
// //
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped { .table-striped {
> tbody { > tbody {
> tr:nth-child(odd) { > tr:nth-child(odd) {
> td, > td,
> th { > th {
background-color: @table-bg-accent; background-color: @table-bg-accent;
} }
} }
} }
} }
// Hover effect // Hover effect
// //
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover {
> tbody { > tbody {
> tr:hover { > tr:hover {
> td, > td,
> th { > th {
background-color: @table-bg-hover; background-color: @table-bg-hover;
} }
} }
} }
} }
// Table cell sizing // Table cell sizing
// //
// Reset default table behavior // Reset default table behavior
@@ -142,17 +136,17 @@ table col[class*="col-"] {
float: none; float: none;
display: table-column; display: table-column;
} }
table { table {
td, td,
th { th {
&[class*="col-"] { &[class*="col-"] {
float: none; float: none;
display: table-cell; display: table-cell;
} }
} }
} }
// Table backgrounds // Table backgrounds
// //
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
@@ -164,8 +158,8 @@ table {
> td.active, > td.active,
> th.active, > th.active,
&.active > td, &.active > td,
&.active > th { &.active > th {
background-color: @table-bg-active; background-color: @table-bg-active;
} }
} }
@@ -174,7 +168,6 @@ table {
.table-row-variant(danger; @state-danger-bg; @state-danger-border); .table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border); .table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables // Responsive tables
// //
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@@ -183,64 +176,63 @@ table {
@media (max-width: @screen-sm-min) { @media (max-width: @screen-sm-min) {
.table-responsive { .table-responsive {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Tighten up spacing and give a background color // Tighten up spacing and give a background color
> .table { > .table {
margin-bottom: 0; margin-bottom: 0;
// Ensure the content doesn't wrap // Ensure the content doesn't wrap
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
white-space: nowrap; white-space: nowrap;
} }
} }
} }
} }
// Special overrides for the bordered tables // Special overrides for the bordered tables
> .table-bordered { > .table-bordered {
border: 0; border: 0;
// Nuke the appropriate borders so that the parent can handle them // Nuke the appropriate borders so that the parent can handle them
> thead, > thead,
> tbody, > tbody,
> tfoot { > tfoot {
> tr { > tr {
> th:first-child, > th:first-child,
> td:first-child { > td:first-child {
border-left: 0; border-left: 0;
} }
> th:last-child, > th:last-child,
> td:last-child { > td:last-child {
border-right: 0; border-right: 0;
} }
} }
} }
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would // chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether. // remove the border altogether.
> tbody, > tbody,
> tfoot { > tfoot {
> tr:last-child { > tr:last-child {
> th, > th,
> td { > td {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
}
}
} }
} }

View File

@@ -1,13 +1,9 @@
// //
// Load core variables and mixins // Load core variables and mixins
// -------------------------------------------------- // --------------------------------------------------
@import "variables.less"; @import "variables.less";
@import "mixins.less"; @import "mixins.less";
// //
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
@@ -19,14 +15,14 @@
.btn-info, .btn-info,
.btn-warning, .btn-warning,
.btn-danger { .btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
.box-shadow(@shadow); .box-shadow(@shadow);
// Reset the shadow // Reset the shadow
&:active, &:active,
&.active { &.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
} }
} }
@@ -37,15 +33,15 @@
border-color: darken(@btn-color, 14%); border-color: darken(@btn-color, 14%);
&:hover, &:hover,
&:focus { &:focus {
background-color: darken(@btn-color, 12%); background-color: darken(@btn-color, 12%);
background-position: 0 -15px; background-position: 0 -15px;
} }
&:active, &:active,
&.active { &.active {
background-color: darken(@btn-color, 12%); background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 14%); border-color: darken(@btn-color, 14%);
} }
} }
@@ -54,19 +50,36 @@
// Remove the gradient for the pressed/active state // Remove the gradient for the pressed/active state
&:active, &:active,
&.active { &.active {
background-image: none; background-image: none;
} }
} }
// Apply the mixin to the buttons // Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-default {
.btn-primary { .btn-styles(@btn-primary-bg); } .btn-styles(@btn-default-bg);
.btn-success { .btn-styles(@btn-success-bg); } text-shadow: 0 1px 0 #fff;
.btn-warning { .btn-styles(@btn-warning-bg); } border-color: #ccc;
.btn-danger { .btn-styles(@btn-danger-bg); } }
.btn-info { .btn-styles(@btn-info-bg); }
.btn-primary {
.btn-styles(@btn-primary-bg);
}
.btn-success {
.btn-styles(@btn-success-bg);
}
.btn-warning {
.btn-styles(@btn-warning-bg);
}
.btn-danger {
.btn-styles(@btn-danger-bg);
}
.btn-info {
.btn-styles(@btn-info-bg);
}
// //
// Images // Images
@@ -74,11 +87,9 @@
.thumbnail, .thumbnail,
.img-thumbnail { .img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075)); .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
} }
// //
// Dropdowns // Dropdowns
// -------------------------------------------------- // --------------------------------------------------
@@ -88,6 +99,7 @@
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%); background-color: darken(@dropdown-link-hover-bg, 5%);
} }
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
@@ -95,8 +107,6 @@
background-color: darken(@dropdown-link-active-bg, 5%); background-color: darken(@dropdown-link-active-bg, 5%);
} }
// //
// Navbar // Navbar
// -------------------------------------------------- // --------------------------------------------------
@@ -105,17 +115,18 @@
.navbar-default { .navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
border-radius: @navbar-border-radius; border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
.box-shadow(@shadow); .box-shadow(@shadow);
.navbar-nav > .active > a { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%)); #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); .box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
} }
} }
.navbar-brand, .navbar-brand,
.navbar-nav > li > a { .navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
} }
// Inverted navbar // Inverted navbar
@@ -123,13 +134,13 @@
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg); #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.navbar-nav > .active > a { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%)); #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); .box-shadow(inset 0 3px 9px rgba(0, 0, 0, .25));
} }
.navbar-brand, .navbar-brand,
.navbar-nav > li > a { .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
} }
} }
@@ -140,16 +151,14 @@
border-radius: 0; border-radius: 0;
} }
// //
// Alerts // Alerts
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
.alert { .alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2); text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
.box-shadow(@shadow); .box-shadow(@shadow);
} }
@@ -160,12 +169,21 @@
} }
// Apply the mixin to the alerts // Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); } .alert-success {
.alert-info { .alert-styles(@alert-info-bg); } .alert-styles(@alert-success-bg);
.alert-warning { .alert-styles(@alert-warning-bg); } }
.alert-danger { .alert-styles(@alert-danger-bg); }
.alert-info {
.alert-styles(@alert-info-bg);
}
.alert-warning {
.alert-styles(@alert-warning-bg);
}
.alert-danger {
.alert-styles(@alert-danger-bg);
}
// //
// Progress bars // Progress bars
@@ -182,13 +200,25 @@
} }
// Apply the mixin to the progress bars // Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); } .progress-bar {
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } .progress-bar-styles(@progress-bar-bg);
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
.progress-bar-success {
.progress-bar-styles(@progress-bar-success-bg);
}
.progress-bar-info {
.progress-bar-styles(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-styles(@progress-bar-warning-bg);
}
.progress-bar-danger {
.progress-bar-styles(@progress-bar-danger-bg);
}
// //
// List groups // List groups
@@ -196,8 +226,9 @@
.list-group { .list-group {
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075)); .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
} }
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,
.list-group-item.active:focus { .list-group-item.active:focus {
@@ -206,15 +237,13 @@
border-color: darken(@list-group-active-border, 7.5%); border-color: darken(@list-group-active-border, 7.5%);
} }
// //
// Panels // Panels
// -------------------------------------------------- // --------------------------------------------------
// Common styles // Common styles
.panel { .panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05)); .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
} }
// Mixin for generating new styles // Mixin for generating new styles
@@ -223,14 +252,29 @@
} }
// Apply the mixin to the panel headings only // Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); } .panel-default > .panel-heading {
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } .panel-heading-styles(@panel-default-heading-bg);
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
.panel-primary > .panel-heading {
.panel-heading-styles(@panel-primary-heading-bg);
}
.panel-success > .panel-heading {
.panel-heading-styles(@panel-success-heading-bg);
}
.panel-info > .panel-heading {
.panel-heading-styles(@panel-info-heading-bg);
}
.panel-warning > .panel-heading {
.panel-heading-styles(@panel-warning-heading-bg);
}
.panel-danger > .panel-heading {
.panel-heading-styles(@panel-danger-heading-bg);
}
// //
// Wells // Wells
@@ -239,6 +283,6 @@
.well { .well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg); #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
border-color: darken(@well-bg, 10%); border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); @shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
.box-shadow(@shadow); .box-shadow(@shadow);
} }

View File

@@ -2,7 +2,6 @@
// Thumbnails // Thumbnails
// -------------------------------------------------- // --------------------------------------------------
// Mixin and adjust the regular image class // Mixin and adjust the regular image class
.thumbnail { .thumbnail {
.img-thumbnail(); .img-thumbnail();
@@ -10,11 +9,10 @@
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
> img { > img {
.img-responsive(); .img-responsive();
} }
} }
// Add a hover state for linked versions only // Add a hover state for linked versions only
a.thumbnail:hover, a.thumbnail:hover,
a.thumbnail:focus { a.thumbnail:focus {
@@ -26,6 +24,7 @@ a.thumbnail:focus {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.thumbnail .caption { .thumbnail .caption {
padding: @thumbnail-caption-padding; padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color; color: @thumbnail-caption-color;

View File

@@ -2,7 +2,6 @@
// Tooltips // Tooltips
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.tooltip { .tooltip {
position: absolute; position: absolute;
@@ -13,11 +12,25 @@
line-height: 1.4; line-height: 1.4;
.opacity(0); .opacity(0);
&.in { .opacity(.9); } &.in {
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } .opacity(.9);
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &.top {
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } margin-top: -3px;
padding: @tooltip-arrow-width 0;
}
&.right {
margin-left: 3px;
padding: 0 @tooltip-arrow-width;
}
&.bottom {
margin-top: 3px;
padding: @tooltip-arrow-width 0;
}
&.left {
margin-left: -3px;
padding: 0 @tooltip-arrow-width;
}
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@@ -39,57 +52,58 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.tooltip { .tooltip {
&.top .tooltip-arrow { &.top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -@tooltip-arrow-width; margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
&.top-left .tooltip-arrow { &.top-left .tooltip-arrow {
bottom: 0; bottom: 0;
left: @tooltip-arrow-width; left: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
&.top-right .tooltip-arrow { &.top-right .tooltip-arrow {
bottom: 0; bottom: 0;
right: @tooltip-arrow-width; right: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
&.right .tooltip-arrow { &.right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -@tooltip-arrow-width; margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color; border-right-color: @tooltip-arrow-color;
} }
&.left .tooltip-arrow { &.left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -@tooltip-arrow-width; margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color; border-left-color: @tooltip-arrow-color;
} }
&.bottom .tooltip-arrow { &.bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -@tooltip-arrow-width; margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }
&.bottom-left .tooltip-arrow { &.bottom-left .tooltip-arrow {
top: 0; top: 0;
left: @tooltip-arrow-width; left: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }
&.bottom-right .tooltip-arrow { &.bottom-right .tooltip-arrow {
top: 0; top: 0;
right: @tooltip-arrow-width; right: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }
} }

View File

@@ -2,13 +2,13 @@
// Typography // Typography
// -------------------------------------------------- // --------------------------------------------------
// Body text // Body text
// ------------------------- // -------------------------
p { p {
margin: 0 0 (@line-height-computed / 2); margin: 0 0 (@line-height-computed / 2);
} }
.lead { .lead {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.15); font-size: (@font-size-base * 1.15);
@@ -16,61 +16,76 @@ p {
line-height: 1.4; line-height: 1.4;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
} }
} }
// Emphasis & misc // Emphasis & misc
// ------------------------- // -------------------------
// Ex: 14px base font * 85% = about 12px // Ex: 14px base font * 85% = about 12px
small, small,
.small { font-size: 85%; } .small {
font-size: 85%;
}
// Undo browser default styling // Undo browser default styling
cite { font-style: normal; } cite {
font-style: normal;
}
// Contextual emphasis // Contextual emphasis
.text-muted { .text-muted {
color: @text-muted; color: @text-muted;
} }
.text-primary { .text-primary {
color: @brand-primary; color: @brand-primary;
&:hover { &:hover {
color: darken(@brand-primary, 10%); color: darken(@brand-primary, 10%);
} }
} }
.text-warning { .text-warning {
color: @state-warning-text; color: @state-warning-text;
&:hover { &:hover {
color: darken(@state-warning-text, 10%); color: darken(@state-warning-text, 10%);
} }
} }
.text-danger { .text-danger {
color: @state-danger-text; color: @state-danger-text;
&:hover { &:hover {
color: darken(@state-danger-text, 10%); color: darken(@state-danger-text, 10%);
} }
} }
.text-success { .text-success {
color: @state-success-text; color: @state-success-text;
&:hover { &:hover {
color: darken(@state-success-text, 10%); color: darken(@state-success-text, 10%);
} }
} }
.text-info { .text-info {
color: @state-info-text; color: @state-info-text;
&:hover { &:hover {
color: darken(@state-info-text, 10%); color: darken(@state-info-text, 10%);
} }
} }
// Alignment // Alignment
.text-left { text-align: left; } .text-left {
.text-right { text-align: right; } text-align: left;
.text-center { text-align: center; } }
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
// Headings // Headings
// ------------------------- // -------------------------
@@ -83,9 +98,9 @@ h1, h2, h3, h4, h5, h6,
color: @headings-color; color: @headings-color;
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @headings-small-color; color: @headings-small-color;
} }
} }
@@ -96,9 +111,10 @@ h3 {
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small { small {
font-size: 65%; font-size: 65%;
} }
} }
h4, h4,
h5, h5,
h6 { h6 {
@@ -106,17 +122,33 @@ h6 {
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small { small {
font-size: 75%; font-size: 75%;
} }
} }
h1, .h1 { font-size: @font-size-h1; } h1, .h1 {
h2, .h2 { font-size: @font-size-h2; } font-size: @font-size-h1;
h3, .h3 { font-size: @font-size-h3; } }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
h2, .h2 {
font-size: @font-size-h2;
}
h3, .h3 {
font-size: @font-size-h3;
}
h4, .h4 {
font-size: @font-size-h4;
}
h5, .h5 {
font-size: @font-size-h5;
}
h6, .h6 {
font-size: @font-size-h6;
}
// Page header // Page header
// ------------------------- // -------------------------
@@ -127,8 +159,6 @@ h6, .h6 { font-size: @font-size-h6; }
border-bottom: 1px solid @page-header-border-color; border-bottom: 1px solid @page-header-border-color;
} }
// Lists // Lists
// -------------------------------------------------- // --------------------------------------------------
@@ -138,8 +168,8 @@ ol {
margin-top: 0; margin-top: 0;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
ul, ul,
ol{ ol {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -150,13 +180,14 @@ ol {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
} }
// Inline turns list items into inline-block // Inline turns list items into inline-block
.list-inline { .list-inline {
.list-unstyled(); .list-unstyled();
> li { > li {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
} }
@@ -164,13 +195,16 @@ ol {
dl { dl {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
} }
dt, dt,
dd { dd {
line-height: @line-height-base; line-height: @line-height-base;
} }
dt { dt {
font-weight: bold; font-weight: bold;
} }
dd { dd {
margin-left: 0; // Undo browser default margin-left: 0; // Undo browser default
} }
@@ -182,17 +216,17 @@ dd {
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.dl-horizontal { .dl-horizontal {
dt { dt {
float: left; float: left;
width: (@component-offset-horizontal - 20); width: (@component-offset-horizontal - 20);
clear: left; clear: left;
text-align: right; text-align: right;
.text-overflow(); .text-overflow();
} }
dd { dd {
margin-left: @component-offset-horizontal; margin-left: @component-offset-horizontal;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present .clearfix(); // Clear the floated `dt` if an empty `dd` is present
} }
} }
} }
@@ -201,11 +235,12 @@ dd {
// Abbreviations and acronyms // Abbreviations and acronyms
abbr[title], abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @abbr-border-color; border-bottom: 1px dotted @abbr-border-color;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
text-transform: uppercase; text-transform: uppercase;
@@ -217,40 +252,40 @@ blockquote {
margin: 0 0 @line-height-computed; margin: 0 0 @line-height-computed;
border-left: 5px solid @blockquote-border-color; border-left: 5px solid @blockquote-border-color;
p { p {
font-size: (@font-size-base * 1.25); font-size: (@font-size-base * 1.25);
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
} }
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
small { small {
display: block; display: block;
line-height: @line-height-base; line-height: @line-height-base;
color: @blockquote-small-color; color: @blockquote-small-color;
&:before { &:before {
content: '\2014 \00A0';// EM DASH, NBSP content: '\2014 \00A0'; // EM DASH, NBSP
} }
} }
// Float right with text-align: right // Float right with text-align: right
&.pull-right { &.pull-right {
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid @blockquote-border-color; border-right: 5px solid @blockquote-border-color;
border-left: 0; border-left: 0;
p, p,
small { small {
text-align: right; text-align: right;
} }
small { small {
&:before { &:before {
content: ''; content: '';
} }
&:after { &:after {
content: '\00A0 \2014';// NBSP, EM DASH content: '\00A0 \2014'; // NBSP, EM DASH
} }
} }
} }
} }

View File

@@ -2,41 +2,44 @@
// Utility classes // Utility classes
// -------------------------------------------------- // --------------------------------------------------
// Floats // Floats
// ------------------------- // -------------------------
.clearfix { .clearfix {
.clearfix(); .clearfix();
} }
.center-block { .center-block {
.center-block(); .center-block();
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.pull-left { .pull-left {
float: left !important; float: left !important;
} }
// Toggling content // Toggling content
// ------------------------- // -------------------------
.hide { .hide {
display: none !important; display: none !important;
} }
.show { .show {
display: block !important; display: block !important;
} }
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
.text-hide { .text-hide {
.text-hide(); .text-hide();
} }
// For Affix plugin // For Affix plugin
// ------------------------- // -------------------------
@@ -44,7 +47,6 @@
position: fixed; position: fixed;
} }
// Cursors // Cursors
// ------------------------- // -------------------------

View File

@@ -2,619 +2,588 @@
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------
// Grays // Grays
// ------------------------- // -------------------------
@gray-darker: lighten(#000, 13.5%); // #222 @gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: #616D6E; @gray-dark: #616D6E;
@gray: #6C7878; @gray: #6C7878;
@gray-light: #7C8C8D; @gray-light: #7C8C8D;
@gray-lighter: #eaeff1; @gray-lighter: #eaeff1;
// Brand colors // Brand colors
// ------------------------- // -------------------------
@brand-primary: #2C3E50; @brand-primary: #2C3E50;
@brand-success: #00806F; @brand-success: #00806F;
@brand-warning: #A86700; @brand-warning: #A86700;
@brand-danger: #D83D2D; @brand-danger: #D83D2D;
@brand-info: #177BBE; @brand-info: #177BBE;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@body-bg: #fff; @body-bg: #fff;
@text-color: @brand-primary; @text-color: @brand-primary;
// Links // Links
// ------------------------- // -------------------------
@link-color: @brand-success; @link-color: @brand-success;
@link-hover-color: @link-color; @link-hover-color: @link-color;
// Typography // Typography
// ------------------------- // -------------------------
@font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 15px; @font-size-base: 15px;
@font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-small: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@headings-font-weight: 500; @headings-font-weight: 500;
@headings-line-height: 1.1; @headings-line-height: 1.1;
// Iconography // Iconography
// ------------------------- // -------------------------
@icon-font-path: "../fonts/"; @icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
// Components // Components
// ------------------------- // -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start) // Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 10px; @padding-base-vertical: 10px;
@padding-base-horizontal: 15px; @padding-base-horizontal: 15px;
@padding-large-vertical: 18px; @padding-large-vertical: 18px;
@padding-large-horizontal: 27px; @padding-large-horizontal: 27px;
@padding-small-vertical: 6px; @padding-small-vertical: 6px;
@padding-small-horizontal: 9px; @padding-small-horizontal: 9px;
@line-height-large: 1.33; @line-height-large: 1.33;
@line-height-small: 1.5; @line-height-small: 1.5;
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
@component-active-bg: @brand-primary; @component-active-bg: @brand-primary;
@caret-width-base: 4px; @caret-width-base: 4px;
@caret-width-large: 5px; @caret-width-large: 5px;
// Tables // Tables
// ------------------------- // -------------------------
@table-cell-padding: 8px; @table-cell-padding: 8px;
@table-condensed-cell-padding: 5px; @table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color @table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping @table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: @gray-lighter; @table-bg-hover: @gray-lighter;
@table-bg-active: @table-bg-hover; @table-bg-active: @table-bg-hover;
@table-border-color: @gray-lighter; // table and cell border
@table-border-color: @gray-lighter; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@btn-font-weight: normal; @btn-font-weight: normal;
@btn-default-color: #fff; @btn-default-color: #fff;
@btn-default-bg: @gray; @btn-default-bg: @gray;
@btn-default-border: @btn-default-bg; @btn-default-border: @btn-default-bg;
@btn-primary-color: @btn-default-color; @btn-primary-color: @btn-default-color;
@btn-primary-bg: @brand-primary; @btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg; @btn-primary-border: @btn-primary-bg;
@btn-success-color: @btn-default-color; @btn-success-color: @btn-default-color;
@btn-success-bg: @brand-success; @btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg; @btn-success-border: @btn-success-bg;
@btn-warning-color: @btn-default-color; @btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning; @btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg; @btn-warning-border: @btn-warning-bg;
@btn-danger-color: @btn-default-color; @btn-danger-color: @btn-default-color;
@btn-danger-bg: @brand-danger; @btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg; @btn-danger-border: @btn-danger-bg;
@btn-info-color: @btn-default-color; @btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info; @btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg; @btn-info-border: @btn-info-bg;
@btn-link-disabled-color: @gray-light;
@btn-link-disabled-color: @gray-light;
// Forms // Forms
// ------------------------- // -------------------------
@input-bg: #fff; @input-bg: #fff;
@input-bg-disabled: @gray-lighter; @input-bg-disabled: @gray-lighter;
@input-color: @text-color; @input-color: @text-color;
@input-border: #dce4ec; @input-border: #dce4ec;
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
@input-border-focus: #1abc9c; @input-border-focus: #1abc9c;
@input-color-placeholder: #acb6c0; @input-color-placeholder: #acb6c0;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color; @legend-color: @text-color;
@legend-border-color: #e5e5e5; @legend-border-color: #e5e5e5;
@input-group-addon-bg: @gray-lighter; @input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdown-bg: #fff; @dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15); @dropdown-border: rgba(0, 0, 0, .15);
@dropdown-fallback-border: #ccc; @dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5; @dropdown-divider-bg: #e5e5e5;
@dropdown-link-active-color: #fff; @dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark; @dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-disabled-color: @text-muted; @dropdown-link-disabled-color: @text-muted;
@dropdown-header-color: @text-muted; @dropdown-header-color: @text-muted;
@dropdown-caret-color: #000;
@dropdown-caret-color: #000;
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
// Z-index master list // Z-index master list
// ------------------------- // -------------------------
// Used for a bird's eye view of components dependent on the z-axis // Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :) // Try to avoid customizing these :)
@zindex-navbar: 1000; @zindex-navbar: 1000;
@zindex-dropdown: 1000; @zindex-dropdown: 1000;
@zindex-popover: 1010; @zindex-popover: 1010;
@zindex-tooltip: 1030; @zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal-background: 1040;
@zindex-modal: 1050; @zindex-modal: 1050;
// Media queries breakpoints // Media queries breakpoints
// -------------------------------------------------- // --------------------------------------------------
// Extra small screen / phone // Extra small screen / phone
@screen-xs: 480px; @screen-xs: 480px;
@screen-phone: @screen-xs; @screen-phone: @screen-xs;
// Small screen / tablet // Small screen / tablet
@screen-sm: 768px; @screen-sm: 768px;
@screen-tablet: @screen-sm; @screen-tablet: @screen-sm;
// Medium screen / desktop // Medium screen / desktop
@screen-md: 992px; @screen-md: 992px;
@screen-desktop: @screen-md; @screen-desktop: @screen-md;
// Large screen / wide desktop // Large screen / wide desktop
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-desktop: @screen-lg; @screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1); @screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1); @screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1); @screen-md-max: (@screen-lg - 1);
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
// Number of columns in the grid system // Number of columns in the grid system
@grid-columns: 12; @grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns // Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
// Point at which the navbar stops collapsing // Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet; @grid-float-breakpoint: @screen-tablet;
// Navbar // Navbar
// ------------------------- // -------------------------
// Basics of a navbar // Basics of a navbar
@navbar-height: 60px; @navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: @brand-primary; @navbar-default-bg: @brand-primary;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links // Navbar links
@navbar-default-link-color: #fff; @navbar-default-link-color: #fff;
@navbar-default-link-hover-color: @brand-success; @navbar-default-link-hover-color: @brand-success;
@navbar-default-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #fff; @navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 10%); @navbar-default-link-active-bg: darken(@navbar-default-bg, 10%);
@navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: @navbar-default-link-hover-color; @navbar-default-brand-hover-color: @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%); @navbar-default-toggle-hover-bg: darken(@navbar-default-bg, 10%);
@navbar-default-toggle-icon-bar-bg: #fff; @navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%); @navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
// Inverted navbar // Inverted navbar
// //
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: #fff; @navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-success; @navbar-inverse-bg: @brand-success;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: #fff; @navbar-inverse-link-color: #fff;
@navbar-inverse-link-hover-color: @brand-primary; @navbar-inverse-link-hover-color: @brand-primary;
@navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: #fff; @navbar-inverse-link-active-color: #fff;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%); @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 5%);
@navbar-inverse-link-disabled-color: #ccc; @navbar-inverse-link-disabled-color: #ccc;
@navbar-inverse-link-disabled-bg: transparent; @navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label // Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color; @navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color; @navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg: transparent; @navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar search // Inverted navbar search
// Normal navbar needs no special styles or vars // Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%); @navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff; @navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc; @navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%); @navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%); @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
// Navs // Navs
// ------------------------- // -------------------------
@nav-link-padding: 10px 15px; @nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter; @nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light; @nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light; @nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff; @nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff; @nav-open-caret-border-color: #fff;
// Tabs // Tabs
@nav-tabs-border-color: @gray-lighter; @nav-tabs-border-color: @gray-lighter;
@nav-tabs-link-hover-border-color: @gray-lighter; @nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg; @nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray; @nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: @gray-lighter; @nav-tabs-active-link-hover-border-color: @gray-lighter;
@nav-tabs-justified-link-border-color: @gray-lighter; @nav-tabs-justified-link-border-color: @gray-lighter;
@nav-tabs-justified-active-link-border-color: @body-bg; @nav-tabs-justified-active-link-border-color: @body-bg;
// Pills // Pills
@nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff; @nav-pills-active-link-hover-color: #fff;
// Pagination // Pagination
// ------------------------- // -------------------------
@pagination-bg: @brand-success; @pagination-bg: @brand-success;
@pagination-border: transparent; @pagination-border: transparent;
@pagination-hover-bg: @gray-lighter; @pagination-hover-bg: @gray-lighter;
@pagination-active-bg: darken(@brand-success, 15%); @pagination-active-bg: darken(@brand-success, 15%);
@pagination-active-color: #fff; @pagination-active-color: #fff;
@pagination-disabled-color: @gray-lighter;
@pagination-disabled-color: @gray-lighter;
// Pager // Pager
// ------------------------- // -------------------------
@pager-border-radius: 15px; @pager-border-radius: 15px;
@pager-disabled-color: #fff; @pager-disabled-color: #fff;
// Jumbotron // Jumbotron
// ------------------------- // -------------------------
@jumbotron-padding: 30px; @jumbotron-padding: 30px;
@jumbotron-color: inherit; @jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-heading-color: inherit;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@state-warning-text: #fff; @state-warning-text: #fff;
@state-warning-bg: @brand-warning; @state-warning-bg: @brand-warning;
@state-warning-border: @brand-warning; @state-warning-border: @brand-warning;
@state-danger-text: #fff; @state-danger-text: #fff;
@state-danger-bg: @brand-danger; @state-danger-bg: @brand-danger;
@state-danger-border: @brand-danger; @state-danger-border: @brand-danger;
@state-success-text: #fff; @state-success-text: #fff;
@state-success-bg: @brand-success; @state-success-bg: @brand-success;
@state-success-border: @brand-success; @state-success-border: @brand-success;
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: @brand-info;
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: @brand-info;
// Tooltips // Tooltips
// ------------------------- // -------------------------
@tooltip-max-width: 200px; @tooltip-max-width: 200px;
@tooltip-color: #fff; @tooltip-color: #fff;
@tooltip-bg: rgba(0,0,0,.9); @tooltip-bg: rgba(0, 0, 0, .9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers // Popovers
// ------------------------- // -------------------------
@popover-bg: #fff; @popover-bg: #fff;
@popover-max-width: 276px; @popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2); @popover-border-color: rgba(0, 0, 0, .2);
@popover-fallback-border-color: #ccc; @popover-fallback-border-color: #ccc;
@popover-title-bg: darken(@popover-bg, 3%); @popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
@popover-arrow-color: #fff; @popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0, 0, 0, .25);
@popover-arrow-outer-fallback-color: #999;
// Labels // Labels
// ------------------------- // -------------------------
@label-default-bg: @btn-default-bg; @label-default-bg: @btn-default-bg;
@label-primary-bg: @brand-primary; @label-primary-bg: @brand-primary;
@label-success-bg: @brand-success; @label-success-bg: @brand-success;
@label-info-bg: @brand-info; @label-info-bg: @brand-info;
@label-warning-bg: @brand-warning; @label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger; @label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals // Modals
// ------------------------- // -------------------------
@modal-inner-padding: 20px; @modal-inner-padding: 20px;
@modal-title-padding: 15px; @modal-title-padding: 15px;
@modal-title-line-height: @line-height-base; @modal-title-line-height: @line-height-base;
@modal-content-bg: #fff; @modal-content-bg: #fff;
@modal-content-border-color: rgba(0,0,0,.2); @modal-content-border-color: rgba(0, 0, 0, .2);
@modal-content-fallback-border-color: #999; @modal-content-fallback-border-color: #999;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts // Alerts
// ------------------------- // -------------------------
@alert-padding: 15px; @alert-padding: 15px;
@alert-border-radius: @border-radius-base; @alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold; @alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg; @alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text; @alert-success-text: @state-success-text;
@alert-success-border: @state-success-border; @alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg; @alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text; @alert-info-text: @state-info-text;
@alert-info-border: @state-info-border; @alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg; @alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text; @alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border; @alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars // Progress bars
// ------------------------- // -------------------------
@progress-bg: @gray-lighter; @progress-bg: @gray-lighter;
@progress-bar-color: #fff; @progress-bar-color: #fff;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group // List group
// ------------------------- // -------------------------
@list-group-bg: #fff; @list-group-bg: #fff;
@list-group-border: @gray-lighter; @list-group-border: @gray-lighter;
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
@list-group-hover-bg: @gray-lighter; @list-group-hover-bg: @gray-lighter;
@list-group-active-color: #fff; @list-group-active-color: #fff;
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels // Panels
// ------------------------- // -------------------------
@panel-bg: #fff; @panel-bg: #fff;
@panel-inner-border: @gray-lighter; @panel-inner-border: @gray-lighter;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
@panel-footer-bg: @gray-lighter; @panel-footer-bg: @gray-lighter;
@panel-default-text: @gray-dark; @panel-default-text: @gray-dark;
@panel-default-border: @gray-lighter; @panel-default-border: @gray-lighter;
@panel-default-heading-bg: @gray-lighter; @panel-default-heading-bg: @gray-lighter;
@panel-primary-text: #fff; @panel-primary-text: #fff;
@panel-primary-border: @brand-primary; @panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary; @panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text; @panel-success-text: @state-success-text;
@panel-success-border: @state-success-border; @panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg; @panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text; @panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border; @panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg; @panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text; @panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails // Thumbnails
// ------------------------- // -------------------------
@thumbnail-padding: 4px; @thumbnail-padding: 4px;
@thumbnail-bg: @body-bg; @thumbnail-bg: @body-bg;
@thumbnail-border: @gray-lighter; @thumbnail-border: @gray-lighter;
@thumbnail-border-radius: @border-radius-base; @thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells // Wells
// ------------------------- // -------------------------
@well-bg: @gray-lighter; @well-bg: @gray-lighter;
// Badges // Badges
// ------------------------- // -------------------------
@badge-color: #fff; @badge-color: #fff;
@badge-link-hover-color: #fff; @badge-link-hover-color: #fff;
@badge-bg: @gray; @badge-bg: @gray;
@badge-active-color: @link-color; @badge-active-color: @link-color;
@badge-active-bg: #fff; @badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs // Breadcrumbs
// ------------------------- // -------------------------
@breadcrumb-bg: lighten(@gray-lighter, 4%); @breadcrumb-bg: lighten(@gray-lighter, 4%);
@breadcrumb-color: @gray-dark; @breadcrumb-color: @gray-dark;
@breadcrumb-active-color: @breadcrumb-color; @breadcrumb-active-color: @breadcrumb-color;
// Carousel // Carousel
// ------------------------ // ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); @carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
@carousel-control-color: #fff; @carousel-control-color: #fff;
@carousel-control-width: 15%; @carousel-control-width: 15%;
@carousel-control-opacity: .5; @carousel-control-opacity: .5;
@carousel-control-font-size: 20px; @carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff; @carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff; @carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
@carousel-caption-color: #fff;
// Close // Close
// ------------------------ // ------------------------
@close-color: #000; @close-color: #000;
@close-font-weight: bold; @close-font-weight: bold;
@close-text-shadow: 0 1px 0 #fff; @close-text-shadow: 0 1px 0 #fff;
// Code // Code
// ------------------------ // ------------------------
@code-color: #c7254e; @code-color: #c7254e;
@code-bg: #f9f2f4; @code-bg: #f9f2f4;
@pre-bg: @gray-lighter; @pre-bg: @gray-lighter;
@pre-color: @gray-dark; @pre-color: @gray-dark;
@pre-border-color: #ccc; @pre-border-color: #ccc;
@pre-scrollable-max-height: 340px; @pre-scrollable-max-height: 340px;
// Type // Type
// ------------------------ // ------------------------
@text-muted: @gray-light; @text-muted: @gray-light;
@abbr-border-color: @gray-light; @abbr-border-color: @gray-light;
@headings-small-color: @gray-light; @headings-small-color: @gray-light;
@blockquote-small-color: @gray-light; @blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter; @page-header-border-color: @gray-lighter;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------
// Hr border color // Hr border color
@hr-border: @gray-lighter; @hr-border: @gray-lighter;
// Horizontal forms & lists // Horizontal forms & lists
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;
// Container sizes // Container sizes
// -------------------------------------------------- // --------------------------------------------------
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop // Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width)); @container-lg-desktop: ((1140px + @grid-gutter-width));

View File

@@ -2,637 +2,605 @@
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------
// Grays // Grays
// ------------------------- // -------------------------
@gray-darker: lighten(#000, 13.5%); // #222 @gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333 @gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555 @gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999 @gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee @gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors // Brand colors
// ------------------------- // -------------------------
@brand-primary: #428bca; @brand-primary: #428bca;
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@brand-danger: #d9534f; @brand-danger: #d9534f;
@brand-info: #5bc0de; @brand-info: #5bc0de;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@body-bg: #fff; @body-bg: #fff;
@text-color: @gray-dark; @text-color: @gray-dark;
// Links // Links
// ------------------------- // -------------------------
@link-color: @brand-primary; @link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%); @link-hover-color: darken(@link-color, 15%);
// Typography // Typography
// ------------------------- // -------------------------
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 14px; @font-size-base: 14px;
@font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-small: ceil(@font-size-base * 0.85); // ~12px
@font-size-h1: floor(@font-size-base * 2.60); // ~36px @font-size-h1: floor(@font-size-base * 2.60); // ~36px
@font-size-h2: floor(@font-size-base * 2.15); // ~30px @font-size-h2: floor(@font-size-base * 2.15); // ~30px
@font-size-h3: ceil(@font-size-base * 1.70); // ~24px @font-size-h3: ceil(@font-size-base * 1.70); // ~24px
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px @font-size-h4: ceil(@font-size-base * 1.25); // ~18px
@font-size-h5: @font-size-base; @font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px @font-size-h6: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
// Iconography // Iconography
// ------------------------- // -------------------------
@icon-font-path: "../fonts/"; @icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
// Components // Components
// ------------------------- // -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start) // Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 6px; @padding-base-vertical: 6px;
@padding-base-horizontal: 12px; @padding-base-horizontal: 12px;
@padding-large-vertical: 10px; @padding-large-vertical: 10px;
@padding-large-horizontal: 16px; @padding-large-horizontal: 16px;
@padding-small-vertical: 5px; @padding-small-vertical: 5px;
@padding-small-horizontal: 10px; @padding-small-horizontal: 10px;
@line-height-large: 1.33; @line-height-large: 1.33;
@line-height-small: 1.5; @line-height-small: 1.5;
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
@component-active-color: #fff; @component-active-color: #fff;
@component-active-bg: @brand-primary; @component-active-bg: @brand-primary;
@caret-width-base: 4px; @caret-width-base: 4px;
@caret-width-large: 5px; @caret-width-large: 5px;
// Tables // Tables
// ------------------------- // -------------------------
@table-cell-padding: 8px; @table-cell-padding: 8px;
@table-condensed-cell-padding: 5px; @table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color @table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping @table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5; @table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover; @table-bg-active: @table-bg-hover;
@table-border-color: #ddd; // table and cell border
@table-border-color: #ddd; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@btn-font-weight: normal; @btn-font-weight: normal;
@btn-default-color: #333; @btn-default-color: #333;
@btn-default-bg: #fff; @btn-default-bg: #fff;
@btn-default-border: #ccc; @btn-default-border: #ccc;
@btn-primary-color: #fff; @btn-primary-color: #fff;
@btn-primary-bg: @brand-primary; @btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 5%); @btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-success-color: #fff; @btn-success-color: #fff;
@btn-success-bg: @brand-success; @btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 5%); @btn-success-border: darken(@btn-success-bg, 5%);
@btn-warning-color: #fff; @btn-warning-color: #fff;
@btn-warning-bg: @brand-warning; @btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 5%); @btn-warning-border: darken(@btn-warning-bg, 5%);
@btn-danger-color: #fff; @btn-danger-color: #fff;
@btn-danger-bg: @brand-danger; @btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 5%); @btn-danger-border: darken(@btn-danger-bg, 5%);
@btn-info-color: #fff; @btn-info-color: #fff;
@btn-info-bg: @brand-info; @btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 5%); @btn-info-border: darken(@btn-info-bg, 5%);
@btn-link-disabled-color: @gray-light;
@btn-link-disabled-color: @gray-light;
// Forms // Forms
// ------------------------- // -------------------------
@input-bg: #fff; @input-bg: #fff;
@input-bg-disabled: @gray-lighter; @input-bg-disabled: @gray-lighter;
@input-color: @gray; @input-color: @gray;
@input-border: #ccc; @input-border: #ccc;
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
@input-border-focus: #66afe9; @input-border-focus: #66afe9;
@input-color-placeholder: @gray-light; @input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark; @legend-color: @gray-dark;
@legend-border-color: #e5e5e5; @legend-border-color: #e5e5e5;
@input-group-addon-bg: @gray-lighter; @input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@dropdown-bg: #fff; @dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15); @dropdown-border: rgba(0, 0, 0, .15);
@dropdown-fallback-border: #ccc; @dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5; @dropdown-divider-bg: #e5e5e5;
@dropdown-link-color: @gray-dark; @dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: darken(@gray-dark, 5%); @dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-bg: #f5f5f5; @dropdown-link-hover-bg: #f5f5f5;
@dropdown-link-active-color: @component-active-color; @dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light; @dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light; @dropdown-header-color: @gray-light;
@dropdown-caret-color: #000;
@dropdown-caret-color: #000;
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
// Z-index master list // Z-index master list
// ------------------------- // -------------------------
// Used for a bird's eye view of components dependent on the z-axis // Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :) // Try to avoid customizing these :)
@zindex-navbar: 1000; @zindex-navbar: 1000;
@zindex-dropdown: 1000; @zindex-dropdown: 1000;
@zindex-popover: 1010; @zindex-popover: 1010;
@zindex-tooltip: 1030; @zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal-background: 1040;
@zindex-modal: 1050; @zindex-modal: 1050;
// Media queries breakpoints // Media queries breakpoints
// -------------------------------------------------- // --------------------------------------------------
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px; @screen-xs: 480px;
@screen-xs-min: @screen-xs; @screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min; @screen-phone: @screen-xs-min;
// Small screen / tablet // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px; @screen-sm: 768px;
@screen-sm-min: @screen-sm; @screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min; @screen-tablet: @screen-sm-min;
// Medium screen / desktop // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px; @screen-md: 992px;
@screen-md-min: @screen-md; @screen-md-min: @screen-md;
@screen-desktop: @screen-md-min; @screen-desktop: @screen-md-min;
// Large screen / wide desktop // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-min: @screen-lg; @screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min; @screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1); @screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1); @screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1); @screen-md-max: (@screen-lg-min - 1);
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------
// Number of columns in the grid system // Number of columns in the grid system
@grid-columns: 12; @grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns // Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
// Point at which the navbar stops collapsing // Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-sm-min; @grid-float-breakpoint: @screen-sm-min;
// Navbar // Navbar
// ------------------------- // -------------------------
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: #f8f8f8; @navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links // Navbar links
@navbar-default-link-color: #777; @navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333; @navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555; @navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@navbar-default-toggle-hover-bg: #ddd; @navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc; @navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd; @navbar-default-toggle-border-color: #ddd;
// Inverted navbar // Inverted navbar
// //
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: @gray-light; @navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222; @navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @gray-light; @navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444; @navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent; @navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label // Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color; @navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff; @navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent; @navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333; @navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333; @navbar-inverse-toggle-border-color: #333;
// Navs // Navs
// ------------------------- // -------------------------
@nav-link-padding: 10px 15px; @nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter; @nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light; @nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light; @nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff; @nav-open-link-hover-color: #fff;
@nav-open-caret-border-color: #fff; @nav-open-caret-border-color: #fff;
// Tabs // Tabs
@nav-tabs-border-color: #ddd; @nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gray-lighter; @nav-tabs-link-hover-border-color: @gray-lighter;
@nav-tabs-active-link-hover-bg: @body-bg; @nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gray; @nav-tabs-active-link-hover-color: @gray;
@nav-tabs-active-link-hover-border-color: #ddd; @nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd; @nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg; @nav-tabs-justified-active-link-border-color: @body-bg;
// Pills // Pills
@nav-pills-border-radius: @border-radius-base; @nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color; @nav-pills-active-link-hover-color: @component-active-color;
// Pagination // Pagination
// ------------------------- // -------------------------
@pagination-bg: #fff; @pagination-bg: #fff;
@pagination-border: #ddd; @pagination-border: #ddd;
@pagination-hover-bg: @gray-lighter; @pagination-hover-bg: @gray-lighter;
@pagination-active-bg: @brand-primary; @pagination-active-bg: @brand-primary;
@pagination-active-color: #fff; @pagination-active-color: #fff;
@pagination-disabled-color: @gray-light;
@pagination-disabled-color: @gray-light;
// Pager // Pager
// ------------------------- // -------------------------
@pager-border-radius: 15px; @pager-border-radius: 15px;
@pager-disabled-color: @gray-light; @pager-disabled-color: @gray-light;
// Jumbotron // Jumbotron
// ------------------------- // -------------------------
@jumbotron-padding: 30px; @jumbotron-padding: 30px;
@jumbotron-color: inherit; @jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-heading-color: inherit;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@state-success-text: #468847; @state-success-text: #468847;
@state-success-bg: #dff0d8; @state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%); @state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad; @state-info-text: #3a87ad;
@state-info-bg: #d9edf7; @state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%); @state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #c09853; @state-warning-text: #c09853;
@state-warning-bg: #fcf8e3; @state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Tooltips // Tooltips
// ------------------------- // -------------------------
@tooltip-max-width: 200px; @tooltip-max-width: 200px;
@tooltip-color: #fff; @tooltip-color: #fff;
@tooltip-bg: #000; @tooltip-bg: #000;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers // Popovers
// ------------------------- // -------------------------
@popover-bg: #fff; @popover-bg: #fff;
@popover-max-width: 276px; @popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2); @popover-border-color: rgba(0, 0, 0, .2);
@popover-fallback-border-color: #ccc; @popover-fallback-border-color: #ccc;
@popover-title-bg: darken(@popover-bg, 3%); @popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
@popover-arrow-color: #fff; @popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0, 0, 0, .25);
@popover-arrow-outer-fallback-color: #999;
// Labels // Labels
// ------------------------- // -------------------------
@label-default-bg: @gray-light; @label-default-bg: @gray-light;
@label-primary-bg: @brand-primary; @label-primary-bg: @brand-primary;
@label-success-bg: @brand-success; @label-success-bg: @brand-success;
@label-info-bg: @brand-info; @label-info-bg: @brand-info;
@label-warning-bg: @brand-warning; @label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger; @label-danger-bg: @brand-danger;
@label-color: #fff;
@label-link-hover-color: #fff;
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals // Modals
// ------------------------- // -------------------------
@modal-inner-padding: 20px; @modal-inner-padding: 20px;
@modal-title-padding: 15px; @modal-title-padding: 15px;
@modal-title-line-height: @line-height-base; @modal-title-line-height: @line-height-base;
@modal-content-bg: #fff; @modal-content-bg: #fff;
@modal-content-border-color: rgba(0,0,0,.2); @modal-content-border-color: rgba(0, 0, 0, .2);
@modal-content-fallback-border-color: #999; @modal-content-fallback-border-color: #999;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
@modal-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts // Alerts
// ------------------------- // -------------------------
@alert-padding: 15px; @alert-padding: 15px;
@alert-border-radius: @border-radius-base; @alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold; @alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg; @alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text; @alert-success-text: @state-success-text;
@alert-success-border: @state-success-border; @alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg; @alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text; @alert-info-text: @state-info-text;
@alert-info-border: @state-info-border; @alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg; @alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text; @alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border; @alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars // Progress bars
// ------------------------- // -------------------------
@progress-bg: #f5f5f5; @progress-bg: #f5f5f5;
@progress-bar-color: #fff; @progress-bar-color: #fff;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group // List group
// ------------------------- // -------------------------
@list-group-bg: #fff; @list-group-bg: #fff;
@list-group-border: #ddd; @list-group-border: #ddd;
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5; @list-group-hover-bg: #f5f5f5;
@list-group-active-color: @component-active-color; @list-group-active-color: @component-active-color;
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels // Panels
// ------------------------- // -------------------------
@panel-bg: #fff; @panel-bg: #fff;
@panel-inner-border: #ddd; @panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
@panel-footer-bg: #f5f5f5; @panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark; @panel-default-text: @gray-dark;
@panel-default-border: #ddd; @panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5; @panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff; @panel-primary-text: #fff;
@panel-primary-border: @brand-primary; @panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary; @panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text; @panel-success-text: @state-success-text;
@panel-success-border: @state-success-border; @panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg; @panel-success-heading-bg: @state-success-bg;
@panel-warning-text: @state-warning-text; @panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border; @panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg; @panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text; @panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails // Thumbnails
// ------------------------- // -------------------------
@thumbnail-padding: 4px; @thumbnail-padding: 4px;
@thumbnail-bg: @body-bg; @thumbnail-bg: @body-bg;
@thumbnail-border: #ddd; @thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base; @thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells // Wells
// ------------------------- // -------------------------
@well-bg: #f5f5f5; @well-bg: #f5f5f5;
@well-bg-drk: #2c3e50; @well-bg-drk: #2c3e50;
// Badges // Badges
// ------------------------- // -------------------------
@badge-color: #fff; @badge-color: #fff;
@badge-link-hover-color: #fff; @badge-link-hover-color: #fff;
@badge-bg: @gray-light; @badge-bg: @gray-light;
@badge-active-color: @link-color; @badge-active-color: @link-color;
@badge-active-bg: #fff; @badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs // Breadcrumbs
// ------------------------- // -------------------------
@breadcrumb-bg: #f5f5f5; @breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc; @breadcrumb-color: #ccc;
@breadcrumb-active-color: @gray-light; @breadcrumb-active-color: @gray-light;
@breadcrumb-separator: "/"; @breadcrumb-separator: "/";
// Carousel // Carousel
// ------------------------ // ------------------------
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); @carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
@carousel-control-color: #fff; @carousel-control-color: #fff;
@carousel-control-width: 15%; @carousel-control-width: 15%;
@carousel-control-opacity: .5; @carousel-control-opacity: .5;
@carousel-control-font-size: 20px; @carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff; @carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff; @carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
@carousel-caption-color: #fff;
// Close // Close
// ------------------------ // ------------------------
@close-font-weight: bold; @close-font-weight: bold;
@close-color: #000; @close-color: #000;
@close-text-shadow: 0 1px 0 #fff; @close-text-shadow: 0 1px 0 #fff;
// Code // Code
// ------------------------ // ------------------------
@code-color: #c7254e; @code-color: #c7254e;
@code-bg: #f9f2f4; @code-bg: #f9f2f4;
@pre-bg: #f5f5f5; @pre-bg: #f5f5f5;
@pre-color: @gray-dark; @pre-color: @gray-dark;
@pre-border-color: #ccc; @pre-border-color: #ccc;
@pre-scrollable-max-height: 340px; @pre-scrollable-max-height: 340px;
// Type // Type
// ------------------------ // ------------------------
@text-muted: @gray-light; @text-muted: @gray-light;
@abbr-border-color: @gray-light; @abbr-border-color: @gray-light;
@headings-small-color: @gray-light; @headings-small-color: @gray-light;
@blockquote-small-color: @gray-light; @blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter; @page-header-border-color: @gray-lighter;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------
// Hr border color // Hr border color
@hr-border: @gray-lighter; @hr-border: @gray-lighter;
// Horizontal forms & lists // Horizontal forms & lists
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;
// Container sizes // Container sizes
// -------------------------------------------------- // --------------------------------------------------
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet; @container-sm: @container-tablet;
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: ((940px + @grid-gutter-width));
@container-md: @container-desktop; @container-md: @container-desktop;
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width)); @container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop; @container-lg: @container-large-desktop;

View File

@@ -2,7 +2,6 @@
// Wells // Wells
// -------------------------------------------------- // --------------------------------------------------
// Base class // Base class
.well { .well {
min-height: 20px; min-height: 20px;
@@ -11,10 +10,11 @@
background-color: @well-bg; background-color: @well-bg;
border: 1px solid darken(@well-bg, 7%); border: 1px solid darken(@well-bg, 7%);
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
blockquote { blockquote {
border-color: #ddd; border-color: #ddd;
border-color: rgba(0,0,0,.15); border-color: rgba(0, 0, 0, .15);
} }
} }
@@ -23,6 +23,7 @@
padding: 24px; padding: 24px;
border-radius: @border-radius-large; border-radius: @border-radius-large;
} }
.well-sm { .well-sm {
padding: 9px; padding: 9px;
border-radius: @border-radius-small; border-radius: @border-radius-small;
@@ -31,7 +32,7 @@
// Dark well // Dark well
.dark-well { .dark-well {
background-color: @well-bg-drk; background-color: @well-bg-drk;
border-color: darken(@well-bg-drk, 7%); border-color: darken(@well-bg-drk, 7%);
color: #fff; color: #fff;
} }

View File

@@ -1,34 +1,33 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var presentTask = require('../view/presenter/task'); const presentTask = require('../view/presenter/task');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/', function(req, res, next) { app.express.get('/', (request, response, next) => {
app.webservice.tasks.get({lastres: true}, function(err, tasks) { app.webservice.tasks.get({lastres: true}, (error, tasks) => {
if (err) { if (error) {
return next(err); return next(error);
} }
res.render('index', { response.render('index', {
tasks: tasks.map(presentTask), tasks: tasks.map(presentTask),
deleted: (typeof req.query.deleted !== 'undefined'), deleted: (typeof request.query.deleted !== 'undefined'),
isHomePage: true isHomePage: true
}); });
}); });

View File

@@ -1,57 +1,79 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var getStandards = require('../data/standards'); const getStandards = require('../data/standards');
const httpHeaders = require('http-headers');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/new', function(req, res) { app.express.get('/new', (request, response) => {
var standards = getStandards().map(function(standard) { const standards = getStandards().map(standard => {
if (standard.title === 'WCAG2AA') { if (standard.title === 'WCAG2AA') {
standard.selected = true; standard.selected = true;
} }
return standard; return standard;
}); });
res.render('new', { response.render('new', {
standards: standards, standards: standards,
isNewTaskPage: true isNewTaskPage: true
}); });
}); });
app.express.post('/new', function(req, res) { app.express.post('/new', (request, response) => {
var newTask = {
name: req.body.name, let parsedActions;
url: req.body.url, if (request.body.actions) {
standard: req.body.standard, parsedActions = request.body.actions.split(/[\r\n]+/)
ignore: req.body.ignore || [], .map(action => {
timeout: req.body.timeout, return action.trim();
username: req.body.username, })
password: req.body.password .filter(action => {
return Boolean(action);
});
}
let parsedHeaders;
if (request.body.headers) {
parsedHeaders = httpHeaders(request.body.headers, true);
}
const newTask = {
name: request.body.name,
url: request.body.url,
standard: request.body.standard,
ignore: request.body.ignore || [],
timeout: request.body.timeout || undefined,
wait: request.body.wait || undefined,
actions: parsedActions,
username: request.body.username || undefined,
password: request.body.password || undefined,
headers: parsedHeaders,
hideElements: request.body.hideElements || undefined
}; };
app.webservice.tasks.create(newTask, function(err, task) {
if (err) { app.webservice.tasks.create(newTask, (error, task) => {
var standards = getStandards().map(function(standard) { if (error) {
const standards = getStandards().map(standard => {
if (standard.title === newTask.standard) { if (standard.title === newTask.standard) {
standard.selected = true; standard.selected = true;
} }
standard.rules = standard.rules.map(function(rule) { standard.rules = standard.rules.map(rule => {
if (newTask.ignore.indexOf(rule.name) !== -1) { if (newTask.ignore.indexOf(rule.name) !== -1) {
rule.ignored = true; rule.ignored = true;
} }
@@ -59,13 +81,15 @@ function route(app) {
}); });
return standard; return standard;
}); });
return res.render('new', { newTask.actions = request.body.actions;
error: err, newTask.headers = request.body.headers;
return response.render('new', {
error: error,
standards: standards, standards: standards,
task: newTask task: newTask
}); });
} }
res.redirect('/' + task.id + '?added'); response.redirect(`/${task.id}?added`);
}); });
}); });

View File

@@ -1,41 +1,40 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var moment = require('moment'); const moment = require('moment');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
function getTaskAndResult(req, res, next) { function getTaskAndResult(request, response, next) {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next('route'); return next('route');
} }
app.webservice app.webservice
.task(req.params.id) .task(request.params.id)
.result(req.params.rid) .result(request.params.rid)
.get({full: true}, function(err, result) { .get({full: true}, (error, result) => {
if (err) { if (error) {
return next('route'); return next('route');
} }
res.locals.task = task; response.locals.task = task;
res.locals.result = result; response.locals.result = result;
next(); next();
}); });
}); });
@@ -48,7 +47,7 @@ function route(app) {
task.url task.url
.replace(/^https?:\/\//i, '') .replace(/^https?:\/\//i, '')
.replace(/\/$/, '') .replace(/\/$/, '')
.replace(/[^a-z0-9\.\-\_]+/gi, '-'), .replace(/[^a-z0-9.\-_]+/gi, '-'),
'--', '--',
task.standard.toLowerCase(), task.standard.toLowerCase(),
'--', '--',
@@ -58,11 +57,11 @@ function route(app) {
].join(''); ].join('');
} }
app.express.get('/:id/:rid.csv', getTaskAndResult, function(req, res) { app.express.get('/:id/:rid.csv', getTaskAndResult, (request, response) => {
var task = res.locals.task; const task = response.locals.task;
var result = res.locals.result; const result = response.locals.result;
var rows = ['"code","message","type","context","selector"']; const rows = ['"code","message","type","context","selector"'];
result.results.forEach(function(msg) { result.results.forEach(msg => {
rows.push([ rows.push([
JSON.stringify(msg.code), JSON.stringify(msg.code),
JSON.stringify(msg.message), JSON.stringify(msg.message),
@@ -71,18 +70,18 @@ function route(app) {
JSON.stringify(msg.selector) JSON.stringify(msg.selector)
].join(',')); ].join(','));
}); });
res.attachment(getDownloadFileName(task, result, 'csv')); response.attachment(getDownloadFileName(task, result, 'csv'));
res.send(rows.join('\n')); response.send(rows.join('\n'));
}); });
app.express.get('/:id/:rid.json', getTaskAndResult, function(req, res) { app.express.get('/:id/:rid.json', getTaskAndResult, (request, response) => {
var task = res.locals.task; const task = response.locals.task;
var result = res.locals.result; const result = response.locals.result;
res.attachment(getDownloadFileName(task, result, 'json')); response.attachment(getDownloadFileName(task, result, 'json'));
delete task.id; delete task.id;
delete result.id; delete result.id;
result.task = task; result.task = task;
res.send(result); response.send(result);
}); });
} }

View File

@@ -1,41 +1,40 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var presentTask = require('../../view/presenter/task'); const presentTask = require('../../view/presenter/task');
var presentResult = require('../../view/presenter/result'); const presentResult = require('../../view/presenter/result');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/:id/:rid', function(req, res, next) { app.express.get('/:id/:rid', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
app.webservice app.webservice
.task(req.params.id) .task(request.params.id)
.result(req.params.rid) .result(request.params.rid)
.get({full: true}, function(err, result) { .get({full: true}, (error, result) => {
if (err) { if (error) {
return next(); return next();
} }
res.render('result', { response.render('result', {
task: presentTask(task), task: presentTask(task),
mainResult: presentResult(result), mainResult: presentResult(result),
isResultPage: true isResultPage: true

View File

@@ -1,45 +1,44 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var presentTask = require('../../view/presenter/task'); const presentTask = require('../../view/presenter/task');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/:id/delete', function(req, res, next) { app.express.get('/:id/delete', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
res.render('task/delete', { response.render('task/delete', {
task: presentTask(task), task: presentTask(task),
isTaskSubPage: true isTaskSubPage: true
}); });
}); });
}); });
app.express.post('/:id/delete', function(req, res, next) { app.express.post('/:id/delete', (request, response, next) => {
app.webservice.task(req.params.id).remove(function(err) { app.webservice.task(request.params.id).remove(error => {
if (err) { if (error) {
return next(); return next();
} }
res.redirect('/?deleted'); response.redirect('/?deleted');
}); });
}); });

View File

@@ -1,38 +1,38 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var presentTask = require('../../view/presenter/task'); const presentTask = require('../../view/presenter/task');
var getStandards = require('../../data/standards'); const getStandards = require('../../data/standards');
const httpHeaders = require('http-headers');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/:id/edit', function(req, res, next) { app.express.get('/:id/edit', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
var standards = getStandards().map(function(standard) { const standards = getStandards().map(standard => {
if (standard.title === task.standard) { if (standard.title === task.standard) {
standard.selected = true; standard.selected = true;
} }
standard.rules = standard.rules.map(function(rule) { standard.rules = standard.rules.map(rule => {
if (task.ignore.indexOf(rule.name) !== -1) { if (task.ignore.indexOf(rule.name) !== -1) {
rule.ignored = true; rule.ignored = true;
} }
@@ -40,8 +40,9 @@ function route(app) {
}); });
return standard; return standard;
}); });
res.render('task/edit', { task.actions = (task.actions ? task.actions.join('\n') : '');
edited: (typeof req.query.edited !== 'undefined'), response.render('task/edit', {
edited: (typeof request.query.edited !== 'undefined'),
standards: standards, standards: standards,
task: presentTask(task), task: presentTask(task),
isTaskSubPage: true isTaskSubPage: true
@@ -49,24 +50,48 @@ function route(app) {
}); });
}); });
app.express.post('/:id/edit', function(req, res, next) { app.express.post('/:id/edit', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
req.body.ignore = req.body.ignore || []; const originalActions = request.body.actions;
app.webservice.task(req.params.id).edit(req.body, function(err) { const originalHeaders = request.body.headers;
if (err) { request.body.ignore = request.body.ignore || [];
task.name = req.body.name; request.body.timeout = request.body.timeout || undefined;
task.ignore = req.body.ignore; request.body.wait = request.body.wait || undefined;
task.timeout = req.body.timeout; if (request.body.actions) {
task.username = req.body.username; request.body.actions = request.body.actions.split(/[\r\n]+/)
task.password = req.body.password; .map(action => {
var standards = getStandards().map(function(standard) { return action.trim();
})
.filter(action => {
return Boolean(action);
});
}
if (!request.body.actions) {
request.body.actions = [];
}
request.body.username = request.body.username || undefined;
request.body.password = request.body.password || undefined;
request.body.hideElements = request.body.hideElements || undefined;
request.body.headers = httpHeaders(request.body.headers || '', true);
app.webservice.task(request.params.id).edit(request.body, error => {
if (error) {
task.name = request.body.name;
task.ignore = request.body.ignore;
task.timeout = request.body.timeout;
task.wait = request.body.wait;
task.actions = originalActions;
task.username = request.body.username;
task.password = request.body.password;
task.headers = originalHeaders;
task.hideElements = request.body.hideElements;
const standards = getStandards().map(standard => {
if (standard.title === task.standard) { if (standard.title === task.standard) {
standard.selected = true; standard.selected = true;
} }
standard.rules = standard.rules.map(function(rule) { standard.rules = standard.rules.map(rule => {
if (task.ignore.indexOf(rule.name) !== -1) { if (task.ignore.indexOf(rule.name) !== -1) {
rule.ignored = true; rule.ignored = true;
} }
@@ -74,14 +99,14 @@ function route(app) {
}); });
return standard; return standard;
}); });
return res.render('task/edit', { return response.render('task/edit', {
error: err, error: error,
standards: standards, standards: standards,
task: task, task: task,
isTaskSubPage: true isTaskSubPage: true
}); });
} }
res.redirect('/' + req.params.id + '/edit?edited'); response.redirect(`/${request.params.id}/edit?edited`);
}); });
}); });
}); });

View File

@@ -5,20 +5,20 @@ module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.post('/:id/ignore', function(req, res, next) { app.express.post('/:id/ignore', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
var edit = { const edit = {
name: task.name, name: task.name,
ignore: task.ignore ignore: task.ignore
}; };
if (typeof req.body.rule === 'string') { if (typeof request.body.rule === 'string') {
edit.ignore.push(req.body.rule); edit.ignore.push(request.body.rule);
} }
app.webservice.task(req.params.id).edit(edit, function() { app.webservice.task(request.params.id).edit(edit, () => {
res.redirect('/' + req.params.id + '?rule-ignored'); response.redirect(`/${request.params.id}?rule-ignored`);
}); });
}); });
}); });

View File

@@ -1,47 +1,46 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var presentTask = require('../../view/presenter/task'); const presentTask = require('../../view/presenter/task');
var presentResult = require('../../view/presenter/result'); const presentResult = require('../../view/presenter/result');
var presentResultList = require('../../view/presenter/result-list'); const presentResultList = require('../../view/presenter/result-list');
module.exports = route; module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/:id', function(req, res, next) { app.express.get('/:id', (request, response, next) => {
app.webservice.task(req.params.id).get({lastres: true}, function(err, task) { app.webservice.task(request.params.id).get({lastres: true}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
app.webservice.task(req.params.id).results({}, function(err, results) { app.webservice.task(request.params.id).results({}, (error, results) => {
if (err) { if (error) {
return next(err); return next(error);
} }
var presentedResults = presentResultList(results.map(presentResult)); const presentedResults = presentResultList(results.map(presentResult));
res.render('task', { response.render('task', {
task: presentTask(task), task: presentTask(task),
results: presentedResults, results: presentedResults,
mainResult: task.lastResult || null, mainResult: task.lastResult || null,
added: (typeof req.query.added !== 'undefined'), added: (typeof request.query.added !== 'undefined'),
running: (typeof req.query.running !== 'undefined'), running: (typeof request.query.running !== 'undefined'),
ruleIgnored: (typeof req.query['rule-ignored'] !== 'undefined'), ruleIgnored: (typeof request.query['rule-ignored'] !== 'undefined'),
ruleUnignored: (typeof req.query['rule-unignored'] !== 'undefined'), ruleUnignored: (typeof request.query['rule-unignored'] !== 'undefined'),
hasOneResult: (presentedResults.length < 2), hasOneResult: (presentedResults.length < 2),
isTaskPage: true isTaskPage: true
}); });

View File

@@ -1,18 +1,17 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
module.exports = route; module.exports = route;
@@ -20,12 +19,12 @@ module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.get('/:id/run', function(req, res, next) { app.express.get('/:id/run', (request, response, next) => {
app.webservice.task(req.params.id).run(function(err) { app.webservice.task(request.params.id).run(error => {
if (err) { if (error) {
return next(); return next();
} }
res.redirect('/' + req.params.id + '?running'); response.redirect(`/${request.params.id}?running`);
}); });
}); });

View File

@@ -5,21 +5,21 @@ module.exports = route;
// Route definition // Route definition
function route(app) { function route(app) {
app.express.post('/:id/unignore', function(req, res, next) { app.express.post('/:id/unignore', (request, response, next) => {
app.webservice.task(req.params.id).get({}, function(err, task) { app.webservice.task(request.params.id).get({}, (error, task) => {
if (err) { if (error) {
return next(); return next();
} }
var edit = { const edit = {
name: task.name, name: task.name,
ignore: task.ignore ignore: task.ignore
}; };
var indexOfRule = edit.ignore.indexOf(req.body.rule); const indexOfRule = edit.ignore.indexOf(request.body.rule);
if (typeof req.body.rule === 'string' && indexOfRule !== -1) { if (typeof request.body.rule === 'string' && indexOfRule !== -1) {
edit.ignore.splice(indexOfRule, 1); edit.ignore.splice(indexOfRule, 1);
} }
app.webservice.task(req.params.id).edit(edit, function() { app.webservice.task(request.params.id).edit(edit, () => {
res.redirect('/' + req.params.id + '?rule-unignored'); response.redirect(`/${request.params.id}?rule-unignored`);
}); });
}); });
}); });

15
test/.eslintrc.js Normal file
View File

@@ -0,0 +1,15 @@
'use strict';
// Clone the main config
var config = module.exports = JSON.parse(JSON.stringify(require('../.eslintrc')));
// We use `this` all over the integration tests
config.rules['no-invalid-this'] = 'off';
// Because of our use of `this`, arrow functions
// aren't really gonna work in the integration tests
config.rules['prefer-arrow-callback'] = 'off';
// Disable max line length/statements
config.rules['max-len'] = 'off';
config.rules['max-statements'] = 'off';

View File

@@ -1,22 +1,23 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable requireArrowFunctions
'use strict'; 'use strict';
var jsdom = require('jsdom'); const cheerio = require('cheerio');
var request = require('request'); const request = require('request');
module.exports = createNavigator; module.exports = createNavigator;
@@ -29,36 +30,30 @@ function createNavigator(baseUrl, store) {
store.request = null; store.request = null;
store.response = null; store.response = null;
store.status = null; store.status = null;
store.window = null;
request({ request({
url: baseUrl + opts.endpoint, url: baseUrl + opts.endpoint,
method: opts.method || 'GET', method: opts.method || 'GET',
body: opts.body, form: opts.form,
json: true, json: opts.json || false,
qs: opts.query, qs: opts.query,
followAllRedirects: true followAllRedirects: true
}, function(err, res, body) { }, function(error, response, body) {
if (error) {
return callback(error);
}
store.body = body; store.body = body;
store.request = res.request; store.request = response.request;
store.response = res; store.response = response;
store.status = res.statusCode; store.status = response.statusCode;
if (opts.nonDom) { if (opts.nonDom) {
store.window = null;
store.dom = null; store.dom = null;
callback();
} else { } else {
jsdom.env( store.dom = cheerio.load(store.body);
store.body,
function(err, window) {
store.window = window;
store.dom = window.document;
callback();
}
);
} }
callback();
}); });

View File

@@ -1,29 +1,30 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable requireArrowFunctions
'use strict'; 'use strict';
var createClient = require('pa11y-webservice-client-node'); const createClient = require('pa11y-webservice-client-node');
module.exports = createWebserviceClient; module.exports = createWebserviceClient;
// Create a webservice client // Create a webservice client
function createWebserviceClient(config) { function createWebserviceClient(config) {
var webserviceUrl = config.webservice; let webserviceUrl = config.webservice;
if (typeof webserviceUrl === 'object') { if (typeof webserviceUrl === 'object') {
webserviceUrl = 'http://' + webserviceUrl.host + ':' + webserviceUrl.port + '/'; webserviceUrl = `http://${webserviceUrl.host}:${webserviceUrl.port}/`;
} }
return createClient(webserviceUrl); return createClient(webserviceUrl);
} }

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /', function() { describe.only('GET /', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/' endpoint: '/'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -32,61 +33,61 @@ describe('GET /', function() {
}); });
it('should display an "Add new URL" button', function() { it('should display an "Add new URL" button', function() {
var elem = this.last.dom.querySelectorAll('[data-test=add-task]'); const elem = this.last.dom('[data-test=add-task]');
assert.strictEqual(elem.length, 1); assert.strictEqual(elem.length, 1);
assert.strictEqual(elem[0].getAttribute('href'), '/new'); assert.strictEqual(elem.eq(0).attr('href'), '/new');
}); });
it('should display all of the expected tasks', function() { it('should display all of the expected tasks', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.strictEqual(tasks.length, 3); assert.strictEqual(tasks.length, 3);
assert.match(tasks[0].textContent, /npg home\s+\(wcag2aa\)/i); assert.match(tasks.eq(0).text(), /npg home\s+\(wcag2aa\)/i);
assert.match(tasks[1].textContent, /npg home\s+\(wcag2aaa\)/i); assert.match(tasks.eq(1).text(), /npg home\s+\(wcag2aaa\)/i);
assert.match(tasks[2].textContent, /nature news\s+\(section508\)/i); assert.match(tasks.eq(2).text(), /nature news\s+\(section508\)/i);
}); });
it('should have links to each task', function() { it('should have links to each task', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001"]').length, 1); assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001"]').length, 1);
assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002"]').length, 1); assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002"]').length, 1);
assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003"]').length, 1); assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003"]').length, 1);
}); });
it('should display an "Edit" button for each task', function() { it('should display an "Edit" button for each task', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1); assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/edit"]').length, 1);
assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/edit"]').length, 1); assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/edit"]').length, 1);
assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/edit"]').length, 1); assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/edit"]').length, 1);
}); });
it('should display a "Delete" button for each task', function() { it('should display a "Delete" button for each task', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1); assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/delete"]').length, 1);
assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/delete"]').length, 1); assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/delete"]').length, 1);
assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/delete"]').length, 1); assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/delete"]').length, 1);
}); });
it('should display a "Run" button for each task', function() { it('should display a "Run" button for each task', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.strictEqual(tasks[0].querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1); assert.strictEqual(tasks.eq(0).find('[href="/abc000000000000000000001/run"]').length, 1);
assert.strictEqual(tasks[1].querySelectorAll('[href="/abc000000000000000000002/run"]').length, 1); assert.strictEqual(tasks.eq(1).find('[href="/abc000000000000000000002/run"]').length, 1);
assert.strictEqual(tasks[2].querySelectorAll('[href="/abc000000000000000000003/run"]').length, 1); assert.strictEqual(tasks.eq(2).find('[href="/abc000000000000000000003/run"]').length, 1);
}); });
it('should display the task result counts if the task has been run', function() { it('should display the task result counts if the task has been run', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.match(tasks[0].textContent, /1\s*errors/i); assert.match(tasks.eq(0).text(), /1\s*errors/i);
assert.match(tasks[0].textContent, /2\s*warnings/i); assert.match(tasks.eq(0).text(), /2\s*warnings/i);
assert.match(tasks[0].textContent, /3\s*notices/i); assert.match(tasks.eq(0).text(), /3\s*notices/i);
}); });
it('should display a message indicating that there are no results if the task has not been run', function() { it('should display a message indicating that there are no results if the task has not been run', function() {
var tasks = this.last.dom.querySelectorAll('[data-test=task]'); const tasks = this.last.dom('[data-test=task]');
assert.match(tasks[2].textContent, /no results/i); assert.match(tasks.eq(2).text(), /no results/i);
}); });
it('should not display an alert message', function() { it('should not display an alert message', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[data-test=alert]').length, 0); assert.strictEqual(this.last.dom('[data-test=alert]').length, 0);
}); });
}); });

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /new', function() { describe('GET /new', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/new' endpoint: '/new'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -32,62 +33,86 @@ describe('GET /new', function() {
}); });
it('should not display an error message', function() { it('should not display an error message', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 0); assert.strictEqual(this.last.dom('[data-test=error]').length, 0);
}); });
it('should have an "Add new URL" form', function() { it('should have an "Add new URL" form', function() {
var form = this.last.dom.querySelectorAll('[data-test=new-url-form]')[0]; const form = this.last.dom('[data-test=new-url-form]').eq(0);
assert.isDefined(form); assert.isDefined(form);
assert.strictEqual(form.getAttribute('action'), '/new'); assert.strictEqual(form.attr('action'), '/new');
assert.strictEqual(form.getAttribute('method'), 'post'); assert.strictEqual(form.attr('method'), 'post');
}); });
describe('"Add New URL" form', function() { describe('"Add New URL" form', function() {
beforeEach(function() { beforeEach(function() {
this.form = this.last.dom.querySelectorAll('[data-test=new-url-form]')[0]; this.form = this.last.dom('[data-test=new-url-form]').eq(0);
}); });
it('should have a "name" field', function() { it('should have a "name" field', function() {
var field = this.form.querySelectorAll('input[name=name]')[0]; const field = this.form.find('input[name=name]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text'); assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.getAttribute('value'), ''); assert.strictEqual(field.attr('value'), '');
}); });
it('should have a "url" field', function() { it('should have a "url" field', function() {
var field = this.form.querySelectorAll('input[name=url]')[0]; const field = this.form.find('input[name=url]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'url');
assert.strictEqual(field.attr('value'), '');
});
it('should have a "wait" field', function() {
const field = this.form.find('input[name=wait]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.attr('value'), '');
});
it('should have an "actions" field', function() {
const field = this.form.find('textarea[name=actions]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'url');
assert.strictEqual(field.getAttribute('value'), '');
}); });
it('should have a "username" field', function() { it('should have a "username" field', function() {
var field = this.form.querySelectorAll('input[name=username]')[0]; const field = this.form.find('input[name=username]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text'); assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.getAttribute('value'), ''); assert.strictEqual(field.attr('value'), '');
}); });
it('should have a "password" field', function() { it('should have a "password" field', function() {
var field = this.form.querySelectorAll('input[name=password]')[0]; const field = this.form.find('input[name=password]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text'); assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.getAttribute('value'), ''); assert.strictEqual(field.attr('value'), '');
}); });
it('should have a "standard" field', function() { it('should have a "standard" field', function() {
var field = this.form.querySelectorAll('select[name=standard]')[0]; const field = this.form.find('select[name=standard]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.querySelectorAll('option').length, 4); assert.strictEqual(field.find('option').length, 4);
}); });
it('should have "ignore" fields', function() { it('should have "ignore" fields', function() {
var fields = this.form.querySelectorAll('input[name="ignore[]"]'); const fields = this.form.find('input[name="ignore[]"]');
assert.isDefined(fields); assert.isDefined(fields);
assert.notStrictEqual(fields.length, 0); assert.notStrictEqual(fields.length, 0);
}); });
it('should have a "hideElements" field', function() {
const field = this.form.find('input[name=hideElements]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.attr('value'), '');
});
it('should have a "headers" field', function() {
const field = this.form.find('textarea[name=headers]').eq(0);
assert.isDefined(field);
});
}); });
}); });
@@ -97,15 +122,15 @@ describe('POST /new', function() {
describe('with invalid query', function() { describe('with invalid query', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'POST', method: 'POST',
endpoint: '/new', endpoint: '/new',
body: { form: {
name: '', name: '',
url: '' url: ''
} }
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -113,7 +138,7 @@ describe('POST /new', function() {
}); });
it('should display an error message', function() { it('should display an error message', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 1); assert.strictEqual(this.last.dom('[data-test=error]').length, 1);
}); });
}); });
@@ -121,16 +146,16 @@ describe('POST /new', function() {
describe('with valid query', function() { describe('with valid query', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'POST', method: 'POST',
endpoint: '/new', endpoint: '/new',
body: { form: {
name: 'Example', name: 'Example',
url: 'http://example.com/', url: 'http://example.com/',
standard: 'WCAG2AA' standard: 'WCAG2AA'
} }
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -138,9 +163,9 @@ describe('POST /new', function() {
}); });
it('should create the task', function(done) { it('should create the task', function(done) {
this.webservice.tasks.get({}, function(err, tasks) { this.webservice.tasks.get({}, function(error, tasks) {
assert.strictEqual(tasks.length, 4); assert.strictEqual(tasks.length, 4);
done(); done(error);
}); });
}); });
@@ -149,11 +174,11 @@ describe('POST /new', function() {
}); });
it('should not display an error message', function() { it('should not display an error message', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[data-test=error]').length, 0); assert.strictEqual(this.last.dom('[data-test=error]').length, 0);
}); });
it('should display a success message', function() { it('should display a success message', function() {
var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0]; const alert = this.last.dom('[data-test=alert]').eq(0);
assert.isDefined(alert); assert.isDefined(alert);
assert.match(alert.textContent, /url has been added/i); assert.match(alert.textContent, /url has been added/i);
}); });

View File

@@ -1,31 +1,32 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>/<result-id>.csv', function() { describe('GET /<task-id>/<result-id>.csv', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/def000000000000000000001.csv', endpoint: '/abc000000000000000000001/def000000000000000000001.csv',
nonDom: true nonDom: true
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -41,12 +42,13 @@ describe('GET /<task-id>/<result-id>.csv', function() {
describe('GET /<task-id>/<result-id>.json', function() { describe('GET /<task-id>/<result-id>.json', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/def000000000000000000001.json', endpoint: '/abc000000000000000000001/def000000000000000000001.json',
nonDom: true nonDom: true,
json: true
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -54,7 +56,7 @@ describe('GET /<task-id>/<result-id>.json', function() {
}); });
it('should output JSON results', function() { it('should output JSON results', function() {
var json = this.last.body; const json = this.last.body;
assert.strictEqual(json.task.name, 'NPG Home'); assert.strictEqual(json.task.name, 'NPG Home');
assert.strictEqual(json.task.url, 'nature.com'); assert.strictEqual(json.task.url, 'nature.com');
assert.strictEqual(json.count.error, 1); assert.strictEqual(json.count.error, 1);

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>/<result-id>', function() { describe('GET /<task-id>/<result-id>', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/def000000000000000000001' endpoint: '/abc000000000000000000001/def000000000000000000001'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -32,37 +33,37 @@ describe('GET /<task-id>/<result-id>', function() {
}); });
it('should display a "Download CSV" button', function() { it('should display a "Download CSV" button', function() {
var elem = this.last.dom.querySelectorAll('[data-test=download-csv]'); const elem = this.last.dom('[data-test=download-csv]');
assert.strictEqual(elem.length, 1); assert.strictEqual(elem.length, 1);
assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.csv'); assert.strictEqual(elem.eq(0).attr('href'), '/abc000000000000000000001/def000000000000000000001.csv');
}); });
it('should display a "Download JSON" button', function() { it('should display a "Download JSON" button', function() {
var elem = this.last.dom.querySelectorAll('[data-test=download-json]'); const elem = this.last.dom('[data-test=download-json]');
assert.strictEqual(elem.length, 1); assert.strictEqual(elem.length, 1);
assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000001/def000000000000000000001.json'); assert.strictEqual(elem.eq(0).attr('href'), '/abc000000000000000000001/def000000000000000000001.json');
}); });
it('should display a link back to the task', function() { it('should display a link back to the task', function() {
assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]')[0]); assert.isDefined(this.last.dom('[href="/abc000000000000000000001"]').eq(0));
}); });
it('should display errors', function() { it('should display errors', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-errors]')[0]; const elem = this.last.dom('[data-test=task-errors]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /errors \( 1 \)/i); assert.match(elem.text(), /errors \( 1 \)/i);
}); });
it('should display warnings', function() { it('should display warnings', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-warnings]')[0]; const elem = this.last.dom('[data-test=task-warnings]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /warnings \( 2 \)/i); assert.match(elem.text(), /warnings \( 2 \)/i);
}); });
it('should display notices', function() { it('should display notices', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-notices]')[0]; const elem = this.last.dom('[data-test=task-notices]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /notices \( 3 \)/i); assert.match(elem.text(), /notices \( 3 \)/i);
}); });
}); });

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>/delete', function() { describe('GET /<task-id>/delete', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/delete' endpoint: '/abc000000000000000000001/delete'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -32,14 +33,14 @@ describe('GET /<task-id>/delete', function() {
}); });
it('should have a "Delete URL" form', function() { it('should have a "Delete URL" form', function() {
var form = this.last.dom.querySelectorAll('[data-test=delete-url-form]')[0]; const form = this.last.dom('[data-test=delete-url-form]').eq(0);
assert.isDefined(form); assert.isDefined(form);
assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/delete'); assert.strictEqual(form.attr('action'), '/abc000000000000000000001/delete');
assert.strictEqual(form.getAttribute('method'), 'post'); assert.strictEqual(form.attr('method'), 'post');
}); });
it('should display a link back to the task page', function() { it('should display a link back to the task page', function() {
assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0); assert.greaterThan(this.last.dom('[href="/abc000000000000000000001"]').length, 0);
}); });
}); });
@@ -47,11 +48,11 @@ describe('GET /<task-id>/delete', function() {
describe('POST /<task-id>/delete', function() { describe('POST /<task-id>/delete', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'POST', method: 'POST',
endpoint: '/abc000000000000000000001/delete' endpoint: '/abc000000000000000000001/delete'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -59,8 +60,8 @@ describe('POST /<task-id>/delete', function() {
}); });
it('should delete the task', function(done) { it('should delete the task', function(done) {
this.webservice.task('abc000000000000000000001').get({}, function(err) { this.webservice.task('abc000000000000000000001').get({}, function(error) {
assert.strictEqual(err.message, 'Error 404'); assert.strictEqual(error.message, 'Error 404');
done(); done();
}); });
}); });
@@ -70,9 +71,9 @@ describe('POST /<task-id>/delete', function() {
}); });
it('should display a success message', function() { it('should display a success message', function() {
var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0]; const alert = this.last.dom('[data-test=alert]').eq(0);
assert.isDefined(alert); assert.isDefined(alert);
assert.match(alert.textContent, /been deleted/i); assert.match(alert.text(), /been deleted/i);
}); });
}); });

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>/edit', function() { describe('GET /<task-id>/edit', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/edit' endpoint: '/abc000000000000000000001/edit'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -32,59 +33,83 @@ describe('GET /<task-id>/edit', function() {
}); });
it('should have an "Edit URL" form', function() { it('should have an "Edit URL" form', function() {
var form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0]; const form = this.last.dom('[data-test=edit-url-form]').eq(0);
assert.isDefined(form); assert.isDefined(form);
assert.strictEqual(form.getAttribute('action'), '/abc000000000000000000001/edit'); assert.strictEqual(form.attr('action'), '/abc000000000000000000001/edit');
assert.strictEqual(form.getAttribute('method'), 'post'); assert.strictEqual(form.attr('method'), 'post');
}); });
it('should display a link back to the task page', function() { it('should display a link back to the task page', function() {
assert.greaterThan(this.last.dom.querySelectorAll('[href="/abc000000000000000000001"]').length, 0); assert.greaterThan(this.last.dom('[href="/abc000000000000000000001"]').length, 0);
}); });
describe('"Edit URL" form', function() { describe('"Edit URL" form', function() {
beforeEach(function() { beforeEach(function() {
this.form = this.last.dom.querySelectorAll('[data-test=edit-url-form]')[0]; this.form = this.last.dom('[data-test=edit-url-form]').eq(0);
}); });
it('should have a "name" field', function() { it('should have a "name" field', function() {
var field = this.form.querySelectorAll('input[name=name]')[0]; const field = this.form.find('input[name=name]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text'); assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.getAttribute('value'), 'NPG Home'); assert.strictEqual(field.attr('value'), 'NPG Home');
}); });
it('should have a disabled "url" field', function() { it('should have a disabled "url" field', function() {
var field = this.form.querySelectorAll('input[name=url]')[0]; const field = this.form.find('input[name=url]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'url');
assert.strictEqual(field.attr('value'), 'nature.com');
assert.isDefined(field.attr('disabled'));
});
it('should have a "wait" field', function() {
const field = this.form.find('input[name=wait]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.attr('value'), '0');
});
it('should have an "actions" field', function() {
const field = this.form.find('textarea[name=actions]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'url');
assert.strictEqual(field.getAttribute('value'), 'nature.com');
assert.isDefined(field.getAttribute('disabled'));
}); });
it('should have a disabled "standard" field', function() { it('should have a disabled "standard" field', function() {
var field = this.form.querySelectorAll('select[name=standard]')[0]; const field = this.form.find('select[name=standard]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.isDefined(field.getAttribute('disabled')); assert.isDefined(field.attr('disabled'));
}); });
it('should have a "username" field', function() { it('should have a "username" field', function() {
var field = this.form.querySelectorAll('input[name=username]')[0]; const field = this.form.find('input[name=username]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text'); assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.getAttribute('value'), 'user'); assert.strictEqual(field.attr('value'), 'user');
}); });
it('should have a "password" field', function() { it('should have a "password" field', function() {
var field = this.form.querySelectorAll('input[name=password]')[0]; const field = this.form.find('input[name=password]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.attr('value'), 'access');
});
it('should have a "hideElements" field', function() {
const field = this.form.find('input[name=hideElements]').eq(0);
assert.isDefined(field);
assert.strictEqual(field.attr('type'), 'text');
assert.strictEqual(field.attr('value'), '');
});
it('should have a "headers" field', function() {
const field = this.form.find('textarea[name=headers]').eq(0);
assert.isDefined(field); assert.isDefined(field);
assert.strictEqual(field.getAttribute('type'), 'text');
assert.strictEqual(field.getAttribute('value'), 'access');
}); });
it('should have "ignore" fields', function() { it('should have "ignore" fields', function() {
var fields = this.form.querySelectorAll('input[name="ignore[]"]'); const fields = this.form.find('input[name="ignore[]"]');
assert.isDefined(fields); assert.isDefined(fields);
assert.notStrictEqual(fields.length, 0); assert.notStrictEqual(fields.length, 0);
}); });
@@ -96,17 +121,17 @@ describe('GET /<task-id>/edit', function() {
describe('POST /<task-id>/edit', function() { describe('POST /<task-id>/edit', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'POST', method: 'POST',
endpoint: '/abc000000000000000000001/edit', endpoint: '/abc000000000000000000001/edit',
body: { form: {
name: 'foo', name: 'foo',
username: 'newuser', username: 'newuser',
password: 'secure', password: 'secure',
ignore: ['bar', 'baz'] ignore: ['bar', 'baz']
} }
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -114,19 +139,19 @@ describe('POST /<task-id>/edit', function() {
}); });
it('should edit the task', function(done) { it('should edit the task', function(done) {
this.webservice.task('abc000000000000000000001').get({}, function(err, task) { this.webservice.task('abc000000000000000000001').get({}, function(error, task) {
assert.strictEqual(task.name, 'foo'); assert.strictEqual(task.name, 'foo');
assert.strictEqual(task.username, 'newuser'); assert.strictEqual(task.username, 'newuser');
assert.strictEqual(task.password, 'secure'); assert.strictEqual(task.password, 'secure');
assert.deepEqual(task.ignore, ['bar', 'baz']); assert.deepEqual(task.ignore, ['bar', 'baz']);
done(); done(error);
}); });
}); });
it('should display a success message', function() { it('should display a success message', function() {
var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0]; const alert = this.last.dom('[data-test=alert]').eq(0);
assert.isDefined(alert); assert.isDefined(alert);
assert.match(alert.textContent, /been saved/i); assert.match(alert.text(), /been saved/i);
}); });
}); });

View File

@@ -1,32 +1,33 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>', function() { describe('GET /<task-id>', function() {
describe('when task has results', function() { describe('when task has results', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001' endpoint: '/abc000000000000000000001'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -34,46 +35,46 @@ describe('GET /<task-id>', function() {
}); });
it('should display an "Edit" button', function() { it('should display an "Edit" button', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/edit"]').length, 1); assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/edit"]').length, 1);
}); });
it('should display a "Delete" button', function() { it('should display a "Delete" button', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/delete"]').length, 1); assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/delete"]').length, 1);
}); });
it('should display a "Run" button', function() { it('should display a "Run" button', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/run"]').length, 1); assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/run"]').length, 1);
}); });
it('should display a "Download CSV" button for the latest result', function() { it('should display a "Download CSV" button for the latest result', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.csv"]').length, 1); assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001.csv"]').length, 1);
}); });
it('should display a "Download JSON" button for the latest result', function() { it('should display a "Download JSON" button for the latest result', function() {
assert.strictEqual(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001.json"]').length, 1); assert.strictEqual(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001.json"]').length, 1);
}); });
it('should display links to all results', function() { it('should display links to all results', function() {
assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000001"]')[0]); assert.isDefined(this.last.dom('[href="/abc000000000000000000001/def000000000000000000001"]').eq(0));
assert.isDefined(this.last.dom.querySelectorAll('[href="/abc000000000000000000001/def000000000000000000003"]')[0]); assert.isDefined(this.last.dom('[href="/abc000000000000000000001/def000000000000000000003"]').eq(0));
}); });
it('should display errors', function() { it('should display errors', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-errors]')[0]; const elem = this.last.dom('[data-test=task-errors]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /errors \( 1 \)/i); assert.match(elem.text(), /errors \( 1 \)/i);
}); });
it('should display warnings', function() { it('should display warnings', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-warnings]')[0]; const elem = this.last.dom('[data-test=task-warnings]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /warnings \( 2 \)/i); assert.match(elem.text(), /warnings \( 2 \)/i);
}); });
it('should display notices', function() { it('should display notices', function() {
var elem = this.last.dom.querySelectorAll('[data-test=task-notices]')[0]; const elem = this.last.dom('[data-test=task-notices]').eq(0);
assert.isDefined(elem); assert.isDefined(elem);
assert.match(elem.textContent, /notices \( 3 \)/i); assert.match(elem.text(), /notices \( 3 \)/i);
}); });
}); });
@@ -81,11 +82,11 @@ describe('GET /<task-id>', function() {
describe('when task has no results', function() { describe('when task has no results', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000003' endpoint: '/abc000000000000000000003'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -93,15 +94,15 @@ describe('GET /<task-id>', function() {
}); });
it('should display a "Run" button', function() { it('should display a "Run" button', function() {
var elem = this.last.dom.querySelectorAll('[data-test=run-task]'); const elem = this.last.dom('[data-test=run-task]');
assert.strictEqual(elem.length, 1); assert.strictEqual(elem.length, 1);
assert.strictEqual(elem[0].getAttribute('href'), '/abc000000000000000000003/run'); assert.strictEqual(elem.eq(0).attr('href'), '/abc000000000000000000003/run');
}); });
it('should display a message indicating that there are no results', function() { it('should display a message indicating that there are no results', function() {
var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0]; const alert = this.last.dom('[data-test=alert]').eq(0);
assert.isDefined(alert); assert.isDefined(alert);
assert.match(alert.textContent, /there are no results to show/i); assert.match(alert.text(), /there are no results to show/i);
}); });
}); });

View File

@@ -1,30 +1,31 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable maximumLineLength, requireArrowFunctions
'use strict'; 'use strict';
var assert = require('proclaim'); const assert = require('proclaim');
describe('GET /<task-id>/run', function() { describe('GET /<task-id>/run', function() {
beforeEach(function(done) { beforeEach(function(done) {
var req = { const request = {
method: 'GET', method: 'GET',
endpoint: '/abc000000000000000000001/run' endpoint: '/abc000000000000000000001/run'
}; };
this.navigate(req, done); this.navigate(request, done);
}); });
it('should send a 200 status', function() { it('should send a 200 status', function() {
@@ -36,9 +37,9 @@ describe('GET /<task-id>/run', function() {
}); });
it('should display a success message', function() { it('should display a success message', function() {
var alert = this.last.dom.querySelectorAll('[data-test=alert]')[0]; const alert = this.last.dom('[data-test=alert]').eq(0);
assert.isDefined(alert); assert.isDefined(alert);
assert.match(alert.textContent, /new results are being generated/i); assert.match(alert.text(), /new results are being generated/i);
}); });
}); });

View File

@@ -1,33 +1,34 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
// jscs:disable requireArrowFunctions
'use strict'; 'use strict';
var config = require('../../config/test.json'); const config = require('../../config/test.json');
var createNavigator = require('./helper/navigate'); const createNavigator = require('./helper/navigate');
var createWebserviceClient = require('./helper/webservice'); const createWebserviceClient = require('./helper/webservice');
var loadFixtures = require('pa11y-webservice/data/fixture/load'); const loadFixtures = require('pa11y-webservice/data/fixture/load');
var request = require('request'); const request = require('request');
// Run before all tests // Run before all tests
before(function(done) { before(function(done) {
this.baseUrl = 'http://localhost:' + config.port; this.baseUrl = `http://localhost:${config.port}`;
this.last = {}; this.last = {};
this.navigate = createNavigator(this.baseUrl, this.last); this.navigate = createNavigator(this.baseUrl, this.last);
this.webservice = createWebserviceClient(config); this.webservice = createWebserviceClient(config);
assertTestAppIsRunning(this.baseUrl, function() { assertTestAppIsRunning(this.baseUrl, () => {
loadFixtures('test', config.webservice, done); loadFixtures('test', config.webservice, done);
}); });
}); });
@@ -39,8 +40,8 @@ afterEach(function(done) {
// Check that the test application is running, and exit if not // Check that the test application is running, and exit if not
function assertTestAppIsRunning(url, done) { function assertTestAppIsRunning(url, done) {
request(url, function(err) { request(url, error => {
if (err) { if (error) {
console.error('Error: Test app not started; run with `NODE_ENV=test node index.js`'); console.error('Error: Test app not started; run with `NODE_ENV=test node index.js`');
process.exit(1); process.exit(1);
} }

View File

@@ -1,18 +1,18 @@
{{! {{!
This file is part of pa11y-dashboard. This file is part of Pa11y Dashboard.
pa11y-dashboard is free software: you can redistribute it and/or modify Pa11y Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or the Free Software Foundation, either version 3 of the License, or
(at your option) any later version. (at your option) any later version.
pa11y-dashboard is distributed in the hope that it will be useful, Pa11y Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<div class="col-md-8"> <div class="col-md-8">
<h1>Hmmm, this page indicates a 404 error.</h1> <h1>Hmmm, this page indicates a 404 error.</h1>

View File

@@ -1,23 +1,27 @@
{{! {{!
This file is part of pa11y-dashboard. This file is part of Pa11y Dashboard.
pa11y-dashboard is free software: you can redistribute it and/or modify Pa11y Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or the Free Software Foundation, either version 3 of the License, or
(at your option) any later version. (at your option) any later version.
pa11y-dashboard is distributed in the hope that it will be useful, Pa11y Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<div class="col-md-8"> <div class="col-md-8">
<h1>Eeek! 500 error. This is serious.</h1> <h1>Eeek! 500 error.</h1>
<p class="h2">There isn't much you can do about this.</h2> <p class="h2">Let's see what we can do here:</h2>
<p class="h4">Give it another go or try the <a href="/">home page</a>.</h4> <ul>
<li>Do you have <a href="https://www.mongodb.com/">MongoDB</a> installed and <code>mongod</code> running?</li>
<li>Check out the <a href="https://github.com/pa11y/dashboard/blob/master/TROUBLESHOOTING.md">Troubleshooting doc</a> for more information.</li>
<li>Search for a related <a href="https://github.com/pa11y/dashboard/issues">Github issue</a>, or open one yourself.</li>
</ul>
{{#if error}} {{#if error}}
<h2>Stack-Trace</h2> <h2>Stack-Trace</h2>
<pre>{{error.stack}}</pre> <pre>{{error.stack}}</pre>

View File

@@ -0,0 +1,27 @@
// This file is part of Pa11y Dashboard.
//
// Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict';
module.exports = helper;
function helper(hbs) {
// Compare if one value is greater than another
hbs.registerHelper('ifgtr', function(conditional, condition, options) {
if (conditional > condition) {
// eslint-disable-next-line no-invalid-this
return options.fn(this);
}
});
}

View File

@@ -1,40 +1,34 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
var moment = require('moment'); const moment = require('moment');
module.exports = helper; module.exports = helper;
function helper(register) { function helper(hbs) {
// Format a date with Moment // Format a date with Moment
register('date-format', function(context, block) { hbs.registerHelper('date-format', (context, block) => {
var format = block.hash.format || 'YYYY-MM-DD HH:mm:ss'; const format = block.hash.format || 'YYYY-MM-DD HH:mm:ss';
return moment(context).format(format); return moment(context).format(format);
}); });
// Get a relative date // Get a relative date
register('date-relative', function(context) { hbs.registerHelper('date-relative', context => moment(context).fromNow());
return moment(context).fromNow();
});
register('date-timestamp', function(context) {
return moment(context).valueOf();
});
hbs.registerHelper('date-timestamp', context => moment(context).valueOf());
} }

View File

@@ -2,11 +2,9 @@
module.exports = helper; module.exports = helper;
function helper(register) { function helper(hbs) {
// Convert a string to lower-case // Convert a string to lower-case
register('lowercase', function(context) { hbs.registerHelper('lowercase', context => context.toLowerCase());
return context.toLowerCase();
});
} }

View File

@@ -1,26 +1,25 @@
// This file is part of pa11y-dashboard. // This file is part of Pa11y Dashboard.
// //
// pa11y-dashboard is free software: you can redistribute it and/or modify // Pa11y Dashboard is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by // it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or // the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version. // (at your option) any later version.
// //
// pa11y-dashboard is distributed in the hope that it will be useful, // Pa11y Dashboard is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of // but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details. // GNU General Public License for more details.
// //
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. // along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
'use strict'; 'use strict';
module.exports = helper; module.exports = helper;
function helper(register) { function helper(hbs) {
// Simplify url by removing (eg http://, https://, trailing slashes) from url // Simplify url by removing (eg http://, https://, trailing slashes) from url
register('simplify-url', function(context) { hbs.registerHelper('simplify-url', context => {
return context.replace(/^https?:\/\//i, '').replace(/\/$/, '').toLowerCase(); return context.replace(/^https?:\/\//i, '').replace(/\/$/, '').toLowerCase();
}); });

View File

@@ -1,20 +1,20 @@
{{! {{!
This file is part of pa11y-dashboard. This file is part of Pa11y Dashboard.
pa11y-dashboard is free software: you can redistribute it and/or modify Pa11y Dashboard is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or the Free Software Foundation, either version 3 of the License, or
(at your option) any later version. (at your option) any later version.
pa11y-dashboard is distributed in the hope that it will be useful, Pa11y Dashboard is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
{{#content "title"}}pa11y-dashboard{{/content}} {{#content "title"}}Pa11y Dashboard{{/content}}
<div data-control="task-list"> <div data-control="task-list">

Some files were not shown because too many files have changed in this diff Show More