Personalizar o tema

Esta página aplica-se ao Apigee e ao Apigee Hybrid.

Veja a documentação do Apigee Edge.

Um tema consiste numa folha de estilos global que oferece um aspeto uniforme a todas as páginas do seu portal. O objetivo de um tema é permitir-lhe alterar o aspeto de todas as páginas do portal de uma só vez.

Pode personalizar, pré-visualizar e publicar o seu tema, conforme descrito nas secções seguintes.

Explorar o Editor de temas

Personalize, pré-visualize e publique o tema do seu portal no editor de temas.

Para aceder ao editor de temas:

  1. Abra a página Portais.

    IU da Cloud Console

    Na consola do Apigee in Cloud, aceda à página Distribuição > Portais.

    Aceda a Portais

    IU clássica

    Selecione Publicar > Portais na barra de navegação lateral para apresentar a lista de portais.

  2. Clique na linha do portal para o qual quer editar o tema.

  3. Abra o editor.

    IU da Cloud Console

    1. Clique em Temas.
    2. Clique em Editar.

    IU clássica

    Clique em Tema.

O editor de temas permite-lhe:

Acerca do tema base

A maioria das regras de estilo do tema base que definem o aspeto do site baseiam-se no design de materiais angular. O design material do Angular usa esquemas baseados em grelhas e componentes e estilos consistentes para oferecer uma experiência interativa unificada.

As regras de estilo são definidas através de Sassy Cascading Style Sheet (SCSS). O SCSS é um superconjunto de folhas de estilos CSS (Cascading Style Sheets) que oferece as seguintes vantagens:

  • Variáveis globais que podem ser reutilizadas em toda a folha de estilos.
  • Regras aninhadas para poupar tempo de desenvolvimento da folha de estilos.
  • Capacidade de criar mixins e funções

Por exemplo:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

O SCSS é compilado e convertido em CSS simples antes de o conteúdo ser renderizado na página Web.

Uma folha de estilos de material angular, o ficheiro SCSS de temas de material (material-theming.scss), é usado pelo tema base. Esta folha de estilos declara variáveis, funções e mixins que podem ser substituídos através de variáveis personalizadas e secções SCSS, conforme descrito no artigo Personalizar o tema através do editor de temas avançado.

Com base nas suas seleções de temas da IU, é declarado um número de variáveis SCSS que definem os estilos de tipografia, cor e esquema, e que são consumidas pela folha de estilos base. Pode substituir as variáveis indicadas na referência de variáveis do tema.

Personalizar a paleta de cores

Personalize a paleta de cores através do editor de estilos básicos ou substituindo as variáveis do tema.

Acerca das categorias da paleta de cores

As definições da paleta de cores para o portal integrado estão agrupadas nas seguintes categorias, que são definidas através do estilo de cores do material design no tema base.

Categoria Estilos
Primary Barras de ferramentas de navegação, títulos, cabeçalhos de cartões e botões
Secundário Texto <pre> e <code>
Cor de realce Navegação, links e botões com acento
Aviso Avisos e erros

Personalizar a paleta de cores com o editor de estilos básico

Personalize rapidamente as paletas de cores principal e de destaque através do editor de estilos básicos.

Para personalizar a paleta de cores através do editor de estilos básicos:

  1. Aceda ao editor de temas.

  2. Especifique as cores principais e de destaque.

    IU da Cloud Console

    1. Para personalizar a cor principal, no menu pendente Cor principal, selecione uma cor ou introduza um valor hexadecimal personalizado no campo de texto.
    2. Para personalizar a cor de destaque, no menu pendente Cor de destaque, selecione uma cor ou introduza um valor de cor hexadecimal personalizado no campo de texto.
    3. Clique em Guardar para guardar as alterações.
    4. Clique em Pré-visualizar para pré-visualizar as alterações do portal num navegador.

    IU clássica

    1. Para personalizar a cor primária, no menu pendente Cor primária, selecione uma cor ou clique em Personalizar e introduza um valor hexadecimal personalizado da cor na caixa de texto.
    2. Para personalizar a cor de destaque, no menu pendente Cor de destaque, selecione uma cor ou clique em Personalizar e introduza um valor hexadecimal personalizado da cor na caixa de texto.
    3. Clique em Guardar para guardar as alterações.
    4. Veja as alterações no painel de pré-visualização ou clique em Pré-visualizar para pré-visualizar as alterações ao portal num navegador. Nota: pode clicar na navegação do portal no painel de pré-visualização para ver as alterações em todas as páginas.

  3. Clique em Publicar para publicar o tema. É-lhe pedido que confirme a atualização.

Personalizar a paleta de cores substituindo as variáveis do tema

Para personalizar a paleta de cores substituindo as variáveis do tema, aceda ao editor de temas avançado e inclua uma ou mais das seguintes variáveis com valores ajustados na secção Variáveis para alterar, respetivamente, as cores primárias, secundárias, de realce ou de mensagem de aviso. Consulte o artigo Acerca das categorias da paleta de cores.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Veja o conteúdo do ficheiro SCSS de temas de materiais importado (material-theming.scss) para identificar as variáveis de cores predefinidas (como $mat-grey). Os valores numéricos indicam os valores de sombreado para os elementos predefinidos, mais claros e mais escuros, respetivamente.

Em alternativa, pode criar a sua própria variável de cor. Por exemplo:

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

Em seguida, use-o para alterar a paleta de cores, como mostrado no exemplo seguinte:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Personalizar a família de tipos de letra e os estilos

Personalize a família de tipos de letra e os estilos através do editor de estilos básicos ou substituindo as variáveis do tema. Também pode importar um tipo de letra personalizado.

Personalizar a família de tipos de letra e os estilos através do editor de estilos básicos

Para personalizar a família de tipos de letra e os estilos através do editor de estilos básicos:

  1. Aceda ao editor de temas.
  2. Para alterar a família de tipos de letra, selecione um valor no menu pendente Tipo de letra.
  3. Para alterar os estilos de tipo de letra, expanda a secção Estilos de tipo de letra e edite os estilos, conforme necessário, incluindo o tamanho do tipo de letra, a altura da linha e a espessura do tipo de letra para os elementos HTML pretendidos.
  4. Clique em Guardar para guardar as alterações.
  5. Clique em Pré-visualizar para pré-visualizar as alterações do portal num navegador.
  6. Clique em Publicar para publicar o tema. É-lhe pedido que confirme a atualização.

Personalizar a família de tipos de letra e os estilos substituindo as variáveis do tema

Para personalizar a família de tipos de letra e os estilos substituindo as variáveis do tema, aceda ao editor de temas avançado e inclua uma ou mais variáveis de família de tipos de letra e estilo com valores ajustados na secção Variáveis.

Por exemplo, para alterar o tipo de letra predefinido para Arial, defina a seguinte variável:

$typography-main-font-family: 'Arial';

Importar um tipo de letra personalizado

Importe um tipo de letra do Google Fonts (não incluído no conjunto de tipos de letra predefinidos) ou o seu próprio tipo de letra personalizado e, em seguida, faça referência ao tipo de letra personalizado na sua folha de estilos, conforme descrito abaixo.

Importar um tipo de letra Google

Para importar um tipo de letra do Google Fonts, aceda ao editor de temas avançado e importe o tipo de letra na secção Estilos personalizados, conforme mostrado abaixo:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Importar um tipo de letra personalizado

Importe o seu próprio tipo de letra personalizado através da regra CSS @font-face. A regra @font-face suporta vários tipos de formatos de ficheiros diferentes, incluindo TrueType (TTF), Web Open Font Format (WOFF) e muito mais.

Para importar o seu próprio tipo de letra personalizado:

  1. Opcionalmente, carregue o ficheiro de tipo de letra no gestor de recursos, conforme descrito em Carregue um ficheiro.

  2. Aceda ao editor de temas avançado e adicione a regra @font-face à secção Estilos personalizados, onde font-family especifica o nome do tipo de letra, url especifica a localização do ficheiro de tipo de letra (neste caso, o gestor de recursos), MyCustomFont.tff é o nome do seu ficheiro de tipo de letra personalizado e format especifica o formato do tipo de letra.

    @font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}

