tables.columntoggle.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*
  2. Styles for the table columntoggle mode
  3. */
  4. .btn.tablesaw-columntoggle-btn span {
  5. text-indent: -9999px;
  6. display: inline-block;
  7. }
  8. .tablesaw-columntoggle-btnwrap {
  9. position: relative; /* for dialog positioning */
  10. }
  11. .tablesaw-columntoggle-btnwrap .dialog-content {
  12. padding: .5em;
  13. }
  14. .tablesaw-columntoggle tbody td {
  15. line-height: 1.5;
  16. }
  17. /* Remove top/bottom margins around the fieldcontain on check list */
  18. .tablesaw-columntoggle-popup {
  19. display: none;
  20. }
  21. .tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
  22. display: block;
  23. position: absolute;
  24. top: 2em;
  25. right: 0;
  26. background-color: #fff;
  27. padding: .5em .8em;
  28. border: 1px solid #ccc;
  29. box-shadow: 0 1px 2px #ccc;
  30. border-radius: .2em;
  31. z-index: 1;
  32. }
  33. .tablesaw-columntoggle-popup fieldset {
  34. margin:0;
  35. }
  36. /* Hide all prioritized columns by default */
  37. @media only all {
  38. .tablesaw-columntoggle th.tablesaw-priority-6,
  39. .tablesaw-columntoggle td.tablesaw-priority-6,
  40. .tablesaw-columntoggle th.tablesaw-priority-5,
  41. .tablesaw-columntoggle td.tablesaw-priority-5,
  42. .tablesaw-columntoggle th.tablesaw-priority-4,
  43. .tablesaw-columntoggle td.tablesaw-priority-4,
  44. .tablesaw-columntoggle th.tablesaw-priority-3,
  45. .tablesaw-columntoggle td.tablesaw-priority-3,
  46. .tablesaw-columntoggle th.tablesaw-priority-2,
  47. .tablesaw-columntoggle td.tablesaw-priority-2,
  48. .tablesaw-columntoggle th.tablesaw-priority-1,
  49. .tablesaw-columntoggle td.tablesaw-priority-1 {
  50. display: none;
  51. }
  52. }
  53. .tablesaw-columntoggle-btnwrap .dialog-content {
  54. top: 0 !important;
  55. right: 1em;
  56. left: auto !important;
  57. width: 12em;
  58. max-width: 18em;
  59. margin: -.5em auto 0;
  60. }
  61. .tablesaw-columntoggle-btnwrap .dialog-content:focus {
  62. outline-style: none;
  63. }
  64. /* Preset breakpoints if "" class added to table */
  65. /* Show priority 1 at 320px (20em x 16px) */
  66. @media (min-width: 20em) {
  67. .tablesaw-columntoggle th.tablesaw-priority-1,
  68. .tablesaw-columntoggle td.tablesaw-priority-1 {
  69. display: table-cell;
  70. }
  71. }
  72. /* Show priority 2 at 480px (30em x 16px) */
  73. @media (min-width: 30em) {
  74. .tablesaw-columntoggle th.tablesaw-priority-2,
  75. .tablesaw-columntoggle td.tablesaw-priority-2 {
  76. display: table-cell;
  77. }
  78. }
  79. /* Show priority 3 at 640px (40em x 16px) */
  80. @media (min-width: 40em) {
  81. .tablesaw-columntoggle th.tablesaw-priority-3,
  82. .tablesaw-columntoggle td.tablesaw-priority-3 {
  83. display: table-cell;
  84. }
  85. .tablesaw-columntoggle tbody td {
  86. line-height: 2;
  87. }
  88. }
  89. /* Show priority 4 at 800px (50em x 16px) */
  90. @media (min-width: 50em) {
  91. .tablesaw-columntoggle th.tablesaw-priority-4,
  92. .tablesaw-columntoggle td.tablesaw-priority-4 {
  93. display: table-cell;
  94. }
  95. }
  96. /* Show priority 5 at 960px (60em x 16px) */
  97. @media (min-width: 60em) {
  98. .tablesaw-columntoggle th.tablesaw-priority-5,
  99. .tablesaw-columntoggle td.tablesaw-priority-5 {
  100. display: table-cell;
  101. }
  102. }
  103. /* Show priority 6 at 1,120px (70em x 16px) */
  104. @media (min-width: 70em) {
  105. .tablesaw-columntoggle th.tablesaw-priority-6,
  106. .tablesaw-columntoggle td.tablesaw-priority-6 {
  107. display: table-cell;
  108. }
  109. }
  110. @media only all {
  111. /* Unchecked manually: Always hide */
  112. .tablesaw-columntoggle th.tablesaw-cell-hidden,
  113. .tablesaw-columntoggle td.tablesaw-cell-hidden {
  114. display: none;
  115. }
  116. /* Checked manually: Always show */
  117. .tablesaw-columntoggle th.tablesaw-cell-visible,
  118. .tablesaw-columntoggle td.tablesaw-cell-visible {
  119. display: table-cell;
  120. }
  121. }
  122. .tablesaw-columntoggle-popup .btn-group > label {
  123. display: block;
  124. padding: .2em 0;
  125. white-space: nowrap;
  126. }
  127. .tablesaw-columntoggle-popup .btn-group > label input {
  128. margin-right: .8em;
  129. }