Framework Components [onepg-base.css]

CSS class list.

div.grid-row: Grid row element
div.grid-col-1: Grid column element width 1/12
div.grid-col-2: Grid column element width 2/12
div.grid-col-3: Grid column element width 3/12
div.grid-col-4: Grid column element width 4/12
div.grid-col-5: Grid column element width 5/12
div.grid-col-6: Grid column element width 6/12
div.grid-col-7: Grid column element width 7/12
div.grid-col-8: Grid column element width 8/12
div.grid-col-9: Grid column element width 9/12
div.grid-col-10: Grid column element width 10/12
div.grid-col-11: Grid column element width 11/12
div.grid-col-12: Grid column element width 12/12
div.item-head: Item header element within grid cell
div.item-body: Item body element within grid cell
div.table: Element that wraps table
.align-left: Text left align
.align-center: Text center align
.align-right: Text right align
.danger: Displays in warning color (for delete buttons, etc.)
a.button: Displays link (<a>) as button style

Page overall layout.

<header> and <footer> are fixed at the top and bottom.
<main> uses all remaining height except <header> and <footer>.
<section> provides page left/right margin and section top/bottom spacing. Do not use <section> if you want to remove top/bottom spacing.

[Example]
<body>
  <header>
    <section>Fixed header</section>
  </header>
  <main>
    <section>Main content</section>
  </main>
  <footer>
    <section>Fixed footer</section>
  </footer>
</body>

Grid layout (12-column division).

Uses a layout technique that divides page width into 12 equal parts for flexible element placement.
Row elements are specified with div.grid-row, and column widths are specified per row.
Column elements are specified with div.grid-col-1 ~ div.grid-col-12, where the trailing number represents the column width.
Column widths use values from 1 to 12, and should be specified so that the total equals 12.
Column width is normally 1/12 of the total, but on smartphone size, it changes to full width and columns become vertically stacked (rows).
Within columns, items are normally arranged horizontally, but on tablet size, they change to vertical arrangement.

[Example 1]
<div class="grid-row">
  <div class="grid-col-3">1/4 of full width</div>
  <div class="grid-col-3">1/4 of full width</div>
  <div class="grid-col-3">1/4 of full width</div>
  <div class="grid-col-3">1/4 of full width</div>
</div>
[Example 2] Widths do not need to be uniform
<div class="grid-row">
  <div class="grid-col-6">1/2 of full width</div>
  <div class="grid-col-4">1/3 of full width</div>
  <div class="grid-col-2">1/6 of full width</div>
</div>

Form input element styles.

Unifies styles for form input elements such as text boxes, select boxes, and text areas.
Unifies styles for normal, focused, and disabled states.
Unifies styles for labels paired with form input elements.
Wrapping label elements in div.item-head and form input elements in div.item-body applies height adjustment and layout direction switching styles according to page size.
```
[Example]
<div class="item-head"><label>Item name</label></div>
 <div class="item-body"><input type="text"></div>
```

For checkboxes and radio buttons, wrap the element and value name in <label>.

[Example]<div class="item-body"><label><input type="checkbox">Value name</label></div>

Table styles.

Unifies <table> styles.
Tables display stripes per row.

Styles are applied by wrapping <table> in div.table.

[Example]
<div class="table"><table>...omitted...</table></div>

Styles are applied by wrapping <th> in <thead> and <tr> in <tbody>.

<tbody> can be one or multiple.

[One example]<table>...omitted...<tbody><tr></tr><tr></tr><tr></tr><tr></tr></tbody></table>
[Multiple example]<table>...omitted...<tbody><tr></tr><tr></tr></tbody><tbody><tr></tr><tr></tr></tbody></table>

Utility styles.

This section provides frequently used general-purpose styles.
Sets the following classes for text alignment.
- Left align: .align-left
- Center align: .align-center
- Right align: .align-right
Setting .danger on elements requiring caution displays them in warning color (used for delete buttons, etc.).
Setting .button on <a> displays it as button style.

Message display/item highlight styles.

Message display area HTML is fixed in the following format.
```
<section id="_msg"></section>
```
Calling JavaScript framework component PageUtil#setMsg() sets the following classes on target item elements, and those items are highlighted.
- Info (blue background): .info-item
- Warning (yellow background): .warn-item
- Error (red background): .err-item
Items to be highlighted are specified with message text in the arguments of Java framework component Io#putMsg().

Constant List

All constant names start with --onepg-base--. (e.g., line-height--all → --onepg-base--line-height--all)

Constant Label	Constant Name (after --onepg-base--)	Value
Overall line height	`line-height--all`	`1.5`
Section left/right margin	`spacing--section-lr`	`1.5rem`
Section top/bottom margin	`spacing--section-tb`	`1rem`
Header/footer section top/bottom margin	`spacing--section-tb-header-footer`	`0.5rem`
Input item height	`height--inputitem`	`2rem`
Input item border width	`border-width--inputitem`	`1px`
Input item frame left/right padding	`spacing--inputitem-lr`	`0.25rem`
Input item frame border radius	`radius--inputitem`	`4px`
Button frame border radius	`radius--button`	`calc(var(--onepg-base--height--inputitem) / 2)`
Button frame left/right padding	`spacing--button-lr`	`var(--onepg-base--radius--button)`
Item left/right margin	`spacing--item-lr`	`0.25rem`
Grid row spacing	`spacing--grid-rows`	`0.75rem`
Grid column spacing	`spacing--grid-cols`	`0.25rem`
Background color	`color--bg`	`#e5e4e6`
Header/footer background color	`color--bg-header-footer`	`#eae5e3`
Table stripe background color	`color--bg-stripe`	`#dddcd6`
Text color	`color--text`	`#2e2930`
Disabled text color	`color--text-disabled`	`#9ea1a3`
Danger text color	`color--text-danger`	`#e83929`
Input item background color	`color--input-bg`	`#f8fbf8`
Border color	`color--border`	`#c8c2c6`
Disabled background color	`color--input-bg-disabled`	`transparent`
Button background color	`color--button-bg`	`#595857`
Danger button color	`color--button-bg-danger`	`#d3381c`
Button border color	`color--button-border`	`var(--onepg-base--color--border)`
Button disabled background color	`color--button-bg-disabled`	`var(--onepg-base--color--button-border)`
Button disabled border color	`color--button-border-disabled`	`#dcd6d9`
Button text color	`color--button-text`	`#fffffc`
Table border color	`color--table-border`	`#a89dac`
Focus border color	`color--focus`	`#2ca9e1`
Message display area left/right padding	`spacing--msg-lr`	`0.5rem`
Info message background color	`color--info-msg-bg`	`#bce2e8`
Warning message background color	`color--warn-msg-bg`	`#f8e58c`
Error message background color	`color--err-msg-bg`	`#eebbcb`
Info item background color	`color--info-item-bg`	`#bce2e8`
Warning item background color	`color--warn-item-bg`	`#f8e58c`
Error item background color	`color--err-item-bg`	`#eebbcb`
Focus shadow	`shadow--focus`	`0 0 0 2px var(--onepg-base--color--focus)`
Header/footer fixed shadow	`shadow--header-footer`	`0 2px 4px rgba(0, 0, 0, 0.1)`

CSSDoc

Table of Contents