Referenciar o tipo de letra personalizado na folha de estilos

Referencie o tipo de letra personalizado numa das variáveis de família de tipos de letra e estilo na secção Variáveis. Por exemplo:

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Pode personalizar os logótipos usados no portal nas seguintes localizações:

Localização do logótipo Tamanho predefinido do ficheiro
Barra de ferramentas de navegação para computador 196 x 32 píxeis
Barra de ferramentas de navegação para dispositivos móveis156 x 32 píxeis
Favícone na barra de endereço do navegador (e noutras localizações)32 x 32 píxeis
Página de início de sessão392 x 64 píxeis

Personalize o logótipo na barra de ferramentas de navegação para apresentações em computadores e dispositivos móveis. Consoante a largura do navegador, pode ver a versão para computador ou para dispositivos móveis do logótipo.

Não pode eliminar o logótipo principal, apenas pode substituí-lo. Se não especificar um logótipo para a apresentação em dispositivos móveis, é usado o logótipo principal por predefinição.

Para personalizar o logótipo usado na barra de ferramentas de navegação para computadores e dispositivos móveis:

  1. Obtenha uma ou mais cópias do logótipo da sua empresa adequadas para utilização. Consulte a tabela anterior para ver os tamanhos recomendados.
  2. Aceda ao editor de temas.

  3. Carregue o logótipo principal.

    IU da Cloud Console

    1. No editor de temas, em Estilos básicos, Logótipo principal, clique em Procurar.
    2. Navegue até ao ficheiro do logótipo e selecione-o.
    3. Clique em Abrir.

    IU clássica

    No editor de temas, para substituir o logótipo na barra de navegação superior em ecrãs de computador:

    1. Em Estilos básicos no painel direito, clique em Ícone de carregamento Carregar no campo Logótipo principal.
    2. Procure a versão para computador do seu logótipo no diretório local.
    3. Clique em Abrir para carregar o ficheiro.

  4. Carregue o logótipo para dispositivos móveis.

    IU da Cloud Console

    1. No editor de temas, em Estilos básicos, expanda Opções de logótipo.
    2. Em Logótipo para dispositivos móveis, clique em Procurar.
    3. Localize e selecione o ficheiro do logótipo para dispositivos móveis.
    4. Clique em Abrir.

    IU clássica

    Para substituir o logótipo na barra de navegação superior em ecrãs de dispositivos móveis:

    1. Em Estilos básicos no painel direito, expanda Opções de logótipo e clique em Ícone de carregamento Carregar no campo Logótipo para dispositivos móveis.
    2. Procure a versão para dispositivos móveis do seu logótipo no diretório local.
    3. Clique em Abrir para carregar o ficheiro.

  5. Clique em Guardar.

  6. Clique em Pré-visualizar para pré-visualizar as alterações do portal num navegador. Consoante a largura do navegador, pode ver a versão para computador ou para dispositivos móveis do logótipo.

  7. Clique em Publicar para publicar as alterações no portal. Confirme a operação quando lhe for pedido.

Personalizar o favícone

Para personalizar o favicon usado na barra de endereço do navegador de Internet (e noutros locais):

  1. Obtenha uma cópia do logótipo da sua empresa que seja adequado para utilização como favicon. Consulte a tabela anterior para ver o tamanho recomendado.
  2. Aceda ao editor de temas.

  3. Localize o ficheiro favicon.

    IU da Cloud Console

    1. No editor de temas, em Estilos básicos, expanda Opções de logótipo.
    2. Clique em Procurar.
    3. Navegue até ao ficheiro do logótipo e selecione-o.

    IU clássica

    1. Em Estilos básicos no painel direito, expanda Opções do logótipo e clique em no campo Favicon.
    2. Navegue até ao ficheiro do logótipo e selecione-o.

  4. Clique em Abrir para carregar o ficheiro.

  5. Clique em Guardar para pré-visualizar as alterações no painel esquerdo.

  6. Clique em Publicar para publicar as alterações no portal. Confirme a operação quando lhe for pedido.

Personalize o logótipo na página de início de sessão quando configurar a experiência de registo e início de sessão para o seu programa para programadores, conforme descrito no artigo Faça a gestão das informações da empresa.

