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.

463 lines
9.4 KiB

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