tables.toolbar.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. /*
  2. * Button Markup
  3. * Custom-styled native inputs/buttons.
  4. *
  5. * Copyright (c) 2012 Filament Group, Inc.
  6. * Licensed under the MIT, GPL licenses.
  7. */
  8. :root {
  9. --button-text: #1c95d4;
  10. --button-selected-background: #29abe2;
  11. --button-checkbox-selected-background: #34a3de;
  12. --button-selected-shadow: rgba(0,75,115,.45);
  13. --button-interaction-text: #208de3;
  14. --button-interaction-shadow: #4faeef;
  15. }
  16. .tablesaw-enhanced .tablesaw-bar .btn {
  17. border: 1px solid #ccc;
  18. background: none;
  19. background-color: #fafafa;
  20. box-shadow: 0 1px 0 rgba(255,255,255,1);
  21. color: #4a4a4a;
  22. clear: both;
  23. cursor: pointer;
  24. display: block;
  25. font: bold 20px/1 sans-serif;
  26. margin: 0;
  27. padding: .5em .85em .4em .85em;
  28. position: relative;
  29. text-align: center;
  30. text-decoration: none;
  31. text-transform: capitalize;
  32. text-shadow: 0 1px 0 #fff;
  33. width: 100%;
  34. /* Theming */
  35. background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
  36. -webkit-appearance: none !important;
  37. -moz-appearance: none !important;
  38. box-sizing: border-box;
  39. -webkit-font-smoothing: antialiased;
  40. border-radius: .25em;
  41. }
  42. .tablesaw-enhanced .tablesaw-bar a.btn {
  43. color: var(--button-text);
  44. }
  45. .tablesaw-enhanced .tablesaw-bar .btn:hover {
  46. text-decoration: none;
  47. }
  48. /* Default radio/checkbox styling horizonal controlgroups. */
  49. .tablesaw-enhanced .tablesaw-bar .btn:active {
  50. background-color: #ddd;
  51. background-image: linear-gradient( top, rgba( 100,100,100,.35 ) 0%, rgba( 255,255,255,0 ) 70% );
  52. }
  53. .tablesaw-enhanced .tablesaw-bar .btn:hover,
  54. .tablesaw-enhanced .tablesaw-bar .btn:focus {
  55. color: var(--button-interaction-text);
  56. background-color: #fff;
  57. outline: none;
  58. }
  59. .tablesaw-bar .btn:focus {
  60. box-shadow: 0 0 .35em var(--button-interaction-shadow) !important;
  61. }
  62. .tablesaw-bar .btn-select select {
  63. background: none;
  64. border: none;
  65. display: block;
  66. position: absolute;
  67. font-weight: inherit;
  68. left: 0;
  69. top: 0;
  70. margin: 0;
  71. width: 100%;
  72. height: 100%;
  73. z-index: 2;
  74. min-height: 1em;
  75. }
  76. .tablesaw-bar .btn-select select {
  77. opacity: 0;
  78. filter: alpha(opacity=0);
  79. display:inline-block;
  80. color: transparent;
  81. }
  82. .tablesaw-bar .btn select option {
  83. background: #fff;
  84. color: #000;
  85. font-family: sans-serif;
  86. }
  87. .tablesaw-enhanced .tablesaw-bar .btn.btn-select {
  88. color:#4d4d4d;
  89. padding-right: 2.5em;
  90. min-width: 7.25em;
  91. text-align: left;
  92. text-indent: 0;
  93. }
  94. .tablesaw-bar .btn.btn-small,
  95. .tablesaw-bar .btn.btn-micro {
  96. display: inline-block;
  97. width: auto;
  98. height: auto;
  99. position: relative;
  100. top: 0;
  101. }
  102. .tablesaw-bar .btn.btn-small {
  103. font-size: 1.0625em;
  104. line-height: 19px;
  105. padding: .3em 1em .3em 1em;
  106. }
  107. .tablesaw-bar .btn.btn-micro {
  108. font-size: .8125em;
  109. padding: .4em .7em .25em .7em;
  110. }
  111. .tablesaw-enhanced .tablesaw-bar .btn-select {
  112. text-align: left;
  113. }
  114. .tablesaw-bar .btn-select:after {
  115. background: #e5e5e5;
  116. background: rgba(0,0,0,.1);
  117. box-shadow: 0 2px 2px rgba(255,255,255,.25);
  118. content: " ";
  119. display: block;
  120. position: absolute;
  121. }
  122. .tablesaw-bar .btn-select.btn-small,
  123. .tablesaw-bar .btn-select.btn-micro {
  124. padding-right: 1.5em;
  125. }
  126. .tablesaw-bar .btn-select:after {
  127. background: none;
  128. background-repeat: no-repeat;
  129. background-position: .25em .45em;
  130. content: "\25bc";
  131. font-size: .55em;
  132. padding-top: 1.2em;
  133. padding-left: 1em;
  134. left:auto;
  135. right: 0;
  136. margin: 0;
  137. top: 0;
  138. bottom: 0;
  139. width: 1.8em;
  140. }
  141. .tablesaw-bar .btn-select.btn-small:after,
  142. .tablesaw-bar .btn-select.btn-micro:after {
  143. width: 1.2em;
  144. font-size: .5em;
  145. padding-top: 1em;
  146. padding-right: .5em;
  147. line-height: 1.65;
  148. background: none;
  149. box-shadow: none;
  150. border-left-width: 0;
  151. }
  152. /* Column navigation buttons for swipe and columntoggle tables */
  153. .tablesaw-advance .btn {
  154. -webkit-appearance: none;
  155. -moz-appearance: none;
  156. box-sizing: border-box;
  157. text-shadow: 0 1px 0 #fff;
  158. border-radius: .25em;
  159. }
  160. .tablesaw-advance .btn.btn-micro {
  161. font-size: .8125em;
  162. padding: .3em .7em .25em .7em;
  163. }
  164. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
  165. display: inline-block;
  166. overflow: hidden;
  167. width: 1.8em;
  168. height: 1.8em;
  169. background-position: 50% 50%;
  170. margin-left: .5em;
  171. position: relative;
  172. }
  173. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
  174. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before,
  175. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before,
  176. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
  177. content: "\0020";
  178. overflow: hidden;
  179. width: 0;
  180. height: 0;
  181. position: absolute;
  182. }
  183. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before {
  184. left: .5em;
  185. top: .65em;
  186. border-left: 5px solid transparent;
  187. border-right: 5px solid transparent;
  188. border-top: 5px solid #808080;
  189. }
  190. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
  191. left: .5em;
  192. top: .65em;
  193. border-left: 5px solid transparent;
  194. border-right: 5px solid transparent;
  195. border-bottom: 5px solid #808080;
  196. }
  197. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
  198. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
  199. top: .45em;
  200. border-top: 5px solid transparent;
  201. border-bottom: 5px solid transparent;
  202. }
  203. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before {
  204. left: .6em;
  205. border-right: 5px solid #808080;
  206. }
  207. .tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
  208. left: .7em;
  209. border-left: 5px solid #808080;
  210. }
  211. .tablesaw-advance a.tablesaw-nav-btn.disabled {
  212. opacity: .25;
  213. filter: alpha(opacity=25);
  214. cursor: default;
  215. pointer-events: none;
  216. }
  217. /* Table Toolbar */
  218. .tablesaw-bar {
  219. clear: both;
  220. font-family: sans-serif;
  221. }
  222. .tablesaw-toolbar {
  223. font-size: .875em;
  224. float: left;
  225. }
  226. .tablesaw-toolbar label {
  227. padding: .5em 0;
  228. clear: both;
  229. display: block;
  230. color: #888;
  231. margin-right: .5em;
  232. text-transform:uppercase;
  233. }
  234. .tablesaw-bar .btn,
  235. .tablesaw-enhanced .tablesaw-bar .btn {
  236. margin-top: .5em;
  237. margin-bottom: .5em;
  238. }
  239. .tablesaw-bar .btn-select,
  240. .tablesaw-enhanced .tablesaw-bar .btn-select {
  241. margin-bottom: 0;
  242. }
  243. .tablesaw-bar .tablesaw-toolbar .btn {
  244. margin-left: .4em;
  245. margin-top: 0;
  246. text-transform:uppercase;
  247. border: none;
  248. box-shadow: none;
  249. background: transparent;
  250. font-family: sans-serif;
  251. font-size: 1em;
  252. padding-left: .3em;
  253. }
  254. .tablesaw-bar .tablesaw-toolbar .btn-select {
  255. min-width: 0;
  256. }
  257. .tablesaw-bar .tablesaw-toolbar .btn-select:after {
  258. padding-top: .9em;
  259. }
  260. .tablesaw-bar .tablesaw-toolbar select {
  261. color: #888;
  262. text-transform: none;
  263. background: transparent;
  264. }
  265. .tablesaw-toolbar ~ table {
  266. clear: both;
  267. }
  268. .tablesaw-toolbar .a11y-sm {
  269. clip: rect(0 0 0 0);
  270. height: 1px;
  271. overflow: hidden;
  272. position: absolute;
  273. width: 1px;
  274. }
  275. @media (min-width: 24em) {
  276. .tablesaw-toolbar .a11y-sm {
  277. clip: none;
  278. height: auto;
  279. width: auto;
  280. position: static;
  281. overflow: visible;
  282. }
  283. }