Paquete de CSS para complementos de Editor

Para que tu complemento de Editor tenga la apariencia de Hojas de cálculo, Documentos, Presentaciones o Formularios de Google, vincula el siguiente paquete CSS para aplicar el diseño de Google a las fuentes, los botones y los elementos de formulario. Si quieres ver un ejemplo del paquete CSS en uso, consulta la guía de inicio rápido del complemento de Documentos. Para usar el paquete CSS, solo incluye lo siguiente en la parte superior de cada archivo HTML:

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

Ten en cuenta que el estilo de los elementos de formulario no se puede controlar por completo en todos los navegadores. En particular, los elementos <select> muestran algunos artefactos visuales en Firefox y Internet Explorer, aunque siguen funcionando correctamente. Para ver cómo se ven los estilos en un navegador determinado, simplemente carga esta página en ese navegador.

Tipografía

Usa la fuente Arial para todo el texto, en los siguientes estilos según el uso:

Uso y apariencia Marcado con el paquete 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>

Botones

Puedes usar cualquiera de los tipos de botones estándar: <button>, <input type="button">, <input type="submit"> o <a class="button">. Los botones que están adyacentes horizontalmente se espacian automáticamente. Hay varios colores disponibles para varios usos:

Usar Diseño Marcado con el paquete CSS
Acción principal 
<button class="action">Translate</button>
Acciones secundarias 
<button>Close</button>
Cómo crear una acción 
<button class="create">Create</button>
Acción de compartir 
<button class="share">Share</button>

Casillas de verificación

Ejemplo Marcado con el paquete 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>

Botones de selección

Ejemplo Marcado con el paquete 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>

Selecciona los menús

Ejemplo Marcado con el paquete 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

Ejemplo Marcado con el paquete CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campos de texto

Ejemplo Marcado con el paquete 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>

Las barras laterales pueden ser difíciles de diseñar porque, si bien la altura es variable, muchos complementos deben incluir un área de desarrollo de la marca que no se desplace. A continuación, se muestra una copia simplificada de la barra lateral de la guía de inicio rápido de complementos de Documentos de Google. Si arrastras la esquina inferior derecha del área de texto para que el contenido sea más alto que la barra lateral, el área de contenido se desplaza automáticamente, pero el desarrollo de la marca en la parte inferior no.

En el ejemplo, se usa la clase sidebar para aplicar el padding correcto y la clase bottom para forzar el área de desarrollo de la marca en la parte inferior. Luego, una clase local, branding-below, define el área que el área principal de la barra lateral debe dejar despejada desde la parte inferior.

Ejemplo Marcado con el paquete 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>