mirror of
https://github.com/papercss/papercss
synced 2024-05-17 21:26:42 +02:00
Shorten class names
This commit is contained in:
vanillaSlice
parent
f5c6bd7a39
commit
0e52dfc44d
|
|
@ -5,25 +5,25 @@ description: PaperCSS Progress Bars
|
|||
Progress components are built with two HTML elements:
|
||||
|
||||
* A `.progress` wrapper element.
|
||||
* A `.progress-bar` element to show the progress so far.
|
||||
* A `.bar` element to show the progress so far.
|
||||
|
||||
### Basic usage
|
||||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-0"></div>
|
||||
<div class="bar w-0"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-25"></div>
|
||||
<div class="bar w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-50"></div>
|
||||
<div class="bar w-50"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-75"></div>
|
||||
<div class="bar w-75"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-100"></div>
|
||||
<div class="bar w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,45 +32,45 @@ Progress components are built with two HTML elements:
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-0"></div>
|
||||
<div class="bar w-0"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-25"></div>
|
||||
<div class="bar w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-50"></div>
|
||||
<div class="bar w-50"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-75"></div>
|
||||
<div class="bar w-75"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-100"></div>
|
||||
<div class="bar w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The default progress bar width is 0%.
|
||||
Note how we can specify the width using `.w-50`, `.w-75`, etc. If a width class is not provided then 0% is used as default.
|
||||
|
||||
### Backgrounds
|
||||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-25"></div>
|
||||
<div class="bar w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-40"></div>
|
||||
<div class="bar secondary w-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-55"></div>
|
||||
<div class="bar success w-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-70"></div>
|
||||
<div class="bar warning w-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-85"></div>
|
||||
<div class="bar danger w-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100"></div>
|
||||
<div class="bar muted w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -79,22 +79,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-25"></div>
|
||||
<div class="bar w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-40"></div>
|
||||
<div class="bar secondary w-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-55"></div>
|
||||
<div class="bar success w-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-70"></div>
|
||||
<div class="bar warning w-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-85"></div>
|
||||
<div class="bar danger w-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100"></div>
|
||||
<div class="bar muted w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -103,22 +103,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
|
|||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-25">25%</div>
|
||||
<div class="bar w-25">25%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-40">40%</div>
|
||||
<div class="bar secondary w-40">40%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-55">55%</div>
|
||||
<div class="bar success w-55">55%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-70">70%</div>
|
||||
<div class="bar warning w-70">70%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-85">85%</div>
|
||||
<div class="bar danger w-85">85%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100">100%</div>
|
||||
<div class="bar muted w-100">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,22 +127,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-25">25%</div>
|
||||
<div class="bar w-25">25%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-40">40%</div>
|
||||
<div class="bar secondary w-40">40%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-55">55%</div>
|
||||
<div class="bar success w-55">55%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-70">70%</div>
|
||||
<div class="bar warning w-70">70%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-85">85%</div>
|
||||
<div class="bar danger w-85">85%</div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-100">100%</div>
|
||||
<div class="bar muted w-100">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -151,22 +151,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
|
|||
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-striped progress-25"></div>
|
||||
<div class="bar striped w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-striped progress-40"></div>
|
||||
<div class="bar striped secondary w-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-striped progress-55"></div>
|
||||
<div class="bar striped success w-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-striped progress-70"></div>
|
||||
<div class="bar striped warning w-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-striped progress-85"></div>
|
||||
<div class="bar striped danger w-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-striped progress-100"></div>
|
||||
<div class="bar striped muted w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -175,22 +175,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
|
|||
```html
|
||||
<div class="row">
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-primary progress-striped progress-25"></div>
|
||||
<div class="bar striped w-25"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-secondary progress-striped progress-40"></div>
|
||||
<div class="bar striped secondary w-40"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-success progress-striped progress-55"></div>
|
||||
<div class="bar striped success w-55"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-warning progress-striped progress-70"></div>
|
||||
<div class="bar striped warning w-70"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-danger progress-striped progress-85"></div>
|
||||
<div class="bar striped danger w-85"></div>
|
||||
</div>
|
||||
<div class="progress margin-bottom">
|
||||
<div class="progress-bar progress-muted progress-striped progress-100"></div>
|
||||
<div class="bar striped muted w-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
.progress {
|
||||
@include border-style(5);
|
||||
border: 2px solid $primary;
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||
box-shadow: 2px 8px 4px -6px hsla(0%, 0%, 0%, 0.3);
|
||||
height: 1.2rem;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@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 {
|
||||
.bar {
|
||||
@include border-style(5);
|
||||
@include transition;
|
||||
background-color: $primary-light;
|
||||
|
|
@ -24,29 +19,34 @@
|
|||
text-align: center;
|
||||
width: 0%;
|
||||
|
||||
&.progress-striped {
|
||||
@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);
|
||||
}
|
||||
|
||||
&.striped {
|
||||
@include striped-background($primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
.progress-#{$colorName} {
|
||||
background-color: $color-light;
|
||||
|
||||
&.progress-striped {
|
||||
@include striped-background($color-light);
|
||||
@each $colorName, $color, $color-light in $colors {
|
||||
&.#{$colorName} {
|
||||
background-color: $color-light;
|
||||
|
||||
&.striped {
|
||||
@include striped-background($color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 100 {
|
||||
.progress-#{$i} {
|
||||
width: $i + %;
|
||||
@for $i from 0 through 100 {
|
||||
&.w-#{$i} {
|
||||
width: $i + %;
|
||||
}
|
||||
}
|
||||
|
||||
&.w-0,
|
||||
&.w-100 {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-0,
|
||||
.progress-100 {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue