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