From 4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Mar 2022 15:47:42 +0100 Subject: Added table variants --- src/objects/_table.scss | 87 +++++++++++++++++++++++++++++-------------------- tpl/index.pug | 52 +++++++++++++++++++++++++++++ tpl/objects/table.pug | 9 ++++- 3 files changed, 112 insertions(+), 36 deletions(-) diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 9f414b8..ebfa49a 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -44,47 +44,12 @@ border-width: 1px 0 0; border-style: solid; border-color: fn.color(--border); - background-color: fn.color(--bg); - - &:first-child { - border-left-width: 1px; - } - - &:last-child { - border-right-width: 1px; - } } @include iro.bem-elem('row') { - &:first-child { - @include iro.bem-elem('cell') { - &:first-child { - border-top-left-radius: fn.dim(--rounding); - } - - &:last-child { - border-top-right-radius: fn.dim(--rounding); - } - } - } - &:last-child { @include iro.bem-elem('cell') { border-bottom-width: 1px; - - &:first-child { - border-bottom-left-radius: fn.dim(--rounding); - } - - &:last-child { - border-bottom-right-radius: fn.dim(--rounding); - } - } - } - - @include iro.bem-next-twin-elem { - @include iro.bem-elem('cell') { - border-top: 1px solid fn.color(--border); } } @@ -100,5 +65,57 @@ } } } + + @include iro.bem-modifier('flush') { + @include iro.bem-elem('head-cell', 'cell') { + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + + @include iro.bem-modifier('box') { + @include iro.bem-elem('cell') { + background-color: fn.color(--bg); + + &:first-child { + border-left-width: 1px; + } + + &:last-child { + border-right-width: 1px; + } + } + + @include iro.bem-elem('row') { + &:first-child { + @include iro.bem-elem('cell') { + &:first-child { + border-top-left-radius: fn.dim(--rounding); + } + + &:last-child { + border-top-right-radius: fn.dim(--rounding); + } + } + } + + &:last-child { + @include iro.bem-elem('cell') { + &:first-child { + border-bottom-left-radius: fn.dim(--rounding); + } + + &:last-child { + border-bottom-right-radius: fn.dim(--rounding); + } + } + } + } + } } } diff --git a/tpl/index.pug b/tpl/index.pug index b5fe23b..5c46906 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -626,3 +626,55 @@ html +table-cell= 'Row 4,1' +table-cell= 'Row 4,2' +table-cell= 'Row 4,3' + + +box + +table(flush=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell= 'Row 4,1' + +table-cell= 'Row 4,2' + +table-cell= 'Row 4,3' + + +box + +table(box=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell= 'Row 4,1' + +table-cell= 'Row 4,2' + +table-cell= 'Row 4,3' + + diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug index 9fb2a06..0e1632d 100644 --- a/tpl/objects/table.pug +++ b/tpl/objects/table.pug @@ -1,5 +1,12 @@ mixin table - table.o-table + - + let classes = { + 'o-table': true, + 'o-table--flush': attributes.flush, + 'o-table--box': attributes.box, + } + + table(class=classes) block mixin table-head -- cgit v1.2.3-70-g09d2