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.

336 lines
6.7 KiB

  1. /*
  2. * # Semantic Table - Flat
  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. .ui.table thead {
  21. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  22. }
  23. .ui.table th,
  24. .ui.table tr,
  25. .ui.table td {
  26. border-collapse: collapse;
  27. -webkit-box-sizing: border-box;
  28. -moz-box-sizing: border-box;
  29. -ms-box-sizing: border-box;
  30. box-sizing: border-box;
  31. -webkit-transition: all 0.1s ease-out;
  32. -moz-transition: all 0.1s ease-out;
  33. -o-transition: all 0.1s ease-out;
  34. -ms-transition: all 0.1s ease-out;
  35. transition: all 0.1s ease-out;
  36. }
  37. .ui.table th {
  38. cursor: auto;
  39. background-color: rgba(0, 0, 0, 0.05);
  40. text-align: left;
  41. color: rgba(0, 0, 0, 0.5);
  42. padding: 0.5em 0.7em;
  43. vertical-align: middle;
  44. }
  45. .ui.table tfoot th {
  46. font-weight: normal;
  47. font-style: italic;
  48. }
  49. .ui.table td {
  50. padding: 0.40em 0.7em;
  51. vertical-align: middle;
  52. }
  53. .ui.table tfoot {
  54. border-top: 1px solid rgba(0, 0, 0, 0.1);
  55. }
  56. /* Table Striping */
  57. .ui.table tbody tr:nth-child(2n) {
  58. background-color: rgba(0, 0, 50, 0.02);
  59. }
  60. /* Icons */
  61. .ui.table > .icon {
  62. vertical-align: baseline;
  63. }
  64. .ui.table > .icon:only-child {
  65. margin: 0em;
  66. }
  67. /* table segment */
  68. .ui.table.segment:after {
  69. display: none;
  70. }
  71. .ui.table.segment.stacked:after {
  72. display: block;
  73. }
  74. /*******************************
  75. States
  76. *******************************/
  77. /*--------------
  78. Hover
  79. ---------------*/
  80. /* Sortable */
  81. .ui.sortable.table thead th:hover {
  82. background-image: none;
  83. background-color: rgba(0, 0, 0, 0.04);
  84. color: #333333;
  85. }
  86. .ui.sortable.table th.disabled:hover {
  87. cursor: auto;
  88. background-color: rgba(0, 0, 0, 0.1);
  89. text-align: left;
  90. font-weight: bold;
  91. color: #333333;
  92. color: rgba(0, 0, 0, 0.8);
  93. }
  94. /*--------------
  95. Positive
  96. ---------------*/
  97. .ui.table tr.positive td,
  98. .ui.table td.positive {
  99. background-color: #F2F8F0 !important;
  100. color: #119000;
  101. }
  102. .ui.celled.table tr.positive:hover td,
  103. .ui.celled.table tr:hover td.positive,
  104. .ui.table tr.positive:hover td,
  105. .ui.table td:hover.positive,
  106. .ui.table th:hover.positive {
  107. background-color: #ECF5E9 !important;
  108. color: #119000;
  109. }
  110. /*--------------
  111. Negative
  112. ---------------*/
  113. .ui.table tr.negative td,
  114. .ui.table td.negative {
  115. background-color: #F9F4F4;
  116. color: #CD2929;
  117. }
  118. .ui.celled.table tr.negative:hover td,
  119. .ui.celled.table tr:hover td.negative,
  120. .ui.table tr.negative:hover td,
  121. .ui.table td:hover.negative,
  122. .ui.table th:hover.negative {
  123. background-color: #F2E8E8 !important;
  124. color: #CD2929;
  125. }
  126. /*--------------
  127. Error
  128. ---------------*/
  129. .ui.table tr.error td,
  130. .ui.table td.error,
  131. .ui.table th.error {
  132. background-color: #F9F4F4 !important;
  133. color: #CD2929;
  134. }
  135. .ui.celled.table tr.error:hover td,
  136. .ui.celled.table tr:hover td.error,
  137. .ui.table tr.error:hover td,
  138. .ui.table td:hover.error,
  139. .ui.table th:hover.error {
  140. background-color: #F2E8E8 !important;
  141. color: #CD2929;
  142. }
  143. /*--------------
  144. Warning
  145. ---------------*/
  146. .ui.table tr.warning td,
  147. .ui.table td.warning,
  148. .ui.table th.warning {
  149. background-color: #FBF6E9;
  150. /* border-color: #CBB105 !important; */
  151. color: #7D6C00;
  152. }
  153. .ui.celled.table tr.warning:hover td,
  154. .ui.celled.table tr:hover td.warning,
  155. .ui.table tr.warning:hover td,
  156. .ui.table td:hover.warning,
  157. .ui.table th:hover.warning {
  158. background-color: #F3EDDC !important;
  159. color: #7D6C00;
  160. }
  161. /*--------------
  162. Active
  163. ---------------*/
  164. .ui.table tr.active td,
  165. .ui.table tr td.active {
  166. background-color: #F0F0F0 !important;
  167. color: rgba(50, 50, 50, 0.9);
  168. /* border-color: rgba(0, 0, 0, 0.15) !important; */
  169. }
  170. /*--------------
  171. Disabled
  172. ---------------*/
  173. .ui.table tr.disabled td,
  174. .ui.table tr td.disabled,
  175. .ui.table tr.disabled:hover td,
  176. .ui.table tr:hover td.disabled {
  177. color: rgba(150, 150, 150, 0.3);
  178. }
  179. /*******************************
  180. Variations
  181. *******************************/
  182. /*--------------
  183. Column Count
  184. ---------------*/
  185. .ui.two.column.table td {
  186. width: 50%;
  187. }
  188. .ui.three.column.table td {
  189. width: 33.3333%;
  190. }
  191. .ui.four.column.table td {
  192. width: 25%;
  193. }
  194. .ui.five.column.table td {
  195. width: 20%;
  196. }
  197. .ui.six.column.table td {
  198. width: 16.66667%;
  199. }
  200. .ui.seven.column.table td {
  201. width: 14.2857%;
  202. }
  203. .ui.eight.column.table td {
  204. width: 12.5%;
  205. }
  206. .ui.nine.column.table td {
  207. width: 11.1111%;
  208. }
  209. .ui.ten.column.table td {
  210. width: 10%;
  211. }
  212. .ui.eleven.column.table td {
  213. width: 9.0909%;
  214. }
  215. .ui.twelve.column.table td {
  216. width: 8.3333%;
  217. }
  218. .ui.thirteen.column.table td {
  219. width: 7.6923%;
  220. }
  221. .ui.fourteen.column.table td {
  222. width: 7.1428%;
  223. }
  224. .ui.fifteen.column.table td {
  225. width: 6.6666%;
  226. }
  227. .ui.sixteen.column.table td {
  228. width: 6.25%;
  229. }
  230. /*--------------
  231. Celled
  232. ---------------*/
  233. .ui.celled.table {
  234. color: rgba(0, 0, 0, 0.8);
  235. }
  236. .ui.celled.table tbody tr,
  237. .ui.celled.table tfoot tr {
  238. border: none;
  239. }
  240. .ui.celled.table th {
  241. border: 1px solid #E0E0E0;
  242. }
  243. .ui.celled.table tbody td {
  244. border: 1px solid #E0E0E0;
  245. }
  246. /* Sortable Table */
  247. .ui.sortable.table thead th {
  248. cursor: pointer;
  249. white-space: nowrap;
  250. }
  251. .ui.sortable.table thead th.sorted,
  252. .ui.sortable.table thead th.sorted:hover {
  253. -webkit-user-select: none;
  254. -moz-user-select: none;
  255. -ms-user-select: none;
  256. user-select: none;
  257. background-color: rgba(0, 0, 0, 0.05);
  258. }
  259. .ui.sortable.table thead th:after {
  260. display: inline-block;
  261. content: '';
  262. width: 1em;
  263. opacity: 0.8;
  264. margin: 0em 0em 0em 0.5em;
  265. font-family: 'Icons';
  266. font-style: normal;
  267. font-weight: normal;
  268. text-decoration: inherit;
  269. vertical-align: text-top;
  270. }
  271. .ui.sortable.table thead th.ascending:after {
  272. content: '\25b4';
  273. }
  274. .ui.sortable.table thead th.descending:after {
  275. content: '\25be';
  276. }
  277. /*--------------
  278. Inverted
  279. ---------------*/
  280. .ui.inverted.table th {
  281. background-color: rgba(0, 0, 0, 0.15);
  282. color: rgba(255, 255, 255, 0.9);
  283. }
  284. .ui.inverted.table tbody tr:nth-child(2n) {
  285. background-color: rgba(255, 255, 255, 0.06);
  286. }
  287. /*--------------
  288. Collapsing
  289. ---------------*/
  290. .ui.collapsing.table {
  291. width: auto;
  292. }
  293. /*--------------
  294. Basic
  295. ---------------*/
  296. .ui.basic.table th {
  297. background-color: transparent;
  298. padding: 0.5em;
  299. font-weight: normal;
  300. }
  301. .ui.basic.table tbody tr {
  302. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  303. }
  304. .ui.basic.table td {
  305. padding: 0.8em 0.5em;
  306. }
  307. /*--------------
  308. Padded
  309. ---------------*/
  310. .ui.padded.table th,
  311. .ui.padded.table td {
  312. padding: 0.8em 1em;
  313. }
  314. .ui.compact.table th {
  315. padding: 0.3em 0.5em;
  316. }
  317. .ui.compact.table td {
  318. padding: 0.2em 0.5em;
  319. }
  320. /*--------------
  321. Sizes
  322. ---------------*/
  323. /* Small */
  324. .ui.small.table {
  325. font-size: 0.875em;
  326. }
  327. /* Standard */
  328. .ui.table {
  329. font-size: 1em;
  330. }
  331. /* Large */
  332. .ui.large.table {
  333. font-size: 1.1em;
  334. }