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.

1114 lines
14 KiB

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