mirror of
https://github.com/papercss/papercss
synced 2024-05-27 19:12:41 +02:00
Polishing
This commit is contained in:
vanillaSlice
parent
bbd8aadf75
commit
f5c6bd7a39
|
|
@ -2,23 +2,28 @@
|
|||
title: Progress
|
||||
description: PaperCSS Progress Bars
|
||||
---
|
||||
### Simple example
|
||||
Progress components are built with two HTML elements:
|
||||
|
||||
* A `.progress` wrapper element.
|
||||
* A `.progress-bar` element to show the progress so far.
|
||||
|
||||
### Basic usage
|
||||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-0"></div>
|
||||
<div class="progress-bar progress-0"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-25"></div>
|
||||
<div class="progress-bar progress-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-50"></div>
|
||||
<div class="progress-bar progress-50"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-75"></div>
|
||||
<div class="progress-bar progress-75"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-100"></div>
|
||||
<div class="progress-bar progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -27,40 +32,45 @@ description: PaperCSS Progress Bars
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-0"></div>
|
||||
<div class="progress-bar progress-0"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-25"></div>
|
||||
<div class="progress-bar progress-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-50"></div>
|
||||
<div class="progress-bar progress-50"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-75"></div>
|
||||
<div class="progress-bar progress-75"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-100"></div>
|
||||
<div class="progress-bar progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The default progress bar width is 0%.
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-20"></div>
|
||||
<div class="progress-bar progress-primary progress-25"></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 class="progress-bar progress-success progress-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-80"></div>
|
||||
<div class="progress-bar progress-warning progress-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-100"></div>
|
||||
<div class="progress-bar progress-danger progress-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,19 +79,22 @@ description: PaperCSS Progress Bars
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-20"></div>
|
||||
<div class="progress-bar progress-primary progress-25"></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 class="progress-bar progress-success progress-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-80"></div>
|
||||
<div class="progress-bar progress-warning progress-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-100"></div>
|
||||
<div class="progress-bar progress-danger progress-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -90,19 +103,22 @@ description: PaperCSS Progress Bars
|
|||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-20">20%</div>
|
||||
<div class="progress-bar progress-primary progress-25">25%</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 class="progress-bar progress-success progress-55">55%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-80">80%</div>
|
||||
<div class="progress-bar progress-warning progress-70">70%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-100">100%</div>
|
||||
<div class="progress-bar progress-danger progress-85">85%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -111,19 +127,70 @@ description: PaperCSS Progress Bars
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-20">20%</div>
|
||||
<div class="progress-bar progress-primary progress-25">25%</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 class="progress-bar progress-success progress-55">55%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-80">80%</div>
|
||||
<div class="progress-bar progress-warning progress-70">70%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-100">100%</div>
|
||||
<div class="progress-bar progress-danger progress-85">85%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Striped
|
||||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-striped progress-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-striped progress-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-striped progress-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-striped progress-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-striped progress-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-striped progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-striped progress-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-striped progress-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-striped progress-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-striped progress-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-striped progress-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-striped progress-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,30 +1,41 @@
|
|||
.progress {
|
||||
@include border-style(5);
|
||||
border: 2px solid $primary;
|
||||
height: 1.5rem;
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
height: 1.2rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@mixin progress-bar-background($color) {
|
||||
$color-dark: darken($color, 10%);
|
||||
background: $color repeating-linear-gradient(45deg, $color, $color 0.1rem, $color-dark 0.1rem, $color-dark 0.25rem);
|
||||
@mixin striped-background($base-color) {
|
||||
$color-dark: darken($base-color, 10%);
|
||||
background: repeating-linear-gradient(45deg, $base-color, $base-color 0.25rem, $color-dark 0.25rem, $color-dark 0.5rem);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@include border-style(2);
|
||||
@include progress-bar-background($primary-light);
|
||||
align-items: center;
|
||||
@include border-style(5);
|
||||
@include transition;
|
||||
background-color: $primary-light;
|
||||
border-right: 2px solid $primary;
|
||||
display: flex;
|
||||
font-size: 0.75rem;
|
||||
flex-direction: column;
|
||||
font-size: 0.6rem;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 0%;
|
||||
|
||||
&.progress-striped {
|
||||
@include striped-background($primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.progress-#{$colorName} {
|
||||
@include progress-bar-background($color-light);
|
||||
background-color: $color-light;
|
||||
|
||||
&.progress-striped {
|
||||
@include striped-background($color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue