Paket CSS untuk Add-on Editor

Untuk membantu tampilan dan nuansa Add-on Editor Anda seperti Google Spreadsheet, Dokumen, Slide, atau Formulir, tautkan dalam paket CSS di bawah ini untuk menerapkan gaya Google ke font, tombol, dan elemen formulir. Untuk mengetahui contoh paket CSS yang digunakan, lihat Panduan memulai add-on Dokumen. Untuk menggunakan paket CSS, cukup sertakan baris berikut di bagian atas tiap file HTML:

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

Perhatikan bahwa gaya untuk elemen formulir tidak dapat dikontrol sepenuhnya di semua browser. Secara khusus, elemen <select> menampilkan beberapa artefak visual di Firefox dan Internet Explorer, meskipun keduanya masih berfungsi dengan baik. Untuk melihat seperti apa tampilan gaya di browser tertentu, cukup muat halaman ini di browser tersebut.

Tipografi

Gunakan font Arial untuk semua teks, dalam gaya berikut bergantung pada penggunaannya:

Penggunaan dan tampilan Markup dengan paket 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>

Tombol

Anda dapat menggunakan salah satu jenis tombol standar—<button>, <input type="button">, atau <input type="submit">, serta <a class="button">. Tombol yang berdekatan secara horizontal itu sendiri secara otomatis. Ada beberapa warna yang tersedia, untuk berbagai penggunaan:

Gunakan Tampilan Markup dengan paket CSS
Tindakan utama 
<button class="action">Translate</button>
Tindakan sekunder 
<button>Close</button>
Buat tindakan 
<button class="create">Create</button>
Tindakan berbagi 
<button class="share">Share</button>

Kotak centang

Contoh Markup dengan paket 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>

Tombol pilihan

Contoh Markup dengan paket 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>

Pilih menu

Contoh Markup dengan paket 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>

Area teks

Contoh Markup dengan paket CSS 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

Kolom teks

Contoh Markup dengan paket 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>

Sidebar dapat sulit diberi gaya karena meskipun tingginya bervariasi, banyak add-on yang perlu menyertakan area branding yang tidak dapat di-scroll. Berikut adalah salinan sederhana sidebar dari panduan memulai add-on Google Dokumen. Jika Anda menarik sudut kanan bawah area teks untuk membuat konten lebih tinggi daripada sidebar, area konten akan otomatis di-scroll, tetapi branding di bagian bawah tidak akan di-scroll.

Contoh ini menggunakan class sidebar untuk menerapkan padding yang benar dan class bottom untuk memaksa area branding ke bawah. Class lokal, branding-below, kemudian menentukan area yang harus dihilangkan dari bagian bawah area utama sidebar.

Contoh Markup dengan paket 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>