<mark> elements<mark> elementsThe progress module's styling of <progress> elements is highly customizable.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $progress-back-color | Color | +Background color for <progress> elements | #eeeeee | +
| $progress-fore-color | Color | +Progress bar color for <progress> elements | #01579b | +
| $progress-height | Height | +Height for <progress> elements | 14px | +
| $progress-max-value | integer | +Arithmetic max value for <progress> elements | 1000 | +
| $progress-border-style | Border | +Border style for <progress> elements | 1px solid #bdbdbd | +
| $progress-border-radius | Border radius | +Border radius for <progress> elements | 1px | +
| $progress-top-bottom-margin | Margin (single value) | +Top and bottom margin for <progress> elements | 2px | +
| $progress-left-right-margin | Margin (single value) | +Left and right margin for <progress> elements | 8px | +
| $progress-box-shadow | Box shadow | +Box shadow for <progress> elements | 0 1px 3px rgba(0,0,0, 0.1) | +
The progress module's donut spinner uses a custom class and a few variables for custmization.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-name | String | +Class name for donut spinner components | 'spinner-donut' | +
| $spinner-donut-back-color | Color | +Background color for donut spinner components | #e3f2fd | +
| $spinner-donut-fore-color | Color | +Foreground color for donut spinner components | #1565c0 | +
| $spinner-donut-border-thickness | Border width | +Border width for donut spinner components | 4px | +
| $spinner-donut-size | Size (single value, px preferred) |
+ The size of donut spinner components (determines multiple values of the elements) | 20px | +
The progress module contains a couple of mixins for adding custom styles to <progress> elements (color and style variants), as well as a mixin for creating inline progress bars.
| Mixin | Description |
|---|---|
| make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color. $progress-alt-back-color) | +Creates a new <progress> color variant using the specified values. |
+
| make-progress-alt-style ($progress-alt-name, $progress-alt-height,$progress-alt-top-bottom-margin,$progress-alt-left-right-margin, $progress-alt-border-style, $progress-alt-border-radius, $progress-alt-box-shadow) | +Creates a new <progress> style variant using the specified values. |
+
| make-progress-inline ($progress-inline-name, $progress-inline-width) | +Creates a new <progress> style variant using the specified values. |
+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-alt-name | String | +Class name for the <progress> color variant | 'secondary' | +
| $progress-alt-fore-color | Color | +Foreground color for the <progress> color variant | #e53935 | +
| $progress-alt-back-color | Color | +(Optional) Background color for the <progress> color variant | #eeeeee | +
@include make-progress-alt-color ('secondary', #e53935, #eeeeee);+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-alt-name | String | +Class name for the <progress> style variant | 'nano' | +
| $progress-alt-height | Height | +Height for the <progress> style variant | 2px | +
| $progress-alt-top-bottom-margin | Margin (single value) | +(Optional) Top and bottom margin for the <progress> style variant | 1px | +
| $progress-alt-left-right-margin | Margin (single value) | +(Optional) Left and right margin for the <progress> elements | 1px | +
| $progress-alt-border-style | Border | +(Optional) Border stylefor the <progress> style variant | 1px solid #bdbdbd | +
| $progress-alt-border-radius | Border radius | +(Optional) Border radius for the <progress> style variant | 1px | +
| $progress-alt-box-shadow | Box shadow | +(Optional) Box shadow for the <progress> style variant | 0 1px 3px rgba(0,0,0, 0.1) | +
@include make-progress-alt-style ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $progress-inline-name | String | +Class name for the <progress> inline variant | 'inline' | +
| $progress-inline-width | Width (percentage preferred) | +Width of the <progress> inline variant | 60% | +
@include make-progress-inline ('inline', 60%);+
The progress module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).
| Mixin | Description |
|---|---|
| make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color. $spinner-donut-alt-fore-color) | +Creates a new donut spinner color variant using the specified values. | +
| make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size, $spinner-donut-alt-border-thickness) | +Creates a new donut spinner style variant using the specified values. | +
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-alt-name | String | +Class name for the donut spinner color variant | 'secondary' | +
| $spinner-donut-alt-back-color | Color | +Background color for the donut spinner color variant | #ffebee | +
| $spinner-donut-alt-fore-color | Color | +(Optional) Text color for the donut spinner color variant | #c62828 | +
@include make-spinner-donut-alt-color ('secondary', #ffebee, #c62828);+
| Parameter | Type | Description | Sample value |
|---|---|---|---|
| $spinner-donut-alt-name | String | +Class name for the donut spinner style variant | 'large' | +
| $spinner-donut-alt-size | Size (single value, px preferred) |
+ Size of the donut spinner style variant | 32px | +
| $spinner-donut-alt-border-thickness | Border width | +(Optional) Border thickness for the donut spinner style variant | 6px | +
@include make-alert-alt-style ('large', 32px, 6px);+
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 7d04cc2..e0d6225 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -975,3 +975,4 @@ - Added base text and styles for all customization pages not yet finished. - Documented `tab` module's customization. - Documented `contextual` module's customization. +- Documented `progress` module's customization.