deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-01 21:42:22 +02:00
Code Issues Projects Releases Wiki Activity

Shorten class names

Browse source
This commit is contained in:
vanillaSlice 2018-10-07 13:45:00 +01:00
parent f5c6bd7a39
commit 0e52dfc44d
2 changed files with 72 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
docs/content/docs/components/progress.md
View file

@ -5,25 +5,25 @@ description: PaperCSS Progress Bars
Progress components are built with two HTML elements: Progress components are built with two HTML elements:
* A `.progress` wrapper element. * 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 ### Basic usage
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-0"></div> <div class="bar w-0"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-25"></div> <div class="bar w-25"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-50"></div> <div class="bar w-50"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-75"></div> <div class="bar w-75"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-100"></div> <div class="bar w-100"></div>
</div> </div>
</div> </div>
@ -32,45 +32,45 @@ Progress components are built with two HTML elements:
```html ```html
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-0"></div> <div class="bar w-0"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-25"></div> <div class="bar w-25"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-50"></div> <div class="bar w-50"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-75"></div> <div class="bar w-75"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-100"></div> <div class="bar w-100"></div>
</div> </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 ### Backgrounds
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-25"></div> <div class="bar w-25"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40"></div> <div class="bar secondary w-40"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-success progress-55"></div> <div class="bar success w-55"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-70"></div> <div class="bar warning w-70"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-85"></div> <div class="bar danger w-85"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-muted progress-100"></div> <div class="bar muted w-100"></div>
</div> </div>
</div> </div>
@ -79,22 +79,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
```html ```html
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-25"></div> <div class="bar w-25"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-secondary progress-40"></div> <div class="bar secondary w-40"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-success progress-55"></div> <div class="bar success w-55"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-warning progress-70"></div> <div class="bar warning w-70"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-danger progress-85"></div> <div class="bar danger w-85"></div>
</div> </div>
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-muted progress-100"></div> <div class="bar muted w-100"></div>
</div> </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="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-25">25%</div> <div class="bar w-25">25%</div>
</div> </div>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
</div> </div>
@ -127,22 +127,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
```html ```html
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <div class="progress margin-bottom">
<div class="progress-bar progress-primary progress-25">25%</div> <div class="bar w-25">25%</div>
</div> </div>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
</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="row">
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
</div> </div>
@ -175,22 +175,22 @@ Note how we can specify the width using `.progress-50`, `.progress-75`, etc. The
```html ```html
<div class="row"> <div class="row">
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
<div class="progress margin-bottom"> <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>
</div> </div>
``` ```

48
src/components/_progress.scss
View file

@ -1,17 +1,12 @@
.progress { .progress {
@include border-style(5); @include border-style(5);
border: 2px solid $primary; 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; height: 1.2rem;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@mixin striped-background($base-color) { .bar {
$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(5); @include border-style(5);
@include transition; @include transition;
background-color: $primary-light; background-color: $primary-light;
@ -24,29 +19,34 @@
text-align: center; text-align: center;
width: 0%; 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); @include striped-background($primary-light);
} }
}
@each $colorName, $color, $color-light in $colors { @each $colorName, $color, $color-light in $colors {
.progress-#{$colorName} { &.#{$colorName} {
background-color: $color-light; background-color: $color-light;
&.progress-striped { &.striped {
@include striped-background($color-light); @include striped-background($color-light);
}
} }
} }
}
@for $i from 0 through 100 { @for $i from 0 through 100 {
.progress-#{$i} { &.w-#{$i} {
width: $i + %; width: $i + %;
}
}
&.w-0,
&.w-100 {
border-right: 0;
} }
} }
.progress-0,
.progress-100 {
border-right: 0;
}
} }