summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-12 15:11:12 +0100
committerVolpeon <git@volpeon.ink>2022-03-12 15:11:12 +0100
commitdd934e29b2ecd548573928d88562b536f8f7189e (patch)
tree2f0f1477d064a3e3ab489527570cd2490926f7f6
parentAdded list group (diff)
downloadiro-design-dd934e29b2ecd548573928d88562b536f8f7189e.tar.gz
iro-design-dd934e29b2ecd548573928d88562b536f8f7189e.tar.bz2
iro-design-dd934e29b2ecd548573928d88562b536f8f7189e.zip
Added table
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_table.scss104
-rw-r--r--tpl/index.pug31
-rw-r--r--tpl/objects/table.pug23
4 files changed, 159 insertions, 0 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index ce91f5b..7f77968 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -17,3 +17,4 @@
17@use 'objects/dialog'; 17@use 'objects/dialog';
18@use 'objects/lightbox'; 18@use 'objects/lightbox';
19@use 'objects/list-group'; 19@use 'objects/list-group';
20@use 'objects/table';
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
new file mode 100644
index 0000000..e50e2fd
--- /dev/null
+++ b/src/objects/_table.scss
@@ -0,0 +1,104 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('table') {
6 @include iro.props-store((
7 --dims: (
8 --pad-x: fn.global-dim(--size --200),
9 --pad-y: fn.global-dim(--size --125),
10 --rounding: 3px,
11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi2),
17 --border: fn.global-color(--obj),
18 --hover: fn.global-color(--bg),
19 --press: fn.global-color(--obj-hi),
20 --heading: fn.global-color(--fg-hi),
21 )
22 ), 'colors');
23
24 @include iro.bem-object(iro.props-namespace()) {
25 border-spacing: 0;
26 border-collapse: separate;
27
28 @include iro.bem-elem('head-cell') {
29 @include mx.set-font(--standard, (
30 --line-height: null,
31 --size: fn.global-dim(--font-size --50),
32 --weight: 500,
33 --transform: uppercase,
34 --spacing: .5px
35 ));
36
37 padding: fn.dim(--pad-y) fn.dim(--pad-x);
38 color: fn.color(--heading);
39 text-align: left;
40 }
41
42 @include iro.bem-elem('cell') {
43 padding: fn.dim(--pad-y) fn.dim(--pad-x);
44 border-width: 1px 0 0 0;
45 border-style: solid;
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 }
57
58 @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 {
72 @include iro.bem-elem('cell') {
73 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 }
89 }
90
91 &:hover {
92 @include iro.bem-elem('cell') {
93 background-color: fn.color(--hover);
94 }
95 }
96
97 &:active {
98 @include iro.bem-elem('cell') {
99 background-color: fn.color(--press);
100 }
101 }
102 }
103 }
104}
diff --git a/tpl/index.pug b/tpl/index.pug
index e1a6445..162a041 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -22,6 +22,7 @@ include objects/backdrop.pug
22include objects/dialog.pug 22include objects/dialog.pug
23include objects/lightbox.pug 23include objects/lightbox.pug
24include objects/list-group.pug 24include objects/list-group.pug
25include objects/table.pug
25 26
26mixin box 27mixin box
27 +container(padX=true padY=true inPage=true) 28 +container(padX=true padY=true inPage=true)
@@ -596,4 +597,34 @@ html
596 +list-group-item(action=true)= 'Third item' 597 +list-group-item(action=true)= 'Third item'
597 +list-group-item(action=true)= 'Fourth item' 598 +list-group-item(action=true)= 'Fourth item'
598 599
600 //-----------------------------------------
601
602 +h1-heading('xl')= 'Table'
603 +rule('medium')
604
605 +box
606 +table
607 +table-head
608 +table-row
609 +table-head-cell= 'Title'
610 +table-head-cell= 'Title'
611 +table-head-cell= 'Title'
612 +table-body
613 +table-row
614 +table-cell= 'Row 1,1'
615 +table-cell= 'Row 1,2'
616 +table-cell= 'Row 1,3'
617 +table-row
618 +table-cell= 'Row 2,1'
619 +table-cell= 'Row 2,2'
620 +table-cell= 'Row 2,3'
621 +table-row
622 +table-cell= 'Row 3,1'
623 +table-cell= 'Row 3,2'
624 +table-cell= 'Row 3,3'
625 +table-row
626 +table-cell= 'Row 4,1'
627 +table-cell= 'Row 4,2'
628 +table-cell= 'Row 4,3'
629
599 630
diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug
new file mode 100644
index 0000000..9fb2a06
--- /dev/null
+++ b/tpl/objects/table.pug
@@ -0,0 +1,23 @@
1mixin table
2 table.o-table
3 block
4
5mixin table-head
6 thead.o-table__head
7 block
8
9mixin table-head-cell
10 th.o-table__head-cell
11 block
12
13mixin table-body
14 tbody.o-table__body
15 block
16
17mixin table-row
18 tr.o-table__row
19 block
20
21mixin table-cell
22 td.o-table__cell
23 block