diff options
| -rw-r--r-- | src/objects/_table.scss | 34 | ||||
| -rw-r--r-- | tpl/index.pug | 25 | ||||
| -rw-r--r-- | 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 @@ | |||
| 8 | --pad-x: fn.global-dim(--size --200), | 8 | --pad-x: fn.global-dim(--size --200), |
| 9 | --pad-y: fn.global-dim(--size --125), | 9 | --pad-y: fn.global-dim(--size --125), |
| 10 | --rounding: 3px, | 10 | --rounding: 3px, |
| 11 | --50: ( | ||
| 12 | --pad-y: fn.global-dim(--size --75), | ||
| 13 | ) | ||
| 11 | ), | 14 | ), |
| 12 | ), 'dims'); | 15 | ), 'dims'); |
| 13 | 16 | ||
| 14 | @include iro.props-store(( | 17 | @include iro.props-store(( |
| 15 | --colors: ( | 18 | --colors: ( |
| 16 | --bg: fn.global-color(--bg-hi2), | ||
| 17 | --border: fn.global-color(--obj), | 19 | --border: fn.global-color(--obj), |
| 18 | --hover: fn.global-color(--bg), | ||
| 19 | --press: fn.global-color(--obj-hi), | ||
| 20 | --heading: fn.global-color(--fg-hi), | 20 | --heading: fn.global-color(--fg-hi), |
| 21 | --hover: fn.global-color(--obj-hi), | ||
| 22 | --press: fn.global-color(--obj), | ||
| 23 | --box: ( | ||
| 24 | --bg: fn.global-color(--bg-hi2), | ||
| 25 | --hover: fn.global-color(--bg), | ||
| 26 | --press: fn.global-color(--obj-hi), | ||
| 27 | ) | ||
| 21 | ) | 28 | ) |
| 22 | ), 'colors'); | 29 | ), 'colors'); |
| 23 | 30 | ||
| @@ -80,7 +87,7 @@ | |||
| 80 | 87 | ||
| 81 | @include iro.bem-modifier('box') { | 88 | @include iro.bem-modifier('box') { |
| 82 | @include iro.bem-elem('cell') { | 89 | @include iro.bem-elem('cell') { |
| 83 | background-color: fn.color(--bg); | 90 | background-color: fn.color(--box --bg); |
| 84 | 91 | ||
| 85 | &:first-child { | 92 | &:first-child { |
| 86 | border-left-width: 1px; | 93 | border-left-width: 1px; |
| @@ -115,6 +122,25 @@ | |||
| 115 | } | 122 | } |
| 116 | } | 123 | } |
| 117 | } | 124 | } |
| 125 | |||
| 126 | &:hover { | ||
| 127 | @include iro.bem-elem('cell') { | ||
| 128 | background-color: fn.color(--box --hover); | ||
| 129 | } | ||
| 130 | } | ||
| 131 | |||
| 132 | &:active { | ||
| 133 | @include iro.bem-elem('cell') { | ||
| 134 | background-color: fn.color(--box --press); | ||
| 135 | } | ||
| 136 | } | ||
| 137 | } | ||
| 138 | } | ||
| 139 | |||
| 140 | @include iro.bem-modifier('50') { | ||
| 141 | @include iro.bem-elem('head-cell', 'cell') { | ||
| 142 | padding-top: fn.dim(--50 --pad-y); | ||
| 143 | padding-bottom: fn.dim(--50 --pad-y); | ||
| 118 | } | 144 | } |
| 119 | } | 145 | } |
| 120 | } | 146 | } |
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 | |||
| 677 | +table-cell= 'Row 4,2' | 677 | +table-cell= 'Row 4,2' |
| 678 | +table-cell= 'Row 4,3' | 678 | +table-cell= 'Row 4,3' |
| 679 | 679 | ||
| 680 | +box | ||
| 681 | +table(box=true, size50=true) | ||
| 682 | +table-head | ||
| 683 | +table-row | ||
| 684 | +table-head-cell= 'Title' | ||
| 685 | +table-head-cell= 'Title' | ||
| 686 | +table-head-cell= 'Title' | ||
| 687 | +table-body | ||
| 688 | +table-row | ||
| 689 | +table-cell= 'Row 1,1' | ||
| 690 | +table-cell= 'Row 1,2' | ||
| 691 | +table-cell= 'Row 1,3' | ||
| 692 | +table-row | ||
| 693 | +table-cell= 'Row 2,1' | ||
| 694 | +table-cell= 'Row 2,2' | ||
| 695 | +table-cell= 'Row 2,3' | ||
| 696 | +table-row | ||
| 697 | +table-cell= 'Row 3,1' | ||
| 698 | +table-cell= 'Row 3,2' | ||
| 699 | +table-cell= 'Row 3,3' | ||
| 700 | +table-row | ||
| 701 | +table-cell= 'Row 4,1' | ||
| 702 | +table-cell= 'Row 4,2' | ||
| 703 | +table-cell= 'Row 4,3' | ||
| 704 | |||
| 680 | 705 | ||
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 | |||
| 4 | 'o-table': true, | 4 | 'o-table': true, |
| 5 | 'o-table--flush': attributes.flush, | 5 | 'o-table--flush': attributes.flush, |
| 6 | 'o-table--box': attributes.box, | 6 | 'o-table--box': attributes.box, |
| 7 | 'o-table--50': attributes.size50, | ||
| 7 | } | 8 | } |
| 8 | 9 | ||
| 9 | table(class=classes) | 10 | table(class=classes) |
