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.

815 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.bookmark:before {
  228. content: '🔖';
  229. }
  230. /* '\1f516' */
  231. i.icon.calendar:before {
  232. content: '📅';
  233. }
  234. /* '\1f4c5' */
  235. i.icon.cancel:before {
  236. content: '\2716';
  237. }
  238. /* '✖' */
  239. i.icon.close:before {
  240. content: '\e80d';
  241. }
  242. /* '' */
  243. i.icon.color:before {
  244. content: '\e794';
  245. }
  246. /* '' */
  247. i.icon.chat:before {
  248. content: '\e720';
  249. }
  250. /* '' */
  251. i.icon.check:before {
  252. content: '\2611';
  253. }
  254. /* '☑' */
  255. i.icon.time:before {
  256. content: '🕔';
  257. }
  258. /* '\1f554' */
  259. i.icon.cloud:before {
  260. content: '\2601';
  261. }
  262. /* '☁' */
  263. i.icon.code:before {
  264. content: '\e714';
  265. }
  266. /* '' */
  267. i.icon.email:before {
  268. content: '\40';
  269. }
  270. /* '@' */
  271. i.icon.settings:before {
  272. content: '\26ef';
  273. }
  274. /* '⛯' */
  275. i.icon.setting:before {
  276. content: '\2699';
  277. }
  278. /* '⚙' */
  279. i.icon.comment:before {
  280. content: '\e802';
  281. }
  282. /* '' */
  283. i.icon.clockwise.counter:before {
  284. content: '\27f2';
  285. }
  286. /* '⟲' */
  287. i.icon.clockwise:before {
  288. content: '\27f3';
  289. }
  290. /* '⟳' */
  291. i.icon.cube:before {
  292. content: '\e807';
  293. }
  294. /* '' */
  295. i.icon.direction:before {
  296. content: '\27a2';
  297. }
  298. /* '➢' */
  299. i.icon.doc:before {
  300. content: '📄';
  301. }
  302. /* '\1f4c4' */
  303. i.icon.docs:before {
  304. content: '\e736';
  305. }
  306. /* '' */
  307. i.icon.dollar:before {
  308. content: '💵';
  309. }
  310. /* '\1f4b5' */
  311. i.icon.paint:before {
  312. content: '\e7b5';
  313. }
  314. /* '' */
  315. i.icon.edit:before {
  316. content: '\270d';
  317. }
  318. /* '✍' */
  319. i.icon.eject:before {
  320. content: '\2ecf';
  321. }
  322. /* '⻏' */
  323. i.icon.export:before {
  324. content: '\e715';
  325. }
  326. /* '' */
  327. i.icon.hide:before {
  328. content: '\e80f';
  329. }
  330. /* '' */
  331. i.icon.unhide:before {
  332. content: '\e70b';
  333. }
  334. /* '' */
  335. i.icon.facebook:before {
  336. content: '\f301';
  337. }
  338. /* '' */
  339. i.icon.fast-forward:before {
  340. content: '\e804';
  341. }
  342. /* '' */
  343. i.icon.fire:before {
  344. content: '🔥';
  345. }
  346. /* '\1f525' */
  347. i.icon.flag:before {
  348. content: '\2691';
  349. }
  350. /* '⚑' */
  351. i.icon.lightning:before {
  352. content: '\26a1';
  353. }
  354. /* '⚡' */
  355. i.icon.lab:before {
  356. content: '\68';
  357. }
  358. /* 'h' */
  359. i.icon.flight:before {
  360. content: '\2708';
  361. }
  362. /* '✈' */
  363. i.icon.forward:before {
  364. content: '\27a6';
  365. }
  366. /* '➦' */
  367. i.icon.gift:before {
  368. content: '🎁';
  369. }
  370. /* '\1f381' */
  371. i.icon.github:before {
  372. content: '\f308';
  373. }
  374. /* '' */
  375. i.icon.globe:before {
  376. content: '\e817';
  377. }
  378. /* '' */
  379. i.icon.headphones:before {
  380. content: '🎧';
  381. }
  382. /* '\1f3a7' */
  383. i.icon.question:before {
  384. content: '\2753';
  385. }
  386. /* '❓' */
  387. i.icon.home:before {
  388. content: '\2302';
  389. }
  390. /* '⌂' */
  391. i.icon.i:before {
  392. content: '\2139';
  393. }
  394. /* 'ℹ' */
  395. i.icon.idea:before {
  396. content: '💡';
  397. }
  398. /* '\1f4a1' */
  399. i.icon.open:before {
  400. content: '🔗';
  401. }
  402. /* '\1f517' */
  403. i.icon.content:before {
  404. content: '\e782';
  405. }
  406. /* '' */
  407. i.icon.location:before {
  408. content: '\e724';
  409. }
  410. /* '' */
  411. i.icon.mail:before {
  412. content: '\2709';
  413. }
  414. /* '✉' */
  415. i.icon.mic:before {
  416. content: '🎤';
  417. }
  418. /* '\1f3a4' */
  419. i.icon.minus:before {
  420. content: '\2d';
  421. }
  422. /* '-' */
  423. i.icon.money:before {
  424. content: '💰';
  425. }
  426. /* '\1f4b0' */
  427. i.icon.off:before {
  428. content: '\e78e';
  429. }
  430. /* '' */
  431. i.icon.pause:before {
  432. content: '\e808';
  433. }
  434. /* '' */
  435. i.icon.photos:before {
  436. content: '\e812';
  437. }
  438. /* '' */
  439. i.icon.photo:before {
  440. content: '🌄';
  441. }
  442. /* '\1f304' */
  443. i.icon.pin:before {
  444. content: '📌';
  445. }
  446. /* '\1f4cc' */
  447. i.icon.play:before {
  448. content: '\e809';
  449. }
  450. /* '' */
  451. i.icon.plus:before {
  452. content: '\2b';
  453. }
  454. /* '+' */
  455. i.icon.print:before {
  456. content: '\e716';
  457. }
  458. /* '' */
  459. i.icon.rss:before {
  460. content: '\e73a';
  461. }
  462. /* '' */
  463. i.icon.search:before {
  464. content: '🔍';
  465. }
  466. /* '\1f50d' */
  467. i.icon.shuffle:before {
  468. content: '\e803';
  469. }
  470. /* '' */
  471. i.icon.tag:before {
  472. content: '\e80a';
  473. }
  474. /* '' */
  475. i.icon.tags:before {
  476. content: '\e70d';
  477. }
  478. /* '' */
  479. i.icon.terminal:before {
  480. content: '\e7ac';
  481. }
  482. /* '' */
  483. i.icon.thumbs.down:before {
  484. content: '👎';
  485. }
  486. /* '\1f44e' */
  487. i.icon.thumbs.up:before {
  488. content: '👍';
  489. }
  490. /* '\1f44d' */
  491. i.icon.to-end:before {
  492. content: '\e806';
  493. }
  494. /* '' */
  495. i.icon.to-start:before {
  496. content: '\e805';
  497. }
  498. /* '' */
  499. i.icon.top.list:before {
  500. content: '🏆';
  501. }
  502. /* '\1f3c6' */
  503. i.icon.trash:before {
  504. content: '\e729';
  505. }
  506. /* '' */
  507. i.icon.twitter:before {
  508. content: '\f303';
  509. }
  510. /* '' */
  511. i.icon.upload:before {
  512. content: '\e711';
  513. }
  514. /* '' */
  515. i.icon.user.add:before {
  516. content: '\e700';
  517. }
  518. /* '' */
  519. i.icon.user:before {
  520. content: '👤';
  521. }
  522. /* '\1f464' */
  523. i.icon.community:before {
  524. content: '\e814';
  525. }
  526. /* '' */
  527. i.icon.users:before {
  528. content: '👥';
  529. }
  530. /* '\1f465' */
  531. i.icon.id:before {
  532. content: '\e722';
  533. }
  534. /* '' */
  535. i.icon.url:before {
  536. content: '🔗';
  537. }
  538. /* '\1f517' */
  539. i.icon.zoom.in:before {
  540. content: '\e750';
  541. }
  542. /* '' */
  543. i.icon.zoom.out:before {
  544. content: '\e751';
  545. }
  546. /* '' */
  547. /*--------------
  548. Spacing Fix
  549. ---------------*/
  550. /* dropdown arrows are to the right */
  551. i.dropdown.icon {
  552. margin: 0em 0em 0em 0.5em;
  553. }
  554. /* stars are usually consecutive */
  555. i.icon.star {
  556. width: auto;
  557. margin: 0em;
  558. }
  559. /* left side icons */
  560. i.icon.left,
  561. i.icon.left,
  562. i.icon.left {
  563. width: auto;
  564. margin: 0em 0.5em 0em 0em;
  565. }
  566. /* right side icons */
  567. i.icon.search,
  568. i.icon.up,
  569. i.icon.down,
  570. i.icon.right {
  571. width: auto;
  572. margin: 0em 0em 0em 0.5em;
  573. }
  574. /*--------------
  575. Aliases
  576. ---------------*/
  577. /* aliases for convenience */
  578. i.icon.delete:before {
  579. content: '\e80d';
  580. }
  581. /* '' */
  582. i.icon.dropdown:before {
  583. content: '\25be';
  584. }
  585. /* '▾' */
  586. i.icon.help:before {
  587. content: '\e704';
  588. }
  589. /* '' */
  590. i.icon.info:before {
  591. content: '\e705';
  592. }
  593. /* '' */
  594. i.icon.error:before {
  595. content: '\e80d';
  596. }
  597. /* '' */
  598. i.icon.dislike:before {
  599. content: '\2661';
  600. }
  601. /* '♡' */
  602. i.icon.like:before {
  603. content: '\2665';
  604. }
  605. /* '♥' */
  606. i.icon.eye:before {
  607. content: '\e80f';
  608. }
  609. /* '' */
  610. i.icon.eye.hidden:before {
  611. content: '\e70b';
  612. }
  613. /* '' */
  614. i.icon.date:before {
  615. content: '📅';
  616. }
  617. /* '\1f4c5' */
  618. /*******************************
  619. States
  620. *******************************/
  621. i.icon.hover {
  622. opacity: 1;
  623. }
  624. i.icon.active {
  625. opacity: 1;
  626. }
  627. i.emphasized.icon {
  628. opacity: 1;
  629. }
  630. i.icon.disabled {
  631. opacity: 0.3;
  632. }
  633. /*******************************
  634. Variations
  635. *******************************/
  636. /*-------------------
  637. Link
  638. --------------------*/
  639. i.link.icon {
  640. cursor: pointer;
  641. opacity: 0.7;
  642. -webkit-transition: opacity 0.3s ease-out;
  643. -moz-transition: opacity 0.3s ease-out;
  644. -o-transition: opacity 0.3s ease-out;
  645. -ms-transition: opacity 0.3s ease-out;
  646. transition: opacity 0.3s ease-out;
  647. }
  648. .link.icon:hover {
  649. opacity: 1 !important;
  650. }
  651. /*-------------------
  652. Circular
  653. --------------------*/
  654. i.circular.icon {
  655. -webkit-border-radius: 500px;
  656. -moz-border-radius: 500px;
  657. border-radius: 500px;
  658. padding: 0.5em 0.35em !important;
  659. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  660. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  661. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  662. line-height: 1 !important;
  663. width: 2em !important;
  664. height: 2em !important;
  665. }
  666. i.circular.icon:before {
  667. vertical-align: middle;
  668. }
  669. i.circular.inverted.icon {
  670. border: none;
  671. -webkit-box-shadow: none;
  672. -moz-box-shadow: none;
  673. box-shadow: none;
  674. }
  675. /*-------------------
  676. Flipped
  677. --------------------*/
  678. i.vertically.flipped.icon {
  679. -webkit-transform: scale(1, -1);
  680. -moz-transform: scale(1, -1);
  681. -o-transform: scale(1, -1);
  682. -ms-transform: scale(1, -1);
  683. transform: scale(1, -1);
  684. }
  685. i.horizontally.flipped.icon {
  686. -webkit-transform: scale(-1, 1);
  687. -moz-transform: scale(-1, 1);
  688. -o-transform: scale(-1, 1);
  689. -ms-transform: scale(-1, 1);
  690. transform: scale(-1, 1);
  691. }
  692. /*-------------------
  693. Rotated
  694. --------------------*/
  695. i.left.rotated.icon {
  696. -webkit-transform: rotate(-90deg);
  697. -moz-transform: rotate(-90deg);
  698. -o-transform: rotate(-90deg);
  699. -ms-transform: rotate(-90deg);
  700. transform: rotate(-90deg);
  701. }
  702. i.right.rotated.icon {
  703. -webkit-transform: rotate(90deg);
  704. -moz-transform: rotate(90deg);
  705. -o-transform: rotate(90deg);
  706. -ms-transform: rotate(90deg);
  707. transform: rotate(90deg);
  708. }
  709. /*-------------------
  710. Square
  711. --------------------*/
  712. i.square.icon {
  713. width: 2em;
  714. height: 2em;
  715. padding: 0.5em 0.35em !important;
  716. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  717. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  718. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  719. vertical-align: baseline;
  720. }
  721. i.square.icon:before {
  722. vertical-align: middle;
  723. }
  724. i.square.inverted.icon {
  725. border: none;
  726. -webkit-box-shadow: none;
  727. -moz-box-shadow: none;
  728. box-shadow: none;
  729. }
  730. /*-------------------
  731. Inverted
  732. --------------------*/
  733. i.inverted.icon {
  734. background-color: #222222;
  735. color: #FFFFFF;
  736. }
  737. /*-------------------
  738. Colors
  739. --------------------*/
  740. i.blue.icon {
  741. color: #6ECFF5 !important;
  742. }
  743. i.black.icon {
  744. color: #5C6166 !important;
  745. }
  746. i.green.icon {
  747. color: #A1CF64 !important;
  748. }
  749. i.red.icon {
  750. color: #D95C5C !important;
  751. }
  752. i.purple.icon {
  753. color: #564F8A !important;
  754. }
  755. i.teal.icon {
  756. color: #00B5AD !important;
  757. }
  758. /*-------------------
  759. Inverted Colors
  760. --------------------*/
  761. i.inverted.black.icon {
  762. background-color: #5C6166 !important;
  763. color: #FFFFFF !important;
  764. }
  765. i.inverted.blue.icon {
  766. background-color: #6ECFF5 !important;
  767. color: #FFFFFF !important;
  768. }
  769. i.inverted.green.icon {
  770. background-color: #A1CF64 !important;
  771. color: #FFFFFF !important;
  772. }
  773. i.inverted.red.icon {
  774. background-color: #D95C5C !important;
  775. color: #FFFFFF !important;
  776. }
  777. i.inverted.purple.icon {
  778. background-color: #564F8A !important;
  779. color: #FFFFFF !important;
  780. }
  781. i.inverted.teal.icon {
  782. background-color: #00B5AD !important;
  783. color: #FFFFFF !important;
  784. }
  785. /*-------------------
  786. Sizes
  787. --------------------*/
  788. i.small.icon {
  789. font-size: 0.875em;
  790. }
  791. i.icon {
  792. font-size: 1em;
  793. }
  794. i.large.icon {
  795. font-size: 2em;
  796. margin-right: 0.5em;
  797. vertical-align: middle;
  798. }
  799. i.huge.icon {
  800. font-size: 4em;
  801. margin-right: 0.75em;
  802. vertical-align: middle;
  803. }
  804. i.massive.icon {
  805. font-size: 8em;
  806. margin-right: 1em;
  807. vertical-align: middle;
  808. }
  809. /*--------------
  810. Sketchy Sizing
  811. ---------------*/
  812. i.sketchy.circular.icon,
  813. i.sketchy.square.icon {
  814. padding: 0.35em !important;
  815. }