diff --git a/Progress-Bars.md b/Progress-Bars.md new file mode 100644 index 0000000..308e7f9 --- /dev/null +++ b/Progress-Bars.md @@ -0,0 +1,61 @@ +The progress bar styles allow you to easily create and customize lightweight progress bars on the fly. In the [_progress.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_progress.scss) file, you can find two **mixins** that can be used to create your own progress bars and style them the way you want. + +## Making a progress bar wrapper and base style + +To make a new wrapper for progress bars as well as a base style for them, use the `make-progress` **mixin**. + +### Definition + + make-progress( + $progress-name, + $progress-height, + $progress-border-radius, + $progress-bg-color, + $progress-font-size, + $progress-bar-color, + $progress-bar-bg-color) + +### Parameters + +- $progress-name : The class name of the progress wrapper. +- $progress-height : The height of the progress wrapper. +- $progress-border-radius : The border radius of the progress wrapper. +- $progress-bg-color : The background color of the progress wrapper. [1] +- $progress-font-size : The font size of the progress bar's text (if any). +- $progress-bar-color : The progress bar's text color. +- $progress-bar-bg-color : The progress bar's background color. + +**Notes:** + +- [1] : The background color of the progress wrapper should be a different color than the page's background to make sure that it is visible. +- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`. + +## Adding custom styles + +To add a new custom style class, use the `make-progress-bar-variant` **mixin**. + +### Definition + + make-progress-bar-variant( + $progress-name, + $progress-bar-variant-name, + $progress-bar-variant-color, + $progress-bar-variant-bg-color) + +### Parameters + +- $progress-name : The class name of the progress wrapper. [1] +- $progress-bar-variant-name : The class name of the progress bar variant. +- $progress-bar-variant-color : The progress bar variant's text color. +- $progress-bar-variant-bg-coor : The progress bar variant's background color. + +**Notes:** + +- [1] : The name of $progress-name should match the one specified in `make-progress` for the progress bar variant to work correctly. +- [2] : This mixin should be used in combination with `make-progress` and is suggested that you use it after `make-progress`. + +## Remarks + +- After creting a base progress style with `make-progress`, multiple styles can be defined using the other mixin. +- Please exercise caution when naming style classes, especially if the names are the names of web-safe colors. For example if you want to create the `.progress.red` class, pass the name *red* in quotation marks like `'red'` to avoid automatic conversion. +- There is no mixin that allows users to alter the size of their progress bars. If such a functionality is needed, you can add a custom class that affects the height of the wrapper as well as the font-size of the progress bars. \ No newline at end of file