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

Merge branch 'vanillaSlice-feature-progress-bar' into develop

Browse source
This commit is contained in:
rhyneav 2018-10-21 17:35:54 -04:00
parent af5ee37717 b0c6a0ee6a
commit 356897fa7c
5 changed files with 404 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,196 @@
---
title: Progress
description: PaperCSS Progress Bars
---
Progress components are built with two HTML elements:
* A `.progress` wrapper element.
* A `.bar` element to show the progress so far.
### Basic usage
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-0"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-50"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-75"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-0"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-50"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-75"></div>
</div>
<div class="progress margin-bottom">
<div class="bar w-100"></div>
</div>
</div>
```
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="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100"></div>
</div>
</div>
```
### Labels
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25">25%</div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55">55%</div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70">70%</div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85">85%</div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100">100%</div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar w-25">25%</div>
</div>
<div class="progress margin-bottom">
<div class="bar secondary w-40">40%</div>
</div>
<div class="progress margin-bottom">
<div class="bar success w-55">55%</div>
</div>
<div class="progress margin-bottom">
<div class="bar warning w-70">70%</div>
</div>
<div class="progress margin-bottom">
<div class="bar danger w-85">85%</div>
</div>
<div class="progress margin-bottom">
<div class="bar muted w-100">100%</div>
</div>
</div>
```
### Striped
<div class="row">
<div class="progress margin-bottom">
<div class="bar striped w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped muted w-100"></div>
</div>
</div>
#### Code
```html
<div class="row">
<div class="progress margin-bottom">
<div class="bar striped w-25"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped secondary w-40"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped success w-55"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped warning w-70"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped danger w-85"></div>
</div>
<div class="progress margin-bottom">
<div class="bar striped muted w-100"></div>
</div>
</div>
```

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

@ -0,0 +1,47 @@
.progress {
@include border-style(5);
border: 2px solid $primary;
box-shadow: $shadow-hover;
height: 1.2rem;
overflow: hidden;
width: 100%;
.bar {
@include border-style(5);
@include transition;
background-color: $primary-light;
border-right: 2px solid $primary;
display: flex;
flex-direction: column;
font-size: 0.6rem;
height: 100%;
justify-content: center;
text-align: center;
width: 0%;
&.striped {
@include striped-background($primary-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 {
&.w-#{$i} {
width: $i + %;
}
}
&.w-0,
&.w-100 {
border-right: 0;
}
}
}

134
src/core/_config.scss
View file

@ -78,137 +78,3 @@ $shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
// Mixins
/**
Assign a border style to a component selector.
@param integer
@default 1
*/
@mixin border-style($style: 1) {
@if $style==1 {
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
}
@if $style==2 {
border-bottom-left-radius: 185px 25px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 125px 25px;
border-top-right-radius: 10px 205px;
}
@if $style==3 {
border-bottom-left-radius: 225px 15px;
border-bottom-right-radius: 15px 255px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 255px 15px;
}
@if $style==4 {
border-bottom-left-radius: 25px 115px;
border-bottom-right-radius: 155px 25px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 25px 150px;
}
@if $style==5 {
border-bottom-left-radius: 20px 115px;
border-bottom-right-radius: 15px 105px;
border-top-left-radius: 250px 15px;
border-top-right-radius: 25px 80px;
}
@if $style==6 {
border-bottom-left-radius: 15px 225px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 28px 125px;
border-top-right-radius: 100px 30px;
}
}
/**
Mixin for setting responsive breakpoints
@param string | integer
@default null
*/
@mixin resp($max:null, $min:null) {
@if $max == large or $max == lg { $max: $large-screen; }
@if $max == medium or $max == md { $max: $medium-screen; }
@if $max == small or $max == sm { $max: $small-screen; }
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
@if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
@else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
@else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
@else { @error 'no matching size found';}
}
/**
Useful helper mixins
*/
@mixin hr-after() {
color: lighten($primary, 30%);
content: '~~~';
display: block;
font-size: 1.5rem;
position: relative;
text-align: center;
}
@mixin center-all() {
align-items: center;
justify-content: center;
}
@mixin col-size($percent) {
flex: 0 0 $percent;
max-width: $percent;
}
@mixin li-bullet($char) {
li::before {
content: $char;
}
}
/*
Add transition styles to selector
@param string
@default all | 235ms | ease-in-out | 0
*/
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
transition: $name $duration $animation $delay;
}
/**
Set the shadow type for a component
@param string
@default regular
*/
@mixin shadow($type: regular) {
@if $type == hover {
box-shadow: $shadow-hover;
transform: translate3d(0, 2px, 0);
} @else if $type == small {
@include transition($animation: ease);
box-shadow: $shadow-small;
} @else if $type == regular {
@include transition($animation: ease);
box-shadow: $shadow-regular;
} @else if $type == large {
@include transition($animation: ease);
box-shadow: $shadow-large;
} @else {
@error 'wrong $type. available types: small | regular | large | hover';
}
}
//function for string replacement
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}

159
src/core/_mixins.scss Normal file
View file

@ -0,0 +1,159 @@
/**
PaperCSS Mixins
*/
/**
Assign a border style to a component selector.
@param integer
@default 1
*/
@mixin border-style($style: 1) {
@if $style==1 {
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
}
@if $style==2 {
border-bottom-left-radius: 185px 25px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 125px 25px;
border-top-right-radius: 10px 205px;
}
@if $style==3 {
border-bottom-left-radius: 225px 15px;
border-bottom-right-radius: 15px 255px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 255px 15px;
}
@if $style==4 {
border-bottom-left-radius: 25px 115px;
border-bottom-right-radius: 155px 25px;
border-top-left-radius: 15px 225px;
border-top-right-radius: 25px 150px;
}
@if $style==5 {
border-bottom-left-radius: 20px 115px;
border-bottom-right-radius: 15px 105px;
border-top-left-radius: 250px 15px;
border-top-right-radius: 25px 80px;
}
@if $style==6 {
border-bottom-left-radius: 15px 225px;
border-bottom-right-radius: 20px 205px;
border-top-left-radius: 28px 125px;
border-top-right-radius: 100px 30px;
}
}
/**
Mixin for setting responsive breakpoints
@param string | integer
@default null
*/
@mixin resp($max:null, $min:null) {
@if $max == large or $max == lg { $max: $large-screen; }
@if $max == medium or $max == md { $max: $medium-screen; }
@if $max == small or $max == sm { $max: $small-screen; }
@if $max == xsmall or $max == xs { $max: $xsmall-screen; }
@if ($min != null and $max != null) { @media only screen and (max-width: $max) and (min-width: $min) { @content; } }
@else if($max != null and $min == null) { @media only screen and (max-width: $max) { @content; } }
@else if($min != null and $max == null) { @media only screen and (min-width: $min) { @content; } }
@else { @error 'no matching size found';}
}
/**
Useful helper mixins
*/
@mixin hr-after() {
color: lighten($primary, 30%);
content: '~~~';
display: block;
font-size: 1.5rem;
position: relative;
text-align: center;
}
@mixin center-all() {
align-items: center;
justify-content: center;
}
@mixin col-size($percent) {
flex: 0 0 $percent;
max-width: $percent;
}
@mixin li-bullet($char) {
li::before {
content: $char;
}
}
/*
Add transform: translate() with browser prefixes.
Same syntax for translate() and translate3d()
To get 3D add a $z value and set 'true'
@param string | boolean
@default 0 | false
*/
@mixin translate($x, $y, $z: 0, $transform3d: false) {
@if $transform3d {
transform: translate3d($x, $y, $z);
} @else {
transform: translate($x, $y);
}
}
/*
Add global transition styles to selector
@param string
@default all | 235ms | ease-in-out | 0
*/
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
transition: $name $duration $animation $delay;
}
/**
Set the shadow type for a component
@param string
@default regular
*/
@mixin shadow($type: regular) {
@if $type == hover {
@include translate(0, 2px, 0, true);
box-shadow: $shadow-hover;
} @else if $type == small {
@include transition($animation: ease);
box-shadow: $shadow-small;
} @else if $type == regular {
@include transition($animation: ease);
box-shadow: $shadow-regular;
} @else if $type == large {
@include transition($animation: ease);
box-shadow: $shadow-large;
} @else {
@error 'wrong $type. available types: small | regular | large | hover';
}
}
//function for string replacement
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/**
Sets a striped background on a component
@param string
*/
@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);
}

2
src/styles.scss
View file

@ -2,6 +2,7 @@
/* PaperCSS core */
@import 'core/config';
@import 'core/mixins';
@import 'core/reset';
/* Layout styling */
@ -29,6 +30,7 @@
@import 'components/forms';
@import 'components/modals';
@import 'components/popovers';
@import 'components/progress';
@import 'components/tabs';
@import 'components/utilities';
@import 'components/navbar';