summaryrefslogtreecommitdiffstats
path: root/src/objects/_table.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_table.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/objects/_table.scss')
-rw-r--r--src/objects/_table.scss88
1 files changed, 44 insertions, 44 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index effa61f..a985f78 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,57 +1,57 @@
1@use 'sass:meta'; 1@use "sass:meta";
2@use 'pkg:iro-sass/src/bem'; 2@use "pkg:iro-sass/bem";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/props";
4@use '../props' as *; 4@use "../props" as *;
5 5
6@forward 'table.vars'; 6@forward "table.vars";
7@use 'table.vars' as vars; 7@use "table.vars" as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables("vars"));
11 11
12 @include bem.object('table') { 12 @include bem.object("table") {
13 border-spacing: 0; 13 border-spacing: 0;
14 border-collapse: separate; 14 border-collapse: separate;
15 15
16 @include bem.modifier('fixed') { 16 @include bem.modifier("fixed") {
17 table-layout: fixed; 17 table-layout: fixed;
18 } 18 }
19 19
20 @include bem.elem('head-cell') { 20 @include bem.elem("head-cell") {
21 padding-block: props.get(vars.$pad-b); 21 padding-block: props.get(vars.$pad-b);
22 padding-inline: props.get(vars.$pad-i); 22 padding-inline: props.get(vars.$pad-i);
23 font-family: props.get(vars.$heading--font-family); 23 font-family: props.get(vars.$heading--font-family);
24 font-size: props.get(vars.$heading--font-size); 24 font-size: props.get(vars.$heading--font-size);
25 font-weight: props.get(vars.$heading--font-weight); 25 font-weight: props.get(vars.$heading--font-weight);
26 color: props.get(vars.$heading-color); 26 color: props.get(vars.$heading-color);
27 text-align: start; 27 text-align: start;
28 text-transform: props.get(vars.$heading--text-transform); 28 text-transform: props.get(vars.$heading--text-transform);
29 letter-spacing: props.get(vars.$heading--letter-spacing); 29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 } 30 }
31 31
32 @include bem.elem('cell') { 32 @include bem.elem("cell") {
33 padding-block: props.get(vars.$pad-b); 33 padding-block: props.get(vars.$pad-b);
34 padding-inline: props.get(vars.$pad-i); 34 padding-inline: props.get(vars.$pad-i);
35 border-color: props.get(vars.$border-color); 35 border-color: props.get(vars.$border-color);
36 border-style: solid; 36 border-style: solid;
37 border-width: 0; 37 border-width: 0;
38 border-block-start-width: props.get(vars.$border-width); 38 border-block-start-width: props.get(vars.$border-width);
39 39
40 @include bem.modifier('divider') { 40 @include bem.modifier("divider") {
41 border-inline-end-width: props.get(vars.$border-width); 41 border-inline-end-width: props.get(vars.$border-width);
42 } 42 }
43 } 43 }
44 44
45 @include bem.elem('row') { 45 @include bem.elem("row") {
46 &:last-child { 46 &:last-child {
47 @include bem.elem('cell') { 47 @include bem.elem("cell") {
48 border-block-end-width: props.get(vars.$border-width); 48 border-block-end-width: props.get(vars.$border-width);
49 } 49 }
50 } 50 }
51 } 51 }
52 52
53 @include bem.modifier('flush') { 53 @include bem.modifier("flush") {
54 @include bem.elem('head-cell', 'cell') { 54 @include bem.elem("head-cell", "cell") {
55 &:first-child { 55 &:first-child {
56 padding-inline-start: 0; 56 padding-inline-start: 0;
57 } 57 }
@@ -62,8 +62,8 @@
62 } 62 }
63 } 63 }
64 64
65 @include bem.modifier('box') { 65 @include bem.modifier("box") {
66 @include bem.elem('cell') { 66 @include bem.elem("cell") {
67 background-color: props.get(vars.$box--bg-color); 67 background-color: props.get(vars.$box--bg-color);
68 68
69 &:first-child { 69 &:first-child {
@@ -75,9 +75,9 @@
75 } 75 }
76 } 76 }
77 77
78 @include bem.elem('row') { 78 @include bem.elem("row") {
79 &:first-child { 79 &:first-child {
80 @include bem.elem('cell') { 80 @include bem.elem("cell") {
81 &:first-child { 81 &:first-child {
82 border-start-start-radius: props.get(vars.$rounding); 82 border-start-start-radius: props.get(vars.$rounding);
83 } 83 }
@@ -89,7 +89,7 @@
89 } 89 }
90 90
91 &:last-child { 91 &:last-child {
92 @include bem.elem('cell') { 92 @include bem.elem("cell") {
93 &:first-child { 93 &:first-child {
94 border-end-start-radius: props.get(vars.$rounding); 94 border-end-start-radius: props.get(vars.$rounding);
95 } 95 }
@@ -102,35 +102,35 @@
102 } 102 }
103 } 103 }
104 104
105 @include bem.modifier('interactive') { 105 @include bem.modifier("interactive") {
106 @include bem.elem('row') { 106 @include bem.elem("row") {
107 @include bem.elem('cell') { 107 @include bem.elem("cell") {
108 cursor: pointer; 108 cursor: pointer;
109 } 109 }
110 110
111 &:hover { 111 &:hover {
112 @include bem.elem('cell') { 112 @include bem.elem("cell") {
113 background-color: props.get(vars.$hover--bg-color); 113 background-color: props.get(vars.$hover--bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 @include bem.elem('cell') { 118 @include bem.elem("cell") {
119 background-color: props.get(vars.$active--bg-color); 119 background-color: props.get(vars.$active--bg-color);
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 @include bem.modifier('box') { 124 @include bem.modifier("box") {
125 @include bem.elem('row') { 125 @include bem.elem("row") {
126 &:hover { 126 &:hover {
127 @include bem.elem('cell') { 127 @include bem.elem("cell") {
128 background-color: props.get(vars.$box--hover--bg-color); 128 background-color: props.get(vars.$box--hover--bg-color);
129 } 129 }
130 } 130 }
131 131
132 &:active { 132 &:active {
133 @include bem.elem('cell') { 133 @include bem.elem("cell") {
134 background-color: props.get(vars.$box--active--bg-color); 134 background-color: props.get(vars.$box--active--bg-color);
135 } 135 }
136 } 136 }
@@ -138,8 +138,8 @@
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('sm') { 141 @include bem.modifier("sm") {
142 @include bem.elem('head-cell', 'cell') { 142 @include bem.elem("head-cell", "cell") {
143 padding-block: props.get(vars.$pad-b--sm); 143 padding-block: props.get(vars.$pad-b--sm);
144 } 144 }
145 } 145 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 13:08:18 +0000