Package CSS pour les modules complémentaires de l'éditeur

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Pour que votre module complémentaire d'éditeur ressemble à Google Sheets, Docs, Slides ou Forms, utilisez le lien du package CSS ci-dessous afin d'appliquer le style Google aux polices, boutons et éléments de formulaire. Pour obtenir un exemple du package CSS utilisé, consultez le guide de démarrage rapide du module complémentaire Docs. Pour utiliser le package CSS, il vous suffit d'inclure les éléments suivants en haut de chaque fichier HTML:

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

Notez que le style des éléments de formulaire ne peut pas être complètement contrôlé dans tous les navigateurs. Les éléments <select> affichent notamment certains artefacts visuels dans Firefox et Internet Explorer, même s'ils fonctionnent toujours correctement. Pour voir à quoi ressemblent les styles dans un navigateur donné, il suffit de charger cette page dans ce navigateur.

Typographie

Utilisez la police iCal pour tous les textes, dans les styles suivants selon l'utilisation:

Utilisation et apparence Balisage avec package 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>

Boutons

Vous pouvez utiliser n'importe quel type de bouton standard : <button>, <input type="button"> ou <input type="submit">, ainsi que <a class="button">. Les boutons adjacents à l'axe horizontal s'affichent automatiquement. Plusieurs couleurs sont disponibles, pour diverses utilisations:

Utilisation Apparence Balisage avec package CSS
Action principale
<button class="action">Translate</button>
Action(s) secondaire(s)
<button>Close</button>
Créer une action
<button class="create">Create</button>
Action de partage
<button class="share">Share</button>

Checkboxes (Cases à cocher)

Exemple Balisage avec package 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>

Cases d'option

Exemple Balisage avec package 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>

Sélectionner des menus

Exemple Balisage avec package 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>

Les zones de texte

Exemple Balisage avec package CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Champs de texte

Exemple Balisage avec package 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 style des barres latérales peut être difficile, car même si la hauteur est variable, de nombreux modules complémentaires doivent inclure une zone de marque qui ne fait pas défiler. Vous trouverez ci-dessous une copie simplifiée de la barre latérale du module complémentaire Google Docs. Si vous faites glisser l'angle inférieur droit de la zone de texte pour agrandir le contenu par rapport à la barre latérale, la zone de contenu défile automatiquement, mais pas le branding du bas.

L'exemple utilise la classe sidebar pour appliquer la bonne marge intérieure et la classe bottom pour forcer la zone de marque vers le bas. Une classe locale, branding-below, définit ensuite la zone que la zone principale de la barre latérale doit laisser clairement de bas en haut.

Exemple Balisage avec package 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>