Last active
May 7, 2019 22:17
-
-
Save Ambient-Impact/37bb9ce0be08946ca340b117ef485852 to your computer and use it in GitHub Desktop.
SassDoc Windows 10 item doesn't exist errors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| λ sassdoc ambientimpact_core/stylesheets/**/*.scss --debug | |
| » [DEBUG] argv: ["ambientimpact_core/stylesheets/**/*.scss","--debug"] | |
| » [DEBUG] process.argv: ["C:\\Program Files\\nodejs\\node.exe","C:\\Users\\Ambient.Impact\\AppData\\Roaming\\npm\\node_ | |
| modules\\sassdoc\\bin\\sassdoc","ambientimpact_core/stylesheets/**/*.scss","--debug"] | |
| » [DEBUG] sassdoc version: 2.7.0 | |
| » [DEBUG] node version: 10.15.3 | |
| » [DEBUG] npm version: unknown | |
| » [DEBUG] platform: win32 | |
| » [DEBUG] cwd: E:\Web\Ambient.Impact\Web - Drupal 8\drupal\modules\ambientimpact | |
| » [DEBUG] env: { | |
| "_eventsCount": 2, | |
| "verbose": false, | |
| "strict": false, | |
| "file": ".sassdocrc", | |
| "dir": "E:\\Web\\Ambient.Impact\\Web - Drupal 8\\drupal\\modules\\ambientimpact", | |
| "dest": "E:\\Web\\Ambient.Impact\\Web - Drupal 8\\drupal\\modules\\ambientimpact\\sassdoc", | |
| "destCwd": true, | |
| "displayDest": "sassdoc", | |
| "package": { | |
| "name": "ambientimpact-drupal-modules", | |
| "version": "1.0.0", | |
| "license": "GPL-2.0", | |
| "repository": "gitlab:Ambient.Impact/drupal-modules", | |
| "devDependencies": { | |
| "grunt": "^1.0.3", | |
| "grunt-autoprefixer": "^3.0.4", | |
| "grunt-modernizr": "^1.0.3", | |
| "grunt-sass": "^3.0.2", | |
| "grunt-sassdoc": "^2.0.3", | |
| "grunt-svgstore": "^2.0.0", | |
| "load-grunt-configs": "^1.0.0", | |
| "modernizr": "^3.7.0", | |
| "node-sass": "^4.11.0" | |
| }, | |
| "dependencies": {} | |
| }, | |
| "displayTheme": "default", | |
| "themeName": "default", | |
| "src": [ | |
| "ambientimpact_core/stylesheets/**/*.scss" | |
| ] | |
| } | |
| » [DEBUG] task: documentize | |
| » [WARNING] Item `responsive-type` requires `calc-responsive-value` from type `Function` but this item doesn't exist. | |
| » [WARNING] Item `supports-cleared-text-underline` requires `text-underline-background` from type `Function` but this i | |
| tem doesn't exist. | |
| » [WARNING] Item `text-underline-background` requires `custom-property` from type `Function` but this item doesn't exis | |
| t. | |
| » [WARNING] Item `text-underline-background` requires `text-underline-background` from type `Function` but this item do | |
| esn't exist. | |
| » [WARNING] Item `text-underline` requires `supports-cleared-text-underline` from type `Mixin` but this item doesn't ex | |
| ist. | |
| » [WARNING] Item `text-underline` requires `text-underline-background` from type `Mixin` but this item doesn't exist. | |
| » [WARNING] Item `text-underline` requires `text-underline-crop` from type `Mixin` but this item doesn't exist. | |
| » [WARNING] Item `text-underline` requires `selection-active` from type `mixin` but this item doesn't exist. | |
| » [WARNING] Item `text-underline` requires `selection-inactive` from type `mixin` but this item doesn't exist. | |
| » [WARNING] Item `text-underline` requires `custom-property` from type `Function` but this item doesn't exist. | |
| » [DEBUG] Dumping data to `sassdoc-data.json`. | |
| » [ERROR] Template render error: (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\sassdoc | |
| -theme-default\views\documentation\index.html.njk) | |
| Template render error: (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\sassdoc-theme-d | |
| efault\views\includes\partials\item.html.njk) | |
| Template render error: (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\sassdoc-theme-d | |
| efault\views\includes\annotations\parameter.html.njk) | |
| TypeError: Cannot read property 'split' of undefined | |
| at Object._prettifyError (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\sr | |
| c\lib.js:36:11) | |
| at C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\src\environment.js:567:19 | |
| at eval (eval at _compile (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\s | |
| rc\environment.js:637:18), <anonymous>:121:12) | |
| at eval (eval at _compile (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\s | |
| rc\environment.js:637:18), <anonymous>:386:12) | |
| at C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\src\environment.js:575:11 | |
| at eval (eval at _compile (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\s | |
| rc\environment.js:637:18), <anonymous>:122:12) | |
| at C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\src\environment.js:575:11 | |
| at Template.root [as rootRenderFunc] (eval at _compile (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sa | |
| ssdoc\node_modules\nunjucks\src\environment.js:637:18), <anonymous>:95:3) | |
| at Template.render (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\src\envi | |
| ronment.js:556:10) | |
| at eval (eval at _compile (C:\Users\Ambient.Impact\AppData\Roaming\npm\node_modules\sassdoc\node_modules\nunjucks\s | |
| rc\environment.js:637:18), <anonymous>:121:10) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "description": "\nDefault set of breakpoints.\n", | |
| "commentRange": { | |
| "start": 9, | |
| "end": 11 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "value": "(\n\t'height-tiny'\t: 30em,\n\t'height-small'\t: 45em\n)", | |
| "scope": "private", | |
| "line": { | |
| "start": 12, | |
| "end": 15 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nWrap content in a specified breakpoint.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "breakpoint", | |
| "code": "\n\t@warn 'Mixin \\'breakpoint\\' is deprecated, use \\'@include media()\\' instead.';\n\n\t@if map-has-key($breakpoints-legacy, $name) {\n\t\t@media #{inspect(map-get($breakpoints-legacy, $name))} {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t}\n", | |
| "line": { | |
| "start": 38, | |
| "end": 48 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nAdd one or more breakpoints.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "add-breakpoints", | |
| "code": "\n\t$legacy: false;\n\n\t// Determine if this is a set of legacy breakpoints. If one contains any of\n\t// the tested min/max keywords, the whole set is assumed to be legacy.\n\t@each $name, $value in $new-breakpoints {\n\t\t// Convert to a string to avoid errors.\n\t\t$value: inspect($value);\n\t\t@if\tstr-index($value, 'min-width') != null or\n\t\t\tstr-index($value, 'max-width') != null or\n\t\t\tstr-index($value, 'min-height') != null or\n\t\t\tstr-index($value, 'max-height') != null\n\t\t{\n\t\t\t$legacy: true;\n\t\t}\n\t}\n\n\t// include-media breakpoint.\n\t@if $legacy == false {\n\t\t$breakpoints: map-merge($breakpoints, $new-breakpoints) !global;\n\n\t// Legacy breakpoint.\n\t} @else {\n\t\t@warn 'You are adding a legacy breakpoint. Please use the include-media format instead: https://include-media.com/';\n\n\t\t$breakpoints-legacy: map-merge(\n\t\t\t$breakpoints-legacy, $new-breakpoints\n\t\t) !global;\n\t}\n", | |
| "line": { | |
| "start": 58, | |
| "end": 87 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nRemove one or more breakpoints.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "remove-breakpoints", | |
| "code": "\n\t$breakpoints-legacy: map-remove($breakpoints-legacy, $names...) !global;\n\n\t$breakpoints: map-remove($breakpoints, $names...) !global;\n", | |
| "line": { | |
| "start": 97, | |
| "end": 101 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nGet the value of a specified breakpoint.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-breakpoint-value", | |
| "code": "\n\t// Exists and is not legacy.\n\t@if $legacy == false and map-has-key($breakpoints, $name) {\n\t\t@return map-get($breakpoints, $name);\n\n\t// Exists and is legacy.\n\t} @else if $legacy == true and map-has-key($breakpoints-legacy, $name) {\n\t\t@return map-get($breakpoints-legacy, $name);\n\n\t// Display a warning if the breakpoint is not found.\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t\t@return '';\n\t}\n", | |
| "line": { | |
| "start": 115, | |
| "end": 129 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nDetermine if a specified breakpoint exists.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "breakpoint-exists", | |
| "code": "\n\t@return map-has-key($breakpoints, $name);\n", | |
| "line": { | |
| "start": 140, | |
| "end": 142 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nDefault set of breakpoints. This is the deprecated, pre-include-media set.\n", | |
| "commentRange": { | |
| "start": 17, | |
| "end": 19 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "breakpoints-legacy", | |
| "value": "(\n\t'height-tiny'\t: '(min-height: 30em)',\n\t'height-small'\t: '(min-height: 45em)'\n)", | |
| "scope": "private", | |
| "line": { | |
| "start": 20, | |
| "end": 23 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nWrap content in a specified breakpoint.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "breakpoint", | |
| "code": "\n\t@warn 'Mixin \\'breakpoint\\' is deprecated, use \\'@include media()\\' instead.';\n\n\t@if map-has-key($breakpoints-legacy, $name) {\n\t\t@media #{inspect(map-get($breakpoints-legacy, $name))} {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t}\n", | |
| "line": { | |
| "start": 38, | |
| "end": 48 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nWrap content in a specified breakpoint.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "breakpoint", | |
| "code": "\n\t@warn 'Mixin \\'breakpoint\\' is deprecated, use \\'@include media()\\' instead.';\n\n\t@if map-has-key($breakpoints-legacy, $name) {\n\t\t@media #{inspect(map-get($breakpoints-legacy, $name))} {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t}\n", | |
| "line": { | |
| "start": 38, | |
| "end": 48 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nAdd one or more breakpoints.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "add-breakpoints", | |
| "code": "\n\t$legacy: false;\n\n\t// Determine if this is a set of legacy breakpoints. If one contains any of\n\t// the tested min/max keywords, the whole set is assumed to be legacy.\n\t@each $name, $value in $new-breakpoints {\n\t\t// Convert to a string to avoid errors.\n\t\t$value: inspect($value);\n\t\t@if\tstr-index($value, 'min-width') != null or\n\t\t\tstr-index($value, 'max-width') != null or\n\t\t\tstr-index($value, 'min-height') != null or\n\t\t\tstr-index($value, 'max-height') != null\n\t\t{\n\t\t\t$legacy: true;\n\t\t}\n\t}\n\n\t// include-media breakpoint.\n\t@if $legacy == false {\n\t\t$breakpoints: map-merge($breakpoints, $new-breakpoints) !global;\n\n\t// Legacy breakpoint.\n\t} @else {\n\t\t@warn 'You are adding a legacy breakpoint. Please use the include-media format instead: https://include-media.com/';\n\n\t\t$breakpoints-legacy: map-merge(\n\t\t\t$breakpoints-legacy, $new-breakpoints\n\t\t) !global;\n\t}\n", | |
| "line": { | |
| "start": 58, | |
| "end": 87 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nRemove one or more breakpoints.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "remove-breakpoints", | |
| "code": "\n\t$breakpoints-legacy: map-remove($breakpoints-legacy, $names...) !global;\n\n\t$breakpoints: map-remove($breakpoints, $names...) !global;\n", | |
| "line": { | |
| "start": 97, | |
| "end": 101 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nGet the value of a specified breakpoint.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-breakpoint-value", | |
| "code": "\n\t// Exists and is not legacy.\n\t@if $legacy == false and map-has-key($breakpoints, $name) {\n\t\t@return map-get($breakpoints, $name);\n\n\t// Exists and is legacy.\n\t} @else if $legacy == true and map-has-key($breakpoints-legacy, $name) {\n\t\t@return map-get($breakpoints-legacy, $name);\n\n\t// Display a warning if the breakpoint is not found.\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t\t@return '';\n\t}\n", | |
| "line": { | |
| "start": 115, | |
| "end": 129 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nWrap content in a specified breakpoint.\n\n", | |
| "commentRange": { | |
| "start": 25, | |
| "end": 37 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "breakpoint", | |
| "code": "\n\t@warn 'Mixin \\'breakpoint\\' is deprecated, use \\'@include media()\\' instead.';\n\n\t@if map-has-key($breakpoints-legacy, $name) {\n\t\t@media #{inspect(map-get($breakpoints-legacy, $name))} {\n\t\t\t@content;\n\t\t}\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t}\n", | |
| "line": { | |
| "start": 38, | |
| "end": 48 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the defined breakpoint.\n" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "breakpoints-legacy" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "breakpoints-legacy" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "external": false | |
| } | |
| ], | |
| "throw": [ | |
| "Will throw a warning if the breakpoint isn't defined." | |
| ], | |
| "link": [ | |
| { | |
| "url": "http://www.sitepoint.com/sass-mixins-kickstart-project/", | |
| "caption": "" | |
| } | |
| ], | |
| "deprecated": "Use @include media() instead.", | |
| "access": "public", | |
| "content": "", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nAdd one or more breakpoints.\n\n", | |
| "commentRange": { | |
| "start": 50, | |
| "end": 57 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "add-breakpoints", | |
| "code": "\n\t$legacy: false;\n\n\t// Determine if this is a set of legacy breakpoints. If one contains any of\n\t// the tested min/max keywords, the whole set is assumed to be legacy.\n\t@each $name, $value in $new-breakpoints {\n\t\t// Convert to a string to avoid errors.\n\t\t$value: inspect($value);\n\t\t@if\tstr-index($value, 'min-width') != null or\n\t\t\tstr-index($value, 'max-width') != null or\n\t\t\tstr-index($value, 'min-height') != null or\n\t\t\tstr-index($value, 'max-height') != null\n\t\t{\n\t\t\t$legacy: true;\n\t\t}\n\t}\n\n\t// include-media breakpoint.\n\t@if $legacy == false {\n\t\t$breakpoints: map-merge($breakpoints, $new-breakpoints) !global;\n\n\t// Legacy breakpoint.\n\t} @else {\n\t\t@warn 'You are adding a legacy breakpoint. Please use the include-media format instead: https://include-media.com/';\n\n\t\t$breakpoints-legacy: map-merge(\n\t\t\t$breakpoints-legacy, $new-breakpoints\n\t\t) !global;\n\t}\n", | |
| "line": { | |
| "start": 58, | |
| "end": 87 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Map", | |
| "name": "new-breakpoints" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "external": false | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "breakpoints-legacy", | |
| "external": false | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nRemove one or more breakpoints.\n\n", | |
| "commentRange": { | |
| "start": 89, | |
| "end": 96 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "remove-breakpoints", | |
| "code": "\n\t$breakpoints-legacy: map-remove($breakpoints-legacy, $names...) !global;\n\n\t$breakpoints: map-remove($breakpoints, $names...) !global;\n", | |
| "line": { | |
| "start": 97, | |
| "end": 101 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "ArgList", | |
| "name": "names" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "external": false | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "breakpoints-legacy", | |
| "external": false | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nGet the value of a specified breakpoint.\n\n", | |
| "commentRange": { | |
| "start": 103, | |
| "end": 114 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "get-breakpoint-value", | |
| "code": "\n\t// Exists and is not legacy.\n\t@if $legacy == false and map-has-key($breakpoints, $name) {\n\t\t@return map-get($breakpoints, $name);\n\n\t// Exists and is legacy.\n\t} @else if $legacy == true and map-has-key($breakpoints-legacy, $name) {\n\t\t@return map-get($breakpoints-legacy, $name);\n\n\t// Display a warning if the breakpoint is not found.\n\t} @else {\n\t\t@warn 'Couldn\\'t find a breakpoint named `#{$name}`.';\n\t\t@return '';\n\t}\n", | |
| "line": { | |
| "start": 115, | |
| "end": 129 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the defined breakpoint.\n" | |
| }, | |
| { | |
| "type": "Bool", | |
| "name": "legacy", | |
| "description": "If this is a legacy breakpoint. Defaults to false.\n" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "external": false | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "breakpoints-legacy", | |
| "external": false | |
| } | |
| ], | |
| "throw": [ | |
| "Will throw a warning if the breakpoint isn't defined." | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nDetermine if a specified breakpoint exists.\n\n", | |
| "commentRange": { | |
| "start": 131, | |
| "end": 139 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "breakpoint-exists", | |
| "code": "\n\t@return map-has-key($breakpoints, $name);\n", | |
| "line": { | |
| "start": 140, | |
| "end": 142 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the defined breakpoint.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Bool", | |
| "description": "Returns true if found, false if not.\n" | |
| }, | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "breakpoints", | |
| "external": false | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_breakpoint.scss", | |
| "name": "_breakpoint.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nBevel all four corners of an element by the specified amount.\n\nThis is based on the linked article by Chris Coyier.\n\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 16 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "bevel", | |
| "code": "\n\tclip-path: polygon(\n\t\t// Top left corner points.\n\t\t0%\t\t\t\t\t\t#{$size},\n\t\t#{$size}\t\t\t\t0%,\n\t\t// Top right corner points.\n\t\tcalc(100% - #{$size})\t0%,\n\t\t100%\t\t\t\t\t#{$size},\n\t\t// Bottom right corner points.\n\t\t100%\t\t\t\t\tcalc(100% - #{$size}),\n\t\tcalc(100% - #{$size})\t100%,\n\t\t// Bottom left corner points.\n\t\t#{$size}\t\t\t\t100%,\n\t\t0%\t\t\t\t\t\tcalc(100% - #{$size})\n\t);\n", | |
| "line": { | |
| "start": 17, | |
| "end": 32 | |
| } | |
| }, | |
| "author": [ | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://ambientimpact.com/web/snippets/bevelled-box-corners-with-css-and-sass", | |
| "caption": "" | |
| } | |
| ], | |
| "parameter": [ | |
| { | |
| "type": "Number", | |
| "name": "size", | |
| "description": "The amount to bevel by." | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_clipping.scss", | |
| "name": "_clipping.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nDefault background colour.\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 8 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "background-colour", | |
| "value": "white", | |
| "scope": "default", | |
| "line": { | |
| "start": 9, | |
| "end": 9 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nCrop underlines with the background colour, using text-shadow.\n\nThis is based on the linked Pen by Jimmy Wilson, but modified to generate\nthe shadow parts with an interval value and list of offsets, as opposed to\nhard coding the shadow.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-crop", | |
| "code": "\n\t@if $background-colour == transparent {\n\t\ttext-shadow: none;\n\n\t} @else {\n\t\t// This is the interval used to calculate the text-shadow offsets.\n\t\t$interval: 0.03em;\n\n\t\t// These are offset multipliers in x/y pairs, used to generate the text-\n\t\t// shadow offsets with the $interval.\n\t\t$offsets: (\n\t\t\t// These clear strictly horizontally.\n\t\t\t( 1, 0),\n\t\t\t(-1, 0),\n\t\t\t( 2, 0),\n\t\t\t(-2, 0),\n\t\t\t( 3, 0),\n\t\t\t(-3, 0),\n\t\t\t( 4, 0),\n\t\t\t(-4, 0),\n\t\t\t( 5, 0),\n\t\t\t(-5, 0),\n\n\t\t\t// These clear horizontally and below the descenders. We stop at 3\n\t\t\t// so that we don't go too far down and crop the underline even\n\t\t\t// under characters without descenders.\n\t\t\t( 1, 1),\n\t\t\t(-1, 1),\n\t\t\t( 2, 2),\n\t\t\t(-2, 2),\n\t\t\t( 3, 3),\n\t\t\t(-3, 3),\n\t\t);\n\n\t\t$shadow: ();\n\n\t\t@each $offset in $offsets {\n\t\t\t$shadow-part: (\n\t\t\t\t(nth($offset, 1) * $interval)\n\t\t\t\t(nth($offset, 2) * $interval)\n\t\t\t\t$background-colour\n\t\t\t);\n\n\t\t\t$shadow: append($shadow, $shadow-part, comma);\n\t\t}\n\n\t\ttext-shadow: $shadow;\n\t}\n", | |
| "line": { | |
| "start": 211, | |
| "end": 259 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nCrop underlines with the background colour, using text-shadow.\n\nThis is based on the linked Pen by Jimmy Wilson, but modified to generate\nthe shadow parts with an interval value and list of offsets, as opposed to\nhard coding the shadow.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-crop", | |
| "code": "\n\t@if $background-colour == transparent {\n\t\ttext-shadow: none;\n\n\t} @else {\n\t\t// This is the interval used to calculate the text-shadow offsets.\n\t\t$interval: 0.03em;\n\n\t\t// These are offset multipliers in x/y pairs, used to generate the text-\n\t\t// shadow offsets with the $interval.\n\t\t$offsets: (\n\t\t\t// These clear strictly horizontally.\n\t\t\t( 1, 0),\n\t\t\t(-1, 0),\n\t\t\t( 2, 0),\n\t\t\t(-2, 0),\n\t\t\t( 3, 0),\n\t\t\t(-3, 0),\n\t\t\t( 4, 0),\n\t\t\t(-4, 0),\n\t\t\t( 5, 0),\n\t\t\t(-5, 0),\n\n\t\t\t// These clear horizontally and below the descenders. We stop at 3\n\t\t\t// so that we don't go too far down and crop the underline even\n\t\t\t// under characters without descenders.\n\t\t\t( 1, 1),\n\t\t\t(-1, 1),\n\t\t\t( 2, 2),\n\t\t\t(-2, 2),\n\t\t\t( 3, 3),\n\t\t\t(-3, 3),\n\t\t);\n\n\t\t$shadow: ();\n\n\t\t@each $offset in $offsets {\n\t\t\t$shadow-part: (\n\t\t\t\t(nth($offset, 1) * $interval)\n\t\t\t\t(nth($offset, 2) * $interval)\n\t\t\t\t$background-colour\n\t\t\t);\n\n\t\t\t$shadow: append($shadow, $shadow-part, comma);\n\t\t}\n\n\t\ttext-shadow: $shadow;\n\t}\n", | |
| "line": { | |
| "start": 211, | |
| "end": 259 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet text underline, clearing descenders.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline", | |
| "code": "\n\n\t@include supports-cleared-text-underline {\n\t\t@include text-underline-background(\n\t\t\t$underline-colour:\t\t$underline-colour,\n\t\t\t$underline-position:\t$underline-position,\n\t\t\t$underline-thickness:\t$underline-thickness,\n\t\t\t$underline-style:\t\t$underline-style\n\t\t);\n\n\t\t@include text-underline-crop($background-colour);\n\t\t// For whatever reason, we have to explicitly declare the crop when text\n\t\t// is selected.\n\t\t@include selection-active {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\t\t@include selection-inactive {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 290, | |
| "end": 318 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet text underline, clearing descenders.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline", | |
| "code": "\n\n\t@include supports-cleared-text-underline {\n\t\t@include text-underline-background(\n\t\t\t$underline-colour:\t\t$underline-colour,\n\t\t\t$underline-position:\t$underline-position,\n\t\t\t$underline-thickness:\t$underline-thickness,\n\t\t\t$underline-style:\t\t$underline-style\n\t\t);\n\n\t\t@include text-underline-crop($background-colour);\n\t\t// For whatever reason, we have to explicitly declare the crop when text\n\t\t// is selected.\n\t\t@include selection-active {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\t\t@include selection-inactive {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 290, | |
| "end": 318 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet text underline, clearing descenders.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline", | |
| "code": "\n\n\t@include supports-cleared-text-underline {\n\t\t@include text-underline-background(\n\t\t\t$underline-colour:\t\t$underline-colour,\n\t\t\t$underline-position:\t$underline-position,\n\t\t\t$underline-thickness:\t$underline-thickness,\n\t\t\t$underline-style:\t\t$underline-style\n\t\t);\n\n\t\t@include text-underline-crop($background-colour);\n\t\t// For whatever reason, we have to explicitly declare the crop when text\n\t\t// is selected.\n\t\t@include selection-active {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\t\t@include selection-inactive {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 290, | |
| "end": 318 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nForeground (usually text) colour on light backgrounds.\n", | |
| "commentRange": { | |
| "start": 10, | |
| "end": 12 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "foreground-colour-on-light", | |
| "value": "hsl(0, 0, 20%)", | |
| "scope": "default", | |
| "line": { | |
| "start": 13, | |
| "end": 13 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nForeground colour on dark backgrounds.\n", | |
| "commentRange": { | |
| "start": 14, | |
| "end": 16 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "foreground-colour-on-dark", | |
| "value": "white", | |
| "scope": "default", | |
| "line": { | |
| "start": 17, | |
| "end": 17 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nGet a greyscale colour as rgba().\n\n", | |
| "commentRange": { | |
| "start": 22, | |
| "end": 38 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "greyscale", | |
| "code": "\n\t@return rgba($lightness, $lightness, $lightness, $opacity);\n", | |
| "line": { | |
| "start": 39, | |
| "end": 41 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Number", | |
| "name": "lightness", | |
| "description": "The lightness value. Can be any number that can be passed to rgba().\n" | |
| }, | |
| { | |
| "type": "Number", | |
| "name": "opacity", | |
| "default": "1", | |
| "description": "The opacity value to be passed to rgba().\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Color", | |
| "description": "An rgba() colour.\n" | |
| }, | |
| "author": [ | |
| "Lea Verou", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://gist.github.com/LeaVerou/20ac0049428ccfcbe8f1", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nCalculate brightness of a given colour.\n\n", | |
| "commentRange": { | |
| "start": 43, | |
| "end": 56 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "get-colour-brightness", | |
| "code": "\n\t@return (\n\t\t(red($colour)\t* .299) +\n\t\t(green($colour)\t* .587) +\n\t\t(blue($colour)\t* .114)\n\t) / 255 * 100%;\n", | |
| "line": { | |
| "start": 57, | |
| "end": 63 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "colour", | |
| "description": "The colour to get the brightness of.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Number", | |
| "description": "The brightness value.\n" | |
| }, | |
| "author": [ | |
| "Brendan Saunders", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://ambientimpact.com/web/snippets/sass-text-contrast-mixin", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nReturn the foreground colour which contrasts best with the background.\n\nCompares contrast of a given colour to the light/dark arguments and returns\nwhichever is most \"contrasty\".\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-contrasting-colour", | |
| "code": "\n\t@if $background == null {\n\t\t@return null;\n\n\t} @else {\n\t\t$background-brightness:\n\t\t\tget-colour-brightness($background);\n\t\t$foreground-on-dark-brightness:\n\t\t\tget-colour-brightness($foreground-on-dark);\n\t\t$foreground-on-light-brightness:\n\t\t\tget-colour-brightness($foreground-on-light);\n\n\t\t@return if(\n\t\t\tabs($background-brightness - $foreground-on-dark-brightness) >\n\t\t\t\tabs($background-brightness - $foreground-on-light-brightness),\n\t\t\t$foreground-on-dark,\n\t\t\t$foreground-on-light\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 92, | |
| "end": 115 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nReturn the foreground colour which contrasts best with the background.\n\nCompares contrast of a given colour to the light/dark arguments and returns\nwhichever is most \"contrasty\".\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-contrasting-colour", | |
| "code": "\n\t@if $background == null {\n\t\t@return null;\n\n\t} @else {\n\t\t$background-brightness:\n\t\t\tget-colour-brightness($background);\n\t\t$foreground-on-dark-brightness:\n\t\t\tget-colour-brightness($foreground-on-dark);\n\t\t$foreground-on-light-brightness:\n\t\t\tget-colour-brightness($foreground-on-light);\n\n\t\t@return if(\n\t\t\tabs($background-brightness - $foreground-on-dark-brightness) >\n\t\t\t\tabs($background-brightness - $foreground-on-light-brightness),\n\t\t\t$foreground-on-dark,\n\t\t\t$foreground-on-light\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 92, | |
| "end": 115 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nReturn the foreground colour which contrasts best with the background.\n\nCompares contrast of a given colour to the light/dark arguments and returns\nwhichever is most \"contrasty\".\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-contrasting-colour", | |
| "code": "\n\t@if $background == null {\n\t\t@return null;\n\n\t} @else {\n\t\t$background-brightness:\n\t\t\tget-colour-brightness($background);\n\t\t$foreground-on-dark-brightness:\n\t\t\tget-colour-brightness($foreground-on-dark);\n\t\t$foreground-on-light-brightness:\n\t\t\tget-colour-brightness($foreground-on-light);\n\n\t\t@return if(\n\t\t\tabs($background-brightness - $foreground-on-dark-brightness) >\n\t\t\t\tabs($background-brightness - $foreground-on-light-brightness),\n\t\t\t$foreground-on-dark,\n\t\t\t$foreground-on-light\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 92, | |
| "end": 115 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nReturn the foreground colour which contrasts best with the background.\n\nCompares contrast of a given colour to the light/dark arguments and returns\nwhichever is most \"contrasty\".\n\n", | |
| "commentRange": { | |
| "start": 65, | |
| "end": 91 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "get-contrasting-colour", | |
| "code": "\n\t@if $background == null {\n\t\t@return null;\n\n\t} @else {\n\t\t$background-brightness:\n\t\t\tget-colour-brightness($background);\n\t\t$foreground-on-dark-brightness:\n\t\t\tget-colour-brightness($foreground-on-dark);\n\t\t$foreground-on-light-brightness:\n\t\t\tget-colour-brightness($foreground-on-light);\n\n\t\t@return if(\n\t\t\tabs($background-brightness - $foreground-on-dark-brightness) >\n\t\t\t\tabs($background-brightness - $foreground-on-light-brightness),\n\t\t\t$foreground-on-dark,\n\t\t\t$foreground-on-light\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 92, | |
| "end": 115 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "background", | |
| "default": "$background-colour", | |
| "description": "The background colour to test against.\n" | |
| }, | |
| { | |
| "type": "Color", | |
| "name": "foreground-on-light", | |
| "default": "$foreground-colour-on-light", | |
| "description": "The foreground colour to return if the background is considered to be more\n dark than light.\n" | |
| }, | |
| { | |
| "type": "Color", | |
| "name": "foreground-on-dark", | |
| "default": "$foreground-colour-on-dark", | |
| "description": "The foreground colour to return if the background is considered to be more\n light than dark.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Color", | |
| "description": "The foreground colour that contrasts the most against the background.\n" | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nCalculate brightness of a given colour.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-colour-brightness", | |
| "code": "\n\t@return (\n\t\t(red($colour)\t* .299) +\n\t\t(green($colour)\t* .587) +\n\t\t(blue($colour)\t* .114)\n\t) / 255 * 100%;\n", | |
| "line": { | |
| "start": 57, | |
| "end": 63 | |
| } | |
| } | |
| } | |
| ], | |
| "author": [ | |
| "Brendan Saunders", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://ambientimpact.com/web/snippets/sass-text-contrast-mixin", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "function", | |
| "name": "get-colour-brightness" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "get-colour-brightness" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "get-colour-brightness" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nSet background and foreground colours on an element, contrast-aware.\n\nIf you only pass the background colour, this mixin will choose from the two\nforeground colours, using the one that contrasts best with the background\ncolour. In addition, this sets the --background-colour and\n--foreground-colour custom properties on the element, for browsers that\nsupport them.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "set-colours", | |
| "code": "\n\t// Get the appropriately contrasting foreground colour.\n\t$foreground: get-contrasting-colour(\n\t\tif($background-reference != null, $background-reference, $background),\n\t\t$foreground-on-light,\n\t\t$foreground-on-dark\n\t);\n\n\t// Set custom properties.\n\t@include custom-property(\n\t\t'background-colour',\n\t\t$background\n\t);\n\t@include custom-property(\n\t\t'foreground-colour',\n\t\t$foreground\n\t);\n\n\t@include trigger-event('set-colours', $background, $foreground);\n\n\tbackground-color:\t$background;\n\tcolor:\t\t\t\t$foreground;\n", | |
| "line": { | |
| "start": 159, | |
| "end": 186 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nDefault foreground colour.\n\nThis automatically chooses the most contrasting colour by default, so you\nmay not need to change this at all when changing $background-colour. Set\n$foreground-colour-on-light and $foreground-colour- on-dark instead of this\nif you need to.\n", | |
| "commentRange": { | |
| "start": 117, | |
| "end": 124 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "foreground-colour", | |
| "value": "get-contrasting-colour(\n\t\t\t\t\t\t$background-colour,\n\t\t\t\t\t\t$foreground-colour-on-light,\n\t\t\t\t\t\t$foreground-colour-on-dark\n\t\t\t\t\t)", | |
| "scope": "default", | |
| "line": { | |
| "start": 125, | |
| "end": 129 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nSet background and foreground colours on an element, contrast-aware.\n\nIf you only pass the background colour, this mixin will choose from the two\nforeground colours, using the one that contrasts best with the background\ncolour. In addition, this sets the --background-colour and\n--foreground-colour custom properties on the element, for browsers that\nsupport them.\n\n", | |
| "commentRange": { | |
| "start": 131, | |
| "end": 158 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "set-colours", | |
| "code": "\n\t// Get the appropriately contrasting foreground colour.\n\t$foreground: get-contrasting-colour(\n\t\tif($background-reference != null, $background-reference, $background),\n\t\t$foreground-on-light,\n\t\t$foreground-on-dark\n\t);\n\n\t// Set custom properties.\n\t@include custom-property(\n\t\t'background-colour',\n\t\t$background\n\t);\n\t@include custom-property(\n\t\t'foreground-colour',\n\t\t$foreground\n\t);\n\n\t@include trigger-event('set-colours', $background, $foreground);\n\n\tbackground-color:\t$background;\n\tcolor:\t\t\t\t$foreground;\n", | |
| "line": { | |
| "start": 159, | |
| "end": 186 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "background", | |
| "default": "$background-colour", | |
| "description": "The background colour to test against.\n" | |
| }, | |
| { | |
| "type": "Color", | |
| "name": "foreground-on-light", | |
| "default": "$foreground-colour-on-light", | |
| "description": "The foreground colour to return if the background is considered to be more\n dark than light.\n" | |
| }, | |
| { | |
| "type": "Color", | |
| "name": "foreground-on-dark", | |
| "default": "$foreground-colour-on-dark", | |
| "description": "The foreground colour to return if the background is considered to be more\n light than dark.\n" | |
| }, | |
| { | |
| "type": "null|Color", | |
| "name": "background-reference", | |
| "default": "null", | |
| "description": "The background colour reference to pass to get-contrasting-colour() if\n $background-colour is transparent, inherit, etc.\n" | |
| } | |
| ], | |
| "see": [ | |
| { | |
| "description": "\nReturn the foreground colour which contrasts best with the background.\n\nCompares contrast of a given colour to the light/dark arguments and returns\nwhichever is most \"contrasty\".\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-contrasting-colour", | |
| "code": "\n\t@if $background == null {\n\t\t@return null;\n\n\t} @else {\n\t\t$background-brightness:\n\t\t\tget-colour-brightness($background);\n\t\t$foreground-on-dark-brightness:\n\t\t\tget-colour-brightness($foreground-on-dark);\n\t\t$foreground-on-light-brightness:\n\t\t\tget-colour-brightness($foreground-on-light);\n\n\t\t@return if(\n\t\t\tabs($background-brightness - $foreground-on-dark-brightness) >\n\t\t\t\tabs($background-brightness - $foreground-on-light-brightness),\n\t\t\t$foreground-on-dark,\n\t\t\t$foreground-on-light\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 92, | |
| "end": 115 | |
| } | |
| } | |
| } | |
| ], | |
| "author": [ | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "mixin", | |
| "name": "trigger-event" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "get-contrasting-colour" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nInvert the lightness value of a colour.\n\n", | |
| "commentRange": { | |
| "start": 188, | |
| "end": 197 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "invert-lightness", | |
| "code": "\n\t@return hsla(\n\t\thue($colour),\n\t\tsaturation($colour),\n\t\t100% - lightness($colour),\n\t\talpha($colour)\n\t);\n", | |
| "line": { | |
| "start": 198, | |
| "end": 205 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "colour", | |
| "description": "The colour to invert the lightness of.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Color", | |
| "description": "The colour that was passed as the argument, but with the lightness\n inverted." | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_colour.scss", | |
| "name": "_colour.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 14 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "custom-property", | |
| "code": "\n\t#{unquote('--#{$name}')}: $value;\n", | |
| "line": { | |
| "start": 15, | |
| "end": 17 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the custom property.\n" | |
| }, | |
| { | |
| "type": "Mixed", | |
| "name": "value", | |
| "description": "The value to set the custom property to." | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_custom_property.scss", | |
| "name": "_custom_property.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nSet background and foreground colours on an element, contrast-aware.\n\nIf you only pass the background colour, this mixin will choose from the two\nforeground colours, using the one that contrasts best with the background\ncolour. In addition, this sets the --background-colour and\n--foreground-colour custom properties on the element, for browsers that\nsupport them.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "set-colours", | |
| "code": "\n\t// Get the appropriately contrasting foreground colour.\n\t$foreground: get-contrasting-colour(\n\t\tif($background-reference != null, $background-reference, $background),\n\t\t$foreground-on-light,\n\t\t$foreground-on-dark\n\t);\n\n\t// Set custom properties.\n\t@include custom-property(\n\t\t'background-colour',\n\t\t$background\n\t);\n\t@include custom-property(\n\t\t'foreground-colour',\n\t\t$foreground\n\t);\n\n\t@include trigger-event('set-colours', $background, $foreground);\n\n\tbackground-color:\t$background;\n\tcolor:\t\t\t\t$foreground;\n", | |
| "line": { | |
| "start": 159, | |
| "end": 186 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet background and foreground colours on an element, contrast-aware.\n\nIf you only pass the background colour, this mixin will choose from the two\nforeground colours, using the one that contrasts best with the background\ncolour. In addition, this sets the --background-colour and\n--foreground-colour custom properties on the element, for browsers that\nsupport them.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "set-colours", | |
| "code": "\n\t// Get the appropriately contrasting foreground colour.\n\t$foreground: get-contrasting-colour(\n\t\tif($background-reference != null, $background-reference, $background),\n\t\t$foreground-on-light,\n\t\t$foreground-on-dark\n\t);\n\n\t// Set custom properties.\n\t@include custom-property(\n\t\t'background-colour',\n\t\t$background\n\t);\n\t@include custom-property(\n\t\t'foreground-colour',\n\t\t$foreground\n\t);\n\n\t@include trigger-event('set-colours', $background, $foreground);\n\n\tbackground-color:\t$background;\n\tcolor:\t\t\t\t$foreground;\n", | |
| "line": { | |
| "start": 159, | |
| "end": 186 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "declare-custom-property", | |
| "code": "\n\t@warn 'Mixin declare-custom-property() is deprecated, please use custom-property() instead.';\n\n\t@include custom-property($name, $value);\n", | |
| "line": { | |
| "start": 32, | |
| "end": 36 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "commentRange": { | |
| "start": 19, | |
| "end": 31 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "declare-custom-property", | |
| "code": "\n\t@warn 'Mixin declare-custom-property() is deprecated, please use custom-property() instead.';\n\n\t@include custom-property($name, $value);\n", | |
| "line": { | |
| "start": 32, | |
| "end": 36 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the custom property.\n" | |
| }, | |
| { | |
| "type": "Mixed", | |
| "name": "value", | |
| "description": "The value to set the custom property to.\n" | |
| } | |
| ], | |
| "deprecated": "Use @include custom-property() instead.", | |
| "see": [ | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "custom-property", | |
| "code": "\n\t#{unquote('--#{$name}')}: $value;\n", | |
| "line": { | |
| "start": 15, | |
| "end": 17 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_custom_property.scss", | |
| "name": "_custom_property.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nUse a CSS Custom Property as a value, with optional fallback.\n\n", | |
| "commentRange": { | |
| "start": 38, | |
| "end": 54 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "custom-property", | |
| "code": "\n\t@if $fallback != null {\n\t\t@return #{'var(--#{$name}, #{$fallback})'};\n\t} @else {\n\t\t@return #{'var(--#{$name})'};\n\t}\n", | |
| "line": { | |
| "start": 55, | |
| "end": 61 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the custom property.\n" | |
| }, | |
| { | |
| "type": "Mixed", | |
| "name": "fallback", | |
| "default": "null", | |
| "description": "The fallback value to use if the property is not defined. Note that this\n still requires the browser to support custom properties. For fallbacks\n for browsers that don't support them, first define the non-custom\n property fallback, then make the same declaration with the custom\n property after, so the latter is used in browsers that do support them.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "String", | |
| "description": "The value as a string containing the var() and its content.\n" | |
| }, | |
| "link": [ | |
| { | |
| "url": "https://ambientimpact.com/web/snippets/css-custom-property-fallbacks", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_custom_property.scss", | |
| "name": "_custom_property.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "declare-custom-property", | |
| "code": "\n\t@warn 'Mixin declare-custom-property() is deprecated, please use custom-property() instead.';\n\n\t@include custom-property($name, $value);\n", | |
| "line": { | |
| "start": 32, | |
| "end": 36 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nUse a CSS Custom Property as a value.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-custom-property-value", | |
| "code": "\n\t@warn 'Function get-custom-property-value() is deprecated, please use custom-property() instead.';\n\n\t@return custom-property($name);\n", | |
| "line": { | |
| "start": 73, | |
| "end": 77 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nUse a CSS Custom Property as a value.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "get-custom-property-value", | |
| "code": "\n\t@warn 'Function get-custom-property-value() is deprecated, please use custom-property() instead.';\n\n\t@return custom-property($name);\n", | |
| "line": { | |
| "start": 73, | |
| "end": 77 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nUse a CSS Custom Property as a value.\n\n", | |
| "commentRange": { | |
| "start": 63, | |
| "end": 72 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "get-custom-property-value", | |
| "code": "\n\t@warn 'Function get-custom-property-value() is deprecated, please use custom-property() instead.';\n\n\t@return custom-property($name);\n", | |
| "line": { | |
| "start": 73, | |
| "end": 77 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "name", | |
| "description": "The name of the custom property.\n" | |
| } | |
| ], | |
| "deprecated": "Use custom-property() instead.", | |
| "see": [ | |
| { | |
| "description": "\nDeclare a CSS Custom Property.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "custom-property", | |
| "code": "\n\t#{unquote('--#{$name}')}: $value;\n", | |
| "line": { | |
| "start": 15, | |
| "end": 17 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_custom_property.scss", | |
| "name": "_custom_property.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nGlobal map of events and handlers.\n\nThe structure of each event key/value is:\n\n'event-name1': (\n (\n 'property-name': <a CSS property name to map callback @return to>,\n 'callback': <a Sass function object>\n ),\n (\n 'property-name': <...>,\n 'callback': <...>\n )\n // etc.\n),\n'event-name2': (\n (\n 'property-name': <...>,\n 'callback': <...>\n ),\n (\n 'property-name': <...>,\n 'callback': <...>\n )\n // etc.\n)\n\n...and so on.\n\n", | |
| "commentRange": { | |
| "start": 18, | |
| "end": 53 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "events", | |
| "value": "()", | |
| "scope": "private", | |
| "line": { | |
| "start": 54, | |
| "end": 54 | |
| } | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nTrigger a given event with parameters.\n\nThis will trigger all registered callback functions for the given event and\noutput their return values as properties, defined by each callback when they\nwere registered.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "trigger-event", | |
| "code": "\n @if map-has-key($events, $event-name) {\n $event-items: map-get($events, $event-name);\n\n @each $event-item in $event-items {\n #{map-get($event-item, 'property-name')}:\n call(map-get($event-item, 'callback'), $parameters...);\n }\n }\n", | |
| "line": { | |
| "start": 111, | |
| "end": 120 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_event.scss", | |
| "name": "_event.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nTrigger a given event with parameters.\n\nThis will trigger all registered callback functions for the given event and\noutput their return values as properties, defined by each callback when they\nwere registered.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "trigger-event", | |
| "code": "\n @if map-has-key($events, $event-name) {\n $event-items: map-get($events, $event-name);\n\n @each $event-item in $event-items {\n #{map-get($event-item, 'property-name')}:\n call(map-get($event-item, 'callback'), $parameters...);\n }\n }\n", | |
| "line": { | |
| "start": 111, | |
| "end": 120 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nTrigger a given event with parameters.\n\nThis will trigger all registered callback functions for the given event and\noutput their return values as properties, defined by each callback when they\nwere registered.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "trigger-event", | |
| "code": "\n @if map-has-key($events, $event-name) {\n $event-items: map-get($events, $event-name);\n\n @each $event-item in $event-items {\n #{map-get($event-item, 'property-name')}:\n call(map-get($event-item, 'callback'), $parameters...);\n }\n }\n", | |
| "line": { | |
| "start": 111, | |
| "end": 120 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nRegister a callback function to run on a given event.\n\n", | |
| "commentRange": { | |
| "start": 56, | |
| "end": 69 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "on-event", | |
| "code": "\n @if type-of($callback) == string and function-exists($callback) {\n $callback: get-function($callback);\n } @else if type-of($callback) != function {\n @error 'on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}';\n }\n\n @if type-of($callback) == function {\n $event-items: ();\n $new-item: (\n 'property-name': $property-name,\n 'callback': $callback\n );\n\n // Grab the existing event items (if any) or create a new list containing\n // the new item. Note the explicit list format when creating a new list.\n @if map-has-key($events, $event-name) {\n $event-items: append(map-get($events, $event-name), $new-item, comma);\n } @else {\n $event-items: ($new-item,);\n }\n\n $events: map-merge($events, (\n $event-name: $event-items\n )) !global;\n }\n", | |
| "line": { | |
| "start": 70, | |
| "end": 96 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "event-name", | |
| "description": "The name of the event to register to.\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "property-name", | |
| "description": "The name of the CSS property that $callback's @return maps to.\n" | |
| }, | |
| { | |
| "type": "String|Function", | |
| "name": "callback", | |
| "description": "The callback function that will be registered to the event $property-name.\n If this is a string, will attempt to fetch a global function with that\n name via get-function(). If this is a function, will be used as-is." | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| } | |
| ], | |
| "throw": [ | |
| "on-event() expects $callback as a string function name or a function object, is #{type-of($callback)}" | |
| ], | |
| "file": { | |
| "path": "helpers\\_event.scss", | |
| "name": "_event.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nTrigger a given event with parameters.\n\nThis will trigger all registered callback functions for the given event and\noutput their return values as properties, defined by each callback when they\nwere registered.\n\n", | |
| "commentRange": { | |
| "start": 98, | |
| "end": 110 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "trigger-event", | |
| "code": "\n @if map-has-key($events, $event-name) {\n $event-items: map-get($events, $event-name);\n\n @each $event-item in $event-items {\n #{map-get($event-item, 'property-name')}:\n call(map-get($event-item, 'callback'), $parameters...);\n }\n }\n", | |
| "line": { | |
| "start": 111, | |
| "end": 120 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "event-name", | |
| "description": "The name of the event to trigger.\n" | |
| }, | |
| { | |
| "type": "ArgList", | |
| "name": "parameters", | |
| "description": "One or more parameters to pass to each registered callback function." | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "events" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_event.scss", | |
| "name": "_event.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nSet background and foreground colours on an element, contrast-aware.\n\nIf you only pass the background colour, this mixin will choose from the two\nforeground colours, using the one that contrasts best with the background\ncolour. In addition, this sets the --background-colour and\n--foreground-colour custom properties on the element, for browsers that\nsupport them.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "set-colours", | |
| "code": "\n\t// Get the appropriately contrasting foreground colour.\n\t$foreground: get-contrasting-colour(\n\t\tif($background-reference != null, $background-reference, $background),\n\t\t$foreground-on-light,\n\t\t$foreground-on-dark\n\t);\n\n\t// Set custom properties.\n\t@include custom-property(\n\t\t'background-colour',\n\t\t$background\n\t);\n\t@include custom-property(\n\t\t'foreground-colour',\n\t\t$foreground\n\t);\n\n\t@include trigger-event('set-colours', $background, $foreground);\n\n\tbackground-color:\t$background;\n\tcolor:\t\t\t\t$foreground;\n", | |
| "line": { | |
| "start": 159, | |
| "end": 186 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nCalculate a value based on the screen width, with minimum and maximum.\n\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 24 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "calc-responsive-value", | |
| "code": "\n\t// Throw an error if different unit types are passed. This can cause Sass to\n\t// get confused and generate invalid units for whatever reason. E.g. mixing\n\t// 'em' and 'rem' causes $a to be set to '<value>em/rem' instead of dividing\n\t// as it's supposed to.\n\t@if\tunit($min-screen) != unit($min-value) or\n\t\tunit($min-screen) != unit($max-screen) or\n\t\tunit($min-screen) != unit($max-value)\n\t{\n\t\t@error 'You must pass only the same unit types to calc-responsive-value()!';\n\t}\n\n\t$a: ($max-value - $min-value) / ($max-screen - $min-screen);\n\t$b: $min-value - $a * $min-screen;\n\n\t$sign: '+';\n\t@if ($b < 0) {\n\t\t$sign: '-';\n\t\t$b: abs($b);\n\t}\n\n\t@return calc(#{$a * 100}vw #{$sign} #{$b});\n", | |
| "line": { | |
| "start": 25, | |
| "end": 49 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "name": "min-screen", | |
| "description": "{Number} - The minimum screen width to interpolate\n property values to.\n" | |
| }, | |
| { | |
| "name": "max-screen", | |
| "description": "{Number} - The maximum screen width to interpolate\n property values to.\n" | |
| }, | |
| { | |
| "name": "min-value", | |
| "description": "{Number} - The minimum value to interpolate property\n values to at the minimum screen width.\n" | |
| }, | |
| { | |
| "name": "max-value", | |
| "description": "{Number} - The maximum value to interpolate property\n values to at the maximum screen width.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "Number", | |
| "description": "The calc() value, incorporating vw units.\n" | |
| }, | |
| "link": [ | |
| { | |
| "url": "https://codepen.io/MadeByMike/pen/7744b5fc445e2b34a9e2bb1e21e8b09c", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "throw": [ | |
| "You must pass only the same unit types to calc-responsive-value()!" | |
| ], | |
| "file": { | |
| "path": "helpers\\_responsive.scss", | |
| "name": "_responsive.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nGenerate responsive type properties based on screen size, within a range.\n\nThis calculates a font property based on the screen size, with minimum and\nmaximum values. This removes the screen media query found in the original\nby Mike Riethmuller this is based on.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "responsive-type", | |
| "code": "\n\t@supports (font-size: calc(1vw * 2)) {\n\t\t// Set property minimum values.\n\t\t@each $property in $properties {\n\t\t\t#{$property}: $min-value;\n\t\t}\n\n\t\t// When we're wider than the minimum screen width, use the interpolated\n\t\t// value.\n\t\t@media (min-width: $min-screen) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: calc-responsive-value(\n\t\t\t\t\t$min-screen, $min-value, $max-screen, $max-value\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t// When we're at or wider than the maximum width, use the maximum value.\n\t\t@media (min-width: $max-screen) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: $max-value;\n\t\t\t}\n\t\t}\n\t}\n", | |
| "line": { | |
| "start": 33, | |
| "end": 59 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nAttempts to append a condition to the specified root element.\n\nA condition is a class, attribute selector, or anything else that can be\nadded to an element selector. If the specified root element is not found in\nthe & selector, it is prepended. It's recommended to use this instead of\ndeclaring 'body.condition-class' yourself, for example.\n\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 77 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "root-conditions", | |
| "code": "\n\t@if length(simple-selectors($target)) > 1 {\n\t\t@error '$target must be a simple selector and not a compound selector! Was provided \\'#{$target}\\'.';\n\t}\n\n\t// Grab the current selector. Note that attempting to use sl-remove-\n\t// duplicates(&) here to remove duplicates, which can occur when double\n\t// nesting this mixin with a selector in between, will result in a long\n\t// compile time and then an error.\n\t$current-selectors: &;\n\n\t$new-selectors: ();\n\n\t@each $selector in $current-selectors {\n\t\t@each $condition in $conditions {\n\t\t\t$modified-target: selector-append($target, $condition);\n\n\t\t\t// Check that the current selector isn't null, because if it is it\n\t\t\t// means that this mixin was probably called in the root and\n\t\t\t// selector-replace() will throw an error.\n\t\t\t@if $selector != null {\n\t\t\t\t$replaced-selector: selector-replace(\n\t\t\t\t\t$selector, $target, $modified-target\n\t\t\t\t);\n\n\t\t\t\t// Check if the string representations of the original $selector\n\t\t\t\t// and $replaced-selector match. Note that comparing them as\n\t\t\t\t// lists doesn't seem to work as expected, hence the conversion\n\t\t\t\t// to string. If they don't match, it should mean that we've\n\t\t\t\t// successfully replaced. The additional checks for a valid\n\t\t\t\t// single index in $replaced-selector is to extract a string\n\t\t\t\t// representation of the selector, which can happen and may\n\t\t\t\t// prevent headaches down the road.\n\t\t\t\t@if\tinspect($selector) != inspect($replaced-selector) and\n\t\t\t\t\ttype-of($replaced-selector) == 'list' and\n\t\t\t\t\tlength($replaced-selector) == 1 and\n\t\t\t\t\ttype-of(inspect(nth($replaced-selector, 1))) == 'string'\n\t\t\t\t{\n\t\t\t\t\t$new-selectors: join(\n\t\t\t\t\t\t$new-selectors,\n\t\t\t\t\t\tinspect(nth($replaced-selector, 1)),\n\t\t\t\t\t\tcomma\n\t\t\t\t\t);\n\n\t\t\t\t// If the selector does match, it should mean that we haven't\n\t\t\t\t// replaced anything and therefore the $target doesn't exist in\n\t\t\t\t// $selector. In this case, we nest $selector under $target.\n\t\t\t\t} @else {\n\t\t\t\t\t$new-selectors: join(\n\t\t\t\t\t\t$new-selectors,\n\t\t\t\t\t\tselector-nest($modified-target, $selector),\n\t\t\t\t\t\tcomma\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t} @else {\n\t\t\t\t$new-selectors: join(\n\t\t\t\t\t$new-selectors,\n\t\t\t\t\t($modified-target,),\n\t\t\t\t\tcomma\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\t@at-root #{$new-selectors} {\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 78, | |
| "end": 146 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "List|String", | |
| "name": "conditions", | |
| "description": "The classes, attributes, etc. to add to\n the specified root element. Each list\n index is treated as a separate condtion.\n See examples.\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "target", | |
| "description": "The root element to search for, usually\n 'html' or 'body'. Compound selectors are\n not currently supported.\n" | |
| } | |
| ], | |
| "throw": [ | |
| "$target must be a simple selector and not a compound selector! Was provided \\" | |
| ], | |
| "content": "[The passed content wrapped in the modified & selector.]", | |
| "todo": [ | |
| "This fails badly when double nested with a selector in between the\n two. See commented out code underneath." | |
| ], | |
| "example": [ | |
| { | |
| "type": "scss", | |
| "code": "// This is the preferred way to declare root conditions, without\n// declaring body yourself higher up the selector chain.\n.element {\n\t@include root-conditions(('.condition-class'), 'body') {\n\t\t@include root-conditions(\n\t\t\t('.another-condition-class'), 'body'\n\t\t) {\n\t\t\t// Content.\n\t\t}\n\t}\n}\n// This results in:\nbody.condition-class.another-condition-class .element {\n\t// Content.\n}" | |
| }, | |
| { | |
| "type": "scss", | |
| "code": "// When passing multiple conditions as separate indices, they are output\n// as an alternate condition, separated by a comma.\n.element {\n\t@include root-conditions(\n\t\t('.condition-class', '.another-condition-class'), 'body'\n\t) {\n\t\t// Content.\n\t}\n}\n// This results in:\nbody.condition-class .element,\nbody.another-condition-class .element {\n\t// Content.\n}" | |
| }, | |
| { | |
| "type": "scss", | |
| "code": "// You can do this if you want, but it's not recommended. It's supported\n// for cases when you don't have control over the whole selector chain.\nbody.condition-class .element {\n\t@include root-conditions(\n\t\t('.another-condition-class'), 'body'\n\t) {\n\t\t// Content.\n\t}\n}\n// This results in:\nbody.condition-class.another-condition-class .element {\n\t// Content.\n}" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_selector.scss", | |
| "name": "_selector.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nReplace `$search` with `$replace` in `$string`\n\n", | |
| "commentRange": { | |
| "start": 5, | |
| "end": 19 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "str-replace", | |
| "code": "\n\t$index: str-index($string, $search);\n\n\t@if $index {\n\t\t@return str-slice($string, 1, $index - 1) + $replace + str-replace(\n\t\t\tstr-slice($string, $index + str-length($search)), $search, $replace\n\t\t);\n\t}\n\n\t@return $string;\n", | |
| "line": { | |
| "start": 20, | |
| "end": 30 | |
| } | |
| }, | |
| "author": [ | |
| "Hugo Giraudel" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://css-tricks.com/snippets/sass/str-replace-function/", | |
| "caption": "" | |
| } | |
| ], | |
| "parameter": [ | |
| { | |
| "type": "String", | |
| "name": "string", | |
| "description": "Initial string\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "search", | |
| "description": "Substring to replace\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "replace", | |
| "description": "('') - New value\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "String", | |
| "description": "Updated string" | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_string.scss", | |
| "name": "_string.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nSet base fade transition properties.\n\n", | |
| "commentRange": { | |
| "start": 14, | |
| "end": 25 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-base", | |
| "code": "\n\ttransition-property:\t\t$props;\n\ttransition-duration:\t\t$duration;\n\ttransition-timing-function:\t$easing;\n", | |
| "line": { | |
| "start": 26, | |
| "end": 34 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "name": "props", | |
| "description": "{List} - A comma-separated list of properties to transition.\n" | |
| }, | |
| { | |
| "name": "duration", | |
| "description": "{Number} - The duration of the fade out in 's' or 'ms'.\n" | |
| }, | |
| { | |
| "name": "easing", | |
| "description": "{Mixed} - An easing type to use in\n transition-timing-function.\n" | |
| } | |
| ], | |
| "see": [ | |
| { | |
| "description": "\nSet active fade transition properties. This is usually on focus/hover.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-active", | |
| "code": "\n\ttransition-duration: $transition-fade-in-duration;\n", | |
| "line": { | |
| "start": 41, | |
| "end": 43 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_transition.scss", | |
| "name": "_transition.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nBackwards-compatible wrapper around transition-fade-base().\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-normal", | |
| "code": "\n\t@include transition-fade-base($arguments...);\n", | |
| "line": { | |
| "start": 50, | |
| "end": 52 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nSet active fade transition properties. This is usually on focus/hover.\n\n", | |
| "commentRange": { | |
| "start": 36, | |
| "end": 40 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-active", | |
| "code": "\n\ttransition-duration: $transition-fade-in-duration;\n", | |
| "line": { | |
| "start": 41, | |
| "end": 43 | |
| } | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nSet base fade transition properties.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-base", | |
| "code": "\n\ttransition-property:\t\t$props;\n\ttransition-duration:\t\t$duration;\n\ttransition-timing-function:\t$easing;\n", | |
| "line": { | |
| "start": 26, | |
| "end": 34 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_transition.scss", | |
| "name": "_transition.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nBackwards-compatible wrapper around transition-fade-active().\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-hover", | |
| "code": "\n\t@include transition-fade-active;\n", | |
| "line": { | |
| "start": 59, | |
| "end": 61 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nBackwards-compatible wrapper around transition-fade-base().\n\n", | |
| "commentRange": { | |
| "start": 45, | |
| "end": 49 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-normal", | |
| "code": "\n\t@include transition-fade-base($arguments...);\n", | |
| "line": { | |
| "start": 50, | |
| "end": 52 | |
| } | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nSet base fade transition properties.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-base", | |
| "code": "\n\ttransition-property:\t\t$props;\n\ttransition-duration:\t\t$duration;\n\ttransition-timing-function:\t$easing;\n", | |
| "line": { | |
| "start": 26, | |
| "end": 34 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "transition-fade-base" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_transition.scss", | |
| "name": "_transition.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nBackwards-compatible wrapper around transition-fade-active().\n\n", | |
| "commentRange": { | |
| "start": 54, | |
| "end": 58 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-hover", | |
| "code": "\n\t@include transition-fade-active;\n", | |
| "line": { | |
| "start": 59, | |
| "end": 61 | |
| } | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nSet active fade transition properties. This is usually on focus/hover.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "transition-fade-active", | |
| "code": "\n\ttransition-duration: $transition-fade-in-duration;\n", | |
| "line": { | |
| "start": 41, | |
| "end": 43 | |
| } | |
| } | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "transition-fade-active" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_transition.scss", | |
| "name": "_transition.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nGenerate responsive type properties based on screen size, within a range.\n\nThis calculates a font property based on the screen size, with minimum and\nmaximum values. This removes the screen media query found in the original\nby Mike Riethmuller this is based on.\n\n", | |
| "commentRange": { | |
| "start": 6, | |
| "end": 32 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "responsive-type", | |
| "code": "\n\t@supports (font-size: calc(1vw * 2)) {\n\t\t// Set property minimum values.\n\t\t@each $property in $properties {\n\t\t\t#{$property}: $min-value;\n\t\t}\n\n\t\t// When we're wider than the minimum screen width, use the interpolated\n\t\t// value.\n\t\t@media (min-width: $min-screen) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: calc-responsive-value(\n\t\t\t\t\t$min-screen, $min-value, $max-screen, $max-value\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t// When we're at or wider than the maximum width, use the maximum value.\n\t\t@media (min-width: $max-screen) {\n\t\t\t@each $property in $properties {\n\t\t\t\t#{$property}: $max-value;\n\t\t\t}\n\t\t}\n\t}\n", | |
| "line": { | |
| "start": 33, | |
| "end": 59 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "name": "properties", | |
| "description": "{List} - List of properties to modify.\n" | |
| }, | |
| { | |
| "name": "min-screen", | |
| "description": "{Number} - The minimum screen width to interpolate\n property values to.\n" | |
| }, | |
| { | |
| "name": "max-screen", | |
| "description": "{Number} - The maximum screen width to interpolate\n property values to.\n" | |
| }, | |
| { | |
| "name": "min-value", | |
| "description": "{Number} - The minimum value to interpolate property\n values to at the minimum screen width.\n" | |
| }, | |
| { | |
| "name": "max-value", | |
| "description": "{Number} - The maximum value to interpolate property\n values to at the maximum screen width.\n" | |
| } | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://codepen.io/MadeByMike/pen/7744b5fc445e2b34a9e2bb1e21e8b09c", | |
| "caption": "" | |
| }, | |
| { | |
| "url": "https://codepen.io/MadeByMike/pen/VvwqvW", | |
| "caption": "" | |
| }, | |
| { | |
| "url": "https://madebymike.com.au/writing/fluid-type-calc-examples/", | |
| "caption": "" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "function", | |
| "name": "calc-responsive-value" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.responsive.scss", | |
| "name": "_typography.responsive.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nThe text underline colour.\n", | |
| "commentRange": { | |
| "start": 5, | |
| "end": 7 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "text-underline-colour", | |
| "value": "currentColor", | |
| "scope": "default", | |
| "line": { | |
| "start": 8, | |
| "end": 8 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nThe text underline vertical position, as a background-position-y value.\n", | |
| "commentRange": { | |
| "start": 10, | |
| "end": 12 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "text-underline-position", | |
| "value": "95%", | |
| "scope": "default", | |
| "line": { | |
| "start": 13, | |
| "end": 13 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nThe text underline thickness.\n", | |
| "commentRange": { | |
| "start": 15, | |
| "end": 17 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "text-underline-thickness", | |
| "value": "2px", | |
| "scope": "default", | |
| "line": { | |
| "start": 18, | |
| "end": 18 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nThe text underline style; should be one of solid, dotted, or dashed.\n", | |
| "commentRange": { | |
| "start": 20, | |
| "end": 22 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "text-underline-style", | |
| "value": "solid", | |
| "scope": "default", | |
| "line": { | |
| "start": 23, | |
| "end": 23 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nWrap styles to only serve them to browsers that support our underlines.\n\nThe following @supports tests wrap the provided styles:\n\n* background-size support\n\n* calc() support\n\n* support for the output of text-underline-background(), currently a\n linear-gradient()\n\n* CSS custom properties\n\n", | |
| "commentRange": { | |
| "start": 25, | |
| "end": 43 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "supports-cleared-text-underline", | |
| "code": "\n\t@supports\n\t\t(background-size:\tcalc(1px * 1) 1px) and\n\t\t(background-image:\ttext-underline-background(white)) and\n\t\t#{'(--test: orange)'}\n\t{\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 44, | |
| "end": 52 | |
| } | |
| }, | |
| "content": "The styles to wrap in the @supports block.", | |
| "require": [ | |
| { | |
| "type": "function", | |
| "name": "text-underline-background" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nGet the linear-gradient to use as the background underline.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "commentRange": { | |
| "start": 54, | |
| "end": 75 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Dotted and dashed gradients are identical, with the difference being only\n\t// the background-size that mixin text-underline-background sets.\n\t@if $underline-style == dotted or $underline-style == dashed {\n\t\t@return linear-gradient(\n\t\t\tto right,\n\t\t\t$underline-colour\t0%,\n\t\t\t$underline-colour\t50%,\n\t\t\ttransparent\t\t\t50%,\n\t\t\ttransparent\t\t\t100%\n\t\t);\n\t} @else {\n\t\t@return linear-gradient(\n\t\t\t$underline-colour, $underline-colour\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 76, | |
| "end": 95 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "underline-colour", | |
| "default": "$text-underline-colour", | |
| "description": "The underline colour.\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "underline-style", | |
| "default": "$text-underline-style", | |
| "description": "The underline style; should be one of solid, dotted, or dashed.\n" | |
| } | |
| ], | |
| "return": { | |
| "type": "String", | |
| "description": "A linear-gradient using the provided underline colour and style.\n" | |
| }, | |
| "see": [ | |
| { | |
| "description": "\nGet the linear-gradient to use as the background underline.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Dotted and dashed gradients are identical, with the difference being only\n\t// the background-size that mixin text-underline-background sets.\n\t@if $underline-style == dotted or $underline-style == dashed {\n\t\t@return linear-gradient(\n\t\t\tto right,\n\t\t\t$underline-colour\t0%,\n\t\t\t$underline-colour\t50%,\n\t\t\ttransparent\t\t\t50%,\n\t\t\ttransparent\t\t\t100%\n\t\t);\n\t} @else {\n\t\t@return linear-gradient(\n\t\t\t$underline-colour, $underline-colour\n\t\t);\n\t}\n", | |
| "line": { | |
| "start": 76, | |
| "end": 95 | |
| } | |
| } | |
| } | |
| ], | |
| "author": [ | |
| "Jimmy Wilson", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://codepen.io/jimmynotjim/pen/EabQjV", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nWrap styles to only serve them to browsers that support our underlines.\n\nThe following @supports tests wrap the provided styles:\n\n* background-size support\n\n* calc() support\n\n* support for the output of text-underline-background(), currently a\n linear-gradient()\n\n* CSS custom properties\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "supports-cleared-text-underline", | |
| "code": "\n\t@supports\n\t\t(background-size:\tcalc(1px * 1) 1px) and\n\t\t(background-image:\ttext-underline-background(white)) and\n\t\t#{'(--test: orange)'}\n\t{\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 44, | |
| "end": 52 | |
| } | |
| } | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nSet a text underline using a background gradient.\n\nThis is adapted from Jimmy Wilson's linked Pen.\n\n", | |
| "commentRange": { | |
| "start": 97, | |
| "end": 125 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-background", | |
| "code": "\n\t// Set underline values as custom properties so that they can be altered on\n\t// a per-element basis at run-time.\n\t@include custom-property(\n\t\t'text-underline-colour',\t$underline-colour\n\t);\n\t@include custom-property(\n\t\t'text-underline-position',\t$underline-position\n\t);\n\t@include custom-property(\n\t\t'text-underline-thickness',\t$underline-thickness\n\t);\n\t// The underline style currently requires pre-processing in Sass so this is\n\t// only here for JavaScript or other uses, but will not have any effect if\n\t// changed.\n\t@include custom-property(\n\t\t'text-underline-style',\t\t$underline-style\n\t);\n\n\t// The default width to height ratio is 1:1.\n\t$background-width-ratio:\t\t1;\n\n\t// The X position of the background. The default is 0, but the dotted and\n\t// dashed styles offset this from the right edge to attempt to compensate\n\t// for the extra space at the end of the gradient so that the solid parts\n\t// start and stop at roughly the start and end of the text.\n\t$background-x-position:\t\t\t0;\n\n\t@if $underline-style == dotted {\n\t\t// Dotted width to height ratio is 2:1 as it should be 1 pixel solid and\n\t\t// 1 pixel transparent.\n\t\t$background-width-ratio:\t2;\n\n\t\t$background-x-position:\t\tcalc(100% + 0.75px);\n\n\t} @else if $underline-style == dashed {\n\t\t// Dashed width to height ratio is 6:1 as it should be 3 pixels solid\n\t\t// and 3 pixels transparent.\n\t\t$background-width-ratio:\t6;\n\n\t\t$background-x-position:\t\tcalc(100% + 2.5px);\n\t}\n\n\tbackground-image:\t\ttext-underline-background(\n\t\tcustom-property('text-underline-colour'), $underline-style\n\t);\n\t// Background width is multiplied by the ratio. We do this in a calc() in\n\t// case the passed thickness is a CSS custom property - trying to multiply\n\t// that on compile will rightly throw an error.\n\tbackground-size:\n\t\tcalc(\n\t\t\t#{$background-width-ratio} *\n\t\t\t#{custom-property('text-underline-thickness')}\n\t\t)\n\t\tcustom-property('text-underline-thickness');\n\tbackground-repeat:\t\trepeat-x;\n\t// If the 'round' keyword is supported, use it to avoid the last repeated\n\t// background image being clipped. See:\n\t// https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat\n\tbackground-repeat:\t\tround no-repeat;\n\tbackground-position:\n\t\t$background-x-position custom-property('text-underline-position');\n", | |
| "line": { | |
| "start": 126, | |
| "end": 193 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "underline-colour", | |
| "default": "$text-underline-colour", | |
| "description": "The underline colour.\n" | |
| }, | |
| { | |
| "type": "Number", | |
| "name": "underline-position", | |
| "default": "$text-underline-position", | |
| "description": "The y-axis background position value to use for the underline.\n" | |
| }, | |
| { | |
| "type": "Number", | |
| "name": "underline-thickness", | |
| "default": "$text-underline-thickness", | |
| "description": "The thickness of the generated underline.\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "underline-style", | |
| "default": "$text-underline-style", | |
| "description": "The underline style; should be one of solid, dotted, or dashed.\n" | |
| } | |
| ], | |
| "output": "Various background properties to display the underline based on\n parameters.", | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "mixin", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "text-underline-background" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| }, | |
| { | |
| "type": "function", | |
| "name": "custom-property" | |
| } | |
| ], | |
| "author": [ | |
| "Jimmy Wilson", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://codepen.io/jimmynotjim/pen/EabQjV", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nCrop underlines with the background colour, using text-shadow.\n\nThis is based on the linked Pen by Jimmy Wilson, but modified to generate\nthe shadow parts with an interval value and list of offsets, as opposed to\nhard coding the shadow.\n\n", | |
| "commentRange": { | |
| "start": 195, | |
| "end": 210 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline-crop", | |
| "code": "\n\t@if $background-colour == transparent {\n\t\ttext-shadow: none;\n\n\t} @else {\n\t\t// This is the interval used to calculate the text-shadow offsets.\n\t\t$interval: 0.03em;\n\n\t\t// These are offset multipliers in x/y pairs, used to generate the text-\n\t\t// shadow offsets with the $interval.\n\t\t$offsets: (\n\t\t\t// These clear strictly horizontally.\n\t\t\t( 1, 0),\n\t\t\t(-1, 0),\n\t\t\t( 2, 0),\n\t\t\t(-2, 0),\n\t\t\t( 3, 0),\n\t\t\t(-3, 0),\n\t\t\t( 4, 0),\n\t\t\t(-4, 0),\n\t\t\t( 5, 0),\n\t\t\t(-5, 0),\n\n\t\t\t// These clear horizontally and below the descenders. We stop at 3\n\t\t\t// so that we don't go too far down and crop the underline even\n\t\t\t// under characters without descenders.\n\t\t\t( 1, 1),\n\t\t\t(-1, 1),\n\t\t\t( 2, 2),\n\t\t\t(-2, 2),\n\t\t\t( 3, 3),\n\t\t\t(-3, 3),\n\t\t);\n\n\t\t$shadow: ();\n\n\t\t@each $offset in $offsets {\n\t\t\t$shadow-part: (\n\t\t\t\t(nth($offset, 1) * $interval)\n\t\t\t\t(nth($offset, 2) * $interval)\n\t\t\t\t$background-colour\n\t\t\t);\n\n\t\t\t$shadow: append($shadow, $shadow-part, comma);\n\t\t}\n\n\t\ttext-shadow: $shadow;\n\t}\n", | |
| "line": { | |
| "start": 211, | |
| "end": 259 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "background-colour", | |
| "description": "The background colour to use to crop the the underline. If transparent is\n provided as the value, text-shadow: none; will be output instead.\n" | |
| } | |
| ], | |
| "author": [ | |
| "Jimmy Wilson", | |
| "Matei \"Ambient.Impact\" Stanca" | |
| ], | |
| "link": [ | |
| { | |
| "url": "https://codepen.io/jimmynotjim/pen/EabQjV", | |
| "caption": "" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "background-colour" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "background-colour" | |
| } | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nSet text underline, clearing descenders.\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline", | |
| "code": "\n\n\t@include supports-cleared-text-underline {\n\t\t@include text-underline-background(\n\t\t\t$underline-colour:\t\t$underline-colour,\n\t\t\t$underline-position:\t$underline-position,\n\t\t\t$underline-thickness:\t$underline-thickness,\n\t\t\t$underline-style:\t\t$underline-style\n\t\t);\n\n\t\t@include text-underline-crop($background-colour);\n\t\t// For whatever reason, we have to explicitly declare the crop when text\n\t\t// is selected.\n\t\t@include selection-active {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\t\t@include selection-inactive {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 290, | |
| "end": 318 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nSet text underline, clearing descenders.\n\n", | |
| "commentRange": { | |
| "start": 261, | |
| "end": 289 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "text-underline", | |
| "code": "\n\n\t@include supports-cleared-text-underline {\n\t\t@include text-underline-background(\n\t\t\t$underline-colour:\t\t$underline-colour,\n\t\t\t$underline-position:\t$underline-position,\n\t\t\t$underline-thickness:\t$underline-thickness,\n\t\t\t$underline-style:\t\t$underline-style\n\t\t);\n\n\t\t@include text-underline-crop($background-colour);\n\t\t// For whatever reason, we have to explicitly declare the crop when text\n\t\t// is selected.\n\t\t@include selection-active {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\t\t@include selection-inactive {\n\t\t\t@include text-underline-crop($background-colour);\n\t\t}\n\n\t\t@content;\n\t}\n", | |
| "line": { | |
| "start": 290, | |
| "end": 318 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "Color", | |
| "name": "underline-colour", | |
| "default": "$text-underline-colour", | |
| "description": "The underline colour.\n" | |
| }, | |
| { | |
| "type": "Number", | |
| "name": "underline-position", | |
| "default": "$text-underline-position", | |
| "description": "The y-axis background position value to use for the underline.\n" | |
| }, | |
| { | |
| "type": "Number", | |
| "name": "underline-thickness", | |
| "default": "$text-underline-thickness", | |
| "description": "The thickness of the generated underline.\n" | |
| }, | |
| { | |
| "type": "String", | |
| "name": "underline-style", | |
| "default": "$text-underline-style", | |
| "description": "The underline style; should be one of solid, dotted, or dashed.\n" | |
| }, | |
| { | |
| "type": "Color", | |
| "name": "background-colour", | |
| "default": "custom-property('background-colour')", | |
| "description": "The background colour to use for the underline crop.\n" | |
| } | |
| ], | |
| "content": "Additional styles if cleared text underlines are supported. This is useful\n if you need to override some styles for progressive enhancement.", | |
| "require": [ | |
| { | |
| "type": "mixin", | |
| "name": "text-underline-crop" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "background-colour" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "background-colour" | |
| }, | |
| { | |
| "type": "variable", | |
| "name": "background-colour" | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_typography.underline.scss", | |
| "name": "_typography.underline.scss" | |
| } | |
| }, | |
| { | |
| "description": "\nDefault z-index hierarchy. Later in the maps/lists means higher z-index.\n\nNote that currently nested items only get the z-index from their parent map\nor list, and are not aware of parent lists and what comes before them, so\neach parent must correspond to a positioning context, else the z-indices\nwill not always work as expected.\n", | |
| "commentRange": { | |
| "start": 10, | |
| "end": 17 | |
| }, | |
| "context": { | |
| "type": "variable", | |
| "name": "z-indices", | |
| "value": "(\n\t// Secondary content, such as sidebars, footer, etc.\n\tpage-secondary:\t(),\n\t// Main page content.\n\tpage-main:\t\t(),\n\t// Sections that are always above other content; may be position: fixed\n\t// or sticky, but not necessarily.\n\tpage-floating:\t(),\n\n\t// Right under floating elements.\n\tfloating-below:\t(),\n\t// Floating elements, usually visible to all site visitors.\n\tfloating:\t\t\t(),\n\t// Right above floating elements.\n\tfloating-above: \t(),\n\n\t// Administration controls - such as contextual links - that need to be on\n\t// top of most other page elements.\n\tadmin:\t\t(),\n\n\t// Administration toolbar and child elements.\n\ttoolbar:\t(\n\t\t// Inactive/hidden trays.\n\t\ttray-inactive,\n\t\t// Active/visible trays.\n\t\ttray-active,\n\t\t// The black bar itself along the top of the viewport.\n\t\tbar,\n\t),\n\n\t// Modal elements that block access to the rest of the document.\n\tmodal:\t\t(),\n)", | |
| "scope": "private", | |
| "line": { | |
| "start": 18, | |
| "end": 50 | |
| } | |
| }, | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_z-index.scss", | |
| "name": "_z-index.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nGet the specified nested z-index.\n\n", | |
| "context": { | |
| "type": "function", | |
| "name": "z-index", | |
| "code": "\n\t$map:\t\t\t$z-indices;\n\t$found-index:\tnull;\n\n\t@each $key in $keys {\n\t\t// If this level is a map, get the index and recurse down.\n\t\t@if (type-of($map) == 'map') {\n\t\t\t$found-index:\tindex(map-keys($map), $key);\n\t\t\t$map:\t\t\tmap-get($map, $key);\n\n\t\t// Otherwise, assume this is a list and try to get the key's index.\n\t\t} @else {\n\t\t\t$found-index:\tindex($map, $key);\n\t\t}\n\t}\n\n\t// You did a bad.\n\t@if $found-index == null {\n\t\t@debug $keys;\n\t\t@error 'Could not find index for keys!';\n\t}\n\n\t@return $found-index;\n", | |
| "line": { | |
| "start": 61, | |
| "end": 84 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nGet the specified nested z-index.\n\n", | |
| "commentRange": { | |
| "start": 52, | |
| "end": 60 | |
| }, | |
| "context": { | |
| "type": "function", | |
| "name": "z-index", | |
| "code": "\n\t$map:\t\t\t$z-indices;\n\t$found-index:\tnull;\n\n\t@each $key in $keys {\n\t\t// If this level is a map, get the index and recurse down.\n\t\t@if (type-of($map) == 'map') {\n\t\t\t$found-index:\tindex(map-keys($map), $key);\n\t\t\t$map:\t\t\tmap-get($map, $key);\n\n\t\t// Otherwise, assume this is a list and try to get the key's index.\n\t\t} @else {\n\t\t\t$found-index:\tindex($map, $key);\n\t\t}\n\t}\n\n\t// You did a bad.\n\t@if $found-index == null {\n\t\t@debug $keys;\n\t\t@error 'Could not find index for keys!';\n\t}\n\n\t@return $found-index;\n", | |
| "line": { | |
| "start": 61, | |
| "end": 84 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "ArgList", | |
| "name": "keys", | |
| "description": "The keys to look for.\n" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "variable", | |
| "name": "z-indices", | |
| "external": false | |
| } | |
| ], | |
| "author": [ | |
| "Matt Stow" | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "throw": [ | |
| "Could not find index for keys!" | |
| ], | |
| "file": { | |
| "path": "helpers\\_z-index.scss", | |
| "name": "_z-index.scss" | |
| }, | |
| "usedBy": [ | |
| { | |
| "description": "\nMixin wrapper for @function z-index().\n\n", | |
| "context": { | |
| "type": "mixin", | |
| "name": "z-index", | |
| "code": "\n\tz-index: z-index($keys...);\n", | |
| "line": { | |
| "start": 93, | |
| "end": 95 | |
| } | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "description": "\nMixin wrapper for @function z-index().\n\n", | |
| "commentRange": { | |
| "start": 86, | |
| "end": 92 | |
| }, | |
| "context": { | |
| "type": "mixin", | |
| "name": "z-index", | |
| "code": "\n\tz-index: z-index($keys...);\n", | |
| "line": { | |
| "start": 93, | |
| "end": 95 | |
| } | |
| }, | |
| "parameter": [ | |
| { | |
| "type": "ArgList", | |
| "name": "keys", | |
| "description": "The keys to look for.\n" | |
| } | |
| ], | |
| "require": [ | |
| { | |
| "type": "function", | |
| "name": "z-index", | |
| "external": false | |
| } | |
| ], | |
| "access": "public", | |
| "group": [ | |
| "undefined" | |
| ], | |
| "file": { | |
| "path": "helpers\\_z-index.scss", | |
| "name": "_z-index.scss" | |
| } | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment