diff options
Diffstat (limited to 'src/objects/_table.scss')
-rw-r--r-- | src/objects/_table.scss | 232 |
1 files changed, 116 insertions, 116 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2b63737..9e4891d 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss | |||
@@ -7,141 +7,141 @@ | |||
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 | } |
58 | 58 | ||
59 | &:last-child { | 59 | &:last-child { |
60 | padding-inline-end: 0; | 60 | padding-inline-end: 0; |
61 | } | 61 | } |
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 { |
70 | border-inline-start-width: props.get(vars.$border-width); | 70 | border-inline-start-width: props.get(vars.$border-width); |
71 | } | 71 | } |
72 | 72 | ||
73 | &:last-child { | 73 | &:last-child { |
74 | border-inline-end-width: props.get(vars.$border-width); | 74 | border-inline-end-width: props.get(vars.$border-width); |
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 | } |
84 | 84 | ||
85 | &:last-child { | 85 | &:last-child { |
86 | border-start-end-radius: props.get(vars.$rounding); | 86 | border-start-end-radius: props.get(vars.$rounding); |
87 | } | 87 | } |
88 | } | 88 | } |
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 | } |
96 | 96 | ||
97 | &:last-child { | 97 | &:last-child { |
98 | border-end-end-radius: props.get(vars.$rounding); | 98 | border-end-end-radius: props.get(vars.$rounding); |
99 | } | 99 | } |
100 | } | 100 | } |
101 | } | 101 | } |
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 | } |
137 | } | 137 | } |
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 | } |
146 | } | 146 | } |
147 | } | 147 | } |