diff --git a/dist/docs/js/experience.json b/dist/docs/js/experience.json index a06f45990..4c9b6a739 100644 --- a/dist/docs/js/experience.json +++ b/dist/docs/js/experience.json @@ -7,15 +7,7 @@ "description": null, "lineNumber": 1, "type": null, - "name": "Eventr", - "errors": [ - "Unknown content 'Delegate and undelegate events'" - ] - }, - { - "title": "example", - "description": "import { delegate } from \"./eventr\";\n \tdelegate(obj);\n\n \timport eventr from \"./eventr\";\n \teventr.delegate(obj);\n \teventr.undelegate(obj);\n \tclass Test {\n \t\tconstructor() {\n \t\t\tthis.delegate();\n \t\t}\n \t}\n \teventr(Test);", - "lineNumber": 3 + "name": "Breakpoints" } ], "loc": { @@ -24,37 +16,33 @@ "column": 0 }, "end": { - "line": 17, + "line": 3, "column": 3 } }, "context": { "loc": { "start": { - "line": 21, + "line": 10, "column": 0 }, "end": { - "line": 21, - "column": 47 + "line": 16, + "column": 2 } }, - "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\eventr.js" + "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\breakpoints.js" }, "augments": [], - "examples": [ - { - "description": "import { delegate } from \"./eventr\";\n \tdelegate(obj);\n\n \timport eventr from \"./eventr\";\n \teventr.delegate(obj);\n \teventr.undelegate(obj);\n \tclass Test {\n \t\tconstructor() {\n \t\t\tthis.delegate();\n \t\t}\n \t}\n \teventr(Test);" - } - ], + "examples": [], "params": [], "properties": [], "returns": [], "sees": [], "throws": [], "todos": [], - "name": "DelegateEventSplitter", - "kind": "constant", + "kind": "module", + "name": "Breakpoints", "members": { "global": [], "inner": [], @@ -64,11 +52,11 @@ }, "path": [ { - "name": "DelegateEventSplitter", - "kind": "constant" + "name": "Breakpoints", + "kind": "module" } ], - "namespace": "DelegateEventSplitter" + "namespace": "Breakpoints" }, { "description": { @@ -79,7 +67,7 @@ "children": [ { "type": "text", - "value": "Delegates events on an object instance. Allows a consistent, declarative approach to binding events.\nExpects the instance parameter to have 2 properties:\n\t- $el - The jQuery element(s) to use as a context\n\t- events() - Function that returns an events hash\nBound events are namespaced with the 'EventNamespace' string.\nThe events hash is like Backbone's events hash and consists of {“event selector”: “callback”}.\nThe callback can either be a named method to call on the instance or a function itself.\nThe callback function is called with 'instance' as the context for 'this'.", + "value": "The breakpoints, in pixel values.\nThese correspond with the breakpoints defined in SASS.\nOften not used directly, but via matchesFrom.", "position": { "start": { "line": 1, @@ -87,16 +75,11 @@ "offset": 0 }, "end": { - "line": 8, - "column": 75, - "offset": 575 + "line": 3, + "column": 46, + "offset": 134 }, "indent": [ - 1, - 1, - 1, - 1, - 1, 1, 1 ] @@ -110,16 +93,11 @@ "offset": 0 }, "end": { - "line": 8, - "column": 75, - "offset": 575 + "line": 3, + "column": 46, + "offset": 134 }, "indent": [ - 1, - 1, - 1, - 1, - 1, 1, 1 ] @@ -133,399 +111,46 @@ "offset": 0 }, "end": { - "line": 8, - "column": 75, - "offset": 575 + "line": 3, + "column": 46, + "offset": 134 } } }, - "tags": [ - { - "title": "example", - "description": "import { delegate } from \"./eventr\";\n\tclass Test {\n\t\tconstructor(el) {\n\t\t\tthis.$el = $(el);\n\t\t\tdelegate(this);\n\t\t}\n\t\tevents() {\n\t\t\treturn {\n\t\t\t\t\"click .something\": \"_clickHandler\",\n\t\t\t\t[`keydown .${ something }`]: () => { }\n\t\t\t}\n\t\t}\n\t\t_clickHandler(e) { }\n\t}", - "lineNumber": 10 - }, - { - "title": "param", - "description": "An instance of an object", - "lineNumber": 26, - "type": { - "type": "NameExpression", - "name": "Object" - }, - "name": "instance" - }, - { - "title": "return", - "description": "The instance", - "lineNumber": 27, - "type": { - "type": "NameExpression", - "name": "Object" - } - }, - { - "title": "throws", - "description": "If instance isn't truthy", - "lineNumber": 28, - "type": { - "type": "NameExpression", - "name": "Error" - } - }, - { - "title": "throws", - "description": "If instace.$el doesn't exist", - "lineNumber": 29, - "type": { - "type": "NameExpression", - "name": "Error" - } - }, - { - "title": "throws", - "description": "If instanceevents isn't a function", - "lineNumber": 30, - "type": { - "type": "NameExpression", - "name": "Error" - } - } - ], + "tags": [], "loc": { "start": { - "line": 26, + "line": 5, "column": 0 }, "end": { - "line": 57, + "line": 9, "column": 3 } }, "context": { "loc": { "start": { - "line": 58, + "line": 10, "column": 0 }, "end": { - "line": 91, - "column": 1 + "line": 16, + "column": 2 } }, - "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\eventr.js" + "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\breakpoints.js" }, "augments": [], - "examples": [ - { - "description": "import { delegate } from \"./eventr\";\n\tclass Test {\n\t\tconstructor(el) {\n\t\t\tthis.$el = $(el);\n\t\t\tdelegate(this);\n\t\t}\n\t\tevents() {\n\t\t\treturn {\n\t\t\t\t\"click .something\": \"_clickHandler\",\n\t\t\t\t[`keydown .${ something }`]: () => { }\n\t\t\t}\n\t\t}\n\t\t_clickHandler(e) { }\n\t}" - } - ], - "params": [ - { - "title": "param", - "name": "instance", - "lineNumber": 26, - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "An instance of an object", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - } - } - }, - "type": { - "type": "NameExpression", - "name": "Object" - } - } - ], + "examples": [], + "params": [], "properties": [], - "returns": [ - { - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "The instance", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 13, - "offset": 12 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 13, - "offset": 12 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 13, - "offset": 12 - } - } - }, - "title": "returns", - "type": { - "type": "NameExpression", - "name": "Object" - } - } - ], + "returns": [], "sees": [], - "throws": [ - { - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "If instance isn't truthy", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 25, - "offset": 24 - } - } - }, - "type": { - "type": "NameExpression", - "name": "Error" - } - }, - { - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "If instace.$el doesn't exist", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 29, - "offset": 28 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 29, - "offset": 28 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 29, - "offset": 28 - } - } - }, - "type": { - "type": "NameExpression", - "name": "Error" - } - }, - { - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "If instanceevents isn't a function", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 35, - "offset": 34 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 35, - "offset": 34 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 35, - "offset": 34 - } - } - }, - "type": { - "type": "NameExpression", - "name": "Error" - } - } - ], + "throws": [], "todos": [], - "name": "delegate", - "kind": "function", + "name": "breakpoints", + "kind": "constant", "members": { "global": [], "inner": [], @@ -535,11 +160,11 @@ }, "path": [ { - "name": "delegate", - "kind": "function" + "name": "breakpoints", + "kind": "constant" } ], - "namespace": "delegate" + "namespace": "breakpoints" }, { "description": { @@ -550,7 +175,7 @@ "children": [ { "type": "text", - "value": "Undelegate events on an object instance", + "value": "Determines if the device's width matches a min-width query from the given breakpoint.", "position": { "start": { "line": 1, @@ -559,8 +184,8 @@ }, "end": { "line": 1, - "column": 40, - "offset": 39 + "column": 86, + "offset": 85 }, "indent": [] } @@ -574,8 +199,8 @@ }, "end": { "line": 1, - "column": 40, - "offset": 39 + "column": 86, + "offset": 85 }, "indent": [] } @@ -589,62 +214,71 @@ }, "end": { "line": 1, - "column": 40, - "offset": 39 + "column": 86, + "offset": 85 } } }, "tags": [ { "title": "param", - "description": "An instance of an object", - "lineNumber": 2, + "description": "The breakpoint name", + "lineNumber": 3, "type": { "type": "NameExpression", - "name": "Object" + "name": "string" }, - "name": "instance" + "name": "breakpointName" }, { "title": "return", - "description": "The instance", - "lineNumber": 3, + "description": "True if it matches, false otherwise.", + "lineNumber": 4, "type": { "type": "NameExpression", - "name": "Object" + "name": "Boolean" } + }, + { + "title": "example", + "description": "import { matchesFrom } from \"./breakpoints\";\n\t// Checks if the media query (min-width: 25em) matches\n\tvar matches = matchesFrom(\"xs\");", + "lineNumber": 6 } ], "loc": { "start": { - "line": 93, + "line": 18, "column": 0 }, "end": { - "line": 97, + "line": 28, "column": 3 } }, "context": { "loc": { "start": { - "line": 98, + "line": 29, "column": 0 }, "end": { - "line": 107, - "column": 1 + "line": 39, + "column": 2 } }, - "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\eventr.js" + "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\breakpoints.js" }, "augments": [], - "examples": [], + "examples": [ + { + "description": "import { matchesFrom } from \"./breakpoints\";\n\t// Checks if the media query (min-width: 25em) matches\n\tvar matches = matchesFrom(\"xs\");" + } + ], "params": [ { "title": "param", - "name": "instance", - "lineNumber": 2, + "name": "breakpointName", + "lineNumber": 3, "description": { "type": "root", "children": [ @@ -653,7 +287,7 @@ "children": [ { "type": "text", - "value": "An instance of an object", + "value": "The breakpoint name", "position": { "start": { "line": 1, @@ -662,8 +296,8 @@ }, "end": { "line": 1, - "column": 25, - "offset": 24 + "column": 20, + "offset": 19 }, "indent": [] } @@ -677,8 +311,8 @@ }, "end": { "line": 1, - "column": 25, - "offset": 24 + "column": 20, + "offset": 19 }, "indent": [] } @@ -692,14 +326,14 @@ }, "end": { "line": 1, - "column": 25, - "offset": 24 + "column": 20, + "offset": 19 } } }, "type": { "type": "NameExpression", - "name": "Object" + "name": "string" } } ], @@ -714,7 +348,7 @@ "children": [ { "type": "text", - "value": "The instance", + "value": "True if it matches, false otherwise.", "position": { "start": { "line": 1, @@ -723,8 +357,8 @@ }, "end": { "line": 1, - "column": 13, - "offset": 12 + "column": 37, + "offset": 36 }, "indent": [] } @@ -738,8 +372,8 @@ }, "end": { "line": 1, - "column": 13, - "offset": 12 + "column": 37, + "offset": 36 }, "indent": [] } @@ -753,213 +387,23 @@ }, "end": { "line": 1, - "column": 13, - "offset": 12 + "column": 37, + "offset": 36 } } }, "title": "returns", "type": { "type": "NameExpression", - "name": "Object" - } - } - ], - "sees": [], - "throws": [], - "todos": [], - "name": "undelegate", - "kind": "function", - "members": { - "global": [], - "inner": [], - "instance": [], - "events": [], - "static": [] - }, - "path": [ - { - "name": "undelegate", - "kind": "function" - } - ], - "namespace": "undelegate" - }, - { - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "Mixes in event delegate and undelegate functionality into a class's\nprotoype so it can be called as \"this.delegate()\". A convenient abstraction\nover the individual 'delegate' and 'undelegate' functions.", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 3, - "column": 59, - "offset": 202 - }, - "indent": [ - 1, - 1 - ] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 3, - "column": 59, - "offset": 202 - }, - "indent": [ - 1, - 1 - ] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 3, - "column": 59, - "offset": 202 - } - } - }, - "tags": [ - { - "title": "param", - "description": "The class on which to add the prototype methods", - "lineNumber": 4, - "type": { - "type": "NameExpression", - "name": "Class" - }, - "name": "pluginClass" - }, - { - "title": "example", - "description": "import eventr from \"./eventr\";\n\tclass Test {\n\t\tconstructor(el) {\n\t\t\tthis.$el = $(el);\n\t\t\tthis.delegate();\n\t\t}\n\t\tevents() {\n\t\t\treturn {\n\t\t\t\t\"click .something\": \"_clickHandler\",\n\t\t\t\t[`keydown .${ something }`]: () => { }\n\t\t\t}\n\t\t}\n\t\t_clickHandler(e) { }\n\t}\n\teventr(Test;)", - "lineNumber": 5 - } - ], - "loc": { - "start": { - "line": 109, - "column": 0 - }, - "end": { - "line": 130, - "column": 3 - } - }, - "context": { - "loc": { - "start": { - "line": 131, - "column": 0 - }, - "end": { - "line": 138, - "column": 1 + "name": "Boolean" } - }, - "file": "C:\\Users\\iroutledge\\Documents\\Dev\\NICE-Experience\\src\\javascripts\\eventr.js" - }, - "augments": [], - "examples": [ - { - "description": "import eventr from \"./eventr\";\n\tclass Test {\n\t\tconstructor(el) {\n\t\t\tthis.$el = $(el);\n\t\t\tthis.delegate();\n\t\t}\n\t\tevents() {\n\t\t\treturn {\n\t\t\t\t\"click .something\": \"_clickHandler\",\n\t\t\t\t[`keydown .${ something }`]: () => { }\n\t\t\t}\n\t\t}\n\t\t_clickHandler(e) { }\n\t}\n\teventr(Test;)" } ], - "params": [ - { - "title": "param", - "name": "pluginClass", - "lineNumber": 4, - "description": { - "type": "root", - "children": [ - { - "type": "paragraph", - "children": [ - { - "type": "text", - "value": "The class on which to add the prototype methods", - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 48, - "offset": 47 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 48, - "offset": 47 - }, - "indent": [] - } - } - ], - "position": { - "start": { - "line": 1, - "column": 1, - "offset": 0 - }, - "end": { - "line": 1, - "column": 48, - "offset": 47 - } - } - }, - "type": { - "type": "NameExpression", - "name": "Class" - } - } - ], - "properties": [], - "returns": [], "sees": [], "throws": [], "todos": [], - "name": "mixin", - "kind": "function", + "name": "matchesFrom", + "kind": "constant", "members": { "global": [], "inner": [], @@ -969,10 +413,10 @@ }, "path": [ { - "name": "mixin", - "kind": "function" + "name": "matchesFrom", + "kind": "constant" } ], - "namespace": "mixin" + "namespace": "matchesFrom" } ] \ No newline at end of file diff --git a/dist/docs/sass/experience.json b/dist/docs/sass/experience.json index 2ce4e5f3a..c1691914e 100644 --- a/dist/docs/sass/experience.json +++ b/dist/docs/sass/experience.json @@ -857,7 +857,7 @@ "context": { "type": "variable", "name": "colour-focus", - "value": "#ffd586", + "value": "#0092a6", "scope": "private", "line": { "start": 34, @@ -889,24 +889,12 @@ "end": 12 } } - }, - { - "description": "

Default link style for use on a normal (light) background

\n", - "context": { - "type": "placeholder", - "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", - "line": { - "start": 7, - "end": 29 - } - } } ], "groupName": { "colors": "Colours" }, - "resolvedValue": "#ffd586" + "resolvedValue": "#0092a6" }, { "description": "

Icons colour

\n", @@ -977,10 +965,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -1025,10 +1013,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -1073,10 +1061,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -1121,10 +1109,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -1169,10 +1157,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -1219,8 +1207,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -1267,8 +1255,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -1315,8 +1303,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -1363,8 +1351,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -1411,8 +1399,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -2523,6 +2511,33 @@ "components": "Components" } }, + { + "description": "

In page nav

\n", + "commentRange": { + "start": 5, + "end": 5 + }, + "context": { + "type": "css", + "name": ".in-page-nav", + "value": "// The 'on this page' title\n &__title {\n @include font-size(h2);\n }\n\n // Lists (both root level and sub level)\n &__list {\n margin-left: em($spacing-medium);\n\n [aria-hidden='true'] {\n display: none;\n }\n }\n\n a {\n &:visited {\n color: $colour-link;\n }\n\n &:focus {\n background: none;\n }\n }\n\n @include mq($from: md) {\n // Docked to the top of the screen\n &--fixed {\n position: fixed;\n top: 0;\n }\n\n &__title {\n @include font-size(h4);\n margin-top: 0;\n }\n\n a {\n &[aria-selected='true'] {\n font-weight: bold;\n }\n }\n }", + "line": { + "start": 6, + "end": 51 + } + }, + "group": [ + "components" + ], + "access": "public", + "file": { + "path": "components\\in-page-nav\\_in-page-nav.scss", + "name": "_in-page-nav.scss" + }, + "groupName": { + "components": "Components" + } + }, { "description": "

A phase banner includes a tag and a label and is designed\nto designate that a service is in alpha or beta.\nUsually contains a .phase-tag.

\n

BEM elements:

\n\n", "commentRange": { @@ -2628,7 +2643,7 @@ "context": { "type": "css", "name": ".tabs", - "value": "margin: em($spacing-medium 0 $spacing-large);\n\n // The list of tabs\n &__list {\n list-style: none;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: relative;\n top: 1px; // To cover the border around the tabs content\n }\n\n // Individual tab\n &__tab {\n float: left;\n\n &--active .tabs__tab-btn { // sass-lint:disable-line no-combinators\n background: $colour-panel-default;\n border-top: 1px solid $colour-border;\n border-left: 1px solid $colour-border;\n border-right: 1px solid $colour-border;\n box-shadow: inset 0px em($spacing-x-small) 0px 0px $colour-nice-teal;\n color: $colour-text;\n text-decoration: none;\n }\n }\n\n // The button/link for the tab itself\n &__tab-btn {\n @extend %link;\n background: 0;\n border: 0;\n border-top: 1px solid transparent;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n cursor: pointer;\n display: block;\n margin: 0;\n padding: em($spacing-medium $spacing-medium);\n }\n\n // The tab content containing the tab panels\n &__content {\n background: $colour-panel-default;\n border: 1px solid $colour-border;\n padding: em($spacing-medium);\n }\n\n // An individual tab content pane\n &__pane {\n\n // Assume tabs will stack if no JS is available\n .js & {\n display: none;\n\n &--active {\n display: block;\n }\n }\n\n :first-child {\n margin-top: 0;\n }\n\n :last-child {\n margin-bottom: 0;\n }\n }", + "value": "margin: em($spacing-medium 0 $spacing-large);\n\n // The list of tabs\n &__list {\n list-style: none;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: relative;\n top: 1px; // To cover the border around the tabs content\n }\n\n // Individual tab\n &__tab {\n float: left;\n\n &--active .tabs__tab-btn { // sass-lint:disable-line no-combinators\n background: $colour-panel-default;\n border-left: 1px solid $colour-border;\n border-right: 1px solid $colour-border;\n border-top: 1px solid $colour-border;\n box-shadow: inset 0 em($spacing-x-small) 0 0 $colour-nice-teal;\n color: $colour-text;\n text-decoration: none;\n }\n }\n\n // The button/link for the tab itself\n &__tab-btn {\n @extend %link;\n background: 0;\n border: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-top: 1px solid transparent;\n cursor: pointer;\n display: block;\n margin: 0;\n padding: em($spacing-medium $spacing-medium);\n }\n\n // The tab content containing the tab panels\n &__content {\n background: $colour-panel-default;\n border: 1px solid $colour-border;\n padding: em($spacing-medium);\n }\n\n // An individual tab content pane\n &__pane {\n\n // Assume tabs will stack if no JS is available\n .js & {\n display: none;\n\n &--active {\n display: block;\n }\n }\n\n :first-child {\n margin-top: 0;\n }\n\n :last-child {\n margin-bottom: 0;\n }\n }", "line": { "start": 40, "end": 110 @@ -5691,7 +5706,7 @@ "context": { "type": "placeholder", "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", "line": { "start": 7, "end": 11 @@ -8571,6 +8586,20 @@ "path": "stylesheets\\settings\\_settings-spacing.scss", "name": "_settings-spacing.scss" }, + "usedBy": [ + { + "description": "

List placeholder

\n", + "context": { + "type": "placeholder", + "name": "list", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", + "line": { + "start": 7, + "end": 11 + } + } + } + ], "groupName": { "spacing": "Spacing" }, @@ -8605,20 +8634,6 @@ "path": "stylesheets\\settings\\_settings-spacing.scss", "name": "_settings-spacing.scss" }, - "usedBy": [ - { - "description": "

List placeholder

\n", - "context": { - "type": "placeholder", - "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", - "line": { - "start": 7, - "end": 11 - } - } - } - ], "groupName": { "spacing": "Spacing" }, @@ -8733,10 +8748,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -8748,16 +8763,16 @@ { "description": "

Mark

\n", "commentRange": { - "start": 86, - "end": 86 + "start": 82, + "end": 82 }, "context": { "type": "css", "name": "mark,\n.mark", "value": "background-color: #fff999;\n padding: em(4);", "line": { - "start": 88, - "end": 98 + "start": 84, + "end": 94 } }, "group": [ @@ -8775,16 +8790,16 @@ { "description": "

Small

\n", "commentRange": { - "start": 93, - "end": 93 + "start": 89, + "end": 89 }, "context": { "type": "css", "name": "small,\n.small", "value": "font-size: 85%;", "line": { - "start": 95, - "end": 98 + "start": 91, + "end": 94 } }, "group": [ @@ -9627,10 +9642,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } }, "since": [ @@ -9659,10 +9674,6 @@ "type": "variable", "name": "colour-link-hover" }, - { - "type": "variable", - "name": "colour-focus" - }, { "type": "variable", "name": "colour-link-focus-text" @@ -9683,16 +9694,16 @@ { "description": "

Inverse link style for use on an inverse (dark) background

\n", "commentRange": { - "start": 31, - "end": 32 + "start": 30, + "end": 31 }, "context": { "type": "placeholder", "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } }, "since": [ @@ -9738,8 +9749,8 @@ "name": "inverse-links", "code": "\n a {\n @extend %inverse-link;\n }\n", "line": { - "start": 57, - "end": 61 + "start": 56, + "end": 60 } } } @@ -9751,16 +9762,16 @@ { "description": "

Inverse links for use on a dark background

\n", "commentRange": { - "start": 55, - "end": 56 + "start": 54, + "end": 55 }, "context": { "type": "placeholder", "name": "inverse-links", "code": "\n a {\n @extend %inverse-link;\n }\n", "line": { - "start": 57, - "end": 61 + "start": 56, + "end": 60 } }, "since": [ @@ -9802,8 +9813,8 @@ "name": ".inverse-links", "value": "@extend %inverse-links;", "line": { - "start": 78, - "end": 81 + "start": 77, + "end": 80 } } } @@ -9815,16 +9826,16 @@ { "description": "

Inverse link for use on a dark background. Apply to an individual link.\nPrefer using .inverse-links on the container instead.

\n", "commentRange": { - "start": 67, - "end": 69 + "start": 66, + "end": 68 }, "context": { "type": "css", "name": ".link--inverse", "value": "@extend %inverse-link;", "line": { - "start": 70, - "end": 81 + "start": 69, + "end": 80 } }, "since": [ @@ -9847,16 +9858,16 @@ { "description": "

Inverse links, for use on dark backgrounds e.g dark panels.\nUse this class on a containing element to apply to all links within it.

\n", "commentRange": { - "start": 74, - "end": 77 + "start": 73, + "end": 76 }, "context": { "type": "css", "name": ".inverse-links", "value": "@extend %inverse-links;", "line": { - "start": 78, - "end": 81 + "start": 77, + "end": 80 } }, "require": [ @@ -9892,7 +9903,7 @@ "context": { "type": "placeholder", "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", "line": { "start": 7, "end": 11 @@ -9914,7 +9925,7 @@ }, { "type": "variable", - "name": "spacing-large" + "name": "spacing-medium" } ], "file": { @@ -9934,10 +9945,10 @@ "context": { "type": "css", "name": ".list", - "value": "@extend %list;\n\n // TODO: Do we need featured lists?\n &--featured {\n list-style: none outside;\n\n li,\n .list__item {\n position: relative;\n\n &:before {\n color: $colour-nice-teal;\n content: get-glyph(bullet);\n font-size: 150%;\n left: -1.5rem;\n position: absolute;\n top: 0;\n\n @media print {\n color: $colour-true-black;\n }\n }\n }\n }", + "value": "@extend %list;", "line": { "start": 22, - "end": 68 + "end": 45 } }, "see": [ @@ -9948,8 +9959,8 @@ "name": ".list--unstyled", "value": "list-style: none;\n margin-left: 0;\n padding: 0;", "line": { - "start": 54, - "end": 68 + "start": 31, + "end": 45 } } }, @@ -9960,8 +9971,8 @@ "name": ".list--loose", "value": "li,\n .list__item {\n margin-bottom: rem($spacing-x-small);\n }", "line": { - "start": 62, - "end": 68 + "start": 39, + "end": 45 } } } @@ -9986,16 +9997,16 @@ { "description": "

Unstyled list modifier - remove bullets, padding etc.\nUsed as a modifier for .list.\nOften used for lists of links.

\n", "commentRange": { - "start": 49, - "end": 53 + "start": 26, + "end": 30 }, "context": { "type": "css", "name": ".list--unstyled", "value": "list-style: none;\n margin-left: 0;\n padding: 0;", "line": { - "start": 54, - "end": 68 + "start": 31, + "end": 45 } }, "require": [ @@ -10025,16 +10036,16 @@ { "description": "

Loose list style - with a gap between list items

\n", "commentRange": { - "start": 60, - "end": 61 + "start": 37, + "end": 38 }, "context": { "type": "css", "name": ".list--loose", "value": "li,\n .list__item {\n margin-bottom: rem($spacing-x-small);\n }", "line": { - "start": 62, - "end": 68 + "start": 39, + "end": 45 } }, "since": [ @@ -10218,11 +10229,11 @@ "context": { "type": "variable", "name": "font-sizes", - "value": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 2: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 3: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 4: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 5: (\n fs: 4 * 6,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)", + "value": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Paragraphs\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Lead\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // h6\n 2: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h5\n 3: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h4\n 4: (\n fs: 4 * 6,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h3\n 5: (\n fs: 4 * 7,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h2\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h1\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)", "scope": "private", "line": { "start": 27, - "end": 92 + "end": 100 } }, "since": [ @@ -10279,7 +10290,7 @@ "groupName": { "typography": "Typography" }, - "resolvedValue": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 2: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 3: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 4: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 5: (\n fs: 4 * 6,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)" + "resolvedValue": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Paragraphs\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Lead\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // h6\n 2: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h5\n 3: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h4\n 4: (\n fs: 4 * 6,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h3\n 5: (\n fs: 4 * 7,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h2\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h1\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)" }, { "description": "

Modular scale values

\n", @@ -11186,16 +11197,16 @@ "resolvedValue": "1600px" }, { - "description": "

The default root font size in pixels

\n", + "description": "

The minimum root font size, in pixels

\n", "commentRange": { "start": 73, "end": 74 }, "context": { "type": "variable", - "name": "nice-mobile-root-size", - "value": "16", - "scope": "default", + "name": "nice-root-font-size-min", + "value": "15", + "scope": "private", "line": { "start": 75, "end": 75 @@ -11203,7 +11214,7 @@ }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -11217,61 +11228,27 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "16" + "resolvedValue": "15" }, { - "description": "", + "description": "

The maximum root font size, used from breakpoint $nice-root-font-size-max-breakpoint

\n", "commentRange": { "start": 77, - "end": 77 - }, - "context": { - "type": "variable", - "name": "nice-breakpoint-xs-root-size", - "value": "16", - "scope": "default", - "line": { - "start": 78, - "end": 78 - } - }, - "since": [ - { - "version": "0.2.0" - } - ], - "access": "public", - "group": [ - "undefined" - ], - "file": { - "path": "stylesheets\\settings\\_settings-variables.scss", - "name": "_settings-variables.scss" - }, - "groupName": { - "undefined": "Ungrouped" - }, - "resolvedValue": "16" - }, - { - "description": "", - "commentRange": { - "start": 80, - "end": 80 + "end": 78 }, "context": { "type": "variable", - "name": "nice-breakpoint-sm-root-size", - "value": "16", - "scope": "default", + "name": "nice-root-font-size-max", + "value": "19", + "scope": "private", "line": { - "start": 81, - "end": 81 + "start": 79, + "end": 79 } }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -11285,19 +11262,19 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "16" + "resolvedValue": "19" }, { - "description": "", + "description": "

The breakpoint at which the root font size starts changing from minimum\ntowards maximum.

\n", "commentRange": { - "start": 83, + "start": 81, "end": 83 }, "context": { "type": "variable", - "name": "nice-breakpoint-md-root-size", - "value": "18", - "scope": "default", + "name": "nice-root-font-size-min-breakpoint", + "value": "$nice-breakpoint-md", + "scope": "private", "line": { "start": 84, "end": 84 @@ -11305,7 +11282,7 @@ }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -11319,61 +11296,27 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "18" + "resolvedValue": "900px" }, { - "description": "", + "description": "

The breakpoint at which the root font size stops changing and is at its maximum\ntowards maximum.

\n", "commentRange": { "start": 86, - "end": 86 - }, - "context": { - "type": "variable", - "name": "nice-breakpoint-lg-root-size", - "value": "18", - "scope": "default", - "line": { - "start": 87, - "end": 87 - } - }, - "since": [ - { - "version": "0.2.0" - } - ], - "access": "public", - "group": [ - "undefined" - ], - "file": { - "path": "stylesheets\\settings\\_settings-variables.scss", - "name": "_settings-variables.scss" - }, - "groupName": { - "undefined": "Ungrouped" - }, - "resolvedValue": "18" - }, - { - "description": "", - "commentRange": { - "start": 89, - "end": 89 + "end": 88 }, "context": { "type": "variable", - "name": "nice-breakpoint-xl-root-size", - "value": "18", - "scope": "default", + "name": "nice-root-font-size-max-breakpoint", + "value": "$nice-breakpoint-lg", + "scope": "private", "line": { - "start": 90, - "end": 90 + "start": 89, + "end": 89 } }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -11387,13 +11330,13 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "18" + "resolvedValue": "1200px" }, { "description": "

Whether to output a default set of generic print styles for things\nlike avoiding page breaks after headings etc. If you disabled this,\nbe sure to add your own print styles.

\n", "commentRange": { - "start": 92, - "end": 95 + "start": 91, + "end": 94 }, "context": { "type": "variable", @@ -11401,8 +11344,8 @@ "value": "true", "scope": "default", "line": { - "start": 96, - "end": 96 + "start": 95, + "end": 95 } }, "since": [ @@ -11426,8 +11369,8 @@ { "description": "

Whether to output the classes for the UTF-8 glyphs.

\n", "commentRange": { - "start": 98, - "end": 99 + "start": 97, + "end": 98 }, "context": { "type": "variable", @@ -11435,8 +11378,8 @@ "value": "false", "scope": "default", "line": { - "start": 100, - "end": 100 + "start": 99, + "end": 99 } }, "since": [ @@ -11460,8 +11403,8 @@ { "description": "

Whether the site is responsive. Setting to false will disable\ngeneration of the responsie grid selectors.\nTrue by default.

\n", "commentRange": { - "start": 102, - "end": 105 + "start": 101, + "end": 104 }, "context": { "type": "variable", @@ -11469,8 +11412,8 @@ "value": "true", "scope": "default", "line": { - "start": 106, - "end": 106 + "start": 105, + "end": 105 } }, "since": [ @@ -12299,7 +12242,7 @@ "context": { "type": "variable", "name": "colour-focus", - "value": "#ffd586", + "value": "#0092a6", "scope": "private", "line": { "start": 34, @@ -12331,24 +12274,12 @@ "end": 12 } } - }, - { - "description": "

Default link style for use on a normal (light) background

\n", - "context": { - "type": "placeholder", - "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", - "line": { - "start": 7, - "end": 29 - } - } } ], "groupName": { "colors": "Colours" }, - "resolvedValue": "#ffd586" + "resolvedValue": "#0092a6" }, { "description": "

Icons colour

\n", @@ -12419,10 +12350,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -12467,10 +12398,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -12515,10 +12446,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -12563,10 +12494,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -12611,10 +12542,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -12661,8 +12592,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -12709,8 +12640,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -12757,8 +12688,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -12805,8 +12736,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -12853,8 +12784,8 @@ "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } } } @@ -13969,6 +13900,33 @@ "components": "Components" } }, + { + "description": "

In page nav

\n", + "commentRange": { + "start": 5, + "end": 5 + }, + "context": { + "type": "css", + "name": ".in-page-nav", + "value": "// The 'on this page' title\n &__title {\n @include font-size(h2);\n }\n\n // Lists (both root level and sub level)\n &__list {\n margin-left: em($spacing-medium);\n\n [aria-hidden='true'] {\n display: none;\n }\n }\n\n a {\n &:visited {\n color: $colour-link;\n }\n\n &:focus {\n background: none;\n }\n }\n\n @include mq($from: md) {\n // Docked to the top of the screen\n &--fixed {\n position: fixed;\n top: 0;\n }\n\n &__title {\n @include font-size(h4);\n margin-top: 0;\n }\n\n a {\n &[aria-selected='true'] {\n font-weight: bold;\n }\n }\n }", + "line": { + "start": 6, + "end": 51 + } + }, + "group": [ + "components" + ], + "access": "public", + "file": { + "path": "components\\in-page-nav\\_in-page-nav.scss", + "name": "_in-page-nav.scss" + }, + "groupName": { + "components": "Components" + } + }, { "description": "

A phase banner includes a tag and a label and is designed\nto designate that a service is in alpha or beta.\nUsually contains a .phase-tag.

\n

BEM elements:

\n\n", "commentRange": { @@ -14074,7 +14032,7 @@ "context": { "type": "css", "name": ".tabs", - "value": "margin: em($spacing-medium 0 $spacing-large);\n\n // The list of tabs\n &__list {\n list-style: none;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: relative;\n top: 1px; // To cover the border around the tabs content\n }\n\n // Individual tab\n &__tab {\n float: left;\n\n &--active .tabs__tab-btn { // sass-lint:disable-line no-combinators\n background: $colour-panel-default;\n border-top: 1px solid $colour-border;\n border-left: 1px solid $colour-border;\n border-right: 1px solid $colour-border;\n box-shadow: inset 0px em($spacing-x-small) 0px 0px $colour-nice-teal;\n color: $colour-text;\n text-decoration: none;\n }\n }\n\n // The button/link for the tab itself\n &__tab-btn {\n @extend %link;\n background: 0;\n border: 0;\n border-top: 1px solid transparent;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n cursor: pointer;\n display: block;\n margin: 0;\n padding: em($spacing-medium $spacing-medium);\n }\n\n // The tab content containing the tab panels\n &__content {\n background: $colour-panel-default;\n border: 1px solid $colour-border;\n padding: em($spacing-medium);\n }\n\n // An individual tab content pane\n &__pane {\n\n // Assume tabs will stack if no JS is available\n .js & {\n display: none;\n\n &--active {\n display: block;\n }\n }\n\n :first-child {\n margin-top: 0;\n }\n\n :last-child {\n margin-bottom: 0;\n }\n }", + "value": "margin: em($spacing-medium 0 $spacing-large);\n\n // The list of tabs\n &__list {\n list-style: none;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: relative;\n top: 1px; // To cover the border around the tabs content\n }\n\n // Individual tab\n &__tab {\n float: left;\n\n &--active .tabs__tab-btn { // sass-lint:disable-line no-combinators\n background: $colour-panel-default;\n border-left: 1px solid $colour-border;\n border-right: 1px solid $colour-border;\n border-top: 1px solid $colour-border;\n box-shadow: inset 0 em($spacing-x-small) 0 0 $colour-nice-teal;\n color: $colour-text;\n text-decoration: none;\n }\n }\n\n // The button/link for the tab itself\n &__tab-btn {\n @extend %link;\n background: 0;\n border: 0;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n border-top: 1px solid transparent;\n cursor: pointer;\n display: block;\n margin: 0;\n padding: em($spacing-medium $spacing-medium);\n }\n\n // The tab content containing the tab panels\n &__content {\n background: $colour-panel-default;\n border: 1px solid $colour-border;\n padding: em($spacing-medium);\n }\n\n // An individual tab content pane\n &__pane {\n\n // Assume tabs will stack if no JS is available\n .js & {\n display: none;\n\n &--active {\n display: block;\n }\n }\n\n :first-child {\n margin-top: 0;\n }\n\n :last-child {\n margin-bottom: 0;\n }\n }", "line": { "start": 40, "end": 110 @@ -17447,7 +17405,7 @@ "context": { "type": "placeholder", "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", "line": { "start": 7, "end": 11 @@ -20057,6 +20015,20 @@ "path": "stylesheets\\settings\\_settings-spacing.scss", "name": "_settings-spacing.scss" }, + "usedBy": [ + { + "description": "

List placeholder

\n", + "context": { + "type": "placeholder", + "name": "list", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", + "line": { + "start": 7, + "end": 11 + } + } + } + ], "groupName": { "spacing": "Spacing" }, @@ -20091,20 +20063,6 @@ "path": "stylesheets\\settings\\_settings-spacing.scss", "name": "_settings-spacing.scss" }, - "usedBy": [ - { - "description": "

List placeholder

\n", - "context": { - "type": "placeholder", - "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", - "line": { - "start": 7, - "end": 11 - } - } - } - ], "groupName": { "spacing": "Spacing" }, @@ -20223,10 +20181,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } } } @@ -20742,16 +20700,16 @@ { "description": "

Mark

\n", "commentRange": { - "start": 86, - "end": 86 + "start": 82, + "end": 82 }, "context": { "type": "css", "name": "mark,\n.mark", "value": "background-color: #fff999;\n padding: em(4);", "line": { - "start": 88, - "end": 98 + "start": 84, + "end": 94 } }, "group": [ @@ -20769,16 +20727,16 @@ { "description": "

Small

\n", "commentRange": { - "start": 93, - "end": 93 + "start": 89, + "end": 89 }, "context": { "type": "css", "name": "small,\n.small", "value": "font-size: 85%;", "line": { - "start": 95, - "end": 98 + "start": 91, + "end": 94 } }, "group": [ @@ -20823,16 +20781,16 @@ { "description": "

Inverse link for use on a dark background. Apply to an individual link.\nPrefer using .inverse-links on the container instead.

\n", "commentRange": { - "start": 67, - "end": 69 + "start": 66, + "end": 68 }, "context": { "type": "css", "name": ".link--inverse", "value": "@extend %inverse-link;", "line": { - "start": 70, - "end": 81 + "start": 69, + "end": 80 } }, "since": [ @@ -20855,16 +20813,16 @@ { "description": "

Inverse links, for use on dark backgrounds e.g dark panels.\nUse this class on a containing element to apply to all links within it.

\n", "commentRange": { - "start": 74, - "end": 77 + "start": 73, + "end": 76 }, "context": { "type": "css", "name": ".inverse-links", "value": "@extend %inverse-links;", "line": { - "start": 78, - "end": 81 + "start": 77, + "end": 80 } }, "require": [ @@ -20900,10 +20858,10 @@ "context": { "type": "css", "name": ".list", - "value": "@extend %list;\n\n // TODO: Do we need featured lists?\n &--featured {\n list-style: none outside;\n\n li,\n .list__item {\n position: relative;\n\n &:before {\n color: $colour-nice-teal;\n content: get-glyph(bullet);\n font-size: 150%;\n left: -1.5rem;\n position: absolute;\n top: 0;\n\n @media print {\n color: $colour-true-black;\n }\n }\n }\n }", + "value": "@extend %list;", "line": { "start": 22, - "end": 68 + "end": 45 } }, "see": [ @@ -20914,8 +20872,8 @@ "name": ".list--unstyled", "value": "list-style: none;\n margin-left: 0;\n padding: 0;", "line": { - "start": 54, - "end": 68 + "start": 31, + "end": 45 } } }, @@ -20926,8 +20884,8 @@ "name": ".list--loose", "value": "li,\n .list__item {\n margin-bottom: rem($spacing-x-small);\n }", "line": { - "start": 62, - "end": 68 + "start": 39, + "end": 45 } } } @@ -20952,16 +20910,16 @@ { "description": "

Unstyled list modifier - remove bullets, padding etc.\nUsed as a modifier for .list.\nOften used for lists of links.

\n", "commentRange": { - "start": 49, - "end": 53 + "start": 26, + "end": 30 }, "context": { "type": "css", "name": ".list--unstyled", "value": "list-style: none;\n margin-left: 0;\n padding: 0;", "line": { - "start": 54, - "end": 68 + "start": 31, + "end": 45 } }, "require": [ @@ -20991,16 +20949,16 @@ { "description": "

Loose list style - with a gap between list items

\n", "commentRange": { - "start": 60, - "end": 61 + "start": 37, + "end": 38 }, "context": { "type": "css", "name": ".list--loose", "value": "li,\n .list__item {\n margin-bottom: rem($spacing-x-small);\n }", "line": { - "start": 62, - "end": 68 + "start": 39, + "end": 45 } }, "since": [ @@ -21355,10 +21313,10 @@ "context": { "type": "placeholder", "name": "link", - "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n background-color: $colour-focus;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", + "code": "\n color: $colour-link;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-visited;\n }\n\n &:hover {\n color: $colour-link-hover;\n }\n\n &:focus {\n @include default-focus-style;\n color: $colour-link-focus-text;\n }\n\n &:active {\n color: $colour-link-active;\n }\n", "line": { "start": 7, - "end": 29 + "end": 28 } }, "since": [ @@ -21387,10 +21345,6 @@ "type": "variable", "name": "colour-link-hover" }, - { - "type": "variable", - "name": "colour-focus" - }, { "type": "variable", "name": "colour-link-focus-text" @@ -21411,16 +21365,16 @@ { "description": "

Inverse link style for use on an inverse (dark) background

\n", "commentRange": { - "start": 31, - "end": 32 + "start": 30, + "end": 31 }, "context": { "type": "placeholder", "name": "inverse-link", "code": "\n color: $colour-link-inverse;\n text-decoration: underline;\n text-decoration-skip: ink;\n\n &:visited {\n color: $colour-link-inverse-visited;\n }\n\n &:hover {\n color: $colour-link-inverse-hover;\n }\n\n &:focus {\n color: $colour-link-inverse-focus-text;\n }\n\n &:active {\n color: $colour-link-inverse-active;\n }\n", "line": { - "start": 33, - "end": 53 + "start": 32, + "end": 52 } }, "since": [ @@ -21466,8 +21420,8 @@ "name": "inverse-links", "code": "\n a {\n @extend %inverse-link;\n }\n", "line": { - "start": 57, - "end": 61 + "start": 56, + "end": 60 } } } @@ -21479,16 +21433,16 @@ { "description": "

Inverse links for use on a dark background

\n", "commentRange": { - "start": 55, - "end": 56 + "start": 54, + "end": 55 }, "context": { "type": "placeholder", "name": "inverse-links", "code": "\n a {\n @extend %inverse-link;\n }\n", "line": { - "start": 57, - "end": 61 + "start": 56, + "end": 60 } }, "since": [ @@ -21530,8 +21484,8 @@ "name": ".inverse-links", "value": "@extend %inverse-links;", "line": { - "start": 78, - "end": 81 + "start": 77, + "end": 80 } } } @@ -21549,7 +21503,7 @@ "context": { "type": "placeholder", "name": "list", - "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-large);\n padding: 0;\n", + "code": "\n font-feature-settings: 'kern', 'onum', 'liga';\n margin-left: rem($spacing-medium);\n padding: 0;\n", "line": { "start": 7, "end": 11 @@ -21571,7 +21525,7 @@ }, { "type": "variable", - "name": "spacing-large" + "name": "spacing-medium" } ], "file": { @@ -21716,11 +21670,11 @@ "context": { "type": "variable", "name": "font-sizes", - "value": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 2: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 3: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 4: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 5: (\n fs: 4 * 6,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)", + "value": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Paragraphs\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Lead\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // h6\n 2: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h5\n 3: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h4\n 4: (\n fs: 4 * 6,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h3\n 5: (\n fs: 4 * 7,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h2\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h1\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)", "scope": "private", "line": { "start": 27, - "end": 92 + "end": 100 } }, "since": [ @@ -21777,7 +21731,7 @@ "groupName": { "typography": "Typography" }, - "resolvedValue": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n 2: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 3: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 4: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 5: (\n fs: 4 * 6,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)" + "resolvedValue": "(\n // sass-lint:disable-block space-around-operator\n -1: (\n fs: 14,\n lh: 4 * 5,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Paragraphs\n 0: (\n fs: 4 * 4,\n lh: 4 * 6,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // Lead\n 1: (\n fs: 4 * 5,\n lh: 4 * 7,\n fw: 400,\n mb: $spacing-medium,\n mt: $spacing-medium\n ),\n // h6\n 2: (\n fs: 4 * 4,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h5\n 3: (\n fs: 4 * 5,\n lh: 4 * 5,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h4\n 4: (\n fs: 4 * 6,\n lh: 4 * 7,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h3\n 5: (\n fs: 4 * 7,\n lh: 4 * 8,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h2\n 6: (\n fs: 4 * 9,\n lh: 4 * 11,\n fw: 700,\n mb: $spacing-medium,\n mt: $spacing-large\n ),\n // h1\n 7: (\n fs: 4 * 11,\n lh: 4 * 12,\n fw: 900,\n mb: $spacing-medium,\n mt: 0,\n )\n)" } ] }, @@ -22629,16 +22583,16 @@ "resolvedValue": "1600px" }, { - "description": "

