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.

808 lines
15 KiB

11 years ago
  1. /*
  2. * # Semantic - basic.Icon (Basic)
  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. basic.Icon
  13. *******************************/
  14. @font-face {
  15. font-family: 'Basic Icons';
  16. src: url(../fonts/basic.icons.eot);
  17. src: url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'), url(../fonts/basic.icons.woff) format('woff'), url(../fonts/basic.icons.ttf) format('truetype'), url(../fonts/basic.icons.svg#basic.icons) format('svg');
  18. font-style: normal;
  19. font-weight: normal;
  20. font-variant: normal;
  21. text-decoration: inherit;
  22. text-transform: none;
  23. }
  24. i.basic.icon {
  25. display: inline-block;
  26. opacity: 0.75;
  27. margin: 0em 0.25em 0em 0em;
  28. width: 1.23em;
  29. height: 1em;
  30. font-family: 'Basic Icons';
  31. font-style: normal;
  32. line-height: 1;
  33. font-weight: normal;
  34. text-decoration: inherit;
  35. text-align: center;
  36. speak: none;
  37. -webkit-box-sizing: border-box;
  38. -moz-box-sizing: border-box;
  39. -ms-box-sizing: border-box;
  40. box-sizing: border-box;
  41. -webkit-font-smoothing: antialiased;
  42. -moz-font-smoothing: antialiased;
  43. font-smoothing: antialiased;
  44. }
  45. /* basic.icons available */
  46. i.basic.icon.circle.attention:before {
  47. content: '\2757';
  48. }
  49. /* '❗' */
  50. i.basic.icon.circle.help:before {
  51. content: '\e704';
  52. }
  53. /* '' */
  54. i.basic.icon.circle.info:before {
  55. content: '\e705';
  56. }
  57. /* '' */
  58. i.basic.icon.add:before {
  59. content: '\2795';
  60. }
  61. /* '➕' */
  62. i.basic.icon.chart:before {
  63. content: '📈';
  64. }
  65. /* '\1f4c8' */
  66. i.basic.icon.chart.bar:before {
  67. content: '📊';
  68. }
  69. /* '\1f4ca' */
  70. i.basic.icon.chart.pie:before {
  71. content: '\e7a2';
  72. }
  73. /* '' */
  74. i.basic.icon.resize.full:before {
  75. content: '\e744';
  76. }
  77. /* '' */
  78. i.basic.icon.resize.horizontal:before {
  79. content: '\2b0d';
  80. }
  81. /* '⬍' */
  82. i.basic.icon.resize.small:before {
  83. content: '\e746';
  84. }
  85. /* '' */
  86. i.basic.icon.resize.vertical:before {
  87. content: '\2b0c';
  88. }
  89. /* '⬌' */
  90. i.basic.icon.down:before {
  91. content: '\2193';
  92. }
  93. /* '↓' */
  94. i.basic.icon.down.triangle:before {
  95. content: '\25be';
  96. }
  97. /* '▾' */
  98. i.basic.icon.down.arrow:before {
  99. content: '\e75c';
  100. }
  101. /* '' */
  102. i.basic.icon.left:before {
  103. content: '\2190';
  104. }
  105. /* '←' */
  106. i.basic.icon.left.triangle:before {
  107. content: '\25c2';
  108. }
  109. /* '◂' */
  110. i.basic.icon.left.arrow:before {
  111. content: '\e75d';
  112. }
  113. /* '' */
  114. i.basic.icon.right:before {
  115. content: '\2192';
  116. }
  117. /* '→' */
  118. i.basic.icon.right.triangle:before {
  119. content: '\25b8';
  120. }
  121. /* '▸' */
  122. i.basic.icon.right.arrow:before {
  123. content: '\e75e';
  124. }
  125. /* '' */
  126. i.basic.icon.up:before {
  127. content: '\2191';
  128. }
  129. /* '↑' */
  130. i.basic.icon.up.triangle:before {
  131. content: '\25b4';
  132. }
  133. /* '▴' */
  134. i.basic.icon.up.arrow:before {
  135. content: '\e75f';
  136. }
  137. /* '' */
  138. i.basic.icon.folder:before {
  139. content: '\e810';
  140. }
  141. /* '' */
  142. i.basic.icon.open.folder:before {
  143. content: '📂';
  144. }
  145. /* '\1f4c2' */
  146. i.basic.icon.globe:before {
  147. content: '𝌍';
  148. }
  149. /* '\1d30d' */
  150. i.basic.icon.desk.globe:before {
  151. content: '🌐';
  152. }
  153. /* '\1f310' */
  154. i.basic.icon.star:before {
  155. content: '\e801';
  156. }
  157. /* '' */
  158. i.basic.icon.star.empty:before {
  159. content: '\e800';
  160. }
  161. /* '' */
  162. i.basic.icon.star.half:before {
  163. content: '\e701';
  164. }
  165. /* '' */
  166. i.basic.icon.lock:before {
  167. content: '🔒';
  168. }
  169. /* '\1f512' */
  170. i.basic.icon.unlock:before {
  171. content: '🔓';
  172. }
  173. /* '\1f513' */
  174. i.basic.icon.layout.grid:before {
  175. content: '\e80c';
  176. }
  177. /* '' */
  178. i.basic.icon.layout.block:before {
  179. content: '\e708';
  180. }
  181. /* '' */
  182. i.basic.icon.layout.list:before {
  183. content: '\e80b';
  184. }
  185. /* '' */
  186. i.basic.icon.heart.empty:before {
  187. content: '\2661';
  188. }
  189. /* '♡' */
  190. i.basic.icon.heart:before {
  191. content: '\2665';
  192. }
  193. /* '♥' */
  194. i.basic.icon.asterisk:before {
  195. content: '\2731';
  196. }
  197. /* '✱' */
  198. i.basic.icon.attachment:before {
  199. content: '📎';
  200. }
  201. /* '\1f4ce' */
  202. i.basic.icon.attention:before {
  203. content: '\26a0';
  204. }
  205. /* '⚠' */
  206. i.basic.icon.trophy:before {
  207. content: '🏉';
  208. }
  209. /* '\1f3c9' */
  210. i.basic.icon.barcode:before {
  211. content: '\e792';
  212. }
  213. /* '' */
  214. i.basic.icon.cart:before {
  215. content: '\e813';
  216. }
  217. /* '' */
  218. i.basic.icon.block:before {
  219. content: '🚫';
  220. }
  221. /* '\1f6ab' */
  222. i.basic.icon.book:before {
  223. content: '📖';
  224. }
  225. i.basic.icon.bookmark:before {
  226. content: '🔖';
  227. }
  228. /* '\1f516' */
  229. i.basic.icon.calendar:before {
  230. content: '📅';
  231. }
  232. /* '\1f4c5' */
  233. i.basic.icon.cancel:before {
  234. content: '\2716';
  235. }
  236. /* '✖' */
  237. i.basic.icon.close:before {
  238. content: '\e80d';
  239. }
  240. /* '' */
  241. i.basic.icon.color:before {
  242. content: '\e794';
  243. }
  244. /* '' */
  245. i.basic.icon.chat:before {
  246. content: '\e720';
  247. }
  248. /* '' */
  249. i.basic.icon.check:before {
  250. content: '\2611';
  251. }
  252. /* '☑' */
  253. i.basic.icon.time:before {
  254. content: '🕔';
  255. }
  256. /* '\1f554' */
  257. i.basic.icon.cloud:before {
  258. content: '\2601';
  259. }
  260. /* '☁' */
  261. i.basic.icon.code:before {
  262. content: '\e714';
  263. }
  264. /* '' */
  265. i.basic.icon.email:before {
  266. content: '\40';
  267. }
  268. /* '@' */
  269. i.basic.icon.settings:before {
  270. content: '\26ef';
  271. }
  272. /* '⛯' */
  273. i.basic.icon.setting:before {
  274. content: '\2699';
  275. }
  276. /* '⚙' */
  277. i.basic.icon.comment:before {
  278. content: '\e802';
  279. }
  280. /* '' */
  281. i.basic.icon.clockwise.counter:before {
  282. content: '\27f2';
  283. }
  284. /* '⟲' */
  285. i.basic.icon.clockwise:before {
  286. content: '\27f3';
  287. }
  288. /* '⟳' */
  289. i.basic.icon.cube:before {
  290. content: '\e807';
  291. }
  292. /* '' */
  293. i.basic.icon.direction:before {
  294. content: '\27a2';
  295. }
  296. /* '➢' */
  297. i.basic.icon.doc:before {
  298. content: '📄';
  299. }
  300. /* '\1f4c4' */
  301. i.basic.icon.docs:before {
  302. content: '\e736';
  303. }
  304. /* '' */
  305. i.basic.icon.dollar:before {
  306. content: '💵';
  307. }
  308. /* '\1f4b5' */
  309. i.basic.icon.paint:before {
  310. content: '\e7b5';
  311. }
  312. /* '' */
  313. i.basic.icon.edit:before {
  314. content: '\270d';
  315. }
  316. /* '✍' */
  317. i.basic.icon.eject:before {
  318. content: '\2ecf';
  319. }
  320. /* '⻏' */
  321. i.basic.icon.export:before {
  322. content: '\e715';
  323. }
  324. /* '' */
  325. i.basic.icon.hide:before {
  326. content: '\e80f';
  327. }
  328. /* '' */
  329. i.basic.icon.unhide:before {
  330. content: '\e70b';
  331. }
  332. /* '' */
  333. i.basic.icon.facebook:before {
  334. content: '\f301';
  335. }
  336. /* '' */
  337. i.basic.icon.fast-forward:before {
  338. content: '\e804';
  339. }
  340. /* '' */
  341. i.basic.icon.fire:before {
  342. content: '🔥';
  343. }
  344. /* '\1f525' */
  345. i.basic.icon.flag:before {
  346. content: '\2691';
  347. }
  348. /* '⚑' */
  349. i.basic.icon.lightning:before {
  350. content: '\26a1';
  351. }
  352. /* '⚡' */
  353. i.basic.icon.lab:before {
  354. content: '\68';
  355. }
  356. /* 'h' */
  357. i.basic.icon.flight:before {
  358. content: '\2708';
  359. }
  360. /* '✈' */
  361. i.basic.icon.forward:before {
  362. content: '\27a6';
  363. }
  364. /* '➦' */
  365. i.basic.icon.gift:before {
  366. content: '🎁';
  367. }
  368. /* '\1f381' */
  369. i.basic.icon.github:before {
  370. content: '\f308';
  371. }
  372. /* '' */
  373. i.basic.icon.globe:before {
  374. content: '\e817';
  375. }
  376. /* '' */
  377. i.basic.icon.headphones:before {
  378. content: '🎧';
  379. }
  380. /* '\1f3a7' */
  381. i.basic.icon.question:before {
  382. content: '\2753';
  383. }
  384. /* '❓' */
  385. i.basic.icon.home:before {
  386. content: '\2302';
  387. }
  388. /* '⌂' */
  389. i.basic.icon.i:before {
  390. content: '\2139';
  391. }
  392. /* 'ℹ' */
  393. i.basic.icon.idea:before {
  394. content: '💡';
  395. }
  396. /* '\1f4a1' */
  397. i.basic.icon.open:before {
  398. content: '🔗';
  399. }
  400. /* '\1f517' */
  401. i.basic.icon.content:before {
  402. content: '\e782';
  403. }
  404. /* '' */
  405. i.basic.icon.location:before {
  406. content: '\e724';
  407. }
  408. /* '' */
  409. i.basic.icon.mail:before {
  410. content: '\2709';
  411. }
  412. /* '✉' */
  413. i.basic.icon.mic:before {
  414. content: '🎤';
  415. }
  416. /* '\1f3a4' */
  417. i.basic.icon.minus:before {
  418. content: '\2d';
  419. }
  420. /* '-' */
  421. i.basic.icon.money:before {
  422. content: '💰';
  423. }
  424. /* '\1f4b0' */
  425. i.basic.icon.off:before {
  426. content: '\e78e';
  427. }
  428. /* '' */
  429. i.basic.icon.pause:before {
  430. content: '\e808';
  431. }
  432. /* '' */
  433. i.basic.icon.photos:before {
  434. content: '\e812';
  435. }
  436. /* '' */
  437. i.basic.icon.photo:before {
  438. content: '🌄';
  439. }
  440. /* '\1f304' */
  441. i.basic.icon.pin:before {
  442. content: '📌';
  443. }
  444. /* '\1f4cc' */
  445. i.basic.icon.play:before {
  446. content: '\e809';
  447. }
  448. /* '' */
  449. i.basic.icon.plus:before {
  450. content: '\2b';
  451. }
  452. /* '+' */
  453. i.basic.icon.print:before {
  454. content: '\e716';
  455. }
  456. /* '' */
  457. i.basic.icon.rss:before {
  458. content: '\e73a';
  459. }
  460. /* '' */
  461. i.basic.icon.search:before {
  462. content: '🔍';
  463. }
  464. /* '\1f50d' */
  465. i.basic.icon.shuffle:before {
  466. content: '\e803';
  467. }
  468. /* '' */
  469. i.basic.icon.tag:before {
  470. content: '\e80a';
  471. }
  472. /* '' */
  473. i.basic.icon.tags:before {
  474. content: '\e70d';
  475. }
  476. /* '' */
  477. i.basic.icon.terminal:before {
  478. content: '\e7ac';
  479. }
  480. /* '' */
  481. i.basic.icon.thumbs.down:before {
  482. content: '👎';
  483. }
  484. /* '\1f44e' */
  485. i.basic.icon.thumbs.up:before {
  486. content: '👍';
  487. }
  488. /* '\1f44d' */
  489. i.basic.icon.to-end:before {
  490. content: '\e806';
  491. }
  492. /* '' */
  493. i.basic.icon.to-start:before {
  494. content: '\e805';
  495. }
  496. /* '' */
  497. i.basic.icon.top.list:before {
  498. content: '🏆';
  499. }
  500. /* '\1f3c6' */
  501. i.basic.icon.trash:before {
  502. content: '\e729';
  503. }
  504. /* '' */
  505. i.basic.icon.twitter:before {
  506. content: '\f303';
  507. }
  508. /* '' */
  509. i.basic.icon.upload:before {
  510. content: '\e711';
  511. }
  512. /* '' */
  513. i.basic.icon.user.add:before {
  514. content: '\e700';
  515. }
  516. /* '' */
  517. i.basic.icon.user:before {
  518. content: '👤';
  519. }
  520. /* '\1f464' */
  521. i.basic.icon.community:before {
  522. content: '\e814';
  523. }
  524. /* '' */
  525. i.basic.icon.users:before {
  526. content: '👥';
  527. }
  528. /* '\1f465' */
  529. i.basic.icon.id:before {
  530. content: '\e722';
  531. }
  532. /* '' */
  533. i.basic.icon.url:before {
  534. content: '🔗';
  535. }
  536. /* '\1f517' */
  537. i.basic.icon.zoom.in:before {
  538. content: '\e750';
  539. }
  540. /* '' */
  541. i.basic.icon.zoom.out:before {
  542. content: '\e751';
  543. }
  544. /* '' */
  545. /*--------------
  546. Spacing Fix
  547. ---------------*/
  548. /* dropdown arrows are to the right */
  549. i.dropdown.basic.icon {
  550. margin: 0em 0em 0em 0.5em;
  551. }
  552. /* stars are usually consecutive */
  553. i.basic.icon.star {
  554. width: auto;
  555. margin: 0em;
  556. }
  557. /* left side basic.icons */
  558. i.basic.icon.left,
  559. i.basic.icon.left,
  560. i.basic.icon.left {
  561. width: auto;
  562. margin: 0em 0.5em 0em 0em;
  563. }
  564. /* right side basic.icons */
  565. i.basic.icon.search,
  566. i.basic.icon.up,
  567. i.basic.icon.down,
  568. i.basic.icon.right {
  569. width: auto;
  570. margin: 0em 0em 0em 0.5em;
  571. }
  572. /*--------------
  573. Aliases
  574. ---------------*/
  575. /* aliases for convenience */
  576. i.basic.icon.delete:before {
  577. content: '\e80d';
  578. }
  579. /* '' */
  580. i.basic.icon.dropdown:before {
  581. content: '\25be';
  582. }
  583. /* '▾' */
  584. i.basic.icon.help:before {
  585. content: '\e704';
  586. }
  587. /* '' */
  588. i.basic.icon.info:before {
  589. content: '\e705';
  590. }
  591. /* '' */
  592. i.basic.icon.error:before {
  593. content: '\e80d';
  594. }
  595. /* '' */
  596. i.basic.icon.dislike:before {
  597. content: '\2661';
  598. }
  599. /* '♡' */
  600. i.basic.icon.like:before {
  601. content: '\2665';
  602. }
  603. /* '♥' */
  604. i.basic.icon.eye:before {
  605. content: '\e80f';
  606. }
  607. /* '' */
  608. i.basic.icon.eye.hidden:before {
  609. content: '\e70b';
  610. }
  611. /* '' */
  612. i.basic.icon.date:before {
  613. content: '📅';
  614. }
  615. /* '\1f4c5' */
  616. /*******************************
  617. States
  618. *******************************/
  619. i.basic.icon.hover {
  620. opacity: 1;
  621. }
  622. i.basic.icon.active {
  623. opacity: 1;
  624. }
  625. i.emphasized.basic.icon {
  626. opacity: 1;
  627. }
  628. i.basic.icon.disabled {
  629. opacity: 0.3;
  630. }
  631. /*******************************
  632. Variations
  633. *******************************/
  634. /*-------------------
  635. Link
  636. --------------------*/
  637. i.link.basic.icon {
  638. cursor: pointer;
  639. opacity: 0.7;
  640. -webkit-transition: opacity 0.3s ease-out;
  641. -moz-transition: opacity 0.3s ease-out;
  642. -o-transition: opacity 0.3s ease-out;
  643. -ms-transition: opacity 0.3s ease-out;
  644. transition: opacity 0.3s ease-out;
  645. }
  646. .link.basic.icon:hover {
  647. opacity: 1 !important;
  648. }
  649. /*-------------------
  650. Circular
  651. --------------------*/
  652. i.circular.basic.icon {
  653. -webkit-border-radius: 500px !important;
  654. -moz-border-radius: 500px !important;
  655. border-radius: 500px !important;
  656. padding: 0.5em 0em !important;
  657. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  658. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  659. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  660. line-height: 1 !important;
  661. width: 2em !important;
  662. height: 2em !important;
  663. }
  664. i.circular.inverted.basic.icon {
  665. border: none;
  666. -webkit-box-shadow: none;
  667. -moz-box-shadow: none;
  668. box-shadow: none;
  669. }
  670. /*-------------------
  671. Flipped
  672. --------------------*/
  673. i.vertically.flipped.basic.icon {
  674. -webkit-transform: scale(1, -1);
  675. -moz-transform: scale(1, -1);
  676. -o-transform: scale(1, -1);
  677. -ms-transform: scale(1, -1);
  678. transform: scale(1, -1);
  679. }
  680. i.horizontally.flipped.basic.icon {
  681. -webkit-transform: scale(-1, 1);
  682. -moz-transform: scale(-1, 1);
  683. -o-transform: scale(-1, 1);
  684. -ms-transform: scale(-1, 1);
  685. transform: scale(-1, 1);
  686. }
  687. /*-------------------
  688. Rotated
  689. --------------------*/
  690. i.left.rotated.basic.icon {
  691. -webkit-transform: rotate(-90deg);
  692. -moz-transform: rotate(-90deg);
  693. -o-transform: rotate(-90deg);
  694. -ms-transform: rotate(-90deg);
  695. transform: rotate(-90deg);
  696. }
  697. i.right.rotated.basic.icon {
  698. -webkit-transform: rotate(90deg);
  699. -moz-transform: rotate(90deg);
  700. -o-transform: rotate(90deg);
  701. -ms-transform: rotate(90deg);
  702. transform: rotate(90deg);
  703. }
  704. /*-------------------
  705. Square
  706. --------------------*/
  707. i.square.basic.icon {
  708. width: 2em;
  709. height: 2em;
  710. padding: 0.5em 0.35em !important;
  711. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  712. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  713. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  714. vertical-align: baseline;
  715. }
  716. i.square.basic.icon:before {
  717. vertical-align: middle;
  718. }
  719. i.square.inverted.basic.icon {
  720. border: none;
  721. -webkit-box-shadow: none;
  722. -moz-box-shadow: none;
  723. box-shadow: none;
  724. }
  725. /*-------------------
  726. Inverted
  727. --------------------*/
  728. i.inverted.basic.icon {
  729. background-color: #222222;
  730. color: #FFFFFF;
  731. }
  732. /*-------------------
  733. Colors
  734. --------------------*/
  735. i.blue.basic.icon {
  736. color: #6ECFF5 !important;
  737. }
  738. i.black.basic.icon {
  739. color: #5C6166 !important;
  740. }
  741. i.green.basic.icon {
  742. color: #A1CF64 !important;
  743. }
  744. i.red.basic.icon {
  745. color: #D95C5C !important;
  746. }
  747. i.purple.basic.icon {
  748. color: #564F8A !important;
  749. }
  750. i.teal.basic.icon {
  751. color: #00B5AD !important;
  752. }
  753. /*-------------------
  754. Inverted Colors
  755. --------------------*/
  756. i.inverted.black.basic.icon {
  757. background-color: #5C6166 !important;
  758. color: #FFFFFF !important;
  759. }
  760. i.inverted.blue.basic.icon {
  761. background-color: #6ECFF5 !important;
  762. color: #FFFFFF !important;
  763. }
  764. i.inverted.green.basic.icon {
  765. background-color: #A1CF64 !important;
  766. color: #FFFFFF !important;
  767. }
  768. i.inverted.red.basic.icon {
  769. background-color: #D95C5C !important;
  770. color: #FFFFFF !important;
  771. }
  772. i.inverted.purple.basic.icon {
  773. background-color: #564F8A !important;
  774. color: #FFFFFF !important;
  775. }
  776. i.inverted.teal.basic.icon {
  777. background-color: #00B5AD !important;
  778. color: #FFFFFF !important;
  779. }
  780. /*-------------------
  781. Sizes
  782. --------------------*/
  783. i.small.basic.icon {
  784. font-size: 0.875em;
  785. }
  786. i.basic.icon {
  787. font-size: 1em;
  788. }
  789. i.large.basic.icon {
  790. font-size: 1.5em;
  791. margin-right: 0.2em;
  792. vertical-align: middle;
  793. }
  794. i.big.basic.icon {
  795. font-size: 2em;
  796. margin-right: 0.5em;
  797. vertical-align: middle;
  798. }
  799. i.huge.basic.icon {
  800. font-size: 4em;
  801. margin-right: 0.75em;
  802. vertical-align: middle;
  803. }
  804. i.massive.basic.icon {
  805. font-size: 8em;
  806. margin-right: 1em;
  807. vertical-align: middle;
  808. }