Plugin Stylesheet Guide

Introduction

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

Alert message

kintoneplugin-alert

Sample Image

 

Sample Usage

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

Label

kintoneplugin-row

Sample Image

Sample Usage

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

kintoneplugin-label

Sample Image

Sample Usage

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

kintoneplugin-require

Sample Image

Sample Usage

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

Input

kintoneplugin-input-outer

kintoneplugin-input-text

Sample Image

Sample Usage

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

Check box

kintone-plugin-input-checkbox

kintone-plugin-input-checkbox-item

Sample Image

Sample Usage

  
<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>

Dropdown

kintoneplugin-dropdown-outer

kintoneplugin-dropdown

kintoneplugin-dropdown-selected

Sample Image

Sample Usage

<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

<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

<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

<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>

Button

kintoneplugin-button-normal

Sample Image

Sample Usage

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

kintoneplugin-button-disabled

Sample Image

Sample Usage

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

kintoneplugin-button-dialog-ok

Sample Image

Sample Usage

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

kintoneplugin-button-dialog-cancel

Sample Image

Sample Usage

<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.