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.scss52
1 files changed, 26 insertions, 26 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 491db20..c0a7360 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,15 +9,15 @@
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 iro.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 iro.bem-modifier('fixed') { 16 @include bem.modifier('fixed') {
17 table-layout: fixed; 17 table-layout: fixed;
18 } 18 }
19 19
20 @include iro.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);
@@ -29,7 +29,7 @@
29 letter-spacing: props.get(vars.$heading--letter-spacing); 29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 } 30 }
31 31
32 @include iro.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);
@@ -37,21 +37,21 @@
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 iro.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 iro.bem-elem('row') { 45 @include bem.elem('row') {
46 &:last-child { 46 &:last-child {
47 @include iro.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 iro.bem-modifier('flush') { 53 @include bem.modifier('flush') {
54 @include iro.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 iro.bem-modifier('box') { 65 @include bem.modifier('box') {
66 @include iro.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 iro.bem-elem('row') { 78 @include bem.elem('row') {
79 &:first-child { 79 &:first-child {
80 @include iro.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 iro.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 iro.bem-modifier('interactive') { 105 @include bem.modifier('interactive') {
106 @include iro.bem-elem('row') { 106 @include bem.elem('row') {
107 @include iro.bem-elem('cell') { 107 @include bem.elem('cell') {
108 cursor: pointer; 108 cursor: pointer;
109 } 109 }
110 110
111 &:hover { 111 &:hover {
112 @include iro.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 iro.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 iro.bem-modifier('box') { 124 @include bem.modifier('box') {
125 @include iro.bem-elem('row') { 125 @include bem.elem('row') {
126 &:hover { 126 &:hover {
127 @include iro.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 iro.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 iro.bem-modifier('sm') { 141 @include bem.modifier('sm') {
142 @include iro.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 }