tablesaw.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. @charset "UTF-8";
  2. .tablesaw {
  3. width: 100%;
  4. max-width: 100%;
  5. empty-cells: show;
  6. border-collapse: collapse;
  7. border: 0;
  8. padding: 0; }
  9. .tablesaw.tablesaw-swipe .tablesaw-cell-persist {
  10. border-right: 0; }
  11. .tablesaw * {
  12. box-sizing: border-box; }
  13. :root {
  14. --button-text: $color-primary-500;
  15. --button-selected-background: $color-primary-600;
  16. --button-checkbox-selected-background: $color-primary-800;
  17. --button-selected-shadow: rgba($color-primary-400,.45);
  18. --button-interaction-shadow: $color-primary-400; }
  19. .tablesaw-btn {
  20. border: 1px solid #e4eaec;
  21. border-radius: .25em;
  22. background: none;
  23. box-shadow: 0 1px 0 white;
  24. color: #76838f;
  25. cursor: pointer;
  26. display: inline-block;
  27. margin: 0;
  28. padding: .5em .85em .4em .85em;
  29. position: relative;
  30. text-align: center;
  31. text-decoration: none;
  32. text-transform: capitalize;
  33. -webkit-appearance: none;
  34. -moz-appearance: none;
  35. appearance: none; }
  36. a.tablesaw-btn {
  37. color: var(--button-text); }
  38. .tablesaw-btn:hover {
  39. text-decoration: none; }
  40. /* Default radio/checkbox styling horizonal controlgroups. */
  41. .tablesaw-btn:active {
  42. background-color: #ddd; }
  43. @supports (box-shadow: none) {
  44. .tablesaw-btn:focus {
  45. background-color: #fff;
  46. outline: none; }
  47. .tablesaw-btn:focus {
  48. box-shadow: 0 0 2px var(--button-interaction-shadow) !important; } }
  49. .tablesaw-btn-select select {
  50. background: none;
  51. border: none;
  52. display: inline-block;
  53. position: absolute;
  54. left: 0;
  55. top: 0;
  56. margin: 0;
  57. width: 100%;
  58. height: 100%;
  59. z-index: 2;
  60. min-height: 1em;
  61. opacity: 0;
  62. color: transparent; }
  63. .tablesaw-btn select option {
  64. background: #fff;
  65. color: #000; }
  66. .tablesaw-btn {
  67. display: inline-block;
  68. width: auto;
  69. height: auto;
  70. position: relative;
  71. top: 0; }
  72. .tablesaw-btn.btn-small {
  73. font-size: 1.0625em;
  74. line-height: 19px;
  75. padding: .3em 1em .3em 1em; }
  76. .tablesaw-btn.btn-micro {
  77. font-size: .8125em;
  78. padding: .4em .7em .25em .7em; }
  79. .tablesaw-btn-select {
  80. padding-right: 1.5em;
  81. text-align: left;
  82. display: inline-block;
  83. color: #76838f;
  84. padding-right: 2.5em;
  85. min-width: 7.25em;
  86. text-align: left; }
  87. .tablesaw-btn-select:after {
  88. position: absolute;
  89. display: inline-block;
  90. font-family: "Web Icons";
  91. -webkit-font-feature-settings: normal;
  92. font-feature-settings: normal;
  93. -webkit-font-kerning: auto;
  94. font-kerning: auto;
  95. -webkit-font-language-override: normal;
  96. font-language-override: normal;
  97. font-size-adjust: none;
  98. font-stretch: normal;
  99. font-style: normal;
  100. font-synthesis: weight style;
  101. font-variant: normal;
  102. font-weight: 400;
  103. line-height: 1;
  104. text-rendering: auto;
  105. background: transparent;
  106. background: none;
  107. content: "";
  108. padding: 0;
  109. left: auto;
  110. right: auto;
  111. margin: 0 5px 0;
  112. top: 10px;
  113. bottom: 0;
  114. width: 1.8em; }
  115. .tablesaw-btn-select.btn-small:after,
  116. .tablesaw-btn-select.btn-micro:after {
  117. background: none;
  118. box-shadow: none;
  119. border-left-width: 0; }
  120. /* Column navigation buttons for swipe and columntoggle tables */
  121. .tablesaw-advance .tablesaw-btn {
  122. -webkit-appearance: none;
  123. -moz-appearance: none;
  124. box-sizing: border-box;
  125. text-shadow: 0 1px 0 #fff;
  126. border-radius: 0.215rem; }
  127. .tablesaw-advance .tablesaw-btn.btn-micro {
  128. font-size: .8125em;
  129. padding: .3em .7em .25em .7em;
  130. margin-top: 8px;
  131. margin-bottom: 5px; }
  132. .tablesaw-advance a.tablesaw-nav-btn:first-child {
  133. margin-left: 0; }
  134. .tablesaw-advance a.tablesaw-nav-btn:last-child {
  135. margin-right: 0; }
  136. .tablesaw-advance a.tablesaw-nav-btn {
  137. display: inline-block;
  138. overflow: hidden;
  139. background-position: 50% 50%;
  140. margin-left: .25em;
  141. margin-right: .25em;
  142. position: relative;
  143. font-family: "Web Icons";
  144. -webkit-font-feature-settings: normal;
  145. font-feature-settings: normal;
  146. -webkit-font-kerning: auto;
  147. font-kerning: auto;
  148. -webkit-font-language-override: normal;
  149. font-language-override: normal;
  150. font-size: inherit;
  151. font-size-adjust: none;
  152. font-stretch: normal;
  153. font-style: normal;
  154. font-synthesis: weight style;
  155. font-variant: normal;
  156. font-weight: 400;
  157. line-height: 1;
  158. text-rendering: auto; }
  159. .tablesaw-advance a.tablesaw-nav-btn.down:before {
  160. content: ""; }
  161. .tablesaw-advance a.tablesaw-nav-btn.up:before {
  162. content: ""; }
  163. .tablesaw-advance a.tablesaw-nav-btn.left:before {
  164. content: ""; }
  165. .tablesaw-advance a.tablesaw-nav-btn.right:before {
  166. content: ""; }
  167. .tablesaw-advance a.tablesaw-nav-btn.disabled {
  168. opacity: .25;
  169. cursor: default;
  170. pointer-events: none; }
  171. /* Table Toolbar */
  172. .tablesaw-bar {
  173. clear: both; }
  174. .tablesaw-bar * {
  175. box-sizing: border-box; }
  176. .tablesaw-bar-section {
  177. float: left; }
  178. .tablesaw-bar-section label {
  179. font-size: .875em;
  180. padding: .5em 0;
  181. clear: both;
  182. display: block;
  183. color: #76838f;
  184. margin-right: .5em;
  185. text-transform: uppercase; }
  186. .tablesaw-btn,
  187. .tablesaw-enhanced .tablesaw-btn {
  188. margin-top: .5em;
  189. margin-bottom: .5em; }
  190. .tablesaw-btn-select,
  191. .tablesaw-enhanced .tablesaw-btn-select {
  192. margin-bottom: 0; }
  193. /* TODO */
  194. .tablesaw-bar .tablesaw-bar-section .tablesaw-btn {
  195. margin-left: .4em;
  196. margin-top: 0;
  197. text-transform: uppercase;
  198. border: none;
  199. box-shadow: none;
  200. background: transparent;
  201. font-size: 1em;
  202. padding-left: .3em;
  203. vertical-align: baseline; }
  204. .tablesaw-bar .tablesaw-bar-section .btn-select {
  205. min-width: 0; }
  206. .tablesaw-bar .tablesaw-bar-section .btn-select:after {
  207. padding-top: 0; }
  208. .tablesaw-bar .tablesaw-bar-section select {
  209. color: #76838f;
  210. text-transform: none;
  211. background: transparent; }
  212. .tablesaw-bar-section ~ table {
  213. clear: both; }
  214. .tablesaw-bar-section .a11y-sm {
  215. clip: rect(0 0 0 0);
  216. height: 1px;
  217. overflow: hidden;
  218. position: absolute;
  219. width: 1px; }
  220. @media (min-width: 24em) {
  221. .tablesaw-bar-section .a11y-sm {
  222. clip: none;
  223. height: auto;
  224. width: auto;
  225. position: static;
  226. overflow: visible; } }
  227. .tablesaw th,
  228. .tablesaw td {
  229. padding: .5em .7em;
  230. text-align: left;
  231. vertical-align: middle; }
  232. .tablesaw thead th {
  233. text-align: left; }
  234. /* Table rows have a gray bottom stroke by default */
  235. .tablesaw-row-border tr {
  236. border-bottom: 1px solid #dfdfdf; }
  237. /* Zebra striping */
  238. .tablesaw-row-zebra tr:nth-child(2n) {
  239. background-color: #f8f8f8; }
  240. .tablesaw caption {
  241. text-align: left;
  242. margin: .59375em 0; }
  243. .tablesaw-swipe .tablesaw-cell-persist {
  244. border-right: 2px solid #e4e1de; }
  245. .tablesaw-swipe-shadow .tablesaw-cell-persist {
  246. border-right-width: 1px; }
  247. .tablesaw-swipe-shadow .tablesaw-cell-persist {
  248. box-shadow: 3px 0 4px -1px #e4e1de; }
  249. /*
  250. Styles for the table stack mode
  251. */
  252. .tablesaw-stack td .tablesaw-cell-label,
  253. .tablesaw-stack th .tablesaw-cell-label {
  254. display: none; }
  255. /* Mobile first styles: Begin with the stacked presentation at narrow widths */
  256. /* Support note IE9+: @media only all */
  257. @media only all {
  258. /* Show the table cells as a block level element */
  259. .tablesaw-stack {
  260. clear: both; }
  261. .tablesaw-stack td,
  262. .tablesaw-stack th {
  263. text-align: left;
  264. display: block; }
  265. .tablesaw-stack tr {
  266. clear: both;
  267. display: table-row; }
  268. /* Make the label elements a percentage width */
  269. .tablesaw-stack td .tablesaw-cell-label,
  270. .tablesaw-stack th .tablesaw-cell-label {
  271. display: inline-block;
  272. padding: 0 .6em 0 0;
  273. width: 30%; }
  274. /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
  275. .tablesaw-stack th .tablesaw-cell-label-top,
  276. .tablesaw-stack td .tablesaw-cell-label-top {
  277. display: block;
  278. padding: .4em 0;
  279. margin: .4em 0; }
  280. .tablesaw-cell-label {
  281. display: block; }
  282. /* Avoid double strokes when stacked */
  283. .tablesaw-stack tbody th.group {
  284. margin-top: -1px; }
  285. /* Avoid double strokes when stacked */
  286. .tablesaw-stack th.group b.tablesaw-cell-label {
  287. display: none !important; } }
  288. @media (max-width: 767.98px) {
  289. /* Table rows have a gray bottom stroke by default */
  290. .tablesaw-stack tbody tr {
  291. display: block;
  292. width: 100%; }
  293. .tablesaw-stack thead td,
  294. .tablesaw-stack thead th {
  295. display: none; }
  296. .tablesaw-stack tbody td,
  297. .tablesaw-stack tbody th {
  298. display: block;
  299. float: left;
  300. clear: left;
  301. width: 100%; }
  302. .tablesaw-cell-label {
  303. vertical-align: top; }
  304. .tablesaw-cell-content {
  305. display: inline-block;
  306. max-width: 67%; }
  307. .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
  308. .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
  309. display: block;
  310. width: 100%;
  311. max-width: 100%;
  312. padding: 0; }
  313. .tablesaw-stack td:empty,
  314. .tablesaw-stack th:empty {
  315. display: none; } }
  316. @media (min-width: 768px) {
  317. .tablesaw-stack tr {
  318. display: table-row; }
  319. /* Show the table header rows */
  320. .tablesaw-stack td,
  321. .tablesaw-stack th,
  322. .tablesaw-stack thead td,
  323. .tablesaw-stack thead th {
  324. display: table-cell;
  325. margin: 0; }
  326. /* Hide the labels in each cell */
  327. .tablesaw-stack td .tablesaw-cell-label,
  328. .tablesaw-stack th .tablesaw-cell-label {
  329. display: none !important; } }
  330. .tablesaw-fix-persist {
  331. table-layout: fixed; }
  332. @media only all {
  333. /* Unchecked manually: Always hide */
  334. .tablesaw-swipe th.tablesaw-cell-hidden,
  335. .tablesaw-swipe td.tablesaw-cell-hidden {
  336. display: none; } }
  337. /*
  338. Styles for the table columntoggle mode
  339. */
  340. .tablesaw-overflow {
  341. position: relative;
  342. width: 100%;
  343. overflow-x: auto;
  344. -webkit-overflow-scrolling: touch;
  345. /* More in skin.css */ }
  346. .tablesaw-overflow > .tablesaw {
  347. margin-top: 2px;
  348. /* sortable focus rings are clipped */ }
  349. /* Used for a11y text on button: "Columns" */
  350. .tablesaw-columntoggle-btn span {
  351. text-indent: -9999px;
  352. display: inline-block; }
  353. .tablesaw-columntoggle-btnwrap {
  354. position: relative;
  355. /* for dialog positioning */ }
  356. .tablesaw-columntoggle-btnwrap .dialog-content {
  357. padding: .5em; }
  358. .tablesaw-columntoggle tbody td {
  359. line-height: 1.5; }
  360. /* Remove top/bottom margins around the fieldcontain on check list */
  361. .tablesaw-columntoggle-popup {
  362. display: none; }
  363. .tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
  364. display: block;
  365. position: absolute;
  366. top: 2em;
  367. right: 0;
  368. background-color: #fff;
  369. padding: .5em .8em;
  370. border: 1px solid #e4eaec;
  371. box-shadow: 0 1px 2px #e4eaec;
  372. border-radius: 0.215rem;
  373. z-index: 1; }
  374. .tablesaw-columntoggle-popup fieldset {
  375. margin: 0; }
  376. /* Hide all prioritized columns by default */
  377. @media only all {
  378. .tablesaw-columntoggle th.tablesaw-priority-6,
  379. .tablesaw-columntoggle td.tablesaw-priority-6,
  380. .tablesaw-columntoggle th.tablesaw-priority-5,
  381. .tablesaw-columntoggle td.tablesaw-priority-5,
  382. .tablesaw-columntoggle th.tablesaw-priority-4,
  383. .tablesaw-columntoggle td.tablesaw-priority-4,
  384. .tablesaw-columntoggle th.tablesaw-priority-3,
  385. .tablesaw-columntoggle td.tablesaw-priority-3,
  386. .tablesaw-columntoggle th.tablesaw-priority-2,
  387. .tablesaw-columntoggle td.tablesaw-priority-2,
  388. .tablesaw-columntoggle th.tablesaw-priority-1,
  389. .tablesaw-columntoggle td.tablesaw-priority-1,
  390. .tablesaw-columntoggle th.tablesaw-priority-0,
  391. .tablesaw-columntoggle td.tablesaw-priority-0 {
  392. display: none; } }
  393. .tablesaw-columntoggle-btnwrap .dialog-content {
  394. top: 0 !important;
  395. right: 1em;
  396. left: auto !important;
  397. width: 12em;
  398. max-width: 18em;
  399. margin: -.5em auto 0; }
  400. .tablesaw-columntoggle-btnwrap .dialog-content:focus {
  401. outline-style: none; }
  402. /* Preset breakpoints if "" class added to table */
  403. /* Show priority 1 at 320px (20em x 16px) */
  404. @media (min-width: 20em) {
  405. .tablesaw-columntoggle th.tablesaw-priority-1,
  406. .tablesaw-columntoggle td.tablesaw-priority-1 {
  407. display: table-cell; } }
  408. /* Show priority 2 at 480px (30em x 16px) */
  409. @media (min-width: 30em) {
  410. .tablesaw-columntoggle th.tablesaw-priority-2,
  411. .tablesaw-columntoggle td.tablesaw-priority-2 {
  412. display: table-cell; } }
  413. /* Show priority 3 at 640px (40em x 16px) */
  414. @media (min-width: 40em) {
  415. .tablesaw-columntoggle th.tablesaw-priority-3,
  416. .tablesaw-columntoggle td.tablesaw-priority-3 {
  417. display: table-cell; }
  418. .tablesaw-columntoggle tbody td {
  419. line-height: 2; } }
  420. /* Show priority 4 at 800px (50em x 16px) */
  421. @media (min-width: 50em) {
  422. .tablesaw-columntoggle th.tablesaw-priority-4,
  423. .tablesaw-columntoggle td.tablesaw-priority-4 {
  424. display: table-cell; } }
  425. /* Show priority 5 at 960px (60em x 16px) */
  426. @media (min-width: 60em) {
  427. .tablesaw-columntoggle th.tablesaw-priority-5,
  428. .tablesaw-columntoggle td.tablesaw-priority-5 {
  429. display: table-cell; } }
  430. /* Show priority 6 at 1,120px (70em x 16px) */
  431. @media (min-width: 70em) {
  432. .tablesaw-columntoggle th.tablesaw-priority-6,
  433. .tablesaw-columntoggle td.tablesaw-priority-6 {
  434. display: table-cell; } }
  435. @media only all {
  436. /* Unchecked manually: Always hide */
  437. .tablesaw-columntoggle th.tablesaw-cell-hidden,
  438. .tablesaw-columntoggle td.tablesaw-cell-hidden {
  439. display: none; }
  440. /* Checked manually: Always show */
  441. .tablesaw-columntoggle th.tablesaw-cell-visible,
  442. .tablesaw-columntoggle td.tablesaw-cell-visible {
  443. display: table-cell; } }
  444. .tablesaw-columntoggle-popup .btn-group > label {
  445. display: block;
  446. padding: .2em 0;
  447. white-space: nowrap;
  448. cursor: default; }
  449. .tablesaw-columntoggle-popup .btn-group > label input {
  450. margin-right: .8em; }
  451. .tablesaw-sortable-head {
  452. position: relative;
  453. vertical-align: top; }
  454. /* Override */
  455. .tablesaw .tablesaw-sortable-head {
  456. padding: 0; }
  457. .tablesaw-sortable-btn {
  458. min-width: 100%;
  459. color: inherit;
  460. background: transparent;
  461. border: 0;
  462. /* same as cell padding in tables.css */
  463. padding: .5em .7em;
  464. text-align: inherit;
  465. font: inherit;
  466. text-transform: inherit; }
  467. .tablesaw-sortable-arrow:after {
  468. display: inline-block;
  469. width: 10px;
  470. height: 14px;
  471. content: " ";
  472. margin-left: .3125em; }
  473. .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after,
  474. .tablesaw-sortable-descending .tablesaw-sortable-arrow:after {
  475. font-family: "Web Icons";
  476. -webkit-font-feature-settings: normal;
  477. font-feature-settings: normal;
  478. -webkit-font-kerning: auto;
  479. font-kerning: auto;
  480. -webkit-font-language-override: normal;
  481. font-language-override: normal;
  482. font-size: inherit;
  483. font-size-adjust: none;
  484. font-stretch: normal;
  485. font-style: normal;
  486. font-synthesis: weight style;
  487. font-variant: normal;
  488. font-weight: 400;
  489. line-height: 1;
  490. text-rendering: auto; }
  491. .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after {
  492. content: ""; }
  493. .tablesaw-sortable-descending .tablesaw-sortable-arrow:after {
  494. content: ""; }
  495. .tablesaw-advance {
  496. float: right; }
  497. .tablesaw-advance.minimap {
  498. margin-right: .4em; }
  499. .tablesaw-advance-dots {
  500. float: left;
  501. margin: 0;
  502. padding: 0;
  503. list-style: none; }
  504. .tablesaw-advance-dots li {
  505. display: table-cell;
  506. margin: 0;
  507. padding: .4em .2em; }
  508. .tablesaw-advance-dots li i {
  509. width: 4px;
  510. height: 4px;
  511. background: #a3afb7;
  512. border-radius: 100%;
  513. display: inline-block; }
  514. .tablesaw-advance-dots-hide {
  515. opacity: .3;
  516. cursor: default;
  517. pointer-events: none; }
  518. .tablesaw-bar .tablesaw-columntoggle-popup .btn-group {
  519. display: inline-block; }
  520. .tablesaw tfoot th,
  521. .tablesaw thead th {
  522. font-weight: 500; }