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.

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