Pacote CSS para complementos do editor

Para ajudar seu complemento do Editor a ter a mesma aparência e sensação dos apps Planilhas, Documentos, Apresentações ou Formulários Google, vincule o pacote CSS abaixo para aplicar o estilo do Google a fontes, botões e elementos de formulário. Para conferir um exemplo do pacote CSS em uso, consulte o guia de início rápido do complemento de documentos. Para usar o pacote CSS, basta incluir o seguinte na parte de cima de cada arquivo HTML:

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

O estilo dos elementos de formulário não pode ser controlado completamente em todos os navegadores. Em particular, os elementos <select> mostram alguns artefatos visuais no Firefox e no Internet Explorer, embora ainda funcionem corretamente. Para conferir como os estilos aparecem em um determinado navegador, basta carregar esta página nele.

Tipografia

Use a fonte Arial para todo o texto, nos seguintes estilos, dependendo do uso:

Uso e aparência Markup com pacote 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>

Botões

Você pode usar qualquer um dos tipos padrão de botões: <button>, <input type="button"> ou <input type="submit">, além de <a class="button">. Os botões que estão horizontalmente adjacentes se separam automaticamente. Há várias cores disponíveis para vários usos:

Usar Aparência Markup com pacote CSS
Ação principal 
<button class="action">Translate</button>
Ações secundárias 
<button>Close</button>
Criar ação 
<button class="create">Create</button>
Ação de compartilhamento 
<button class="share">Share</button>

Caixas de seleção

Exemplo Markup com pacote 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>

Botões de opção

Exemplo Markup com pacote 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>

Menus de seleção

Exemplo Markup com pacote 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>

Áreas de texto

Exemplo Markup com pacote CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campos de texto

Exemplo Markup com pacote 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>

As barras laterais podem ser difíceis de estilizar porque, embora a altura seja variável, muitos complementos precisam incluir uma área de marca que não rola. Confira abaixo uma cópia simplificada da barra lateral do Guia de início rápido do complemento do Documentos Google. Se você arrastar o canto inferior direito da área de texto para aumentar a altura do conteúdo em relação à barra lateral, a área de conteúdo vai rolar automaticamente, mas a marca na parte de baixo não.

O exemplo usa a classe sidebar para aplicar o padding correto e a classe bottom para forçar a área de branding para a parte de baixo. Uma classe local, branding-below, define a área que a área principal da barra lateral precisa deixar livre na parte de baixo.

Exemplo Markup com pacote 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>