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.

818 lines
14 KiB

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