More styles for table scope

1 files changed, 57 insertions, 0 deletions

diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 1907bac..f78e81b 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -7,6 +7,7 @@
         --dims: (
             --pad-x:      fn.global-dim(--size --175),
             --pad-y:      fn.global-dim(--size --125),
+            --rounding:   3px,
             --margin-top: fn.global-dim(--paragraph --margin-top),
         ),
     ), 'dims');
@@ -15,6 +16,9 @@
         --colors: (
             --border:  fn.global-color(--obj),
             --heading: fn.global-color(--fg-hi),
+            --box: (
+                --bg: fn.global-color(--bg-hi2),
+            )
         )
     ), 'colors');
 
@@ -53,5 +57,58 @@
                 }
             }
         }
+
+        @include iro.bem-modifier('flush') {
+            th,
+            td {
+                &:first-child {
+                    padding-left: 0;
+                }
+
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            td {
+                background-color: fn.color(--box --bg);
+            
+                &:first-child {
+                    border-left-width: 1px;
+                }
+            
+                &:last-child {
+                    border-right-width: 1px;
+                }
+            }
+    
+            tr {
+                &:first-child {
+                    td {
+                        &:first-child {
+                            border-top-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-top-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    td {
+                        &:first-child {
+                            border-bottom-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-bottom-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
     }
 }