The default root font size in pixels

\n", + "description": "

The minimum root font size, in pixels

\n", "commentRange": { "start": 73, "end": 74 }, "context": { "type": "variable", - "name": "nice-mobile-root-size", - "value": "16", - "scope": "default", + "name": "nice-root-font-size-min", + "value": "15", + "scope": "private", "line": { "start": 75, "end": 75 @@ -22646,7 +22600,7 @@ }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -22660,61 +22614,27 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "16" + "resolvedValue": "15" }, { - "description": "", + "description": "

The maximum root font size, used from breakpoint $nice-root-font-size-max-breakpoint

\n", "commentRange": { "start": 77, - "end": 77 - }, - "context": { - "type": "variable", - "name": "nice-breakpoint-xs-root-size", - "value": "16", - "scope": "default", - "line": { - "start": 78, - "end": 78 - } - }, - "since": [ - { - "version": "0.2.0" - } - ], - "access": "public", - "group": [ - "undefined" - ], - "file": { - "path": "stylesheets\\settings\\_settings-variables.scss", - "name": "_settings-variables.scss" - }, - "groupName": { - "undefined": "Ungrouped" - }, - "resolvedValue": "16" - }, - { - "description": "", - "commentRange": { - "start": 80, - "end": 80 + "end": 78 }, "context": { "type": "variable", - "name": "nice-breakpoint-sm-root-size", - "value": "16", - "scope": "default", + "name": "nice-root-font-size-max", + "value": "19", + "scope": "private", "line": { - "start": 81, - "end": 81 + "start": 79, + "end": 79 } }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -22728,19 +22648,19 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "16" + "resolvedValue": "19" }, { - "description": "", + "description": "

