Foundation - Progress Bar SASS Reference
Descrição
Você pode alterar os estilos dos componentes usando a Referência SASS.
Variáveis
A tabela a seguir lista as variáveis SASS no arquivo de configurações do projeto que faz com que os estilos padrão deste componente sejam personalizados.
| Sr. Não. | Nome e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 |
$progress-height Ele representa a altura da barra de progresso. |
Número | 1rem |
| 2 |
$progress-background Ele representa a cor de fundo da barra de progresso. |
Cor | $ cinza médio |
| 3 |
$progress-margin-bottom Ele representa a margem inferior da barra de progresso. |
Número | $ global-margin |
| 4 |
$progress-meter-background Representa a cor padrão do medidor da barra de progresso. |
Cor | $ cor primária |
| 5 |
$progress-radius Ele representa o raio da barra de progresso padrão. |
Número | $ global-radius |
Mixins
Para construir a saída CSS final deste componente, os seguintes mixins podem ser usados. Para construir sua própria estrutura de classes usando componentes Foundation, você mesmo pode usar os mixins.
progress-container
@include progress-container;Ele adiciona estilos ao contêiner da barra de progresso.
medidor de progresso
@include progress-meter;Ele adiciona estilos ao medidor interno da barra de progresso.
texto-medidor de progresso
@include progress-meter-text;Ele adiciona estilos ao texto no medidor da barra de progresso.