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.

632 lines
12 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic List - Flat
  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. * Released: April 26 2013
  11. */
  12. /*******************************
  13. List
  14. *******************************/
  15. ul.ui.list,
  16. ol.ui.list,
  17. .ui.list {
  18. list-style-type: none;
  19. margin: 1em 0em;
  20. padding: 0em;
  21. }
  22. ul.ui.list ul,
  23. ol.ui.list ol,
  24. .ui.list .list {
  25. margin: 0em;
  26. padding: 0.5em 1em 0.5em 0em;
  27. }
  28. ul.ui.list:first-child,
  29. ol.ui.list:first-child,
  30. .ui.list:first-child {
  31. margin-top: 0em;
  32. }
  33. ul.ui.list:last-child,
  34. ol.ui.list:last-child,
  35. .ui.list:last-child {
  36. margin-bottom: 0em;
  37. }
  38. /*******************************
  39. Content
  40. *******************************/
  41. /* List Item */
  42. ul.ui.list li,
  43. ol.ui.list li,
  44. .ui.list .item {
  45. display: list-item;
  46. list-style-type: none;
  47. list-style-position: inside;
  48. padding: 0.3em 0em;
  49. line-height: 1.2;
  50. }
  51. .ui.list .item:after {
  52. content: '';
  53. display: block;
  54. height: 0;
  55. clear: both;
  56. visibility: hidden;
  57. }
  58. /* Sub-List */
  59. .ui.list .list {
  60. clear: both;
  61. }
  62. /* Icon */
  63. .ui.list .item > .icon {
  64. display: block;
  65. float: right;
  66. margin: 0em 0em 0em 1em;
  67. padding: 0.1em 0em 0em 0em;
  68. }
  69. .ui.list .item > .icon:only-child {
  70. display: inline-block;
  71. }
  72. .ui.horizontal.list .item > .icon {
  73. margin: 0em;
  74. padding: 0em 0em 0em 0.25em;
  75. }
  76. .ui.horizontal.list .item > .icon,
  77. .ui.horizontal.list .item > .icon + .content {
  78. float: none;
  79. display: inline-block;
  80. }
  81. /* Image */
  82. .ui.list .item > img {
  83. display: block;
  84. float: right;
  85. margin-left: 1em;
  86. vertical-align: middle;
  87. }
  88. /* Content */
  89. .ui.list .item > .content {
  90. display: inline-block;
  91. vertical-align: middle;
  92. line-height: 1.2;
  93. }
  94. .ui.list .item > .icon + .content {
  95. display: table-cell;
  96. vertical-align: top;
  97. }
  98. /* Link */
  99. .ui.list a {
  100. cursor: pointer;
  101. }
  102. .ui.list a .icon {
  103. color: rgba(0, 0, 0, 0.6);
  104. -webkit-transition: color 0.2s ease;
  105. -moz-transition: color 0.2s ease;
  106. -o-transition: color 0.2s ease;
  107. -ms-transition: color 0.2s ease;
  108. transition: color 0.2s ease;
  109. }
  110. /* Header */
  111. .ui.list .header {
  112. font-weight: bold;
  113. }
  114. .ui.list .description {
  115. color: rgba(0, 0, 0, 0.5);
  116. }
  117. /* Floated Content */
  118. .ui.list .item > .left.floated {
  119. margin-left: 1em;
  120. float: right;
  121. }
  122. .ui.list .item > .right.floated {
  123. margin-right: 1em;
  124. float: left;
  125. }
  126. /*******************************
  127. Types
  128. *******************************/
  129. /*-------------------
  130. Horizontal
  131. --------------------*/
  132. .ui.horizontal.list {
  133. display: inline-block;
  134. font-size: 0em;
  135. }
  136. .ui.horizontal.list > .item {
  137. display: inline-block;
  138. margin-right: 1em;
  139. font-size: 1rem;
  140. }
  141. .ui.horizontal.list > .item:first-child {
  142. margin-right: 0em;
  143. }
  144. .ui.horizontal.list .list {
  145. padding-right: 0em;
  146. padding-bottom: 0em;
  147. }
  148. /*******************************
  149. States
  150. *******************************/
  151. /*-------------------
  152. Hover
  153. --------------------*/
  154. .ui.list a:hover .icon {
  155. color: rgba(0, 0, 0, 0.8);
  156. }
  157. /*******************************
  158. Variations
  159. *******************************/
  160. /*-------------------
  161. Inverted
  162. --------------------*/
  163. .ui.inverted.list a .icon {
  164. color: rgba(255, 255, 255, 0.6);
  165. }
  166. .ui.inverted.list .description {
  167. color: rgba(255, 255, 255, 0.8);
  168. }
  169. .ui.inverted.link.list .item {
  170. color: rgba(255, 255, 255, 0.4);
  171. }
  172. /*-------------------
  173. Link
  174. --------------------*/
  175. .ui.link.list .item {
  176. color: rgba(0, 0, 0, 0.3);
  177. }
  178. .ui.link.list a.item,
  179. .ui.link.list .item a {
  180. color: rgba(0, 0, 0, 0.5);
  181. }
  182. .ui.link.list a.item:hover,
  183. .ui.link.list .item a:hover {
  184. color: rgba(0, 0, 0, 0.8);
  185. }
  186. .ui.link.list a.item:active,
  187. .ui.link.list .item a:active {
  188. color: rgba(0, 0, 0, 0.8);
  189. }
  190. .ui.link.list a.active.item,
  191. .ui.link.list .active.item a {
  192. color: rgba(0, 0, 0, 0.8);
  193. }
  194. /* Inverted */
  195. .ui.inverted.link.list a.item,
  196. .ui.inverted.link.list .item a {
  197. color: rgba(255, 255, 255, 0.6);
  198. }
  199. .ui.inverted.link.list a.item:hover,
  200. .ui.inverted.link.list .item a:hover {
  201. color: rgba(255, 255, 255, 0.8);
  202. }
  203. .ui.inverted.link.list a.item:active,
  204. .ui.inverted.link.list .item a:active {
  205. color: rgba(255, 255, 255, 0.9);
  206. }
  207. .ui.inverted.link.list a.active.item,
  208. .ui.inverted.link.list .active.item a {
  209. color: rgba(255, 255, 255, 0.8);
  210. }
  211. /*-------------------
  212. Selection
  213. --------------------*/
  214. .ui.selection.list .item {
  215. cursor: pointer;
  216. color: rgba(0, 0, 0, 0.4);
  217. padding: 0.5em;
  218. transition:
  219. 0.2s color ease,
  220. 0.2s padding-right ease,
  221. 0.2s background-color ease
  222. ;
  223. }
  224. .ui.selection.list .item:hover {
  225. background-color: rgba(0, 0, 0, 0.02);
  226. color: rgba(0, 0, 0, 0.7);
  227. }
  228. .ui.selection.list .item:active {
  229. background-color: rgba(0, 0, 0, 0.05);
  230. color: rgba(0, 0, 0, 0.7);
  231. }
  232. .ui.selection.list .item.active {
  233. background-color: rgba(0, 0, 0, 0.04);
  234. color: rgba(0, 0, 0, 0.7);
  235. }
  236. .ui.animated.list .item {
  237. transition:
  238. 0.2s color ease,
  239. 0.2s padding-right ease,
  240. 0.2s background-color ease
  241. ;
  242. }
  243. .ui.animated.list:not(.horizontal) .item:hover {
  244. padding-right: 1em;
  245. }
  246. .ui.animated.list:not(.horizontal) .item:hover .item:hover {
  247. padding-right: 0.5em;
  248. }
  249. /* Inverted */
  250. .ui.inverted.selection.list .item {
  251. color: rgba(255, 255, 255, 0.6);
  252. }
  253. .ui.inverted.selection.list .item:hover {
  254. background-color: rgba(255, 255, 255, 0.04);
  255. color: rgba(255, 255, 255, 0.8);
  256. }
  257. .ui.inverted.selection.list .item:active {
  258. background-color: rgba(255, 255, 255, 0.1);
  259. color: rgba(255, 255, 255, 0.7);
  260. }
  261. .ui.inverted.selection.list .item.active {
  262. background-color: rgba(255, 255, 255, 0.08);
  263. color: #FFFFFF;
  264. }
  265. /*-------------------
  266. Bulleted
  267. --------------------*/
  268. ul.ui.list,
  269. .ui.bulleted.list {
  270. margin-right: 1.5em;
  271. }
  272. ul.ui.list li,
  273. .ui.bulleted.list .item {
  274. position: relative;
  275. }
  276. ul.ui.list li:before,
  277. .ui.bulleted.list .item:before {
  278. position: absolute;
  279. right: -1.5em;
  280. content: '•';
  281. line-height: 1.2rem;
  282. vertical-align: top;
  283. }
  284. ul.ui.list ul,
  285. .ui.bulleted.list .list {
  286. padding-right: 1.5em;
  287. }
  288. /* Horizontal Bulleted */
  289. ul.ui.horizontal.bulleted.list,
  290. .ui.horizontal.bulleted.list {
  291. margin-right: 0em;
  292. }
  293. ul.ui.horizontal.bulleted.list li,
  294. .ui.horizontal.bulleted.list .item {
  295. margin-right: 1.5em;
  296. }
  297. ul.ui.horizontal.bulleted.list li:before,
  298. .ui.horizontal.bulleted.list .item:before {
  299. right: -0.9em;
  300. }
  301. ul.ui.horizontal.bulleted.list li:first-child,
  302. .ui.horizontal.bulleted.list .item:first-child {
  303. margin-right: 0em;
  304. }
  305. ul.ui.horizontal.bulleted.list li:first-child::before,
  306. .ui.horizontal.bulleted.list .item:first-child::before {
  307. display: none;
  308. }
  309. /*-------------------
  310. Ordered
  311. --------------------*/
  312. ol.ui.list,
  313. .ui.ordered.list {
  314. counter-reset: ordered;
  315. margin-right: 2em;
  316. list-style-type: none;
  317. }
  318. ol.ui.list li,
  319. .ui.ordered.list .item {
  320. list-style-type: none;
  321. position: relative;
  322. }
  323. ol.ui.list li:before,
  324. .ui.ordered.list .item:before {
  325. position: absolute;
  326. right: -2em;
  327. counter-increment: ordered;
  328. content: counters(ordered, ".");
  329. text-align: left;
  330. vertical-align: top;
  331. opacity: 0.75;
  332. }
  333. ol.ui.list ol,
  334. .ui.ordered.list .list {
  335. counter-reset: ordered;
  336. padding-right: 2.5em;
  337. }
  338. ol.ui.list ol li:before,
  339. .ui.ordered.list .list .item:before {
  340. right: -2.5em;
  341. }
  342. /* Horizontal Ordered */
  343. ol.ui.horizontal.list,
  344. .ui.ordered.horizontal.list {
  345. margin-right: 0em;
  346. }
  347. ol.ui.horizontal.list li:before,
  348. .ui.ordered.horizontal.list .item:before {
  349. position: static;
  350. margin: 0em 0em 0em 0.5em;
  351. }
  352. /*-------------------
  353. Divided
  354. --------------------*/
  355. .ui.divided.list > .item,
  356. .ui.divided.list:not(.horizontal) > .list {
  357. border-top: 1px solid rgba(0, 0, 0, 0.1);
  358. padding-right: 0.5em;
  359. padding-left: 0.5em;
  360. }
  361. .ui.divided.list .item .menu .item {
  362. border-width: 0px;
  363. }
  364. .ui.divided.list .item:first-child {
  365. border-top-width: 0px;
  366. }
  367. /* Sub Menu */
  368. .ui.divided.list:not(.horizontal) .list {
  369. margin-right: -0.5em;
  370. margin-left: -0.5em;
  371. }
  372. .ui.divided.list:not(.horizontal) .list .item {
  373. padding-right: 1em;
  374. padding-left: 1em;
  375. }
  376. .ui.divided.list:not(.horizontal) .list .item:first-child {
  377. border-top-width: 1px;
  378. }
  379. /* Divided bulleted */
  380. .ui.divided.bulleted.list {
  381. margin-right: 0em;
  382. }
  383. .ui.divided.bulleted.list .item {
  384. padding-right: 1.5em;
  385. }
  386. .ui.divided.bulleted.list .item:before {
  387. right: 0.5em;
  388. }
  389. /* Divided ordered */
  390. .ui.divided.ordered.list {
  391. margin-right: 0em;
  392. }
  393. .ui.divided.ordered.list > .item {
  394. padding-right: 2em;
  395. padding-left: 2em;
  396. }
  397. .ui.divided.ordered.list > .item:before {
  398. right: 0.5em;
  399. }
  400. .ui.divided.ordered.list .item .list {
  401. margin-right: -2em;
  402. margin-left: -2em;
  403. }
  404. /* Divided horizontal */
  405. .ui.divided.horizontal.list {
  406. margin-right: 0em;
  407. }
  408. .ui.divided.horizontal.list > .item {
  409. border-top: none;
  410. border-right: 1px solid rgba(0, 0, 0, 0.1);
  411. margin: 0em;
  412. padding-right: 0.75em;
  413. padding-left: 0.75em;
  414. line-height: 0.6;
  415. }
  416. .ui.horizontal.divided.list > .item:first-child {
  417. border-right: none;
  418. padding-right: 0em;
  419. }
  420. /* Inverted */
  421. .ui.divided.inverted.list > .item,
  422. .ui.divided.inverted.list > .list {
  423. border-color: rgba(255, 255, 255, 0.2);
  424. }
  425. .ui.divided.inverted.horizontal.list .item {
  426. border-color: rgba(255, 255, 255, 0.2);
  427. }
  428. /*-------------------
  429. Celled
  430. --------------------*/
  431. .ui.celled.list > .item,
  432. .ui.celled.list > .list {
  433. border-top: 1px solid rgba(0, 0, 0, 0.1);
  434. padding-right: 0.5em;
  435. padding-left: 0.5em;
  436. }
  437. .ui.celled.list > .item:last-child {
  438. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  439. }
  440. /* Sub Menu */
  441. .ui.celled.list .item .list {
  442. margin-right: -0.5em;
  443. margin-left: -0.5em;
  444. }
  445. .ui.celled.list .item .list .item {
  446. border-width: 0px;
  447. }
  448. .ui.celled.list .list .item:first-child {
  449. border-top-width: 0px;
  450. }
  451. /* Celled Bulleted */
  452. .ui.celled.bulleted.list {
  453. margin-right: 0em;
  454. }
  455. .ui.celled.bulleted.list > .item {
  456. padding-right: 1.5em;
  457. }
  458. .ui.celled.bulleted.list > .item:before {
  459. right: 0.5em;
  460. }
  461. /* Celled Ordered */
  462. .ui.celled.ordered.list {
  463. margin-right: 0em;
  464. }
  465. .ui.celled.ordered.list .item {
  466. padding-right: 2em;
  467. padding-left: 2em;
  468. }
  469. .ui.celled.ordered.list .item:before {
  470. right: 0.5em;
  471. }
  472. .ui.celled.ordered.list .item .list {
  473. margin-right: -2em;
  474. margin-left: -2em;
  475. }
  476. /* Celled Horizontal */
  477. .ui.horizontal.celled.list {
  478. margin-right: 0em;
  479. }
  480. .ui.horizontal.celled.list .item {
  481. border-top: none;
  482. border-right: 1px solid rgba(0, 0, 0, 0.1);
  483. margin: 0em;
  484. padding-right: 0.75em;
  485. padding-left: 0.75em;
  486. line-height: 0.6;
  487. }
  488. .ui.horizontal.celled.list .item:last-child {
  489. border-bottom: none;
  490. border-left: 1px solid rgba(0, 0, 0, 0.1);
  491. }
  492. /* Inverted */
  493. .ui.celled.inverted.list > .item,
  494. .ui.celled.inverted.list > .list {
  495. border-color: rgba(255, 255, 255, 0.2);
  496. }
  497. .ui.celled.inverted.horizontal.list .item {
  498. border-color: rgba(255, 255, 255, 0.2);
  499. }
  500. /*-------------------
  501. Relaxed
  502. --------------------*/
  503. .ui.relaxed.list:not(.horizontal) .item {
  504. padding-top: 0.5em;
  505. padding-bottom: 0.5em;
  506. }
  507. .ui.relaxed.list .header {
  508. margin-bottom: 0.25em;
  509. }
  510. .ui.horizontal.relaxed.list .item {
  511. padding-right: 1.25em;
  512. padding-left: 1.25em;
  513. }
  514. .ui.very.relaxed.list:not(.horizontal) .item {
  515. padding-top: 1em;
  516. padding-bottom: 1em;
  517. }
  518. .ui.very.relaxed.list .header {
  519. margin-bottom: 0.5em;
  520. }
  521. .ui.horizontal.very.relaxed.list .item {
  522. padding-right: 2em;
  523. padding-left: 2em;
  524. }
  525. /*-------------------
  526. Sizes
  527. --------------------*/
  528. .ui.mini.list .item {
  529. font-size: 0.7rem;
  530. }
  531. .ui.tiny.list .item {
  532. font-size: 0.8125rem;
  533. }
  534. .ui.small.list .item {
  535. font-size: 0.875rem;
  536. }
  537. .ui.list .item {
  538. font-size: 1em;
  539. }
  540. .ui.large.list .item {
  541. font-size: 1.125rem;
  542. }
  543. .ui.big.list .item {
  544. font-size: 1.25rem;
  545. }
  546. .ui.huge.list .item {
  547. font-size: 1.375rem;
  548. }
  549. .ui.massive.list .item {
  550. font-size: 1.5rem;
  551. }