primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1077 from primer/next-7

Browse Source 
Component refresh 7
This commit is contained in:
simurai 2020-05-08 16:40:11 +09:00 committed by GitHub
commit 4467910e72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/components/alerts.md
View File

@ -172,9 +172,7 @@ A flash message that is full width and removes border and border radius.
```html live
<div class="flash flash-full">
<div class="container">
Full width flash message.
</div>
Full width flash message.
</div>
```

24
docs/content/components/pagination.md
View File

@ -15,16 +15,8 @@ You can make a very simple pagination container with just the Previous and Next
```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
<!-- <%= octicon "chevron-left mr-1" %> -->
<svg class="octicon octicon-chevron-left mr-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.78033 12.7803C9.48744 13.0732 9.01256 13.0732 8.71967 12.7803L4.46967 8.53033C4.17678 8.23744 4.17678 7.76256 4.46967 7.46967L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L6.06066 8L9.78033 11.7197C10.0732 12.0126 10.0732 12.4874 9.78033 12.7803Z"></path></svg>
Previous
</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">
Next
<!-- <%= octicon "chevron-right ml-1" %> -->
<svg class="octicon octicon-chevron-right ml-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.21967 3.21967C6.51256 2.92678 6.98744 2.92678 7.28033 3.21967L11.5303 7.46967C11.8232 7.76256 11.8232 8.23744 11.5303 8.53033L7.28033 12.7803C6.98744 13.0732 6.51256 13.0732 6.21967 12.7803C5.92678 12.4874 5.92678 12.0126 6.21967 11.7197L9.93934 8L6.21967 4.28033C5.92678 3.98744 5.92678 3.51256 6.21967 3.21967Z"></path></svg>
</a>
<span class="previous_page" aria-disabled="true">Previous</span>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```
@ -43,11 +35,7 @@ As always, make sure to include the appropriate `aria` attributes to make the el
```html live
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
<!-- <%= octicon "chevron-left mr-1" %> -->
<svg class="octicon octicon-chevron-left mr-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.78033 12.7803C9.48744 13.0732 9.01256 13.0732 8.71967 12.7803L4.46967 8.53033C4.17678 8.23744 4.17678 7.76256 4.46967 7.46967L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L6.06066 8L9.78033 11.7197C10.0732 12.0126 10.0732 12.4874 9.78033 12.7803Z"></path></svg>
Previous
</span>
<span class="previous_page" aria-disabled="true">Previous</span>
<em aria-current="page">1</em>
<a href="#url" aria-label="Page 2">2</a>
<a href="#url" aria-label="Page 3">3</a>
@ -55,11 +43,7 @@ As always, make sure to include the appropriate `aria` attributes to make the el
<a href="#url" aria-label="Page 8">8</a>
<a href="#url" aria-label="Page 9">9</a>
<a href="#url" aria-label="Page 10">10</a>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">
Next
<!-- <%= octicon "chevron-right ml-1" %> -->
<svg class="octicon octicon-chevron-right ml-1" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.21967 3.21967C6.51256 2.92678 6.98744 2.92678 7.28033 3.21967L11.5303 7.46967C11.8232 7.76256 11.8232 8.23744 11.5303 8.53033L7.28033 12.7803C6.98744 13.0732 6.51256 13.0732 6.21967 12.7803C5.92678 12.4874 5.92678 12.0126 6.21967 11.7197L9.93934 8L6.21967 4.28033C5.92678 3.98744 5.92678 3.51256 6.21967 3.21967Z"></path></svg>
</a>
<a class="next_page" rel="next" href="#url" aria-label="Next Page">Next</a>
</div>
</nav>
```

3
src/alerts/flash.scss
View File

@ -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;
}

3
src/labels/states.scss
View File

@ -28,8 +28,7 @@
}
.State--green {
// stylelint-disable-next-line primer/colors
background-color: #159739; // custom green
background-color: $bg-green;
}
.State--red {

26
src/pagination/pagination.scss
View File

@ -59,6 +59,32 @@
cursor: default;
border-color: transparent;
}
// 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;
}
// 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);
}
// 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);
}
}
}
// Unified centered pagination across the site