diff --git a/styles/package.json b/styles/package.json index 66a188e..59a0669 100644 --- a/styles/package.json +++ b/styles/package.json @@ -1,6 +1,6 @@ { "name": "@ippon-ui/styles", - "version": "0.0.5", + "version": "0.0.6", "description": "Ippon UI Pattern Library", "repository": { "type": "git", diff --git a/styles/src/molecule/_molecule.scss b/styles/src/molecule/_molecule.scss index aa98cb2..72c3aa3 100644 --- a/styles/src/molecule/_molecule.scss +++ b/styles/src/molecule/_molecule.scss @@ -1,2 +1,4 @@ @use 'import-file/import-file'; +@use 'table/table'; +@use 'tabs/tabs'; @use 'toggle/toggle'; diff --git a/styles/src/molecule/molecule.pug b/styles/src/molecule/molecule.pug index b50f66c..337215e 100644 --- a/styles/src/molecule/molecule.pug +++ b/styles/src/molecule/molecule.pug @@ -12,9 +12,11 @@ block content h1#molecules.tikui-title-main Molecules .tikui-vertical-spacing--line include /documentation/atomic-design/quote/molecule - .tikui-vertical-spacing--line - include:componentDoc(height=60) tabs/tabs.md .tikui-vertical-spacing--line include:componentDoc(height=370) import-file/import-file.md + .tikui-vertical-spacing--line + include:componentDoc(height=190) table/table.md + .tikui-vertical-spacing--line + include:componentDoc(height=60) tabs/tabs.md .tikui-vertical-spacing--line include:componentDoc(height=280) toggle/toggle.md diff --git a/styles/src/molecule/table/_table.scss b/styles/src/molecule/table/_table.scss new file mode 100644 index 0000000..56082c1 --- /dev/null +++ b/styles/src/molecule/table/_table.scss @@ -0,0 +1,46 @@ +@use '../../quark/typography'; + +.ippon-table { + --_border: 1px solid var(--ippon-color-neutral-border); + + box-sizing: border-box; + border: var(--_border); + border-radius: var(--ippon-radius-l); + width: 100%; + overflow: hidden; + border-collapse: separate; + border-spacing: 0; + + &--head { + background-color: var(--ippon-color-neutral-surface-secondary); + color: var(--ippon-color-neutral-text-icon-tertiary); + + @include typography.body-medium-bold; + } + + &--body { + background-color: var(--ippon-color-neutral-surface-primary); + color: var(--ippon-color-neutral-text-icon-primary); + + @include typography.body-medium; + } + + &--header, + &--cell { + box-sizing: border-box; + padding: var(--ippon-size-8) var(--ippon-size-12); + text-align: left; + } + + &--header { + border-bottom: var(--_border); + } + + &--row:last-child &--cell { + border-bottom: 0; + } + + &--cell { + border-bottom: var(--_border); + } +} diff --git a/styles/src/molecule/table/table.code.pug b/styles/src/molecule/table/table.code.pug new file mode 100644 index 0000000..be4e39e --- /dev/null +++ b/styles/src/molecule/table/table.code.pug @@ -0,0 +1,25 @@ +include table.mixin.pug + ++ippon-table + +ippon-table--head + +ippon-table--row + +ippon-table--header Column A + +ippon-table--header Column B + +ippon-table--header Column C + +ippon-table--header Column D + +ippon-table--body + +ippon-table--row + +ippon-table--cell Cell A1 + +ippon-table--cell Cell B1 + +ippon-table--cell Cell C1 + +ippon-table--cell Cell D1 + +ippon-table--row + +ippon-table--cell Cell A2 + +ippon-table--cell Cell B2 + +ippon-table--cell Cell C2 + +ippon-table--cell Cell D2 + +ippon-table--row + +ippon-table--cell Cell A3 + +ippon-table--cell Cell B3 + +ippon-table--cell Cell C3 + +ippon-table--cell Cell D3 diff --git a/styles/src/molecule/table/table.md b/styles/src/molecule/table/table.md new file mode 100644 index 0000000..a578ec5 --- /dev/null +++ b/styles/src/molecule/table/table.md @@ -0,0 +1 @@ +## Table diff --git a/styles/src/molecule/table/table.mixin.pug b/styles/src/molecule/table/table.mixin.pug new file mode 100644 index 0000000..39b2e31 --- /dev/null +++ b/styles/src/molecule/table/table.mixin.pug @@ -0,0 +1,23 @@ +mixin ippon-table--head + thead.ippon-table--head + block + +mixin ippon-table--body + tbody.ippon-table--body + block + +mixin ippon-table--row + tr.ippon-table--row + block + +mixin ippon-table--header + th.ippon-table--header + block + +mixin ippon-table--cell + td.ippon-table--cell + block + +mixin ippon-table + table.ippon-table + block diff --git a/styles/src/molecule/table/table.render.pug b/styles/src/molecule/table/table.render.pug new file mode 100644 index 0000000..dfa8138 --- /dev/null +++ b/styles/src/molecule/table/table.render.pug @@ -0,0 +1,4 @@ +extends /layout + +block body + include table.code.pug