More table options

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 @@
             border-width:     1px 0 0;
             border-style:     solid;
             border-color:     fn.color(--border);
+
+            @include iro.bem-modifier('divider') {
+                border-right-width: 1px;
+            }
         }
 
         @include iro.bem-elem('row') {
@@ -59,18 +63,6 @@
                     border-bottom-width: 1px;
                 }
             }
-
-            &:hover {
-                @include iro.bem-elem('cell') {
-                    background-color: fn.color(--hover);
-                }
-            }
-
-            &:active {
-                @include iro.bem-elem('cell') {
-                    background-color: fn.color(--press);
-                }
-            }
         }
 
         @include iro.bem-modifier('flush') {
@@ -122,16 +114,40 @@
                         }
                     }
                 }
+            }
+        }
+
+        @include iro.bem-modifier('interactive') {
+            @include iro.bem-elem('row') {
+                @include iro.bem-elem('cell') {
+                    cursor: pointer;
+                }
 
                 &:hover {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--box --hover);
+                        background-color: fn.color(--hover);
                     }
                 }
     
                 &:active {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--box --press);
+                        background-color: fn.color(--press);
+                    }
+                }
+            }
+
+            @include iro.bem-modifier('box') {
+                @include iro.bem-elem('row') {
+                    &:hover {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --hover);
+                        }
+                    }
+        
+                    &:active {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --press);
+                        }
                     }
                 }
             }
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
             +rule('medium')
 
             +box
-                +table
+                +table(interactive=true)
                     +table-head
                         +table-row 
                             +table-head-cell= 'Title'
@@ -661,19 +661,19 @@ html
                             +table-head-cell= 'Title'
                     +table-body
                         +table-row 
-                            +table-cell= 'Row 1,1'
+                            +table-cell(divider=true)= 'Row 1,1'
                             +table-cell= 'Row 1,2'
                             +table-cell= 'Row 1,3'
                         +table-row 
-                            +table-cell= 'Row 2,1'
+                            +table-cell(divider=true)= 'Row 2,1'
                             +table-cell= 'Row 2,2'
                             +table-cell= 'Row 2,3'
                         +table-row 
-                            +table-cell= 'Row 3,1'
+                            +table-cell(divider=true)= 'Row 3,1'
                             +table-cell= 'Row 3,2'
                             +table-cell= 'Row 3,3'
                         +table-row 
-                            +table-cell= 'Row 4,1'
+                            +table-cell(divider=true)= '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 b7ec881..e635589 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -1,10 +1,11 @@
 mixin table
     -
         let classes = {
-            'o-table':        true,
-            'o-table--flush': attributes.flush,
-            'o-table--box':   attributes.box,
-            'o-table--50':    attributes.size50,
+            'o-table':              true,
+            'o-table--flush':       attributes.flush,
+            'o-table--box':         attributes.box,
+            'o-table--interactive': attributes.interactive,
+            'o-table--50':          attributes.size50,
         }
 
     table(class=classes)
@@ -27,5 +28,11 @@ mixin table-row
         block
 
 mixin table-cell
-    td.o-table__cell
+    -
+        let classes = {
+            'o-table__cell':          true,
+            'o-table__cell--divider': attributes.divider,
+        }
+
+    td(class=classes)
         block