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.

478 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:
  18. url(../fonts/basic.icons.eot?#iefix) format('embedded-opentype'),
  19. url(../fonts/basic.icons.woff) format('woff'),
  20. url(../fonts/basic.icons.ttf) format('truetype'),
  21. url(../fonts/basic.icons.svg#basic.icons) format('svg')
  22. ;
  23. font-style: normal;
  24. font-weight: normal;
  25. font-variant: normal;
  26. text-decoration: inherit;
  27. text-transform: none;
  28. }
  29. i.basic.icon {
  30. display: inline-block;
  31. opacity: 0.75;
  32. margin: 0em 0.25em 0em 0em;
  33. width: 1.23em;
  34. height: 1em;
  35. font-family: 'Basic Icons';
  36. font-style: normal;
  37. line-height: 1;
  38. font-weight: normal;
  39. text-decoration: inherit;
  40. text-align: center;
  41. speak: none;
  42. -webkit-box-sizing: border-box;
  43. -moz-box-sizing: border-box;
  44. -ms-box-sizing: border-box;
  45. box-sizing: border-box;
  46. -webkit-font-smoothing: antialiased;
  47. -moz-font-smoothing: antialiased;
  48. font-smoothing: antialiased;
  49. }
  50. /* basic.icons available */
  51. i.basic.icon.circle.attention:before { content: '\2757'; } /* 'โ—' */
  52. i.basic.icon.circle.help:before { content: '\e704'; } /* '๎œ„' */
  53. i.basic.icon.circle.info:before { content: '\e705'; } /* '๎œ…' */
  54. i.basic.icon.add:before { content: '\2795'; } /* 'โž•' */
  55. i.basic.icon.chart:before { content: '๐Ÿ“ˆ'; } /* '\1f4c8' */
  56. i.basic.icon.chart.bar:before { content: '๐Ÿ“Š'; } /* '\1f4ca' */
  57. i.basic.icon.chart.pie:before { content: '\e7a2'; } /* '๎žข' */
  58. i.basic.icon.resize.full:before { content: '\e744'; } /* '๎„' */
  59. i.basic.icon.resize.horizontal:before { content: '\2b0d'; } /* 'โฌ' */
  60. i.basic.icon.resize.small:before { content: '\e746'; } /* '๎†' */
  61. i.basic.icon.resize.vertical:before { content: '\2b0c'; } /* 'โฌŒ' */
  62. i.basic.icon.down:before { content: '\2193'; } /* 'โ†“' */
  63. i.basic.icon.down.triangle:before { content: '\25be'; } /* 'โ–พ' */
  64. i.basic.icon.down.arrow:before { content: '\e75c'; } /* '๎œ' */
  65. i.basic.icon.left:before { content: '\2190'; } /* 'โ†' */
  66. i.basic.icon.left.triangle:before { content: '\25c2'; } /* 'โ—‚' */
  67. i.basic.icon.left.arrow:before { content: '\e75d'; } /* '๎' */
  68. i.basic.icon.right:before { content: '\2192'; } /* 'โ†’' */
  69. i.basic.icon.right.triangle:before { content: '\25b8'; } /* 'โ–ธ' */
  70. i.basic.icon.right.arrow:before { content: '\e75e'; } /* '๎ž' */
  71. i.basic.icon.up:before { content: '\2191'; } /* 'โ†‘' */
  72. i.basic.icon.up.triangle:before { content: '\25b4'; } /* 'โ–ด' */
  73. i.basic.icon.up.arrow:before { content: '\e75f'; } /* '๎Ÿ' */
  74. i.basic.icon.folder:before { content: '\e810'; } /* '๎ ' */
  75. i.basic.icon.open.folder:before { content: '๐Ÿ“‚'; } /* '\1f4c2' */
  76. i.basic.icon.globe:before { content: '๐Œ'; } /* '\1d30d' */
  77. i.basic.icon.desk.globe:before { content: '๐ŸŒ'; } /* '\1f310' */
  78. i.basic.icon.star:before { content: '\e801'; } /* '๎ ' */
  79. i.basic.icon.star.empty:before { content: '\e800'; } /* '๎ €' */
  80. i.basic.icon.star.half:before { content: '\e701'; } /* '๎œ' */
  81. i.basic.icon.lock:before { content: '๐Ÿ”’'; } /* '\1f512' */
  82. i.basic.icon.unlock:before { content: '๐Ÿ”“'; } /* '\1f513' */
  83. i.basic.icon.layout.grid:before { content: '\e80c'; } /* '๎ Œ' */
  84. i.basic.icon.layout.block:before { content: '\e708'; } /* '๎œˆ' */
  85. i.basic.icon.layout.list:before { content: '\e80b'; } /* '๎ ‹' */
  86. i.basic.icon.heart.empty:before { content: '\2661'; } /* 'โ™ก' */
  87. i.basic.icon.heart:before { content: '\2665'; } /* 'โ™ฅ' */
  88. i.basic.icon.asterisk:before { content: '\2731'; } /* 'โœฑ' */
  89. i.basic.icon.attachment:before { content: '๐Ÿ“Ž'; } /* '\1f4ce' */
  90. i.basic.icon.attention:before { content: '\26a0'; } /* 'โš ' */
  91. i.basic.icon.trophy:before { content: '๐Ÿ‰'; } /* '\1f3c9' */
  92. i.basic.icon.barcode:before { content: '\e792'; } /* '๎ž’' */
  93. i.basic.icon.cart:before { content: '\e813'; } /* '๎ “' */
  94. i.basic.icon.block:before { content: '๐Ÿšซ'; } /* '\1f6ab' */
  95. i.basic.icon.book:before { content: '๐Ÿ“–'; }
  96. i.basic.icon.bookmark:before { content: '๐Ÿ”–'; } /* '\1f516' */
  97. i.basic.icon.calendar:before { content: '๐Ÿ“…'; } /* '\1f4c5' */
  98. i.basic.icon.cancel:before { content: '\2716'; } /* 'โœ–' */
  99. i.basic.icon.close:before { content: '\e80d'; } /* '๎ ' */
  100. i.basic.icon.color:before { content: '\e794'; } /* '๎ž”' */
  101. i.basic.icon.chat:before { content: '\e720'; } /* '๎œ ' */
  102. i.basic.icon.check:before { content: '\2611'; } /* 'โ˜‘' */
  103. i.basic.icon.time:before { content: '๐Ÿ•”'; } /* '\1f554' */
  104. i.basic.icon.cloud:before { content: '\2601'; } /* 'โ˜' */
  105. i.basic.icon.code:before { content: '\e714'; } /* '๎œ”' */
  106. i.basic.icon.email:before { content: '\40'; } /* '@' */
  107. i.basic.icon.settings:before { content: '\26ef'; } /* 'โ›ฏ' */
  108. i.basic.icon.setting:before { content: '\2699'; } /* 'โš™' */
  109. i.basic.icon.comment:before { content: '\e802'; } /* '๎ ‚' */
  110. i.basic.icon.clockwise.counter:before { content: '\27f2'; } /* 'โŸฒ' */
  111. i.basic.icon.clockwise:before { content: '\27f3'; } /* 'โŸณ' */
  112. i.basic.icon.cube:before { content: '\e807'; } /* '๎ ‡' */
  113. i.basic.icon.direction:before { content: '\27a2'; } /* 'โžข' */
  114. i.basic.icon.doc:before { content: '๐Ÿ“„'; } /* '\1f4c4' */
  115. i.basic.icon.docs:before { content: '\e736'; } /* '๎œถ' */
  116. i.basic.icon.dollar:before { content: '๐Ÿ’ต'; } /* '\1f4b5' */
  117. i.basic.icon.paint:before { content: '\e7b5'; } /* '๎žต' */
  118. i.basic.icon.edit:before { content: '\270d'; } /* 'โœ' */
  119. i.basic.icon.eject:before { content: '\2ecf'; } /* 'โป' */
  120. i.basic.icon.export:before { content: '\e715'; } /* '๎œ•' */
  121. i.basic.icon.hide:before { content: '\e80f'; } /* '๎ ' */
  122. i.basic.icon.unhide:before { content: '\e70b'; } /* '๎œ‹' */
  123. i.basic.icon.facebook:before { content: '\f301'; } /* '๏Œ' */
  124. i.basic.icon.fast-forward:before { content: '\e804'; } /* '๎ „' */
  125. i.basic.icon.fire:before { content: '๐Ÿ”ฅ'; } /* '\1f525' */
  126. i.basic.icon.flag:before { content: '\2691'; } /* 'โš‘' */
  127. i.basic.icon.lightning:before { content: '\26a1'; } /* 'โšก' */
  128. i.basic.icon.lab:before { content: '\68'; } /* 'h' */
  129. i.basic.icon.flight:before { content: '\2708'; } /* 'โœˆ' */
  130. i.basic.icon.forward:before { content: '\27a6'; } /* 'โžฆ' */
  131. i.basic.icon.gift:before { content: '๐ŸŽ'; } /* '\1f381' */
  132. i.basic.icon.github:before { content: '\f308'; } /* '๏Œˆ' */
  133. i.basic.icon.globe:before { content: '\e817'; } /* '๎ —' */
  134. i.basic.icon.headphones:before { content: '๐ŸŽง'; } /* '\1f3a7' */
  135. i.basic.icon.question:before { content: '\2753'; } /* 'โ“' */
  136. i.basic.icon.home:before { content: '\2302'; } /* 'โŒ‚' */
  137. i.basic.icon.i:before { content: '\2139'; } /* 'โ„น' */
  138. i.basic.icon.idea:before { content: '๐Ÿ’ก'; } /* '\1f4a1' */
  139. i.basic.icon.open:before { content: '๐Ÿ”—'; } /* '\1f517' */
  140. i.basic.icon.content:before { content: '\e782'; } /* '๎ž‚' */
  141. i.basic.icon.location:before { content: '\e724'; } /* '๎œค' */
  142. i.basic.icon.mail:before { content: '\2709'; } /* 'โœ‰' */
  143. i.basic.icon.mic:before { content: '๐ŸŽค'; } /* '\1f3a4' */
  144. i.basic.icon.minus:before { content: '\2d'; } /* '-' */
  145. i.basic.icon.money:before { content: '๐Ÿ’ฐ'; } /* '\1f4b0' */
  146. i.basic.icon.off:before { content: '\e78e'; } /* '๎žŽ' */
  147. i.basic.icon.pause:before { content: '\e808'; } /* '๎ ˆ' */
  148. i.basic.icon.photos:before { content: '\e812'; } /* '๎ ’' */
  149. i.basic.icon.photo:before { content: '๐ŸŒ„'; } /* '\1f304' */
  150. i.basic.icon.pin:before { content: '๐Ÿ“Œ'; } /* '\1f4cc' */
  151. i.basic.icon.play:before { content: '\e809'; } /* '๎ ‰' */
  152. i.basic.icon.plus:before { content: '\2b'; } /* '+' */
  153. i.basic.icon.print:before { content: '\e716'; } /* '๎œ–' */
  154. i.basic.icon.rss:before { content: '\e73a'; } /* '๎œบ' */
  155. i.basic.icon.search:before { content: '๐Ÿ”'; } /* '\1f50d' */
  156. i.basic.icon.shuffle:before { content: '\e803'; } /* '๎ ƒ' */
  157. i.basic.icon.tag:before { content: '\e80a'; } /* '๎ Š' */
  158. i.basic.icon.tags:before { content: '\e70d'; } /* '๎œ' */
  159. i.basic.icon.terminal:before { content: '\e7ac'; } /* '๎žฌ' */
  160. i.basic.icon.thumbs.down:before { content: '๐Ÿ‘Ž'; } /* '\1f44e' */
  161. i.basic.icon.thumbs.up:before { content: '๐Ÿ‘'; } /* '\1f44d' */
  162. i.basic.icon.to-end:before { content: '\e806'; } /* '๎ †' */
  163. i.basic.icon.to-start:before { content: '\e805'; } /* '๎ …' */
  164. i.basic.icon.top.list:before { content: '๐Ÿ†'; } /* '\1f3c6' */
  165. i.basic.icon.trash:before { content: '\e729'; } /* '๎œฉ' */
  166. i.basic.icon.twitter:before { content: '\f303'; } /* '๏Œƒ' */
  167. i.basic.icon.upload:before { content: '\e711'; } /* '๎œ‘' */
  168. i.basic.icon.user.add:before { content: '\e700'; } /* '๎œ€' */
  169. i.basic.icon.user:before { content: '๐Ÿ‘ค'; } /* '\1f464' */
  170. i.basic.icon.community:before { content: '\e814'; } /* '๎ ”' */
  171. i.basic.icon.users:before { content: '๐Ÿ‘ฅ'; } /* '\1f465' */
  172. i.basic.icon.id:before { content: '\e722'; } /* '๎œข' */
  173. i.basic.icon.url:before { content: '๐Ÿ”—'; } /* '\1f517' */
  174. i.basic.icon.zoom.in:before { content: '\e750'; } /* '๎' */
  175. i.basic.icon.zoom.out:before { content: '\e751'; } /* '๎‘' */
  176. /*--------------
  177. Spacing Fix
  178. ---------------*/
  179. /* dropdown arrows are to the right */
  180. i.dropdown.basic.icon {
  181. margin: 0em 0em 0em 0.5em;
  182. }
  183. /* stars are usually consecutive */
  184. i.basic.icon.star {
  185. width: auto;
  186. margin: 0em;
  187. }
  188. /* left side basic.icons */
  189. i.basic.icon.left,
  190. i.basic.icon.left,
  191. i.basic.icon.left {
  192. width: auto;
  193. margin: 0em 0.5em 0em 0em;
  194. }
  195. /* right side basic.icons */
  196. i.basic.icon.search,
  197. i.basic.icon.up,
  198. i.basic.icon.down,
  199. i.basic.icon.right {
  200. width: auto;
  201. margin: 0em 0em 0em 0.5em;
  202. }
  203. /*--------------
  204. Aliases
  205. ---------------*/
  206. /* aliases for convenience */
  207. i.basic.icon.delete:before { content: '\e80d'; } /* '๎ ' */
  208. i.basic.icon.dropdown:before { content: '\25be'; } /* 'โ–พ' */
  209. i.basic.icon.help:before { content: '\e704'; } /* '๎œ„' */
  210. i.basic.icon.info:before { content: '\e705'; } /* '๎œ…' */
  211. i.basic.icon.error:before { content: '\e80d'; } /* '๎ ' */
  212. i.basic.icon.dislike:before { content: '\2661'; } /* 'โ™ก' */
  213. i.basic.icon.like:before { content: '\2665'; } /* 'โ™ฅ' */
  214. i.basic.icon.eye:before { content: '\e80f'; } /* '๎ ' */
  215. i.basic.icon.eye.hidden:before { content: '\e70b'; } /* '๎œ‹' */
  216. i.basic.icon.date:before { content: '๐Ÿ“…'; } /* '\1f4c5' */
  217. /*******************************
  218. States
  219. *******************************/
  220. i.basic.icon.hover {
  221. opacity: 1;
  222. }
  223. i.basic.icon.active {
  224. opacity: 1;
  225. }
  226. i.emphasized.basic.icon {
  227. opacity: 1;
  228. }
  229. i.basic.icon.disabled {
  230. opacity: 0.3;
  231. }
  232. /*******************************
  233. Variations
  234. *******************************/
  235. /*-------------------
  236. Link
  237. --------------------*/
  238. i.link.basic.icon {
  239. cursor: pointer;
  240. opacity: 0.7;
  241. -webkit-transition: opacity 0.3s ease-out;
  242. -moz-transition: opacity 0.3s ease-out;
  243. -o-transition: opacity 0.3s ease-out;
  244. -ms-transition: opacity 0.3s ease-out;
  245. transition: opacity 0.3s ease-out;
  246. }
  247. .link.basic.icon:hover {
  248. opacity: 1 !important;
  249. }
  250. /*-------------------
  251. Circular
  252. --------------------*/
  253. i.circular.basic.icon {
  254. -webkit-border-radius: 500px !important;
  255. -moz-border-radius: 500px !important;
  256. border-radius: 500px !important;
  257. padding: 0.5em 0em !important;
  258. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  259. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  260. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  261. line-height: 1 !important;
  262. width: 2em !important;
  263. height: 2em !important;
  264. }
  265. i.circular.inverted.basic.icon {
  266. border: none;
  267. -webkit-box-shadow: none;
  268. -moz-box-shadow: none;
  269. box-shadow: none;
  270. }
  271. /*-------------------
  272. Flipped
  273. --------------------*/
  274. i.vertically.flipped.basic.icon {
  275. -webkit-transform: scale(1, -1);
  276. -moz-transform: scale(1, -1);
  277. -o-transform: scale(1, -1);
  278. -ms-transform: scale(1, -1);
  279. transform: scale(1, -1);
  280. }
  281. i.horizontally.flipped.basic.icon {
  282. -webkit-transform: scale(-1, 1);
  283. -moz-transform: scale(-1, 1);
  284. -o-transform: scale(-1, 1);
  285. -ms-transform: scale(-1, 1);
  286. transform: scale(-1, 1);
  287. }
  288. /*-------------------
  289. Rotated
  290. --------------------*/
  291. i.left.rotated.basic.icon {
  292. -webkit-transform: rotate(-90deg);
  293. -moz-transform: rotate(-90deg);
  294. -o-transform: rotate(-90deg);
  295. -ms-transform: rotate(-90deg);
  296. transform: rotate(-90deg);
  297. }
  298. i.right.rotated.basic.icon {
  299. -webkit-transform: rotate(90deg);
  300. -moz-transform: rotate(90deg);
  301. -o-transform: rotate(90deg);
  302. -ms-transform: rotate(90deg);
  303. transform: rotate(90deg);
  304. }
  305. /*-------------------
  306. Square
  307. --------------------*/
  308. i.square.basic.icon {
  309. width: 2em;
  310. height: 2em;
  311. padding: 0.5em 0.35em !important;
  312. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  313. -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  314. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  315. vertical-align: baseline;
  316. }
  317. i.square.basic.icon:before {
  318. vertical-align: middle;
  319. }
  320. i.square.inverted.basic.icon {
  321. border: none;
  322. -webkit-box-shadow: none;
  323. -moz-box-shadow: none;
  324. box-shadow: none;
  325. }
  326. /*-------------------
  327. Inverted
  328. --------------------*/
  329. i.inverted.basic.icon {
  330. background-color: #222222;
  331. color: #FFFFFF;
  332. }
  333. /*-------------------
  334. Colors
  335. --------------------*/
  336. i.blue.basic.icon {
  337. color: #6ECFF5 !important;
  338. }
  339. i.black.basic.icon {
  340. color: #5C6166 !important;
  341. }
  342. i.green.basic.icon {
  343. color: #A1CF64 !important;
  344. }
  345. i.red.basic.icon {
  346. color: #D95C5C !important;
  347. }
  348. i.purple.basic.icon {
  349. color: #564F8A !important;
  350. }
  351. i.teal.basic.icon {
  352. color: #00B5AD !important;
  353. }
  354. /*-------------------
  355. Inverted Colors
  356. --------------------*/
  357. i.inverted.black.basic.icon {
  358. background-color: #5C6166 !important;
  359. color: #FFFFFF !important;
  360. }
  361. i.inverted.blue.basic.icon {
  362. background-color: #6ECFF5 !important;
  363. color: #FFFFFF !important;
  364. }
  365. i.inverted.green.basic.icon {
  366. background-color: #A1CF64 !important;
  367. color: #FFFFFF !important;
  368. }
  369. i.inverted.red.basic.icon {
  370. background-color: #D95C5C !important;
  371. color: #FFFFFF !important;
  372. }
  373. i.inverted.purple.basic.icon {
  374. background-color: #564F8A !important;
  375. color: #FFFFFF !important;
  376. }
  377. i.inverted.teal.basic.icon {
  378. background-color: #00B5AD !important;
  379. color: #FFFFFF !important;
  380. }
  381. /*-------------------
  382. Sizes
  383. --------------------*/
  384. i.small.basic.icon {
  385. font-size: 0.875em;
  386. }
  387. i.basic.icon {
  388. font-size: 1em;
  389. }
  390. i.large.basic.icon {
  391. font-size: 1.5em;
  392. margin-right: 0.2em;
  393. vertical-align: middle;
  394. }
  395. i.big.basic.icon {
  396. font-size: 2em;
  397. margin-right: 0.5em;
  398. vertical-align: middle;
  399. }
  400. i.huge.basic.icon {
  401. font-size: 4em;
  402. margin-right: 0.75em;
  403. vertical-align: middle;
  404. }
  405. i.massive.basic.icon {
  406. font-size: 8em;
  407. margin-right: 1em;
  408. vertical-align: middle;
  409. }