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

removed old component

Browse Source
This commit is contained in:
Emily Brick 2018-10-12 10:53:17 -04:00
parent 1650d696ec
commit 3e2ea4cca6
2 changed files with 47 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,16 +41,17 @@ status: Experimental
--> -->
```html ```html
<div class="progress-bar my-4"> <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden my-4">
<div class="progress" style="width: 50%">
</div>
</div>
<span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden">
<span class="bg-green" style="width:50%"></span> <span class="bg-green" style="width:50%"></span>
<span class="bg-purple" style="width:25%"></span> <span class="bg-purple" style="width:25%"></span>
<span class="bg-red" style="width:5%"></span> <span class="bg-red" style="width:5%"></span>
</span> </span>
<span class="Progress">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="Progress-value bg-purple" style="width: 25%;"></span>
<span class="Progress-value bg-red" style="width: 5%;"></span>
</span>
``` ```
<!-- %enddocs --> <!-- %enddocs -->
@ -63,15 +64,17 @@ status: Experimental
--> -->
```html ```html
<div class="progress-bar progress-bar-small my-4"> <span class="flex-progress-bar-small d-flex bg-gray rounded-1 overflow-hidden 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="bg-green" style="width:50%"></span> <span class="bg-green" style="width:50%"></span>
<span class="bg-purple" style="width:25%"></span> <span class="bg-purple" style="width:25%"></span>
<span class="bg-red" style="width:5%"></span> <span class="bg-red" style="width:5%"></span>
</span> </span>
<span class="Progress Progress--small">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="Progress-value bg-purple" style="width: 25%;"></span>
<span class="Progress-value bg-red" style="width: 5%;"></span>
</span>
``` ```
## Progress Bar With Tooltip ## Progress Bar With Tooltip
@ -83,18 +86,16 @@ 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 my-4"> <span class="flex-progress-bar d-flex bg-gray rounded-1 overflow-hidden my-4">
<div class="progress" style="width: 50%"> <span class="flex-progress bg-green" style="width: 50%"></span>
</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 bg-green" style="width: 50%"></span>
</span> </span>
</div> </div>
<div class="tooltipped tooltipped-n mt-3" aria-label="78 done / 6 in progress / 2 to do">
<span class="Progress">
<span class="Progress-value bg-green" style="width: 50%;"></span>
</span>
</div>
``` ```
## WIP Reverse Progress ## WIP Reverse Progress

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

@ -1,67 +1,32 @@
// A green progress bar on a grey background. // Progress Bar
.progress-bar { // Intended to replace custom styled progress flex-progress-bar-small
display: block;
height: 15px;
overflow: hidden; // Crop the progress bar within for rounded corners
background-color: lighten($gray-200, 3%);
border-radius: 3px;
.progress {
display: block;
height: 100%;
background-color: darken($green-400, 5%);
}
}
// Reverse progress bar shrinks revealing the bar color which is the container background
.reverse-progress {
&-container {
position: relative;
height: 3px;
background-color: $gray-200;
background-image: linear-gradient(
to right,
$bg-green,
$blue-600,
$purple-800,
$red-600,
$orange-500
);
background-size: 100% 3px;
}
&-bar {
position: absolute;
right: 0;
height: 100%;
background-color: $gray-200;
}
}
// used new milestones show page for issue reordering
.progress-bar-small {
height: 10px;
}
// Used with table-list header on new milestones show page
// A more robust fix without nesting requires refactoring issue helper
.progress-bar-inline {
.progress-bar {
width: 100%;
border-color: $gray-200;
border-style: solid;
border-width: 1px;
border-top: 0;
border-radius: 0;
}
}
// Flexbox Refactoring for Primer CSS Component //
// Flex and Functional CSS Refactoring Approach
.flex-progress-bar { .flex-progress-bar {
height: 15px; height: 10px;
} }
.flex-progress-bar-small { .flex-progress-bar-small {
height: 10px; height: 8px;
}
// BEM/Semantic Approach
.Progress {
height: 10px;
display: flex;
background-color: $gray-200;
border-radius: $border-radius;
overflow: hidden;
}
.Progress-value {
}
.Progress--small {
height: 8px;
}
.Progress--tiny {
height: 5px;
} }