Personalizzazione del tema

Questa pagina si applica ad Apigee e Apigee hybrid.

Visualizza la documentazione di Apigee Edge.

Un tema è costituito da un foglio di stile globale che conferisce un aspetto uniforme a tutte le pagine del tuo portale. L'obiettivo di un tema è consentirti di modificare l'aspetto e il design di tutte le pagine del portale contemporaneamente.

Puoi personalizzare, visualizzare in anteprima e pubblicare il tema, come descritto nelle sezioni seguenti.

Esplorazione dell'editor dei temi

Personalizza, visualizza l'anteprima e pubblica il tema per il tuo portale nell'editor dei temi.

Per accedere all'editor dei temi:

  • Seleziona Pubblica > Portali nella barra degli strumenti di navigazione laterale, quindi seleziona il portale e fai clic su Tema nella pagina di destinazione.
  • Quando modifichi un portale, fai clic su Tema nel menu a discesa nella barra degli strumenti di navigazione in alto.

Editor dei temi

Come evidenziato nella figura precedente, l'editor di temi ti consente di:

Informazioni sul tema di base

La maggior parte delle regole di stile dei temi di base che definiscono l'aspetto del sito si basa sul materiale angolare. Il material design Angular utilizza layout basati su griglie e componenti e stili coerenti per fornire un'esperienza interattiva unificata.

Le regole di stile vengono definite utilizzando il Sassy Cascading Style Sheet (SCSS). SCSS è un soprainsieme di CSS (Cascading Style Sheet), che offre i seguenti vantaggi:

  • Variabili globali che possono essere riutilizzate in tutto il foglio di stile.
  • Regole nidificate per risparmiare tempo di sviluppo del foglio di stile.
  • Capacità di creare mixin e funzioni

Ad esempio:

// 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; }

I CSS vengono compilati e convertiti in CSS precedenti prima che i contenuti vengano visualizzati sulla pagina web.

Il tema di base utilizza un foglio di stile angolare del materiale, file SCSS con temi materiali (material-theming.scss). Questo foglio di stile dichiara le variabili, le funzioni e le combinazioni di mix che possono essere sostituite utilizzando variabili personalizzate e sezioni SCSS, come descritto in Personalizzazione del tema utilizzando l'editor di temi avanzato.

In base alle selezioni del tema dell'interfaccia utente, vengono dichiarate una serie di variabili SCSS che definiscono tipografia, colore e stili di layout e vengono utilizzate dal foglio di stile di base. Puoi eseguire l'override delle variabili elencate nel riferimento alla variabile tema.

Personalizzazione della tavolozza dei colori

Personalizza la tavolozza dei colori utilizzando l'editor di stili di base o eseguendo l'override delle variabili del tema.

Informazioni sulle categorie delle tavolozze dei colori

Le definizioni della tavolozza dei colori per il portale integrato sono raggruppate nelle seguenti categorie, definite utilizzando lo stile dei colori per il material design nel tema di base.

Category Stili
Principale Barre degli strumenti di navigazione, intestazioni, intestazioni delle schede e pulsanti
Secondaria Messaggio in <pre> e <code>
Decorazione Navigazione, link e pulsanti accentati
Avviso Avvisi ed errori

Personalizzazione della tavolozza dei colori utilizzando l'editor di stile di base

Personalizza rapidamente le tavolozze dei colori principali e Accenti utilizzando l'editor degli stili di base.

Per personalizzare la tavolozza dei colori utilizzando l'editor di stili di base:

  1. Accedi all'editor dei temi.
  2. Per personalizzare il colore principale, seleziona un colore nel menu a discesa Colore principale oppure fai clic su Personalizzato e inserisci un valore colore esadecimale personalizzato nella casella di testo.
  3. Per personalizzare il colore di contrasto, seleziona un colore nel menu a discesa Colore intenso oppure fai clic su Personalizzato e inserisci un valore colore esadecimale personalizzato nella casella di testo.
  4. Fai clic su Salva per salvare le modifiche.
  5. Visualizza le modifiche nel riquadro di anteprima oppure fai clic su Anteprima per visualizzare l'anteprima delle modifiche del portale in un browser.
    Nota: per visualizzare le modifiche in tutte le pagine, puoi fare clic nel riquadro di anteprima all'interno del riquadro di navigazione.
  6. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzazione della tavolozza dei colori sostituendo le variabili del tema

Per personalizzare la tavolozza dei colori sostituendo le variabili del tema, accedi all'editor dei temi avanzato e includi una o più delle seguenti variabili con valori regolati nella sezione Variabili per modificare rispettivamente i colori principali, secondari, di contrasto o dei messaggi di avviso. Consulta Informazioni sulle categorie delle tavolozze dei colori.

$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);

