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.

523 lines
9.4 KiB

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