The breakpoint at which the root font size starts changing from minimum\ntowards maximum.

\n", "commentRange": { - "start": 83, + "start": 81, "end": 83 }, "context": { "type": "variable", - "name": "nice-breakpoint-md-root-size", - "value": "18", - "scope": "default", + "name": "nice-root-font-size-min-breakpoint", + "value": "$nice-breakpoint-md", + "scope": "private", "line": { "start": 84, "end": 84 @@ -22748,7 +22668,7 @@ }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -22762,61 +22682,27 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "18" + "resolvedValue": "900px" }, { - "description": "", + "description": "

The breakpoint at which the root font size stops changing and is at its maximum\ntowards maximum.

\n", "commentRange": { "start": 86, - "end": 86 - }, - "context": { - "type": "variable", - "name": "nice-breakpoint-lg-root-size", - "value": "18", - "scope": "default", - "line": { - "start": 87, - "end": 87 - } - }, - "since": [ - { - "version": "0.2.0" - } - ], - "access": "public", - "group": [ - "undefined" - ], - "file": { - "path": "stylesheets\\settings\\_settings-variables.scss", - "name": "_settings-variables.scss" - }, - "groupName": { - "undefined": "Ungrouped" - }, - "resolvedValue": "18" - }, - { - "description": "", - "commentRange": { - "start": 89, - "end": 89 + "end": 88 }, "context": { "type": "variable", - "name": "nice-breakpoint-xl-root-size", - "value": "18", - "scope": "default", + "name": "nice-root-font-size-max-breakpoint", + "value": "$nice-breakpoint-lg", + "scope": "private", "line": { - "start": 90, - "end": 90 + "start": 89, + "end": 89 } }, "since": [ { - "version": "0.2.0" + "version": "0.2.13" } ], "access": "public", @@ -22830,13 +22716,13 @@ "groupName": { "undefined": "Ungrouped" }, - "resolvedValue": "18" + "resolvedValue": "1200px" }, { "description": "

