deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-27 19:12:41 +02:00
Code Issues Projects Releases Wiki Activity

Created progress bar

Browse source
This commit is contained in:
vanillaSlice 2018-09-29 16:16:22 +01:00
parent a996b77b4f
commit 71125aa0d2
3 changed files with 179 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
docs/content/docs/components/progress.md Normal file
View file

@ -0,0 +1,129 @@
---
title: Progress
description: PaperCSS Progress Bars
---
### Simple example
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-0"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-25"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-50"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-75"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-0"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-25"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-50"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-75"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-100"></div>
</div>
</div>
```
### Backgrounds
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-20"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-success progress-60"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-80"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-20"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-success progress-60"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-80"></div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-100"></div>
</div>
</div>
```
### Labels
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-20">20%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-success progress-60">60%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-80">80%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-100">100%</div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-20">20%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-success progress-60">60%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-80">80%</div>
</div>
<div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-100">100%</div>
</div>
</div>
```

49
src/components/_progress.scss Normal file
View file

@ -0,0 +1,49 @@
.progress {
@include border-style(5);
border: 2px solid $primary;
height: 1.5rem;
overflow: hidden;
width: 100%;
@mixin progress-bar-background($color) {
$color-dark: darken($color, 10%);
background: $color -webkit-repeating-linear-gradient(45deg, $color, $color 0.1rem, $color-dark 0.1rem, $color-dark 0.25rem);
background: $color -o-repeating-linear-gradient(45deg, $color, $color 0.1rem, $color-dark 0.1rem, $color-dark 0.25rem);
background: $color repeating-linear-gradient(45deg, $color, $color 0.1rem, $color-dark 0.1rem, $color-dark 0.25rem);
}
.progress-bar {
@include border-style(2);
@include progress-bar-background($primary-light);
align-items: center;
border-right: 2px solid $primary;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
font-size: 0.75rem;
height: 100%;
justify-content: center;
width: 0%;
}
@each $colorName, $color, $color-light in $colors {
.progress-#{$colorName} {
@include progress-bar-background($color-light);
}
}
@for $i from 0 through 100 {
.progress-#{$i} {
width: $i + %;
}
}
.progress-0,
.progress-100 {
border-right: 0;
}
}

1
src/styles.scss
View file

@ -29,6 +29,7 @@
@import 'components/forms';
@import 'components/modals';
@import 'components/popovers';
@import 'components/progress';
@import 'components/tabs';
@import 'components/utilities';
@import 'components/navbar';