diff options
Diffstat (limited to 'src/objects/_table.scss')
-rw-r--r-- | src/objects/_table.scss | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/src/objects/_table.scss b/src/objects/_table.scss new file mode 100644 index 0000000..cccf956 --- /dev/null +++ b/src/objects/_table.scss | |||
@@ -0,0 +1,167 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | @use '../mixins' as mx; | ||
4 | |||
5 | @include iro.props-namespace('table') { | ||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --pad-i: fn.global-dim(--size --175), | ||
9 | --pad-b: fn.global-dim(--size --125), | ||
10 | --rounding: fn.global-dim(--rounding), | ||
11 | --border: fn.global-dim(--border --thin), | ||
12 | --50: ( | ||
13 | --pad-b: fn.global-dim(--size --75), | ||
14 | ) | ||
15 | ), | ||
16 | --colors: ( | ||
17 | --border: fn.global-color(--border), | ||
18 | --heading: fn.global-color(--heading), | ||
19 | --hover: fn.global-color(--border-mute), | ||
20 | --press: fn.global-color(--border), | ||
21 | --box: ( | ||
22 | --bg: fn.global-color(--base --50), | ||
23 | --hover: fn.global-color(--bg-base), | ||
24 | --press: fn.global-color(--border-mute), | ||
25 | ) | ||
26 | ) | ||
27 | )); | ||
28 | |||
29 | @include iro.bem-object(iro.props-namespace()) { | ||
30 | border-spacing: 0; | ||
31 | border-collapse: separate; | ||
32 | |||
33 | @include iro.bem-modifier('fixed') { | ||
34 | table-layout: fixed; | ||
35 | } | ||
36 | |||
37 | @include iro.bem-elem('head-cell') { | ||
38 | @include mx.set-font(--standard, ( | ||
39 | --line-height: null, | ||
40 | --size: fn.global-dim(--font-size --50), | ||
41 | --weight: bold, | ||
42 | --transform: uppercase, | ||
43 | --spacing: .5px | ||
44 | )); | ||
45 | |||
46 | padding-inline: fn.dim(--pad-i); | ||
47 | padding-block: fn.dim(--pad-b); | ||
48 | color: fn.color(--heading); | ||
49 | text-align: left; | ||
50 | } | ||
51 | |||
52 | @include iro.bem-elem('cell') { | ||
53 | padding-inline: fn.dim(--pad-i); | ||
54 | padding-block: fn.dim(--pad-b); | ||
55 | border-width: 0; | ||
56 | border-block-start-width: fn.dim(--border); | ||
57 | border-style: solid; | ||
58 | border-color: fn.color(--border); | ||
59 | |||
60 | @include iro.bem-modifier('divider') { | ||
61 | border-inline-end-width: fn.dim(--border); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | @include iro.bem-elem('row') { | ||
66 | &:last-child { | ||
67 | @include iro.bem-elem('cell') { | ||
68 | border-block-end-width: fn.dim(--border); | ||
69 | } | ||
70 | } | ||
71 | } | ||
72 | |||
73 | @include iro.bem-modifier('flush') { | ||
74 | @include iro.bem-elem('head-cell', 'cell') { | ||
75 | &:first-child { | ||
76 | padding-inline-start: 0; | ||
77 | } | ||
78 | |||
79 | &:last-child { | ||
80 | padding-inline-end: 0; | ||
81 | } | ||
82 | } | ||
83 | } | ||
84 | |||
85 | @include iro.bem-modifier('box') { | ||
86 | @include iro.bem-elem('cell') { | ||
87 | background-color: fn.color(--box --bg); | ||
88 | |||
89 | &:first-child { | ||
90 | border-inline-start-width: fn.dim(--border); | ||
91 | } | ||
92 | |||
93 | &:last-child { | ||
94 | border-inline-end-width: fn.dim(--border); | ||
95 | } | ||
96 | } | ||
97 | |||
98 | @include iro.bem-elem('row') { | ||
99 | &:first-child { | ||
100 | @include iro.bem-elem('cell') { | ||
101 | &:first-child { | ||
102 | border-start-start-radius: fn.dim(--rounding); | ||
103 | } | ||
104 | |||
105 | &:last-child { | ||
106 | border-start-end-radius: fn.dim(--rounding); | ||
107 | } | ||
108 | } | ||
109 | } | ||
110 | |||
111 | &:last-child { | ||
112 | @include iro.bem-elem('cell') { | ||
113 | &:first-child { | ||
114 | border-end-start-radius: fn.dim(--rounding); | ||
115 | } | ||
116 | |||
117 | &:last-child { | ||
118 | border-end-end-radius: fn.dim(--rounding); | ||
119 | } | ||
120 | } | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | |||
125 | @include iro.bem-modifier('interactive') { | ||
126 | @include iro.bem-elem('row') { | ||
127 | @include iro.bem-elem('cell') { | ||
128 | cursor: pointer; | ||
129 | } | ||
130 | |||
131 | &:hover { | ||
132 | @include iro.bem-elem('cell') { | ||
133 | background-color: fn.color(--hover); | ||
134 | } | ||
135 | } | ||
136 | |||
137 | &:active { | ||
138 | @include iro.bem-elem('cell') { | ||
139 | background-color: fn.color(--press); | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | |||
144 | @include iro.bem-modifier('box') { | ||
145 | @include iro.bem-elem('row') { | ||
146 | &:hover { | ||
147 | @include iro.bem-elem('cell') { | ||
148 | background-color: fn.color(--box --hover); | ||
149 | } | ||
150 | } | ||
151 | |||
152 | &:active { | ||
153 | @include iro.bem-elem('cell') { | ||
154 | background-color: fn.color(--box --press); | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | } | ||
160 | |||
161 | @include iro.bem-modifier('50') { | ||
162 | @include iro.bem-elem('head-cell', 'cell') { | ||
163 | padding-block: fn.dim(--50 --pad-b); | ||
164 | } | ||
165 | } | ||
166 | } | ||
167 | } | ||