Visualizza i contenuti del file SCSS per i temi dei materiali importato (material-theming.scss) per identificare le variabili di colore predefinite (ad esempio $mat-grey). I valori numerici indicano i valori di ombreggiatura rispettivamente degli elementi predefiniti, più chiari e scuri.

In alternativa, puoi creare una variabile di colore personalizzata. Ad esempio:

$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,     
    )    
);

Poi utilizzala per cambiare la tavolozza dei colori, come mostrato nell'esempio seguente:

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

Personalizzare la famiglia di caratteri e gli stili

Personalizza la famiglia di caratteri e gli stili utilizzando l'editor di stili di base o eseguendo l'override delle variabili del tema. Puoi anche importare un carattere personalizzato.

Personalizzare la famiglia di caratteri e gli stili con l'editor di stili di base

Personalizza rapidamente gli stili e la famiglia di caratteri utilizzando l'editor di stili di base, come mostrato nella figura che segue.

Per personalizzare la famiglia di caratteri e gli stili utilizzando l'editor di stili di base:

  1. Accedi all'editor dei temi.
  2. Per cambiare la famiglia di caratteri, seleziona un valore nel menu a discesa Carattere.
  3. Per cambiare gli stili dei caratteri, espandi la sezione Stili carattere e modifica gli stili, come necessario, comprese dimensioni, altezza della riga e spessore del carattere per gli elementi HTML desiderati.
  4. Fai clic su Salva per salvare le modifiche.
  5. Visualizza le modifiche nel riquadro di anteprima oppure fai clic su Anteprima per visualizzare l'anteprima delle modifiche del portale in un browser.
    Nota: per visualizzare le modifiche in tutte le pagine, puoi fare clic nel riquadro di anteprima all'interno del riquadro di navigazione.
  6. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzare la famiglia di caratteri e gli stili mediante l'override delle variabili del tema

Per personalizzare la famiglia di caratteri e gli stili sostituendo le variabili del tema, accedi all'editor del tema avanzato e includi una o più variabili famiglia di caratteri e stile con valori modificati nella sezione Variabili.

Ad esempio, per modificare il carattere predefinito in modalità Airflow, definisci la seguente variabile:

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

Importazione di un carattere personalizzato

Importa un carattere Google (non incluso nell'insieme di caratteri predefiniti) o un carattere personalizzato, quindi fai riferimento al carattere personalizzato nel foglio di stile, come descritto di seguito.

Importazione di un carattere Google

Per importare un carattere Google, accedi all'editor dei temi avanzato e importa il carattere nella sezione Stili personalizzati, come illustrato di seguito:

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

Importazione di un carattere personalizzato

Importa il tuo carattere personalizzato utilizzando la regola CSS @font-face. La regola @font-face supporta diversi tipi di formati file, tra cui TrueType (TTF), Web Open Font Format (WOFF) e altri.

Per importare un carattere personalizzato:

  1. Se vuoi, carica il file dei caratteri in Gestione asset, come descritto in Caricare un file.

  2. Accedi all'editor dei temi avanzato e aggiungi la regola @font-face alla sezione Stili personalizzati, dove font-family specifica il nome del carattere, url specifica la posizione del file del carattere (in questo caso, gestore degli asset), MyCustomFont.tff è il nome del file del carattere personalizzato e format specifica il formato del carattere.

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

Fare riferimento al carattere personalizzato nel foglio di stile

Fai riferimento al carattere personalizzato in una delle variabili stile e famiglia di caratteri nella sezione Variabili. Ad esempio:

$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
);

Puoi personalizzare i loghi utilizzati nel portale nelle seguenti posizioni:

Posizione logo Dimensioni predefinite dei file
Barra degli strumenti di navigazione su desktop 196 x 32 pixel
Barra degli strumenti di navigazione su dispositivi mobili156 x 32 pixel
Favicon nella barra degli indirizzi del browser (e altre posizioni)32 x 32 pixel
Pagina di accesso392 x 64 pixel

Personalizza il logo nella barra degli strumenti di navigazione per la visualizzazione su computer e dispositivi mobili. A seconda della larghezza del browser, potresti visualizzare la versione desktop o mobile del logo.

Non puoi eliminare il logo principale, puoi solo sostituirlo. Se non specifichi un logo per il display mobile, per impostazione predefinita verrà utilizzato il logo principale.

