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.

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