Pacote CSS para os complementos do editor

Para que seu complemento do Editor tenha a aparência das 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ários. Para ver uma amostra do pacote CSS em uso, consulte o Guia de início rápido do complemento do Documentos. Para usar o pacote CSS, basta incluir o seguinte na parte superior 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 totalmente controlado em todos os navegadores. Mais especificamente, os elementos <select> exibem alguns artefatos visuais no Firefox e no Internet Explorer, embora ainda funcionem corretamente. Para ver a aparência dos estilos em um determinado navegador, basta carregar a página nesse navegador.

Tipografia

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

Uso e aparência Marcação 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

É possível usar qualquer um dos tipos padrão de botão: <button>, <input type="button"> ou <input type="submit">, bem como <a class="button">. Botões que são espaços adjacentes na horizontal são removidos de forma automática. Há várias cores disponíveis para diversos usos:

Usar Aparência Marcação 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 Marcação 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 Marcação 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>

Selecionar menus

Exemplo Marcação 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 Marcação com pacote CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campos de texto

Exemplo Marcação 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>

O estilo das barras laterais pode ser complicado, porque, embora a altura seja variável, muitos complementos precisam incluir uma área de marca que não pode ser rolada. Veja abaixo uma cópia simplificada da barra lateral no Guia de início rápido do complemento Documentos Google. Se você arrastar o canto inferior direito da área de texto para deixar o conteúdo mais alto que a barra lateral, a área de conteúdo vai rolar automaticamente, mas o branding na parte inferior não.

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

Exemplo Marcação 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>