tcitcs/pa11y-dashboard
2
0
Fork 0
forked from external-repos/pa11y-dashboard
Code Pull Requests Activity

Updated results page (#196)

Browse Source 
* 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
This commit is contained in:
Elena Musatova
2017-10-31 17:10:24 +01:00
committed by Rowan Manning
parent a8013834c5
commit 66d97769a0
59 changed files with 6019 additions and 3807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

2
Makefile
View File

@@ -28,6 +28,8 @@ uglify:
public/js/vendor/bootstrap/js/tooltip.js \
public/js/vendor/bootstrap/js/transition.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.dashes.js \
public/js/vendor/flot/jquery.flot.time.js \

1
app.js
View File

@@ -69,6 +69,7 @@ function initApp(config, callback) {
require('./view/helper/date')(hbs);
require('./view/helper/string')(hbs);
require('./view/helper/url')(hbs);
require('./view/helper/conditionals')(hbs);
// Populate view locals
app.express.locals = {

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'
}
};
}

2
public/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long

47
public/js/site.js
View File

@@ -18,8 +18,10 @@ $(document).ready(function(){
var data = {};
var standardsList = $('[data-role="standards-list"]');
var standardSelect = $('[data-role="new-task-select"]');
var expandLink = $('[data-role="expander"]');
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 zoomResetButton = $('[data-role="zoom-reset"]');
var graphContainer = $('[data-role="graph"]');
@@ -73,32 +75,25 @@ $(document).ready(function(){
$('body').addClass('custom-legend');
}
// Toggle appearance of lists of error/warnings/notices
expandLink.click( function(){
$(this).next().slideToggle('slow', function(){});
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');
// Update details button title by click
detailsCollapse.click(function(){
$(this).toggleClass('btn_state_collapsed');
});
$(document).on('keydown.lists', '[data-role="expander"]', function (e) {
var $this = $(this);
var k = e.which || e.keyCode;
if (!/(13|32)/.test(k)) {
return;
}
if (k === 13 || k === 32) {
$this.click();
}
// Initialize context popovers
$(contextPopover).popover({
container: 'body',
placement: 'bottom'
});
e.preventDefault();
e.stopPropagation();
$(document.body).click(function (e) {
$(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
@@ -137,7 +132,7 @@ $(document).ready(function(){
plotGraphData();
});
$('[data-role="rules-tooltip"]').tooltip();
$(ruleTooltip).tooltip();
// Function to animate sections
function animateSection (sectionName, offset){
@@ -287,7 +282,7 @@ $(document).ready(function(){
var previousPoint = null;
graphContainer.bind('plothover', function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
if (previousPoint !== item.dataIndex) {
previousPoint = item.dataIndex;
$('[data-role="tooltip"]').remove();
var count = item.datapoint[1].toFixed(0);

7
public/js/site.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
public/less/alerts.less
View File

@@ -2,7 +2,6 @@
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
@@ -18,6 +17,7 @@
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
@@ -56,12 +56,15 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

2
public/less/badges.less
View File

@@ -2,7 +2,6 @@
// Badges
// --------------------------------------------------
// Base classes
.badge {
display: inline-block;
@@ -46,6 +45,7 @@ a.list-group-item.active > .badge,
color: @badge-active-color;
background-color: @badge-active-bg;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}

21
public/less/bootswatch.less
View File

@@ -39,7 +39,6 @@
// Tables =====================================================================
.table {
tr.success,
tr.warning,
tr.danger {
@@ -49,7 +48,7 @@
// Forms ======================================================================
.form-control,textarea.form-control,
.form-control, textarea.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
@@ -112,7 +111,6 @@ input[type="color"],
// Navs =======================================================================
.pagination {
a {
color: #fff;
@@ -122,10 +120,10 @@ input[type="color"],
}
.disabled {
&>a,
&>a:hover,
&>a:focus,
&>span {
& > a,
& > a:hover,
& > a:focus,
& > span {
background-color: lighten(@brand-success, 15%);
}
}
@@ -140,10 +138,10 @@ input[type="color"],
}
.disabled {
&>a,
&>a:hover,
&>a:focus,
&>span {
& > a,
& > a:hover,
& > a:focus,
& > span {
background-color: lighten(@brand-success, 15%);
}
}
@@ -152,7 +150,6 @@ input[type="color"],
// Indicators =================================================================
.alert {
a,
.alert-link {
color: #fff;

3
public/less/breadcrumbs.less
View File

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

35
public/less/button-groups.less
View File

@@ -10,6 +10,7 @@
.btn-default & {
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
@@ -18,10 +19,12 @@
border-top-color: #fff;
}
}
.dropup {
& .btn-default .caret {
border-bottom-color: @btn-default-color;
}
.btn-primary,
.btn-success,
.btn-warning,
@@ -94,6 +97,7 @@
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@@ -104,15 +108,18 @@
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
@@ -123,15 +130,21 @@
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { .btn-xs(); }
.btn-group-sm > .btn { .btn-sm(); }
.btn-group-lg > .btn { .btn-lg(); }
.btn-group-xs > .btn {
.btn-xs();
}
.btn-group-sm > .btn {
.btn-sm();
}
.btn-group-lg > .btn {
.btn-lg();
}
// Split button dropdowns
// ----------------------
@@ -141,6 +154,7 @@
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
@@ -149,25 +163,25 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.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
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-width: 0 @caret-width-large @caret-width-large;
}
// Vertical button groups
// ----------------------
@@ -210,21 +224,22 @@
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
@@ -233,6 +248,7 @@
width: 100%;
table-layout: fixed;
border-collapse: separate;
.btn {
float: none;
display: table-cell;
@@ -240,7 +256,6 @@
}
}
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {

14
public/less/buttons.less
View File

@@ -2,7 +2,6 @@
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
@@ -37,7 +36,7 @@
&.active {
outline: 0;
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,
@@ -51,34 +50,37 @@
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Link buttons
// -------------------------
@@ -118,7 +120,6 @@
}
}
// Button Sizes
// --------------------------------------------------
@@ -126,16 +127,17 @@
// 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);
}
.btn-sm,
.btn-xs {
// 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);
}
.btn-xs {
padding: 1px 5px;
}
// Block button
// --------------------------------------------------

17
public/less/carousel.less
View File

@@ -2,7 +2,6 @@
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
@@ -28,7 +27,9 @@
> .active,
> .next,
> .prev { display: block; }
> .prev {
display: block;
}
> .active {
left: 0;
@@ -106,14 +107,17 @@
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
}
.icon-prev,
.icon-next {
width: 20px;
@@ -125,12 +129,13 @@
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
@@ -161,6 +166,7 @@
border-radius: 10px;
cursor: pointer;
}
.active {
margin: 0;
width: 12px;
@@ -183,15 +189,14 @@
color: @carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge
.carousel-control {
.glyphicons-chevron-left,

1
public/less/close.less
View File

@@ -2,7 +2,6 @@
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);

1
public/less/code.less
View File

@@ -2,7 +2,6 @@
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
kdb,

3
public/less/component-animations.less
View File

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

6
public/less/dropdowns.less
View File

@@ -2,7 +2,6 @@
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
.caret {
display: inline-block;
@@ -46,7 +45,7 @@
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
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;
// Aligns the dropdown menu to right
@@ -105,6 +104,7 @@
color: @dropdown-link-disabled-color;
}
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover,
@@ -170,6 +170,7 @@
border-bottom: 4px solid @dropdown-caret-color;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
@@ -178,7 +179,6 @@
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.

22
public/less/forms.less
View File

@@ -2,7 +2,6 @@
// Forms
// --------------------------------------------------
// Normalize non-controls
//
// Restyle and baseline non-control form elements.
@@ -31,7 +30,6 @@ label {
font-weight: bold;
}
// Normalize form controls
// Override content-box in Normalize (* isn't specific enough)
@@ -100,7 +98,6 @@ output {
.placeholder();
}
// Common form controls
//
// 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
border: 1px solid @input-border;
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");
// Customize the `:focus` state to imitate native WebKit styles.
@@ -159,7 +156,6 @@ output {
}
}
// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
@@ -169,7 +165,6 @@ output {
margin-bottom: 15px;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
@@ -182,6 +177,7 @@ output {
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
label {
display: inline;
margin-bottom: 0;
@@ -189,6 +185,7 @@ output {
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
@@ -196,6 +193,7 @@ output {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@@ -211,6 +209,7 @@ output {
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
@@ -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);
}
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
@@ -250,16 +248,17 @@ input[type="checkbox"],
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
// Error
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Success
.has-success {
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
// Static form control text
//
// 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);
}
// Help text
//
// 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
}
// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@@ -297,7 +293,6 @@ input[type="checkbox"],
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
.form-inline {
// Kick in the inline
@media (min-width: @screen-sm) {
// Inline-block all the things for "inline"
@@ -322,6 +317,7 @@ input[type="checkbox"],
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
@@ -330,14 +326,12 @@ input[type="checkbox"],
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,

1004
public/less/glyphicons.less
View File

File diff suppressed because it is too large Load Diff

760
public/less/grid.less
View File

@@ -2,7 +2,6 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
@@ -70,7 +69,6 @@
padding-right: (@grid-gutter-width / 2);
}
// Extra small grid
//
// Grid classes for extra small devices like smartphones. No offset, push, or
@@ -92,19 +90,54 @@
.col-xs-11 {
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
//
@@ -132,58 +165,189 @@
.col-sm-11 {
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
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @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-push-1 {
left: percentage((1 / @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)); }
.col-sm-push-2 {
left: percentage((2 / @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-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
.col-sm-offset-1 { margin-left: percentage((1 / @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)); }
}
.col-sm-offset-1 {
margin-left: percentage((1 / @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
//
@@ -196,6 +360,7 @@
.container {
width: @container-md;
}
.col-md-1,
.col-md-2,
.col-md-3,
@@ -209,61 +374,201 @@
.col-md-11 {
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
.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-push-0 {
left: auto;
}
.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)); }
.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)); }
}
.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));
}
}
// Large grid
//
@@ -290,57 +595,198 @@
.col-lg-11 {
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
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.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-push-0 {
left: auto;
}
.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)); }
.col-lg-push-1 {
left: percentage((1 / @grid-columns));
}
.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-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
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.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-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)); }
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-offset-1 {
margin-left: percentage((1 / @grid-columns));
}
.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-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));
}
}

208
public/less/ie8and.less
View File

@@ -9,11 +9,13 @@
* {
box-sizing: content-box;
}
.clearfix {
*zoom: 1;
}
ul, ol {
margin-left:0;
margin-left: 0;
}
.container {
@@ -33,59 +35,167 @@
.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; }
.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
.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-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)); }
.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)); }
.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;

15
public/less/input-groups.less
View File

@@ -29,11 +29,15 @@
.input-group-lg > .form-control,
.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 > .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
// -------------------------
@@ -46,6 +50,7 @@
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
@@ -94,9 +99,11 @@
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
@@ -104,6 +111,7 @@
.input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
@@ -122,6 +130,7 @@
margin-left: -1px;
}
}
.input-group-btn > .btn {
position: relative;
// Jankily prevent input button groups from wrapping

2
public/less/jumbotron.less
View File

@@ -2,7 +2,6 @@
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
@@ -16,6 +15,7 @@
line-height: 1;
color: @jumbotron-heading-color;
}
p {
line-height: 1.4;
}

1
public/less/list-group.less
View File

@@ -82,6 +82,7 @@
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;

13
public/less/main.less
View File

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

4
public/less/media.less
View File

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

90
public/less/mixins.less
View File

@@ -2,7 +2,6 @@
// Mixins
// --------------------------------------------------
// Utilities
// -------------------------
@@ -48,16 +47,29 @@
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // 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
&:-moz-placeholder {
color: @color;
}
// 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
@@ -85,6 +97,7 @@
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
font: ~"0/0" a;
@@ -94,8 +107,6 @@
border: 0;
}
// CSS3 PROPERTIES
// --------------------------------------------------
@@ -104,14 +115,17 @@
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
@@ -128,18 +142,22 @@
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
@@ -153,21 +171,25 @@
-ms-transform: rotate(@degrees); // IE9+
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9+
transform: scale(@ratio);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9+
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
@@ -178,33 +200,36 @@
-ms-transform: rotateX(@degrees); // IE9+
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){
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
transform-origin: @origin;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
.backface-visibility(@visibility) {
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
@@ -261,8 +286,6 @@
filter: ~"alpha(opacity=@{opacity-ie})";
}
// GRADIENTS
// --------------------------------------------------
@@ -278,7 +301,7 @@
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-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
@@ -291,7 +314,7 @@
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-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) {
@@ -306,7 +329,7 @@
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-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) {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
@@ -314,7 +337,7 @@
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-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) {
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
@@ -339,8 +362,6 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Retina images
//
// Short retina mixin for setting background-image and -size
@@ -348,19 +369,12 @@
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@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) {
@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) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Responsive image
//
// 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
}
// COMPONENT MIXINS
// --------------------------------------------------
@@ -553,16 +566,22 @@
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
tr& {
display: table-row !important;
}
th&,
td& { display: table-cell !important; }
td& {
display: table-cell !important;
}
}
.responsive-invisibility() {
&,
tr&,
th&,
td& { display: none !important; }
td& {
display: none !important;
}
}
// Grid System
@@ -618,11 +637,13 @@
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
@@ -651,11 +672,13 @@
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
@@ -684,18 +707,19 @@
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));
}
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
@@ -710,10 +734,10 @@
// Set the border and box shadow on specific inputs to match
.form-control {
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 {
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);
}
}