Seguem-se algumas sugestões rápidas para personalizar a barra de ferramentas de navegação:

Personalizar a imagem de fundo

Personalize a imagem de fundo na página inicial realizando qualquer uma das seguintes tarefas:

  • Carregue a sua própria versão da imagem home-background.jpg para o gestor de recursos com o mesmo nome e tamanho do ficheiro relativo (3000 píxeis x 1996 píxeis). Para mais informações, consulte o artigo Faça a gestão dos seus recursos.

  • Modifique o nome do ficheiro da imagem de fundo e o respetivo espaçamento acedendo ao editor de temas avançado e incluindo o seguinte SCSS com valores ajustados na secção Estilos personalizados:

    #index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}

  • Adicione uma imagem de fundo a todas as páginas no portal acedendo ao editor de temas avançado e incluindo o seguinte SCSS com o valor ajustado na secção Estilos personalizados:

     body {
    background-image: url('/files/background-image.jpg');
 }

Personalizar a tipografia

Personalize a tipografia acedendo ao editor de temas avançado e ajustando os valores de uma ou mais das seguintes variáveis de tipografia na secção Variáveis:

  • $typography-main
  • $typography-header
  • $typography-footer
  • $typography-context-bar

Por exemplo:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Em seguida, pode aplicar a tipografia a um seletor CSS específico, conforme mostrado no exemplo seguinte:

@include mat-base-typography($custom-typography-config, '.css-selector');

Em alternativa, pode aplicar um nível de tipografia específico definido na tipografia personalizada a um seletor CSS, conforme mostrado no exemplo seguinte:

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

Personalizar o tema através do editor de temas avançado

Personalize o tema substituindo as variáveis do tema ou personalizando os elementos de estilo do tema diretamente no editor de temas avançado.

Substituir variáveis de tema

Substitua as variáveis do tema na secção Variáveis do editor de temas avançado. Para ver uma lista das variáveis de tema, consulte o artigo Referência de variáveis de tema.

Por exemplo, para personalizar a altura das barras de ferramentas de navegação do cabeçalho e rodapé, inclua as seguintes variáveis, respetivamente, com valores ajustados na secção Variáveis do editor de temas avançado:

Para ver exemplos adicionais, consulte:

Para substituir variáveis do tema:

  1. Aceda ao editor de temas.
  2. Clique em Avançadas.
  3. Clique em Variáveis.
  4. Adicione as substituições de variáveis. Para ver uma lista das variáveis que podem ser substituídas, consulte o artigo Referência de variáveis de tema.
  5. Clique em Guardar para guardar as alterações.
  6. Clique em x para fechar o editor de temas avançado.
  7. Clique em Pré-visualizar para pré-visualizar as alterações do portal num navegador.
  8. Clique em Publicar para publicar o tema. É-lhe pedido que confirme a atualização.

Personalizar elementos de estilo do tema

Personalize os elementos de estilo do tema diretamente na secção Estilos personalizados do editor de temas avançado.

Por exemplo, para alterar a cor do botão Criar na página Nova app que é apresentada quando regista apps no portal, inclua o seguinte elemento de estilo do tema com um valor ajustado:

.main .main-content button.app-save {
  color: blue;
}

Veja também o artigo Personalize a imagem de fundo.

Para personalizar os elementos de estilo do tema:

  1. Aceda ao editor de temas.
  2. Clique em Avançadas.
  3. Clique em Estilos personalizados.
  4. Adicione os elementos dos estilos de tema.
  5. Clique em Guardar para guardar as alterações.
  6. Clique em x para fechar o editor de temas avançado.
  7. Clique em Pré-visualizar para pré-visualizar as alterações do portal num navegador.
  8. Clique em Publicar para publicar o tema. É-lhe pedido que confirme a atualização.

Criar um painel de largura total numa página do portal

