summaryrefslogtreecommitdiffstats
path: root/src/objects/_table.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_table.scss')
-rw-r--r--src/objects/_table.scss141
1 files changed, 60 insertions, 81 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 2c9f65b..2b63737 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,78 +1,57 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use '../mixins' as mx; 3@use 'iro-sass/src/props';
4@use '../props' as *;
4 5
5@include iro.props-namespace('table') { 6@forward 'table.vars';
6 @include iro.props-store(( 7@use 'table.vars' as vars;
7 --dims: (
8 --pad-i: fn.global-dim(--size --175),
9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 8
13 --sm: ( 9@mixin styles {
14 --pad-b: fn.global-dim(--size --75), 10 @include materialize-at-root(meta.module-variables('vars'));
15 )
16 ),
17 --colors: (
18 --border: fn.global-color(--border),
19 --heading: fn.global-color(--heading),
20 --hover: fn.global-color(--border-mute),
21 --active: fn.global-color(--border),
22 --box: (
23 --bg: fn.global-color(--base --50),
24 --hover: fn.global-color(--bg-base),
25 --active: fn.global-color(--border-mute),
26 )
27 )
28 ));
29 11
30 @include iro.bem-object(iro.props-namespace()) { 12 @include bem.object('table') {
31 border-spacing: 0; 13 border-spacing: 0;
32 border-collapse: separate; 14 border-collapse: separate;
33 15
34 @include iro.bem-modifier('fixed') { 16 @include bem.modifier('fixed') {
35 table-layout: fixed; 17 table-layout: fixed;
36 } 18 }
37 19
38 @include iro.bem-elem('head-cell') { 20 @include bem.elem('head-cell') {
39 @include mx.set-font(--standard, ( 21 padding-block: props.get(vars.$pad-b);
40 --line-height: null, 22 padding-inline: props.get(vars.$pad-i);
41 --size: fn.global-dim(--font-size --50), 23 font-family: props.get(vars.$heading--font-family);
42 --weight: bold, 24 font-size: props.get(vars.$heading--font-size);
43 --transform: uppercase, 25 font-weight: props.get(vars.$heading--font-weight);
44 --spacing: .5px 26 color: props.get(vars.$heading-color);
45 ));
46
47 padding-inline: fn.dim(--pad-i);
48 padding-block: fn.dim(--pad-b);
49 color: fn.color(--heading);
50 text-align: start; 27 text-align: start;
28 text-transform: props.get(vars.$heading--text-transform);
29 letter-spacing: props.get(vars.$heading--letter-spacing);
51 } 30 }
52 31
53 @include iro.bem-elem('cell') { 32 @include bem.elem('cell') {
54 padding-inline: fn.dim(--pad-i); 33 padding-block: props.get(vars.$pad-b);
55 padding-block: fn.dim(--pad-b); 34 padding-inline: props.get(vars.$pad-i);
56 border-width: 0; 35 border-color: props.get(vars.$border-color);
57 border-block-start-width: fn.dim(--border);
58 border-style: solid; 36 border-style: solid;
59 border-color: fn.color(--border); 37 border-width: 0;
38 border-block-start-width: props.get(vars.$border-width);
60 39
61 @include iro.bem-modifier('divider') { 40 @include bem.modifier('divider') {
62 border-inline-end-width: fn.dim(--border); 41 border-inline-end-width: props.get(vars.$border-width);
63 } 42 }
64 } 43 }
65 44
66 @include iro.bem-elem('row') { 45 @include bem.elem('row') {
67 &:last-child { 46 &:last-child {
68 @include iro.bem-elem('cell') { 47 @include bem.elem('cell') {
69 border-block-end-width: fn.dim(--border); 48 border-block-end-width: props.get(vars.$border-width);
70 } 49 }
71 } 50 }
72 } 51 }
73 52
74 @include iro.bem-modifier('flush') { 53 @include bem.modifier('flush') {
75 @include iro.bem-elem('head-cell', 'cell') { 54 @include bem.elem('head-cell', 'cell') {
76 &:first-child { 55 &:first-child {
77 padding-inline-start: 0; 56 padding-inline-start: 0;
78 } 57 }
@@ -83,85 +62,85 @@
83 } 62 }
84 } 63 }
85 64
86 @include iro.bem-modifier('box') { 65 @include bem.modifier('box') {
87 @include iro.bem-elem('cell') { 66 @include bem.elem('cell') {
88 background-color: fn.color(--box --bg); 67 background-color: props.get(vars.$box--bg-color);
89 68
90 &:first-child { 69 &:first-child {
91 border-inline-start-width: fn.dim(--border); 70 border-inline-start-width: props.get(vars.$border-width);
92 } 71 }
93 72
94 &:last-child { 73 &:last-child {
95 border-inline-end-width: fn.dim(--border); 74 border-inline-end-width: props.get(vars.$border-width);
96 } 75 }
97 } 76 }
98 77
99 @include iro.bem-elem('row') { 78 @include bem.elem('row') {
100 &:first-child { 79 &:first-child {
101 @include iro.bem-elem('cell') { 80 @include bem.elem('cell') {
102 &:first-child { 81 &:first-child {
103 border-start-start-radius: fn.dim(--rounding); 82 border-start-start-radius: props.get(vars.$rounding);
104 } 83 }
105 84
106 &:last-child { 85 &:last-child {
107 border-start-end-radius: fn.dim(--rounding); 86 border-start-end-radius: props.get(vars.$rounding);
108 } 87 }
109 } 88 }
110 } 89 }
111 90
112 &:last-child { 91 &:last-child {
113 @include iro.bem-elem('cell') { 92 @include bem.elem('cell') {
114 &:first-child { 93 &:first-child {
115 border-end-start-radius: fn.dim(--rounding); 94 border-end-start-radius: props.get(vars.$rounding);
116 } 95 }
117 96
118 &:last-child { 97 &:last-child {
119 border-end-end-radius: fn.dim(--rounding); 98 border-end-end-radius: props.get(vars.$rounding);
120 } 99 }
121 } 100 }
122 } 101 }
123 } 102 }
124 } 103 }
125 104
126 @include iro.bem-modifier('interactive') { 105 @include bem.modifier('interactive') {
127 @include iro.bem-elem('row') { 106 @include bem.elem('row') {
128 @include iro.bem-elem('cell') { 107 @include bem.elem('cell') {
129 cursor: pointer; 108 cursor: pointer;
130 } 109 }
131 110
132 &:hover { 111 &:hover {
133 @include iro.bem-elem('cell') { 112 @include bem.elem('cell') {
134 background-color: fn.color(--hover); 113 background-color: props.get(vars.$hover--bg-color);
135 } 114 }
136 } 115 }
137 116
138 &:active { 117 &:active {
139 @include iro.bem-elem('cell') { 118 @include bem.elem('cell') {
140 background-color: fn.color(--active); 119 background-color: props.get(vars.$active--bg-color);
141 } 120 }
142 } 121 }
143 } 122 }
144 123
145 @include iro.bem-modifier('box') { 124 @include bem.modifier('box') {
146 @include iro.bem-elem('row') { 125 @include bem.elem('row') {
147 &:hover { 126 &:hover {
148 @include iro.bem-elem('cell') { 127 @include bem.elem('cell') {
149 background-color: fn.color(--box --hover); 128 background-color: props.get(vars.$box--hover--bg-color);
150 } 129 }
151 } 130 }
152 131
153 &:active { 132 &:active {
154 @include iro.bem-elem('cell') { 133 @include bem.elem('cell') {
155 background-color: fn.color(--box --active); 134 background-color: props.get(vars.$box--active--bg-color);
156 } 135 }
157 } 136 }
158 } 137 }
159 } 138 }
160 } 139 }
161 140
162 @include iro.bem-modifier('sm') { 141 @include bem.modifier('sm') {
163 @include iro.bem-elem('head-cell', 'cell') { 142 @include bem.elem('head-cell', 'cell') {
164 padding-block: fn.dim(--sm --pad-b); 143 padding-block: props.get(vars.$pad-b--sm);
165 } 144 }
166 } 145 }
167 } 146 }
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:28:51 +0000