23
public/less/modals.less
View File

@@ -11,7 +11,6 @@
.modal-open {
overflow: hidden;
// Account for hiding of scrollbar
body&,
.navbar-fixed-top,
@@ -37,7 +36,9 @@
.translate(0, -25%);
.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
@@ -56,7 +57,7 @@
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
.box-shadow(0 3px 9px rgba(0, 0, 0, .5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
@@ -72,8 +73,12 @@
z-index: (@zindex-modal-background - 10);
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(.5); }
&.fade {
.opacity(0);
}
&.in {
.opacity(.5);
}
}
// Modal header
@@ -83,6 +88,7 @@
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: -2px;
@@ -126,14 +132,13 @@
// Scale up the modal
@media screen and (min-width: @screen-sm-min) {
.modal-dialog {
width: 600px;
padding-top: 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));
}
}

34
public/less/navbar.less
View File

@@ -2,7 +2,6 @@
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@@ -23,7 +22,6 @@
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
@@ -37,7 +35,6 @@
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
@@ -54,7 +51,7 @@
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
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();
-webkit-overflow-scrolling: touch;
@@ -82,16 +79,17 @@
.navbar-nav.navbar-left:first-child {
margin-left: -@navbar-padding-horizontal;
}
.navbar-nav.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
.navbar-text:last-child {
margin-right: 0;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
@@ -107,7 +105,6 @@
}
}
//
// Navbar alignment options
//
@@ -135,16 +132,17 @@
border-radius: 0;
}
}
.navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// Brand/project name
.navbar-brand {
@@ -164,7 +162,6 @@
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
@@ -196,7 +193,6 @@
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
@@ -251,7 +247,6 @@
}
// Component alignment
//
// 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.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
.navbar-left {
.pull-left();
}
.navbar-right {
.pull-right();
}
}
// Navbar form
//
@@ -275,7 +274,7 @@
padding: 10px @navbar-padding-horizontal;
border-top: 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);
// Mixin behavior for optimum display
@@ -302,7 +301,6 @@
}
}
// Dropdown menus
// Menu position and menu carets
@@ -310,6 +308,7 @@
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(0);
@@ -322,7 +321,6 @@
right: 0;
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
@@ -331,7 +329,6 @@
.navbar-vertical-align(@input-height-base);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
@@ -438,7 +435,6 @@
border-bottom-color: @navbar-default-link-color;
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
@@ -470,7 +466,6 @@
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
@@ -617,5 +612,4 @@
color: @navbar-inverse-link-hover-color;
}
}
}

11
public/less/navs.less
View File

@@ -2,7 +2,6 @@
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
@@ -68,7 +67,6 @@
}
}
// Tabs
// -------------------------
@@ -111,7 +109,6 @@
}
}
// Pills
// -------------------------
.nav-pills {
@@ -138,7 +135,6 @@
}
}
// Stacked pills
.nav-stacked {
> li {
@@ -150,7 +146,6 @@
}
}
// Nav variations
// --------------------------------------------------
@@ -200,6 +195,7 @@
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
@@ -208,7 +204,6 @@
}
}
// Tabbable tabs
// -------------------------
@@ -222,6 +217,7 @@
.pill-content > .pill-pane {
display: none;
}
.tab-content,
.pill-content {
> .active {
@@ -229,8 +225,6 @@
}
}
// Dropdowns
// -------------------------
@@ -239,6 +233,7 @@
border-top-color: @link-color;
border-bottom-color: @link-color;
}
.nav a:hover .caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;

3
public/less/pager.less
View File

@@ -2,13 +2,13 @@
// Pager pagination
// --------------------------------------------------
.pager {
padding-left: 0;
margin: @line-height-computed 0;
list-style: none;
text-align: center;
.clearfix();
li {
display: inline;
> a,
@@ -51,5 +51,4 @@
cursor: not-allowed;
}
}
}

14
public/less/panels.less
View File

