10 |
11 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/scripts/components/modal.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
19 |
5 |
17 |
18 |
3 |
14 |
15 |
16 |
61 |
--------------------------------------------------------------------------------
/_sass/_spinner.sass:
--------------------------------------------------------------------------------
1 | // Colors
2 | $spinner-red: #E74C3C
3 | $spinner-blue: #3498DB
4 | $spinner-gray: #6C7878
5 | $spinner-yellow: #F39C12
6 |
7 | // Geometry and camera
8 | $spinner-size: 200px / 2
9 | $spinner-translateZ: $spinner-size / 2
10 | $spinner-cube-x: 500px
11 | $spinner-cube-y: $spinner-size * 0.5
12 |
13 | // Rotation degrees and deviations
14 | $spinner-duration: 4.2s
15 | $spinner-x: 0deg
16 | $spinner-y: 5deg
17 | $spinner-x2: $spinner-x + 360deg
18 | $spinner-xdev: $spinner-x2 + 7deg
19 | $spinner-ydev: $spinner-y + 5deg
20 |
21 | #spinner
22 | position: fixed
23 | top: 0px
24 | right: 0px
25 | bottom: 0px
26 | left: 0px
27 | display: flex
28 | align-items: center
29 | justify-content: center
30 | height: 100%
31 | background: rgba(255, 255, 255, 0.85)
32 | pointer-events: all
33 | z-index: 1111
34 | .stage,
35 | .side
36 | width: $spinner-size
37 | height: $spinner-size
38 | .stage
39 | position: absolute
40 | top: 50%
41 | left: 50%
42 | perspective: $spinner-size + $spinner-size
43 | transform: translateX(-50%) translateY(-50%)
44 | .cube
45 | width: $spinner-cube-x
46 | height: $spinner-cube-y
47 | -webkit-animation: spinner-rotate $spinner-duration infinite ease-in-out
48 | transform-origin: 50% 50%
49 | transform-style: preserve-3d
50 | .side
51 | position: absolute
52 | display: block
53 | .side1
54 | background: $spinner-red
55 | transform: translateZ($spinner-translateZ)
56 | .side2
57 | background: $spinner-yellow
58 | transform: rotateX(-90deg) translateZ($spinner-translateZ)
59 | .side3
60 | background: $spinner-blue
61 | transform: rotateY(180deg) translateZ($spinner-translateZ)
62 | .side4
63 | background: $spinner-gray
64 | transform: rotateX(90deg) translateZ($spinner-translateZ)
65 |
66 | @-webkit-keyframes spinner-rotate
67 | 0%
68 | transform: rotateX($spinner-x) rotateY($spinner-y)
69 | 80%
70 | transform: rotateX($spinner-xdev) rotateY($spinner-ydev)
71 | 90%,
72 | 100%
73 | transform: rotateX($spinner-x2) rotateY($spinner-y)
74 |
--------------------------------------------------------------------------------
/scripts/outputs/format-XML.js:
--------------------------------------------------------------------------------
1 | function formatXML (imageStats, results) {
2 | var outputXML = '\n
4 |
5 | {{ percent }}%
6 |
7 |
13 |
8 |
9 |
10 |
11 |
12 | ' + current.code + '\n' +
31 | '
3 |
26 |
27 |
28 |
29 |
88 |
89 |
92 |
--------------------------------------------------------------------------------
/scripts/outputs/format-MD.js:
--------------------------------------------------------------------------------
1 | function formatMD (imageStats, results, urlValue) {
2 |
3 | var output = '# ' + urlValue + '\n\n';
4 | // Ensure that the imageStats Object is not empty
5 | if (!(Object.keys(imageStats).length === 0)){
6 | output = output + '## Image Accessibility\n\n';
7 | output = output + '**Total Images:** ' + imageStats.totalImages + ' \n';
8 | output = output + '**Descriptive Alt Text:** ' + imageStats.descriptive + ' \n';
9 | output = output + '**Non-descriptive Alt Text:** ' + imageStats.nondescriptive + ' \n';
10 | output = output + '**Percent of images with Descriptive Alt Text:** ' + imageStats.descriptivePercent + '% \n';
11 | output = output + '**Alt Text Under 100 Characters:** ' + imageStats.under100Char + ' \n';
12 | output = output + '**Percent of images with fewer than 100 Characters of Alt Text:** ' + imageStats.under100CharPercent + '% \n';
13 | output = output + '**Images Under 100KB:** ' + imageStats.under100KB + ' \n';
14 | output = output + '**Percent of images Under 100 Kilobytes in size:** ' + imageStats.under100KBPercent + '% \n';
15 | output = output + '**Images That Loaded:** ' + imageStats.imagesLoaded + ' \n';
16 | output = output + '**Percent of Images that Loaded:** ' + imageStats.imagesLoadedPercent + '% \n';
17 | output = output + '**Total File Size In Bytes:** ' + imageStats.totalFileSizeInBytes + ' \n';
18 | output = output + '**Total File Size In Kilobytes:** ' + imageStats.totalFileSizeInKB + ' \n\n';
19 | }
20 |
21 | output = output + '## Results\n\n';
22 | var hr = '\n* * *\n\n';
23 |
24 | for (var i = 0; i < results.length; i++) {
25 | var item = results[i];
26 | var code = '**Code:** ' + item.code + ' \n';
27 | var type = '**Type:** ' + item.type + ' \n';
28 | var typeCode = '**Type Code:** ' + item.typeCode + ' \n';
29 | var message = '**Message:** ' + item.message + ' \n';
30 | var selector = '**Selector:** `' + item.selector + '` \n';
31 | var context = '**Context:**\n```\n' + item.context + '\n```\n';
32 | output = output + code + type + typeCode + message + selector + context;
33 | if (i < results.length - 1) {
34 | output = output + hr;
35 | }
36 | }
37 | return output;
38 | }
39 |
40 | module.exports = formatMD;
41 |
--------------------------------------------------------------------------------
/sasslinter.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | var lint = require('sass-lint');
4 |
5 | var results = lint.lintFiles('', {}, '.sass-lint.yml');
6 | var hr = '--------------------------------------------------------------------';
7 | var result = '';
8 | var file = '';
9 | var messages = '';
10 | var message = '';
11 | var location = '';
12 | var output = '';
13 | var msg = '';
14 | var rule = '';
15 | var line = '';
16 | var col = '';
17 | var len = 0;
18 | var msgCount = 0;
19 |
20 | for (var i = 0; i < results.length; i++) {
21 | result = results[i];
22 | file = result.filePath;
23 | messages = result.messages;
24 | if (messages.length > 0) {
25 | console.log(hr);
26 | console.log(file);
27 | for (var j = 0; j < messages.length; j++) {
28 | msgCount = msgCount + 1;
29 | message = messages[j];
30 | msg = message.message;
31 | rule = ' (' + message.ruleId + ')';
32 | line = message.line + '';
33 | col = message.column + '';
34 |
35 | if (line.length == 1) {
36 | line = ' ' + line;
37 | } else if (line.length == 2) {
38 | line = ' ' + line;
39 | } else if (line.length == 3) {
40 | line = ' ' + line;
41 | }
42 |
43 | if (col.length == 1) {
44 | col = col + ' ';
45 | } else if (col.length == 2) {
46 | col = col + ' ';
47 | }
48 |
49 | len = 48 - msg.length;
50 | if (len > 0) {
51 | msg = msg + new Array(len + 1).join(' ');
52 | }
53 | // Some messages are predictably short, so we can remove spaces so the lint rule will fit on the same line
54 | if (msg == 'Space expected between blocks ') {
55 | msg = 'Space expected between blocks ';
56 | } else if (msg == 'Space expected around operator ') {
57 | msg = 'Space expected around operator ';
58 | } else if (msg == 'Selectors must be placed on new lines ') {
59 | msg = 'Selectors must be placed on new lines ';
60 | }
61 |
62 | location = line + ':' + col + ' ';
63 | output = location + msg + rule;
64 | console.log(output);
65 | }
66 | console.log(file);
67 | }
68 | if (i == results.length - 1) {
69 | console.log(hr);
70 | }
71 | }
72 |
73 | if (msgCount > 0) {
74 | console.log('Total: ' + msgCount);
75 | } else {
76 | console.log('Sass Lint Passed');
77 | }
78 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Maintenance Notice:
2 |
3 | This project was started as a volunteer effort by a group of people in Indianapolis, IN. After two years of working on it, it became harder and harder to pull in and retain talent to work on it consistently. Though there were passionate individuals interested, many lived an hour or more away and couldn't meet in person weekly to work on it. Attempts were made to work remotely, but efforts languished. Years have passed with little work on this project. Though we had big plans, higher priorities have won out. The last release of Koa11y still works as a basic reporting tool, however the built in A11y guidelines are already out of date. The project remains online, for others to reference or fork. the released version may not be compatible with the latest Unix based OS's that do not prioritize backwards compatibility.
4 |
5 | * * *
6 |
7 | 
8 |
9 | # Koa11y
10 |
11 | ### Koa11y is a desktop app that allows you to automatically detect accessibility (a11y) issues on webpages.
12 |
13 | 
\n' +
27 | '
\n';
34 |
35 | if (resultsType == 'error') {
36 | returnedErrors = returnedErrors + entry;
37 | } else if (resultsType == 'warning') {
38 | returnedWarnings = returnedWarnings + entry;
39 | } else if (resultsType == 'notice') {
40 | returnedNotices = returnedNotices + entry;
41 | }
42 | }
43 |
44 | var template = fs.readFileSync('_markup/template.html', 'utf8');
45 |
46 | results = returnedErrors + returnedWarnings + returnedNotices;
47 |
48 | var imgAlts = '';
49 |
50 | // Ensure that the imageStats Object is not empty
51 | if (!(Object.keys(imageStats).length === 0)) {
52 | var totalImages = imageStats.totalImages;
53 | var descriptive = imageStats.descriptive;
54 | var descriptivePercent = imageStats.descriptivePercent;
55 | var under100Char = imageStats.under100Char;
56 | var under100CharPercent = imageStats.under100CharPercent;
57 | var under100KB = imageStats.under100KB;
58 | var under100KBPercent = imageStats.under100KBPercent;
59 | var imagesLoaded = imageStats.imagesLoaded;
60 | var imagesLoadedPercent = imageStats.imagesLoadedPercent;
61 | var totalFileSizeInKB = imageStats.totalFileSizeInKB;
62 | var descriptiveStyle = 'success glyphicon-ok';
63 | var under100CharStyle = 'success glyphicon-ok';
64 | var under100KBStyle = 'success glyphicon-ok';
65 | var imagesLoadedStyle = 'success glyphicon-ok';
66 | if (descriptivePercent < 100) { descriptiveStyle = 'danger glyphicon-remove'; }
67 | if (under100CharPercent < 100) { under100CharStyle = 'danger glyphicon-remove'; }
68 | if (under100KBPercent < 100) { under100KBStyle = 'danger glyphicon-remove'; }
69 | if (imagesLoadedPercent < 100) { imagesLoadedStyle = 'danger glyphicon-remove'; }
70 |
71 | imgAlts =
72 | '' + results[i].code + '
\n' +
28 | '\n' +
29 | '' + resultsType + ': ' + theMessage + '
\n' + 30 | '
\n' +
32 | '\n' +
33 | '\n' + 30 | '
' + theContext + '' +
73 | '
';
83 | }
84 |
85 | var buttonMarkup = '';
86 | if (buttons.errors.enabled) {
87 | buttonMarkup = buttonMarkup + '';
88 | }
89 | if (buttons.warnings.enabled) {
90 | buttonMarkup = buttonMarkup + '';
91 | }
92 | if (buttons.notices.enabled) {
93 | buttonMarkup = buttonMarkup + '';
94 | }
95 |
96 | var content =
97 | ' ' +
74 | '
' +
82 | 'Image Accessibility
' +
75 | '' +
76 | '
' +
81 | '' + descriptivePercent + '% of images on the page had descriptive ALT text. (' + descriptive + '/' + totalImages + ')
' + 77 | '' + under100CharPercent + '% of ALTs were under 100 characters. (' + under100Char + '/' + totalImages + ')
' + 78 | '' + under100KBPercent + '% of images were under 100KB in size. (' + under100KB + '/' + totalImages + ')
' + 79 | '' + imagesLoadedPercent + '% of images loaded with a total image payload of ' + totalFileSizeInKB + 'KB (' + imagesLoaded + '/' + totalImages + ')
' + 80 | '\n' +
98 | ' \n' +
99 | '
\n' +
101 | imgAlts + '\n' +
102 | ' ' + url + '
\n' + 100 | '' + results + '
\n';
103 | var output = template.replace('', content);
104 |
105 | return output;
106 | }
107 |
108 | module.exports = formatHTML;
109 |
--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
1 | #########################
2 | ## TJW Sass Lint File
3 | #########################
4 | # Linter Options
5 | options:
6 | # Don't merge default rules
7 | merge-default-rules: false
8 | # Raise an error if more than 50 warnings are generated
9 | max-warnings: 50
10 | formatter: json
11 | # File Options
12 | files:
13 | include: '_sass/*.s+(a|c)ss'
14 | # Rule Configuration
15 | rules:
16 | attribute-quotes: 2
17 | brace-style:
18 | - 2
19 | - allow-single-line: false
20 | - style: '1tbs'
21 | declarations-before-nesting: 2
22 | empty-args:
23 | - 2
24 | - include: false
25 | extends-before-declarations: 2
26 | extends-before-mixins: 2
27 | final-newline:
28 | - 2
29 | - include: true
30 | hex-length:
31 | - 2
32 | - style: short
33 | hex-notation:
34 | - 2
35 | - style: uppercase
36 | indentation:
37 | - 2
38 | - size: 4
39 | leading-zero:
40 | - 2
41 | - include: true
42 | mixins-before-declarations:
43 | - 2
44 | - exclude:
45 | - breakpoint
46 | - mq
47 | no-color-keywords: 1
48 | no-debug: 1
49 | no-duplicate-properties: 2
50 | no-empty-rulesets: 2
51 | no-important: 2
52 | no-invalid-hex: 1
53 | no-mergeable-selectors: 2
54 | no-misspelled-properties: 1
55 | no-qualifying-elements:
56 | - 2
57 | - allow-element-with-attribute: true
58 | - allow-element-with-class: false
59 | - allow-element-with-id: false
60 | no-trailing-whitespace: 1
61 | no-warn: 1
62 | placeholder-in-extend: 2
63 | property-sort-order:
64 | - 1
65 | - order:
66 | # Effects if the element exists
67 | - content
68 | # Highest effect of where pixel painting begins
69 | - position
70 | - top
71 | - right
72 | - bottom
73 | - left
74 | # How the element is displayed
75 | - display
76 | - align-content
77 | - align-items
78 | - align-self
79 | - flex-basis
80 | - flex-direction
81 | - flex-flow
82 | - flex-grow
83 | - flex-shrink
84 | - flex-wrap
85 | - flex
86 | - justify-content
87 | - order
88 | # Overall size, max amount of pixels that can be painted
89 | - width
90 | - height
91 | - min-width
92 | - min-height
93 | - max-width
94 | - max-height
95 | # Effects the most amount of pixel paint in the element
96 | - background
97 | - background-color
98 | - background-image
99 | - background-position
100 | - background-repeat
101 | - background-size
102 | # Box model
103 | - border
104 | - border-width
105 | - border-style
106 | - border-color
107 | - border-top
108 | - border-top-width
109 | - border-top-style
110 | - border-top-color
111 | - border-right
112 | - border-right-width
113 | - border-right-style
114 | - border-right-color
115 | - border-bottom
116 | - border-bottom-width
117 | - border-bottom-style
118 | - border-bottom-color
119 | - border-left
120 | - border-left-width
121 | - border-left-style
122 | - border-left-color
123 | - border-radius
124 | - border-top-left-radius
125 | - border-top-right-radius
126 | - border-bottom-right-radius
127 | - border-bottom-left-radius
128 | - margin
129 | - margin-top
130 | - margin-right
131 | - margin-bottom
132 | - margin-left
133 | - padding
134 | - padding-top
135 | - padding-right
136 | - padding-bottom
137 | - padding-left
138 | # Text treatment
139 | - color
140 | - direction
141 | - font-family
142 | - font-size
143 | - -webkit-font-smoothing
144 | - font-smoothing
145 | - font-style
146 | - font-weight
147 | - font-variant
148 | - letter-spacing
149 | - line-height
150 | - list-style
151 | - list-style-image
152 | - list-style-position
153 | - list-style-type
154 | - speak
155 | - src
156 | - text-align
157 | - text-decoration
158 | - text-overflow
159 | - text-rendering
160 | - text-shadow
161 | - text-transform
162 | - unicode-bidi
163 | - unicode-range
164 | - white-space
165 | - word-break
166 | # Less common properties go to the bottom
167 | - box-shadow
168 | - clear
169 | - cursor
170 | - -webkit-filter
171 | - filter
172 | - float
173 | - opacity
174 | - outline
175 | - outline-offset
176 | - overflow
177 | - overflow-x
178 | - overflow-y
179 | - perspective
180 | - pointer-events
181 | - -webkit-transform
182 | - transform
183 | - -webkit-transition
184 | - transition
185 | - vertical-align
186 | - visibility
187 | - z-index
188 | ignore-custom-properties: true
189 | single-line-per-selector: 1
190 | space-after-bang:
191 | - 2
192 | - include: false
193 | space-after-colon:
194 | - 1
195 | - include: true
196 | space-after-comma:
197 | - 1
198 | - include: true
199 | space-around-operator:
200 | - 1
201 | - include: true
202 | space-before-bang:
203 | - 1
204 | - include: true
205 | space-before-brace:
206 | - 1
207 | - include: true
208 | space-before-colon:
209 | - 1
210 | - include: false
211 | space-between-parens:
212 | - 1
213 | - include: false
214 | trailing-semicolon:
215 | - 1
216 | - include: true
217 | url-quotes: 1
218 | zero-unit:
219 | - 1
220 | - include: true
221 |
--------------------------------------------------------------------------------
/_sass/_normalize.sass:
--------------------------------------------------------------------------------
1 | //sass-lint:disable zero-unit
2 |
3 | //Resets the default styles in all browsers so they don't render things differently by default.
4 |
5 | /*!normalize.css v2.1.3|MIT License|git.io/normalize*/
6 |
7 | // HTML5 DISPLAY DEFINITIONS
8 |
9 | // Correct `block` display not defined in IE 8/9.
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | main,
20 | nav,
21 | section,
22 | summary
23 | display: block
24 |
25 | // Correct `inline-block` display not defined in IE 8/9.
26 |
27 | audio,
28 | canvas,
29 | video
30 | display: inline-block
31 |
32 | // Prevent modern browsers from displaying `audio` without controls.
33 | // Remove excess height in iOS 5 devices.
34 |
35 | audio:not([controls])
36 | display: none
37 | height: 0
38 |
39 | // Address `[hidden]` styling not present in IE 8/9.
40 | // Hide the `template` element in IE, Safari, and Firefox < 22.
41 |
42 | [hidden],
43 | template
44 | display: none
45 |
46 | // BASE
47 |
48 | // 1. Set default font family to sans-serif.
49 | // 2. Prevent iOS text size adjust after orientation change, without disabling
50 | // user zoom.
51 |
52 | html
53 | font-family: sans-serif
54 | -webkit-text-size-adjust: 100%
55 |
56 | // Remove default margin.
57 |
58 | body
59 | margin: 0
60 |
61 | // LINKS
62 |
63 | // Remove the gray background color from active links in IE 10.
64 |
65 | a
66 | background: transparent
67 |
68 | // Address `outline` inconsistency between Chrome and other browsers.
69 |
70 | a:focus
71 | outline: thin dotted
72 |
73 | // Improve readability when focused and also mouse hovered in all browsers.
74 |
75 | a:active,
76 | a:hover
77 | outline: 0
78 |
79 | // TYPOGRAPHY
80 |
81 | // Address variable `h1` font-size and margin within `section` and `article`
82 | // contexts in Firefox 4+, Safari 5, and Chrome.
83 |
84 | h1
85 | margin: 0.67em 0
86 | font-size: 2em
87 |
88 | // Address styling not present in IE 8/9, Safari 5, and Chrome.
89 |
90 | abbr[title]
91 | border-bottom: 1px dotted
92 |
93 | // Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
94 |
95 | b,
96 | strong
97 | font-weight: bold
98 |
99 | // Address styling not present in Safari 5 and Chrome.
100 |
101 | dfn
102 | font-style: italic
103 |
104 | // Address differences between Firefox and other browsers.
105 |
106 | hr
107 | height: 0
108 | box-sizing: content-box
109 |
110 | // Address styling not present in IE 8/9.
111 |
112 | mark
113 | background: #FF0
114 | color: #000
115 |
116 | // Correct font family set oddly in Safari 5 and Chrome.
117 |
118 | code,
119 | kbd,
120 | pre,
121 | samp
122 | font-family: monospace, serif
123 | font-size: 1em
124 |
125 | // Improve readability of pre-formatted text in all browsers.
126 |
127 | pre
128 | white-space: pre-wrap
129 |
130 | // Set consistent quote types.
131 |
132 | q
133 | quotes: '\201C' '\201D' '\2018' '\2019'
134 |
135 | // Address inconsistent and variable font size in all browsers.
136 |
137 | small
138 | font-size: 80%
139 |
140 | // Prevent `sub` and `sup` affecting `line-height` in all browsers.
141 |
142 | sub,
143 | sup
144 | position: relative
145 | font-size: 75%
146 | line-height: 0
147 | vertical-align: baseline
148 |
149 | sup
150 | top: -0.5em
151 |
152 | sub
153 | bottom: -0.25em
154 |
155 | // EMBEDDED CONTENT
156 |
157 | // Remove border when inside `a` element in IE 8/9.
158 |
159 | img
160 | border: 0
161 |
162 | // Correct overflow displayed oddly in IE 9.
163 |
164 | svg:not(:root)
165 | overflow: hidden
166 |
167 | // FIGURES
168 |
169 | // Address margin not present in IE 8/9 and Safari 5.
170 |
171 | figure
172 | margin: 0
173 |
174 | // FORMS
175 |
176 | // Define consistent border, margin, and padding.
177 |
178 | fieldset
179 | border: 1px solid #C0C0C0
180 | margin: 0 2px
181 | padding: 0.35em 0.625em 0.75em
182 |
183 | // 1. Correct `color` not being inherited in IE 8/9.
184 | // 2. Remove padding so people aren't caught out if they zero out fieldsets.
185 |
186 | legend
187 | border: 0
188 | padding: 0
189 |
190 | // 1. Correct font family not being inherited in all browsers.
191 | // 2. Correct font size not being inherited in all browsers.
192 | // 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
193 |
194 | button,
195 | input,
196 | select,
197 | textarea
198 | margin: 0
199 | font-family: inherit
200 | font-size: 100%
201 |
202 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in
203 | // the UA stylesheet.
204 |
205 | button,
206 | input
207 | line-height: normal
208 |
209 | // Address inconsistent `text-transform` inheritance for `button` and `select`.
210 | // All other form control elements do not inherit `text-transform` values.
211 | // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
212 | // Correct `select` style inheritance in Firefox 4+ and Opera.
213 |
214 | button,
215 | select
216 | text-transform: none
217 |
218 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
219 | // and `video` controls.
220 | // 2. Correct inability to style clickable `input` types in iOS.
221 | // 3. Improve usability and consistency of cursor style between image-type
222 | // `input` and others.
223 |
224 | button,
225 | html input[type="button"],
226 | input[type="reset"],
227 | input[type="submit"]
228 | -webkit-appearance: button
229 | cursor: pointer
230 |
231 | // Re-set default cursor for disabled elements.
232 |
233 | button[disabled],
234 | html input[disabled]
235 | cursor: default
236 |
237 | // 1. Address box sizing set to `content-box` in IE 8/9/10.
238 | // 2. Remove excess padding in IE 8/9/10.
239 |
240 | input[type="checkbox"],
241 | input[type="radio"]
242 | padding: 0
243 | box-sizing: border-box
244 |
245 | // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
246 | // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
247 | // (include `-moz` to future-proof).
248 |
249 | input[type="search"]
250 | -webkit-appearance: textfield
251 | box-sizing: content-box
252 |
253 | // Remove inner padding and search cancel button in Safari 5 and Chrome
254 | // on OS X.
255 |
256 | input[type="search"]::-webkit-search-cancel-button,
257 | input[type="search"]::-webkit-search-decoration
258 | -webkit-appearance: none
259 |
260 | // Remove inner padding and border in Firefox 4+.
261 |
262 | button::-moz-focus-inner,
263 | input::-moz-focus-inner
264 | border: 0
265 | padding: 0
266 |
267 | // 1. Remove default vertical scrollbar in IE 8/9.
268 | // 2. Improve readability and alignment in all browsers.
269 |
270 | textarea
271 | overflow: auto
272 | vertical-align: top
273 |
274 | // TABLES
275 |
276 | // Remove most spacing between table cells.
277 |
278 | table
279 | border-collapse: collapse
280 | border-spacing: 0
281 |
--------------------------------------------------------------------------------
/markup/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
223 |
224 |
225 |
273 |
274 |
275 |
--------------------------------------------------------------------------------
/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
16 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
55 |
56 |
264 |
265 |
--------------------------------------------------------------------------------
/scripts/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-multi-spaces */
2 | /* eslint-disable indent */ // TODO: Fix this after merging Rob's stuff
3 | // Testing line ending
4 | var nw = require('nw.gui');
5 | var $ = window.$;
6 | var Vue = window.Vue;
7 | var httpVueLoader = window.httpVueLoader;
8 | var updateDonutChart = window.updateDonutChart;
9 | var keyBindings = require('./functions/key-bindings.js');
10 | var tryParseJSON = require('./functions/try-parse-json');
11 | var cleanURL = require('./functions/clean-url');
12 | var makeDesktopPath = require('./functions/my-desktop-path');
13 | var formatJSON = require('./outputs/format-JSON');
14 | var formatCSV = require('./outputs/format-CSV');
15 | var formatMD = require('./outputs/format-MD');
16 | var formatXML = require('./outputs/format-XML');
17 | var formatHTML = require('./outputs/format-HTML');
18 |
19 | var fs = require('fs-extra');
20 | var path = require('path');
21 | var base64Img = require('base64-img');
22 | var appData = nw.App.dataPath;
23 | var temp = path.join(appData, 'temp');
24 |
25 | // register components
26 | Vue.component('modal');
27 | Vue.component('simple-donut');
28 | Vue.component('test');
29 | Vue.component('uk-navbar');
30 |
31 | var app = new Vue({
32 | el: '#app',
33 | components: {
34 | 'uk-navbar': httpVueLoader('scripts/components/uk-navbar.vue'),
35 | 'modal': httpVueLoader('scripts/components/modal.vue'),
36 | 'simple-donut': httpVueLoader('scripts/components/simple-donut.vue'),
37 | 'test': httpVueLoader('scripts/components/test.vue')
38 | },
39 | data: {
40 | version: '4.0.0',
41 |
42 | url: 'http://google.com',
43 | outputFileName: 'google com',
44 | outputType: 'html',
45 | outputTypes: {
46 | html: 'HTML',
47 | csv: 'CSV',
48 | json: 'JSON',
49 | md: 'Markdown',
50 | xml: 'XML'
51 | },
52 | standard: 'wcagaa',
53 | standards: {
54 | section: 'Section 508',
55 | wcaga: 'WCAG 2.0 A',
56 | wcagaa: 'WCAG 2.0 AA',
57 | wcagaaa: 'WCAG 2.0 AAA'
58 | },
59 | folderPicker: '',
60 | imageAlts: '',
61 |
62 | errorsButton: true,
63 | warningsButton: true,
64 | noticesButton: true,
65 | badges: {
66 | errors: 0,
67 | warnings: 0,
68 | notices: 0
69 | },
70 |
71 | submitAllowed: false,
72 |
73 | aboutModal: false,
74 | contributors: [
75 | { name: 'The Jared Wilcurt', url: 'http://TheJaredWilcurt.com' },
76 | { name: 'Rob Gaston', url: 'https://github.com/robgaston1' },
77 | { name: 'Marissa Staller', url: 'https://github.com/mardisworld' },
78 | { name: 'James Boyer', url: 'https://github.com/jamesboyer92' }
79 | ],
80 | technologies: [
81 | { name: 'Pa11y', url: 'http://pa11y.org' },
82 | { name: 'NW.js', url: 'http://nwjs.io' },
83 | { name: 'Vue.js', url: 'http://vuejs.org' },
84 | { name: 'jQuery', url: 'http://jquery.com' },
85 | { name: 'Sass', url: 'http://sass-lang.com' },
86 | { name: 'Bootstrap', url: 'http://getbootstrap.com' },
87 | { name: 'Bootswatch (Flatly)', url: 'https://bootswatch.com/flatly' },
88 | { name: 'nw-contextmenu', url: 'https://github.com/b1rdex/nw-contextmenu' }
89 | ],
90 |
91 | notifications: ''
92 | },
93 | methods: {
94 | // Settings and defaults
95 | loadSettings: function () {
96 | var settingsFile = path.join(nw.App.dataPath, 'koa11y-settings.json');
97 | var options = {
98 | encoding: 'utf-8'
99 | };
100 |
101 | fs.readFile(settingsFile, options, function (err, data) {
102 | if (err) {
103 | // eslint-disable-next-line
104 | console.warn('Settings file not found, probably not a big deal.');
105 | return;
106 | }
107 |
108 | var semVer = require('semver');
109 | var settings = JSON.parse(data);
110 |
111 | // If the old settings file is below v2.0.0 delete the settings file
112 | if (settings.version && semVer.lt(settings.version, '3.0.0')) {
113 | // eslint-disable-next-line
114 | console.log('Old settings file (Verision ' + settings.version + '). Nothing loaded.');
115 | return;
116 | }
117 |
118 | for (var key in settings) {
119 | if (key !== 'version') {
120 | this[key] = settings[key];
121 | }
122 | }
123 |
124 | // Give defaults for empty values
125 | if (settings.url === '') {
126 | this.url = 'http://google.com';
127 | }
128 | if (settings.outputFileName === '') {
129 | this.urlKeyup();
130 | }
131 | if (settings.folderPicker === '') {
132 | this.prefillOutput();
133 | }
134 |
135 | this.unlockRun();
136 | }.bind(this));
137 | },
138 | saveSettings: function () {
139 | var saveData = {
140 | url: this.url,
141 | outputFileName: this.outputFileName,
142 | folderPicker: this.folderPicker,
143 |
144 | outputType: this.outputType,
145 | standard: this.standard,
146 |
147 | errorsButton: this.errorsButton,
148 | warningsButton: this.warningsButton,
149 | noticesButton: this.noticesButton,
150 |
151 | version: this.version
152 | };
153 |
154 | var settingsFile = path.join(nw.App.dataPath, 'koa11y-settings.json');
155 | var settingsJSON = JSON.stringify(saveData, null, 2);
156 |
157 | this.writeToFile(settingsFile, settingsJSON);
158 | },
159 | deleteSettings: function (bool) {
160 | if (bool) {
161 | var settingsFile = path.join(nw.App.dataPath, 'koa11y-settings.json');
162 | fs.unlinkSync(settingsFile);
163 | nw.Window.get().reload();
164 | }
165 | },
166 | prefillOutput: function () {
167 | this.folderPicker = makeDesktopPath();
168 | },
169 |
170 | // Alerts
171 | successMessage: function (file, ext) {
172 | var filetype = ext.toUpperCase();
173 | if (filetype == 'MARKDOWN') {
174 | filetype = 'Markdown';
175 | }
176 | // TODO: Handle this in a more Vue way
177 | var message =
178 | '
57 |
58 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
169 |
170 |
171 |
202 |
203 |
213 |
214 |
245 |
246 |
247 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 | 59 | 63 |
64 |147 | 148 | 149 | 150 | 151 | 152 | 153 |
About
172 |
173 |
174 |
201 |
175 | v {{ version }}
176 |
178 |
179 | About Koa11y
177 |
180 |
200 | 181 | This program will load an invisible (headless) browser and go to the URL you've supplied to test the page for accessibility issues. Then it outputs any issues to a file. 182 |
183 |
184 | Contributors to Koa11y:
185 |
186 | {{ contributor.name }},
187 | .
188 |
189 | Koala Logo designed by Charlotte Schmidt.
190 |
191 | Koa11y is completely open source and built upon other open source technologies. Koa11y is made with
192 |
193 | {{ tech.name }},
194 | .
195 |
197 | Visit the Koa11y website. 198 |
199 |' +
179 | '' +
180 | '
';
185 | this.notifications = message;
186 | },
187 | errorMessage: function (error) {
188 | // TODO: Handle this in a more Vue way
189 | var markup =
190 | '' + 181 | '
Your ' + filetype + ' file has been saved.
' + 182 | '' + 183 | '' + file + '
' + 184 | '' +
191 | '' +
192 | '
';
197 | this.notifications = markup;
198 | },
199 |
200 | // Helpers
201 | reset: function () {
202 | // TODO: Rename #results to #notifications or something
203 | // Put all potential DOM elements that could be displayed
204 | // there into the DOM by default. Hide/Show them based
205 | // on Vue. Then remove this .empty() line.
206 | $('#results').empty();
207 | this.badges.errors = 0;
208 | this.badges.warnings = 0;
209 | this.badges.notices = 0;
210 | },
211 | unlockRun: function () {
212 | var url = this.url;
213 | var destination = this.folderPicker;
214 | var file = this.outputFileName;
215 |
216 | var anyButtonEnabled = (this.errorsButton || this.warningsButton || this.noticesButton);
217 |
218 | var imgAltsParsed = '';
219 | if (this.imageAlts) {
220 | imgAltsParsed = tryParseJSON(this.imageAlts);
221 | }
222 | var imageAltsInUse = !!this.imageAlts && (imgAltsParsed.length > 0) && (typeof(imgAltsParsed) === 'object');
223 |
224 | // To unlock you need a URL/Destination/Filename and at least one button pressed (err/warn/notice), or some valid JSON in the imageAlts box
225 | if (url && destination && file && (anyButtonEnabled || imageAltsInUse)) {
226 | this.submitAllowed = false;
227 | } else {
228 | this.submitAllowed = true;
229 | }
230 | },
231 | externalLink: function (url) {
232 | event.preventDefault();
233 | // Open in user's default browser
234 | nw.Shell.openExternal(url);
235 | },
236 | /**
237 | * This will override the contents of a file you pass in with
238 | * the data you supply. If the file you point to doesn't exist,
239 | * it will be created with your supplied data.
240 | *
241 | * @param {string} filePathAndName Path to file
242 | * @param {string} data The contents that should be saved
243 | * @param {Function} callback Optional callback function
244 | */
245 | writeToFile: function (filePathAndName, data, callback) {
246 | // Validate that required arguments are passed and are the correct types
247 | if (!filePathAndName) {
248 | // eslint-disable-next-line
249 | console.info('Supply a path to the file you want to create or replace the contents of as the first argument to this function.');
250 | return;
251 | } else if (typeof(filePathAndName) !== 'string') {
252 | // eslint-disable-next-line
253 | console.info('File path and name must be passed as a string.');
254 | return;
255 | } else if (!data) {
256 | // eslint-disable-next-line
257 | console.info('You must pass in the data to be stored as the second argument to this function.');
258 | return;
259 | } else if (typeof(data) !== 'string') {
260 | // eslint-disable-next-line
261 | console.info('The data to be stored must be passed as a string.');
262 | return;
263 | } else if (callback && typeof(callback) !== 'function') {
264 | // eslint-disable-next-line
265 | console.info('Your callback must be passed as a function.');
266 | return;
267 | }
268 |
269 | // Write to the file the user passed in
270 | fs.writeFile(filePathAndName, data, function (err) {
271 | // If there was a problem writing to the file
272 | if (err) {
273 | // eslint-disable-next-line
274 | console.info('There was an error attempting to write data to disk.');
275 | // eslint-disable-next-line
276 | console.warn({
277 | filePathAndName: filePathAndName,
278 | data: data,
279 | error: err.message
280 | });
281 | return;
282 | // After file is saved/updated successfully, run the callback if it was passed in
283 | } else if (callback) {
284 | callback();
285 | }
286 | });
287 | },
288 |
289 | // URL Stuff
290 | urlKeyup: function () {
291 | this.reset();
292 | this.outputFileName = cleanURL(this.url);
293 | this.saveSettings();
294 | this.unlockRun();
295 | },
296 |
297 | // Output Folder stuff
298 | outputFolderIcon: function () {
299 | var outputTextField = this.$refs.outputFolderBrowse;
300 | outputTextField.click();
301 | },
302 | outputFolderSet: function (evt) {
303 | this.folderPicker = evt.currentTarget.value;
304 | this.outputFolderChanged();
305 | },
306 | outputFolderChanged: function () {
307 | this.reset();
308 | this.saveSettings();
309 | },
310 |
311 | // Dropdowns (Standards/File Format)
312 | dropdownChanged: function () {
313 | this.reset();
314 | this.saveSettings();
315 | showHideImageAltsBox();
316 | },
317 | standardName: function () {
318 | return this.standards[this.standard];
319 | },
320 | outputTypeName: function () {
321 | return this.outputTypes[this.outputType];
322 | },
323 |
324 | // Error/Warning/Notice Buttons
325 | toggleButton: function (button) {
326 | event.preventDefault();
327 | this.reset();
328 |
329 | this[button] = !this[button];
330 |
331 | this.saveSettings();
332 | this.unlockRun();
333 | },
334 |
335 | clipboard: function (evt) {
336 | evt.preventDefault();
337 | var data = fs.readFileSync('scripts/imgalts5.min.js', 'binary');
338 | var dummy = document.createElement('textarea');
339 | dummy.setAttribute('id', 'dummy');
340 | document.body.appendChild(dummy);
341 | var dumNode = document.getElementById('dummy');
342 | dumNode.value = data;
343 | dumNode.select();
344 | document.execCommand('copy');
345 | document.body.removeChild(dumNode);
346 |
347 | // TODO: Embed this in the #results directly and use Vue/CSS to show/fadeout
348 | var message =
349 | '' + 193 | '
Pa11y Error:
' + 194 | '' + 195 | '' + error + '
' + 196 | '' +
350 | '' +
351 | '
';
353 | $('#results').html(message);
354 |
355 | setTimeout(function () {
356 | $('#results .alert').fadeOut('slow');
357 | }, 700);
358 | }
359 | },
360 | watch: {
361 | aboutModal: function (newVal) {
362 | var className = 'modal-open';
363 | if (newVal) {
364 | document.body.classList.add(className);
365 | } else {
366 | document.body.classList.remove(className);
367 | }
368 | }
369 | }
370 | });
371 |
372 | app.prefillOutput();
373 |
374 | /*
375 | $('.navbar-brand img').on('contextmenu', function (evt) {
376 | evt.preventDefault();
377 | evt.stopPropagation();
378 | nw.Window.get().showDevTools();
379 | });
380 | */
381 |
382 | if (process.platform === 'darwin') {
383 | keyBindings();
384 | }
385 |
386 |
387 | $('#imageAltsModal .modal-header .glyphicon-remove').click(function () {
388 | $('#imageAltsModal').slideUp('slow');
389 | });
390 |
391 |
392 | function showHideImageAltsBox () {
393 | if (app.outputType === 'csv') {
394 | $('#imageAltsSection').slideUp(480);
395 | } else {
396 | $('#imageAltsSection').slideDown(480);
397 | }
398 | }
399 |
400 | showHideImageAltsBox();
401 |
402 | /**
403 | * Process an array of objects, each containing the src and alt data for images.
404 | * @param {array} data Array of objects. Each object has a "src" and "alt" for an image.
405 | */
406 | function processAltsScript (callback) {
407 | var http = require('http');
408 | var https = require('https');
409 | var i = 0;
410 |
411 | var data = window.imgAltsParsed;
412 |
413 | function rmrf (location) {
414 | location = path.normalize(location);
415 | while (fs.existsSync(location)) {
416 | if (process.platform == 'win32') {
417 | require('child_process').execSync('rd /S /Q "' + location + '"');
418 | } else {
419 | fs.removeSync(location);
420 | }
421 | }
422 | }
423 |
424 | while (fs.existsSync(temp)) {
425 | rmrf(temp);
426 | }
427 | if (!fs.existsSync(temp)) {
428 | fs.mkdirSync(temp);
429 | }
430 | function imageAltsDonut (i) {
431 | if (typeof(i) === 'boolean') {
432 | updateDonutChart('#imageaAltsDonut', 100, true);
433 | } else {
434 | updateDonutChart('#imageAltsDonut', (100 * (i / data.length)), true);
435 | }
436 | }
437 |
438 | function downloadComplete (response, newFile) {
439 | if (response.statusCode == 200) {
440 | var piped = response.pipe(fs.createWriteStream(newFile));
441 | window.imgAltsParsed[i].path = newFile;
442 | piped.on('finish', function () {
443 | i = i + 1;
444 | imageAltsDonut(i);
445 | downloadImage();
446 | });
447 | } else {
448 | // eslint-disable-next-line
449 | console.log(response.statusCode, newFile, 'failed');
450 | i = i + 1;
451 | imageAltsDonut(i);
452 | downloadImage();
453 | }
454 | }
455 |
456 | function downloadImage () {
457 | if (i <= data.length - 1) {
458 | var image = data[i];
459 | // If there is a src
460 | if (image.src.length > 1) {
461 | var ext = path.extname(image.src);
462 | ext = ext.split('?')[0].split('#')[0];
463 | var newFile = path.join(appData, 'temp', i + ext);
464 | var protocol = image.src.split('://')[0];
465 |
466 | if (image.src.indexOf('data:image/') == 0) {
467 | // eslint-disable-next-line no-unused-vars
468 | base64Img.img(image.src, path.join(appData, 'temp'), i, function (err, filepath) {
469 | window.imgAltsParsed[i].path = filepath;
470 | if (err) {
471 | // eslint-disable-next-line no-console
472 | console.log(err);
473 | }
474 | i = i + 1;
475 | imageAltsDonut(i);
476 | downloadImage();
477 | });
478 | } else if (protocol == 'http') {
479 | http.get(image.src, function (response) {
480 | downloadComplete(response, newFile);
481 | });
482 | } else if (protocol == 'https') {
483 | https.get(image.src, function (response) {
484 | downloadComplete(response, newFile);
485 | });
486 | } else if (i < data.length - 1) {
487 | i = i + 1;
488 | imageAltsDonut(i);
489 | downloadImage();
490 | } else {
491 | imageAltsDonut(true);
492 | callback();
493 | }
494 | // If it is missing a src or alt, but isn't the last image
495 | } else if (i < data.length - 1) {
496 | i = i + 1;
497 | imageAltsDonut(i);
498 | downloadImage();
499 | // done
500 | } else {
501 | imageAltsDonut(true);
502 | callback();
503 | }
504 | // done
505 | } else {
506 | imageAltsDonut(true);
507 | callback();
508 | }
509 | }
510 | downloadImage();
511 | }
512 |
513 | function loadImagesInModal () {
514 | $('#imageAltsDonut').fadeOut('fast');
515 | $('#imageAltsThumbs').html('Copied to Clipboard
' + 352 | 'Is the text under the image descriptive?
'); 516 | 517 | var images = window.imgAltsParsed; 518 | 519 | images.forEach(function (file, i) { 520 | var alt = file.alt; 521 | var src = file.src; 522 | if (file.path && fs.existsSync(file.path)) { 523 | src = 'file://' + file.path; 524 | } else if (file.src.length < 1) { 525 | src = 'img/broken.png'; 526 | } 527 | if (alt) { 528 | var image = 529 | '' +
530 | '' +
531 | '
' +
532 | '' + alt + ' ' +
533 | ' ' +
534 | '' +
535 | '' +
536 | '
';
537 | $('#imageAltsThumbs').append(image);
538 | }
539 | });
540 | window.confirmedImages = [];
541 | $('#imageAltsThumbs .btn').click(function () {
542 | $(this).removeClass('disabled');
543 | $(this).siblings('.btn').addClass('disabled');
544 | var imgnum = $(this).parent().data('imgnum');
545 | var closestImg = $(this).siblings('figure').find('img');
546 | if ($(this).hasClass('btn-success')) {
547 | $(closestImg).addClass('bg-success');
548 | $(closestImg).removeClass('bg-warning');
549 | } else {
550 | $(closestImg).addClass('bg-warning');
551 | $(closestImg).removeClass('bg-success');
552 | }
553 |
554 | window.confirmedImages[imgnum] = $(this).hasClass('btn-success');
555 | var filtered = window.confirmedImages.filter(function (val) {
556 | if (typeof(val) != 'undefined') {
557 | return true;
558 | } else {
559 | return false;
560 | }
561 | });
562 | if ($('[data-imgnum]').length === filtered.length) {
563 | $('#imageAltsModal .modal-footer .btn').removeClass('disabled');
564 | } else {
565 | $('#imageAltsModal .modal-footer .btn').addClass('disabled');
566 | }
567 | });
568 | }
569 |
570 | $('#imageAltsModal .modal-footer .btn').click(function () {
571 | if (!$(this).hasClass('disabled')) {
572 | var imagesWithDescriptiveAltText = 0;
573 | var altTagsUnder100Characters = 0;
574 | var totalImages = window.imgAltsParsed.length;
575 | var imagesUnder100KB = 0;
576 | var totalFileSizeInBytes = 0;
577 | var imagesLoaded = 0;
578 |
579 | window.confirmedImages.forEach(function (img) {
580 | if (img) {
581 | imagesWithDescriptiveAltText = imagesWithDescriptiveAltText + 1;
582 | }
583 | });
584 |
585 | for (var i = 0, len = window.imgAltsParsed.length; i < len; i++) {
586 | window.imgAltsParsed[i].size = 0;
587 | var imgPath = window.imgAltsParsed[i].path;
588 | var imgAlt = window.imgAltsParsed[i].alt;
589 |
590 | if (imgPath && imgPath.length > 1) {
591 | window.imgAltsParsed[i].size = fs.statSync(imgPath).size;
592 | }
593 |
594 | var size = window.imgAltsParsed[i].size;
595 |
596 | if (size <= (100 * 1024)) {
597 | imagesUnder100KB = imagesUnder100KB + 1;
598 | }
599 | totalFileSizeInBytes = totalFileSizeInBytes + size;
600 |
601 | if (size > 0) {
602 | imagesLoaded = imagesLoaded + 1;
603 | }
604 |
605 | if (imgAlt.length <= 100) {
606 | altTagsUnder100Characters = altTagsUnder100Characters + 1;
607 | }
608 | }
609 |
610 | window.imageStats = {
611 | 'totalImages': totalImages,
612 | 'descriptive': imagesWithDescriptiveAltText,
613 | 'nondescriptive': totalImages - imagesWithDescriptiveAltText,
614 | 'under100Char': altTagsUnder100Characters,
615 | 'under100KB': imagesUnder100KB,
616 | 'imagesLoaded': imagesLoaded,
617 | 'totalFileSizeInBytes': totalFileSizeInBytes,
618 | 'totalFileSizeInKB': Math.round((totalFileSizeInBytes / 1024) * 10) / 10,
619 | 'descriptivePercent': Math.round((imagesWithDescriptiveAltText / totalImages) * 100),
620 | 'under100CharPercent': Math.round((altTagsUnder100Characters / totalImages) * 100),
621 | 'under100KBPercent': Math.round((imagesUnder100KB / totalImages) * 100),
622 | 'imagesLoadedPercent': Math.round((imagesLoaded / totalImages) * 100)
623 | };
624 |
625 | $('#imageAltsModal').slideUp('slow');
626 | runPa11y();
627 | }
628 | });
629 |
630 | $('#run').click(function (evt) {
631 | evt.preventDefault();
632 | $('#imageAltsThumbs').empty();
633 | fs.emptyDirSync(path.join(nw.App.dataPath, 'temp'));
634 | window.imageStats = {};
635 | window.imgAltsParsed = [];
636 |
637 | // If there is text in the textarea and we aren't on CSV which doesn't support image stats output
638 | if (app.imageAlts && app.outputType !== 'csv') {
639 | // This will output an error if JSON is invalid, or if there is no text
640 | window.imgAltsParsed = tryParseJSON(app.imageAlts);
641 | // If the text is valid JSON
642 | if (window.imgAltsParsed.length > 0 && typeof(window.imgAltsParsed) == 'object') {
643 | $('#imageAltsModal').fadeIn('slow');
644 | $('#imageAltsDonut').fadeIn('fast');
645 | processAltsScript(loadImagesInModal);
646 | } else {
647 | runPa11y();
648 | }
649 | } else {
650 | runPa11y();
651 | }
652 | });
653 |
654 | function runPa11y () {
655 | $('#spinner').fadeIn('slow');
656 | app.reset();
657 |
658 | var filetype = 'html';
659 | var ext = '.html';
660 | if (app.outputType === 'csv') {
661 | filetype = 'csv';
662 | ext = '.csv';
663 | } else if (app.outputType === 'html') {
664 | filetype = 'html';
665 | ext = '.html';
666 | } else if (app.outputType === 'json') {
667 | filetype = 'json';
668 | ext = '.json';
669 | } else if (app.outputType === 'md') {
670 | filetype = 'markdown';
671 | ext = '.md';
672 | } else if (app.outputType === 'xml') {
673 | filetype = 'xml';
674 | ext = '.xml';
675 | }
676 |
677 | var standard = 'WCAG2AA';
678 | if (app.standard === 'section') {
679 | standard = 'Section508';
680 | } else if (app.standard === 'wcaga') {
681 | standard = 'WCAG2A';
682 | } else if (app.standard === 'wcagaa') {
683 | standard = 'WCAG2AA';
684 | } else if (app.standard === 'wcagaaa') {
685 | standard = 'WCAG2AAA';
686 | }
687 |
688 | var ignore = [];
689 | if ($('#button-badges .btn-danger').hasClass('disabled')) {
690 | ignore.push('error');
691 | }
692 | if ($('#button-badges .btn-warning').hasClass('disabled')) {
693 | ignore.push('warning');
694 | }
695 | if ($('#button-badges .btn-primary').hasClass('disabled')) {
696 | ignore.push('notice');
697 | }
698 |
699 | var url = app.url;
700 | var folderPicker = app.folderPicker;
701 | var fileName = app.outputFileName;
702 | var file = path.join(folderPicker, fileName + ext);
703 |
704 | var pa11y = require('pa11y');
705 | var phantomjs = require('phantomjs-prebuilt');
706 |
707 | var test = pa11y({
708 | 'phantomjs': {
709 | 'path': phantomjs.path
710 | },
711 | 'allowedStandards': [standard],
712 | 'standard': standard,
713 | 'reporter': filetype,
714 | 'ignore': ignore
715 | });
716 |
717 | test.run(url, function (error, results) {
718 | $('#spinner').fadeOut('slow');
719 |
720 | if (error) {
721 | // eslint-disable-next-line no-console
722 | console.error(error);
723 | app.errorMessage(error.message);
724 | return;
725 | }
726 |
727 | // Badges
728 | var badges = {
729 | 'errors': 0,
730 | 'warnings': 0,
731 | 'notices': 0
732 | };
733 | var i = 0;
734 |
735 | for (i = 0; i < results.length; i++) {
736 | var theType = results[i].type;
737 | if (theType == 'error') {
738 | badges.errors = badges.errors + 1;
739 | } else if (theType == 'warning') {
740 | badges.warnings = badges.warnings + 1;
741 | } else if (theType == 'notice') {
742 | badges.notices = badges.notices + 1;
743 | }
744 | }
745 |
746 | app.badges.errors = badges.errors;
747 | app.badges.warnings = badges.warnings;
748 | app.badges.notices = badges.notices;
749 |
750 | // JSON
751 | if (app.outputType === 'json') {
752 | var outputJSON = formatJSON(window.imageStats, results);
753 |
754 | app.writeToFile(file, outputJSON);
755 |
756 | $('#results').html(app.successMessage(file, filetype));
757 | // CSV
758 | } else if (app.outputType === 'csv') {
759 | var outputCSV = formatCSV(window.imageStats, results);
760 |
761 | app.writeToFile(file, outputCSV);
762 |
763 | app.successMessage(file, filetype);
764 | // Markdown
765 | } else if (app.outputType === 'md') {
766 | var outputMD = formatMD(window.imageStats, results, app.url);
767 |
768 | app.writeToFile(file, outputMD);
769 |
770 | app.successMessage(file, filetype);
771 | // XML
772 | } else if (app.outputType === 'xml') {
773 | var outputXML = formatXML(window.imageStats, results);
774 |
775 | app.writeToFile(file, outputXML);
776 |
777 | app.successMessage(file, filetype);
778 | // HTML
779 | } else {
780 | var buttons = {
781 | errors: {
782 | enabled: app.errorsButton,
783 | amount: app.badges.errors
784 | },
785 | warnings: {
786 | enabled: app.warningsButton,
787 | amount: app.badges.warnings
788 | },
789 | notices: {
790 | enabled: app.noticesButton,
791 | amount: app.badges.notices
792 | }
793 | };
794 |
795 | var outputHTML = formatHTML(window.imageStats, results, url, buttons);
796 |
797 | app.writeToFile(file, outputHTML);
798 | app.successMessage(file, filetype);
799 | }
800 | });
801 | }
802 |
803 | /**
804 | * Experimented with this, but not currently using it.
805 | *
806 | * The idea was to have PhantomJS go to the URL and run the ImgAlts script for us
807 | * to completely automate the process, however we still need the user to load the
808 | * lazy loading items on pages, and to confirm that alt tags are descriptive. So
809 | * this effort has been abandoned. Though it does successfully spin up and run our
810 | * phantom-imgalts.js script. So I'm keeping it here for future use, in case we
811 | * need to automate something else, or just as a reference for other projects.
812 | *
813 | * @param {String} url URL for PhantomJS to load
814 | * @param {Function} callback Callback to run upon PhantomJS script finishing
815 | * @return {Null} Currently nothing, just console logs.
816 | */
817 | /*
818 | // eslint-disable-next-line
819 | function phantomImgAlts (url, callback) {
820 | if (!url) {
821 | // eslint-disable-next-line
822 | console.log('Pass in a URL.');
823 | return;
824 | }
825 | var path = require('path');
826 | var exec = require('child_process').execFile;
827 | var phantomjs = require('phantomjs-prebuilt');
828 | var binPath = phantomjs.path;
829 |
830 | var childArgs = [path.join(process.cwd(), 'scripts', 'phantom-imgalts.js'), url];
831 |
832 | exec(binPath, childArgs, function (err, stdout, stderr) {
833 | if (err) {
834 | // eslint-disable-next-line
835 | console.log(err);
836 | app.errorMessage(err);
837 | return;
838 | }
839 |
840 | if (stderr) {
841 | // eslint-disable-next-line
842 | console.log(stderr);
843 | app.errorMessage(stderr);
844 | return;
845 | }
846 |
847 | if (callback) {
848 | if (stdout == 'No URL passed in.') {
849 | // eslint-disable-next-line
850 | console.log(stdout);
851 | } else {
852 | var data = JSON.parse(stdout);
853 | callback(data);
854 | }
855 | } else {
856 | // eslint-disable-next-line
857 | console.log(stdout);
858 | }
859 | });
860 | }
861 | */
862 |
863 |
864 |
865 |
866 |
867 |
868 | app.loadSettings();
869 |
--------------------------------------------------------------------------------
/_sass/_ven.uikit-var.sass:
--------------------------------------------------------------------------------
1 | // All possible UIKit variables
2 | // Uncomment the values you want to change
3 |
4 | // $global-margin: 20px
5 | // $accordion-item-margin-top: $global-margin
6 | // $global-medium-font-size: 1.25rem
7 | // $accordion-title-font-size: $global-medium-font-size
8 | // $accordion-title-line-height: 1.4
9 | // $accordion-content-margin-top: $global-margin
10 | // $alert-margin-vertical: $global-margin
11 | // $global-small-gutter: 15px
12 | // $alert-padding: $global-small-gutter
13 | // $alert-padding-right: $alert-padding + 14px
14 | // $global-muted-background: #f8f8f8
15 | // $alert-background: $global-muted-background
16 | // $global-color: #666
17 | // $alert-color: $global-color
18 | // $alert-close-top: $alert-padding + 5px
19 | // $alert-close-right: $alert-padding
20 | $global-primary-background: #18BC9C
21 | // $alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%)
22 | // $alert-primary-color: $global-primary-background
23 | // $global-success-background: #32d296
24 | // $alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%)
25 | // $alert-success-color: $global-success-background
26 | // $global-warning-background: #faa05a
27 | // $alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%)
28 | // $alert-warning-color: $global-warning-background
29 | // $global-danger-background: #f0506e
30 | // $alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%)
31 | // $alert-danger-color: $global-danger-background
32 | // $global-gutter: 30px
33 | // $align-margin-horizontal: $global-gutter
34 | // $align-margin-vertical: $global-gutter
35 | // $global-medium-gutter: 40px
36 | // $align-margin-horizontal-l: $global-medium-gutter
37 | // $global-large-margin: 70px
38 | // $article-margin-top: $global-large-margin
39 | // $global-xxlarge-font-size: 2.625rem
40 | // $article-title-font-size: $global-xxlarge-font-size
41 | // $article-title-line-height: 1.2
42 | // $global-small-font-size: 0.875rem
43 | // $article-meta-font-size: $global-small-font-size
44 | // $article-meta-line-height: 1.4
45 | // $global-muted-color: #999
46 | // $article-meta-color: $global-muted-color
47 | // $global-inverse-color: #fff
48 | // $inverse-global-muted-color: rgba($global-inverse-color, 0.5)
49 | // $inverse-article-meta-color: $inverse-global-muted-color
50 | // $global-background: #fff
51 | // $background-default-background: $global-background
52 | // $background-muted-background: $global-muted-background
53 | // $background-primary-background: $global-primary-background
54 | // $global-secondary-background: #222
55 | // $background-secondary-background: $global-secondary-background
56 | // $badge-size: 22px
57 | // $badge-padding-vertical: 0
58 | // $badge-padding-horizontal: 5px
59 | // $badge-border-radius: 500px
60 | // $badge-background: $global-primary-background
61 | // $badge-color: $global-inverse-color
62 | // $badge-font-size: $global-small-font-size
63 | // $badge-hover-color: $global-inverse-color
64 | // $inverse-global-primary-background: $global-inverse-color
65 | // $inverse-badge-background: $inverse-global-primary-background
66 | // $inverse-global-inverse-color: $global-color
67 | // $inverse-badge-color: $inverse-global-inverse-color
68 | // $inverse-badge-hover-color: $inverse-global-inverse-color
69 | // $animation-duration: 0.5s
70 | // $animation-fade-duration: 0.8s
71 | // $animation-kenburns-duration: 15s
72 | // $animation-fast-duration: 0.1s
73 | // $animation-slide-small-translate: 10px
74 | // $animation-slide-medium-translate: 50px
75 | // $breadcrumb-item-font-size: $global-small-font-size
76 | // $breadcrumb-item-color: $global-muted-color
77 | // $breadcrumb-item-hover-color: $global-color
78 | // $breadcrumb-item-hover-text-decoration: none
79 | // $breadcrumb-item-active-color: $global-color
80 | // $breadcrumb-divider: "/"
81 | // $breadcrumb-divider-margin-horizontal: 20px
82 | // $breadcrumb-divider-color: $global-muted-color
83 | // $inverse-breadcrumb-item-color: $inverse-global-muted-color
84 | // $inverse-global-color: rgba($global-inverse-color, 0.7)
85 | // $inverse-breadcrumb-item-hover-color: $inverse-global-color
86 | // $inverse-breadcrumb-item-active-color: $inverse-global-color
87 | // $inverse-breadcrumb-divider-color: $inverse-global-muted-color
88 | // $base-body-background: $global-background
89 | // $global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
90 | // $base-body-font-family: $global-font-family
91 | // $base-body-font-weight: normal
92 | // $global-font-size: 16px
93 | // $base-body-font-size: $global-font-size
94 | // $global-line-height: 1.5
95 | // $base-body-line-height: $global-line-height
96 | // $base-body-color: $global-color
97 | // $global-link-color: #1e87f0
98 | // $base-link-color: $global-link-color
99 | // $base-link-text-decoration: none
100 | // $global-link-hover-color: #0f6ecd
101 | // $base-link-hover-color: $global-link-hover-color
102 | // $base-link-hover-text-decoration: underline
103 | // $base-code-font-size: $global-small-font-size
104 | // $base-code-font-family: Consolas, monaco, monospace
105 | // $base-code-color: $global-danger-background
106 | // $base-em-color: $global-danger-background
107 | // $base-ins-background: #ffd
108 | // $base-ins-color: $global-color
109 | // $base-mark-background: #ffd
110 | // $base-mark-color: $global-color
111 | // $base-quote-font-style: italic
112 | // $base-small-font-size: 80%
113 | // $base-margin-vertical: $global-margin
114 | // $base-heading-font-family: $global-font-family
115 | // $base-heading-font-weight: normal
116 | // $global-emphasis-color: #333
117 | // $base-heading-color: $global-emphasis-color
118 | // $base-heading-text-transform: none
119 | // $global-medium-margin: 40px
120 | // $base-heading-margin-top: $global-medium-margin
121 | // $base-h1-font-size: $global-xxlarge-font-size
122 | // $base-h1-line-height: 1.2
123 | // $global-xlarge-font-size: 2rem
124 | // $base-h2-font-size: $global-xlarge-font-size
125 | // $base-h2-line-height: 1.3
126 | // $global-large-font-size: 1.5rem
127 | // $base-h3-font-size: $global-large-font-size
128 | // $base-h3-line-height: 1.4
129 | // $base-h4-font-size: $global-medium-font-size
130 | // $base-h4-line-height: 1.4
131 | // $base-h5-font-size: $global-font-size
132 | // $base-h5-line-height: 1.4
133 | // $base-h6-font-size: $global-small-font-size
134 | // $base-h6-line-height: 1.4
135 | // $base-list-padding-left: 30px
136 | // $base-hr-margin-vertical: $global-margin
137 | // $global-border-width: 1px
138 | // $base-hr-border-width: $global-border-width
139 | // $global-border: #e5e5e5
140 | // $base-hr-border: $global-border
141 | // $base-blockquote-font-size: $global-medium-font-size
142 | // $base-blockquote-line-height: 1.5
143 | // $base-blockquote-font-style: italic
144 | // $base-blockquote-margin-vertical: $global-margin
145 | // $global-small-margin: 10px
146 | // $base-blockquote-footer-margin-top: $global-small-margin
147 | // $base-blockquote-footer-font-size: $global-small-font-size
148 | // $base-blockquote-footer-line-height: 1.5
149 | // $base-pre-font-size: $global-small-font-size
150 | // $base-pre-line-height: 1.5
151 | // $base-pre-font-family: $base-code-font-family
152 | // $base-pre-color: $global-color
153 | // $base-selection-background: #39f
154 | // $base-selection-color: $global-inverse-color
155 | // $inverse-base-color: $inverse-global-color
156 | // $inverse-global-emphasis-color: $global-inverse-color
157 | // $inverse-base-link-color: $inverse-global-emphasis-color
158 | // $inverse-base-link-hover-color: $inverse-global-emphasis-color
159 | // $inverse-base-code-color: $inverse-global-color
160 | // $inverse-base-em-color: $inverse-global-emphasis-color
161 | // $inverse-base-heading-color: $inverse-global-emphasis-color
162 | // $inverse-global-border: rgba($global-inverse-color, 0.2)
163 | // $inverse-base-hr-border: $inverse-global-border
164 | // $close-color: $global-muted-color
165 | // $close-hover-color: $global-color
166 | // $inverse-close-color: $inverse-global-muted-color
167 | // $inverse-close-hover-color: $inverse-global-color
168 | // $card-body-padding-horizontal: $global-gutter
169 | // $card-body-padding-vertical: $global-gutter
170 | // $card-body-padding-horizontal-l: $global-medium-gutter
171 | // $card-body-padding-vertical-l: $global-medium-gutter
172 | // $card-header-padding-horizontal: $global-gutter
173 | // $card-header-padding-vertical: round($global-gutter / 2)
174 | // $card-header-padding-horizontal-l: $global-medium-gutter
175 | // $card-header-padding-vertical-l: round($global-medium-gutter / 2)
176 | // $card-footer-padding-horizontal: $global-gutter
177 | // $card-footer-padding-vertical: ($global-gutter / 2)
178 | // $card-footer-padding-horizontal-l: $global-medium-gutter
179 | // $card-footer-padding-vertical-l: round($global-medium-gutter / 2)
180 | // $card-title-font-size: $global-large-font-size
181 | // $card-title-line-height: 1.4
182 | // $card-badge-top: $global-gutter
183 | // $card-badge-right: $card-badge-top
184 | // $card-hover-background: $global-muted-background
185 | // $card-default-background: $global-muted-background
186 | // $card-default-color: $global-color
187 | // $card-default-title-color: $global-emphasis-color
188 | // $card-default-hover-background: darken($card-default-background, 5%)
189 | // $card-primary-background: $global-primary-background
190 | // $card-primary-color: $global-inverse-color
191 | // $card-primary-title-color: $card-primary-color
192 | // $card-primary-hover-background: darken($card-primary-background, 5%)
193 | // $card-primary-color-mode: light
194 | // $card-secondary-background: $global-secondary-background
195 | // $card-secondary-color: $global-inverse-color
196 | // $card-secondary-title-color: $card-secondary-color
197 | // $card-secondary-hover-background: darken($card-secondary-background, 5%)
198 | // $card-secondary-color-mode: light
199 | // $card-small-body-padding-horizontal: $global-margin
200 | // $card-small-body-padding-vertical: $global-margin
201 | // $card-small-header-padding-horizontal: $global-margin
202 | // $card-small-header-padding-vertical: round($global-margin / 1.5)
203 | // $card-small-footer-padding-horizontal: $global-margin
204 | // $card-small-footer-padding-vertical: round($global-margin / 1.5)
205 | // $global-large-gutter: 70px
206 | // $card-large-body-padding-horizontal-l: $global-large-gutter
207 | // $card-large-body-padding-vertical-l: $global-large-gutter
208 | // $card-large-header-padding-horizontal-l: $global-large-gutter
209 | // $card-large-header-padding-vertical-l: round($global-large-gutter / 2)
210 | // $card-large-footer-padding-horizontal-l: $global-large-gutter
211 | // $card-large-footer-padding-vertical-l: round($global-large-gutter / 2)
212 | // $global-control-height: 40px
213 | // $button-line-height: $global-control-height
214 | // $global-control-small-height: 30px
215 | // $button-small-line-height: $global-control-small-height
216 | // $global-control-large-height: 55px
217 | // $button-large-line-height: $global-control-large-height
218 | // $button-font-size: $global-font-size
219 | // $button-small-font-size: $global-small-font-size
220 | // $button-large-font-size: $global-medium-font-size
221 | // $button-padding-horizontal: $global-gutter
222 | // $button-small-padding-horizontal: $global-small-gutter
223 | // $button-large-padding-horizontal: $global-medium-gutter
224 | // $button-default-background: $global-muted-background
225 | // $button-default-color: $global-emphasis-color
226 | // $button-default-hover-background: darken($button-default-background, 5%)
227 | // $button-default-hover-color: $global-emphasis-color
228 | // $button-default-active-background: darken($button-default-background, 10%)
229 | // $button-default-active-color: $global-emphasis-color
230 | // $button-primary-background: $global-primary-background
231 | // $button-primary-color: $global-inverse-color
232 | // $button-primary-hover-background: darken($button-primary-background, 5%)
233 | // $button-primary-hover-color: $global-inverse-color
234 | // $button-primary-active-background: darken($button-primary-background, 10%)
235 | // $button-primary-active-color: $global-inverse-color
236 | // $button-secondary-background: $global-secondary-background
237 | // $button-secondary-color: $global-inverse-color
238 | // $button-secondary-hover-background: darken($button-secondary-background, 5%)
239 | // $button-secondary-hover-color: $global-inverse-color
240 | // $button-secondary-active-background: darken($button-secondary-background, 10%)
241 | // $button-secondary-active-color: $global-inverse-color
242 | // $button-danger-background: $global-danger-background
243 | // $button-danger-color: $global-inverse-color
244 | // $button-danger-hover-background: darken($button-danger-background, 5%)
245 | // $button-danger-hover-color: $global-inverse-color
246 | // $button-danger-active-background: darken($button-danger-background, 10%)
247 | // $button-danger-active-color: $global-inverse-color
248 | // $button-disabled-background: $global-muted-background
249 | // $button-disabled-color: $global-muted-color
250 | // $button-text-line-height: $global-line-height
251 | // $button-text-color: $global-muted-color
252 | // $button-text-hover-color: $global-color
253 | // $button-text-disabled-color: $global-muted-color
254 | // $button-link-line-height: $global-line-height
255 | // $button-link-color: $global-link-color
256 | // $button-link-hover-color: $global-link-hover-color
257 | // $button-link-hover-text-decoration: underline
258 | // $button-link-disabled-color: $global-muted-color
259 | // $inverse-button-default-background: $inverse-global-primary-background
260 | // $inverse-button-default-color: $inverse-global-inverse-color
261 | // $inverse-button-default-hover-background: darken($inverse-button-default-background, 5%)
262 | // $inverse-button-default-hover-color: $inverse-global-inverse-color
263 | // $inverse-button-default-active-background: darken($inverse-button-default-background, 10%)
264 | // $inverse-button-default-active-color: $inverse-global-inverse-color
265 | // $inverse-button-primary-background: $inverse-global-primary-background
266 | // $inverse-button-primary-color: $inverse-global-inverse-color
267 | // $inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%)
268 | // $inverse-button-primary-hover-color: $inverse-global-inverse-color
269 | // $inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%)
270 | // $inverse-button-primary-active-color: $inverse-global-inverse-color
271 | // $inverse-button-secondary-background: $inverse-global-primary-background
272 | // $inverse-button-secondary-color: $inverse-global-inverse-color
273 | // $inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%)
274 | // $inverse-button-secondary-hover-color: $inverse-global-inverse-color
275 | // $inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%)
276 | // $inverse-button-secondary-active-color: $inverse-global-inverse-color
277 | // $inverse-button-text-color: $inverse-global-muted-color
278 | // $inverse-button-text-hover-color: $inverse-global-color
279 | // $inverse-button-text-disabled-color: $inverse-global-muted-color
280 | // $inverse-button-link-color: $inverse-global-muted-color
281 | // $inverse-button-link-hover-color: $inverse-global-color
282 | // $column-gutter: $global-gutter
283 | // $column-gutter-l: $global-medium-gutter
284 | // $column-divider-rule-color: $global-border
285 | // $column-divider-rule-width: 1px
286 | // $inverse-column-divider-rule-color: $inverse-global-border
287 | // $comment-header-margin-bottom: $global-margin
288 | // $comment-title-font-size: $global-medium-font-size
289 | // $comment-title-line-height: 1.4
290 | // $comment-meta-font-size: $global-small-font-size
291 | // $comment-meta-line-height: 1.4
292 | // $comment-meta-color: $global-muted-color
293 | // $comment-list-margin-top: $global-large-margin
294 | // $comment-list-padding-left: 30px
295 | // $comment-list-padding-left-m: 100px
296 | // $container-max-width: 1200px
297 | // $container-small-max-width: 900px
298 | // $container-large-max-width: 1600px
299 | // $container-padding-horizontal: 15px
300 | // $container-padding-horizontal-s: $global-gutter
301 | // $container-padding-horizontal-m: $global-medium-gutter
302 | // $countdown-item-line-height: 70px
303 | // $countdown-number-font-size: 2rem
304 | // $countdown-number-font-size-s: 4rem
305 | // $countdown-number-font-size-m: 6rem
306 | // $countdown-separator-font-size: 1rem
307 | // $countdown-separator-font-size-s: 2rem
308 | // $countdown-separator-font-size-m: 3rem
309 | // $description-list-term-color: $global-emphasis-color
310 | // $description-list-term-margin-top: $global-margin
311 | // $description-list-divider-term-margin-top: $global-margin
312 | // $description-list-divider-term-border-width: $global-border-width
313 | // $description-list-divider-term-border: $global-border
314 | // $divider-margin-vertical: $global-margin
315 | // $divider-icon-width: 50px
316 | // $divider-icon-height: 20px
317 | // $divider-icon-color: $global-border
318 | // $divider-icon-line-top: 50%
319 | // $divider-icon-line-width: 100%
320 | // $divider-icon-line-border-width: $global-border-width
321 | // $divider-icon-line-border: $global-border
322 | // $internal-divider-icon-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A"
323 | // $divider-small-width: 100px
324 | // $divider-small-border-width: $global-border-width
325 | // $divider-small-border: $global-border
326 | // $inverse-divider-icon-color: $inverse-global-border
327 | // $inverse-divider-icon-line-border: $inverse-global-border
328 | // $inverse-divider-small-border: $inverse-global-border
329 | // $dotnav-margin-horizontal: 15px
330 | // $dotnav-margin-vertical: $dotnav-margin-horizontal
331 | // $dotnav-item-width: 16px
332 | // $dotnav-item-height: $dotnav-item-width
333 | // $dotnav-item-border-radius: 50%
334 | // $dotnav-item-background: fade-out($global-color, 0.9)
335 | // $dotnav-item-hover-background: fade-out($global-color, 0.6)
336 | // $dotnav-item-onclick-background: fade-out($global-color, 0.4)
337 | // $dotnav-item-active-background: fade-out($global-color, 0.6)
338 | // $inverse-dotnav-item-background: fade-out($inverse-global-color, 0.3)
339 | // $inverse-dotnav-item-hover-background: fade-out($inverse-global-color, 0.2)
340 | // $inverse-dotnav-item-onclick-background: fade-out($inverse-global-color, 0.1)
341 | // $inverse-dotnav-item-active-background: fade-out($inverse-global-color, 0.1)
342 | // $global-z-index: 1000
343 | // $drop-z-index: $global-z-index + 20
344 | // $drop-width: 300px
345 | // $drop-margin: $global-margin
346 | // $dropdown-z-index: $global-z-index + 20
347 | // $dropdown-min-width: 200px
348 | // $dropdown-padding: 15px
349 | // $dropdown-background: $global-muted-background
350 | // $dropdown-color: $global-color
351 | // $dropdown-margin: $global-small-margin
352 | // $dropdown-nav-item-color: $global-muted-color
353 | // $dropdown-nav-item-hover-color: $global-color
354 | // $dropdown-nav-header-color: $global-emphasis-color
355 | // $dropdown-nav-divider-border-width: $global-border-width
356 | // $dropdown-nav-divider-border: $global-border
357 | // $dropdown-nav-sublist-item-color: $global-muted-color
358 | // $dropdown-nav-sublist-item-hover-color: $global-color
359 | // $form-range-thumb-height: 15px
360 | // $form-range-thumb-border-radius: 500px
361 | // $form-range-thumb-background: $global-color
362 | // $form-range-track-height: 3px
363 | // $form-range-track-background: darken($global-muted-background, 5%)
364 | // $form-range-track-focus-background: darken($global-muted-background, 15%)
365 | // $form-height: $global-control-height
366 | // $form-line-height: $form-height
367 | // $form-padding-horizontal: 10px
368 | // $form-padding-vertical: 4px
369 | // $form-background: $global-muted-background
370 | // $form-color: $global-color
371 | // $form-focus-background: $global-muted-background
372 | // $form-focus-color: $global-color
373 | // $form-disabled-background: $global-muted-background
374 | // $form-disabled-color: $global-muted-color
375 | // $form-placeholder-color: $global-muted-color
376 | // $form-small-height: $global-control-small-height
377 | // $form-small-padding-horizontal: 8px
378 | // $form-small-line-height: $form-small-height
379 | // $form-small-font-size: $global-small-font-size
380 | // $form-large-height: $global-control-large-height
381 | // $form-large-padding-horizontal: 12px
382 | // $form-large-line-height: $form-large-height
383 | // $form-large-font-size: $global-medium-font-size
384 | // $form-danger-color: $global-danger-background
385 | // $form-success-color: $global-success-background
386 | // $form-width-xsmall: 50px
387 | // $form-width-small: 130px
388 | // $form-width-medium: 200px
389 | // $form-width-large: 500px
390 | // $form-select-padding-right: 20px
391 | // $form-select-icon-color: $global-color
392 | // $form-select-disabled-icon-color: $global-muted-color
393 | // $form-radio-size: 16px
394 | // $form-radio-margin-top: -4px
395 | // $form-radio-background: darken($global-muted-background, 5%)
396 | // $form-radio-checked-background: $global-primary-background
397 | // $form-radio-checked-icon-color: $global-inverse-color
398 | // $form-radio-checked-focus-background: darken($global-primary-background, 10%)
399 | // $form-radio-disabled-background: $global-muted-background
400 | // $form-radio-disabled-icon-color: $global-muted-color
401 | // $form-legend-font-size: $global-large-font-size
402 | // $form-legend-line-height: 1.4
403 | // $form-stacked-margin-bottom: $global-small-margin
404 | // $form-horizontal-label-width: 200px
405 | // $form-horizontal-label-margin-top: 7px
406 | // $form-horizontal-controls-margin-left: 215px
407 | // $form-horizontal-controls-text-padding-top: 7px
408 | // $form-icon-width: $form-height
409 | // $form-icon-font-size: $global-font-size
410 | // $form-icon-color: $global-muted-color
411 | // $form-icon-hover-color: $global-color
412 | // $internal-form-select-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E%0A"
413 | // $internal-form-radio-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"
414 | // $internal-form-checkbox-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%2F%3E%0A%3C%2Fsvg%3E"
415 | // $internal-form-checkbox-indeterminate-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%3E%3C%2Frect%3E%0A%3C%2Fsvg%3E"
416 | // $inverse-global-muted-background: rgba($global-inverse-color, 0.1)
417 | // $inverse-form-background: $inverse-global-muted-background
418 | // $inverse-form-color: $inverse-global-color
419 | // $inverse-form-focus-background: $inverse-global-muted-background
420 | // $inverse-form-focus-color: $inverse-global-color
421 | // $inverse-form-placeholder-color: $inverse-global-muted-color
422 | // $inverse-form-select-icon-color: $inverse-global-color
423 | // $inverse-form-radio-background: darken($inverse-global-muted-background, 5%)
424 | // $inverse-form-radio-checked-background: $inverse-global-primary-background
425 | // $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color
426 | // $inverse-form-radio-checked-focus-background: darken($inverse-global-primary-background, 10%)
427 | // $grid-gutter-horizontal: $global-gutter
428 | // $grid-gutter-vertical: $grid-gutter-horizontal
429 | // $grid-gutter-horizontal-l: $global-medium-gutter
430 | // $grid-gutter-vertical-l: $grid-gutter-horizontal-l
431 | // $grid-small-gutter-horizontal: $global-small-gutter
432 | // $grid-small-gutter-vertical: $grid-small-gutter-horizontal
433 | // $grid-medium-gutter-horizontal: $global-gutter
434 | // $grid-medium-gutter-vertical: $grid-medium-gutter-horizontal
435 | // $grid-large-gutter-horizontal: $global-medium-gutter
436 | // $grid-large-gutter-vertical: $grid-large-gutter-horizontal
437 | // $grid-large-gutter-horizontal-l: $global-large-gutter
438 | // $grid-large-gutter-vertical-l: $grid-large-gutter-horizontal-l
439 | // $grid-divider-border-width: $global-border-width
440 | // $grid-divider-border: $global-border
441 | // $inverse-grid-divider-border: $inverse-global-border
442 | // $heading-primary-font-size: $global-xxlarge-font-size
443 | // $heading-primary-line-height: 1.2
444 | // $heading-primary-font-size-m: 3.75rem
445 | // $heading-primary-line-height-m: 1.1
446 | // $heading-hero-font-size: 4rem
447 | // $heading-hero-line-height: 1.1
448 | // $heading-hero-font-size-s: 6rem
449 | // $heading-hero-line-height-s: 1
450 | // $heading-hero-font-size-m: 8rem
451 | // $heading-hero-line-height-m: 1
452 | // $heading-divider-padding-bottom: 10px
453 | // $heading-divider-border-width: $global-border-width
454 | // $heading-divider-border: $global-border
455 | // $heading-bullet-top: unquote('calc(-0.1 * 1em)')
456 | // $heading-bullet-height: 0.9em
457 | // $heading-bullet-margin-right: 10px
458 | // $heading-bullet-border-width: 5px
459 | // $heading-bullet-border: $global-border
460 | // $heading-line-border-width: $global-border-width
461 | // $heading-line-border: $global-border
462 | // $heading-line-height: $heading-line-border-width
463 | // $heading-line-margin-horizontal: 0.6em
464 | // $inverse-heading-divider-border: $inverse-global-border
465 | // $inverse-heading-bullet-border: $inverse-global-border
466 | // $inverse-heading-line-border: $inverse-global-border
467 | // $icon-image-size: 20px
468 | // $icon-link-color: $global-muted-color
469 | // $icon-link-hover-color: $global-color
470 | // $icon-link-active-color: darken($global-color, 5%)
471 | // $icon-button-size: 36px
472 | // $icon-button-border-radius: 500px
473 | // $icon-button-background: $global-muted-background
474 | // $icon-button-color: $global-muted-color
475 | // $icon-button-hover-background: darken($icon-button-background, 5%)
476 | // $icon-button-hover-color: $global-color
477 | // $icon-button-active-background: darken($icon-button-background, 10%)
478 | // $icon-button-active-color: $global-color
479 | // $inverse-icon-link-color: $inverse-global-muted-color
480 | // $inverse-icon-link-hover-color: $inverse-global-color
481 | // $inverse-icon-link-active-color: $inverse-global-color
482 | // $inverse-icon-button-background: $inverse-global-muted-background
483 | // $inverse-icon-button-color: $inverse-global-muted-color
484 | // $inverse-icon-button-hover-background: darken($inverse-icon-button-background, 5%)
485 | // $inverse-icon-button-hover-color: $inverse-global-color
486 | // $inverse-icon-button-active-background: darken($inverse-icon-button-background, 10%)
487 | // $inverse-icon-button-active-color: $inverse-global-color
488 | // $iconnav-margin-horizontal: $global-small-margin
489 | // $iconnav-margin-vertical: $iconnav-margin-horizontal
490 | // $iconnav-item-color: $global-muted-color
491 | // $iconnav-item-hover-color: $global-color
492 | // $iconnav-item-active-color: $global-color
493 | // $inverse-iconnav-item-color: $inverse-global-muted-color
494 | // $inverse-iconnav-item-hover-color: $inverse-global-color
495 | // $inverse-iconnav-item-active-color: $inverse-global-color
496 | // $inverse-global-color-mode: light
497 | // $label-padding-vertical: 0
498 | // $label-padding-horizontal: $global-small-margin
499 | // $label-background: $global-primary-background
500 | // $label-line-height: $global-line-height
501 | // $label-font-size: $global-small-font-size
502 | // $label-color: $global-inverse-color
503 | // $label-success-background: $global-success-background
504 | // $label-success-color: $global-inverse-color
505 | // $label-warning-background: $global-warning-background
506 | // $label-warning-color: $global-inverse-color
507 | // $label-danger-background: $global-danger-background
508 | // $label-danger-color: $global-inverse-color
509 | // $inverse-label-background: $inverse-global-primary-background
510 | // $inverse-label-color: $inverse-global-inverse-color
511 | // $lightbox-z-index: $global-z-index + 10
512 | // $lightbox-background: #000
513 | // $lightbox-item-color: rgba(255,255,255,0.7)
514 | // $lightbox-toolbar-padding-vertical: 10px
515 | // $lightbox-toolbar-padding-horizontal: 10px
516 | // $lightbox-toolbar-background: rgba(0,0,0,0.3)
517 | // $lightbox-toolbar-color: rgba(255,255,255,0.7)
518 | // $lightbox-toolbar-icon-padding: 5px
519 | // $lightbox-toolbar-icon-color: rgba(255,255,255,0.7)
520 | // $lightbox-toolbar-icon-hover-color: #fff
521 | // $lightbox-button-size: 50px
522 | // $lightbox-button-background: $lightbox-toolbar-background
523 | // $lightbox-button-color: rgba(255,255,255,0.7)
524 | // $lightbox-button-hover-color: #fff
525 | // $link-muted-color: $global-muted-color
526 | // $link-muted-hover-color: $global-color
527 | // $link-text-hover-color: $global-muted-color
528 | // $inverse-link-muted-color: $inverse-global-muted-color
529 | // $inverse-link-muted-hover-color: $inverse-global-color
530 | // $inverse-link-text-hover-color: $inverse-global-muted-color
531 | // $list-margin-top: $global-small-margin
532 | // $list-nested-padding-left: $global-gutter
533 | // $list-divider-margin-top: $global-small-margin
534 | // $list-divider-border-width: $global-border-width
535 | // $list-divider-border: $global-border
536 | // $list-striped-padding-vertical: $global-small-margin
537 | // $list-striped-padding-horizontal: $global-small-margin
538 | // $list-striped-background: $global-muted-background
539 | // $list-bullet-width: ($global-line-height * 1em)
540 | // $list-bullet-height: $list-bullet-width
541 | // $list-bullet-margin-right: $global-small-margin
542 | // $list-bullet-icon-color: $global-color
543 | // $list-large-margin-top: $global-margin
544 | // $list-large-divider-margin-top: $global-margin
545 | // $list-large-striped-padding-vertical: $global-margin
546 | // $list-large-striped-padding-horizontal: $global-small-margin
547 | // $internal-list-bullet-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E"
548 | // $inverse-list-divider-border: $inverse-global-border
549 | // $inverse-list-striped-background: $inverse-global-muted-background
550 | // $inverse-list-bullet-icon-color: $inverse-global-color
551 | // $margin-margin: $global-margin
552 | // $margin-small-margin: $global-small-margin
553 | // $margin-medium-margin: $global-medium-margin
554 | // $margin-large-margin: $global-medium-margin
555 | // $margin-large-margin-l: $global-large-margin
556 | // $margin-xlarge-margin: $global-large-margin
557 | // $global-xlarge-margin: 140px
558 | // $margin-xlarge-margin-l: $global-xlarge-margin
559 | // $marker-padding: 5px
560 | // $marker-background: $global-secondary-background
561 | // $marker-color: $global-inverse-color
562 | // $marker-hover-color: $global-inverse-color
563 | // $inverse-marker-background: $global-muted-background
564 | // $inverse-marker-color: $global-color
565 | // $inverse-marker-hover-color: $global-color
566 | // $modal-z-index: $global-z-index + 10
567 | // $modal-background: rgba(0,0,0,0.6)
568 | // $modal-padding-horizontal: 15px
569 | // $modal-padding-horizontal-s: $global-gutter
570 | // $modal-padding-horizontal-m: $global-medium-gutter
571 | // $modal-padding-vertical: $modal-padding-horizontal
572 | // $modal-padding-vertical-s: 50px
573 | // $modal-dialog-width: 600px
574 | // $modal-dialog-background: $global-background
575 | // $modal-container-width: 1200px
576 | // $modal-body-padding-horizontal: $global-gutter
577 | // $modal-body-padding-vertical: $global-gutter
578 | // $modal-header-padding-horizontal: $global-gutter
579 | // $modal-header-padding-vertical: ($modal-header-padding-horizontal / 2)
580 | // $modal-header-background: $global-muted-background
581 | // $modal-footer-padding-horizontal: $global-gutter
582 | // $modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2)
583 | // $modal-footer-background: $global-muted-background
584 | // $modal-title-font-size: $global-xlarge-font-size
585 | // $modal-title-line-height: 1.3
586 | // $modal-close-position: $global-small-margin
587 | // $modal-close-padding: 5px
588 | // $modal-close-outside-position: 0
589 | // $modal-close-outside-translate: 100%
590 | // $modal-close-outside-color: lighten($global-inverse-color, 20%)
591 | // $modal-close-outside-hover-color: $global-inverse-color
592 | // $nav-item-padding-vertical: 5px
593 | // $nav-item-padding-horizontal: 0
594 | // $nav-sublist-padding-vertical: 5px
595 | // $nav-sublist-padding-left: 15px
596 | // $nav-sublist-deeper-padding-left: 15px
597 | // $nav-sublist-item-padding-vertical: 2px
598 | // $nav-parent-icon-width: ($global-line-height * 1em)
599 | // $nav-parent-icon-height: $nav-parent-icon-width
600 | // $nav-parent-icon-color: $global-color
601 | // $nav-header-padding-vertical: $nav-item-padding-vertical
602 | // $nav-header-padding-horizontal: $nav-item-padding-horizontal
603 | // $nav-header-font-size: $global-small-font-size
604 | // $nav-header-text-transform: uppercase
605 | // $nav-header-margin-top: $global-margin
606 | // $nav-divider-margin-vertical: 5px
607 | // $nav-divider-margin-horizontal: 0
608 | // $nav-default-item-color: $global-muted-color
609 | // $nav-default-item-hover-color: $global-color
610 | // $nav-default-item-active-color: $global-emphasis-color
611 | // $nav-default-header-color: $global-emphasis-color
612 | // $nav-default-divider-border-width: $global-border-width
613 | // $nav-default-divider-border: $global-border
614 | // $nav-default-sublist-item-color: $global-muted-color
615 | // $nav-default-sublist-item-hover-color: $global-color
616 | // $nav-primary-item-font-size: $global-large-font-size
617 | // $nav-primary-item-line-height: $global-line-height
618 | // $nav-primary-item-color: $global-muted-color
619 | // $nav-primary-item-hover-color: $global-color
620 | // $nav-primary-item-active-color: $global-emphasis-color
621 | // $nav-primary-header-color: $global-emphasis-color
622 | // $nav-primary-divider-border-width: $global-border-width
623 | // $nav-primary-divider-border: $global-border
624 | // $nav-primary-sublist-item-color: $global-muted-color
625 | // $nav-primary-sublist-item-hover-color: $global-color
626 | // $internal-nav-parent-close-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%3E%3C%2Fpolyline%3E%0A%3C%2Fsvg%3E"
627 | // $internal-nav-parent-open-image: "data:image/svg+xmlcharset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%3E%3C%2Fpolyline%3E%0A%3C%2Fsvg%3E"
628 | // $inverse-nav-parent-icon-color: $inverse-global-color
629 | // $inverse-nav-default-item-color: $inverse-global-muted-color
630 | // $inverse-nav-default-item-hover-color: $inverse-global-color
631 | // $inverse-nav-default-item-active-color: $inverse-global-emphasis-color
632 | // $inverse-nav-default-header-color: $inverse-global-emphasis-color
633 | // $inverse-nav-default-divider-border: $inverse-global-border
634 | // $inverse-nav-default-sublist-item-color: $inverse-global-muted-color
635 | // $inverse-nav-default-sublist-item-hover-color: $inverse-global-color
636 | // $inverse-nav-primary-item-color: $inverse-global-muted-color
637 | // $inverse-nav-primary-item-hover-color: $inverse-global-color
638 | // $inverse-nav-primary-item-active-color: $inverse-global-emphasis-color
639 | // $inverse-nav-primary-header-color: $inverse-global-emphasis-color
640 | // $inverse-nav-primary-divider-border: $inverse-global-border
641 | // $inverse-nav-primary-sublist-item-color: $inverse-global-muted-color
642 | // $inverse-nav-primary-sublist-item-hover-color: $inverse-global-color
643 | // $navbar-background: $global-muted-background
644 | // $navbar-color-mode: none
645 | // $navbar-nav-item-height: 80px
646 | // $navbar-nav-item-padding-horizontal: 15px
647 | // $navbar-nav-item-color: $global-muted-color
648 | // $navbar-nav-item-font-size: $global-font-size
649 | // $navbar-nav-item-font-family: $global-font-family
650 | // $navbar-nav-item-hover-color: $global-color
651 | // $navbar-nav-item-onclick-color: $global-emphasis-color
652 | // $navbar-nav-item-active-color: $global-emphasis-color
653 | // $navbar-item-color: $global-color
654 | // $navbar-toggle-color: $global-muted-color
655 | // $navbar-toggle-hover-color: $global-color
656 | // $navbar-subtitle-font-size: $global-small-font-size
657 | // $navbar-dropdown-z-index: $global-z-index + 20
658 | // $navbar-dropdown-width: 200px
659 | // $navbar-dropdown-margin: 0
660 | // $navbar-dropdown-padding: 15px
661 | // $navbar-dropdown-background: $global-muted-background
662 | // $navbar-dropdown-color: $global-color
663 | // $navbar-dropdown-grid-gutter-horizontal: $global-gutter
664 | // $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal
665 | // $navbar-dropdown-dropbar-margin-top: 0
666 | // $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top
667 | // $navbar-dropdown-nav-item-color: $global-muted-color
668 | // $navbar-dropdown-nav-item-hover-color: $global-color
669 | // $navbar-dropdown-nav-item-active-color: $global-emphasis-color
670 | // $navbar-dropdown-nav-header-color: $global-emphasis-color
671 | // $navbar-dropdown-nav-divider-border-width: $global-border-width
672 | // $navbar-dropdown-nav-divider-border: $global-border
673 | // $navbar-dropdown-nav-sublist-item-color: $global-muted-color
674 | // $navbar-dropdown-nav-sublist-item-hover-color: $global-color
675 | // $navbar-dropbar-background: $navbar-dropdown-background
676 | // $navbar-dropbar-z-index: $global-z-index + 20
677 | // $inverse-navbar-nav-item-color: $inverse-global-muted-color
678 | // $inverse-navbar-nav-item-hover-color: $inverse-global-color
679 | // $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color
680 | // $inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color
681 | // $inverse-navbar-item-color: $inverse-global-color
682 | // $inverse-navbar-toggle-color: $inverse-global-muted-color
683 | // $inverse-navbar-toggle-hover-color: $inverse-global-color
684 | // $notification-position: 10px
685 | // $notification-z-index: $global-z-index + 40
686 | // $notification-width: 350px
687 | // $notification-message-margin-bottom: 10px
688 | // $notification-message-padding: $global-small-gutter
689 | // $notification-message-background: $global-muted-background
690 | // $notification-message-color: $global-color
691 | // $notification-message-font-size: $global-medium-font-size
692 | // $notification-message-line-height: 1.4
693 | // $notification-close-top: $notification-message-padding + 5px
694 | // $notification-close-right: $notification-message-padding
695 | // $notification-message-primary-color: $global-primary-background
696 | // $notification-message-success-color: $global-success-background
697 | // $notification-message-warning-color: $global-warning-background
698 | // $notification-message-danger-color: $global-danger-background
699 | // $offcanvas-z-index: $global-z-index
700 | // $offcanvas-bar-width: 270px
701 | // $offcanvas-bar-padding-vertical: $global-margin
702 | // $offcanvas-bar-padding-horizontal: $global-margin
703 | // $offcanvas-bar-background: $global-secondary-background
704 | // $offcanvas-bar-color-mode: light
705 | // $offcanvas-bar-width-m: 350px
706 | // $offcanvas-bar-padding-vertical-m: $global-medium-gutter
707 | // $offcanvas-bar-padding-horizontal-m: $global-medium-gutter
708 | // $offcanvas-close-position: 20px
709 | // $offcanvas-close-padding: 5px
710 | // $offcanvas-overlay-background: rgba(0,0,0,0.1)
711 | // $overlay-padding-horizontal: $global-gutter
712 | // $overlay-padding-vertical: $global-gutter
713 | // $overlay-default-background: rgba($global-background, 0.8)
714 | // $overlay-primary-background: rgba($global-secondary-background, 0.8)
715 | // $overlay-primary-color-mode: light
716 | // $padding-padding: $global-gutter
717 | // $padding-padding-l: $global-medium-gutter
718 | // $padding-small-padding: $global-small-gutter
719 | // $padding-large-padding: $global-gutter
720 | // $padding-large-padding-l: $global-large-gutter
721 | // $pagination-margin-horizontal: 20px
722 | // $pagination-item-color: $global-muted-color
723 | // $pagination-item-hover-color: $global-color
724 | // $pagination-item-hover-text-decoration: none
725 | // $pagination-item-active-color: $global-color
726 | // $pagination-item-disabled-color: $global-muted-color
727 | // $inverse-pagination-item-color: $inverse-global-muted-color
728 | // $inverse-pagination-item-hover-color: $inverse-global-color
729 | // $inverse-pagination-item-active-color: $inverse-global-color
730 | // $inverse-pagination-item-disabled-color: $inverse-global-muted-color
731 | // $placeholder-margin-vertical: $global-margin
732 | // $placeholder-padding-vertical: $global-gutter
733 | // $placeholder-padding-horizontal: $global-gutter
734 | // $placeholder-background: $global-muted-background
735 | // $position-small-margin: $global-small-gutter
736 | // $position-medium-margin: $global-gutter
737 | // $progress-height: 15px
738 | // $progress-margin-vertical: $global-margin
739 | // $progress-background: $global-muted-background
740 | // $progress-bar-background: $global-primary-background
741 | // $search-color: $global-color
742 | // $search-placeholder-color: $global-muted-color
743 | // $search-icon-color: $global-muted-color
744 | // $search-default-width: 180px
745 | // $search-default-height: $global-control-height
746 | // $search-default-padding-horizontal: 6px
747 | // $search-default-background: $global-muted-background
748 | // $search-default-focus-background: $search-default-background
749 | // $search-default-icon-width: $global-control-height
750 | // $search-navbar-width: 400px
751 | // $search-navbar-height: 40px
752 | // $search-navbar-background: transparent
753 | // $search-navbar-font-size: $global-large-font-size
754 | // $search-navbar-icon-width: 40px
755 | // $search-large-width: 500px
756 | // $search-large-height: 80px
757 | // $search-large-background: transparent
758 | // $search-large-font-size: $global-xxlarge-font-size
759 | // $search-large-icon-width: 80px
760 | // $search-toggle-color: $global-muted-color
761 | // $search-toggle-hover-color: $global-color
762 | // $inverse-search-color: $inverse-global-color
763 | // $inverse-search-placeholder-color: $inverse-global-muted-color
764 | // $inverse-search-icon-color: $inverse-global-muted-color
765 | // $inverse-search-default-background: $inverse-global-muted-background
766 | // $inverse-search-default-focus-background: $inverse-search-default-background
767 | // $inverse-search-navbar-background: transparent
768 | // $inverse-search-large-background: transparent
769 | // $inverse-search-toggle-color: $inverse-global-muted-color
770 | // $inverse-search-toggle-hover-color: $inverse-global-color
771 | // $section-padding-vertical: $global-medium-margin
772 | // $section-padding-vertical-m: $global-large-margin
773 | // $section-xsmall-padding-vertical: $global-margin
774 | // $section-small-padding-vertical: $global-medium-margin
775 | // $section-large-padding-vertical: $global-large-margin
776 | // $section-large-padding-vertical-m: $global-xlarge-margin
777 | // $section-xlarge-padding-vertical: $global-xlarge-margin
778 | // $section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin)
779 | // $section-default-background: $global-background
780 | // $section-muted-background: $global-muted-background
781 | // $section-primary-background: $global-primary-background
782 | // $section-primary-color-mode: light
783 | // $section-secondary-background: $global-secondary-background
784 | // $section-secondary-color-mode: light
785 | // $slidenav-padding: 5px
786 | // $slidenav-color: fade-out($global-color, 0.4)
787 | // $slidenav-hover-color: fade-out($global-color, 0.2)
788 | // $slidenav-active-color: fade-out($global-color, 0.1)
789 | // $inverse-slidenav-color: fade-out($inverse-global-color, 0.3)
790 | // $inverse-slidenav-hover-color: fade-out($inverse-global-color, 0.2)
791 | // $inverse-slidenav-active-color: fade-out($inverse-global-color, 0.1)
792 | // $sortable-dragged-z-index: $global-z-index + 50
793 | // $sortable-placeholder-opacity: 0
794 | // $sortable-empty-height: 50px
795 | // $spinner-size: 30px
796 | // $spinner-stroke-width: 1
797 | // $spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2)
798 | // $spinner-circumference: round(2 * 3.141 * $spinner-radius)
799 | // $spinner-duration: 1.4s
800 | // $sticky-z-index: $global-z-index - 20
801 | // $sticky-animation-duration: 0.2s
802 | // $sticky-reverse-animation-duration: 0.2s
803 | // $subnav-margin-horizontal: 20px
804 | // $subnav-item-color: $global-muted-color
805 | // $subnav-item-hover-color: $global-color
806 | // $subnav-item-hover-text-decoration: none
807 | // $subnav-item-active-color: $global-emphasis-color
808 | // $subnav-divider-margin-horizontal: $subnav-margin-horizontal
809 | // $subnav-divider-border-height: 1.5em
810 | // $subnav-divider-border-width: $global-border-width
811 | // $subnav-divider-border: $global-border
812 | // $subnav-pill-item-padding-vertical: 5px
813 | // $subnav-pill-item-padding-horizontal: 10px
814 | // $subnav-pill-item-background: transparent
815 | // $subnav-pill-item-color: $subnav-item-color
816 | // $subnav-pill-item-hover-background: $global-muted-background
817 | // $subnav-pill-item-hover-color: $global-color
818 | // $subnav-pill-item-onclick-background: $subnav-pill-item-hover-background
819 | // $subnav-pill-item-onclick-color: $subnav-pill-item-hover-color
820 | // $subnav-pill-item-active-background: $global-primary-background
821 | // $subnav-pill-item-active-color: $global-inverse-color
822 | // $subnav-item-disabled-color: $global-muted-color
823 | // $inverse-subnav-item-color: $inverse-global-muted-color
824 | // $inverse-subnav-item-hover-color: $inverse-global-color
825 | // $inverse-subnav-item-active-color: $inverse-global-emphasis-color
826 | // $inverse-subnav-divider-border: $inverse-global-border
827 | // $inverse-subnav-pill-item-background: transparent
828 | // $inverse-subnav-pill-item-color: $inverse-global-muted-color
829 | // $inverse-subnav-pill-item-hover-background: $inverse-global-muted-background
830 | // $inverse-subnav-pill-item-hover-color: $inverse-global-color
831 | // $inverse-subnav-pill-item-onclick-background: $inverse-subnav-pill-item-hover-background
832 | // $inverse-subnav-pill-item-onclick-color: $inverse-subnav-pill-item-hover-color
833 | // $inverse-subnav-pill-item-active-background: $inverse-global-primary-background
834 | // $inverse-subnav-pill-item-active-color: $inverse-global-inverse-color
835 | // $inverse-subnav-item-disabled-color: $inverse-global-muted-color
836 | // $tab-margin-horizontal: 20px
837 | // $tab-item-padding-horizontal: 10px
838 | // $tab-item-padding-vertical: 5px
839 | // $tab-item-color: $global-muted-color
840 | // $tab-item-hover-color: $global-color
841 | // $tab-item-hover-text-decoration: none
842 | // $tab-item-active-color: $global-emphasis-color
843 | // $tab-item-disabled-color: $global-muted-color
844 | // $inverse-tab-item-color: $inverse-global-muted-color
845 | // $inverse-tab-item-hover-color: $inverse-global-color
846 | // $inverse-tab-item-active-color: $inverse-global-emphasis-color
847 | // $inverse-tab-item-disabled-color: $inverse-global-muted-color
848 | // $table-margin-vertical: $global-margin
849 | // $table-cell-padding-vertical: 16px
850 | // $table-cell-padding-horizontal: 12px
851 | // $table-header-cell-font-size: $global-font-size
852 | // $table-header-cell-font-weight: bold
853 | // $table-header-cell-color: $global-color
854 | // $table-footer-font-size: $global-small-font-size
855 | // $table-caption-font-size: $global-small-font-size
856 | // $table-caption-color: $global-muted-color
857 | // $table-row-active-background: #ffd
858 | // $table-divider-border-width: $global-border-width
859 | // $table-divider-border: $global-border
860 | // $table-striped-row-background: $global-muted-background
861 | // $table-hover-row-background: $table-row-active-background
862 | // $table-small-cell-padding-vertical: 10px
863 | // $table-small-cell-padding-horizontal: 12px
864 | // $table-expand-min-width: 300px
865 | // $inverse-table-header-cell-color: $inverse-global-color
866 | // $inverse-table-caption-color: $inverse-global-muted-color
867 | // $inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02)
868 | // $inverse-table-divider-border: $inverse-global-border
869 | // $inverse-table-striped-row-background: $inverse-global-muted-background
870 | // $inverse-table-hover-row-background: $inverse-table-row-active-background
871 | // $text-lead-font-size: $global-large-font-size
872 | // $text-lead-line-height: 1.5
873 | // $text-lead-color: $global-emphasis-color
874 | // $text-meta-font-size: $global-small-font-size
875 | // $text-meta-line-height: 1.4
876 | // $text-meta-color: $global-muted-color
877 | // $text-small-font-size: $global-small-font-size
878 | // $text-small-line-height: 1.5
879 | // $text-large-font-size: $global-large-font-size
880 | // $text-large-line-height: 1.5
881 | // $text-muted-color: $global-muted-color
882 | // $text-primary-color: $global-primary-background
883 | // $text-success-color: $global-success-background
884 | // $text-warning-color: $global-warning-background
885 | // $text-danger-color: $global-danger-background
886 | // $text-background-color: $global-primary-background
887 | // $inverse-text-lead-color: $inverse-global-color
888 | // $inverse-text-meta-color: $inverse-global-muted-color
889 | // $inverse-text-muted-color: $inverse-global-muted-color
890 | // $inverse-text-primary-color: $inverse-global-color
891 | // $tile-padding-horizontal: 15px
892 | // $tile-padding-horizontal-s: $global-gutter
893 | // $tile-padding-horizontal-m: $global-medium-gutter
894 | // $tile-padding-vertical: $global-medium-margin
895 | // $tile-padding-vertical-m: $global-large-margin
896 | // $tile-xsmall-padding-vertical: $global-margin
897 | // $tile-small-padding-vertical: $global-medium-margin
898 | // $tile-large-padding-vertical: $global-large-margin
899 | // $tile-large-padding-vertical-m: $global-xlarge-margin
900 | // $tile-xlarge-padding-vertical: $global-xlarge-margin
901 | // $tile-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin)
902 | // $tile-default-background: $global-background
903 | // $tile-muted-background: $global-muted-background
904 | // $tile-primary-background: $global-primary-background
905 | // $tile-primary-color-mode: light
906 | // $tile-secondary-background: $global-secondary-background
907 | // $tile-secondary-color-mode: light
908 | // $tooltip-z-index: $global-z-index + 30
909 | // $tooltip-max-width: 200px
910 | // $tooltip-padding-vertical: 3px
911 | // $tooltip-padding-horizontal: 6px
912 | // $tooltip-background: #666
913 | // $tooltip-border-radius: 2px
914 | // $tooltip-color: $global-inverse-color
915 | // $tooltip-font-size: 12px
916 | // $tooltip-margin: 10px
917 | // $totop-padding: 5px
918 | // $totop-color: $global-muted-color
919 | // $totop-hover-color: $global-color
920 | // $totop-active-color: $global-emphasis-color
921 | // $inverse-totop-color: $inverse-global-muted-color
922 | // $inverse-totop-hover-color: $inverse-global-color
923 | // $inverse-totop-active-color: $inverse-global-emphasis-color
924 | // $transition-duration: 0.3s
925 | // $transition-scale: 1.1
926 | // $transition-slide-small-translate: 10px
927 | // $transition-slide-medium-translate: 50px
928 | // $transition-slow-duration: 0.7s
929 | // $breakpoint-small: 640px
930 | // $breakpoint-medium: 960px
931 | // $breakpoint-large: 1200px
932 | // $breakpoint-xlarge: 1600px
933 | // $breakpoint-xsmall-max: ($breakpoint-small - 1)
934 | // $breakpoint-small-max: ($breakpoint-medium - 1)
935 | // $breakpoint-medium-max: ($breakpoint-large - 1)
936 | // $breakpoint-large-max: ($breakpoint-xlarge - 1)
937 | // $global-small-box-shadow: 0 2px 8px rgba(0,0,0,0.08)
938 | // $global-medium-box-shadow: 0 5px 15px rgba(0,0,0,0.08)
939 | // $global-large-box-shadow: 0 14px 25px rgba(0,0,0,0.16)
940 | // $global-xlarge-box-shadow: 0 28px 50px rgba(0,0,0,0.16)
941 | // $panel-scrollable-height: 170px
942 | // $panel-scrollable-padding: 10px
943 | // $panel-scrollable-border-width: $global-border-width
944 | // $panel-scrollable-border: $global-border
945 | // $height-small-height: 150px
946 | // $height-medium-height: 300px
947 | // $height-large-height: 450px
948 | // $border-rounded-border-radius: 5px
949 | // $box-shadow-duration: 0.1s
950 | // $box-shadow-bottom-height: 30px
951 | // $box-shadow-bottom-border-radius: 100%
952 | // $box-shadow-bottom-background: #444
953 | // $box-shadow-bottom-blur: 20px
954 | // $dropcap-margin-right: 10px
955 | // $dropcap-font-size: (($global-line-height * 3) * 1em)
956 | // $leader-fill-content: '.'
957 | // $leader-fill-margin-left: $global-small-gutter
958 | // $logo-font-size: $global-large-font-size
959 | // $logo-font-family: $global-font-family
960 | // $logo-color: $global-color
961 | // $logo-hover-color: $global-color
962 | // $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
963 | // $inverse-logo-color: $inverse-global-color
964 | // $inverse-logo-hover-color: $inverse-global-color
965 | // $width-small-width: 150px
966 | // $width-medium-width: 300px
967 | // $width-large-width: 450px
968 | // $width-xlarge-width: 600px
969 | // $width-xxlarge-width: 750px
970 |
--------------------------------------------------------------------------------