richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
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.
1612 Commits
34 Branches
160 Tags
181 MiB
Tree: 928808f854
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '928808f854'
${ noResults }
SemanSemantic-UItic-UI/npm/collections/table.css

507 lines
10 KiB
Raw Normal View History

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