@@ -2,14 +2,13 @@
// Panels
// --------------------------------------------------
// Base class
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid transparent;
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
@@ -18,7 +17,6 @@
.clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
@@ -42,6 +40,7 @@
}
}
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
.list-group-item:first-child {
@@ -49,7 +48,6 @@
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
@@ -89,7 +87,6 @@
}
}
// Optional heading
.panel-heading {
padding: 10px 15px;
@@ -115,7 +112,6 @@
.border-bottom-radius(@panel-border-radius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
@@ -146,23 +142,27 @@
}
}
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
.panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-warning {
.panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
.panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
.panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}

22
public/less/popovers.less
View File

@@ -2,7 +2,6 @@
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
@@ -17,16 +16,24 @@
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
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
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
&.top {
margin-top: -10px;
}
&.right {
margin-left: 10px;
}
&.bottom {
margin-top: 10px;
}
&.left {
margin-left: -10px;
}
}
.popover-title {
@@ -59,9 +66,11 @@
border-style: solid;
}
}
.popover .arrow {
border-width: @popover-arrow-outer-width;
}
.popover .arrow:after {
border-width: @popover-arrow-width;
content: "";
@@ -129,5 +138,4 @@
bottom: -@popover-arrow-width;
}
}
}

4
public/less/print.less
View File

@@ -71,18 +71,21 @@
.navbar {
display: none;
}
.table {
td,
th {
background-color: #fff !important;
}
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
@@ -90,6 +93,7 @@
.table {
border-collapse: collapse !important;
}
.table-bordered {
th,
td {

41
public/less/progress-bars.less
View File

@@ -2,36 +2,49 @@
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// Webkit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Firefox
@-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}
}
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
// Bar itself
// -------------------------
@@ -42,7 +55,7 @@
margin-bottom: @line-height-computed;
background-color: @progress-bg;
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
@@ -55,7 +68,7 @@
color: @progress-bar-color;
text-align: center;
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);
}
@@ -74,8 +87,6 @@
animation: progress-bar-stripes 2s linear infinite;
}
// Variations
// -------------------------

10
public/less/responsive-utilities.less
View File

