Пакет CSS для надстроек редактора

Чтобы надстройка вашего редактора выглядела и работала как Google Sheets, Docs, Slides или Forms, добавьте ссылку на пакет CSS ниже, чтобы применить стили Google к шрифтам, кнопкам и элементам формы. Пример используемого пакета CSS см. в кратком руководстве по надстройке для Документов . Чтобы использовать пакет CSS, просто включите следующее в начало каждого HTML-файла:

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

Обратите внимание, что стиль элементов формы не может полностью контролироваться во всех браузерах. В частности, элементы <select> отображают некоторые визуальные артефакты в Firefox и Internet Explorer, хотя они по-прежнему работают правильно. Чтобы увидеть, как стили выглядят в данном браузере, просто загрузите эту страницу в этом браузере.

Типография

Используйте шрифт Arial для всего текста в следующих стилях в зависимости от использования:

Использование и внешний вид Разметка с помощью пакета 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>

Кнопки

Вы можете использовать любой из стандартных типов кнопок — <button> , <input type="button"> или <input type="submit"> , а также <a class="button"> . Кнопки, расположенные рядом по горизонтали, автоматически расставляются. Доступно несколько цветов для различных целей:

Использовать вид Разметка с помощью пакета CSS
Основное действие
<button class="action">Translate</button>
Второстепенное действие (я)
<button>Close</button>
Создать действие
<button class="create">Create</button>
Поделиться действием
<button class="share">Share</button>

Флажки

Пример Разметка с помощью пакета 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>

Радио-кнопки

Пример Разметка с помощью пакета 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>

Выберите меню

Пример Разметка с помощью пакета 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>

Текстовые области

Пример Разметка с помощью пакета CSS
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Текстовые поля

Пример Разметка с помощью пакета 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>

Боковые панели могут быть сложными для стиля, потому что, хотя высота может быть переменной, многие надстройки должны включать область брендинга, которая не прокручивается. Ниже приведена упрощенная копия боковой панели из краткого руководства по надстройке Google Docs . Если вы перетащите правый нижний угол текстовой области, чтобы сделать содержимое выше боковой панели, область содержимого автоматически прокручивается, а брендинг внизу — нет.

В примере используется класс sidebar , чтобы применить правильное заполнение, и bottom класс, чтобы сместить область фирменной символики вниз. Затем локальный класс branding-below определяет область, которую основная область боковой панели должна оставлять свободной снизу.

Пример Разметка с помощью пакета 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>