Plugin Stylesheet Guide

Contents

Introduction

The Plugin Stylesheet is used to apply a style to the Plugin Settings page.
Download from the following link: 51-modern-default.css (External link) .

Alert message

kintoneplugin-alert

Sample Image

Sample Usage
1
2
3

<div class="kintoneplugin-alert">
  <p>caution !!</p>
</div>

Label

kintoneplugin-row

Sample Image

Sample Usage
1

<div class="kintoneplugin-row">row</div>

kintoneplugin-label

Sample Image

Sample Usage
1

<div class="kintoneplugin-label">label</div>

kintoneplugin-title

Sample Image

Sample Usage
1

<div class="kintoneplugin-title">title</div>

kintoneplugin-require

Sample Image

Sample Usage
1
2
3

<div class="kintoneplugin-label">require
  <span class="kintoneplugin-require">*</span>
</div>

kintoneplugin-desc

Sample Image

Sample Usage
1

<div class="kintoneplugin-desc">description</div>

Input

kintoneplugin-input-outer, kintoneplugin-input-text

Sample Image

Sample Usage
1
2
3

<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text" />
</div>

Check box

kintoneplugin-input-checkbox, kintoneplugin-input-checkbox-item

Sample Image

Sample Usage
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input id="checkbox-0" checked="checked" name="checkbox" type="checkbox" value="0" />
    <label for="checkbox-0">checkbox A</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input id="checkbox-1" name="checkbox" type="checkbox" value="1"/>
    <label for="checkbox-1">checkbox B</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input id="checkbox-2" checked="checked" disabled="disabled" name="checkbox" type="checkbox" value="2" />
    <label for="checkbox-2">checkbox C</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input id="checkbox-3" disabled="disabled" name="checkbox" type="checkbox" value="3" />
    <label for="checkbox-3">checkbox D</label>
  </span>
</div>

kintoneplugin-dropdown-outer, kintoneplugin-dropdown, kintoneplugin-dropdown-selected

Sample Image

Sample Usage
1
2
3
4
5
6
7

<div class="kintoneplugin-dropdown-outer">
  <div class="kintoneplugin-dropdown">
    <div class="kintoneplugin-dropdown-selected">
      <span class="kintoneplugin-dropdown-selected-name">drop down</span>
    </div>
  </div>
</div>

kintoneplugin-dropdown-list, kintoneplugin-dropdown-list-item, kintoneplugin-dropdown-list-item-selected

Sample Image

Sample Usage
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="kintoneplugin-dropdown-list">
  <div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected">
    <span class="kintoneplugin-dropdown-list-item-name">option A</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">option B</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">option C</span>
  </div>
</div>

kintoneplugin-select-outer, kintoneplugin-select

Sample Image

Sample Usage
1
2
3
4
5
6
7
8
9

<div class="kintoneplugin-select-outer">
  <div class="kintoneplugin-select">
    <select>
      <option>select A</option>
      <option>select B</option>
      <option>select C</option>
    </select>
  </div>
</div>

Radio Button

kintoneplugin-input-radio, kintoneplugin-input-radio-item

Sample Image

Sample Usage
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="kintoneplugin-input-radio">
  <span class="kintoneplugin-input-radio-item">
    <input id="radio-0" checked="checked" name="radio" type="radio" value="0" />
    <label for="radio-0">radio A</label>
  </span>
  <span class="kintoneplugin-input-radio-item">
    <input id="radio-1" name="radio" type="radio" value="1" />
    <label for="radio-1">radio B</label>
  </span>
</div>

Table

kintoneplugin-table, kintoneplugin-table-th, kintoneplugin-table-th-blankspace, kintoneplugin-table-td-control, kintoneplugin-table-td-control-value, kintoneplugin-table-td-operation, kintoneplugin-button-add-row-image, kintoneplugin-button-remove-row-image

Sample Image

Sample Usage
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<table class="kintoneplugin-table">
  <thead>
    <tr>
      <th class="kintoneplugin-table-th"><span class="title">table header</span></th>
      <th class="kintoneplugin-table-th-blankspace"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="kintoneplugin-table-td-control">
          <div class="kintoneplugin-table-td-control-value">
            <div class="kintoneplugin-input-outer">
              <input class="kintoneplugin-input-text" type="text">
            </div>
          </div>
        </div>
      </td>
      <td class="kintoneplugin-table-td-operation">
        <button type="button" class="kintoneplugin-button-add-row-image" title="Add row"></button>
        <button type="button" class="kintoneplugin-button-remove-row-image" title="Delete this row"></button>
      </td>
    </tr>
  </tbody>
</table>

Button

kintoneplugin-button-normal

Sample Image

Sample Usage
1

<button class="kintoneplugin-button-normal">button</button>

kintoneplugin-button-disabled

Sample Image

Sample Usage
1

<button class="kintoneplugin-button-disabled">disabled button</button>

kintoneplugin-button-dialog-ok

Sample Image

Sample Usage
1

<button class="kintoneplugin-button-dialog-ok">OK</button>

kintoneplugin-button-dialog-cancel

Sample Image

Sample Usage
1

<button class="kintoneplugin-button-dialog-cancel">CANCEL</button>

Note

Layouts and styles may look out of place for any future updates that include a change in design. Please note that we cannot assure that the exact same style will be kept after these updates.