Fundação - Referência Flex Video SASS
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 em um arquivo de configurações de projeto que faz com que os estilos padrão do componente sejam personalizados.
| Sr. Não. | Nome e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 |
$flexvideo-padding-top Ele representa o preenchimento acima do contêiner do vídeo flex. |
Número | rem-calc (25) |
| 2 |
$flexvideo-margin-bottom Ele representa a margem abaixo do container do vídeo flex. |
Número | rem-calc (16) |
| 3 |
$flexvideo-ratio Ele representa o preenchimento usado para criar uma proporção de 4: 3. |
Número | 4 por 3 |
| 4 |
$flexvideo-ratio-widescreen Ele representa o preenchimento usado para criar uma proporção de 16: 9. |
Número | 16 por 9 |
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.
flex-video
@include flex-video($ratio);É usado para criar um contêiner de vídeo flexível. Ele aceita o parâmetro $ ratio que é explicado abaixo.
| Sr. Não. | Parâmetro e Descrição | Tipo | Valor padrão |
|---|---|---|---|
| 1 |
$ratio Ele representa a proporção do contêiner e formatado como x por y . |
Lista | $ flexvideo-ratio |
Funções
flex-video
flex-video($ratio)Ele cria uma altura em porcentagem que é usada como preenchimento no contêiner de vídeo flex. Aceita o parâmetro $ ratio , que é do tipo List . O parâmetro $ ratio representa a proporção do contêiner e formatado como x por y .