Paquete de CSS para complementos de Editores

Para mejorar el aspecto de tu complemento de editor como Hojas de cálculo, Documentos, Presentaciones o Formularios de Google, vincula el siguiente paquete de CSS para aplicar el estilo de Google a las fuentes, los botones y los elementos de los formularios. Para ver una muestra del paquete CSS en uso, consulta la guía de inicio rápido sobre el complemento de Documentos. Para usar el paquete de CSS, 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 del formulario no se puede controlar por completo en todos los navegadores. En particular, los elementos <select> muestran algunos artefactos visuales en Internet Explorer y Firefox, aunque aún funcionan correctamente. Para ver cómo lucen 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 Lenguaje de marcado con paquete de 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"> o <input type="submit">, así como <a class="button">. Los botones que se ubican horizontalmente adyacentes al espacio en sí mismos salen automáticamente. Hay varios colores disponibles para distintos usos:

Usar Diseño Lenguaje de marcado con paquete de CSS
Acción principal
<button class="action">Translate</button>
Acción(es) secundaria(s)
<button>Close</button>
Crear acción
<button class="create">Create</button>
Compartir acción
<button class="share">Share</button>

Casillas de verificación

Ejemplo Lenguaje de marcado con paquete de 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 Lenguaje de marcado con paquete de 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>

Seleccionar menús

Ejemplo Lenguaje de marcado con paquete de 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 Lenguaje de marcado con paquete de CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Campos de texto

Ejemplo Lenguaje de marcado con paquete de 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 sobre el complemento 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 desplazará automáticamente, pero la marca de 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 a la parte inferior. Luego, una clase local, branding-below, define el área que el área principal de la barra lateral debe dejar sin efecto desde la parte inferior.

Ejemplo Lenguaje de marcado con paquete de 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>