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.

781 lines
13 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. vertical-align: middle;
  559. }
  560. /* left side icons */
  561. i.icon.left,
  562. i.icon.left,
  563. i.icon.left {
  564. width: auto;
  565. margin: 0em 0.5em 0em 0em;
  566. }
  567. /* right side icons */
  568. i.icon.search,
  569. i.icon.up,
  570. i.icon.down,
  571. i.icon.right {
  572. width: auto;
  573. margin: 0em 0em 0em 0.5em;
  574. }
  575. /*--------------
  576. Aliases
  577. ---------------*/
  578. /* aliases for convenience */
  579. i.icon.delete:before {
  580. content: '\e80d';
  581. }
  582. /* '' */
  583. i.icon.dropdown:before {
  584. content: '\25be';
  585. }
  586. /* '▾' */
  587. i.icon.help:before {
  588. content: '\e704';
  589. }
  590. /* '' */
  591. i.icon.info:before {
  592. content: '\e705';
  593. }
  594. /* '' */
  595. i.icon.error:before {
  596. content: '\e80d';
  597. }
  598. /* '' */
  599. i.icon.dislike:before {
  600. content: '\2661';
  601. }
  602. /* '♡' */
  603. i.icon.like:before {
  604. content: '\2665';
  605. }
  606. /* '♥' */
  607. i.icon.eye:before {
  608. content: '\e80f';
  609. }
  610. /* '' */
  611. i.icon.eye.hidden:before {
  612. content: '\e70b';
  613. }
  614. /* '' */
  615. i.icon.date:before {
  616. content: '📅';
  617. }
  618. /* '\1f4c5' */
  619. /*******************************
  620. States
  621. *******************************/
  622. i.icon.hover {
  623. opacity: 1;
  624. }
  625. i.icon.active {
  626. opacity: 1;
  627. }
  628. i.emphasized.icon {
  629. opacity: 1;
  630. }
  631. i.icon.disabled {
  632. opacity: 0.3;
  633. }
  634. /*******************************
  635. Variations
  636. *******************************/
  637. /*-------------------
  638. Link
  639. --------------------*/
  640. i.link.icon {
  641. cursor: pointer;
  642. opacity: 0.7;
  643. -webkit-transition: opacity 0.3s ease-out;
  644. -moz-transition: opacity 0.3s ease-out;
  645. -o-transition: opacity 0.3s ease-out;
  646. -ms-transition: opacity 0.3s ease-out;
  647. transition: opacity 0.3s ease-out;
  648. }
  649. .link.icon:hover {
  650. opacity: 1 !important;
  651. }
  652. /*-------------------
  653. Circular
  654. --------------------*/
  655. i.circular.icon {
  656. -webkit-border-radius: 500px;
  657. -moz-border-radius: 500px;
  658. border-radius: 500px;
  659. padding: 0.5em 0.35em !important;
  660. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  661. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  662. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  663. width: 2em;
  664. height: 2em;
  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. Square
  677. --------------------*/
  678. i.square.icon {
  679. width: 2em;
  680. height: 2em;
  681. padding: 0.5em 0.35em !important;
  682. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  683. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  684. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  685. vertical-align: baseline;
  686. }
  687. i.square.icon:before {
  688. vertical-align: middle;
  689. }
  690. i.square.inverted.icon {
  691. border: none;
  692. -webkit-box-shadow: none;
  693. -moz-box-shadow: none;
  694. box-shadow: none;
  695. }
  696. /*-------------------
  697. Inverted
  698. --------------------*/
  699. i.inverted.icon {
  700. background-color: #222222;
  701. color: #FFFFFF;
  702. }
  703. /*-------------------
  704. Colors
  705. --------------------*/
  706. i.blue.icon {
  707. color: #6ECFF5 !important;
  708. }
  709. i.black.icon {
  710. color: #5C6166 !important;
  711. }
  712. i.green.icon {
  713. color: #A1CF64 !important;
  714. }
  715. i.red.icon {
  716. color: #EF4D6D !important;
  717. }
  718. i.purple.icon {
  719. color: #564F8A !important;
  720. }
  721. i.teal.icon {
  722. color: #00B5AD !important;
  723. }
  724. /*-------------------
  725. Inverted Colors
  726. --------------------*/
  727. i.inverted.black.icon {
  728. background-color: #5C6166 !important;
  729. color: #FFFFFF !important;
  730. }
  731. i.inverted.blue.icon {
  732. background-color: #6ECFF5 !important;
  733. color: #FFFFFF !important;
  734. }
  735. i.inverted.green.icon {
  736. background-color: #A1CF64 !important;
  737. color: #FFFFFF !important;
  738. }
  739. i.inverted.red.icon {
  740. background-color: #EF4D6D !important;
  741. color: #FFFFFF !important;
  742. }
  743. i.inverted.purple.icon {
  744. background-color: #564F8A !important;
  745. color: #FFFFFF !important;
  746. }
  747. i.inverted.teal.icon {
  748. background-color: #00B5AD !important;
  749. color: #FFFFFF !important;
  750. }
  751. /*-------------------
  752. Sizes
  753. --------------------*/
  754. i.small.icon {
  755. font-size: 0.875em;
  756. }
  757. i.icon {
  758. font-size: 1em;
  759. }
  760. i.large.icon {
  761. font-size: 3em;
  762. margin-right: 0.5em;
  763. vertical-align: middle;
  764. }
  765. i.huge.icon {
  766. font-size: 6em;
  767. margin-right: 0.75em;
  768. vertical-align: middle;
  769. }
  770. i.massive.icon {
  771. font-size: 12em;
  772. margin-right: 1em;
  773. vertical-align: middle;
  774. }
  775. /*--------------
  776. Sketchy Sizing
  777. ---------------*/
  778. i.sketchy.circular.icon,
  779. i.sketchy.square.icon {
  780. padding: 0.35em !important;
  781. }