Table: Fixed hover bg, added small size

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)