Per personalizzare il logo utilizzato nella barra degli strumenti di navigazione per la visualizzazione su desktop e dispositivi mobili:

  1. Procurati una o più copie del logo aziendale adatte all'uso.
    Per le dimensioni consigliate, consulta la tabella precedente.
  2. Accedi all'editor dei temi.
  3. Per sostituire il logo nella barra degli strumenti di navigazione in alto sui display dei computer:
    a. In Stili di base nel riquadro a destra, fai clic su nel campo Logo principale.
    b. Cerca la versione desktop del tuo logo nella directory locale.
    c. Fai clic su Apri per caricare il file.
  4. Per sostituire il logo nella barra degli strumenti di navigazione superiore sui display dispositivi mobili:
    a. In Stili di base nel riquadro a destra, espandi Opzioni logo e fai clic su sotto il campo Logo mobile.
    b. Cerca la versione per dispositivi mobili del tuo logo nella directory locale.
    c. Fai clic su Apri per caricare il file.
  5. Fai clic su Salva per visualizzare l'anteprima delle modifiche nel riquadro a sinistra.
  6. Fai clic su Pubblica per pubblicare le modifiche sul portale. Conferma l'operazione quando ti viene richiesto.

Personalizzazione della favicon

Per personalizzare la favicon utilizzata nella barra degli indirizzi del browser web (e in altre posizioni:

  1. Procurati una copia del logo aziendale da usare come favicon.
    Per le dimensioni consigliate, consulta la tabella precedente.
  2. Accedi all'editor dei temi.
  3. In Stili di base nel riquadro a destra, espandi le Opzioni logo e fai clic su sotto il campo Favicon.
  4. Cerca la versione della favicon del tuo logo nella directory locale.
  5. Fai clic su Apri per caricare il file.
  6. Fai clic su Salva per visualizzare l'anteprima delle modifiche nel riquadro a sinistra.
  7. Fai clic su Pubblica per pubblicare le modifiche sul portale. Conferma l'operazione quando ti viene richiesto.

Personalizza il logo nella pagina di accesso quando configuri l'esperienza di registrazione e accesso per il tuo programma per sviluppatori, come descritto nella sezione Gestire le informazioni della società.

Di seguito sono riportati alcuni suggerimenti rapidi per personalizzare la barra degli strumenti di navigazione:

Personalizzazione dell'immagine di sfondo

Personalizza l'immagine di sfondo nella home page eseguendo una delle seguenti attività:

  • Carica la tua versione dell'immagine home-background.jpg in Asset Manager utilizzando lo stesso nome e la relativa dimensione di file (3000 pixel x 1996 pixel). Per saperne di più, consulta Gestire gli asset.

  • Per modificare il nome del file dell'immagine di sfondo e la relativa spaziatura interna, accedi all'editor dei temi avanzato e includi il seguente SCSS con valori modificati nella sezione Stili personalizzati: 

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

  • Aggiungi un'immagine di sfondo a tutte le pagine del portale accedendo all'editor di temi avanzato e includendo i seguenti SCSS con il valore modificato nella sezione Stili personalizzati: 

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

Personalizzazione della tipografia

Personalizza la tipografia accedendo all'editor dei temi avanzato e regolando i valori per una o più delle seguenti variabili tipografiche nella sezione Variabili:

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

Ad esempio:

// 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
);

Dopodiché puoi applicare la tipografia a uno specifico selettore CSS, come mostrato nell'esempio seguente:

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

In alternativa, puoi applicare un livello tipografico specifico definito nella tipografia personalizzata a un selettore CSS, come mostrato nell'esempio seguente:

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

Personalizzazione del tema con l'editor di temi avanzato

Personalizza il tema eseguendo l'override delle variabili del tema o personalizzando gli elementi di stile del tema direttamente nell'editor di temi avanzato.

Override delle variabili del tema

Esegui l'override delle variabili del tema nella sezione Variabili dell'editor del tema avanzato. Per un elenco delle variabili dei temi, consulta Informazioni sulle variabili del tema.

Ad esempio, per personalizzare l'altezza delle barre degli strumenti di navigazione dell'intestazione e del piè di pagina, includi le seguenti variabili, rispettivamente, con i valori regolati nella sezione Variabili dell'editor del tema avanzato:

Per altri esempi, consulta:

Per eseguire l'override delle variabili del tema:

  1. Accedi all'editor dei temi.
  2. Nel riquadro a destra, fai clic su Avanzate.
  3. Fai clic su Variabili.
  4. Aggiungi gli override delle variabili.
    Per un elenco delle variabili che possono essere sostituite, consulta la sezione Informazioni sulle variabili del tema.
  5. Fai clic su Salva per salvare le modifiche.
  6. Fai clic sulla x per chiudere l'editor dei temi avanzato.
  7. Visualizza le modifiche nel riquadro di anteprima oppure fai clic su Anteprima per visualizzare l'anteprima delle modifiche del portale in un browser. Nota: puoi fare clic all'interno del riquadro di navigazione del portale nel riquadro di anteprima per visualizzare le modifiche in tutte le pagine.
  8. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Personalizzazione degli elementi dello stile del tema

Personalizza gli elementi di stile del tema direttamente nella sezione Stili personalizzati dell'editor di temi avanzato.

