diff options
-rw-r--r-- | src/objects/_table.scss | 44 | ||||
-rw-r--r-- | tpl/index.pug | 10 | ||||
-rw-r--r-- | tpl/objects/table.pug | 17 |
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 @@ | |||
1 | mixin table | 1 | mixin 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 | ||
29 | mixin table-cell | 30 | mixin 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 |