@@ -2,7 +2,6 @@
// Responsive: Utility classes
// --------------------------------------------------
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
@@ -21,7 +20,6 @@
width: device-width;
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
@@ -31,7 +29,6 @@
visibility: hidden !important;
}
// Visibility utilities
.visible-xs {
@@ -55,6 +52,7 @@
}
}
}
.visible-sm {
.responsive-invisibility();
&.visible-xs {
@@ -76,6 +74,7 @@
}
}
}
.visible-md {
.responsive-invisibility();
&.visible-xs {
@@ -97,6 +96,7 @@
}
}
}
.visible-lg {
.responsive-invisibility();
&.visible-xs {
@@ -140,6 +140,7 @@
}
}
}
.hidden-sm {
.responsive-visibility();
&.hidden-xs {
@@ -161,6 +162,7 @@
}
}
}
.hidden-md {
.responsive-visibility();
&.hidden-xs {
@@ -182,6 +184,7 @@
}
}
}
.hidden-lg {
.responsive-visibility();
&.hidden-xs {
@@ -213,6 +216,7 @@
.visible-print {
.responsive-visibility();
}
.hidden-print {
.responsive-invisibility();
}

8
public/less/scaffolding.less
View File

@@ -2,7 +2,6 @@
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
*,
@@ -11,12 +10,11 @@
.box-sizing(border-box);
}
// Body reset
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
@@ -37,7 +35,6 @@ textarea {
line-height: inherit;
}
// Links
a {
@@ -55,7 +52,6 @@ a {
}
}
// Images
img {
@@ -92,7 +88,6 @@ img {
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
@@ -102,7 +97,6 @@ hr {
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/

98
public/less/site-ie8and.less
View File

@@ -23,106 +23,124 @@
color: @legend-color;
border: 0;
border-bottom: 1px solid @legend-border-color;
margin-bottom:20px;
margin-bottom: 20px;
}
.tooltip-inner {
background-color: #000000;
background-color: #000;
}
.date {
font-size:85%;
font-size: 85%;
}
.task-card-link {
min-height:160px;
min-height: 160px;
}
.series-checkboxes li {
margin-right:1%;
margin-right: 1%;
}
.stat-type {
font-size:floor(@font-size-base * 0.65); // ~10px;
font-size: floor(@font-size-base * 0.65); // ~10px;
}
.aside .action-buttons .btn {
width:79%;
width: 79%;
}
.pull-right.dropdown-menu {
right:134px;
right: 134px;
}
.run-details .pull-right.dropdown-menu {
right:64px;
right: 64px;
}
.date-selector .btn-full-width {
width:90%;
width: 90%;
}
.filter-toggle {
&:before {
height:110%;
width:100%;
left:0;
top:0;
height: 110%;
width: 100%;
left: 0;
top: 0;
}
input {
width:92%;
width: 92%;
}
.filter-trigger {
padding-bottom:0;
padding-bottom: 0;
}
}
}
.ie7 {
.aside .task-stats li {
width:31.5%;
}
.zfix {
position:relative;
z-index:1001;
position: relative;
z-index: 1001;
}
.list-group li .list-group-item {
margin:0;
position:static;
margin: 0;
position: static;
}
.graph-spacer {
margin-bottom:90px;
padding-bottom:90px;
margin-bottom: 90px;
padding-bottom: 90px;
}
.date-selector {
zoom:1;
zoom: 1;
.btn-full-width {
width:100%;
width: 100%;
}
}
.sr-only {
position:relative;
position: relative;
}
.breadcrumb li {
vertical-align: top;
zoom: 1;
display: inline;
margin-right:10px;
margin-right: 10px;
}
.pull-right.dropdown-menu {
right:0px;
right: 0;
}
.run-details .pull-right.dropdown-menu {
right:82px;
right: 82px;
}
.tasks-list li {
padding-right:105px;
padding-right: 105px;
}
.filter-toggle {
width:30%;
margin:0 35%;
margin-top:-10px;
background-color:lighten(@gray-lighter, 4%);
padding-bottom:10px;
width: 30%;
margin: 0 35%;
margin-top: -10px;
background-color: lighten(@gray-lighter, 4%);
padding-bottom: 10px;
.glyphicon {
display:none;
display: none;
}
input {
width:80%;
margin-left:-25%;
width: 80%;
margin-left: -25%;
}
}
}

26
public/less/site-nojavascript.less
View File

@@ -16,31 +16,39 @@
/* No javascript */
.no-javascript {
.graph-container, .expander {
display:none;
display: none;
}
.hidden {
display:block !important;
visibility:visible !important;
display: block !important;
visibility: visible !important;
}
.date-links.hidden {
display:none !important;
display: none !important;
}
.btn-group:hover ul {
display:block !important;
display: block !important;
}
table.hidden {
display:table !important;
display: table !important;
}
.collapse {
display:block;
display: block;
}
.heading {
margin-top:0;
margin-top: 0;
border-radius: 3px 3px 0 0;
}
.show-class {
display:block;
display: block;
}
.no-js-hide {
display: none;
}

169
public/less/site-responsive.less
View File

@@ -14,180 +14,217 @@
// along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
/* Media queries */
@media (max-width:991px) {
@media (max-width: 991px) {
.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;
font-size: floor(@font-size-base * 1.9); // ~28px;
}
.task-header .h4 {
font-size:floor(@font-size-base * 1.15); // ~17px;
font-size: floor(@font-size-base * 1.15); // ~17px;
}
.header {
margin-bottom:2rem;
padding-bottom:1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
}
.task-header .btn {
padding:5px 10px;
font-size:12px;
line-height:1.5rem;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5rem;
}
.task-header h2 {
margin-bottom:3px;
margin-bottom: 3px;
}
.date {
margin-top:10px;
float:right;
margin-top: 10px;
float: right;
}
.other-tasks {
.sr-only();
}
.task-stats,
.btn-full-width {
margin-bottom:0;
margin-bottom: 0;
}
.task-card .task-stats {
margin-bottom:10px;
margin-bottom: 10px;
}
.action-buttons {
margin-bottom:20px;
margin-bottom: 20px;
}
.aside {
margin-bottom:15px;
margin-bottom: 15px;
}
.graph-spacer {
padding-bottom:80px;
padding-bottom: 80px;
}
.footer {
text-align:center;
text-align: center;
.nav {
float:none;
float: none;
li {
width:25%;
width: 25%;
}
}
}
}
@media (max-width:767px) {
@media (max-width: 767px) {
.date-selector {
margin-top:0;
margin-bottom:25px;
margin-top: 0;
margin-bottom: 25px;
}
.readonly-mode .date {
margin-top:0;
margin-bottom:5px;
float:none;
margin-top: 0;
margin-bottom: 5px;
float: none;
}
.graph-spacer {
padding-bottom:20px;
margin-bottom:15px;
padding-bottom: 20px;
margin-bottom: 15px;
}
.action-buttons {
margin-top:10px;
margin-bottom:0;
margin-top: 10px;
margin-bottom: 0;
.btn-full-width {
margin-bottom:10px;
margin-bottom: 10px;
}
}
.task-header {
.run-details {
text-align:left;
text-align: left;
}
}
.task-card .task-card-link {
min-height:0;
min-height: 0;
}
}
@media (max-width:640px) {
@media (max-width: 640px) {
body {
font-size:14px;
font-size: 14px;
}
.h1, h1 {
font-size:floor(@font-size-base * 1.75); // ~26px;
font-size: floor(@font-size-base * 1.75); // ~26px;
}
.h2, h2 {
font-size:floor(@font-size-base * 1.6); // ~24px;
font-size: floor(@font-size-base * 1.6); // ~24px;
}
.task-header .h4 {
font-size:floor(@font-size-base * 1.1); // ~16px;
font-size: floor(@font-size-base * 1.1); // ~16px;
}
.badge {
font-size:floor(@font-size-base * 0.75); // ~11px;
padding:7px;
font-size: floor(@font-size-base * 0.75); // ~11px;
padding: 7px;
}
.rule-name .badge {
padding:3px;
padding: 3px;
}
.graph {
margin-bottom:3rem;
margin-bottom: 3rem;
}
.delete-button {
font-size:floor(@font-size-base * 1.35); // ~20px;
top:10px;
right:25px;
font-size: floor(@font-size-base * 1.35); // ~20px;
top: 10px;
right: 25px;
}
.standards-lists {
.tooltip {
&.top .tooltip-inner {
max-width:400px;
max-width: 400px;
}
}
}
.tasks-list {
li {
margin-bottom:20px;
.panel {
margin-bottom: 20px;
}
}
.footer .nav {
li {
width:50%;
width: 50%;
}
}
}
@media (max-width:479px) {
@media (max-width: 479px) {
.graph {
height:200px;
margin-bottom:1.5rem;
height: 200px;
margin-bottom: 1.5rem;
}
.series-checkboxes li {
font-size:floor(@font-size-base * 0.8); // ~12px;
font-size: floor(@font-size-base * 0.8); // ~12px;
}
.task-header .h3 {
float:none !important;
text-align:center;
margin-bottom:15px !important;
padding:10px;
float: none !important;
text-align: center;
margin-bottom: 15px !important;
padding: 10px;
}
.task-header h1 {
margin-bottom:3px;
margin-bottom: 3px;
}
}
@media (max-width:360px) {
@media (max-width: 360px) {
.delete-button {
display:block !important;
font-size:floor(@font-size-base * 1); // ~15px;
top:5px;
right:20px;
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;
font-size: floor(@font-size-base * 0.9); // ~13px;
}
.tooltip {
&.top .tooltip-inner {
max-width:260px;
max-width: 260px;
}
}
}
.footer {
.nav {
a {
padding:10px 5px;
padding: 10px 5px;
}
}
}

570
public/less/site.less
View File

@@ -17,107 +17,126 @@
/* Helper Classes */
.crunch {
margin:0 !important;
margin: 0 !important;
}
.crunch-top {
margin-top:0 !important;
margin-top: 0 !important;
}
.crunch-bottom {
margin-bottom:0 !important;
margin-bottom: 0 !important;
}
.block-level {
display:block;
display: block;
}
.ruled {
border-bottom:dotted 1px @gray;
border-bottom: dotted 1px @gray;
}
.ruled-sm {
margin-bottom:15px;
margin-bottom: 15px;
}
.well-med {
padding:15px;
padding: 15px;
}
/* General */
.header {
padding-bottom:15px;
margin-bottom:30px;
background-color:lighten(@gray-lighter, 4%);
padding-bottom: 15px;
margin-bottom: 30px;
background-color: lighten(@gray-lighter, 4%);
}
.footer {
background-color:lighten(@gray-lighter, 4%);
padding:40px 0 20px 0;
margin-top:40px;
background-color: lighten(@gray-lighter, 4%);
padding: 40px 0 20px 0;
margin-top: 40px;
}
.nav {
list-style-type:none;
padding:0;
list-style-type: none;
padding: 0;
}
.footer .nav {
float:right;
float: right;
a {
transition: background 0.3s;
-webkit-transition: background 0.3s;
}
}
.supersize-me {
text-align:center;
font-size:112px;
line-height:97px;
font-weight:bold;
color:@gray-light;
text-align: center;
font-size: 112px;
line-height: 97px;
font-weight: bold;
color: @gray-light;
}
.floated-list li {
float:left;
float: left;
}
.btn-full-width {
width:100%;
margin-bottom:10px
width: 100%;
margin-bottom: 10px
}
.dropdown-menu {
width:100%;
top:40px;
width: 100%;
top: 40px;
li a {
text-indent:-20px;
text-indent: -20px;
}
}
.dropdown-toggle {
margin-top:0;
margin-bottom:5px;
margin-top: 0;
margin-bottom: 5px;
}
.list-group {
li .list-group-item {
border-radius:0;
margin-bottom:-1px;
border-radius: 0;
margin-bottom: -1px;
}
li:first-child .list-group-item {
border-top-left-radius:3px;
border-top-right-radius:3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
li:last-child .list-group-item {
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin-bottom:0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 0;
}
}
.options-button {
position:absolute;
top:5px;
right:20px;
position: absolute;
top: 5px;
right: 20px;
}
.footer a, .breadcrumb a {
text-decoration:underline;
text-decoration: underline;
}
.breadcrumb a {
&:hover, &:active, &:focus {
text-decoration: none;
}
}
.site-message {
.glyphicon {
margin-right:6px;
margin-right: 6px;
}
}
@@ -127,227 +146,332 @@
margin-bottom: (@line-height-computed / 2);
}
/* Task stats boxes */
.task-stats {
margin-bottom:10px;
font-size:floor(@font-size-base * 1.5); // ~22px;
line-height:1;
font-weight:bold;
margin-bottom: 10px;
font-size: floor(@font-size-base * 1.5); // ~22px;
line-height: 1;
font-weight: bold;
li {
width:32%;
margin-right:2%;
width: 32%;
margin-right: 2%;
border-radius: @border-radius-base;
a {
display:block;
padding:7px 0 6px 0;
text-align:center;
color:@badge-color;
display: block;
padding: 7px 0 6px 0;
text-align: center;
color: @badge-color;
}
&.last {
margin-right:0;
margin-right: 0;
}
}
}
.stat-type {
font-size:floor(@font-size-base * 0.75); // ~11px;
font-size: floor(@font-size-base * 0.75); // ~11px;
text-transform: uppercase;
display:block;
line-height:1.4;
display: block;
line-height: 1.4;
.opacity(.8);
}
.aside .task-stats {
li:hover {
.opacity(.85);
a {
text-decoration:none;
}
}
}
// Stats box colours
.danger, .error {
background-color:@brand-danger;
color:@btn-default-color;
background-color: @brand-danger;
color: @btn-default-color;
}
.warning {
background-color:@brand-warning;
color:@btn-default-color;
background-color: @brand-warning;
color: @btn-default-color;
}
.info, .notice {
background-color:@brand-info;
color:@btn-default-color;
background-color: @brand-info;
color: @btn-default-color;
}
/* Task card */
.task-card {
margin-bottom:20px;
margin-bottom: 20px;
.no-results {
font-size:floor(@font-size-base * 1.70); // ~25px;
line-height:1.5;
margin:26px 0;
font-size: floor(@font-size-base * 1.70); // ~25px;
line-height: 1.5;
margin: 26px 0;
}
.task-card-link {
color:@gray-dark;
min-height:190px;
display:block;
color: @gray-dark;
min-height: 190px;
display: block;
transition: background 0.5s;
-webkit-transition: background 0.5s;
}
.options-button {
display:none;
display: none;
}
&:hover .options-button {
display:block;
display: block;
}
.task-card-link:hover,
&:hover .task-card-link
{
&:hover .task-card-link {
text-decoration: none;
background-color:darken(@gray-lighter, 2%);
background-color: darken(@gray-lighter, 2%);
}
.h3 {
text-overflow:ellipsis;
overflow:hidden;
width:100%;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.task-stats li {
padding:7px 0 6px 0;
text-align:center;
color:@badge-color;
padding: 7px 0 6px 0;
text-align: center;
color: @badge-color;
}
.dropdown-menu {
top:25px;
top: 25px;
}
}
/* Badges */
.badge {
border-radius:0.25em;
display:inline-block;
padding:10px;
font-size:ceil(@font-size-base * 0.85); // ~13px;
border-radius: 0.25em;
display: inline-block;
padding: 10px;
font-size: ceil(@font-size-base * 0.85); // ~13px;
text-transform: uppercase;
}
.rule-name .badge {
padding:6px;
padding: 6px;
text-transform: none;
}
/* Task details page*/
.task-header {
margin-bottom:30px;
margin-bottom: 30px;
h1 {
margin-bottom:6px;
margin-bottom: 6px;
}
h2 {
word-wrap:break-word;
word-wrap: break-word;
}
.h4 {
margin-bottom:6px;
margin-bottom: 6px;
}
}
.date {
margin-top:5px;
margin-top: 5px;
}
.readonly-mode .date {
margin-top:40px;
margin-top: 40px;
}
.category-list {
&__item {
font-size: 16px;
&_type_error,
&_type_error.active {
.category-list__link,
.category-list__link:hover,
.category-list__link:focus {
color: @brand-danger;
}
}
&_type_warning,
&_type_warning.active {
.category-list__link,
.category-list__link:hover,
.category-list__link:focus {
color: @brand-warning;
}
}
&_type_notice,
&_type_notice.active {
.category-list__link,
.category-list__link:hover,
.category-list__link:focus {
color: @brand-info;
}
}
&_type_ignore,
&_type_ignore.active {
.category-list__link,
.category-list__link:hover,
.category-list__link:focus {
color: @badge-bg;
}
}
}
}
.tasks-list {
padding:15px;
margin-bottom:30px;
border-width:3px;
border-style:solid;
li {
margin-bottom:20px;
padding-right:90px;
position:relative;
padding: 15px;
margin-bottom: 30px;
border: 1px solid @gray-lighter;
border-top: 0;
.panel {
&:last-child {
margin-bottom:0;
margin-bottom: 0;
}
form {
display:none;
position:absolute;
right:0;
top:0;
.ignore-form {
display: inline-block;
vertical-align: middle;
&:hover .btn {
color:@brand-primary;
.btn {
margin: 0;
padding: 0;
}
}
&:hover form {
display:block;
}
}
.rule-name {
font-weight:bold;
font-style:italic;
word-wrap:break-word;
font-size: 16px;
word-wrap: break-word;
}
.link {
color: #07c;
}
.to-top {
text-align: center;
.glyphicon {
margin-right: 10px;
}
}
}
.task-danger {
border-color:@brand-danger;
}
.task-warning {
border-color:@brand-warning;
}
.task-info {
border-color:@brand-info;
}
.task-default {
border-color:@badge-bg;
.task {
margin-bottom: 16px;
&_type_error {
.rule-name,
.ignore-form .link {
color: @brand-danger;
}
.badge {
background: @brand-danger;
}
}
&_type_warning {
.rule-name,
.ignore-form .link {
color: @brand-warning;
}
.badge {
background: @brand-warning;
}
}
&_type_notice {
.rule-name,
.ignore-form .link {
color: @brand-info;
}
.badge {
background: @brand-info;
}
}
&_type_ignore {
.ignore-form .link {
color: @badge-bg;
}
}
.subtitle {
font-size: 16px;
padding: 10px 0 5px;
}
.list-unstyled {
&__item {
padding: 5px 0;
}
}
&-actions {
position: relative;
text-align: right;
}
.code {
cursor: pointer;
outline: none;
}
.panel-body {
.text {
vertical-align: middle;
}
}
.btn-details {
padding: 0;
margin: 0 5px;
&:before {
content: 'Show ';
}
&.btn_state_collapsed {
&:before {
content: 'Hide ';
}
}
}
}
/* Task list heading */
.heading {
margin-top:12px;
padding:11px;
margin-top: 12px;
padding: 11px;
color: @btn-default-color;
font-weight:bold;
font-weight: bold;
border-radius: 3px;
&.showing {
margin-bottom:0;
margin-bottom: 0;
border-radius: 3px 3px 0 0;
}
&:first-child, &.first {
margin-top:0;
margin-top: 0;
}
}
.expander {
cursor:pointer;
padding:0 5px;
font-weight:bold;
font-size:floor(@font-size-base * @line-height-base); // ~20px
line-height:1;
}
/* Date selector */
ul.date-links {
.list-unstyled();
position:absolute;
top:44px;
left:0;
width:100%;
z-index:10;
position: absolute;
top: 44px;
left: 0;
width: 100%;
z-index: 10;
}
.date-selector {
margin-bottom:5px;
margin-bottom: 5px;
.show-stats {
margin-top: 0;
@@ -374,53 +498,56 @@ ul.date-links {
text-decoration: underline;
}
}
.single-result .date-selector-row {
display: none;
}
/* Graph */
.graph {
height:300px;
width:100%;
height: 300px;
width: 100%;
}
.graph-spacer {
margin-bottom:30px;
padding-bottom:30px;
margin-bottom: 40px;
padding-bottom: 30px;
}
.graph-table {
margin-bottom:0;
margin-bottom: 0;
td {
width:25%;
width: 25%;
}
}
.series-checkboxes {
margin-top:15px;
padding: 0 30px;
margin-bottom: 15px;
li {
width:32%;
margin-right:2%;
width: 32%;
margin-right: 2%;
border-radius: @border-radius-base;
label {
margin-bottom:0;
.series-checkbox-container {
padding: 2px 4px 3px 4px;
}
.series-checkbox-container {
padding:2px 4px 3px 4px;
label {
margin: 0;
padding: 0 0 0 12px;
cursor: pointer;
}
input {
margin:5px auto 3px auto;
}
input, label {
margin: 6px 0;
cursor: pointer;
display:block;
}
&:last-child {
margin-right:0;
margin-right: 0;
}
&:hover {
@@ -428,75 +555,91 @@ ul.date-links {
}
}
}
.btn-reset {
margin-top:12px;
margin: 12px 18px 0;
}
.flot-x-axis {
.flot-tick-label {
max-width:45px !important;
max-width: 45px !important;
}
}
.tooltip-graph {
font-size:12px;
font-size: 12px;
}
.custom-legend .legend {
display:none !important;
display: none !important;
}
.dashedLegend {
position:absolute;
top:17px;
right:40px;
font-size:smaller;
color:#545454;
position: absolute;
top: 70px;
right: 40px;
font-size: smaller;
color: #545454;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.75);
display:none;
display: none;
}
.dashedContainer {
background: #fff;
border: 1px solid #808080;
margin: 5px;
padding-top: 5px;
}
.dashedLegend tr {
display: none;
}
.dashedLegend .legendColorBox > div:first-child {
border: 1px solid rgb(204, 204, 204);
padding: 3px;
}
.dashedLegend .legendIcon div {
height: 0px;
border-width: 3px 0px 0px;
height: 0;
border-width: 3px 0 0;
border-top-style: solid;
overflow: hidden;
}
.dashedLegend .legendErrors div {
width: 25px;
border-top-color: rgb(216, 61, 45);
}
.dashedLegend .legendWarnings div {
width: 10px;
border-top-color: rgb(168, 103, 0);
float: left;
}
.dashedLegend .legendWarnings div:first-child {
margin-right: 5px;
}
.dashedLegend .legendNotices div {
width: 5px;
border-top-color: rgb(23, 123, 190);
float: left;
margin-left: 5px;
}
.dashedLegend .legendNotices div:first-child {
margin-left: 0;
}
.dashedLegend td.legendColorBox {
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
.dashedLegend td.legendLabel {
padding-right: 10px;
padding-bottom: 5px;
@@ -504,11 +647,11 @@ ul.date-links {
/* New task page */
.standards-lists {
height:300px;
overflow:hidden;
overflow-y:auto;
margin-bottom:15px;
border-bottom:solid 1px @gray-lighter;
height: 300px;
overflow: hidden;
overflow-y: auto;
margin-bottom: 15px;
border-bottom: 1px solid @gray-lighter;
.checkbox {
cursor: pointer;
@@ -516,43 +659,43 @@ ul.date-links {
}
.tooltip {
left:30px !important; //sorry, important. To overwrite bootstrap js positioning
left: 30px !important; //sorry, important. To overwrite bootstrap js positioning
&.top .tooltip-inner {
text-align:left;
max-width:460px;
text-align: left;
max-width: 460px;
}
}
}
.filter-toggle {
top:-20px;
margin-top:-10px;
font-size:18px;
font-weight:bold;
top: -20px;
margin-top: -10px;
font-size: 18px;
font-weight: bold;
.filter-trigger {
padding-bottom:20px;
padding-bottom: 20px;
cursor: pointer;
.glyphicon {
display:block;
margin:0 auto;
display: block;
margin: 0 auto;
}
}
&:before {
position:absolute;
content:"";
height:90px;
width:90px;
left:50%;
top:-45px;
background-color:lighten(@gray-lighter, 4%);
position: absolute;
content: '';
height: 90px;
width: 90px;
left: 50%;
top: -45px;
background-color: lighten(@gray-lighter, 4%);
transform: translateX(-50%) rotate(45deg);
-ms-transform: translateX(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) rotate(45deg);
z-index:-1;
z-index: -1;
}
}
@@ -563,6 +706,7 @@ ul.date-links {
margin: 0;
padding: 0;
}
.inline-list > li {
display: inline-block;
border-right: 1px solid @dropdown-fallback-border; // IE8 fallback
@@ -570,6 +714,12 @@ ul.date-links {
padding: 0 4px 0 0;
margin: 0 4px 0 0;
}
.inline-list + div.date {
display: inline-block;
}
/* Popovers */
.popover-content {
overflow-x: auto;
}

12
public/less/tables.less
View File

@@ -2,16 +2,15 @@
// Tables
// --------------------------------------------------
table {
max-width: 100%;
background-color: @table-bg;
}
th {
text-align: left;
}
// Baseline styles
.table {
@@ -58,7 +57,6 @@ th {
}
}
// Condensed table w/ half padding
.table-condensed {
@@ -74,7 +72,6 @@ th {
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
@@ -101,7 +98,6 @@ th {
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
@@ -117,7 +113,6 @@ th {
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
@@ -133,7 +128,6 @@ th {
}
}
// Table cell sizing
//
// Reset default table behavior
@@ -142,6 +136,7 @@ table col[class*="col-"] {
float: none;
display: table-column;
}
table {
td,
th {
@@ -152,7 +147,6 @@ table {
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
@@ -174,7 +168,6 @@ table {
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
@@ -240,7 +233,6 @@ table {
}
}
}
}
}
}

138
public/less/theme.less
View File

@@ -1,13 +1,9 @@
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
@@ -19,14 +15,14 @@
.btn-info,
.btn-warning,
.btn-danger {
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);
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);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
}
}
@@ -59,14 +55,31 @@
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.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); }
.btn-default {
.btn-styles(@btn-default-bg);
text-shadow: 0 1px 0 #fff;
border-color: #ccc;
}
.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
@@ -74,11 +87,9 @@
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
.box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}
//
// Dropdowns
// --------------------------------------------------
@@ -88,6 +99,7 @@
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
@@ -95,8 +107,6 @@
background-color: darken(@dropdown-link-active-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
@@ -105,17 +115,18 @@
.navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
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);
.navbar-nav > .active > a {
#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-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
@@ -124,12 +135,12 @@
.navbar-nav > .active > a {
#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-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;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
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);
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);
.box-shadow(@shadow);
}
@@ -160,12 +169,21 @@
}
// Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
.alert-success {
.alert-styles(@alert-success-bg);
}
.alert-info {
.alert-styles(@alert-info-bg);
}
.alert-warning {
.alert-styles(@alert-warning-bg);
}
.alert-danger {
.alert-styles(@alert-danger-bg);
}
//
// Progress bars
@@ -182,13 +200,25 @@
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-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); }
.progress-bar {
.progress-bar-styles(@progress-bar-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
@@ -196,8 +226,9 @@
.list-group {
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:hover,
.list-group-item.active:focus {
@@ -206,15 +237,13 @@
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.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
@@ -223,14 +252,29 @@
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-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); }
.panel-default > .panel-heading {
.panel-heading-styles(@panel-default-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
@@ -239,6 +283,6 @@
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
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);
}

3
public/less/thumbnails.less
View File

@@ -2,7 +2,6 @@
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
.img-thumbnail();
@@ -14,7 +13,6 @@
}
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
@@ -26,6 +24,7 @@ a.thumbnail:focus {
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;

26
public/less/tooltip.less
View File

@@ -2,7 +2,6 @@
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
@@ -13,11 +12,25 @@
line-height: 1.4;
.opacity(0);
&.in { .opacity(.9); }
&.top { 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; }
&.in {
.opacity(.9);
}
&.top {
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
@@ -39,6 +52,7 @@
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;

73
public/less/type.less
View File

@@ -2,13 +2,13 @@
// Typography
// --------------------------------------------------
// Body text
// -------------------------
p {
margin: 0 0 (@line-height-computed / 2);
}
.lead {
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.15);
@@ -20,45 +20,53 @@ p {
}
}
// Emphasis & misc
// -------------------------
// Ex: 14px base font * 85% = about 12px
small,
.small { font-size: 85%; }
.small {
font-size: 85%;
}
// Undo browser default styling
cite { font-style: normal; }
cite {
font-style: normal;
}
// Contextual emphasis
.text-muted {
color: @text-muted;
}
.text-primary {
color: @brand-primary;
&:hover {
color: darken(@brand-primary, 10%);
}
}
.text-warning {
color: @state-warning-text;
&:hover {
color: darken(@state-warning-text, 10%);
}
}
.text-danger {
color: @state-danger-text;
&:hover {
color: darken(@state-danger-text, 10%);
}
}
.text-success {
color: @state-success-text;
&:hover {
color: darken(@state-success-text, 10%);
}
}
.text-info {
color: @state-info-text;
&:hover {
@@ -67,10 +75,17 @@ cite { font-style: normal; }
}
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
// Headings
// -------------------------
@@ -99,6 +114,7 @@ h3 {
font-size: 65%;
}
}
h4,
h5,
h6 {
@@ -110,13 +126,29 @@ h6 {
}
}
h1, .h1 { font-size: @font-size-h1; }
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; }
h1, .h1 {
font-size: @font-size-h1;
}
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
// -------------------------
@@ -127,8 +159,6 @@ h6, .h6 { font-size: @font-size-h6; }
border-bottom: 1px solid @page-header-border-color;
}
// Lists
// --------------------------------------------------
@@ -138,7 +168,7 @@ ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
ul,
ol{
ol {
margin-bottom: 0;
}
}
@@ -150,6 +180,7 @@ ol {
padding-left: 0;
list-style: none;
}
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
@@ -164,13 +195,16 @@ ol {
dl {
margin-bottom: @line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0; // Undo browser default
}
@@ -201,11 +235,12 @@ dd {
// Abbreviations and acronyms
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] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
@@ -229,7 +264,7 @@ blockquote {
line-height: @line-height-base;
color: @blockquote-small-color;
&:before {
content: '\2014 \00A0';// EM DASH, NBSP
content: '\2014 \00A0'; // EM DASH, NBSP
}
}
@@ -248,7 +283,7 @@ blockquote {
content: '';
}
&:after {
content: '\00A0 \2014';// NBSP, EM DASH
content: '\00A0 \2014'; // NBSP, EM DASH
}
}
}

10
public/less/utilities.less
View File

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

43
public/less/variables-flatly.less
View File

@@ -2,7 +2,6 @@
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
@@ -61,7 +60,6 @@
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@@ -100,7 +98,6 @@
@table-border-color: @gray-lighter; // table and cell border
// Buttons
// -------------------------
@@ -132,7 +129,6 @@
@btn-link-disabled-color: @gray-light;
// Forms
// -------------------------
@@ -156,12 +152,11 @@
@input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border;
// Dropdowns
// -------------------------
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-border: rgba(0, 0, 0, .15);
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@@ -178,11 +173,9 @@
@dropdown-caret-color: #000;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
@@ -220,7 +213,6 @@
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
// --------------------------------------------------
@@ -231,7 +223,6 @@
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
// Navbar
// -------------------------
@@ -264,7 +255,6 @@
@navbar-default-toggle-icon-bar-bg: #fff;
@navbar-default-toggle-border-color: darken(@navbar-default-bg, 10%);
// Inverted navbar
//
// Reset inverted navbar basics
@@ -298,7 +288,6 @@
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
// Navs
// -------------------------
@@ -327,7 +316,6 @@
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff;
// Pagination
// -------------------------
@@ -341,14 +329,12 @@
@pagination-disabled-color: @gray-lighter;
// Pager
// -------------------------
@pager-border-radius: 15px;
@pager-disabled-color: #fff;
// Jumbotron
// -------------------------
@@ -358,7 +344,6 @@
@jumbotron-heading-color: inherit;
// Form states and alerts
// -------------------------
@@ -378,22 +363,20 @@
@state-info-bg: @brand-info;
@state-info-border: @brand-info;
// Tooltips
// -------------------------
@tooltip-max-width: 200px;
@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;
// Popovers
// -------------------------
@popover-bg: #fff;
@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-title-bg: darken(@popover-bg, 3%);
@@ -402,10 +385,9 @@
@popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-color: rgba(0, 0, 0, .25);
@popover-arrow-outer-fallback-color: #999;
// Labels
// -------------------------
@@ -419,7 +401,6 @@
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@@ -428,14 +409,13 @@
@modal-title-line-height: @line-height-base;
@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-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts
// -------------------------
@alert-padding: 15px;
@@ -458,7 +438,6 @@
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@progress-bg: @gray-lighter;
@@ -470,7 +449,6 @@
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@@ -485,7 +463,6 @@
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels
// -------------------------
@panel-bg: #fff;
@@ -517,7 +494,6 @@
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-padding: 4px;
@@ -528,12 +504,10 @@
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@well-bg: @gray-lighter;
// Badges
// -------------------------
@badge-color: #fff;
@@ -547,18 +521,16 @@
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@breadcrumb-bg: lighten(@gray-lighter, 4%);
@breadcrumb-color: @gray-dark;
@breadcrumb-active-color: @breadcrumb-color;
// 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-width: 15%;
@@ -570,14 +542,12 @@
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-color: #000;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@@ -606,7 +576,6 @@
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Container sizes
// --------------------------------------------------

42
public/less/variables.less
View File

@@ -2,7 +2,6 @@
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
@@ -63,14 +62,12 @@
@headings-line-height: 1.1;
@headings-color: inherit;
// Iconography
// -------------------------
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@@ -110,7 +107,6 @@
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@@ -142,7 +138,6 @@
@btn-link-disabled-color: @gray-light;
// Forms
// -------------------------
@@ -166,12 +161,11 @@
@input-group-addon-bg: @gray-lighter;
@input-group-addon-border-color: @input-border;
// Dropdowns
// -------------------------
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-border: rgba(0, 0, 0, .15);
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@@ -188,11 +182,9 @@
@dropdown-caret-color: #000;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
@@ -238,7 +230,6 @@
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system
// --------------------------------------------------
@@ -249,7 +240,6 @@
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-sm-min;
// Navbar
// -------------------------
@@ -283,7 +273,6 @@
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
//
// Reset inverted navbar basics
@@ -310,7 +299,6 @@
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
// Navs
// -------------------------
@@ -340,7 +328,6 @@
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
// Pagination
// -------------------------
@@ -354,14 +341,12 @@
@pagination-disabled-color: @gray-light;
// Pager
// -------------------------
@pager-border-radius: 15px;
@pager-disabled-color: @gray-light;
// Jumbotron
// -------------------------
@@ -371,7 +356,6 @@
@jumbotron-heading-color: inherit;
// Form states and alerts
// -------------------------
@@ -391,7 +375,6 @@
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Tooltips
// -------------------------
@tooltip-max-width: 200px;
@@ -401,12 +384,11 @@
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// -------------------------
@popover-bg: #fff;
@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-title-bg: darken(@popover-bg, 3%);
@@ -415,10 +397,9 @@
@popover-arrow-color: #fff;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-color: rgba(0, 0, 0, .25);
@popover-arrow-outer-fallback-color: #999;
// Labels
// -------------------------
@@ -432,7 +413,6 @@
@label-color: #fff;
@label-link-hover-color: #fff;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@@ -441,14 +421,13 @@
@modal-title-line-height: @line-height-base;
@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-backdrop-bg: #000;
@modal-header-border-color: #e5e5e5;
@modal-footer-border-color: @modal-header-border-color;
// Alerts
// -------------------------
@alert-padding: 15px;
@@ -471,7 +450,6 @@
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@@ -483,7 +461,6 @@
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@@ -498,7 +475,6 @@
@list-group-link-color: #555;
@list-group-link-heading-color: #333;
// Panels
// -------------------------
@panel-bg: #fff;
@@ -530,7 +506,6 @@
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-padding: 4px;
@@ -541,13 +516,11 @@
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
// Wells
// -------------------------
@well-bg: #f5f5f5;
@well-bg-drk: #2c3e50;
// Badges
// -------------------------
@badge-color: #fff;
@@ -561,7 +534,6 @@
@badge-line-height: 1;
@badge-border-radius: 10px;
// Breadcrumbs
// -------------------------
@breadcrumb-bg: #f5f5f5;
@@ -569,11 +541,10 @@
@breadcrumb-active-color: @gray-light;
@breadcrumb-separator: "/";
// 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-width: 15%;
@@ -585,14 +556,12 @@
@carousel-caption-color: #fff;
// Close
// ------------------------
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
// Code
// ------------------------
@code-color: #c7254e;
@@ -621,7 +590,6 @@
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Container sizes
// --------------------------------------------------

7
public/less/wells.less
View File

@@ -2,7 +2,6 @@
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
@@ -11,10 +10,11 @@
background-color: @well-bg;
border: 1px solid darken(@well-bg, 7%);
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 {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
border-color: rgba(0, 0, 0, .15);
}
}
@@ -23,6 +23,7 @@
padding: 24px;
border-radius: @border-radius-large;
}
.well-sm {
padding: 9px;
border-radius: @border-radius-small;

27
view/helper/conditionals.js Normal file
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);
}
});
}

2
view/new.html
View File

@@ -144,7 +144,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#rules}}
<li>
<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
<label for="{{name}}" title="{{description}}" data-role="rule-tooltip" class="checkbox">
{{name}}
</label>
</li>

4
view/partial/graph.html
View File

@@ -16,10 +16,10 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}}
<div class="col-md-12 clearfix">
<div class="graph-container graph-spacer ruled clearfix">
<div data-role="graph" class="graph"></div>
<div class="row">
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
<ul class="list-unstyled floated-list series-checkboxes clearfix col-md-5 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
</div>
<div data-role="graph" class="graph"></div>
<div class="dashedLegend">
<div class="dashedContainer">
<table>

362
view/partial/result.html
View File

@@ -17,25 +17,16 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="col-md-3 aside">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<ul data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
{{#mainResult}}
<li class="danger"><a href="#errors" title="See errors">{{count.error}}<span class="stat-type">Errors</span></a></li>
<li class="warning"><a href="#warnings" title="See warnings">{{count.warning}}<span class="stat-type">Warnings</span></a></li>
<li class="info last"><a href="#notices" title="See notices">{{count.notice}}<span class="stat-type">Notices</span></a></li>
{{/mainResult}}
</ul>
</div>
<div class="action-buttons col-md-12 col-sm-6 clearfix">
<div class="action-buttons col-md-12 col-sm-6">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
Download CSV <span class="glyphicon glyphicon-download"></span>
Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</a>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
Download JSON <span class="glyphicon glyphicon-download"></span>
Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</a>
</div>
</div>
@@ -47,7 +38,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<div class="date-selector">
<div class="btn-group block-level clearfix">
<h2 class="h4">
<span class="glyphicon glyphicon-calendar"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
</h2>
<h3 class="h5 show-stats">Select a date to show stats for:</h3>
<ul role="navigation" class="dates-list">
@@ -70,141 +61,264 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<div class="col-md-9" data-role="expandable-results" role="main">
{{#if mainResult.count.error}}
<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
<span class="pull-right expander"> ↑ <span class="hide">(close panel)</span></span>
<div class="col-md-9" role="main">
<ul class="nav nav-tabs category-list" role="tablist">
<li class="category-list__item category-list__item_type_error active" role="presentation">
<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
Errors ( {{mainResult.count.error}} )
</div>
<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
<ul class="list-unstyled">
{{#mainResult.errors}}
<li>
<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
<p><em>First result:</em> {{message}}</p>
<p>
<b>Selector:</b>
<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
<br/>
<b>Context:</b>
<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
</p>
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form action="{{../../../task.hrefIgnore}}" method="post">
<input type="hidden" name="rule" value="{{code}}"/>
<input type="submit" class="btn btn-sm" value="Ignore rule"/>
</form>
{{/if}}
{{/unless}}
</a>
</li>
{{/mainResult.errors}}
</ul>
<a class="pull-right" href="#top" data-role="top">Back to top</a>
</div>
{{else}}
<p class="heading label-danger" id="errors">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right"></span></p>
{{/if}}
{{#if mainResult.count.warning}}
<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
<li class="category-list__item category-list__item_type_warning" role="presentation">
<a class="category-list__link" id="warnings" href="#warnings-list" aria-controls="warnings-list" role="tab" data-toggle="tab" data-test="task-warnings">
Warnings ( {{mainResult.count.warning}} )
</div>
<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
<ul class="list-unstyled">
{{#mainResult.warnings}}
<li>
<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
<p><em>First result:</em> {{message}}</p>
<p>
<b>Selector:</b>
<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
<br/>
<b>Context:</b>
<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
</p>
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form action="{{../../../task.hrefIgnore}}" method="post">
<input type="hidden" name="rule" value="{{code}}"/>
<input type="submit" class="btn btn-sm" value="Ignore rule"/>
</form>
{{/if}}
{{/unless}}
</a>
</li>
{{/mainResult.warnings}}
</ul>
<a class="pull-right" href="#top" data-role="top">Back to top</a>
</div>
{{else}}
<p class="heading label-warning" id="warnings">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right"></span></p>
{{/if}}
{{#if mainResult.count.notice}}
<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
<li class="category-list__item category-list__item_type_notice" role="presentation">
<a class="category-list__link" id="notices" href="#notices-list" aria-controls="notices-list" role="tab" data-toggle="tab" data-test="task-notices">
Notices ( {{mainResult.count.notice}} )
</a>
</li>
<li class="category-list__item category-list__item_type_ignore" role="presentation">
<a class="category-list__link" id="ignore" href="#ignore-list" aria-controls="ignore-list" role="tab" data-toggle="tab">
Ignored rules ( {{mainResult.ignore.length}} )
</a>
</li>
</ul>
<div class="tab-content">
<div id="errors-list" role="tabpanel" class="tab-pane tasks-list fade in active">
{{#if mainResult.count.error}}
{{#mainResult.errors}}
<div class="panel panel-default task task_type_error">
<div class="panel-heading">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-8">
<span class="rule-name">{{code}}&ensp;
<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
</span>
</div>
<div class="task-info tasks-list collapse clearfix" id="notices-list">
<ul class="list-unstyled">
{{#mainResult.notices}}
<li>
<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
<p><em>First result:</em> {{message}}</p>
<p>
<b>Selector:</b>
<code style="text-wrap:pre-wrap">{{#if selector}}{{selector}}{{else}}-{{/if}}</code>
<br/>
<b>Context:</b>
<code style="text-wrap:pre-wrap">{{#if context}}{{context}}{{else}}-{{/if}}</code>
</p>
<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form action="{{../../../task.hrefIgnore}}" method="post">
<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
<input type="hidden" name="rule" value="{{code}}"/>
<input type="submit" class="btn btn-sm" value="Ignore rule"/>
<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
</form>
{{/if}}
{{/unless}}
</li>
{{/mainResult.notices}}
</ul>
<a class="pull-right" href="#top" data-role="top">Back to top</a>
</div>
{{else}}
<p class="heading label-info" id="notices">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right"></span></p>
</div>
</div>
<div class="panel-body">
<span class="text">{{message}}</span>
<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#error-index-{{@index}}" aria-expanded="false" aria-controls="error-index-{{@index}}">details</span>
<div class="task-details collapse" id="error-index-{{@index}}">
{{#if solutions.length}}
<div class="subtitle" id="error-solutions">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="error-solutions">
{{#each solutions}}
<li class="list-unstyled__item" role="listitem">
<a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if mainResult.ignore.length}}
<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
<span class="pull-right expander"> ↓ <span class="hide">(open panel)</span></span>
Ignored Rules ( {{mainResult.ignore.length}} )
</div>
<div class="task-default tasks-list collapse clearfix" id="ignore-list">
<ul class="list-unstyled">
{{#mainResult.ignore}}
<li>
<p class="crunch rule-name">{{name}}</p>
{{#if description}}
<p>{{description}}</p>
{{#if items.length}}
<div class="subtitle" id="error-selectors">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="error-selectors">
{{#each items}}
<li class="list-unstyled__item" role="listitem">
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code>
</span>
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
</div>
{{/mainResult.errors}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">Well done! You have 0 errors. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="warnings-list" role="tabpanel" class="tab-pane tasks-list fade">
{{#if mainResult.count.warning}}
{{#mainResult.warnings}}
<div class="panel panel-default task task_type_warning">
<div class="panel-heading">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-8">
<span class="rule-name">{{code}}&ensp;
<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form action="{{../../../task.hrefUnignore}}" method="post">
<input type="hidden" name="rule" value="{{name}}"/>
<input type="submit" class="btn btn-sm" value="Unignore rule"/>
<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
<input type="hidden" name="rule" value="{{code}}"/>
<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
</form>
{{/if}}
{{/unless}}
</div>
</div>
</div>
<div class="panel-body">
<span class="text">{{message}}</span>
<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#warning-index-{{@index}}" aria-expanded="false" aria-controls="warning-index-{{@index}}">details</span>
<div class="task-details collapse" id="warning-index-{{@index}}">
{{#if solutions.length}}
<div class="subtitle" id="warning-solutions">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="warning-solutions">
{{#each solutions}}
<li class="list-unstyled__item" role="listitem">
<a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a>
</li>
{{/mainResult.ignore}}
{{/each}}
</ul>
<a class="pull-right" href="#top" data-role="top">Back to top</a>
{{/if}}
{{#if items.length}}
<div class="subtitle" id="warning-selectors">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="warning-selectors">
{{#each items}}
<li class="list-unstyled__item" role="listitem">
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code>
</span>
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
</div>
{{/mainResult.warnings}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<p class="heading label-default">You have no ignored rules.</p>
<div class="text">Well done! You have 0 warnings. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="notices-list" role="tabpanel" class="tab-pane tasks-list fade">
{{#if mainResult.count.notice}}
{{#mainResult.notices}}
<div class="panel panel-default task task_type_notice">
<div class="panel-heading">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-8">
<span class="rule-name">{{code}}&ensp;
<span class="badge" title="{{count}} selector(s)" data-toggle="tooltip" data-role="rule-tooltip">{{count}}</span>
</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form class="ignore-form" action="{{../../../task.hrefIgnore}}" method="post">
<input type="hidden" name="rule" value="{{code}}"/>
<input type="submit" role="link" class="btn btn-link btn-sm link" value="Ignore rule"/>
</form>
{{/if}}
{{/unless}}
</div>
</div>
</div>
<div class="panel-body">
<span class="text">{{message}}</span>
<span class="btn btn-xs btn-link link btn-details" data-role="details-collapse" data-toggle="collapse" data-target="#notice-index-{{@index}}" aria-expanded="false" aria-controls="notice-index-{{@index}}">details</span>
<div class="task-details collapse" id="notice-index-{{@index}}">
{{#if solutions.length}}
<div class="subtitle" id="notice-solutions">Solutions:</div>
<ul class="list-unstyled solutions-list" role="list" aria-labelledby="notice-solutions">
{{#each solutions}}
<li class="list-unstyled__item" role="listitem">
<a class="link" href="{{url}}" target="_blank">
<span class="glyphicon glyphicon-share" aria-hidden="true"></span>&nbsp;{{title}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if items.length}}
<div class="subtitle" id="notice-selectors">Selectors:</div>
<ul class="list-unstyled selectors-list" role="list" aria-labelledby="notice-selectors">
{{#each items}}
<li class="list-unstyled__item" role="listitem">
<span title="Context" data-role="context-popover" data-toggle="popover" data-content="{{context}}">
<code class="code">{{selector}}</code>
</span>
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
</div>
{{/mainResult.notices}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">Well done! You have 0 notices. <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span></div>
{{/if}}
</div>
<div id="ignore-list" role="tabpanel" class="tab-pane tasks-list fade">
{{#if mainResult.ignore.length}}
{{#mainResult.ignore}}
<div class="panel panel-default task task_type_ignore">
<div class="panel-heading">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-8">
<span class="rule-name">{{name}}</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-4 task-actions">
{{#unless readonly}}
{{#if ../../isTaskPage}}
<form class="ignore-form" action="{{../../../task.hrefUnignore}}" method="post">
<input type="hidden" name="rule" value="{{name}}"/>
<input type="submit" role="link" class="btn btn-link btn-sm link" value="Unignore rule"/>
</form>
{{/if}}
{{/unless}}
</div>
</div>
</div>
<div class="panel-body">
{{#if description}}
<span class="text">{{description}}</span>
{{/if}}
</div>
</div>
{{/mainResult.ignore}}
<div class="to-top">
<a class="link" href="#top" data-role="top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>Back to top</a>
</div>
{{else}}
<div class="text">You have no ignored rules.</div>
{{/if}}
</div>
</div>
</div>

27
view/presenter/result.js
View File

@@ -16,6 +16,7 @@
const _ = require('underscore');
const presentIgnoreRules = require('./ignore');
const techs = require('../../data/techniques')();
module.exports = presentResult;
@@ -40,9 +41,29 @@ function presentResult(result) {
const results = groupedByType[type] || [];
const groupedByCode = _.groupBy(results, 'code');
result[pluralType] = _.keys(groupedByCode).map(group => {
const firstMessage = groupedByCode[group][0];
firstMessage.count = groupedByCode[group].length;
return firstMessage;
const groupMessage = groupedByCode[group][0];
groupMessage.count = groupedByCode[group].length;
groupMessage.items = groupedByCode[group].map(plural => ({
selector: plural.selector,
context: plural.context
}));
// Map standard to techniques
const data = groupMessage.code.split('.');
data.splice(0, 4);
const techniques = data.join('.').split(',').map(code => code.split('.')[0]);
groupMessage.solutions = techniques.reduce((prev, technique) => {
if (techs[technique] && techs[technique].title) {
prev.push({
title: techs[technique].title || null,
url: techs[technique].url || null
});
}
return prev;
}, []);
return groupMessage;
})
.sort((currentItem, nextItem) => {
return nextItem.count - currentItem.count;
});
});
}

2
view/task/edit.html
View File

@@ -156,7 +156,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{#rules}}
<li>
<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
<label for="{{name}}" title="{{description}}" data-role="rule-tooltip" class="checkbox">
{{name}}
</label>
</li>