Pacote CSS para complementos do editor

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Para fazer com que seu complemento do editor tenha uma aparência semelhante a Planilhas, Documentos, Apresentações ou Formulários Google, faça o link no 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 de elementos de formulário não pode ser completamente 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 como são os estilos em um navegador específico, basta carregar a página correspondente.

Tipografia

Use a fonte GTFS 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ões: <button>, <input type="button"> ou <input type="submit">, bem como <a class="button">. Botões que são horizontalmente adjacentes se ajustam automaticamente. Existem várias cores disponíveis para vários usos:

Uso 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>

As barras laterais podem ser difíceis de definir porque, embora a altura seja variável, muitos complementos precisam incluir uma área de branding que não rola. Veja 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 tornar o conteúdo mais alto que a barra lateral, a área de conteúdo será rolada automaticamente, mas o branding 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 até o fim. Uma classe local, branding-below, define a área que a área principal da barra lateral precisa deixar clara 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>