Table: Fixed hover bg, added small size

1 files changed, 30 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);
             }
         }
     }