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

Add support for Firefox custom colors

Browse Source
This commit is contained in:
simurai 2020-06-29 21:09:36 +09:00
parent 69975a2805
commit 3b58693644
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/content/components/progress.md
View File

@ -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 @@ Large 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>
```

5
src/progress/progress.scss
View File

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