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