Added table variants

author: Volpeon <git@volpeon.ink> 2022-03-12 15:47:42 +0100
committer: Volpeon <git@volpeon.ink> 2022-03-12 15:47:42 +0100
commit: 4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e (patch)
tree: 02d87e974bdd679ce7e0c0804269678fc0b07065
parent: Added more utilities (diff)
download: iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.tar.gz
iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.tar.bz2
iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.zip
3 files changed, 112 insertions, 36 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 9f414b8..ebfa49a 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -44,47 +44,12 @@
            border-width:     1px 0 0;
            border-style:     solid;
            border-color:     fn.color(--border);
-            background-color: fn.color(--bg);
-        
-            &:first-child {
-                border-left-width: 1px;
-            }
-        
-            &:last-child {
-                border-right-width: 1px;
-            }
        }
        @include iro.bem-elem('row') {
-            &:first-child {
-                @include iro.bem-elem('cell') {
-                    &:first-child {
-                        border-top-left-radius: fn.dim(--rounding);
-                    }
-        
-                    &:last-child {
-                        border-top-right-radius: fn.dim(--rounding);
-                    }
-                }
-            }
            &:last-child {
                @include iro.bem-elem('cell') {
                    border-bottom-width: 1px;
-                    &:first-child {
-                        border-bottom-left-radius: fn.dim(--rounding);
-                    }
-        
-                    &:last-child {
-                        border-bottom-right-radius: fn.dim(--rounding);
-                    }
-                }
-            }
-            @include iro.bem-next-twin-elem {
-                @include iro.bem-elem('cell') {
-                    border-top: 1px solid fn.color(--border);
                }
            }
@@ -100,5 +65,57 @@
                }
            }
        }
+        @include iro.bem-modifier('flush') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                &:first-child {
+                    padding-left: 0;
+                }
+                &:last-child {
+                    padding-right: 0;
+                }
+            }
+        }
+        @include iro.bem-modifier('box') {
+            @include iro.bem-elem('cell') {
+                background-color: fn.color(--bg);
+            
+                &:first-child {
+                    border-left-width: 1px;
+                }
+            
+                &:last-child {
+                    border-right-width: 1px;
+                }
+            }
+    
+            @include iro.bem-elem('row') {
+                &:first-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-top-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-top-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-bottom-left-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-bottom-right-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
    }
 }
diff --git a/tpl/index.pug b/tpl/index.pug
index b5fe23b..5c46906 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -626,3 +626,55 @@ html
                            +table-cell= 'Row 4,1'
                            +table-cell= 'Row 4,2'
                            +table-cell= 'Row 4,3'
+            +box
+                +table(flush=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'
+            +box
+                +table(box=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 9fb2a06..0e1632d 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -1,5 +1,12 @@
 mixin table
-    table.o-table
+    -
+        let classes = {
+            'o-table':        true,
+            'o-table--flush': attributes.flush,
+            'o-table--box':   attributes.box,
+        }
+    table(class=classes)
        block
 mixin table-head
author	Volpeon <git@volpeon.ink>	2022-03-12 15:47:42 +0100
committer	Volpeon <git@volpeon.ink>	2022-03-12 15:47:42 +0100
commit	4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e (patch)
tree	02d87e974bdd679ce7e0c0804269678fc0b07065
parent	Added more utilities (diff)
download	iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.tar.gz iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.tar.bz2 iro-design-4b16b704d196ecb1605e7cfe7ccc83bb21e76b6e.zip

diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 9f414b8..ebfa49a 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss
@@ -44,47 +44,12 @@
44	border-width: 1px 0 0;	44	border-width: 1px 0 0;
45	border-style: solid;	45	border-style: solid;
46	border-color: fn.color(--border);	46	border-color: fn.color(--border);
47	background-color: fn.color(--bg);
48
49	&:first-child {
50	border-left-width: 1px;
51	}
52
53	&:last-child {
54	border-right-width: 1px;
55	}
56	}	47	}
57		48
58	@include iro.bem-elem('row') {	49	@include iro.bem-elem('row') {
59	&:first-child {
60	@include iro.bem-elem('cell') {
61	&:first-child {
62	border-top-left-radius: fn.dim(--rounding);
63	}
64
65	&:last-child {
66	border-top-right-radius: fn.dim(--rounding);
67	}
68	}
69	}
70
71	&:last-child {	50	&:last-child {
72	@include iro.bem-elem('cell') {	51	@include iro.bem-elem('cell') {
73	border-bottom-width: 1px;	52	border-bottom-width: 1px;
74
75	&:first-child {
76	border-bottom-left-radius: fn.dim(--rounding);
77	}
78
79	&:last-child {
80	border-bottom-right-radius: fn.dim(--rounding);
81	}
82	}
83	}
84
85	@include iro.bem-next-twin-elem {
86	@include iro.bem-elem('cell') {
87	border-top: 1px solid fn.color(--border);
88	}	53	}
89	}	54	}
90		55
@@ -100,5 +65,57 @@
100	}	65	}
101	}	66	}
102	}	67	}
		68
		69	@include iro.bem-modifier('flush') {
		70	@include iro.bem-elem('head-cell', 'cell') {
		71	&:first-child {
		72	padding-left: 0;
		73	}
		74
		75	&:last-child {
		76	padding-right: 0;
		77	}
		78	}
		79	}
		80
		81	@include iro.bem-modifier('box') {
		82	@include iro.bem-elem('cell') {
		83	background-color: fn.color(--bg);
		84
		85	&:first-child {
		86	border-left-width: 1px;
		87	}
		88
		89	&:last-child {
		90	border-right-width: 1px;
		91	}
		92	}
		93
		94	@include iro.bem-elem('row') {
		95	&:first-child {
		96	@include iro.bem-elem('cell') {
		97	&:first-child {
		98	border-top-left-radius: fn.dim(--rounding);
		99	}
		100
		101	&:last-child {
		102	border-top-right-radius: fn.dim(--rounding);
		103	}
		104	}
		105	}
		106
		107	&:last-child {
		108	@include iro.bem-elem('cell') {
		109	&:first-child {
		110	border-bottom-left-radius: fn.dim(--rounding);
		111	}
		112
		113	&:last-child {
		114	border-bottom-right-radius: fn.dim(--rounding);
		115	}
		116	}
		117	}
		118	}
		119	}
