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.

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