You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

639 lines
10 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Table
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Table
  13. *******************************/
  14. /* Prototype */
  15. .ui.table {
  16. width: 100%;
  17. border-collapse: collapse;
  18. }
  19. /* Table Content */
  20. .ui.table th,
  21. .ui.table tr,
  22. .ui.table td {
  23. border-collapse: collapse;
  24. -webkit-box-sizing: border-box;
  25. -moz-box-sizing: border-box;
  26. -ms-box-sizing: border-box;
  27. box-sizing: border-box;
  28. -webkit-transition: all 0.1s ease-out;
  29. transition: all 0.1s ease-out;
  30. }
  31. /* Headers */
  32. .ui.table thead {
  33. border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  34. }
  35. .ui.table tfoot th {
  36. background-color: rgba(0, 0, 0, 0.03);
  37. }
  38. .ui.table th {
  39. cursor: auto;
  40. background-color: rgba(0, 0, 0, 0.05);
  41. text-align: right;
  42. color: rgba(0, 0, 0, 0.8);
  43. padding: 0.5em 0.7em;
  44. vertical-align: middle;
  45. }
  46. .ui.table thead th:first-child {
  47. border-radius: 0px 5px 0px 0px;
  48. }
  49. .ui.table thead th:last-child {
  50. border-radius: 5px 0px 0px 0px;
  51. }
  52. .ui.table tfoot th:first-child {
  53. border-radius: 0px 0px 5px 0px;
  54. }
  55. .ui.table tfoot th:last-child {
  56. border-radius: 0px 0px 0px 5px;
  57. }
  58. /* Table Cells */
  59. .ui.table td {
  60. padding: 0.40em 0.7em;
  61. vertical-align: middle;
  62. }
  63. /* Footer */
  64. .ui.table tfoot {
  65. border-top: 1px solid rgba(0, 0, 0, 0.03);
  66. }
  67. .ui.table tfoot th {
  68. font-weight: normal;
  69. font-style: italic;
  70. }
  71. /* Table Striping */
  72. .ui.table tbody tr:nth-child(2n) {
  73. background-color: rgba(0, 0, 50, 0.02);
  74. }
  75. /* Icons */
  76. .ui.table > .icon {
  77. vertical-align: baseline;
  78. }
  79. .ui.table > .icon:only-child {
  80. margin: 0em;
  81. }
  82. /* Table Segment */
  83. .ui.table.segment:after {
  84. display: none;
  85. }
  86. .ui.table.segment.stacked:after {
  87. display: block;
  88. }
  89. /* Responsive */
  90. @media only screen and (max-width: 768px) {
  91. .ui.table {
  92. display: block;
  93. padding: 0em;
  94. }
  95. .ui.table thead,
  96. .ui.table tfoot {
  97. display: none;
  98. }
  99. .ui.table tbody {
  100. display: block;
  101. }
  102. .ui.table tr {
  103. display: block;
  104. }
  105. .ui.table tr > td {
  106. width: 100% !important;
  107. display: block;
  108. border: none !important;
  109. padding: 0.25em 0.75em;
  110. -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
  111. box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
  112. }
  113. .ui.table td:first-child {
  114. font-weight: bold;
  115. padding-top: 1em;
  116. }
  117. .ui.table td:last-child {
  118. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  119. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
  120. padding-bottom: 1em;
  121. }
  122. /* Clear BG Colors */
  123. .ui.table tr > td.warning,
  124. .ui.table tr > td.error,
  125. .ui.table tr > td.active,
  126. .ui.table tr > td.positive,
  127. .ui.table tr > td.negative {
  128. background-color: transparent !important;
  129. }
  130. }
  131. /*******************************
  132. States
  133. *******************************/
  134. /*--------------
  135. Hover
  136. ---------------*/
  137. /* Sortable */
  138. .ui.sortable.table th.disabled:hover {
  139. cursor: auto;
  140. text-align: right;
  141. font-weight: bold;
  142. color: #333333;
  143. color: rgba(0, 0, 0, 0.8);
  144. }
  145. .ui.sortable.table thead th:hover {
  146. background-color: rgba(0, 0, 0, 0.13);
  147. color: rgba(0, 0, 0, 0.8);
  148. }
  149. /* Inverted Sortable */
  150. .ui.inverted.sortable.table thead th:hover {
  151. background-color: rgba(255, 255, 255, 0.13);
  152. color: #ffffff;
  153. }
  154. /*--------------
  155. Positive
  156. ---------------*/
  157. .ui.table tr.positive,
  158. .ui.table td.positive {
  159. -webkit-box-shadow: 2px 0px 0px #119000 inset;
  160. box-shadow: 2px 0px 0px #119000 inset;
  161. }
  162. .ui.table tr.positive td,
  163. .ui.table td.positive {
  164. background-color: #F2F8F0 !important;
  165. color: #119000 !important;
  166. }
  167. .ui.celled.table tr.positive:hover td,
  168. .ui.celled.table tr:hover td.positive,
  169. .ui.table tr.positive:hover td,
  170. .ui.table td:hover.positive,
  171. .ui.table th:hover.positive {
  172. background-color: #ECF5E9 !important;
  173. color: #119000 !important;
  174. }
  175. /*--------------
  176. Negative
  177. ---------------*/
  178. .ui.table tr.negative,
  179. .ui.table td.negative {
  180. -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
  181. box-shadow: 2px 0px 0px #CD2929 inset;
  182. }
  183. .ui.table tr.negative td,
  184. .ui.table td.negative {
  185. background-color: #F9F4F4;
  186. color: #CD2929 !important;
  187. }
  188. .ui.celled.table tr.negative:hover td,
  189. .ui.celled.table tr:hover td.negative,
  190. .ui.table tr.negative:hover td,
  191. .ui.table td:hover.negative,
  192. .ui.table th:hover.negative {
  193. background-color: #F2E8E8;
  194. color: #CD2929;
  195. }
  196. /*--------------
  197. Error
  198. ---------------*/
  199. .ui.table tr.error,
  200. .ui.table td.error {
  201. -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
  202. box-shadow: 2px 0px 0px #CD2929 inset;
  203. }
  204. .ui.table tr.error td,
  205. .ui.table td.error,
  206. .ui.table th.error {
  207. background-color: #F9F4F4;
  208. color: #CD2929;
  209. }
  210. .ui.celled.table tr.error:hover td,
  211. .ui.celled.table tr:hover td.error,
  212. .ui.table tr.error:hover td,
  213. .ui.table td:hover.error,
  214. .ui.table th:hover.error {
  215. background-color: #F2E8E8;
  216. color: #CD2929;
  217. }
  218. /*--------------
  219. Warning
  220. ---------------*/
  221. .ui.table tr.warning,
  222. .ui.table td.warning {
  223. -webkit-box-shadow: 2px 0px 0px #7D6C00 inset;
  224. box-shadow: 2px 0px 0px #7D6C00 inset;
  225. }
  226. .ui.table tr.warning td,
  227. .ui.table td.warning,
  228. .ui.table th.warning {
  229. background-color: #FBF6E9;
  230. color: #7D6C00;
  231. }
  232. .ui.celled.table tr.warning:hover td,
  233. .ui.celled.table tr:hover td.warning,
  234. .ui.table tr.warning:hover td,
  235. .ui.table td:hover.warning,
  236. .ui.table th:hover.warning {
  237. background-color: #F3EDDC;
  238. color: #7D6C00;
  239. }
  240. /*--------------
  241. Active
  242. ---------------*/
  243. .ui.table tr.active,
  244. .ui.table td.active {
  245. -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
  246. box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
  247. }
  248. .ui.table tr.active td,
  249. .ui.table tr td.active {
  250. background-color: #E0E0E0;
  251. color: rgba(50, 50, 50, 0.9);
  252. /* border-color: rgba(0, 0, 0, 0.15) !important; */
  253. }
  254. /*--------------
  255. Disabled
  256. ---------------*/
  257. .ui.table tr.disabled td,
  258. .ui.table tr td.disabled,
  259. .ui.table tr.disabled:hover td,
  260. .ui.table tr:hover td.disabled {
  261. color: rgba(150, 150, 150, 0.3);
  262. }
  263. /*******************************
  264. Variations
  265. *******************************/
  266. /*--------------
  267. Column Count
  268. ---------------*/
  269. .ui.two.column.table td {
  270. width: 50%;
  271. }
  272. .ui.three.column.table td {
  273. width: 33.3333%;
  274. }
  275. .ui.four.column.table td {
  276. width: 25%;
  277. }
  278. .ui.five.column.table td {
  279. width: 20%;
  280. }
  281. .ui.six.column.table td {
  282. width: 16.66667%;
  283. }
  284. .ui.seven.column.table td {
  285. width: 14.2857%;
  286. }
  287. .ui.eight.column.table td {
  288. width: 12.5%;
  289. }
  290. .ui.nine.column.table td {
  291. width: 11.1111%;
  292. }
  293. .ui.ten.column.table td {
  294. width: 10%;
  295. }
  296. .ui.eleven.column.table td {
  297. width: 9.0909%;
  298. }
  299. .ui.twelve.column.table td {
  300. width: 8.3333%;
  301. }
  302. .ui.thirteen.column.table td {
  303. width: 7.6923%;
  304. }
  305. .ui.fourteen.column.table td {
  306. width: 7.1428%;
  307. }
  308. .ui.fifteen.column.table td {
  309. width: 6.6666%;
  310. }
  311. .ui.sixteen.column.table td {
  312. width: 6.25%;
  313. }
  314. /* Column Width */
  315. .ui.table th.one.wide,
  316. .ui.table td.one.wide {
  317. width: 6.25%;
  318. }
  319. .ui.table th.two.wide,
  320. .ui.table td.two.wide {
  321. width: 12.5%;
  322. }
  323. .ui.table th.three.wide,
  324. .ui.table td.three.wide {
  325. width: 18.75%;
  326. }
  327. .ui.table th.four.wide,
  328. .ui.table td.four.wide {
  329. width: 25%;
  330. }
  331. .ui.table th.five.wide,
  332. .ui.table td.five.wide {
  333. width: 31.25%;
  334. }
  335. .ui.table th.six.wide,
  336. .ui.table td.six.wide {
  337. width: 37.5%;
  338. }
  339. .ui.table th.seven.wide,
  340. .ui.table td.seven.wide {
  341. width: 43.75%;
  342. }
  343. .ui.table th.eight.wide,
  344. .ui.table td.eight.wide {
  345. width: 50%;
  346. }
  347. .ui.table th.nine.wide,
  348. .ui.table td.nine.wide {
  349. width: 56.25%;
  350. }
  351. .ui.table th.ten.wide,
  352. .ui.table td.ten.wide {
  353. width: 62.5%;
  354. }
  355. .ui.table th.eleven.wide,
  356. .ui.table td.eleven.wide {
  357. width: 68.75%;
  358. }
  359. .ui.table th.twelve.wide,
  360. .ui.table td.twelve.wide {
  361. width: 75%;
  362. }
  363. .ui.table th.thirteen.wide,
  364. .ui.table td.thirteen.wide {
  365. width: 81.25%;
  366. }
  367. .ui.table th.fourteen.wide,
  368. .ui.table td.fourteen.wide {
  369. width: 87.5%;
  370. }
  371. .ui.table th.fifteen.wide,
  372. .ui.table td.fifteen.wide {
  373. width: 93.75%;
  374. }
  375. .ui.table th.sixteen.wide,
  376. .ui.table td.sixteen.wide {
  377. width: 100%;
  378. }
  379. /*--------------
  380. Celled
  381. ---------------*/
  382. .ui.celled.table {
  383. color: rgba(0, 0, 0, 0.8);
  384. }
  385. .ui.celled.table tbody tr,
  386. .ui.celled.table tfoot tr {
  387. border: none;
  388. }
  389. .ui.celled.table th,
  390. .ui.celled.table td {
  391. border: 1px solid rgba(0, 0, 0, 0.1);
  392. }
  393. /* Coupling with segment */
  394. .ui.celled.table.segment th:first-child,
  395. .ui.celled.table.segment td:first-child {
  396. border-right: none;
  397. }
  398. .ui.celled.table.segment th:last-child,
  399. .ui.celled.table.segment td:last-child {
  400. border-left: none;
  401. }
  402. /*--------------
  403. Sortable
  404. ---------------*/
  405. .ui.sortable.table thead th {
  406. cursor: pointer;
  407. white-space: nowrap;
  408. }
  409. .ui.sortable.table thead th.sorted,
  410. .ui.sortable.table thead th.sorted:hover {
  411. -webkit-user-select: none;
  412. -moz-user-select: none;
  413. -ms-user-select: none;
  414. user-select: none;
  415. }
  416. .ui.sortable.table thead th:after {
  417. display: inline-block;
  418. content: '';
  419. width: 1em;
  420. opacity: 0.8;
  421. margin: 0em 0.5em 0em 0em;
  422. font-family: 'Icons';
  423. font-style: normal;
  424. font-weight: normal;
  425. text-decoration: inherit;
  426. }
  427. .ui.sortable.table thead th.ascending:after {
  428. content: '\25b4';
  429. }
  430. .ui.sortable.table thead th.descending:after {
  431. content: '\25be';
  432. }
  433. /*--------------
  434. Inverted
  435. ---------------*/
  436. /* Text Color */
  437. .ui.inverted.table td {
  438. color: rgba(255, 255, 255, 0.9);
  439. }
  440. .ui.inverted.table th {
  441. background-color: rgba(0, 0, 0, 0.15);
  442. color: rgba(255, 255, 255, 0.9);
  443. }
  444. /* Stripes */
  445. .ui.inverted.table tbody tr:nth-child(2n) {
  446. background-color: rgba(255, 255, 255, 0.06);
  447. }
  448. /*--------------
  449. Definition
  450. ---------------*/
  451. .ui.definition.table td:first-child {
  452. font-weight: bold;
  453. }
  454. /*--------------
  455. Collapsing
  456. ---------------*/
  457. .ui.collapsing.table {
  458. width: auto;
  459. }
  460. /*--------------
  461. Basic
  462. ---------------*/
  463. .ui.basic.table th {
  464. background-color: transparent;
  465. padding: 0.5em;
  466. }
  467. .ui.basic.table tbody tr {
  468. border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  469. }
  470. .ui.basic.table td {
  471. padding: 0.8em 0.5em;
  472. }
  473. .ui.basic.table tbody tr:nth-child(2n) {
  474. background-color: transparent !important;
  475. }
  476. /*--------------
  477. Padded
  478. ---------------*/
  479. .ui.padded.table th,
  480. .ui.padded.table td {
  481. padding: 0.8em 1em;
  482. }
  483. .ui.compact.table th {
  484. padding: 0.3em 0.5em;
  485. }
  486. .ui.compact.table td {
  487. padding: 0.2em 0.5em;
  488. }
  489. /*--------------
  490. Sizes
  491. ---------------*/
  492. /* Small */
  493. .ui.small.table {
  494. font-size: 0.875em;
  495. }
  496. /* Standard */
  497. .ui.table {
  498. font-size: 1em;
  499. }
  500. /* Large */
  501. .ui.large.table {
  502. font-size: 1.1em;
  503. }