103	}	120	}
104	}	121	}


diff --git a/tpl/index.pug b/tpl/index.pug index b5fe23b..5c46906 100644 --- a/tpl/index.pug +++ b/tpl/index.pug
@@ -626,3 +626,55 @@ html
626	+table-cell= 'Row 4,1'	626	+table-cell= 'Row 4,1'
627	+table-cell= 'Row 4,2'	627	+table-cell= 'Row 4,2'
628	+table-cell= 'Row 4,3'	628	+table-cell= 'Row 4,3'
		629
		630	+box
		631	+table(flush=true)
		632	+table-head
		633	+table-row
		634	+table-head-cell= 'Title'
		635	+table-head-cell= 'Title'
		636	+table-head-cell= 'Title'
		637	+table-body
		638	+table-row
		639	+table-cell= 'Row 1,1'
		640	+table-cell= 'Row 1,2'
		641	+table-cell= 'Row 1,3'
		642	+table-row
		643	+table-cell= 'Row 2,1'
		644	+table-cell= 'Row 2,2'
		645	+table-cell= 'Row 2,3'
		646	+table-row
		647	+table-cell= 'Row 3,1'
		648	+table-cell= 'Row 3,2'
		649	+table-cell= 'Row 3,3'
		650	+table-row
		651	+table-cell= 'Row 4,1'
		652	+table-cell= 'Row 4,2'
		653	+table-cell= 'Row 4,3'
		654
		655	+box
		656	+table(box=true)
		657	+table-head
		658	+table-row
		659	+table-head-cell= 'Title'
		660	+table-head-cell= 'Title'
		661	+table-head-cell= 'Title'
		662	+table-body
		663	+table-row
		664	+table-cell= 'Row 1,1'
		665	+table-cell= 'Row 1,2'
		666	+table-cell= 'Row 1,3'
		667	+table-row
		668	+table-cell= 'Row 2,1'
		669	+table-cell= 'Row 2,2'
		670	+table-cell= 'Row 2,3'
		671	+table-row
		672	+table-cell= 'Row 3,1'
		673	+table-cell= 'Row 3,2'
		674	+table-cell= 'Row 3,3'
		675	+table-row
		676	+table-cell= 'Row 4,1'
		677	+table-cell= 'Row 4,2'
		678	+table-cell= 'Row 4,3'
		679
		680


diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug index 9fb2a06..0e1632d 100644 --- a/tpl/objects/table.pug +++ b/tpl/objects/table.pug
@@ -1,5 +1,12 @@
1	mixin table	1	mixin table
2	table.o-table	2	-
		3	let classes = {
		4	'o-table': true,
		5	'o-table--flush': attributes.flush,
		6	'o-table--box': attributes.box,
		7	}
		8
		9	table(class=classes)
3	block	10	block
4		11
5	mixin table-head	12	mixin table-head