Initial commit

[editorial.git] / assets / main / sass / components / _table.scss

diff --git a/assets/main/sass/components/_table.scss b/assets/main/sass/components/_table.scss
new file mode 100644 (file)
index 0000000..9a30143
--- /dev/null
+++ b/assets/main/sass/components/_table.scss
@@ -0,0 +1,122 @@
+///\r
+/// Massively by HTML5 UP\r
+/// html5up.net | @ajlkn\r
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
+///\r
+\r
+/* Table */\r
+\r
+       .table-wrapper {\r
+               -webkit-overflow-scrolling: touch;\r
+               overflow-x: auto;\r
+       }\r
+\r
+       table {\r
+               margin: 0 0 _size(element-margin) 0;\r
+               width: 100%;\r
+\r
+               tbody {\r
+                       tr {\r
+                               border: solid 1px;\r
+                               border-left: 0;\r
+                               border-right: 0;\r
+                       }\r
+               }\r
+\r
+               td {\r
+                       padding: 0.75rem 0.75rem;\r
+               }\r
+\r
+               th {\r
+                       font-family: _font(family-heading);\r
+                       font-size: 0.8rem;\r
+                       font-weight: _font(weight-heading);\r
+                       letter-spacing: 0.075em;\r
+                       line-height: 1.5;\r
+                       padding: 0 0.75rem 0.75rem 0.75rem;\r
+                       text-align: left;\r
+                       text-transform: uppercase;\r
+\r
+                       @include breakpoint('<=medium') {\r
+                               font-size: 0.9rem;\r
+                       }\r
+               }\r
+\r
+               thead {\r
+                       border-bottom: solid 2px;\r
+               }\r
+\r
+               tfoot {\r
+                       border-top: solid 2px;\r
+               }\r
+\r
+               &.alt {\r
+                       border-collapse: separate;\r
+\r
+                       tbody {\r
+                               tr {\r
+                                       td {\r
+                                               border: solid 1px;\r
+                                               border-left-width: 0;\r
+                                               border-top-width: 0;\r
+\r
+                                               &:first-child {\r
+                                                       border-left-width: 1px;\r
+                                               }\r
+                                       }\r
+\r
+                                       &:first-child {\r
+                                               td {\r
+                                                       border-top-width: 1px;\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+\r
+                       thead {\r
+                               border-bottom: 0;\r
+                       }\r
+\r
+                       tfoot {\r
+                               border-top: 0;\r
+                       }\r
+               }\r
+       }\r
+\r
+       @mixin color-table($p: null) {\r
+               table {\r
+                       tbody {\r
+                               tr {\r
+                                       border-color: _palette($p, border);\r
+\r
+                                       &:nth-child(2n + 1) {\r
+                                               background-color: _palette($p, border-bg);\r
+                                       }\r
+                               }\r
+                       }\r
+\r
+                       th {\r
+                               color: _palette($p, fg-bold);\r
+                       }\r
+\r
+                       thead {\r
+                               border-bottom-color: _palette($p, border);\r
+                       }\r
+\r
+                       tfoot {\r
+                               border-top-color: _palette($p, border);\r
+                       }\r
+\r
+                       &.alt {\r
+                               tbody {\r
+                                       tr {\r
+                                               td {\r
+                                                       border-color: _palette($p, border);\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+\r
+       @include color-table;
\ No newline at end of file