Whether to output a default set of generic print styles for things\nlike avoiding page breaks after headings etc. If you disabled this,\nbe sure to add your own print styles.

\n", "commentRange": { - "start": 92, - "end": 95 + "start": 91, + "end": 94 }, "context": { "type": "variable", @@ -22844,8 +22730,8 @@ "value": "true", "scope": "default", "line": { - "start": 96, - "end": 96 + "start": 95, + "end": 95 } }, "since": [ @@ -22869,8 +22755,8 @@ { "description": "

Whether to output the classes for the UTF-8 glyphs.

\n", "commentRange": { - "start": 98, - "end": 99 + "start": 97, + "end": 98 }, "context": { "type": "variable", @@ -22878,8 +22764,8 @@ "value": "false", "scope": "default", "line": { - "start": 100, - "end": 100 + "start": 99, + "end": 99 } }, "since": [ @@ -22903,8 +22789,8 @@ { "description": "

Whether the site is responsive. Setting to false will disable\ngeneration of the responsie grid selectors.\nTrue by default.

\n", "commentRange": { - "start": 102, - "end": 105 + "start": 101, + "end": 104 }, "context": { "type": "variable", @@ -22912,8 +22798,8 @@ "value": "true", "scope": "default", "line": { - "start": 106, - "end": 106 + "start": 105, + "end": 105 } }, "since": [ diff --git a/dist/fonts/nice-icons.eot b/dist/fonts/nice-icons.eot index 07e62b9d7..d5a64f4ce 100644 Binary files a/dist/fonts/nice-icons.eot and b/dist/fonts/nice-icons.eot differ diff --git a/dist/fonts/nice-icons.ttf b/dist/fonts/nice-icons.ttf index 0c1aea4f7..fcc13cf2a 100644 Binary files a/dist/fonts/nice-icons.ttf and b/dist/fonts/nice-icons.ttf differ diff --git a/dist/fonts/nice-icons.woff b/dist/fonts/nice-icons.woff index 87f7d447a..d57624c15 100644 Binary files a/dist/fonts/nice-icons.woff and b/dist/fonts/nice-icons.woff differ diff --git a/dist/fonts/nice-icons.woff2 b/dist/fonts/nice-icons.woff2 index b3d74cc70..e797287ed 100644 Binary files a/dist/fonts/nice-icons.woff2 and b/dist/fonts/nice-icons.woff2 differ diff --git a/dist/javascripts/experience.dev.js b/dist/javascripts/experience.dev.js index 8619f59eb..50b7c95ab 100644 --- a/dist/javascripts/experience.dev.js +++ b/dist/javascripts/experience.dev.js @@ -1,5 +1,5 @@ /*! -NICE Experience 0.2.12 | 2017-05-12 +NICE Experience 0.2.13 | 2017-05-26 © Copyright NICE 2015-2017 Licensed under MIT (https://github.com/nhsevidence/nice-experience/blob/master/LICENSE) */ @@ -72,7 +72,7 @@ return /******/ (function(modules) { // webpackBootstrap Object.defineProperty(exports, "__esModule", { value: true }); - exports.eventr = exports.pluginizr = exports.pluginAutoLoader = exports.Tracker = exports.Tabs = exports.default = undefined; + exports.utils = exports.breakpoints = exports.eventr = exports.pluginizr = exports.pluginAutoLoader = exports.Tracker = exports.Tabs = exports.InPageNav = exports['default'] = undefined; var _pluginAutoloader = __webpack_require__(2); @@ -82,7 +82,11 @@ return /******/ (function(modules) { // webpackBootstrap var _tabs2 = _interopRequireDefault(_tabs); - var _tracker = __webpack_require__(7); + var _inPageNav = __webpack_require__(7); + + var _inPageNav2 = _interopRequireDefault(_inPageNav); + + var _tracker = __webpack_require__(13); var _tracker2 = _interopRequireDefault(_tracker); @@ -94,25 +98,36 @@ return /******/ (function(modules) { // webpackBootstrap var _eventr2 = _interopRequireDefault(_eventr); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var _breakpoints = __webpack_require__(9); + + var _breakpoints2 = _interopRequireDefault(_breakpoints); + + var _utils = __webpack_require__(8); + + var _utils2 = _interopRequireDefault(_utils); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var experience = { init: function init(el) { // Load all component modules from this directory automatically, see http://stackoverflow.com/a/31770875/486434 // But exclude test files http://stackoverflow.com/a/30372240 - _pluginAutoloader2.default.load(__webpack_require__(8)); - _pluginAutoloader2.default.load(__webpack_require__(9)); + _pluginAutoloader2['default'].load(__webpack_require__(14)); + _pluginAutoloader2['default'].load(__webpack_require__(15)); - _pluginAutoloader2.default.findPlugins(el); + _pluginAutoloader2['default'].findPlugins(el); }, // Components - Tabs: _tabs2.default, - Tracker: _tracker2.default, + InPageNav: _inPageNav2['default'], + Tabs: _tabs2['default'], + Tracker: _tracker2['default'], // Utils - pluginAutoLoader: _pluginAutoloader2.default, - pluginizr: _pluginizr2.default, - eventr: _eventr2.default + pluginAutoLoader: _pluginAutoloader2['default'], + pluginizr: _pluginizr2['default'], + eventr: _eventr2['default'], + breakpoints: _breakpoints2['default'], + utils: _utils2['default'] }; $.fn.experience = function () { @@ -123,12 +138,15 @@ return /******/ (function(modules) { // webpackBootstrap window.NICE = window.NICE || {}; window.NICE.experience = experience; - exports.default = experience; - exports.Tabs = _tabs2.default; - exports.Tracker = _tracker2.default; - exports.pluginAutoLoader = _pluginAutoloader2.default; - exports.pluginizr = _pluginizr2.default; - exports.eventr = _eventr2.default; + exports['default'] = experience; + exports.InPageNav = _inPageNav2['default']; + exports.Tabs = _tabs2['default']; + exports.Tracker = _tracker2['default']; + exports.pluginAutoLoader = _pluginAutoloader2['default']; + exports.pluginizr = _pluginizr2['default']; + exports.eventr = _eventr2['default']; + exports.breakpoints = _breakpoints2['default']; + exports.utils = _utils2['default']; /***/ }, /* 2 */ @@ -205,7 +223,7 @@ return /******/ (function(modules) { // webpackBootstrap /// Auto plugin loader. /// Useful for JIT loading of plugins - exports.default = { + exports['default'] = { load: load, findPlugins: findPlugins }; @@ -261,7 +279,7 @@ return /******/ (function(modules) { // webpackBootstrap * var value = $(".selector").test("getValue"); */ - exports.default = function (pluginName, Plugin) { + exports['default'] = function (pluginName, Plugin) { plugins.push({ name: pluginName, pluginClass: Plugin }); // Store this registered plugin @@ -367,7 +385,7 @@ return /******/ (function(modules) { // webpackBootstrap var _eventr2 = _interopRequireDefault(_eventr); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } @@ -554,7 +572,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: "_handleTabBtnKeydown", value: function _handleTabBtnKeydown(e) { - switch ((0, _keycode2.default)(e.which)) { + switch ((0, _keycode2['default'])(e.which)) { // Go backwards one tab case "left": case "up": @@ -602,7 +620,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: "_handlePaneKeydown", value: function _handlePaneKeydown(e) { - if ($.inArray((0, _keycode2.default)(e.which), ["up", "left"]) > -1 && e.ctrlKey) { + if ($.inArray((0, _keycode2['default'])(e.which), ["up", "left"]) > -1 && e.ctrlKey) { e.preventDefault(); e.stopPropagation(); @@ -615,11 +633,11 @@ return /******/ (function(modules) { // webpackBootstrap return Tabs; }(); - exports.default = Tabs; + exports['default'] = Tabs; - (0, _eventr2.default)(Tabs); - (0, _pluginizr2.default)("tabs", Tabs); + (0, _eventr2['default'])(Tabs); + (0, _pluginizr2['default'])("tabs", Tabs); /***/ }, /* 5 */ @@ -924,7 +942,7 @@ return /******/ (function(modules) { // webpackBootstrap mixin.delegate = delegate; mixin.undelegate = undelegate; - exports.default = mixin; + exports['default'] = mixin; /***/ }, /* 7 */ @@ -932,6 +950,3613 @@ return /******/ (function(modules) { // webpackBootstrap "use strict"; + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.Defaults = undefined; + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + var _pluginizr = __webpack_require__(3); + + var _pluginizr2 = _interopRequireDefault(_pluginizr); + + var _utils = __webpack_require__(8); + + var _utils2 = _interopRequireDefault(_utils); + + var _breakpoints = __webpack_require__(9); + + var _inPageNavTemplate = __webpack_require__(10); + + var _inPageNavTemplate2 = _interopRequireDefault(_inPageNavTemplate); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + /** + * { The default settings for in page nav } + * + * @type {Object} + */ + var Defaults = exports.Defaults = { + + // Selector for the container to look for headings from which the nav tree is built + headingsContainer: "body", + + // Selector for headings to include + headings: "h2,h3", + + // Selector for excluding headings + headingsExclude: "[data-no-inpagenav] *, [data-no-inpagenav]", + + // Number of pixels from the top of the screen that a heading is considered to be 'active' + scrollTolerance: 80, + + // The target element that the in page nav will be moved to on wider breakpoints + wideTarget: null, + + // The breakpoint from which the nav will be moved into 'wideTarget' + wideBreakpoint: "md" + }; + + /// Creates a nested, in page navigation, built from existing headings on the page. + /// @see {@link http://stackoverflow.com/a/12279190/486434|Useful answer on StackOverflow} + /// @example Simplest example + ///
+ /// @example Example with all options + /// + /// @example Raw JS usage + /// let inPageNav = new InPageNav($nav); + /// @example jQuery plugin usage + /// $(document).ready(function() { + /// $nav.inpagenav(); + /// }); + + var InPageNav = function () { + _createClass(InPageNav, null, [{ + key: "defaults", + value: function defaults() { + return Defaults; + } + }]); + + function InPageNav(element, options) { + var _this = this; + + _classCallCheck(this, InPageNav); + + if (!element) throw new Error("Element must be non-null"); + + this.el = element; + this.$el = $(element); + + // Generate uid for this component, used for namespacing events + this.uid = _utils2['default'].nextUniqueId("inpagenav"); + + this.options = $.extend({}, InPageNav.defaults(), options); + + // The containing element where the nav will be moved to on wider breakpoints + this.$wideTarget = $("#" + this.options.wideTarget); + + // Find headings to use for building the nav + this.headings = this.getHeadings(); + + this.render(); + this.updateNavState(); + + $(window).on("load.InPageNav." + this.uid, function () { + _this.updateNavState(); + }).on("scroll.InPageNav." + this.uid, function () { + _this.updateNavState(true); + }).on("resize.InPageNav." + this.uid, function () { + _this.calculatePosition(); + }); + } + + _createClass(InPageNav, [{ + key: "destroy", + value: function destroy() { + $(window).off("." + this.uid); + this.$el.remove(); + } + + // Builds a navigation object tree and renderes it into the element + // via the pre-compiled template + + }, { + key: "render", + value: function render() { + var _this2 = this; + + // Recursively builds a nested tree of links + var buildTree = function buildTree(headings) { + var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + var arr = []; + for (var i = 0; i < headings.length; i++) { + var hdng = headings[i]; + + // Headings needs an id for the # href to work + _this2.generateHeadingId(hdng); + + // TODO: Replace magic number '2' with min from list of headings + var index = parseInt(hdng.tagName.substring(1)) - 2; + + if (index === level) { + arr.push({ + title: $(hdng).text(), + href: "#" + hdng.id, + links: buildTree(headings.slice(i + 1), level + 1) + }); + } else if (level > 0) { + return arr; + } + } + return arr; + }; + + // Render the nested tree with our pre-compiled template + var tree = buildTree(this.headings); + this.$el.html(_inPageNavTemplate2['default'].render({ links: tree })); + + this.$inpagenav = this.$el.find(".in-page-nav"); + } + + /** + * Resets classes and aria attributes + */ + + }, { + key: "resetNavState", + value: function resetNavState() { + $("a", this.$inpagenav).attr("aria-selected", false); + + this.$inpagenav.removeAttr("aria-activedescendant"); + + // TODO: This should be a media query with em values + // Nav is fully expanded on smaller breakpoints + // and expands as you scroll on wider breakpoints + if ((0, _breakpoints.matchesFrom)(this.options.wideBreakpoint)) { + $(".in-page-nav__list .in-page-nav__list", this.$inpagenav).attr("aria-expanded", false).attr("aria-hidden", true); + } else { + $(".in-page-nav__list .in-page-nav__list", this.$inpagenav).attr("aria-expanded", true).attr("aria-hidden", false); + } + } + + // Determins which navigation elements are active + + }, { + key: "updateNavState", + value: function updateNavState() { + var updateHash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + + this.resetNavState(); + + var activeHeading = this.getActiveHeading(); + + if (!activeHeading) return; + + var activeHref = "#" + activeHeading.id, + $activeLink = $("a[href='" + activeHref + "']", this.$inpagenav); + + if (updateHash && history.replaceState) { + history.replaceState(undefined, undefined, activeHref); + } + + // Set aria-activedescendant on parent element + this.$inpagenav.attr("aria-activedescendant", $activeLink.attr("id")); + + $activeLink.attr("aria-selected", true); + + // aria-expanded="true/false" for second-level