From d8e9977b1747f1f73a7ed2a3e08c2c11aa2e7fcb Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Mar 2022 22:30:17 +0100 Subject: Table: Fixed hover bg, added small size --- src/objects/_table.scss | 34 ++++++++++++++++++++++++++++++---- tpl/index.pug | 25 +++++++++++++++++++++++++ tpl/objects/table.pug | 1 + 3 files changed, 56 insertions(+), 4 deletions(-) diff --git a/src/objects/_table.scss b/src/objects/_table.scss index ebfa49a..faf6019 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -8,16 +8,23 @@ --pad-x: fn.global-dim(--size --200), --pad-y: fn.global-dim(--size --125), --rounding: 3px, + --50: ( + --pad-y: fn.global-dim(--size --75), + ) ), ), 'dims'); @include iro.props-store(( --colors: ( - --bg: fn.global-color(--bg-hi2), --border: fn.global-color(--obj), - --hover: fn.global-color(--bg), - --press: fn.global-color(--obj-hi), --heading: fn.global-color(--fg-hi), + --hover: fn.global-color(--obj-hi), + --press: fn.global-color(--obj), + --box: ( + --bg: fn.global-color(--bg-hi2), + --hover: fn.global-color(--bg), + --press: fn.global-color(--obj-hi), + ) ) ), 'colors'); @@ -80,7 +87,7 @@ @include iro.bem-modifier('box') { @include iro.bem-elem('cell') { - background-color: fn.color(--bg); + background-color: fn.color(--box --bg); &:first-child { border-left-width: 1px; @@ -115,6 +122,25 @@ } } } + + &:hover { + @include iro.bem-elem('cell') { + background-color: fn.color(--box --hover); + } + } + + &:active { + @include iro.bem-elem('cell') { + background-color: fn.color(--box --press); + } + } + } + } + + @include iro.bem-modifier('50') { + @include iro.bem-elem('head-cell', 'cell') { + padding-top: fn.dim(--50 --pad-y); + padding-bottom: fn.dim(--50 --pad-y); } } } diff --git a/tpl/index.pug b/tpl/index.pug index 5c46906..016f6be 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -677,4 +677,29 @@ html +table-cell= 'Row 4,2' +table-cell= 'Row 4,3' + +box + +table(box=true, size50=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 0e1632d..b7ec881 100644 --- a/tpl/objects/table.pug +++ b/tpl/objects/table.pug @@ -4,6 +4,7 @@ mixin table 'o-table': true, 'o-table--flush': attributes.flush, 'o-table--box': attributes.box, + 'o-table--50': attributes.size50, } table(class=classes) -- cgit v1.2.3-70-g09d2