summaryrefslogtreecommitdiffstats
path: root/src
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 /src
parentAdded list group (diff)
downloadiro-design-dd934e29b2ecd548573928d88562b536f8f7189e.tar.gz
iro-design-dd934e29b2ecd548573928d88562b536f8f7189e.tar.bz2
iro-design-dd934e29b2ecd548573928d88562b536f8f7189e.zip
Added table
Diffstat (limited to 'src')
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_table.scss104
2 files changed, 105 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}