From 67ddeaed221f0aa33f6eb72518143a9d55581891 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 5 May 2020 10:54:22 +0900 Subject: [PATCH 1/4] Use px-3 for flash alerts --- docs/content/components/alerts.md | 4 +--- src/alerts/flash.scss | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index 2db22c4535..1f5a099c5d 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -172,9 +172,7 @@ A flash message that is full width and removes border and border radius. ```html live
-
- Full width flash message. -
+ Full width flash message.
``` diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index 6b57224649..41c288ef59 100644 --- a/src/alerts/flash.scss +++ b/src/alerts/flash.scss @@ -4,7 +4,7 @@ .flash { position: relative; // stylelint-disable-next-line primer/spacing - padding: 20px $spacer-4; + padding: 20px $spacer-3; color: $text-gray-dark; border-style: $border-style; border-width: $border-width; @@ -56,7 +56,6 @@ float: right; // stylelint-disable-next-line primer/spacing margin-top: -3px; - margin-right: -$spacer-2; margin-left: $spacer-4; background-clip: padding-box; } From 2d261086344944ffc9a19e3898ea476b1ea29fdb Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 5 May 2020 14:12:53 +0900 Subject: [PATCH 2/4] Add chevrons to pagination --- docs/content/components/pagination.md | 35 +++++++++++---------------- src/pagination/pagination.scss | 27 +++++++++++++++++++++ 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md index 7f67fa7a43..176710a9ba 100644 --- a/docs/content/components/pagination.md +++ b/docs/content/components/pagination.md @@ -8,6 +8,16 @@ bundle: pagination Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers). + +```html live + +``` + ## Previous/next pagination You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page. @@ -15,17 +25,8 @@ You can make a very simple pagination container with just the Previous and Next ```html live ``` diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index c49458fcb6..f09cbf6ecb 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -59,6 +59,33 @@ cursor: default; border-color: transparent; } + + .previous_page::before, + .next_page::after { + display: inline-block; + width: 6px; + height: 6px; + // stylelint-disable-next-line primer/typography + vertical-align: 1px; + content: ""; + // stylelint-disable-next-line primer/borders + border-color: currentColor; + border-style: $border-style; + // stylelint-disable-next-line primer/borders + border-width: 2px 2px 0 0; + // stylelint-disable-next-line primer/borders + border-radius: 1px; + } + + .previous_page::before { + margin: 0 $spacer-2 0 $spacer-1; + transform: rotate(-135deg); + } + + .next_page::after { + margin: 0 $spacer-1 0 $spacer-2; + transform: rotate(45deg); + } } // Unified centered pagination across the site From 29e506ccc97564ba031a324626a5f8a126b2596d Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 5 May 2020 16:45:38 +0900 Subject: [PATCH 3/4] Use clip-path for chevron icons --- docs/content/components/pagination.md | 13 ++------ src/pagination/pagination.scss | 45 +++++++++++++-------------- 2 files changed, 24 insertions(+), 34 deletions(-) diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md index 176710a9ba..26f6f2e983 100644 --- a/docs/content/components/pagination.md +++ b/docs/content/components/pagination.md @@ -8,16 +8,6 @@ bundle: pagination Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers). - -```html live - -``` - ## Previous/next pagination You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page. @@ -26,7 +16,8 @@ You can make a very simple pagination container with just the Previous and Next ``` diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss index f09cbf6ecb..53240a6d4a 100644 --- a/src/pagination/pagination.scss +++ b/src/pagination/pagination.scss @@ -60,31 +60,30 @@ border-color: transparent; } - .previous_page::before, - .next_page::after { - display: inline-block; - width: 6px; - height: 6px; - // stylelint-disable-next-line primer/typography - vertical-align: 1px; - content: ""; - // stylelint-disable-next-line primer/borders - border-color: currentColor; - border-style: $border-style; - // stylelint-disable-next-line primer/borders - border-width: 2px 2px 0 0; - // stylelint-disable-next-line primer/borders - border-radius: 1px; - } + // chevron icons using clip-path + @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) { + .previous_page::before, + .next_page::after { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: text-bottom; + content: ""; + // stylelint-disable-next-line primer/colors + background-color: currentColor; + } - .previous_page::before { - margin: 0 $spacer-2 0 $spacer-1; - transform: rotate(-135deg); - } + // chevron-left + .previous_page::before { + margin-right: $spacer-1; + clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px); + } - .next_page::after { - margin: 0 $spacer-1 0 $spacer-2; - transform: rotate(45deg); + // chevron-right + .next_page::after { + margin-left: $spacer-1; + clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px); + } } } From ef251c745fa412eb24253da8b95fc7f53bef3c71 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 6 May 2020 11:09:24 +0900 Subject: [PATCH 4/4] Use default $bg-green for states --- src/labels/states.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/labels/states.scss b/src/labels/states.scss index 63ba20eaf1..84a133c70d 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -28,8 +28,7 @@ } .State--green { - // stylelint-disable-next-line primer/colors - background-color: #159739; // custom green + background-color: $bg-green; } .State--red {