Foundation - Progress Bar SASS Reference


Advertisements

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in project's settings file that makes this component's default styles to get customized.

Sr.No. Name & Description Type Default Value
1

$progress-height

It represents the progress bar's height.

Number 1rem
2

$progress-background

It represents the progress bar's background color.

Color $medium-gray
3

$progress-margin-bottom

It represents the progress bar's bottom margin.

Number $global-margin
4

$progress-meter-background

It represents the default color of the meter of the progress bar.

Color $primary-color
5

$progress-radius

It represents the default progress bar's radius.

Number $global-radius

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

progress-container

@include progress-container;

It adds styles to the container of the progress bar.

progress-meter

@include progress-meter;

It adds styles to the progress bar's inner meter.

progress-meter-text

@include progress-meter-text;

It adds styles to the text in meter of the progress bar.

foundation_media.htm
Advertisements