primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-11 11:16:04 +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 $ npm run build
``` ```
## Default ## Default Progress Bar
<!-- %docs <!-- %docs
title: Progress Bar title: Progress Bar
@ -41,19 +41,40 @@ status: Experimental
--> -->
```html ```html
<div class="progress-bar"> <div class="progress-bar my-4">
<div class="progress" style="width: 50%"> <div class="progress" style="width: 50%">
</div> </div>
</div> </div>
<span class="flex-progress-bar mt-3 d-flex bg-gray overflow-hidden"> <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
<span class="flex-progress-bar__to-do height-full bg-green rounded-1"></span> <span class="height-full bg-green" style="width:50%"></span>
<span class="flex-progress-bar__in-progress height-full bg-purple"></span> <span class="height-full bg-purple" style="width:25%"></span>
<span class="flex-progress-bar__done height-full bg-red"></span> <span class="height-full bg-red" style="width:5%"></span>
</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 <!-- %docs
title: Progress Bar with Tooltip title: Progress Bar with Tooltip
@ -62,15 +83,21 @@ status: Experimental
```html ```html
<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do"> <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 class="progress" style="width: 50%">
</div> </div>
</div> </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 <!-- %docs
title: Progress Bar Reverse title: Progress Bar Reverse
@ -85,23 +112,7 @@ status: Experimental
<!-- %enddocs --> <!-- %enddocs -->
## Progress Bar Small ## WIP Progress Bar Inline
<!-- %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
<!-- %docs <!-- %docs
title: Progress Bar Inline title: Progress Bar Inline
@ -118,6 +129,19 @@ status: Experimental
<!-- %enddocs --> <!-- %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 ## License
[MIT](./LICENSE) &copy; [GitHub](https://github.com/) [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 { .flex-progress-bar {
height: 15px; height: 15px;
} }
.flex-progress-bar__to-do { .flex-progress-bar-small {
flex-basis: 40%; height: 10px;
} }
.flex-progress-bar__in-progress { // Flexbox Gradient Test //
flex-basis: 30%;
}
.flex-progress-bar__done { .flex-progress-bar--gradient {
flex-basis: 5%; 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%,
);
} }