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.

1122 lines
14 KiB

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