primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-01 04:21:12 +03:00
Code Issues Projects Releases Wiki Activity

removed scss in place of utilities and flex

Browse Source
This commit is contained in:
Emily Brick 2018-10-11 11:49:41 -04:00
parent 5b6b30dc66
commit c8edf4a1b3
2 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
modules/primer-progress-bar/README.md
View File

@ -33,7 +33,7 @@ For a compiled **CSS** version of this module, an npm script is included that wi
$ npm run build
```
## Default
## Default Progress Bar
<!-- %docs
title: Progress Bar
@ -41,19 +41,40 @@ status: Experimental
-->
```html
<div class="progress-bar">
<div class="progress-bar my-4">
<div class="progress" style="width: 50%">
</div>
</div>
<span class="flex-progress-bar mt-3 d-flex bg-gray overflow-hidden">
<span class="flex-progress-bar__to-do height-full bg-green rounded-1"></span>
<span class="flex-progress-bar__in-progress height-full bg-purple"></span>
<span class="flex-progress-bar__done height-full bg-red"></span>
<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
<span class="height-full bg-green" style="width:50%"></span>
<span class="height-full bg-purple" style="width:25%"></span>
<span class="height-full bg-red" style="width:5%"></span>
</span>
```
## With Tooltip
<!-- %enddocs -->
## Small Progress Bar
<!-- %docs
title: Progress Bar Small
status: Experimental
-->
```html
<div class="progress-bar progress-bar-small my-4">
<div class="progress" style="width:50%"></div>
</div>
<span class="flex-progress-bar-small d-flex bg-gray rounded-1 overflow-hidden">
<span class="height-full bg-green" style="width:50%"></span>
<span class="height-full bg-purple" style="width:25%"></span>
<span class="height-full bg-red" style="width:5%"></span>
</span>
```
## Progress Bar With Tooltip
<!-- %docs
title: Progress Bar with Tooltip
@ -62,15 +83,21 @@ status: Experimental
```html
<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
<div class="progress-bar">
<div class="progress-bar my-4">
<div class="progress" style="width: 50%">
</div>
</div>
</div>
<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
<span class="flex-progress to-do height-full bg-green" style="width: 50%"></span>
</span>
</div>
```
## Reverse Progress
## WIP Reverse Progress
<!-- %docs
title: Progress Bar Reverse
@ -85,23 +112,7 @@ status: Experimental
<!-- %enddocs -->
## Progress Bar Small
<!-- %docs
title: Progress Bar Small
status: Experimental
-->
```html
<div class="progress-bar progress-bar-small mt-3">
<div class="progress" style="width:50%">
</div>
</div>
```
<!-- %enddocs -->
## Progress Bar Inline
## WIP Progress Bar Inline
<!-- %docs
title: Progress Bar Inline
@ -118,6 +129,19 @@ status: Experimental
<!-- %enddocs -->
## WIP Progress Gradient [Test]
<!-- %docs
title: Progress Gradient [Test]
status: Experimental
-->
```html
<div class="flex-progress-bar--gradient d-flex bg-gray rounded-1 overflow-hidden"></div>
```
<!-- %enddocs -->
## License
[MIT](./LICENSE) &copy; [GitHub](https://github.com/)

24
modules/primer-progress-bar/lib/progress-bar.scss
View File

@ -56,20 +56,28 @@
}
}
///////// Flexbox Refactoring ///////
// Flexbox Refactoring for Primer CSS Component //
.flex-progress-bar {
height: 15px;
}
.flex-progress-bar__to-do {
flex-basis: 40%;
.flex-progress-bar-small {
height: 10px;
}
.flex-progress-bar__in-progress {
flex-basis: 30%;
}
// Flexbox Gradient Test //
.flex-progress-bar__done {
flex-basis: 5%;
.flex-progress-bar--gradient {
height: 15px;
background-image: linear-gradient(
to right,
$bg-green,
$bg-green 40%,
$purple-500 40%,
$purple-500 60%,
$red-500 60%,
$red-500 75%,
$gray-200 75%,
);
}