added dark theme option. It ìs selected automagically based on system choiche of...
[theme-danix.xyz.git] / assets / sass / components / _table.scss
CommitLineData
748286b5 1///\r
2/// Forty by HTML5 UP\r
3/// html5up.net | @ajlkn\r
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5///\r
6\r
7/* Table */\r
8\r
9 .table-wrapper {\r
10 -webkit-overflow-scrolling: touch;\r
11 overflow-x: auto;\r
12 }\r
13\r
14 table {\r
15 margin: 0 0 _size(element-margin) 0;\r
16 width: 100%;\r
17\r
18 tbody {\r
19 tr {\r
cb4379e1 20 border: solid 1px _palette_light(border);\r
748286b5 21 border-left: 0;\r
22 border-right: 0;\r
cb4379e1 23 @media screen and (prefers-color-scheme: dark) {\r
24 border: solid 1px _palette_dark(border);\r
25 }\r
748286b5 26\r
27 &:nth-child(2n + 1) {\r
cb4379e1 28 background-color: _palette_light(border-bg);\r
29 @media screen and (prefers-color-scheme: dark) {\r
30 background-color: _palette_dark(border-bg);\r
31 }\r
748286b5 32 }\r
33 }\r
34 }\r
35\r
36 td {\r
37 padding: 0.75em 0.75em;\r
38 }\r
39\r
40 th {\r
cb4379e1 41 color: _palette_light(fg-bold);\r
748286b5 42 font-size: 0.9em;\r
43 font-weight: _font(weight-bold);\r
44 padding: 0 0.75em 0.75em 0.75em;\r
45 text-align: left;\r
cb4379e1 46 @media screen and (prefers-color-scheme: dark) {\r
47 color: _palette_dark(fg-bold);\r
48 }\r
748286b5 49 }\r
50\r
51 thead {\r
cb4379e1 52 border-bottom: solid 2px _palette_light(border);\r
53 @media screen and (prefers-color-scheme: dark) {\r
54 border-bottom: solid 2px _palette_dark(border);\r
55 }\r
748286b5 56 }\r
57\r
58 tfoot {\r
cb4379e1 59 border-top: solid 2px _palette_light(border);\r
60 @media screen and (prefers-color-scheme: dark) {\r
61 border-top: solid 2px _palette_dark(border);\r
62 }\r
748286b5 63 }\r
64\r
65 &.alt {\r
66 border-collapse: separate;\r
67\r
68 tbody {\r
69 tr {\r
70 td {\r
cb4379e1 71 border: solid 1px _palette_light(border);\r
748286b5 72 border-left-width: 0;\r
73 border-top-width: 0;\r
cb4379e1 74 @media screen and (prefers-color-scheme: dark) {\r
75 border-top: solid 1px _palette_dark(border);\r
76 }\r
748286b5 77\r
78 &:first-child {\r
79 border-left-width: 1px;\r
80 }\r
81 }\r
82\r
83 &:first-child {\r
84 td {\r
85 border-top-width: 1px;\r
86 }\r
87 }\r
88 }\r
89 }\r
90\r
91 thead {\r
92 border-bottom: 0;\r
93 }\r
94\r
95 tfoot {\r
96 border-top: 0;\r
97 }\r
98 }\r
99 }