diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md index 090b9e390b..aa92d3a380 100644 --- a/docs/content/components/navigation.md +++ b/docs/content/components/navigation.md @@ -119,7 +119,7 @@ Use `.UnderlineNav-actions` to place another element, such as a button, to the o Item 4
- Button + Button
``` @@ -142,7 +142,7 @@ Use `.UnderlineNav--right` to right align the navigation. ```html live title="UnderlineNav--right with actions" @@ -237,20 +237,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class With an avatar - - + + With an icon @@ -271,7 +259,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class With a label label - With a counter 16 + With a counter 16
With a heading
@@ -299,38 +287,23 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t ```html live -
- -
- +
``` diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md index 26f6f2e983..7f67fa7a43 100644 --- a/docs/content/components/pagination.md +++ b/docs/content/components/pagination.md @@ -15,8 +15,16 @@ You can make a very simple pagination container with just the Previous and Next ```html live ``` @@ -35,7 +43,11 @@ As always, make sure to include the appropriate `aria` attributes to make the el ```html live ``` diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 753d6d84c6..d16add47f7 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -1,8 +1,9 @@ // Counters are rounded-corner badges for numbers .Counter { display: inline-block; - min-width: 24px; // makes sure it's a circle with just one digit - padding: $spacer-1 $spacer-2; + min-width: 20px; // makes sure it's a circle with just one digit + // stylelint-disable-next-line primer/spacing + padding: 2px 6px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography font-weight: 500; @@ -33,11 +34,3 @@ // stylelint-disable-next-line primer/colors background-color: $gray-500; } - -// Small - -.Counter--small { - min-width: 20px; // makes sure it's a circle with just one digit - // stylelint-disable-next-line primer/spacing - padding: 2px 6px; -} diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss index 2d09947211..5888777315 100644 --- a/src/navigation/filter-list.scss +++ b/src/navigation/filter-list.scss @@ -5,9 +5,8 @@ list-style-type: none; &.small .filter-item { - padding: $spacer-1 10px; // stylelint-disable-next-line primer/spacing - margin: 0 0 2px; + padding: 6px 12px; font-size: $font-size-small; } @@ -25,9 +24,8 @@ .filter-item { position: relative; display: block; - padding: $spacer-2 10px; - // stylelint-disable-next-line primer/spacing - margin-bottom: 5px; + padding: $spacer-2 $spacer-3; + margin-bottom: $spacer-1; overflow: hidden; font-size: $h5-size; color: $text-gray; @@ -39,8 +37,7 @@ &:hover { text-decoration: none; - // stylelint-disable-next-line primer/colors - background-color: lighten($gray-200, 3%); + background-color: $bg-gray; } &.selected, diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss index cc7e858f24..3548a193c9 100644 --- a/src/navigation/menu.scss +++ b/src/navigation/menu.scss @@ -3,54 +3,55 @@ // A menu on the side of a page, defaults to left side. e.g. github.com/about .menu { - // stylelint-disable-next-line primer/spacing - margin-bottom: 15px; + margin-bottom: $spacer-3; list-style: none; background-color: $bg-white; - border: $border-width $border-style $border-gray-dark; + border: $border; border-radius: $border-radius; } .menu-item { position: relative; display: block; - padding: $spacer-2 10px; - border-bottom: $border; + // stylelint-disable-next-line primer/spacing + padding: 12px $spacer-3; + color: $text-black; + border-bottom: $border-width $border-style $border-gray-light; &:first-child { border-top: 0; - // stylelint-disable-next-line primer/borders - border-top-left-radius: 2px; - // stylelint-disable-next-line primer/borders - border-top-right-radius: 2px; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; - // stylelint-disable-next-line primer/borders - &::before { border-top-left-radius: 2px; } + &::before { border-top-left-radius: $border-radius; } } &:last-child { border-bottom: 0; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: 2px; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: 2px; + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; - // stylelint-disable-next-line primer/borders - &::before { border-bottom-left-radius: 2px; } + &::before { border-bottom-left-radius: $border-radius; } } + &:focus, &:hover { text-decoration: none; - background-color: $bg-gray; + // stylelint-disable-next-line primer/colors + background-color: $gray-100; + outline: none; + } + + &:active { + background-color: $bg-gray-light; } &.selected, &[aria-selected=true], &[aria-current] { - font-weight: $font-weight-bold; - color: $text-gray-dark; cursor: default; - background-color: $bg-white; + // stylelint-disable-next-line primer/colors + background-color: $orange-000; &::before { position: absolute; @@ -60,22 +61,21 @@ width: 2px; content: ""; // stylelint-disable-next-line primer/colors - background-color: $orange-600; + background-color: $orange-500; } } .octicon { width: 16px; - // stylelint-disable-next-line primer/spacing - margin-right: 5px; - color: $text-gray-dark; + margin-right: $spacer-2; + // stylelint-disable-next-line primer/colors + color: $gray-400; text-align: center; } .Counter { float: right; - // stylelint-disable-next-line primer/spacing - margin-left: 5px; + margin-left: $spacer-1; } .menu-warning { @@ -86,8 +86,7 @@ .avatar { float: left; - // stylelint-disable-next-line primer/spacing - margin-right: 5px; + margin-right: $spacer-1; } &.alert { @@ -99,35 +98,28 @@ .menu-heading { display: block; - padding: $spacer-2 10px; + padding: $spacer-1 $spacer-3; margin-top: 0; margin-bottom: 0; // stylelint-disable-next-line primer/typography - font-size: 13px; - font-weight: $font-weight-bold; + font-weight: 500; // stylelint-disable-next-line primer/typography - line-height: 20px; - color: $text-gray; - // stylelint-disable-next-line primer/colors - background-color: darken($gray-100, 1%); - border-bottom: $border; + line-height: 23px; + color: $text-black; + border-bottom: $border-width $border-style $border-gray-light; &:hover { text-decoration: none; } &:first-child { - // stylelint-disable-next-line primer/borders - border-top-left-radius: 2px; - // stylelint-disable-next-line primer/borders - border-top-right-radius: 2px; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; } &:last-child { border-bottom: 0; - // stylelint-disable-next-line primer/borders - border-bottom-right-radius: 2px; - // stylelint-disable-next-line primer/borders - border-bottom-left-radius: 2px; + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; } } diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss index 35bffdd67f..bdc3b2b193 100644 --- a/src/navigation/sidenav.scss +++ b/src/navigation/sidenav.scss @@ -10,12 +10,13 @@ position: relative; display: block; width: 100%; - padding: $spacer-3; - color: $text-gray; + // stylelint-disable-next-line primer/spacing + padding: 12px $spacer-3; + color: $text-black; text-align: left; background-color: transparent; border: 0; - border-top: $border; + border-top: $border-width $border-style $border-gray-light; &:first-child { border-top: 0; @@ -34,7 +35,7 @@ bottom: 0; left: 0; z-index: 1; - width: 3px; + width: 2px; pointer-events: none; content: ""; } @@ -44,32 +45,24 @@ .SideNav-item:hover, .SideNav-item:focus { - color: $text-gray-dark; text-decoration: none; - background-color: $bg-gray; + // stylelint-disable-next-line primer/colors + background-color: $gray-100; outline: none; - - // Bar on the left - &::before { - // stylelint-disable-next-line primer/colors - background-color: $gray-300; - } } .SideNav-item:active { - background-color: $bg-white; + background-color: $bg-gray-light; } .SideNav-item[aria-current="page"], .SideNav-item[aria-selected="true"] { - font-weight: $font-weight-semibold; - color: $text-gray-dark; background-color: $bg-white; // Bar on the left &::before { // stylelint-disable-next-line primer/colors - background-color: $orange-600; + background-color: $orange-500; } } @@ -79,6 +72,7 @@ .SideNav-icon { width: 16px; + margin-right: $spacer-2; color: $text-gray-light; } diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index f268a89f4b..0fb93856c8 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -21,11 +21,12 @@ position: relative; float: left; // stylelint-disable-next-line primer/spacing - padding: 6px 14px; - font-weight: $font-weight-bold; + padding: 6px $spacer-3; + // stylelint-disable-next-line primer/typography + font-weight: 500; // stylelint-disable-next-line primer/typography line-height: 20px; - color: $text-gray; + color: $text-gray-dark; border: $border; + .subnav-item { @@ -46,7 +47,7 @@ color: $text-white; background-color: $bg-blue; // stylelint-disable-next-line primer/borders - border-color: $blue; + border-color: $blue-600; } &:first-child { @@ -63,13 +64,12 @@ .subnav-search { position: relative; // stylelint-disable-next-line primer/spacing - margin-left: 10px; + margin-left: 12px; } .subnav-search-input { width: 320px; - // stylelint-disable-next-line primer/spacing - padding-left: 30px; + padding-left: $spacer-5; color: $text-gray; } @@ -83,7 +83,7 @@ left: 8px; display: block; // stylelint-disable-next-line primer/colors - color: darken($gray-300, 4%); + color: $gray-400; text-align: center; pointer-events: none; } @@ -128,5 +128,5 @@ .subnav-spacer-right { // stylelint-disable-next-line primer/spacing - padding-right: 10px; + padding-right: 12px; } diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss index fd90406168..6a2a9bf99b 100644 --- a/src/navigation/tabnav.scss +++ b/src/navigation/tabnav.scss @@ -2,14 +2,8 @@ // stylelint-disable selector-max-type .tabnav { margin-top: 0; - // stylelint-disable-next-line primer/spacing - margin-bottom: 15px; - border-bottom: $border-width $border-style $border-gray-dark; - - .Counter { - // stylelint-disable-next-line primer/spacing - margin-left: 5px; - } + margin-bottom: $spacer-3; + border-bottom: $border; } .tabnav-tabs { @@ -19,11 +13,11 @@ .tabnav-tab { display: inline-block; - padding: $spacer-2 12px; + padding: $spacer-2 $spacer-3; font-size: $h5-size; // stylelint-disable-next-line primer/typography - line-height: 20px; - color: $text-gray; + line-height: 23px; + color: $text-gray-dark; text-decoration: none; background-color: transparent; border: $border-width $border-style transparent; @@ -32,17 +26,30 @@ &.selected, &[aria-selected=true], &[aria-current] { - color: $text-gray-dark; background-color: $bg-white; - border-color: $border-gray-dark; + border-color: $border-gray; border-radius: $border-radius $border-radius 0 0; } &:hover, &:focus { - color: $text-gray-dark; + color: $text-gray; text-decoration: none; } + + &:active { + color: $text-gray-light; + } + + .octicon { + margin-right: $spacer-1; + // stylelint-disable-next-line primer/colors + color: $gray-400; + } + + .Counter { + margin-left: $spacer-1; + } } // Tabnav extras @@ -66,12 +73,11 @@ } // When tabnav-extra are anchors -// stylelint-disable selector-no-qualifying-type +// stylelint-disable-next-line selector-no-qualifying-type a.tabnav-extra:hover { color: $text-blue; text-decoration: none; } -// stylelint-enable selector-no-qualifying-type // Tabnav buttons // @@ -79,6 +85,5 @@ a.tabnav-extra:hover { // the buttons to be floated or inline-block. .tabnav-btn { - // stylelint-disable-next-line primer/spacing - margin-left: 10px; + margin-left: $spacer-2; } diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss index 248ed0b9b2..f8f0c97bef 100644 --- a/src/navigation/underline-nav.scss +++ b/src/navigation/underline-nav.scss @@ -2,7 +2,8 @@ display: flex; overflow-x: auto; overflow-y: hidden; - border-bottom: $border; + // stylelint-disable-next-line primer/box-shadow + box-shadow: inset 0 -1px 0 $border-color; justify-content: space-between; } @@ -11,50 +12,36 @@ } .UnderlineNav-item { - padding: $spacer-3 $spacer-2; - margin-right: $spacer-3; + padding: $spacer-2 $spacer-3; font-size: $body-font-size; - line-height: $lh-default; - color: $text-gray; + // stylelint-disable-next-line primer/typography + line-height: 30px; + color: $text-black; text-align: center; + background-color: transparent; border: 0; // stylelint-disable-next-line primer/borders border-bottom: 2px $border-style transparent; + transition: border-bottom-color 0.36s ease-in; &:hover, &:focus { - color: $text-gray-dark; text-decoration: none; border-bottom-color: $border-gray-dark; - transition: 0.2s ease; - - .UnderlineNav-octicon { - color: $text-gray-light; - } + transition: border-bottom-color 0.12s ease-out; } &.selected, &[role=tab][aria-selected=true], &[aria-current] { - font-weight: $font-weight-bold; - color: $text-gray-dark; // stylelint-disable-next-line primer/borders - border-bottom-color: $orange-600; - - .UnderlineNav-octicon { - color: $text-gray-light; - } + border-bottom-color: $orange-500; } } .UnderlineNav--right { justify-content: flex-end; - .UnderlineNav-item { - margin-right: 0; - margin-left: $spacer-3; - } - .UnderlineNav-actions { flex: 1 1 auto; } @@ -69,10 +56,15 @@ } .UnderlineNav-octicon { + margin-right: $spacer-1; // stylelint-disable-next-line primer/colors color: $gray-400; } +.UnderlineNav .Counter { + margin-left: $spacer-1; +} + .UnderlineNav-container { display: flex; justify-content: space-between; diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index 253011d7bb..8d69207040 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -1,61 +1,38 @@ // Needs refactoring // stylelint-disable selector-max-type .pagination { - @include clearfix; - a, span, em { - position: relative; - float: left; - // stylelint-disable-next-line primer/spacing - padding: 7px 12px; - // stylelint-disable-next-line primer/spacing - margin-left: -1px; - // stylelint-disable-next-line primer/typography - font-size: 13px; + display: inline-block; + padding: $spacer-1 12px; font-style: normal; - font-weight: $font-weight-bold; - color: $text-blue; + color: $text-black; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; - background: $bg-white; // Reset default gradient backgrounds and colors - border: $border-width $border-style $border-gray; + // stylelint-disable-next-line primer/borders + border-bottom: 2px $border-style transparent; - &:first-child { - margin-left: 0; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - } - - &:last-child { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; - } - - // Bring any button into forefront for proper borders given negative margin below &:hover, &:focus { - z-index: 2; + color: $text-gray-dark; text-decoration: none; - // stylelint-disable-next-line primer/colors - background-color: darken($gray-100, 2%); - border-color: $border-gray; + outline: 0; } - } - .selected { z-index: 3; } + &:active { + color: $text-gray-light; + } + } .current, .current:hover, [aria-current], [aria-current]:hover { - z-index: 3; - color: $text-white; - background-color: $bg-blue; - border-color: $border-blue; + // stylelint-disable-next-line primer/borders + border-color: $orange-500; } .gap, @@ -64,19 +41,16 @@ .gap:hover, .disabled:hover, [aria-disabled=true]:hover { - // stylelint-disable-next-line primer/colors - color: $gray-300; + color: $text-gray-light; cursor: default; - background-color: $bg-gray-light; + border-color: transparent; } } // Unified centered pagination across the site .paginate-container { - // stylelint-disable-next-line primer/spacing - margin-top: 20px; - // stylelint-disable-next-line primer/spacing - margin-bottom: 15px; + margin-top: $spacer-3; + margin-bottom: $spacer-3; text-align: center; .pagination {