Para criar um painel de largura total numa página do portal:

  1. Adicione os seguintes elementos de estilo do tema no editor de temas avançado, conforme descrito no artigo Personalize os elementos de estilo do tema: 
    .full-width__container {
      position: relative;
      left: 50%;
      right: 50%;
      max-width: 100vw;
      margin-left: -50vw;
      margin-right: -50vw;
      background-image: url("/files/your-image.jpg");
      background-size: cover;
      background-position: 50% 50%;
      padding: 0;
     } 

    .full-width__centered {
      @include centered-content();
    }

    .full-width__content {
      // Add any additional padding here and NOT in .full-width__centered. Adding padding to
      // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
      // and corresponding <div> container if no additional padding control other than the
      // min page padding is needed.
    }
  2. Edite o conteúdo da página do portal para incluir o elemento <div> seguinte, conforme descrito no artigo Desenvolva conteúdo do portal com o editor de páginas: 
    <div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  <!-- Include this div if you need additional padding -->
      <h2>Full Width Container</h2>
      <p>
        This content will align with the page header and other content outside
        of this full width container
      </p>
    </div>
  </div>
</div>

Publicar o tema

Para publicar no portal em direto as personalizações de tema e estilo que adicionou:

  1. Aceda ao editor de temas.
  2. Clique em Publicar.

Para ver o conteúdo publicado no portal em direto, clique em Ver portal na barra de ferramentas de navegação superior.

Compreender as regras de especificidade do CSS

A especificidade do CSS descreve o método usado por um navegador para determinar a precedência das declarações de elementos de estilo CSS quando surgem conflitos. A especificidade do CSS é calculada aplicando um peso a uma declaração de elemento de estilo CSS específica com base no respetivo tipo de seletor. Quanto mais específico for o seletor CSS, maior é a relevância. Por exemplo, um atributo ID tem um peso superior no cálculo do que um seletor de tipo.

Por exemplo, se definir os seguintes elementos de estilo no seu código CSS, o elemento de parágrafo é apresentado a vermelho porque a declaração do elemento de estilo p num elemento div é mais específica do que a declaração do elemento de estilo p.

div p { color: red }  ← More specific
p { color: blue }

Da mesma forma, se definir as seguintes declarações de elementos de estilo no seu código CSS, qualquer texto incluído em etiquetas <div class="test"></div> será a azul, porque a declaração de estilo do atributo id num elemento div é mais específica do que a declaração de elemento de estilo div.

div#test { background-color: blue; }  ← More specific
div { background-color: red; }

Para declarações de elementos de estilo com a mesma especificidade, a última declaração de elemento de estilo definida tem precedência. Por exemplo, tendo em conta a ordem das seguintes declarações de elementos de estilo, o elemento de parágrafo é apresentado a azul.

p { color: red }
p { color: blue }  ← Last specified

Referência de variável de tema

As secções seguintes resumem as variáveis que podem ser substituídas na secção Variáveis do editor de temas avançado, conforme descrito em Substitua as variáveis do tema.

Variável do tema base

Personalize as cores de primeiro plano do tema base usado em todo o site. Os valores válidos são light e dark.

$base-theme: light;

Variáveis da paleta de cores

Personalize a paleta de cores modificando as seguintes variáveis para alterar as cores primária, secundária, de destaque e de mensagem de aviso, respetivamente. Consulte o artigo Acerca das categorias da paleta de cores.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);

Os valores numéricos indicam os valores de sombreado para os elementos predefinidos, mais claros e mais escuros, respetivamente. Veja o conteúdo do ficheiro SCSS de temas de materiais (material-theming.scss) para identificar as variáveis de cores predefinidas.

Por exemplo, pode alterar a paleta de cores principal para verde, da seguinte forma:

$primary: mat-palette($mat-green, 800, 100, 900);

Para personalizar apenas os valores de sombreado do conjunto de cores predefinido definido no tema base, inclua o seguinte código com valores de sombreado ajustados:

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

Variáveis de estilo e família de tipos de letra

Personalize a família de tipos de letra e os estilos.

// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

Especifique a sua própria tipografia personalizada para um controlo mais detalhado, conforme mostrado no exemplo seguinte:

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

Variáveis de tipografia

Personalize a tipografia de material angular. Cada nível de tipografia define um tamanho do tipo de letra, uma altura da linha e uma espessura do tipo de letra.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);