summaryrefslogtreecommitdiffstats
path: root/src/scopes/_tables.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 17:14:45 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 17:14:45 +0200
commitc41e16f6044548e27fbf8e4ef65ed3067278c80b (patch)
tree90033bba112417a1b7fa833f6a307df56b9799dd /src/scopes/_tables.scss
parentUpdate (diff)
downloadiro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.gz
iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.bz2
iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.zip
Update
Diffstat (limited to 'src/scopes/_tables.scss')
-rw-r--r--src/scopes/_tables.scss57
1 files changed, 26 insertions, 31 deletions
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index f722864..f285207 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,49 +1,44 @@
1@use 'sass:meta'; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn; 3@use '../props';
4@use '../mixins' as mx; 4@use '../objects/table.vars' as table;
5 5
6@forward 'lists.vars'; 6@forward 'tables.vars';
7@use 'lists.vars' as vars; 7@use 'tables.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-scope('tables') { 10 @include iro.bem-scope('tables') {
13 table { 11 table {
14 margin-block-start: fn.dim(--margin-bs); 12 margin-block-start: props.get(vars.$margin-bs);
15 border-spacing: 0; 13 border-spacing: 0;
16 border-collapse: separate; 14 border-collapse: separate;
17 } 15 }
18 16
19 th { 17 th {
20 @include mx.set-font(--standard, ( 18 padding-block: props.get(table.$pad-b);
21 --line-height: null, 19 padding-inline: props.get(table.$pad-i);
22 --size: fn.global-dim(--font-size --50), 20 font-family: props.get(table.$heading--font-family);
23 --weight: bold, 21 font-size: props.get(table.$heading--font-size);
24 --transform: uppercase, 22 font-weight: props.get(table.$heading--font-weight);
25 --spacing: .5px 23 color: props.get(table.$heading-color);
26 ));
27
28 padding-block: fn.dim(--pad-b);
29 padding-inline: fn.dim(--pad-i);
30 color: fn.color(--heading);
31 text-align: start; 24 text-align: start;
25 text-transform: props.get(table.$heading--text-transform);
26 letter-spacing: props.get(table.$heading--letter-spacing);
32 } 27 }
33 28
34 td { 29 td {
35 padding-block: fn.dim(--pad-b); 30 padding-block: props.get(table.$pad-b);
36 padding-inline: fn.dim(--pad-i); 31 padding-inline: props.get(table.$pad-i);
37 border-color: fn.color(--border); 32 border-color: props.get(table.$border-color);
38 border-style: solid; 33 border-style: solid;
39 border-width: 0; 34 border-width: 0;
40 border-block-start-width: fn.dim(--border); 35 border-block-start-width: props.get(table.$border-width);
41 } 36 }
42 37
43 tr { 38 tr {
44 &:last-child { 39 &:last-child {
45 td { 40 td {
46 border-block-end-width: fn.dim(--border); 41 border-block-end-width: props.get(table.$border-width);
47 } 42 }
48 } 43 }
49 } 44 }
@@ -63,14 +58,14 @@
63 58
64 @include iro.bem-modifier('box') { 59 @include iro.bem-modifier('box') {
65 td { 60 td {
66 background-color: fn.color(--box --bg); 61 background-color: props.get(table.$box--bg-color);
67 62
68 &:first-child { 63 &:first-child {
69 border-inline-start-width: fn.dim(--border); 64 border-inline-start-width: props.get(table.$border-width);
70 } 65 }
71 66
72 &:last-child { 67 &:last-child {
73 border-inline-end-width: fn.dim(--border); 68 border-inline-end-width: props.get(table.$border-width);
74 } 69 }
75 } 70 }
76 71
@@ -78,11 +73,11 @@
78 &:first-child { 73 &:first-child {
79 td { 74 td {
80 &:first-child { 75 &:first-child {
81 border-start-start-radius: fn.dim(--rounding); 76 border-start-start-radius: props.get(table.$rounding);
82 } 77 }
83 78
84 &:last-child { 79 &:last-child {
85 border-start-end-radius: fn.dim(--rounding); 80 border-start-end-radius: props.get(table.$rounding);
86 } 81 }
87 } 82 }
88 } 83 }
@@ -90,11 +85,11 @@
90 &:last-child { 85 &:last-child {
91 td { 86 td {
92 &:first-child { 87 &:first-child {
93 border-end-start-radius: fn.dim(--rounding); 88 border-end-start-radius: props.get(table.$rounding);
94 } 89 }
95 90
96 &:last-child { 91 &:last-child {
97 border-end-end-radius: fn.dim(--rounding); 92 border-end-end-radius: props.get(table.$rounding);
98 } 93 }
99 } 94 }
100 } 95 }