Ad esempio, per modificare il colore del pulsante Crea nella pagina Nuova app che viene visualizzato durante la registrazione di app nel portale, includi il seguente elemento di stile del tema con un valore modificato:

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

Vedi anche Personalizzare l'immagine di sfondo.

Per personalizzare gli elementi dello stile del tema:

  1. Accedi all'editor dei temi.
  2. Nel riquadro a destra, fai clic su Avanzate.
  3. Fai clic su Stili personalizzati.
  4. Aggiungi gli elementi degli stili del tema.
  5. Fai clic su Salva per salvare le modifiche.
  6. Chiudi la x per chiudere l'editor dei temi avanzato.
  7. Visualizza le modifiche nel riquadro di anteprima oppure fai clic su Anteprima per visualizzare l'anteprima delle modifiche del portale in un browser.
    Nota: per visualizzare le modifiche in tutte le pagine, puoi fare clic nel riquadro di anteprima all'interno del riquadro di navigazione.
  8. Fai clic su Pubblica per pubblicare il tema. Ti verrà chiesto di confermare l'aggiornamento.

Creazione di un riquadro a larghezza intera in una pagina del portale

Per creare un riquadro a larghezza intera in una pagina del portale:

  1. Aggiungi i seguenti elementi di stile del tema nell'editor dei temi avanzato, come descritto in Personalizzare gli elementi di stile del 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. Modifica i contenuti della pagina del portale in modo da includere il seguente elemento <div>, come descritto in Sviluppare i contenuti del portale utilizzando l'editor di pagine: 
    <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>

Pubblicazione del tema in corso...

Per pubblicare sul portale in tempo reale le personalizzazioni di tema e stile che hai aggiunto:

  1. Accedi all'editor dei temi.
  2. Fai clic su Pubblica.

Per visualizzare i contenuti pubblicati nel portale live, fai clic su Visualizza portale nella barra degli strumenti di navigazione in alto.

Informazioni sulle regole di specificità CSS

La specificità CSS descrive il metodo utilizzato da un browser per determinare la precedenza delle dichiarazioni degli elementi di stile CSS in caso di conflitto. La specificità CSS viene calcolata applicando una ponderazione a una specifica dichiarazione dell'elemento di stile CSS in base al tipo di selettore. Più specifico è il selettore CSS, maggiore è la ponderazione. A un attributo ID, ad esempio, viene assegnata una ponderazione più elevata nel calcolo rispetto a un selettore del tipo.

Ad esempio, se definisci i seguenti elementi di stile nel codice CSS, l'elemento paragrafo verrà di colore rosso perché la dichiarazione dell'elemento di stile p in un elemento div è più specifica della dichiarazione dell'elemento di stile p.

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

Analogamente, se definisci le seguenti dichiarazioni degli elementi di stile nel codice CSS, il testo racchiuso tra i tag <div class="test"></div> verrà di colore blu perché la dichiarazione di stile dell'attributo id all'interno di un elemento div è più specifica rispetto alla dichiarazione dell'elemento di stile div.

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

Per le dichiarazioni di elementi di stile con la stessa specificità, avrà la precedenza l'ultima dichiarazione dell'elemento di stile definita. Ad esempio, in base all'ordine delle dichiarazioni degli elementi di stile che seguono, l'elemento paragrafo sarà di colore blu. 

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

Informazioni sulle variabili del tema

Le seguenti sezioni riepilogano le variabili di cui è possibile eseguire l'override nella sezione Variabili dell'editor del tema avanzato, come descritto in Override delle variabili del tema.

Variabile del tema di base

Personalizza i colori in primo piano del tema di base utilizzato in tutto il sito. I valori validi sono light e dark.

$base-theme: light;

Variabili della tavolozza dei colori

Personalizza la tavolozza dei colori modificando le seguenti variabili per cambiare rispettivamente i colori principale, secondario, di contrasto e dei messaggi di avviso. Consulta Informazioni sulle categorie delle tavolozze dei colori.

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

I valori numerici indicano i valori di ombreggiatura, rispettivamente, degli elementi predefiniti, più chiari e scuri. Visualizza i contenuti del file SCSS per la definizione dei temi dei materiali (material-theming.scss) per identificare le variabili di colore predefinite.

Ad esempio, puoi cambiare la tavolozza del colore principale in verde come indicato di seguito:

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

Per personalizzare solo i valori di ombreggiatura per il set di colori predefinito definito nel tema di base, includi il seguente codice con valori di ombreggiatura regolati:

$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);

Famiglia di caratteri e variabili di stile

Personalizza la famiglia di caratteri e gli stili.

// 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;

Specifica una tipografia personalizzata per avere un controllo più granulare, come illustrato nell'esempio seguente:

$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
);

Variabili tipografiche

Personalizza la tipografia angolare del materiale. Ogni livello tipografico definisce dimensioni, altezza della riga e spessore del carattere.

$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);