summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_table.scss44
-rw-r--r--tpl/index.pug10
-rw-r--r--tpl/objects/table.pug17
3 files changed, 47 insertions, 24 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index faf6019..410492b 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -51,6 +51,10 @@
51 border-width: 1px 0 0; 51 border-width: 1px 0 0;
52 border-style: solid; 52 border-style: solid;
53 border-color: fn.color(--border); 53 border-color: fn.color(--border);
54
55 @include iro.bem-modifier('divider') {
56 border-right-width: 1px;
57 }
54 } 58 }
55 59
56 @include iro.bem-elem('row') { 60 @include iro.bem-elem('row') {
@@ -59,18 +63,6 @@
59 border-bottom-width: 1px; 63 border-bottom-width: 1px;
60 } 64 }
61 } 65 }
62
63 &:hover {
64 @include iro.bem-elem('cell') {
65 background-color: fn.color(--hover);
66 }
67 }
68
69 &:active {
70 @include iro.bem-elem('cell') {
71 background-color: fn.color(--press);
72 }
73 }
74 } 66 }
75 67
76 @include iro.bem-modifier('flush') { 68 @include iro.bem-modifier('flush') {
@@ -122,16 +114,40 @@
122 } 114 }
123 } 115 }
124 } 116 }
117 }
118 }
119
120 @include iro.bem-modifier('interactive') {
121 @include iro.bem-elem('row') {
122 @include iro.bem-elem('cell') {
123 cursor: pointer;
124 }
125 125
126 &:hover { 126 &:hover {
127 @include iro.bem-elem('cell') { 127 @include iro.bem-elem('cell') {
128 background-color: fn.color(--box --hover); 128 background-color: fn.color(--hover);
129 } 129 }
130 } 130 }
131 131
132 &:active { 132 &:active {
133 @include iro.bem-elem('cell') { 133 @include iro.bem-elem('cell') {
134 background-color: fn.color(--box --press); 134 background-color: fn.color(--press);
135 }
136 }
137 }
138
139 @include iro.bem-modifier('box') {
140 @include iro.bem-elem('row') {
141 &:hover {
142 @include iro.bem-elem('cell') {
143 background-color: fn.color(--box --hover);
144 }
145 }
146
147 &:active {
148 @include iro.bem-elem('cell') {
149 background-color: fn.color(--box --press);
150 }
135 } 151 }
136 } 152 }
137 } 153 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 016f6be..be9f407 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -603,7 +603,7 @@ html
603 +rule('medium') 603 +rule('medium')
604 604
605 +box 605 +box
606 +table 606 +table(interactive=true)
607 +table-head 607 +table-head
608 +table-row 608 +table-row
609 +table-head-cell= 'Title' 609 +table-head-cell= 'Title'
@@ -661,19 +661,19 @@ html
661 +table-head-cell= 'Title' 661 +table-head-cell= 'Title'
662 +table-body 662 +table-body
663 +table-row 663 +table-row
664 +table-cell= 'Row 1,1' 664 +table-cell(divider=true)= 'Row 1,1'
665 +table-cell= 'Row 1,2' 665 +table-cell= 'Row 1,2'
666 +table-cell= 'Row 1,3' 666 +table-cell= 'Row 1,3'
667 +table-row 667 +table-row
668 +table-cell= 'Row 2,1' 668 +table-cell(divider=true)= 'Row 2,1'
669 +table-cell= 'Row 2,2' 669 +table-cell= 'Row 2,2'
670 +table-cell= 'Row 2,3' 670 +table-cell= 'Row 2,3'
671 +table-row 671 +table-row
672 +table-cell= 'Row 3,1' 672 +table-cell(divider=true)= 'Row 3,1'
673 +table-cell= 'Row 3,2' 673 +table-cell= 'Row 3,2'
674 +table-cell= 'Row 3,3' 674 +table-cell= 'Row 3,3'
675 +table-row 675 +table-row
676 +table-cell= 'Row 4,1' 676 +table-cell(divider=true)= 'Row 4,1'
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
diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug
index b7ec881..e635589 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -1,10 +1,11 @@
1mixin table 1mixin table
2 - 2 -
3 let classes = { 3 let classes = {
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 'o-table--interactive': attributes.interactive,
8 'o-table--50': attributes.size50,
8 } 9 }
9 10
10 table(class=classes) 11 table(class=classes)
@@ -27,5 +28,11 @@ mixin table-row
27 block 28 block
28 29
29mixin table-cell 30mixin table-cell
30 td.o-table__cell 31 -
32 let classes = {
33 'o-table__cell': true,
34 'o-table__cell--divider': attributes.divider,
35 }
36
37 td(class=classes)
31 block 38 block