/
_variables.scss
182 lines (160 loc) · 6.36 KB
/
_variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
////
/// @group table
////
@import '~@react-md/states/dist/functions';
@import '~@react-md/theme/dist/mixins';
/// The border color to use for tables due to a chrome rendering bug when the
/// `colSpan` is used on a table. This will be applied when using the light
/// theme.
///
/// Note: this value is _close_ to the divider default value of
/// `rgba($rmd-black-base, 0.12)`
///
/// @since 2.3.2
/// @type Color
$rmd-table-light-border-color: #e0e0e0 !default;
/// The border color to use for tables due to a chrome rendering bug when the
/// `colSpan` is used on a table. This will be applied when using the dark
/// theme.
///
/// Note: this value is _close_ to the divider default value of
/// `rgba($rmd-white-base, 0.12)`
///
/// @since 2.3.2
/// @type Color
$rmd-table-dark-border-color: #2f2f2f !default;
/// The border color to use for tables due to a chrome rendering bug when the
/// `colSpan` is used on a table.
///
/// @since 2.3.2
/// @type Color
$rmd-table-border-color: if(
$rmd-theme-light,
$rmd-table-light-border-color,
$rmd-table-dark-border-color
) !default;
/// The amount of padding to apply to the left and right of each `<td>` and
/// `<th>` in a table.
/// @type Number
$rmd-table-cell-horizontal-padding: 1rem !default;
/// The amount of padding to apply to the top or bottom for each `<th>` and `<th>`
/// in a table when the cell's alignment is set to `"top"` or `"bottom"`.
///
/// @type Number
$rmd-table-cell-vertical-padding: 0.375rem !default;
/// The default position to use for a sticky cell that appears within the
/// `<tbody>` in all tables. This is mostly used if you want to have a custom
/// `<th>` that describes an entire row and should always be visible.
///
/// If you want to update a specific table, you should use the
/// `rmd-table-theme-update-var` mixin for the `sticky-cell` value.
///
/// @type Number
$rmd-table-cell-sticky-position: 0 !default;
/// The z-index to apply to all sticky cells within a table. This value doesn't
/// matter too much, but it should just be greater than 1 if you have checkbox
/// cells so that the header will cover the checkboxes.
///
/// @type Number
$rmd-table-cell-sticky-z-index: 2 !default;
/// The minimum height for each `<td>`.
/// @type Number
$rmd-table-cell-height: 3.25rem !default;
/// The minimum height to set for each `<td>` with the dense spec.
///
/// @type Number
$rmd-table-cell-dense-height: 2rem !default;
/// The text color for `<td>` cells within a table.
///
/// @require rmd-theme-var
/// @type Color
$rmd-table-cell-color: rmd-theme-var(text-primary-on-background) !default;
/// The supported horizontal alignments for the table cell. You can set this
/// value to `null` if you do not want to generate any additional alignments
/// other than the default (`left`), or set to a list of one value if you do not
/// need all the alignments.
///
/// @type List
$rmd-table-cell-horizontal-alignments: (center right) !default;
/// A map of the supported `vertical-align` for a table cell align with the
/// amount of padding to apply. Tables are "fun" to style since theres some
/// weird stuff with how `height` + `padding` works by default so when the
/// `vertical-align` is set to `top` or `bottom`, you also need to apply some
/// padding OR update the `line-height` for the cell. I decided to go with a
/// `padding` approach to make things a bit easier for non-text cells.
///
/// Note: You can also set this value to `null` if you do not want to generate
/// the minimal styles for the non-middle alignments.
///
/// @type List
$rmd-table-cell-vertical-alignments: (top bottom) !default;
/// The minimum height for each `<th>` that appears in the `<thead>`.
///
/// Note: No styles will be generated if this is `null` or the same value as the
/// `$rmd-table-cell-height`.
///
/// @type Number
$rmd-table-header-cell-height: 3.5rem !default;
/// The minimum height for each `<th>` that appears in the `<thead>` with the
/// dense spec.
///
/// Note: No styles will be generated if this is `null` or the same value as the
/// `$rmd-table-cell-dense-height`.
///
/// @type Number
$rmd-table-header-cell-dense-height: 2.125rem !default;
/// The color to use for `<th>` cells within a table.
///
/// Note: No styles will be generated if this is `null` or the same value as the
/// `$rmd-table-cell-color`.
///
/// @type Number
$rmd-table-header-cell-color: $rmd-table-cell-color !default;
/// The default position for a sticky header cell in all tables. If you want to
/// update the header position for a specific table, you can just use the
/// `rmd-table-theme-update-var` mixin for the `sticky-header` variable instead.
///
/// @type Number
$rmd-table-header-sticky-position: 0 !default;
/// The background color to use when hovering over a row within the `<tbody>`
/// and the `hoverable` styles have been enabled.
///
/// @require $rmd-black-base
/// @type Color
$rmd-table-row-hover-color: rgba($rmd-black-base, 0.12) !default;
/// The background color to use when a row has been selected within the
/// `<tbody>`.
///
/// @require rmd-states-theme-var
/// @type Color|String
$rmd-table-row-selected-color: rmd-states-theme-var(selected-color) !default;
/// The default position for a sticky footer cell in all tables. If you want to
/// update the footer position for a specific table, you can just use the
/// `rmd-table-theme-update-var` mixin for the `sticky-footer` variable instead.
///
/// @type Number
$rmd-table-footer-sticky-position: 0 !default;
/// The amount of padding to apply to a table checkbox cell. This should
/// normally be smaller than the default left and right padding to reduce the
/// width of this cell.
///
/// @type Number
$rmd-table-checkbox-padding: 0.5rem !default;
/// A Map of all the "themeable" parts of the table package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
///
/// @type Map
$rmd-table-theme-values: (
border-color: $rmd-table-border-color,
cell-color: $rmd-table-cell-color,
cell-h-padding: $rmd-table-cell-horizontal-padding,
cell-v-padding: $rmd-table-cell-vertical-padding,
cell-height: $rmd-table-cell-height,
cell-dense-height: $rmd-table-cell-dense-height,
hover-color: $rmd-table-row-hover-color,
selected-color: $rmd-table-row-selected-color,
sticky-header: $rmd-table-header-sticky-position,
sticky-cell: $rmd-table-cell-sticky-position,
sticky-footer: $rmd-table-footer-sticky-position,
) !default;