Pacchetto CSS per i componenti aggiuntivi dell'editor

Per fare in modo che il tuo componente aggiuntivo dell'editor abbia lo stesso aspetto di Fogli, Documenti, Presentazioni o Moduli Google, collega il pacchetto CSS riportato di seguito per applicare gli stili di Google a caratteri, pulsanti ed elementi dei moduli. Per un esempio del pacchetto CSS in uso, consulta la guida introduttiva al componente aggiuntivo Documenti. Per utilizzare il pacchetto CSS, basta includere quanto segue nella parte superiore di ogni file HTML:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

Tieni presente che lo stile degli elementi dei moduli non può essere controllato completamente in tutti i browser. In particolare, gli elementi <select> mostrano alcuni artefatti visivi in Firefox e Internet Explorer, anche se funzionano correttamente. Per vedere come appaiono gli stili in un determinato browser, carica questa pagina nel browser in questione.

Tipografia

Utilizza il carattere Arial per tutto il testo, nei seguenti stili a seconda dell'uso:

Utilizzo e aspetto Markup con il pacchetto CSS 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

Pulsanti

Puoi utilizzare uno dei tipi di pulsanti standard: <button>, <input type="button"> o <input type="submit">, nonché <a class="button">. I pulsanti adiacenti orizzontalmente si spaziano automaticamente. Sono disponibili diversi colori per vari utilizzi:

Utilizza Aspetto Markup con il pacchetto CSS
Azione principale 
<button class="action">Translate</button>
Azioni secondarie 
<button>Close</button>
Crea azione 
<button class="create">Create</button>
Azione Condividi 
<button class="share">Share</button>

Caselle di controllo

Esempio Markup con il pacchetto CSS 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

Pulsanti di opzione

Esempio Markup con il pacchetto CSS 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

Seleziona i menu

Esempio Markup con il pacchetto CSS 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

Aree di testo

Esempio Markup con il pacchetto CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campi di testo

Esempio Markup con il pacchetto CSS 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

Le barre laterali possono essere difficili da stilare perché, sebbene l'altezza sia variabile, molti componenti aggiuntivi devono includere un'area di branding che non scorre. Di seguito è riportata una copia semplificata della barra laterale della guida introduttiva al componente aggiuntivo Documenti Google. Se trascini l'angolo in basso a destra dell'area di testo per aumentare l'altezza dei contenuti rispetto alla barra laterale, l'area dei contenuti scorre automaticamente, ma il branding in basso no.

L'esempio utilizza la classe sidebar per applicare il padding corretto e la classe bottom per forzare l'area del branding in basso. Una classe locale,branding-below, definisce l'area che l'area principale della barra laterale deve lasciare libera in basso.

Esempio Markup con il pacchetto CSS 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>