mirror of
https://github.com/primer/css.git
synced 2024-11-28 13:12:16 +03:00
simurai
GitHub
commit
703803ea6c
@ -40,24 +40,24 @@ Should the need arise, you can quickly space out your flash message from surroun
|
||||
</div>
|
||||
```
|
||||
|
||||
## Variations
|
||||
## Colors
|
||||
|
||||
Add `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-warn">
|
||||
<div class="flash">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div class="flash flash-error">
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
|
||||
```html live
|
||||
<div class="flash flash-success">
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Flash message goes here.
|
||||
</div>
|
||||
```
|
||||
@ -68,14 +68,37 @@ Add an icon to the left of the flash message to give it some funky fresh attenti
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<!-- <%= octicon "alert" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
||||
/>
|
||||
</svg>
|
||||
Flash message with an icon goes here.
|
||||
<!-- <%= octicon "rocket" %> -->
|
||||
<svg class="octicon octicon-rocket" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.064 0C11.7434 9.77766e-05 9.51786 0.922034 7.87699 2.563L7.41799 3.021C7.10399 3.335 6.80199 3.662 6.51399 4H3.30999C3.01117 4.00009 2.71736 4.07669 2.45653 4.2225C2.19571 4.36832 1.97657 4.57849 1.81999 4.833L0.10999 7.607C0.0499638 7.7045 0.0130574 7.81445 0.00209983 7.92842C-0.00885773 8.04239 0.00642442 8.15736 0.0467749 8.26451C0.0871255 8.37166 0.151473 8.46815 0.234886 8.54658C0.318298 8.62502 0.418561 8.68331 0.52799 8.717L3.62999 9.671C3.66699 9.722 3.70899 9.771 3.75399 9.816L6.18299 12.244C6.22899 12.29 6.27699 12.332 6.32799 12.369L7.28199 15.471C7.31568 15.5804 7.37397 15.6807 7.45241 15.7641C7.53084 15.8475 7.62733 15.9119 7.73448 15.9522C7.84163 15.9926 7.9566 16.0078 8.07057 15.9969C8.18454 15.9859 8.29449 15.949 8.39199 15.889L11.166 14.182C11.4205 14.0254 11.6307 13.8063 11.7765 13.5455C11.9223 13.2846 11.9989 12.9908 11.999 12.692V9.485C12.337 9.197 12.664 8.895 12.978 8.581L13.436 8.122C15.0771 6.48154 15.9994 4.2564 16 1.936V1.75C16 1.28587 15.8156 0.840752 15.4874 0.512563C15.1592 0.184374 14.7141 0 14.25 0H14.064ZM10.5 10.625C10.412 10.685 10.323 10.743 10.234 10.8L7.88399 12.321L8.43199 14.104L10.381 12.904C10.4174 12.8816 10.4474 12.8503 10.4682 12.813C10.4891 12.7757 10.5 12.7337 10.5 12.691V10.625ZM3.67799 8.116L5.19999 5.766C5.25799 5.676 5.31699 5.588 5.37599 5.5H3.30899C3.26628 5.49999 3.22427 5.51092 3.18699 5.53175C3.1497 5.55258 3.11837 5.58262 3.09599 5.619L1.89599 7.569L3.67799 8.116ZM8.93799 3.623C10.2973 2.26391 12.1408 1.50028 14.063 1.5H14.249C14.3153 1.5 14.3789 1.52634 14.4258 1.57322C14.4727 1.62011 14.499 1.6837 14.499 1.75V1.936C14.4991 2.88813 14.3117 3.83096 13.9474 4.71066C13.5832 5.59035 13.0492 6.38968 12.376 7.063L11.917 7.521C11.157 8.281 10.32 8.958 9.41799 9.541L7.10099 11.041L4.95799 8.898L6.45799 6.581C7.04138 5.67884 7.71847 4.84085 8.47799 4.081L8.93599 3.623H8.93799ZM12 5C12 5.26522 11.8946 5.51957 11.7071 5.70711C11.5196 5.89464 11.2652 6 11 6C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1053 5.51957 9.99999 5.26522 9.99999 5C9.99999 4.73478 10.1053 4.48043 10.2929 4.29289C10.4804 4.10536 10.7348 4 11 4C11.2652 4 11.5196 4.10536 11.7071 4.29289C11.8946 4.48043 12 4.73478 12 5ZM3.55999 14.56C3.70736 14.4227 3.82557 14.2571 3.90755 14.0731C3.98954 13.8891 4.03362 13.6905 4.03717 13.489C4.04073 13.2876 4.00368 13.0876 3.92824 12.9008C3.85279 12.714 3.7405 12.5444 3.59807 12.4019C3.45563 12.2595 3.28596 12.1472 3.09919 12.0718C2.91241 11.9963 2.71235 11.9593 2.51095 11.9628C2.30954 11.9664 2.11091 12.0105 1.92691 12.0924C1.74292 12.1744 1.57731 12.2926 1.43999 12.44C0.70599 13.17 0.39299 14.772 0.28999 15.443C0.2839 15.4792 0.286547 15.5163 0.29771 15.5512C0.308873 15.5861 0.328229 15.6179 0.354162 15.6438C0.380096 15.6698 0.411855 15.6891 0.44679 15.7003C0.481726 15.7114 0.518824 15.7141 0.55499 15.708C1.22599 15.605 2.82799 15.292 3.55999 14.56Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
<!-- <%= octicon "shield-lock" %> -->
|
||||
<svg class="octicon octicon-shield-lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53336 0.133063C8.18645 0.0220524 7.81355 0.0220518 7.46664 0.133062L2.21664 1.81306C1.49183 2.045 1 2.71878 1 3.4798V6.99985C1 8.5659 1.31923 10.1823 2.3032 11.682C3.28631 13.1805 4.88836 14.4946 7.33508 15.5367C7.75909 15.7173 8.24091 15.7173 8.66493 15.5367C11.1116 14.4946 12.7137 13.1805 13.6968 11.682C14.6808 10.1823 15 8.5659 15 6.99985V3.4798C15 2.71878 14.5082 2.045 13.7834 1.81306L8.53336 0.133063ZM7.92381 1.5617C7.97336 1.54584 8.02664 1.54584 8.07619 1.5617L13.3262 3.2417C13.4297 3.27483 13.5 3.37109 13.5 3.4798V6.99985C13.5 8.35818 13.2253 9.66618 12.4426 10.8592C11.6591 12.0535 10.3216 13.2007 8.07713 14.1567C8.02866 14.1773 7.97134 14.1773 7.92287 14.1567C5.67838 13.2007 4.34094 12.0535 3.55737 10.8592C2.77465 9.66618 2.5 8.35818 2.5 6.99985V3.4798C2.5 3.37109 2.57026 3.27483 2.67381 3.2417L7.92381 1.5617ZM9.5 6.49988C9.5 7.05509 9.19835 7.53985 8.75 7.7992L8.75 10.2499C8.75 10.6641 8.41421 10.9999 8 10.9999C7.58579 10.9999 7.25 10.6641 7.25 10.2499L7.25 7.7992C6.80165 7.53985 6.5 7.05509 6.5 6.49988C6.5 5.67145 7.17157 4.99988 8 4.99988C8.82843 4.99988 9.5 5.67145 9.5 6.49988Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
<!-- <%= octicon "flame" %> -->
|
||||
<svg class="octicon octicon-flame" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99789 14.5001C10.8304 14.5001 12.9971 12.5193 12.9971 10C12.9971 8.53654 12.3174 7.80948 11.1193 6.61667C11.1071 6.60453 11.0949 6.59236 11.0826 6.58014C10.0696 5.57183 8.7824 4.29061 8.24911 2.14559C7.92718 2.40211 7.61813 2.72476 7.38529 3.09924C6.95273 3.79496 6.7637 4.67919 7.33879 5.82934C7.81231 6.77637 8.00841 8.11294 7.06066 9.06069C6.45006 9.67129 5.51641 9.90115 4.65812 9.69385C4.1002 9.55909 3.61121 9.25672 3.22215 8.81981C3.08407 9.16747 3.00001 9.57013 3 10.0001C2.99994 12.5298 5.1636 14.5001 7.99789 14.5001ZM9.5332 0.752514C9.49562 0.340008 9.16001 0.00931669 8.76889 0.145686C7.03463 0.750359 4.34051 3.18696 5.99715 6.50017C6.34142 7.1887 6.28164 7.71839 6 8.00003C5.58104 8.41899 4.45998 8.4869 3.95925 7.16847C3.78678 6.71435 3.30098 6.40593 2.92501 6.71353C2.03625 7.44067 1.50003 8.70216 1.5 10C1.49992 13.5121 4.49789 16.0001 7.99789 16.0001C11.4979 16.0001 14.4971 13.5 14.4971 10C14.4971 7.86282 13.3699 6.74064 12.1862 5.56222C10.9968 4.37809 9.7504 3.13717 9.5332 0.752514Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
<!-- <%= octicon "shield-check" %> -->
|
||||
<svg class="octicon octicon-shield-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53336 0.133063C8.18645 0.0220524 7.81355 0.0220518 7.46664 0.133062L2.21664 1.81306C1.49183 2.045 1 2.71878 1 3.4798V6.99985C1 8.5659 1.31923 10.1823 2.3032 11.682C3.28631 13.1805 4.88836 14.4946 7.33508 15.5367C7.75909 15.7173 8.24091 15.7173 8.66493 15.5367C11.1116 14.4946 12.7137 13.1805 13.6968 11.682C14.6808 10.1823 15 8.5659 15 6.99985V3.4798C15 2.71878 14.5082 2.045 13.7834 1.81306L8.53336 0.133063ZM7.92381 1.5617C7.97336 1.54584 8.02664 1.54584 8.07619 1.5617L13.3262 3.2417C13.4297 3.27483 13.5 3.37109 13.5 3.4798V6.99985C13.5 8.35818 13.2253 9.66618 12.4426 10.8592C11.6591 12.0535 10.3216 13.2007 8.07713 14.1567C8.02866 14.1773 7.97134 14.1773 7.92287 14.1567C5.67838 13.2007 4.34094 12.0535 3.55737 10.8592C2.77465 9.66618 2.5 8.35818 2.5 6.99985V3.4798C2.5 3.37109 2.57026 3.27483 2.67381 3.2417L7.92381 1.5617ZM11.2803 6.28021C11.5732 5.98731 11.5732 5.51244 11.2803 5.21955C10.9874 4.92665 10.5126 4.92665 10.2197 5.21955L7.25 8.18922L6.28033 7.21955C5.98744 6.92665 5.51256 6.92665 5.21967 7.21955C4.92678 7.51244 4.92678 7.98731 5.21967 8.28021L6.71967 9.78021C7.01256 10.0731 7.48744 10.0731 7.78033 9.78021L11.2803 6.28021Z"></path></svg>
|
||||
Flash message with an icon
|
||||
</div>
|
||||
```
|
||||
|
||||
When using a `24px` icon, add a `.v-align-bottom` class and increase the font-size with `.f4` for a more balanced alignment.
|
||||
|
||||
```html live
|
||||
<div class="flash flash-success f4">
|
||||
<!-- <%= octicon "shield-check" %> -->
|
||||
<svg class="octicon octicon-shield-check v-align-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9275 3.55567C11.9748 3.54134 12.0252 3.54134 12.0725 3.55567L19.3225 5.75264C19.4292 5.78497 19.5 5.88157 19.5 5.99039V11C19.5 13.4031 18.7773 15.3203 17.5164 16.847C16.246 18.3853 14.3925 19.5706 12.0703 20.4278C12.0253 20.4444 11.9746 20.4444 11.9297 20.4278C9.60747 19.5706 7.75398 18.3853 6.48358 16.847C5.2227 15.3203 4.5 13.4031 4.5 11L4.5 5.9904C4.5 5.88158 4.57082 5.78496 4.6775 5.75264L11.9275 3.55567ZM12.5075 2.12013C12.1766 2.01985 11.8234 2.01985 11.4925 2.12013L4.24249 4.3171C3.50587 4.54032 3 5.21807 3 5.9904L3 11C3 13.7306 3.83104 15.9908 5.32701 17.8022C6.81347 19.6021 8.91996 20.9157 11.4102 21.835C11.7904 21.9753 12.2095 21.9753 12.5897 21.835C15.08 20.9157 17.1865 19.6021 18.673 17.8022C20.169 15.9908 21 13.7306 21 11V5.99039C21 5.21804 20.4941 4.54031 19.7575 4.3171L12.5075 2.12013ZM16.2803 9.78033C16.5732 9.48744 16.5732 9.01256 16.2803 8.71967C15.9874 8.42678 15.5126 8.42678 15.2197 8.71967L11 12.9393L9.28033 11.2197C8.98744 10.9268 8.51256 10.9268 8.21967 11.2197C7.92678 11.5126 7.92678 11.9874 8.21967 12.2803L10.4697 14.5303C10.7626 14.8232 11.2374 14.8232 11.5303 14.5303L16.2803 9.78033Z"></path></svg>
|
||||
Flash message with a larger icon
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -85,16 +108,35 @@ Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any fl
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<button class="flash-close js-flash-close" type="button">
|
||||
<!-- <%= octicon "x", :"aria-label" => "Close" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-label="Close" role="img">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Dismissable flash message goes here.
|
||||
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -104,8 +146,23 @@ A flash message with an action button.
|
||||
|
||||
```html live
|
||||
<div class="flash">
|
||||
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||
Flash message with action here.
|
||||
<button type="submit" class="btn btn-sm primary flash-action">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-warn">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-error">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
|
||||
<div class="flash mt-3 flash-success">
|
||||
Flash message with action here.
|
||||
<button class="btn btn-sm primary flash-action" type="submit">Complete action</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -115,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>
|
||||
```
|
||||
|
||||
@ -126,7 +181,7 @@ A flash message that is full width and removes border and border radius.
|
||||
A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.
|
||||
|
||||
```html live
|
||||
<div class="ml-n3" style="min-height: 50px">
|
||||
<div class="ml-n3" style="min-height: 50px;">
|
||||
<div class="flash flash-banner">
|
||||
Flash banner message.
|
||||
</div>
|
||||
|
||||
@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
|
||||
Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
```html live
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
|
||||
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
|
||||
```
|
||||
|
||||
### Small avatars
|
||||
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
|
||||
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
|
||||
```
|
||||
|
||||
### Avatar sizes
|
||||
|
||||
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
|
||||
|
||||
```html live
|
||||
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
|
||||
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
|
||||
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
|
||||
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
|
||||
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
|
||||
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
|
||||
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
|
||||
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
|
||||
```
|
||||
|
||||
### Parent-child avatars
|
||||
|
||||
@ -147,7 +147,7 @@ Icon-only buttons that turn blue on hover. Use `.btn-octicon-danger` to turn an
|
||||
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
|
||||
</button>
|
||||
|
||||
<button class="btn-octicon" type="button" aria-label="Trashcan icon">
|
||||
<button class="btn-octicon" type="button" aria-label="Kebab icon">
|
||||
<!-- <%= octicon "kebab-horizontal" %> -->
|
||||
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
|
||||
</button>
|
||||
@ -166,6 +166,42 @@ When using the `octicon-x` icon for a close button, add `.close-button` to remov
|
||||
</button>
|
||||
```
|
||||
|
||||
## Button with icons
|
||||
|
||||
Icons can be added to any button.
|
||||
|
||||
```html live
|
||||
<button class="btn mr-2" type="button">
|
||||
<!-- <%= octicon "search" %> -->
|
||||
<svg class="octicon octicon-search" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></path></svg>
|
||||
<span>Find file</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary mr-2" type="button">
|
||||
<!-- <%= octicon "cloud-download" %> -->
|
||||
<svg class="octicon octicon-cloud-download" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path></svg>
|
||||
<span>Clone</span>
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger mr-2" type="button">
|
||||
<!-- <%= octicon "trashcan" %> -->
|
||||
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline mr-2" type="button">
|
||||
<!-- <%= octicon "device-desktop" %> -->
|
||||
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
|
||||
<span>Open in Desktop</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" type="button" aria-label="Pencil icon">
|
||||
<!-- <%= octicon "pencil" %> -->
|
||||
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Button with counts
|
||||
|
||||
You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
|
||||
|
||||
@ -22,8 +22,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
```html live
|
||||
<p>
|
||||
<button class="btn" type="button">Button</button>
|
||||
<button class="btn select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control" type="text" placeholder="Standard input" aria-label="Repository description" />
|
||||
<input class="form-control input-monospace" type="text" placeholder="Monospace input" aria-label="SHA" />
|
||||
@ -35,8 +36,9 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
|
||||
<p>
|
||||
<button class="btn btn-sm" type="button">Small button</button>
|
||||
<button class="btn btn-sm select-menu-button" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
<button class="btn btn-sm" type="button" aria-expanded="false" aria-haspopup="true">
|
||||
Select menu
|
||||
<span class="dropdown-caret">
|
||||
</button>
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input" aria-label="Repository description" />
|
||||
<select class="form-select select-sm" aria-label="Important decision">
|
||||
@ -74,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
|
||||
<input
|
||||
class="form-control input-contrast"
|
||||
type="text"
|
||||
placeholder="Input with contrast"
|
||||
aria-label="Input with contrast"
|
||||
/>
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Disabled state
|
||||
|
||||
Add the `disabled` attribute to make a `.form-control` appear disabled.
|
||||
|
||||
```html live
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
|
||||
</form>
|
||||
```
|
||||
|
||||
@ -168,15 +175,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
|
||||
<select class="form-select select-sm" aria-label="Preference">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
<button class="btn btn-sm ml-1"> Small button</button>
|
||||
```
|
||||
|
||||
#### Form groups
|
||||
|
||||
@ -11,73 +11,96 @@ Labels add metadata or indicate status of items and navigational elements. Three
|
||||
|
||||
## Labels
|
||||
|
||||
The base label component styles the text, adds padding and rounded corners, and an inset box shadow. Labels come in various themes which apply colors and different border styles.
|
||||
The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
|
||||
GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors.
|
||||
|
||||
The base `Label` style does not apply a background color. Here's an example using the `bg-blue` utility to apply a blue background:
|
||||
The base `Label` style does not apply a background color and only uses the default border:
|
||||
|
||||
```html live title="Label"
|
||||
<span title="Label: default label" class="Label bg-blue">default label</span>
|
||||
```html live
|
||||
<span class="Label" title="Label: design">design</span>
|
||||
```
|
||||
|
||||
**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label.
|
||||
|
||||
```html live title="Label without title"
|
||||
```html live
|
||||
<!-- Don't do this -->
|
||||
<a href="#url">New select component</a><span class="Label bg-blue ml-1">design</span>
|
||||
<a href="#url">New select component</a> <span class="Label">design</span>
|
||||
```
|
||||
|
||||
### Label themes
|
||||
### Label contrast
|
||||
|
||||
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently.
|
||||
Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
|
||||
|
||||
Use `Label--gray` to create a label with a light gray background and gray text. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or when you want a label to feel less prominent compared with labels with stronger colors.
|
||||
Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`.
|
||||
|
||||
```html live title="Label theme gray"
|
||||
<span title="Label: gray label" class="Label Label--gray">gray label</span>
|
||||
```html live
|
||||
<span class="Label" title="Label: Default">Default</span>
|
||||
<span class="Label Label--gray ml-1" title="Label: Gray">Gray</span>
|
||||
<span class="Label Label--gray-darker ml-1" title="Label: Dark gray">Dark gray</span>
|
||||
```
|
||||
|
||||
Use `Label--gray-darker` to create a label with a dark-gray background color. This label is also neutral in color, however, since its background is darker, it can stand out more compared to `Label--gray`.
|
||||
### Colored labels
|
||||
|
||||
```html live title="Label theme dark gray"
|
||||
<span title="Label: dark gray label" class="Label Label--gray-darker">dark gray label</span>
|
||||
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are:
|
||||
|
||||
- `Label--yellow` -> Pending/highlight
|
||||
- `Label--orange` -> Warning
|
||||
- `Label--red` -> Error
|
||||
- `Label--green` -> Success
|
||||
- `Label--blue` -> Info
|
||||
|
||||
```html live
|
||||
<span class="Label mr-1 Label--yellow" title="Label: Pending">Pending</span>
|
||||
<span class="Label mr-1 Label--orange" title="Label: Warning">Warning</span>
|
||||
<span class="Label mr-1 Label--red" title="Label: Error">Error</span>
|
||||
<span class="Label mr-1 Label--green" title="Label: Success">Success</span>
|
||||
<span class="Label mr-1 Label--blue" title="Label: Info">Info</span>
|
||||
<span class="Label mr-1 Label--purple" title="Label: PRO">PRO</span>
|
||||
<span class="Label mr-1 Label--pink" title="Label: Sponsor">Sponsor</span>
|
||||
```
|
||||
|
||||
Use `Label--orange` to communicate "warning". The orange background color is very close to red, so avoid using next to labels with a red background color since most people will find it hard to tell the difference.
|
||||
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
|
||||
|
||||
```html live title="Label theme orange"
|
||||
<span title="Label: orange label" class="Label Label--orange">orange label</span>
|
||||
### Label sizes
|
||||
|
||||
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
|
||||
|
||||
```html live
|
||||
<span class="Label Label--gray-darker mr-1" title="Label: Default">Default</span>
|
||||
<span class="Label Label--large Label--gray-darker mr-1" title="Label: Large">Large</span>
|
||||
```
|
||||
|
||||
Use `Label--outline` to create a label with gray text, a gray border, and a transparent background. The outline reduces the contrast of this label in combination with filled labels. Use this in contexts where you need it to stand out less than other labels and communicate a neutral message.
|
||||
### Inline labels
|
||||
|
||||
```html live title="Label outline"
|
||||
<span title="Label: outline label" class="Label Label--outline">outlined label</span>
|
||||
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
|
||||
|
||||
```html live
|
||||
<p class="col-4">
|
||||
Lorem Ipsum is simply <span class="Label Label--inline" title="Label: dummy">dummy text</span>
|
||||
<span>of </span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
|
||||
</p>
|
||||
```
|
||||
|
||||
Use `Label--outline-green` in combination with `Label--outline` to communicate a positive message.
|
||||
|
||||
```html live title="Label outline green"
|
||||
<span title="Label: green outline label" class="Label Label--outline Label--outline-green">green outlined label</span>
|
||||
```
|
||||
|
||||
## Issue labels
|
||||
|
||||
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
|
||||
<span class="IssueLabel bg-blue text-white mr-1" title="Label: Primer">Primer</span>
|
||||
<span class="IssueLabel bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel bg-green text-white" title="Label: bug">help wanted</span>
|
||||
<span class="IssueLabel bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
|
||||
<span class="IssueLabel bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
|
||||
|
||||
```html live
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: good first issue">good first issue</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-1" title="Label: Primer">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-red text-white mr-1" title="Label: bug">bug 🐛</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-green text-white" title="Label: bug">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-pink text-white mr-1" title="Label: help wanted">help wanted</span>
|
||||
<span class="IssueLabel IssueLabel--big bg-yellow text-gray-dark mr-1" title="Label: deploy: train">🚂 deploy: train</span>
|
||||
```
|
||||
|
||||
|
||||
@ -94,19 +117,19 @@ Use state labels to inform users of an items status. States are large labels wit
|
||||
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
|
||||
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green mr-2">
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red mr-2">
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
<span title="Status: merged" class="State State--purple">
|
||||
<span class="State State--purple mr-2" title="Status: merged">
|
||||
<!-- <%= octicon "git-merge" %> -->
|
||||
<svg class="octicon octicon-git-merge" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7c-.73 0-1.38.41-1.73 1.02V8C7.22 7.98 6 7.64 5.14 6.98c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 .99C.89.99 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.67c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
|
||||
<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>
|
||||
Merged
|
||||
</span>
|
||||
```
|
||||
@ -118,12 +141,13 @@ States come in a few variations that apply different colors. Use the state that
|
||||
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
|
||||
|
||||
```html live
|
||||
<span title="Status: open" class="State State--green State--small mr-2">
|
||||
<span class="State State--small mr-2" title="Status: Default">Default</span>
|
||||
<span class="State State--small State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span title="Status: closed" class="State State--red State--small">
|
||||
<span class="State State--small State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
@ -132,17 +156,17 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
|
||||
|
||||
## Counters
|
||||
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, `Counter--gray` with a dark-gray background and inverse white text, and `Counter--gray-light` with a light-gray background and dark gray text. When a counter is empty, its visibility will be hidden.
|
||||
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden.
|
||||
|
||||
```html live title="Counter"
|
||||
<span class="Counter">16</span>
|
||||
<span class="Counter Counter--gray">32</span>
|
||||
<span class="Counter Counter--gray-light">64</span>
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
```
|
||||
|
||||
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
|
||||
|
||||
```html live title="Counter in tabs"
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
@ -151,28 +175,19 @@ Use the `Counter` in navigation to indicate the number of items without the user
|
||||
</div>
|
||||
```
|
||||
|
||||
Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box).
|
||||
You can also have icons and emoji in counters. Or use utilities for counters with different background colors.
|
||||
|
||||
```html live title="Counter in Box headers"
|
||||
<div class="Box">
|
||||
<div class="Box-header">
|
||||
<h3 class="Box-title">
|
||||
Box title
|
||||
<span class="Counter Counter--gray">3</span>
|
||||
</h3>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="Box-row">
|
||||
Box row one
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row two
|
||||
</li>
|
||||
<li class="Box-row">
|
||||
Box row three
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```html live
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 bg-green text-white">22</span>
|
||||
<span class="Counter mr-1 bg-red text-white">22</span>
|
||||
<span class="Counter mr-1 bg-purple text-white">22</span>
|
||||
```
|
||||
|
||||
## Diffstat
|
||||
|
||||
@ -119,7 +119,7 @@ Use `.UnderlineNav-actions` to place another element, such as a button, to the o
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
@ -142,7 +142,7 @@ Use `.UnderlineNav--right` to right align the navigation.
|
||||
```html live title="UnderlineNav--right with actions"
|
||||
<nav class="UnderlineNav UnderlineNav--right" aria-label="Foo bar">
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-body">
|
||||
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
|
||||
@ -197,7 +197,7 @@ Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNa
|
||||
<a class="UnderlineNav-item" href="#url">Item 4</a>
|
||||
</div>
|
||||
<div class="UnderlineNav-actions">
|
||||
<a class="btn">Button</a>
|
||||
<a class="btn btn-sm">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -237,20 +237,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
With an avatar
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-octoface mr-2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="SideNav-icon octicon octicon-octoface" version="1.1" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
With an icon
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
@ -271,7 +259,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
|
||||
With a label <span class="Label bg-blue" title="Label: label">label</span>
|
||||
</a>
|
||||
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
|
||||
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
|
||||
With a counter <span class="Counter ml-1">16</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<h5>With a heading</h5>
|
||||
@ -299,38 +287,23 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
|
||||
```html live
|
||||
<nav class="SideNav border" style="max-width: 360px">
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "person", class: "mr-2" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-person mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "person", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-person SideNav-icon" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true"> <path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z" /> </svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
<a class="SideNav-item" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "octoface", class: "mr-2" %> -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-octoface mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "octoface", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<nav class="SideNav bg-white border-top py-3 pl-6">
|
||||
<nav class="SideNav bg-white border-top py-3" style="padding-left: 44px">
|
||||
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 2</a>
|
||||
<a class="SideNav-subItem" href="#url">Sub item 3</a>
|
||||
</nav>
|
||||
<a class="SideNav-item" href="#url">
|
||||
<!-- <%= octicon "mail", class: "mr-2" %> -->
|
||||
<svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-mail mr-2" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "mail", class: "SideNav-icon" %> -->
|
||||
<svg class="octicon octicon-mail SideNav-icon" width="14" height="16" viewBox="0 0 14 16" aria-hidden="true"> <path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z" /> </svg>
|
||||
<span>Emails</span>
|
||||
</a>
|
||||
</nav>
|
||||
@ -349,6 +322,42 @@ When you need to toggle between different views, consider using a tabnav. It'll
|
||||
</div>
|
||||
```
|
||||
|
||||
Tabs can also contain icons and counters.
|
||||
|
||||
```html live
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">
|
||||
<!-- <%= octicon "comment-discussion" %> -->
|
||||
<svg class="octicon octicon-comment-discussion" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.75C1.5 2.6837 1.52634 2.62011 1.57322 2.57322C1.62011 2.52634 1.6837 2.5 1.75 2.5H10.25C10.3163 2.5 10.3799 2.52634 10.4268 2.57322C10.4737 2.62011 10.5 2.6837 10.5 2.75V8.25C10.5 8.3163 10.4737 8.37989 10.4268 8.42678C10.3799 8.47366 10.3163 8.5 10.25 8.5H6.75C6.55115 8.50017 6.36052 8.57931 6.22 8.72L3.5 11.44V9.25C3.5 9.05109 3.42098 8.86032 3.28033 8.71967C3.13968 8.57902 2.94891 8.5 2.75 8.5H1.75C1.6837 8.5 1.62011 8.47366 1.57322 8.42678C1.52634 8.37989 1.5 8.3163 1.5 8.25V2.75ZM1.75 1C1.28587 1 0.840752 1.18437 0.512563 1.51256C0.184374 1.84075 0 2.28587 0 2.75L0 8.25C0 9.216 0.784 10 1.75 10H2V11.543C2.0001 11.8311 2.08561 12.1127 2.24571 12.3522C2.40581 12.5917 2.63333 12.7784 2.8995 12.8886C3.16567 12.9988 3.45854 13.0277 3.74111 12.9715C4.02367 12.9153 4.28324 12.7767 4.487 12.573L7.061 10H10.25C10.7141 10 11.1592 9.81563 11.4874 9.48744C11.8156 9.15925 12 8.71413 12 8.25V2.75C12 2.28587 11.8156 1.84075 11.4874 1.51256C11.1592 1.18437 10.7141 1 10.25 1H1.75ZM14.5 4.75C14.5 4.6837 14.4737 4.62011 14.4268 4.57322C14.3799 4.52634 14.3163 4.5 14.25 4.5H13.75C13.5511 4.5 13.3603 4.42098 13.2197 4.28033C13.079 4.13968 13 3.94891 13 3.75C13 3.55109 13.079 3.36032 13.2197 3.21967C13.3603 3.07902 13.5511 3 13.75 3H14.25C15.216 3 16 3.784 16 4.75V10.25C16 10.7141 15.8156 11.1592 15.4874 11.4874C15.1592 11.8156 14.7141 12 14.25 12H14V13.543C13.9999 13.8311 13.9144 14.1127 13.7543 14.3522C13.5942 14.5917 13.3667 14.7784 13.1005 14.8886C12.8343 14.9988 12.5415 15.0277 12.2589 14.9715C11.9763 14.9153 11.7168 14.7767 11.513 14.573L9.22 12.28C9.14631 12.2113 9.08721 12.1285 9.04622 12.0365C9.00523 11.9445 8.98318 11.8452 8.98141 11.7445C8.97963 11.6438 8.99816 11.5438 9.03588 11.4504C9.0736 11.357 9.12974 11.2722 9.20096 11.201C9.27218 11.1297 9.35701 11.0736 9.4504 11.0359C9.54379 10.9982 9.64382 10.9796 9.74452 10.9814C9.84523 10.9832 9.94454 11.0052 10.0365 11.0462C10.1285 11.0872 10.2113 11.1463 10.28 11.22L12.5 13.44V11.25C12.5 11.0511 12.579 10.8603 12.7197 10.7197C12.8603 10.579 13.0511 10.5 13.25 10.5H14.25C14.3163 10.5 14.3799 10.4737 14.4268 10.4268C14.4737 10.3799 14.5 10.3163 14.5 10.25V4.75Z"></path></svg>
|
||||
<span>Conversation</span>
|
||||
<span class="Counter">2</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "git-commit" %> -->
|
||||
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 7.75C10.5 8.41305 10.2366 9.04893 9.76777 9.51777C9.29893 9.98661 8.66304 10.25 8 10.25C7.33696 10.25 6.70107 9.98661 6.23223 9.51777C5.76339 9.04893 5.5 8.41305 5.5 7.75C5.5 7.08696 5.76339 6.45108 6.23223 5.98224C6.70107 5.5134 7.33696 5.25 8 5.25C8.66304 5.25 9.29893 5.5134 9.76777 5.98224C10.2366 6.45108 10.5 7.08696 10.5 7.75ZM11.93 8.5C11.7554 9.41441 11.2674 10.2393 10.5501 10.8327C9.83272 11.426 8.93093 11.7506 8 11.7506C7.06907 11.7506 6.16728 11.426 5.44994 10.8327C4.73259 10.2393 4.2446 9.41441 4.07 8.5H0.75C0.551088 8.5 0.360322 8.42099 0.21967 8.28033C0.0790176 8.13968 0 7.94892 0 7.75C0 7.55109 0.0790176 7.36033 0.21967 7.21967C0.360322 7.07902 0.551088 7 0.75 7H4.07C4.2446 6.0856 4.73259 5.26069 5.44994 4.66736C6.16728 4.07403 7.06907 3.7494 8 3.7494C8.93093 3.7494 9.83272 4.07403 10.5501 4.66736C11.2674 5.26069 11.7554 6.0856 11.93 7H15.25C15.4489 7 15.6397 7.07902 15.7803 7.21967C15.921 7.36033 16 7.55109 16 7.75C16 7.94892 15.921 8.13968 15.7803 8.28033C15.6397 8.42099 15.4489 8.5 15.25 8.5H11.93Z"></path></svg>
|
||||
<span>Commits</span>
|
||||
<span class="Counter">3</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "checklist" %> -->
|
||||
<svg class="octicon octicon-checklist" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.75C2.5 1.61193 2.61193 1.5 2.75 1.5H11.25C11.3881 1.5 11.5 1.61193 11.5 1.75V9.48645C11.5 9.90067 11.8358 10.2365 12.25 10.2365C12.6642 10.2365 13 9.90067 13 9.48645V1.75C13 0.783502 12.2165 0 11.25 0H2.75C1.7835 0 1 0.783502 1 1.75V13.25C1 14.2165 1.7835 15 2.75 15H5.92083C6.33504 15 6.67083 14.6642 6.67083 14.25C6.67083 13.8358 6.33504 13.5 5.92083 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25V1.75ZM4.75 4C4.33579 4 4 4.33579 4 4.75C4 5.16421 4.33579 5.5 4.75 5.5H9.25C9.66421 5.5 10 5.16421 10 4.75C10 4.33579 9.66421 4 9.25 4H4.75ZM4 7.75C4 7.33579 4.33579 7 4.75 7H6.75C7.16421 7 7.5 7.33579 7.5 7.75C7.5 8.16421 7.16421 8.5 6.75 8.5H4.75C4.33579 8.5 4 8.16421 4 7.75ZM15.774 11.2866C16.0703 10.9972 16.076 10.5223 15.7866 10.226C15.4972 9.92965 15.0223 9.92402 14.726 10.2134L10.7003 14.1447L9.28127 12.7206C8.98889 12.4272 8.51402 12.4264 8.22061 12.7187C7.9272 13.0111 7.92636 13.486 8.21873 13.7794L10.1618 15.7294C10.4521 16.0207 10.9229 16.0239 11.2171 15.7366L15.774 11.2866Z"></path></svg>
|
||||
<span>Checks</span>
|
||||
<span class="Counter">27</span>
|
||||
</a>
|
||||
|
||||
<a class="tabnav-tab" href="#url">
|
||||
<!-- <%= octicon "diff" %> -->
|
||||
<svg class="octicon octicon-diff" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 1.5C2.61193 1.5 2.5 1.61193 2.5 1.75V14.25C2.5 14.3881 2.61193 14.5 2.75 14.5H13.25C13.3881 14.5 13.5 14.3881 13.5 14.25V4.66421C13.5 4.59791 13.4737 4.53432 13.4268 4.48744L10.5126 1.57322C10.4657 1.52634 10.4021 1.5 10.3358 1.5H2.75ZM1 1.75C1 0.783502 1.7835 0 2.75 0H10.3358C10.7999 0 11.245 0.184374 11.5732 0.512563L14.4874 3.42678C14.8156 3.75497 15 4.20008 15 4.66421V14.25C15 15.2165 14.2165 16 13.25 16H2.75C1.7835 16 1 15.2165 1 14.25V1.75ZM8 3.25C8.41421 3.25 8.75 3.58579 8.75 4V5.5H10.25C10.6642 5.5 11 5.83579 11 6.25C11 6.66421 10.6642 7 10.25 7H8.75V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V7H5.75C5.33579 7 5 6.66421 5 6.25C5 5.83579 5.33579 5.5 5.75 5.5H7.25V4C7.25 3.58579 7.58579 3.25 8 3.25ZM5 11.25C5 10.8358 5.33579 10.5 5.75 10.5H10.25C10.6642 10.5 11 10.8358 11 11.25C11 11.6642 10.6642 12 10.25 12H5.75C5.33579 12 5 11.6642 5 11.25Z"></path></svg>
|
||||
<span>Files changed</span>
|
||||
<span class="Counter">6</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.float-right` to align additional elements in the `.tabnav`:
|
||||
|
||||
```html live title="tabnav with buttons"
|
||||
@ -436,18 +445,7 @@ You can have `subnav-search` in the subnav bar.
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -462,53 +460,16 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
<a class="subnav-item" href="#url">Item 3</a>
|
||||
</nav>
|
||||
|
||||
<div class="float-left ml-3 select-menu js-menu-container js-select-menu subnav-search-context">
|
||||
<button
|
||||
type="button"
|
||||
name="button"
|
||||
class="btn select-menu-button js-menu-target"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<div class="float-left ml-3 subnav-search-context">
|
||||
<button class="btn" type="button" name="button" aria-expanded="false" aria-haspopup="true">
|
||||
Filters
|
||||
<span class="dropdown-caret"></span>
|
||||
</button>
|
||||
<div class="select-menu-modal-holder js-menu-content js-navigation-container" aria-hidden="true">
|
||||
<div class="select-menu-modal">
|
||||
<div class="select-menu-list">
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 1
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 2
|
||||
</div>
|
||||
</a>
|
||||
<a href="#url" class="select-menu-item js-navigation-item">
|
||||
<div class="select-menu-item-text">
|
||||
Search filter 3
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subnav-search float-left">
|
||||
<input type="search" name="name" class="form-control subnav-search-input" value="" aria-label="Search site" />
|
||||
<!-- <%= octicon "search", :class = "subnav-search-icon" %> -->
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
class="octicon octicon-search subnav-search-icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="subnav-search-icon octicon octicon-search" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z" /> </svg>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -6,11 +6,11 @@ source: 'https://github.com/primer/css/tree/master/src/progress'
|
||||
bundle: progress
|
||||
---
|
||||
|
||||
Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
Use progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children (`Progress-item`) should be individually colored with [background utilities](/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
|
||||
```html live
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -20,7 +20,7 @@ Large progress bars are slightly taller than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--large">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -30,7 +30,7 @@ Small progress bars are shorter than the default.
|
||||
|
||||
```html live
|
||||
<span class="Progress Progress--small">
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-item bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -41,7 +41,7 @@ For inline progress indicators, use the `Progress` and `d-inline-flex` with an i
|
||||
```html live
|
||||
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<div class="bg-green" style="width: 25%"></div>
|
||||
<div class="Progress-item bg-green" style="width: 25%"></div>
|
||||
</span>
|
||||
```
|
||||
|
||||
@ -52,7 +52,7 @@ In cases where it's not possible to describe the progress in text, provide an `a
|
||||
```html live
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
<span class="Progress-item bg-green" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -18,18 +18,6 @@ Use a `<details>` element to toggle the select menu. The `<summary>` element can
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
@ -40,7 +28,7 @@ Use a `<details>` element to toggle the select menu. The `<summary>` element can
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
|
||||
@ -57,18 +45,6 @@ In case the select menu should be aligned to the right, use `SelectMenu right-0`
|
||||
</summary>
|
||||
<div class="SelectMenu right-0">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
@ -94,42 +70,30 @@ If the `SelectMenu` should show a check icon for selected items, use the `Select
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox" aria-checked="true">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Selected state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
<button class="SelectMenu-item" role="menuitemcheckbox">
|
||||
<!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" ><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
|
||||
<svg class="SelectMenu-icon SelectMenu-icon--check octicon octicon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.78 4.22C13.9204 4.36062 13.9993 4.55125 13.9993 4.75C13.9993 4.94875 13.9204 5.13937 13.78 5.28L6.53 12.53C6.38937 12.6704 6.19875 12.7493 6 12.7493C5.80125 12.7493 5.61062 12.6704 5.47 12.53L2.22 9.28C2.08752 9.13782 2.0154 8.94978 2.01882 8.75547C2.02225 8.56117 2.10096 8.37579 2.23838 8.23837C2.37579 8.10096 2.56118 8.02225 2.75548 8.01882C2.94978 8.01539 3.13782 8.08752 3.28 8.22L6 10.94L12.72 4.22C12.8606 4.07955 13.0512 4.00066 13.25 4.00066C13.4487 4.00066 13.6394 4.07955 13.78 4.22Z"></path></svg>
|
||||
Default state
|
||||
</button>
|
||||
</div>
|
||||
@ -138,7 +102,62 @@ If the `SelectMenu` should show a check icon for selected items, use the `Select
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 250px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 200px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Borderless
|
||||
|
||||
Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Header
|
||||
|
||||
Add a `.SelectMenu-header` at the top to house a clear title and a close button.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 180px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## List items
|
||||
@ -155,13 +174,8 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!--%= octicon "x" %-->
|
||||
<svg version="1.1" width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -217,7 +231,7 @@ The list of items is arguably the most important subcomponent within the menu. B
|
||||
|
||||
## Divider
|
||||
|
||||
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`.
|
||||
The select menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`. It can be a `<div>` with text/content. Or just an `<hr>` to add a visual separator.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
@ -230,12 +244,7 @@ The select menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -244,14 +253,50 @@ The select menu's list can be divided into multiple parts by adding a `.SelectMe
|
||||
<div class="SelectMenu-divider">More options</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 260px"><!-- min height for > sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
Dividers are also supported when using the `.SelectMenu-list--borderless` modifier.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list SelectMenu-list--borderless">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-divider">More options</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 4</button>
|
||||
<hr class="SelectMenu-divider">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 5</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Footer
|
||||
@ -269,11 +314,7 @@ Use a `.SelectMenu-footer` at the bottom for additional information. As a side e
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
@ -306,8 +347,8 @@ If the list is expected to get long, consider adding a `.SelectMenu-filter` inpu
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" /></svg>
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
@ -364,12 +405,7 @@ Sometimes you need two or more lists of items in your select menu, e.g. branches
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
@ -415,18 +451,13 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-message bg-red-0 text-red">Message goes here</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 2</button>
|
||||
<div class="SelectMenu-message bg-red-0 text-red p-2">Message goes here</div>
|
||||
<button class="SelectMenu-item" role="menuitem">Item 3</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -446,23 +477,15 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu SelectMenu--hasFilter">
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<header class="SelectMenu-header">
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<form class="SelectMenu-filter">
|
||||
<input class="SelectMenu-input form-control" type="text" placeholder="Filter" aria-label="Filter" />
|
||||
</form>
|
||||
<div class="SelectMenu-list">
|
||||
<div class="SelectMenu-loading">
|
||||
<!-- <%= octicon "octoface", class: "anim-pulse", width: 32 %> -->
|
||||
@ -489,6 +512,31 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
|
||||
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
|
||||
|
||||
```html live
|
||||
<details class="details-reset details-overlay" open>
|
||||
<summary class="btn" aria-haspopup="true">
|
||||
Choose an item
|
||||
</summary>
|
||||
<div class="SelectMenu">
|
||||
<div class="SelectMenu-modal">
|
||||
<div class="SelectMenu-list">
|
||||
<button class="SelectMenu-item" role="menuitem">Item 1</button>
|
||||
<button class="SelectMenu-item" role="menuitem" disabled>Item 2 (disabled)</button>
|
||||
<a class="SelectMenu-item" role="menuitem" href="#">Item 3</a>
|
||||
<a class="SelectMenu-item" role="menuitem" aria-disabled="true">Item 4 (disabled)</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
|
||||
<div class="d-none d-sm-block" style="height: 160px"><!-- min height for > sm --></div>
|
||||
```
|
||||
|
||||
## Blankslate
|
||||
|
||||
Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
|
||||
@ -504,12 +552,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
|
||||
<h3 class="SelectMenu-title">Title</h3>
|
||||
<button class="SelectMenu-closeButton" type="button">
|
||||
<!-- <%= octicon "x" %> -->
|
||||
<svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="SelectMenu-list">
|
||||
|
||||
96
docs/content/stickersheet/index.md
Normal file
96
docs/content/stickersheet/index.md
Normal file
@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Sticker Sheet
|
||||
path: stickersheet/index
|
||||
---
|
||||
|
||||
|
||||
### Sizes
|
||||
|
||||
```html live
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">16px</span>
|
||||
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">20px</span>
|
||||
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label">Label</span>
|
||||
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span>
|
||||
<span class="mr-3 Counter">1.5K</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">24px</span>
|
||||
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<span class="mr-3 Label Label--large">Label</span>
|
||||
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span>
|
||||
<span class="mr-3 State State--small">State</span>
|
||||
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">28px</span>
|
||||
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn btn-sm" type="button">Button</button>
|
||||
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select select-sm"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">32px</span>
|
||||
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
|
||||
<button class="mr-3 btn" type="button">Button</button>
|
||||
<input class="mr-3 form-control" type="text" placeholder="Input" />
|
||||
<select class="mr-3 form-select"><option>Select</option><option value="option 2">Option 2</option></select>
|
||||
<nav class="mr-3 subnav d-inline-block v-align-middle mb-0">
|
||||
<a class="subnav-item" href="#url" aria-current="page">Filter 1</a>
|
||||
<a class="subnav-item" href="#url">Filter 2</a>
|
||||
</nav>
|
||||
<span class="mr-3 State">State</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">40px</span>
|
||||
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
|
||||
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
|
||||
<nav class="tabnav-tabs">
|
||||
<a class="tabnav-tab" href="#url" aria-current="page">Tab 1</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 2</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 3</a>
|
||||
<a class="tabnav-tab" href="#url">Tab 4</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">48px</span>
|
||||
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
|
||||
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
|
||||
<div class="UnderlineNav-body">
|
||||
<button class="UnderlineNav-item" type="button" role="tab" aria-selected="true">Nav 1</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 2</button>
|
||||
<button class="UnderlineNav-item" role="tab" type="button">Nav 3</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mr-3 flash d-inline-block v-align-middle">Flash alert</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="d-inline-block col-1 text-gray-light">64px</span>
|
||||
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
|
||||
<div class="mr-3 Header d-inline-block v-align-middle">
|
||||
<div class="Header-item">
|
||||
<a href="#" class="Header-link f4 d-flex flex-items-center">
|
||||
<!-- <%= octicon "mark-github", class: "mr-2", height: 32 %> -->
|
||||
<svg height="32" class="octicon octicon-mark-github mr-2" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
<span>Header</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
149
docs/content/stickersheet/labels.md
Normal file
149
docs/content/stickersheet/labels.md
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
title: Labels
|
||||
path: components/labels
|
||||
status: Stable
|
||||
source: 'https://github.com/primer/css/tree/master/src/labels'
|
||||
bundle: labels
|
||||
---
|
||||
|
||||
```html live
|
||||
<p class="mb-4 col-4">
|
||||
The base <span class="Label Label--inline"> label </span> component styles the text, adds <span class="Label Label--inline">padding</span> and rounded corners, and a border. Labels come in various themes which apply different colors.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="mb-2 f6">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f5">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f4">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f3">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f2">Hello <span class="Label mr-1">world</span></div>
|
||||
<div class="mb-2 f1">Hello <span class="Label mr-1">world</span></div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label mr-2 Label--gray">Gray</span>
|
||||
<span class="Label mr-2">Default</span>
|
||||
<span class="Label mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label mr-2 Label--orange">Warning</span>
|
||||
<span class="Label mr-2 Label--red" >Error</span>
|
||||
<span class="Label mr-2 Label--green" >Success</span>
|
||||
<span class="Label mr-2 Label--blue" >Info</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Label Label--large mr-2 Label--gray">Gray</span>
|
||||
<span class="Label Label--large mr-2">Default</span>
|
||||
<span class="Label Label--large mr-2 Label--gray-darker">Dark gray</span>
|
||||
<span class="Label Label--large mr-2 Label--yellow">Pending</span>
|
||||
<span class="Label Label--large mr-2 Label--orange">Warning</span>
|
||||
<span class="Label Label--large mr-2 Label--red" >Error</span>
|
||||
<span class="Label Label--large mr-2 Label--green" >Success</span>
|
||||
<span class="Label Label--large mr-2 Label--blue" >Info</span>
|
||||
|
||||
<hr class="my-4"><!-- Divider ------------------------ -->
|
||||
|
||||
<span class="IssueLabel bg-blue text-white mr-2">Primer</span>
|
||||
<span class="IssueLabel mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-2">Primer</span>
|
||||
<span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;">
|
||||
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
|
||||
</span>
|
||||
```
|
||||
|
||||
### States
|
||||
|
||||
```html live
|
||||
<span class="State mr-2">Default</span>
|
||||
<span class="State State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "git-pull-request" %> -->
|
||||
<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
|
||||
<div class="my-3"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="State State--small mr-2" title="Status: Default">Default</span>
|
||||
<span class="State State--small State--green mr-2" title="Status: open">
|
||||
<!-- <%= octicon "issue-opened" %> -->
|
||||
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg>
|
||||
Open
|
||||
</span>
|
||||
<span class="State State--small State--red mr-2" title="Status: closed">
|
||||
<!-- <%= octicon "issue-closed" %> -->
|
||||
<svg class="octicon octicon-issue-closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"></path></svg>
|
||||
Closed
|
||||
</span>
|
||||
```
|
||||
|
||||
### Counters
|
||||
|
||||
```html live
|
||||
<span class="Counter mr-1">1</span>
|
||||
<span class="Counter mr-1 Counter--gray-light">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<div class="tabnav">
|
||||
<nav class="tabnav-tabs" aria-label="Foo bar">
|
||||
<a href="#url" class="tabnav-tab" aria-current="page">Foo tab <span class="Counter">23</a>
|
||||
<a href="#url" class="tabnav-tab">Bar tab</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<span class="Counter mr-1">
|
||||
<!-- <%= octicon "comment" %> -->
|
||||
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
|
||||
10
|
||||
</span>
|
||||
<span class="Counter mr-1">👍 2</span>
|
||||
<span class="Counter mr-1 bg-green text-white">22</span>
|
||||
<span class="Counter mr-1 bg-red text-white">22</span>
|
||||
<span class="Counter mr-1 bg-purple text-white">22</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="Counter mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter mr-1">23</span>
|
||||
<span class="Counter mr-1 Counter--gray">456</span>
|
||||
<span class="Counter mr-1">1.5K</span>
|
||||
<div class="my-2"></div>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray-light">1</span>
|
||||
<span class="Counter Counter--small mr-1">23</span>
|
||||
<span class="Counter Counter--small mr-1 Counter--gray">456</span>
|
||||
<span class="Counter Counter--small mr-1">1.5K</span>
|
||||
```
|
||||
|
||||
### Diffstat
|
||||
|
||||
```html live
|
||||
<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions & 3 deletions">
|
||||
6
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
|
||||
<div class="my-4"></div><!-- Spacer ------------------------ -->
|
||||
|
||||
<span class="diffstat">
|
||||
<span class="text-green">+7</span>
|
||||
<span class="text-red">−2</span>
|
||||
<span class="tooltipped tooltipped-e" aria-label="9 lines changed">
|
||||
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
|
||||
</span>
|
||||
</span>
|
||||
```
|
||||
@ -169,15 +169,18 @@ Use `border-dashed` to give an element a dashed border.
|
||||
Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
|
||||
|
||||
```html live
|
||||
<div class="Box rounded-0 mb-2">
|
||||
<div class="border rounded-0 p-2 mb-2">
|
||||
.rounded-0
|
||||
</div>
|
||||
<div class="border rounded-1 mb-2">
|
||||
<div class="border rounded-1 p-2 mb-2">
|
||||
.rounded-1
|
||||
</div>
|
||||
<div class="border rounded-2 mb-2">
|
||||
<div class="border rounded-2 p-2 mb-2">
|
||||
.rounded-2
|
||||
</div>
|
||||
<div class="border rounded-3 p-2 mb-2">
|
||||
.rounded-3
|
||||
</div>
|
||||
<div class="border circle p-3" style="width: 100px; height: 100px;">
|
||||
.circle
|
||||
</div>
|
||||
@ -186,17 +189,17 @@ Use the following utilities to add or remove rounded corners: `rounded-0` remove
|
||||
You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
|
||||
|
||||
```html live
|
||||
<div class="border rounded-top-1 mb-2">
|
||||
.rounded-top-1
|
||||
<div class="border rounded-top-2 p-2 mb-2">
|
||||
.rounded-top-2
|
||||
</div>
|
||||
<div class="border rounded-right-1 mb-2">
|
||||
.rounded-right-1
|
||||
<div class="border rounded-right-2 p-2 mb-2">
|
||||
.rounded-right-2
|
||||
</div>
|
||||
<div class="border rounded-bottom-1 mb-2">
|
||||
.rounded-bottom-1
|
||||
<div class="border rounded-bottom-2 p-2 mb-2">
|
||||
.rounded-bottom-2
|
||||
</div>
|
||||
<div class="border rounded-left-1 mb-2">
|
||||
.rounded-left-1
|
||||
<div class="border rounded-left-2 p-2 mb-2">
|
||||
.rounded-left-2
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -82,7 +82,6 @@ You can set the color inheritance on an element by using the `text-inherit` clas
|
||||
</div>
|
||||
<div class="text-green mb-2">
|
||||
.text-green
|
||||
<span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
|
||||
</div>
|
||||
<div class="text-purple mb-2">
|
||||
.text-purple
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
// stylelint-disable selector-max-type, no-duplicate-selectors
|
||||
|
||||
// Default flash
|
||||
// stylelint-disable selector-max-type
|
||||
.flash {
|
||||
position: relative;
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $blue-800;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 20px $spacer-3;
|
||||
color: $text-gray-dark;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Contain the flash messages
|
||||
@ -25,17 +30,24 @@
|
||||
float: right;
|
||||
padding: $spacer-3;
|
||||
margin: -$spacer-3;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
// Undo `<button>` styles
|
||||
background: none;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,34 +57,64 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -3px;
|
||||
margin-left: $spacer-4;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
//
|
||||
// Variations
|
||||
// Color variations
|
||||
//
|
||||
|
||||
.flash {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $blue-100;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($blue-700, 0.2);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($blue-700, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-warn {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
border-color: $border-black-fade;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($yellow-800, 0.2);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($yellow-800, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-black-fade;
|
||||
background-color: #ffe3e6; // custom red
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($red-800, 0.2);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($red-800, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-success {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green-800;
|
||||
background-color: $bg-green-light;
|
||||
border-color: $border-black-fade;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($green-700, 0.2);
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($green-700, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Layout variations
|
||||
//
|
||||
|
||||
.flash-full {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
background: $bg-white;
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 5px $black-fade-30;
|
||||
box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
|
||||
}
|
||||
|
||||
// One of the items that appears within an autocomplete group
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
li {
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-weight: $font-weight-bold;
|
||||
border-bottom: $border;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
small {
|
||||
font-weight: $font-weight-normal;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
bottom: -9%;
|
||||
background-color: $bg-white; // For transparent backgrounds
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-1;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: -2px -2px 0 rgba($white, 0.8);
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
background-color: $bg-white;
|
||||
border-right: $border-width $border-style $border-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-1;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
|
||||
&:first-child {
|
||||
@ -50,7 +50,7 @@
|
||||
// stylelint-disable selector-max-type
|
||||
img {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-1;
|
||||
}
|
||||
// stylelint-enable selector-max-type
|
||||
|
||||
|
||||
@ -6,9 +6,6 @@
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
.avatar-small { border-radius: 2px; }
|
||||
|
||||
.avatar-link {
|
||||
float: left;
|
||||
line-height: $lh-condensed-ultra;
|
||||
@ -20,3 +17,28 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
|
||||
.avatar-1,
|
||||
.avatar-2,
|
||||
.avatar-small {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
@mixin avatar-size( $size ) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.avatar-1 { @include avatar-size( $size-1 ); }
|
||||
.avatar-2 { @include avatar-size( $size-2 ); }
|
||||
.avatar-3 { @include avatar-size( $size-3 ); }
|
||||
.avatar-4 { @include avatar-size( $size-4 ); }
|
||||
.avatar-5 { @include avatar-size( $size-5 ); }
|
||||
.avatar-6 { @include avatar-size( $size-6 ); }
|
||||
.avatar-7 { @include avatar-size( $size-7 ); }
|
||||
.avatar-8 { @include avatar-size( $size-8 ); }
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
.Box {
|
||||
background-color: $bg-white;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$border-width) (-$border-width) 0;
|
||||
background-color: $bg-gray;
|
||||
border-color: $border-gray-dark;
|
||||
border-color: $border-color;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-top-left-radius: $border-radius;
|
||||
@ -95,10 +95,8 @@
|
||||
&:last-of-type {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -$border-width;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,20 +106,16 @@
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
list-style-type: none; // To account for applying Box component to a list
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
border-top: $border;
|
||||
|
||||
&:first-of-type {
|
||||
// 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-of-type {
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Adds a blue vertical line to the left of the row
|
||||
@ -215,7 +209,7 @@
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // prevents double border when used with .Box-body
|
||||
border-top: $border-width $border-style $border-gray;
|
||||
border-top: $border;
|
||||
}
|
||||
|
||||
// Option for a box with scrolling content
|
||||
|
||||
@ -5,23 +5,33 @@
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 12px;
|
||||
padding: 5px $spacer-3;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px; // Specifically not inherit our `<body>` default
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-repeat: repeat-x;
|
||||
background-position: -1px -1px;
|
||||
background-size: 110% 110%;
|
||||
border: $border-width $border-style $border-color-button;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 0.25em;
|
||||
border: $border-width $border-style;
|
||||
border-radius: $border-radius;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
cursor: default;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-semibold;
|
||||
@ -29,78 +39,248 @@
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
margin-right: $spacer-1;
|
||||
color: $text-gray-light;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&:only-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Darken for just a tad more contrast against the button background
|
||||
.Counter {
|
||||
color: $text-gray;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 2px;
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
vertical-align: top;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.1);
|
||||
background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
.dropdown-caret {
|
||||
margin-left: $spacer-1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
// Default button
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
cursor: default;
|
||||
// Repeat `background-position` because `:hover`
|
||||
background-position: 0 0;
|
||||
.btn {
|
||||
$bg-default: $bg-gray-light;
|
||||
$bg-hover: #f3f4f6; // custom gray
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: $bg-default;
|
||||
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-default;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
background-image: none;
|
||||
background-color: $bg-active;
|
||||
box-shadow: $box-shadow-inset;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
background-color: $bg-disabled;
|
||||
border-color: $border-color-button;
|
||||
}
|
||||
|
||||
// Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
outline-offset: 2px;
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
|
||||
.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
|
||||
.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
|
||||
.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
|
||||
// Primary button
|
||||
|
||||
.btn-primary {
|
||||
$bg-default: #2ea44f; // custom green
|
||||
$bg-hover: #2c974b; // custom green
|
||||
$bg-active: darken($bg-hover, 2%);
|
||||
$bg-disabled: #94d3a2; // custom green
|
||||
|
||||
$shadow: $green-900;
|
||||
$box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
|
||||
|
||||
color: $text-white;
|
||||
background-color: $bg-default;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
[open] > & {
|
||||
background-color: $bg-hover;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
background-color: $bg-active;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($text-white, 0.8);
|
||||
background-color: $bg-disabled;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: rgba($black, 0.1);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($text-white, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin: btn-inverse-on-hover
|
||||
|
||||
@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) {
|
||||
color: $color;
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
[open] > & {
|
||||
color: $text-white;
|
||||
background-color: $bg-hover;
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($bg-white, 0.2);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&[aria-selected=true] {
|
||||
color: $text-white;
|
||||
background-color: $bg-active;
|
||||
border-color: rgba($black, 0.15);
|
||||
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
color: rgba($color, 0.5);
|
||||
background-color: $bg-gray-light;
|
||||
border-color: $border-color-button;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
|
||||
.Counter {
|
||||
background-color: rgba($color, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
color: inherit;
|
||||
background-color: rgba($color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger button
|
||||
|
||||
.btn-danger {
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $text-red,
|
||||
$bg-hover: $red-600,
|
||||
$bg-active: darken($red-600, 3%),
|
||||
$shadow: $red-900
|
||||
);
|
||||
}
|
||||
|
||||
// Outline button
|
||||
//
|
||||
// For when we need a linky-action that's not too heavy in busier
|
||||
// areas like conversation timelines.
|
||||
|
||||
.btn-outline {
|
||||
@include btn-outline($text-blue);
|
||||
@include btn-inverse-on-hover(
|
||||
$color: $blue-500,
|
||||
$bg-hover: $blue-500,
|
||||
$bg-active: darken($blue-500, 3%),
|
||||
$shadow: $blue-900
|
||||
);
|
||||
}
|
||||
|
||||
// Social button count
|
||||
.btn-with-count {
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
// Solid buttons TODO: Deprecate?
|
||||
//
|
||||
//
|
||||
.btn-blue {
|
||||
@include btn-solid(
|
||||
$text-white,
|
||||
lighten($blue-500, 8%),
|
||||
darken($blue-500, 2%)
|
||||
);
|
||||
}
|
||||
|
||||
// Minibutton overrides
|
||||
// Sizes
|
||||
//
|
||||
// Tweak `line-height` to make them smaller.
|
||||
.btn-sm {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 10px;
|
||||
padding: 3px 12px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
|
||||
.btn-large {
|
||||
padding: $em-spacer-6 1.25em;
|
||||
padding: $em-spacer-6 1.5em;
|
||||
font-size: inherit;
|
||||
line-height: $lh-default;
|
||||
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 6px;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
// Full-width button
|
||||
@ -111,91 +291,3 @@
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Link-like buttons
|
||||
//
|
||||
// This class is for styling <button> and <input> elements to look like links
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled=true] {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invisible button
|
||||
//
|
||||
// Typically used as a "cancel" button next to a .btn
|
||||
.btn-invisible {
|
||||
color: $text-blue;
|
||||
background-color: $bg-white; // Reset default gradient backgrounds and colors
|
||||
background-image: none;
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-blue;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Octicon button
|
||||
//
|
||||
// Icon-only buttons
|
||||
.btn-octicon {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
vertical-align: middle;
|
||||
|
||||
// For `<button>` elements
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: $text-blue; }
|
||||
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-octicon-danger:hover {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
@ -1,5 +1,94 @@
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
// Link-like buttons
|
||||
//
|
||||
// This class is for styling <button> and <input> elements to look like links
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[aria-disabled=true] {
|
||||
&,
|
||||
&:hover {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: rgba($gray-600, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invisible button
|
||||
//
|
||||
// Typically used as a "cancel" button next to a .btn
|
||||
.btn-invisible {
|
||||
color: $text-blue;
|
||||
background-color: transparent; // Reset default gradient backgrounds and colors
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.selected,
|
||||
&[aria-selected=true],
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-blue;
|
||||
background: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Octicon button
|
||||
//
|
||||
// Icon-only buttons
|
||||
.btn-octicon {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 5px;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
vertical-align: middle;
|
||||
|
||||
// For `<button>` elements
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: $text-blue; }
|
||||
|
||||
&.disabled,
|
||||
&[aria-disabled=true] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
cursor: default;
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
&:hover { color: $gray-400; }
|
||||
}
|
||||
}
|
||||
|
||||
.btn-octicon-danger:hover {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
// Close button
|
||||
//
|
||||
// Typically used with an octicon-x
|
||||
@ -59,13 +148,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Social button count
|
||||
// TODO: Deprecate? Use BtnGroup instead?
|
||||
|
||||
.btn-with-count {
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Social count bubble
|
||||
//
|
||||
// A container that is used for social bubbles counts.
|
||||
|
||||
.social-count {
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px 10px;
|
||||
padding: 3px 12px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
@ -77,6 +181,7 @@
|
||||
border-left: 0;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
box-shadow: $box-shadow, $box-shadow-highlight;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@ -87,4 +192,10 @@
|
||||
color: $text-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
outline: 0;
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,9 +31,8 @@
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
background-clip: padding-box;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $spacer-1;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-large;
|
||||
|
||||
&::before,
|
||||
|
||||
@ -17,10 +17,9 @@ label {
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px $spacer-2;
|
||||
font-size: $h4-size;
|
||||
padding: 5px 12px;
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
@ -28,17 +27,23 @@ label {
|
||||
background-color: $bg-white;
|
||||
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
||||
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border: $border-width $border-style $border-color;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow;
|
||||
box-shadow: $box-shadow-inset;
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $blue-400;
|
||||
border-color: $border-blue;
|
||||
outline: none;
|
||||
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
|
||||
box-shadow: $box-shadow-focus;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-400;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: #f3f4f6; // custom gray
|
||||
}
|
||||
|
||||
// Ensures inputs don't zoom on mobile but are body-font size on desktop
|
||||
@ -47,6 +52,13 @@ label {
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
textarea.form-control {
|
||||
padding-top: $spacer-2;
|
||||
padding-bottom: $spacer-2;
|
||||
line-height: $lh-default;
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
.input-contrast {
|
||||
background-color: $bg-gray-light;
|
||||
@ -60,6 +72,7 @@ label {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $white-fade-15;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
@ -78,11 +91,11 @@ label {
|
||||
// Custom styling for HTML5 validation bubbles (WebKit only)
|
||||
::placeholder {
|
||||
color: $text-gray-light;
|
||||
opacity: 1; // override opacity in normalize.css
|
||||
}
|
||||
|
||||
// Mini inputs, to match .minibutton
|
||||
.input-sm {
|
||||
min-height: 28px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -94,7 +107,6 @@ label {
|
||||
|
||||
// Large inputs
|
||||
.input-lg {
|
||||
padding: $spacer-1 10px;
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
|
||||
@ -152,11 +152,9 @@
|
||||
z-index: 10;
|
||||
display: block; // Show up in errored/warn state
|
||||
max-width: 450px; // Keep our long errors readable
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px $spacer-2;
|
||||
margin: $spacer-1 0 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
margin: $spacer-2 0 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
@ -210,16 +208,19 @@
|
||||
}
|
||||
|
||||
&.warn {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $yellow-600;
|
||||
}
|
||||
|
||||
.warning {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $yellow-100;
|
||||
background-color: $yellow-200;
|
||||
border-color: $border-yellow;
|
||||
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $yellow-100;
|
||||
border-bottom-color: $yellow-200;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -229,13 +230,16 @@
|
||||
}
|
||||
|
||||
&.errored {
|
||||
.form-control {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $red-600;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
.error {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $red-900;
|
||||
background-color: $bg-red-light;
|
||||
border-color: $border-red-light;
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
height: $size-5;
|
||||
padding-right: $spacer-4;
|
||||
background-color: $bg-white;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
|
||||
@ -24,8 +24,7 @@
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
height: $size-4;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 3px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
line-height: 20px; // Specifically not inherit our `<body>` default
|
||||
color: $text-gray-dark;
|
||||
cursor: pointer;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border: $border-width $border-style $border-color;
|
||||
|
||||
:checked + & {
|
||||
position: relative;
|
||||
|
||||
@ -1,30 +1,37 @@
|
||||
// Counters are rounded-corner badges for numbers
|
||||
.Counter {
|
||||
display: inline-block;
|
||||
min-width: $size-2; // makes sure it's a circle with just one digit
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 2px 5px;
|
||||
padding: 0 6px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $lh-condensed-ultra;
|
||||
color: $text-gray;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-2 - 2px; // remove borders
|
||||
color: $text-gray-dark;
|
||||
text-align: center;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: rgba($black, 0.08);
|
||||
background-color: rgba($gray-300, 0.5);
|
||||
border: $border-width $border-style transparent; // Support Firfox custom colors
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 20px;
|
||||
border-radius: 2em;
|
||||
|
||||
&:empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.Counter--gray-light {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $black-fade-15;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
|
||||
.Counter--gray {
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray;
|
||||
background-color: $gray-500;
|
||||
}
|
||||
|
||||
@ -18,16 +18,20 @@
|
||||
height: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 1px;
|
||||
outline-offset: -1px; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-deleted {
|
||||
background-color: $bg-diffstat-deleted;
|
||||
outline: 1px dashed transparent; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-added {
|
||||
background-color: $bg-diffstat-added;
|
||||
outline: 1px solid transparent; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
.diffstat-block-neutral {
|
||||
background-color: $bg-diffstat-neutral;
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@import "../support/index.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
@import "./issue-labels.scss";
|
||||
@import "./labels.scss";
|
||||
@import "./states.scss";
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
// Issue Labels
|
||||
|
||||
// TODO: Replace with .Label once solid backgrounds are supported
|
||||
|
||||
.IssueLabel {
|
||||
height: 20px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0.15em $spacer-1;
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 15px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
|
||||
@include labels-base;
|
||||
|
||||
.g-emoji {
|
||||
position: relative;
|
||||
@ -27,19 +19,5 @@
|
||||
}
|
||||
|
||||
.IssueLabel--big {
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: $border-radius;
|
||||
transition: opacity 0.2s linear;
|
||||
|
||||
.g-emoji {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
@include labels-large;
|
||||
}
|
||||
|
||||
@ -1,68 +1,93 @@
|
||||
// Needs refactoring
|
||||
// Labels
|
||||
//
|
||||
// Use labels to add keyword tags or phrases to issues and pull requests. These
|
||||
// are used within a list of issues/PRs, on individual issues/PRs, and within
|
||||
// the select menus that manage them.
|
||||
|
||||
// Provide a wrapper to ensure labels stick together
|
||||
.labels {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Each label gets common styles
|
||||
// .label will be deprecated for .Label
|
||||
.label,
|
||||
// Default label
|
||||
|
||||
.label, // TODO: Deprecte
|
||||
.Label {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 3px $spacer-1;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
|
||||
color: $text-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
|
||||
@include labels-base;
|
||||
background-color: transparent !important; // TODO: Remove again
|
||||
border-color: $border-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom GitHub labels (not for issues/PRs/etc)
|
||||
//
|
||||
// Commonly used across the site to indicate a particular role. For example,
|
||||
// "repo owner" within code comments or role in organizations.
|
||||
// Large
|
||||
|
||||
.Label--large {
|
||||
@include labels-large;
|
||||
}
|
||||
|
||||
// Inline
|
||||
|
||||
.Label--inline {
|
||||
@include labels--inline;
|
||||
}
|
||||
|
||||
// Contrast
|
||||
|
||||
.Label--outline, // TODO: Deprecate? It's now the default
|
||||
.Label--gray {
|
||||
color: $text-gray;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: lighten($gray-200, 3%);
|
||||
}
|
||||
|
||||
.Label--outline {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // offsets the 1px border
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -1px; // offsets the 1px border
|
||||
font-weight: $font-weight-normal;
|
||||
color: $text-gray;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style $border-black-fade;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.Label--outline-green {
|
||||
color: $text-green;
|
||||
border: $border-width $border-style $border-green;
|
||||
border-color: $border-gray;
|
||||
}
|
||||
|
||||
.Label--gray-darker {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $gray-500;
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
.Label--yellow {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray;
|
||||
color: $yellow-900;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $yellow-600;
|
||||
}
|
||||
|
||||
.Label--orange {
|
||||
background-color: $bg-orange;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $orange-800;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $orange-500;
|
||||
}
|
||||
|
||||
.Label--red {
|
||||
color: $text-red;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $red-600;
|
||||
}
|
||||
|
||||
.Label--outline-green, // TODO: Deprecate
|
||||
.Label--green {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $green-600;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $green-500;
|
||||
}
|
||||
|
||||
.Label--blue {
|
||||
color: $text-blue;
|
||||
border-color: $border-blue;
|
||||
}
|
||||
|
||||
.Label--purple {
|
||||
color: $text-purple;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $purple-400;
|
||||
}
|
||||
|
||||
.Label--pink {
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $pink-600;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-color: $pink-400;
|
||||
}
|
||||
|
||||
32
src/labels/mixins.scss
Normal file
32
src/labels/mixins.scss
Normal file
@ -0,0 +1,32 @@
|
||||
// Label mixins
|
||||
|
||||
// Default: 20px
|
||||
// Large: 24px
|
||||
// Inline: em based
|
||||
|
||||
@mixin labels-base {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: 18px;
|
||||
border: $border-width $border-style transparent;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
@mixin labels-large {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
// Inline
|
||||
//
|
||||
// Doesn't increase height of parent element
|
||||
// Can be used with different font-sizes
|
||||
|
||||
@mixin labels--inline {
|
||||
display: inline;
|
||||
padding: 0.1667em 0.5em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@ -6,12 +6,16 @@
|
||||
// closed - $red background
|
||||
// merged - $purple background
|
||||
|
||||
// .state to be deprecated in replace of .State
|
||||
.state,
|
||||
// Default 32px
|
||||
// Small 24px
|
||||
|
||||
.state, // TODO: Deprecate
|
||||
.State {
|
||||
display: inline-block;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-weight: $font-weight-bold;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px 12px;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-white;
|
||||
@ -19,20 +23,31 @@
|
||||
white-space: nowrap;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-500;
|
||||
border-radius: $border-radius;
|
||||
border: $border-width $border-style transparent; // Support Firfox custom colors
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
.State--green { background-color: darken($green-400, 5%); }
|
||||
.State--green {
|
||||
background-color: $bg-green;
|
||||
}
|
||||
|
||||
.State--purple { background-color: $bg-purple; }
|
||||
.State--red {
|
||||
background-color: $bg-red;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line primer/colors
|
||||
.State--red { background-color: $red-600; }
|
||||
.State--purple {
|
||||
background-color: $bg-purple;
|
||||
}
|
||||
|
||||
// Small
|
||||
|
||||
.State--small {
|
||||
padding: $em-spacer-2 $spacer-1;
|
||||
font-size: $h6-size;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 10px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-3;
|
||||
|
||||
.octicon {
|
||||
width: 1em; // Ensures different icons don't change State indicator width
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -3,54 +3,52 @@
|
||||
// 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;
|
||||
padding: $spacer-2 $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]:not([aria-current=false]) {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
cursor: default;
|
||||
background-color: $bg-white;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -60,22 +58,21 @@
|
||||
width: 2px;
|
||||
content: "";
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $orange-600;
|
||||
background-color: #f9826c; // custom coral
|
||||
}
|
||||
}
|
||||
|
||||
.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 +83,7 @@
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 5px;
|
||||
margin-right: $spacer-1;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
@ -99,35 +95,26 @@
|
||||
|
||||
.menu-heading {
|
||||
display: block;
|
||||
padding: $spacer-2 10px;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
font-size: inherit;
|
||||
font-weight: $font-weight-bold;
|
||||
// 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]:not([aria-current=false]),
|
||||
.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: #f9826c; // custom coral
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,6 +72,7 @@
|
||||
|
||||
.SideNav-icon {
|
||||
width: 16px;
|
||||
margin-right: $spacer-2;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
|
||||
|
||||
@ -21,11 +21,11 @@
|
||||
position: relative;
|
||||
float: left;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 6px 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: 5px $spacer-3;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray;
|
||||
color: $text-gray-dark;
|
||||
border: $border;
|
||||
|
||||
+ .subnav-item {
|
||||
@ -46,7 +46,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 +63,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 +82,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 +127,5 @@
|
||||
|
||||
.subnav-spacer-right {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-right: 10px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
@ -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]:not([aria-current=false]) {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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,40 +12,40 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom: 2px $border-style transparent;
|
||||
border-bottom: 2px $border-style rgba($border-gray-dark, 0);
|
||||
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;
|
||||
}
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
outline-offset: -1px;
|
||||
transition-timing-function: ease-out;
|
||||
transition-duration: 0.12s;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[role=tab][aria-selected=true],
|
||||
&[aria-current]:not([aria-current=false]) {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: $orange-600;
|
||||
border-bottom-color: #f9826c; // custom coral
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
outline-offset: -1px;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: $text-gray-light;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -52,11 +53,6 @@
|
||||
.UnderlineNav--right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.UnderlineNav-item {
|
||||
margin-right: 0;
|
||||
margin-left: $spacer-3;
|
||||
}
|
||||
|
||||
.UnderlineNav-actions {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -71,10 +67,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;
|
||||
|
||||
@ -1,60 +1,51 @@
|
||||
// Needs refactoring
|
||||
// stylelint-disable selector-max-type
|
||||
.pagination {
|
||||
@include clearfix;
|
||||
|
||||
a,
|
||||
span,
|
||||
em {
|
||||
position: relative;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
// 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;
|
||||
padding: 5px 10px;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-blue;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
text-align: center;
|
||||
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;
|
||||
border: $border-width $border-style transparent;
|
||||
border-radius: $border-radius;
|
||||
transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
|
||||
&: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;
|
||||
text-decoration: none;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: darken($gray-100, 2%);
|
||||
border-color: $border-gray;
|
||||
border-color: $border-color;
|
||||
outline: 0;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $border-gray-light;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selected { z-index: 3; }
|
||||
.previous_page,
|
||||
.next_page {
|
||||
color: $text-blue;
|
||||
}
|
||||
|
||||
.current,
|
||||
.current:hover,
|
||||
[aria-current]:not([aria-current=false]) {
|
||||
z-index: 3;
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
border-color: $border-blue;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gap,
|
||||
@ -63,19 +54,42 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
// 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
|
||||
.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 {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
border-radius: $border-radius;
|
||||
outline: 1px solid transparent; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
.Progress--large {
|
||||
@ -17,6 +18,10 @@
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.Progress-item {
|
||||
outline: 2px solid transparent; // Support Firfox custom colors
|
||||
}
|
||||
|
||||
.Progress-item + .Progress-item {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 2px;
|
||||
|
||||
@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
|
||||
overflow: hidden; // Enables border radius on scrollable child elements
|
||||
pointer-events: auto;
|
||||
flex-direction: column;
|
||||
background-color: $bg-gray;
|
||||
background-color: $bg-white;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius * 2;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 18px rgba($black, 0.4);
|
||||
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
|
||||
|
||||
@keyframes SelectMenu-modal-animation {
|
||||
@ -86,11 +86,11 @@ $SelectMenu-max-height: 480px !default;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
max-height: $SelectMenu-max-height;
|
||||
margin: $spacer-1 0 $spacer-3 0;
|
||||
margin: $spacer-2 0 $spacer-3 0;
|
||||
font-size: $font-size-small;
|
||||
border: $border-width $border-style $border-gray-dark;
|
||||
border: $border;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-medium;
|
||||
box-shadow: $box-shadow-large;
|
||||
animation-name: SelectMenu-modal-animation--sm;
|
||||
}
|
||||
}
|
||||
@ -101,17 +101,19 @@ $SelectMenu-max-height: 480px !default;
|
||||
|
||||
.SelectMenu-header {
|
||||
display: flex;
|
||||
flex: none; // fixes header from getting squeezed in Safari iOS
|
||||
padding: $spacer-3;
|
||||
flex: none; // fixes header from getting squeezed in Safari iOS
|
||||
align-items: center;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding-top: $spacer-2;
|
||||
padding-bottom: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px 7px 7px $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
.SelectMenu-title {
|
||||
flex: auto;
|
||||
flex: 1;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
@ -123,12 +125,16 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-closeButton {
|
||||
padding: $spacer-3;
|
||||
margin: -$spacer-3;
|
||||
color: $text-gray-light;
|
||||
line-height: 1;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
color: $gray-light;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
display: none;
|
||||
padding: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,7 +145,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-filter {
|
||||
padding: $spacer-3;
|
||||
margin: 0;
|
||||
border-top: $border;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: $spacer-2;
|
||||
@ -169,7 +175,6 @@ $SelectMenu-max-height: 480px !default;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: $bg-white;
|
||||
border-top: $border;
|
||||
-webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
|
||||
}
|
||||
|
||||
@ -183,7 +188,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
width: 100%;
|
||||
padding: $spacer-3;
|
||||
overflow: hidden;
|
||||
color: $text-gray;
|
||||
color: $text-gray-dark;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background-color: $bg-white;
|
||||
@ -191,8 +196,15 @@ $SelectMenu-max-height: 480px !default;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding-top: $spacer-2;
|
||||
padding-bottom: $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 7px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
// Borderless
|
||||
.SelectMenu-list--borderless & {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,11 +232,10 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-tabs {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -$border-width; // hide border of element below
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-top: $border;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-gray-light;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Hide scrollbar so it doesn't cover the text
|
||||
@ -233,8 +244,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: 0 $spacer-2;
|
||||
border-top: 0;
|
||||
padding: $spacer-2 $spacer-2 0 $spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,7 +258,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 $border-color;
|
||||
box-shadow: inset 0 -1px 0 $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
flex: none;
|
||||
@ -265,24 +275,31 @@ $SelectMenu-max-height: 480px !default;
|
||||
cursor: default;
|
||||
background-color: $bg-white;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px $border-color;
|
||||
box-shadow: 0 0 0 1px $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
border-color: $border-color;
|
||||
border-color: $border-gray-light;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Message, Blankslate and Loading
|
||||
// Message
|
||||
//
|
||||
// A container used to show different kinds of content. Like a message, a blankslate or the loading animation.
|
||||
// A container used to show different kinds of text messages.
|
||||
|
||||
.SelectMenu-message {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px $spacer-3;
|
||||
text-align: center;
|
||||
background-color: $bg-white;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
}
|
||||
|
||||
.SelectMenu-message,
|
||||
// Blankslate and Loading
|
||||
//
|
||||
// A container used to show a blankslate or the loading animation.
|
||||
|
||||
.SelectMenu-blankslate,
|
||||
.SelectMenu-loading {
|
||||
padding: $spacer-4 $spacer-3;
|
||||
@ -298,10 +315,20 @@ $SelectMenu-max-height: 480px !default;
|
||||
padding: $spacer-1 $spacer-3;
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-light;
|
||||
background-color: $bg-gray;
|
||||
border-bottom: $border-width $border-style $border-gray-light;
|
||||
|
||||
// Borderless
|
||||
.SelectMenu-list--borderless & {
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
|
||||
&:empty {
|
||||
padding: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
@ -314,10 +341,11 @@ $SelectMenu-max-height: 480px !default;
|
||||
font-size: $font-size-small;
|
||||
color: $text-gray-light;
|
||||
text-align: center;
|
||||
border-top: $border;
|
||||
border-top: $border-width $border-style $border-gray-light;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: $spacer-1 $spacer-2;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 7px $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -334,7 +362,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
@include breakpoint(sm) {
|
||||
height: auto;
|
||||
max-height: $SelectMenu-max-height;
|
||||
margin-top: $spacer-1;
|
||||
margin-top: $spacer-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -344,9 +372,10 @@ $SelectMenu-max-height: 480px !default;
|
||||
// Different states
|
||||
|
||||
// Reset outlines
|
||||
.SelectMenu-closeButton:focus,
|
||||
.SelectMenu-tab:focus,
|
||||
.SelectMenu-item:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Reset <a> elements
|
||||
@ -356,9 +385,9 @@ $SelectMenu-max-height: 480px !default;
|
||||
|
||||
// Selected
|
||||
//
|
||||
// Visible when a used clicks/taps on a list item
|
||||
// Visible when a user clicks/taps on a list item
|
||||
|
||||
.SelectMenu-item[aria-checked="true"] {
|
||||
.SelectMenu-item[aria-checked=true] {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-gray-dark;
|
||||
|
||||
@ -369,11 +398,30 @@ $SelectMenu-max-height: 480px !default;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
//
|
||||
// Prevent list items to be selected
|
||||
|
||||
.SelectMenu-item:disabled,
|
||||
.SelectMenu-item[aria-disabled=true] {
|
||||
color: $text-gray-light;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Can hover states
|
||||
//
|
||||
// For mouse/keyboard input
|
||||
|
||||
@media (hover: hover) {
|
||||
body:not(.intent-mouse) .SelectMenu-closeButton:focus,
|
||||
.SelectMenu-closeButton:hover {
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
||||
.SelectMenu-closeButton:active {
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
body:not(.intent-mouse) .SelectMenu-item:focus,
|
||||
.SelectMenu-item:hover {
|
||||
background-color: $bg-gray;
|
||||
@ -388,10 +436,8 @@ $SelectMenu-max-height: 480px !default;
|
||||
background-color: $blue-100;
|
||||
}
|
||||
|
||||
.SelectMenu-tab:not([aria-selected="true"]):hover {
|
||||
.SelectMenu-tab:hover {
|
||||
color: $text-gray-dark;
|
||||
// stylelint-disable-next-line primer/colors
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
.SelectMenu-tab:not([aria-selected="true"]):active {
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
|
||||
// TODO: See if the mixins below can be deprecated
|
||||
// Might still be needed for .btn-blue
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
// Button color generator for primary and themed buttons
|
||||
|
||||
// New button hotness
|
||||
|
||||
@ -15,11 +15,8 @@ $border-green: $green-400 !default;
|
||||
$border-green-light: desaturate($green-300, 40%) !default;
|
||||
$border-purple: $purple !default;
|
||||
$border-red: $red !default;
|
||||
$border-red-light: desaturate($red-300, 60%) !default;
|
||||
$border-yellow: desaturate($yellow-300, 60%) !default;
|
||||
|
||||
// Buttons have a slightly more opaque border than $border-black-fade (15% alpha)
|
||||
$border-color-button: rgba($black, 0.2) !default;
|
||||
$border-red-light: $red-300 !default;
|
||||
$border-yellow: $yellow-600 !default;
|
||||
|
||||
// Background colors
|
||||
$bg-white: $white !default;
|
||||
@ -37,16 +34,11 @@ $bg-purple: $purple-500 !default;
|
||||
$bg-purple-light: $purple-000 !default;
|
||||
$bg-pink: $pink-500 !default;
|
||||
$bg-red: $red-500 !default;
|
||||
$bg-red-light: $red-100 !default;
|
||||
$bg-red-light: $red-000 !default;
|
||||
$bg-yellow: $yellow-500 !default;
|
||||
$bg-yellow-light: $yellow-200 !default;
|
||||
$bg-yellow-dark: $yellow-700 !default;
|
||||
|
||||
// diffstat background colors
|
||||
$bg-diffstat-added: darken($green-400, 5%) !default;
|
||||
$bg-diffstat-deleted: $red-600 !default;
|
||||
$bg-diffstat-neutral: $gray-300 !default;
|
||||
|
||||
// Text colors
|
||||
$text-black: $black !default;
|
||||
$text-white: $white !default;
|
||||
@ -54,7 +46,7 @@ $text-blue: $blue-500 !default;
|
||||
$text-gray-dark: $gray-900 !default;
|
||||
$text-gray-light: $gray-500 !default;
|
||||
$text-gray: $gray-600 !default;
|
||||
$text-green: $green-500 !default;
|
||||
$text-green: $green-600 !default;
|
||||
$text-orange: $orange-900 !default;
|
||||
$text-orange-light: $orange-600 !default;
|
||||
$text-purple: $purple !default;
|
||||
|
||||
@ -71,6 +71,20 @@ $em-spacer-4: 0.375em !default; // 3/8
|
||||
$em-spacer-5: 0.5em !default; // 1/2
|
||||
$em-spacer-6: 0.75em !default; // 3/4
|
||||
|
||||
// Size scale
|
||||
// Used for buttons, inputs, labels, avatars etc.
|
||||
$size: 16px !default;
|
||||
|
||||
$size-0: 0 !default;
|
||||
$size-1: $size !default; // 16px
|
||||
$size-2: $size-1 + 4px !default; // 20px
|
||||
$size-3: $size-2 + 4px !default; // 24px
|
||||
$size-4: $size-3 + 4px !default; // 28px
|
||||
$size-5: $size-4 + 4px !default; // 32px
|
||||
$size-6: $size-5 + 8px !default; // 40px
|
||||
$size-7: $size-6 + 8px !default; // 48px
|
||||
$size-8: $size-7 + 16px !default; // 64px
|
||||
|
||||
// Fixed-width container variables
|
||||
$container-width: 980px !default;
|
||||
$grid-gutter: 10px !default;
|
||||
|
||||
@ -1,22 +1,33 @@
|
||||
// Miscellaneous variables
|
||||
|
||||
// Border size
|
||||
// Border
|
||||
$border-width: 1px !default;
|
||||
$border-color: $border-gray !default;
|
||||
$border-style: solid !default;
|
||||
$border: $border-width $border-color $border-style !default;
|
||||
$border-radius: 3px !default;
|
||||
|
||||
// Border Radius
|
||||
$border-radius-1: 4px !default;
|
||||
$border-radius-2: 6px !default;
|
||||
$border-radius: $border-radius-2 !default;
|
||||
|
||||
// Box shadow
|
||||
$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
|
||||
$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
|
||||
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
|
||||
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
|
||||
$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
|
||||
$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
|
||||
$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
|
||||
$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
|
||||
|
||||
// Button and form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
|
||||
$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
|
||||
$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
|
||||
$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
|
||||
|
||||
// Button variables
|
||||
$border-color-button: $black-fade-15 !default;
|
||||
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
|
||||
|
||||
// Form variables
|
||||
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
|
||||
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
|
||||
|
||||
// Tooltips
|
||||
$tooltip-max-width: 250px !default;
|
||||
@ -24,3 +35,8 @@ $tooltip-background-color: $black !default;
|
||||
$tooltip-text-color: $white !default;
|
||||
$tooltip-delay: 0.4s !default;
|
||||
$tooltip-duration: 0.1s !default;
|
||||
|
||||
// diffstat background colors
|
||||
$bg-diffstat-added: darken($green-400, 5%) !default;
|
||||
$bg-diffstat-deleted: $red-600 !default;
|
||||
$bg-diffstat-neutral: $gray-300 !default;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
background-color: $bg-white;
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
|
||||
box-shadow: inset 0 0 0 1px $border-color, $box-shadow-large;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
width: max-content;
|
||||
|
||||
@ -40,12 +40,10 @@
|
||||
.border#{$variant}-left-0 { border-left: 0 !important; }
|
||||
|
||||
// Rounded corners
|
||||
/* Remove the border-radius */
|
||||
.rounded#{$variant} { border-radius: $border-radius !important; }
|
||||
.rounded#{$variant}-0 { border-radius: 0 !important; }
|
||||
/* Add a border-radius to all corners */
|
||||
.rounded#{$variant}-1 { border-radius: $border-radius !important; }
|
||||
/* Add a 2x border-radius to all corners */
|
||||
.rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
|
||||
.rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
|
||||
.rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
|
||||
|
||||
@each $edge, $corners in $edges {
|
||||
.rounded#{$variant}-#{$edge}-0 {
|
||||
@ -56,11 +54,17 @@
|
||||
|
||||
.rounded#{$variant}-#{$edge}-1 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius !important;
|
||||
border-#{$corner}-radius: $border-radius / 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-2 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-3 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius * 2 !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user