diff options
Diffstat (limited to 'src/scopes/_tables.scss')
-rw-r--r-- | src/scopes/_tables.scss | 57 |
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 | } |