{"action":"created","comment":{"url":"https://api.github.com/repos/18F/web-design-standards/pulls/comments/152387221","pull_request_review_id":78241955,"id":152387221,"diff_hunk":"@@ -143,6 +143,7 @@ $box-shadow:              0 0 2px $color-shadow !default;\n $focus-outline:           2px dotted $color-gray-light;\n $focus-spacing:           3px;\n $nav-width:               951px !default;\n+$current-highlight-border-width: 0.4rem !default; // must be in rem for math","path":"src/stylesheets/core/_variables.scss","position":4,"original_position":4,"commit_id":"b3b79fd5416048a7a9f3d99f49c745b5adb31271","original_commit_id":"b3b79fd5416048a7a9f3d99f49c745b5adb31271","user":{"login":"maya","id":5249443,"avatar_url":"https://avatars2.githubusercontent.com/u/5249443?v=4","gravatar_id":"","url":"https://api.github.com/users/maya","html_url":"https://github.com/maya","followers_url":"https://api.github.com/users/maya/followers","following_url":"https://api.github.com/users/maya/following{/other_user}","gists_url":"https://api.github.com/users/maya/gists{/gist_id}","starred_url":"https://api.github.com/users/maya/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maya/subscriptions","organizations_url":"https://api.github.com/users/maya/orgs","repos_url":"https://api.github.com/users/maya/repos","events_url":"https://api.github.com/users/maya/events{/privacy}","received_events_url":"https://api.github.com/users/maya/received_events","type":"User","site_admin":false},"body":"@thisisdano for this new variable, a few things....\r\n- Each variable section's values should align, here it extends past the other values.\r\n- Is the variable applicable to more things besides the sidenav? \r\n- Would it work to call it `$current-border-width` or do we need `highlight`?\r\n- I think we can remove the comment \"// must be in rem for math\" bc many other variables are in rem and we don't state this","created_at":"2017-11-21T20:05:59Z","updated_at":"2017-11-21T20:05:59Z","html_url":"https://github.com/18F/web-design-standards/pull/2202#discussion_r152387221","pull_request_url":"https://api.github.com/repos/18F/web-design-standards/pulls/2202","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/comments/152387221"},"html":{"href":"https://github.com/18F/web-design-standards/pull/2202#discussion_r152387221"},"pull_request":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/2202"}}},"pull_request":{"url":"https://api.github.com/repos/18F/web-design-standards/pulls/2202","id":149635421,"html_url":"https://github.com/18F/web-design-standards/pull/2202","diff_url":"https://github.com/18F/web-design-standards/pull/2202.diff","patch_url":"https://github.com/18F/web-design-standards/pull/2202.patch","issue_url":"https://api.github.com/repos/18F/web-design-standards/issues/2202","number":2202,"state":"open","locked":false,"title":"Add vertical space around sidenav at small widths","user":{"login":"thisisdano","id":11464021,"avatar_url":"https://avatars2.githubusercontent.com/u/11464021?v=4","gravatar_id":"","url":"https://api.github.com/users/thisisdano","html_url":"https://github.com/thisisdano","followers_url":"https://api.github.com/users/thisisdano/followers","following_url":"https://api.github.com/users/thisisdano/following{/other_user}","gists_url":"https://api.github.com/users/thisisdano/gists{/gist_id}","starred_url":"https://api.github.com/users/thisisdano/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thisisdano/subscriptions","organizations_url":"https://api.github.com/users/thisisdano/orgs","repos_url":"https://api.github.com/users/thisisdano/repos","events_url":"https://api.github.com/users/thisisdano/events{/privacy}","received_events_url":"https://api.github.com/users/thisisdano/received_events","type":"User","site_admin":false},"body":"👀 Preview: [link](https://federalist-proxy.app.cloud.gov/preview/18f/web-design-standards/dw-sidenav-separation/components/preview/layout--docs.html)\r\n\r\nI wanted to add separation around the sidenav at small widths, but it's tricky because our grid imposes a margin of `0` on the first-child. I didn't want to get into fixing the grid, but I did want to make the sidenav work, so I \r\n- used padding instead of margin to add 24px at the top\r\n- added a rule on the top and bottom to differentiate from the page content\r\n- used negative margin to push the sidenav out to the viewport margin at narrow widths\r\n- adjusted the sidenav `li` padding to align `li`s to the page margin. (page margin is 15px and the li padding was 18px, and it was just close enough to be annoying).\r\n\r\n<img width=\"566\" alt=\"screen shot 2017-10-30 at 1 51 02 pm\" src=\"https://user-images.githubusercontent.com/11464021/32195036-5b57d962-bd79-11e7-923b-fc023dbfff43.png\">\r\n\r\n- - -\r\n\r\nIt still looks kinda stupid at medium width, but that seems to be more a limitation of our grid and its insistence that the `one-quarter` grid appear at 50% at medium width — and I didn't want to add some kind of high-specificity overrides.\r\n\r\n<img width=\"623\" alt=\"screen shot 2017-10-30 at 1 53 17 pm\" src=\"https://user-images.githubusercontent.com/11464021/32195201-ddc83acc-bd79-11e7-8798-2c4e91451382.png\">\r\n\r\n- - -\r\n\r\nEverything should be back to normal at full (amazingly, over 1200px!) width.\r\n\r\n<img width=\"709\" alt=\"screen shot 2017-10-30 at 1 53 00 pm\" src=\"https://user-images.githubusercontent.com/11464021/32195227-f3e983ba-bd79-11e7-994d-3ccf661d88b7.png\">\r\n\r\n","created_at":"2017-10-30T20:56:20Z","updated_at":"2017-11-21T20:05:59Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f19d97d30bd8ea4a524c40b7c7454cc7ae530058","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/18F/web-design-standards/pulls/2202/commits","review_comments_url":"https://api.github.com/repos/18F/web-design-standards/pulls/2202/comments","review_comment_url":"https://api.github.com/repos/18F/web-design-standards/pulls/comments{/number}","comments_url":"https://api.github.com/repos/18F/web-design-standards/issues/2202/comments","statuses_url":"https://api.github.com/repos/18F/web-design-standards/statuses/b3b79fd5416048a7a9f3d99f49c745b5adb31271","head":{"label":"18F:dw-sidenav-separation","ref":"dw-sidenav-separation","sha":"b3b79fd5416048a7a9f3d99f49c745b5adb31271","user":{"login":"18F","id":6233994,"avatar_url":"https://avatars0.githubusercontent.com/u/6233994?v=4","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"repo":{"id":35968578,"name":"web-design-standards","full_name":"18F/web-design-standards","owner":{"login":"18F","id":6233994,"avatar_url":"https://avatars0.githubusercontent.com/u/6233994?v=4","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/18F/web-design-standards","description":"Open source UI components and visual style guide for U.S. government websites.","fork":false,"url":"https://api.github.com/repos/18F/web-design-standards","forks_url":"https://api.github.com/repos/18F/web-design-standards/forks","keys_url":"https://api.github.com/repos/18F/web-design-standards/keys{/key_id}","collaborators_url":"https://api.github.com/repos/18F/web-design-standards/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/18F/web-design-standards/teams","hooks_url":"https://api.github.com/repos/18F/web-design-standards/hooks","issue_events_url":"https://api.github.com/repos/18F/web-design-standards/issues/events{/number}","events_url":"https://api.github.com/repos/18F/web-design-standards/events","assignees_url":"https://api.github.com/repos/18F/web-design-standards/assignees{/user}","branches_url":"https://api.github.com/repos/18F/web-design-standards/branches{/branch}","tags_url":"https://api.github.com/repos/18F/web-design-standards/tags","blobs_url":"https://api.github.com/repos/18F/web-design-standards/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/18F/web-design-standards/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/18F/web-design-standards/git/refs{/sha}","trees_url":"https://api.github.com/repos/18F/web-design-standards/git/trees{/sha}","statuses_url":"https://api.github.com/repos/18F/web-design-standards/statuses/{sha}","languages_url":"https://api.github.com/repos/18F/web-design-standards/languages","stargazers_url":"https://api.github.com/repos/18F/web-design-standards/stargazers","contributors_url":"https://api.github.com/repos/18F/web-design-standards/contributors","subscribers_url":"https://api.github.com/repos/18F/web-design-standards/subscribers","subscription_url":"https://api.github.com/repos/18F/web-design-standards/subscription","commits_url":"https://api.github.com/repos/18F/web-design-standards/commits{/sha}","git_commits_url":"https://api.github.com/repos/18F/web-design-standards/git/commits{/sha}","comments_url":"https://api.github.com/repos/18F/web-design-standards/comments{/number}","issue_comment_url":"https://api.github.com/repos/18F/web-design-standards/issues/comments{/number}","contents_url":"https://api.github.com/repos/18F/web-design-standards/contents/{+path}","compare_url":"https://api.github.com/repos/18F/web-design-standards/compare/{base}...{head}","merges_url":"https://api.github.com/repos/18F/web-design-standards/merges","archive_url":"https://api.github.com/repos/18F/web-design-standards/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/18F/web-design-standards/downloads","issues_url":"https://api.github.com/repos/18F/web-design-standards/issues{/number}","pulls_url":"https://api.github.com/repos/18F/web-design-standards/pulls{/number}","milestones_url":"https://api.github.com/repos/18F/web-design-standards/milestones{/number}","notifications_url":"https://api.github.com/repos/18F/web-design-standards/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/18F/web-design-standards/labels{/name}","releases_url":"https://api.github.com/repos/18F/web-design-standards/releases{/id}","deployments_url":"https://api.github.com/repos/18F/web-design-standards/deployments","created_at":"2015-05-20T19:10:10Z","updated_at":"2017-11-21T17:27:10Z","pushed_at":"2017-11-20T19:59:44Z","git_url":"git://github.com/18F/web-design-standards.git","ssh_url":"git@github.com:18F/web-design-standards.git","clone_url":"https://github.com/18F/web-design-standards.git","svn_url":"https://github.com/18F/web-design-standards","homepage":"https://standards.usa.gov","size":55783,"stargazers_count":4246,"watchers_count":4246,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":588,"mirror_url":null,"archived":false,"open_issues_count":200,"forks":588,"open_issues":200,"watchers":4246,"default_branch":"develop"}},"base":{"label":"18F:develop","ref":"develop","sha":"2225be4de6b4e86023fc6386d9fa0ed71e9ef5f1","user":{"login":"18F","id":6233994,"avatar_url":"https://avatars0.githubusercontent.com/u/6233994?v=4","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"repo":{"id":35968578,"name":"web-design-standards","full_name":"18F/web-design-standards","owner":{"login":"18F","id":6233994,"avatar_url":"https://avatars0.githubusercontent.com/u/6233994?v=4","gravatar_id":"","url":"https://api.github.com/users/18F","html_url":"https://github.com/18F","followers_url":"https://api.github.com/users/18F/followers","following_url":"https://api.github.com/users/18F/following{/other_user}","gists_url":"https://api.github.com/users/18F/gists{/gist_id}","starred_url":"https://api.github.com/users/18F/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/18F/subscriptions","organizations_url":"https://api.github.com/users/18F/orgs","repos_url":"https://api.github.com/users/18F/repos","events_url":"https://api.github.com/users/18F/events{/privacy}","received_events_url":"https://api.github.com/users/18F/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/18F/web-design-standards","description":"Open source UI components and visual style guide for U.S. government websites.","fork":false,"url":"https://api.github.com/repos/18F/web-design-standards","forks_url":"https://api.github.com/repos/18F/web-design-standards/forks","keys_url":"https://api.github.com/repos/18F/web-design-standards/keys{/key_id}","collaborators_url":"https://api.github.com/repos/18F/web-design-standards/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/18F/web-design-standards/teams","hooks_url":"https://api.github.com/repos/18F/web-design-standards/hooks","issue_events_url":"https://api.github.com/repos/18F/web-design-standards/issues/events{/number}","events_url":"https://api.github.com/repos/18F/web-design-standards/events","assignees_url":"https://api.github.com/repos/18F/web-design-standards/assignees{/user}","branches_url":"https://api.github.com/repos/18F/web-design-standards/branches{/branch}","tags_url":"https://api.github.com/repos/18F/web-design-standards/tags","blobs_url":"https://api.github.com/repos/18F/web-design-standards/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/18F/web-design-standards/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/18F/web-design-standards/git/refs{/sha}","trees_url":"https://api.github.com/repos/18F/web-design-standards/git/trees{/sha}","statuses_url":"https://api.github.com/repos/18F/web-design-standards/statuses/{sha}","languages_url":"https://api.github.com/repos/18F/web-design-standards/languages","stargazers_url":"https://api.github.com/repos/18F/web-design-standards/stargazers","contributors_url":"https://api.github.com/repos/18F/web-design-standards/contributors","subscribers_url":"https://api.github.com/repos/18F/web-design-standards/subscribers","subscription_url":"https://api.github.com/repos/18F/web-design-standards/subscription","commits_url":"https://api.github.com/repos/18F/web-design-standards/commits{/sha}","git_commits_url":"https://api.github.com/repos/18F/web-design-standards/git/commits{/sha}","comments_url":"https://api.github.com/repos/18F/web-design-standards/comments{/number}","issue_comment_url":"https://api.github.com/repos/18F/web-design-standards/issues/comments{/number}","contents_url":"https://api.github.com/repos/18F/web-design-standards/contents/{+path}","compare_url":"https://api.github.com/repos/18F/web-design-standards/compare/{base}...{head}","merges_url":"https://api.github.com/repos/18F/web-design-standards/merges","archive_url":"https://api.github.com/repos/18F/web-design-standards/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/18F/web-design-standards/downloads","issues_url":"https://api.github.com/repos/18F/web-design-standards/issues{/number}","pulls_url":"https://api.github.com/repos/18F/web-design-standards/pulls{/number}","milestones_url":"https://api.github.com/repos/18F/web-design-standards/milestones{/number}","notifications_url":"https://api.github.com/repos/18F/web-design-standards/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/18F/web-design-standards/labels{/name}","releases_url":"https://api.github.com/repos/18F/web-design-standards/releases{/id}","deployments_url":"https://api.github.com/repos/18F/web-design-standards/deployments","created_at":"2015-05-20T19:10:10Z","updated_at":"2017-11-21T17:27:10Z","pushed_at":"2017-11-20T19:59:44Z","git_url":"git://github.com/18F/web-design-standards.git","ssh_url":"git@github.com:18F/web-design-standards.git","clone_url":"https://github.com/18F/web-design-standards.git","svn_url":"https://github.com/18F/web-design-standards","homepage":"https://standards.usa.gov","size":55783,"stargazers_count":4246,"watchers_count":4246,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":588,"mirror_url":null,"archived":false,"open_issues_count":200,"forks":588,"open_issues":200,"watchers":4246,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/2202"},"html":{"href":"https://github.com/18F/web-design-standards/pull/2202"},"issue":{"href":"https://api.github.com/repos/18F/web-design-standards/issues/2202"},"comments":{"href":"https://api.github.com/repos/18F/web-design-standards/issues/2202/comments"},"review_comments":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/2202/comments"},"review_comment":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/18F/web-design-standards/pulls/2202/commits"},"statuses":{"href":"https://api.github.com/repos/18F/web-design-standards/statuses/b3b79fd5416048a7a9f3d99f49c745b5adb31271"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"maya"}}