icons.scss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
  4. * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
  5. * @copyright Copyright (c) 2016, Roeland Jago Douma <roeland@famdouma.nl>
  6. * @copyright Copyright (c) 2016, Vincent Chan <plus.vincchan@gmail.com>
  7. * @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu>
  8. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  9. * @copyright Copyright (c) 2015, Jan-Christoph Borchardt <hey@jancborchardt.net>
  10. *
  11. * @license GNU AGPL version 3 or any later version
  12. *
  13. */
  14. /* GLOBAL ------------------------------------------------------------------- */
  15. [class^='icon-'], [class*=' icon-'] {
  16. background-repeat: no-repeat;
  17. background-position: center;
  18. min-width: 16px;
  19. min-height: 16px;
  20. }
  21. .icon-breadcrumb {
  22. background-image: url('../img/breadcrumb.svg?v=1');
  23. }
  24. /* LOADING ------------------------------------------------------------------ */
  25. .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
  26. position: relative;
  27. &:after {
  28. z-index: 2;
  29. content: '';
  30. height: 30px;
  31. width: 30px;
  32. margin: -16px 0 0 -16px;
  33. position: absolute;
  34. top: 50%;
  35. left: 50%;
  36. border-radius: 100%;
  37. -webkit-animation: rotate .8s infinite linear;
  38. animation: rotate .8s infinite linear;
  39. -webkit-transform-origin: center;
  40. -ms-transform-origin: center;
  41. transform-origin: center;
  42. border: 2px solid rgba(150, 150, 150, 0.5);
  43. border-top-color: rgb(100, 100, 100);
  44. }
  45. }
  46. .icon-loading-dark:after,
  47. .icon-loading-small-dark:after {
  48. border: 2px solid rgba(187, 187, 187, 0.5);
  49. border-top-color: #bbb;
  50. }
  51. .icon-loading-small:after,
  52. .icon-loading-small-dark:after {
  53. height: 14px;
  54. width: 14px;
  55. margin: -8px 0 0 -8px;
  56. }
  57. /* Css replaced elements don't have ::after nor ::before */
  58. img, object, video, button, textarea, input, select {
  59. .icon-loading {
  60. background-image: url('../img/loading.gif');
  61. }
  62. .icon-loading-dark {
  63. background-image: url('../img/loading-dark.gif');
  64. }
  65. .icon-loading-small {
  66. background-image: url('../img/loading-small.gif');
  67. }
  68. .icon-loading-small-dark {
  69. background-image: url('../img/loading-small-dark.gif');
  70. }
  71. }
  72. @keyframes rotate {
  73. from {
  74. transform: rotate(0deg);
  75. }
  76. to {
  77. transform: rotate(360deg);
  78. }
  79. }
  80. .icon-32 {
  81. background-size: 32px !important;
  82. }
  83. /* ICONS -------------------------------------------------------------------- */
  84. .icon-add {
  85. background-image: url('../img/actions/add.svg?v=1');
  86. }
  87. .icon-audio {
  88. background-image: url('../img/actions/audio.svg?v=1');
  89. }
  90. .icon-audio-white {
  91. background-image: url('../img/actions/audio-white.svg?v=2');
  92. }
  93. .icon-audio-off {
  94. background-image: url('../img/actions/audio-off.svg?v=1');
  95. }
  96. .icon-audio-off-white {
  97. background-image: url('../img/actions/audio-off-white.svg?v=1');
  98. }
  99. .icon-caret {
  100. background-image: url('../img/actions/caret.svg?v=1');
  101. }
  102. .icon-caret-dark {
  103. background-image: url('../img/actions/caret-dark.svg?v=1');
  104. }
  105. .icon-checkmark {
  106. background-image: url('../img/actions/checkmark.svg?v=1');
  107. }
  108. .icon-checkmark-white {
  109. background-image: url('../img/actions/checkmark-white.svg?v=1');
  110. }
  111. .icon-checkmark-color {
  112. background-image: url('../img/actions/checkmark-color.svg?v=1');
  113. }
  114. .icon-clippy {
  115. background-image: url('../img/actions/clippy.svg?v=2');
  116. }
  117. .icon-close {
  118. background-image: url('../img/actions/close.svg?v=1');
  119. }
  120. .icon-close-white {
  121. background-image: url('../img/actions/close-white.svg?v=1');
  122. }
  123. .icon-comment {
  124. background-image: url('../img/actions/comment.svg?v=1');
  125. }
  126. .icon-confirm {
  127. background-image: url('../img/actions/confirm.svg?v=2');
  128. }
  129. .icon-confirm-white {
  130. background-image: url('../img/actions/confirm-white.svg?v=2');
  131. }
  132. .icon-delete {
  133. background-image: url('../img/actions/delete.svg?v=1');
  134. &.no-permission {
  135. &:hover, &:focus {
  136. background-image: url('../img/actions/delete.svg?v=1');
  137. }
  138. }
  139. &:hover, &:focus {
  140. background-image: url('../img/actions/delete-hover.svg?v=1');
  141. }
  142. }
  143. .icon-delete-white {
  144. background-image: url('../img/actions/delete-white.svg?v=1');
  145. &.no-permission {
  146. &:hover, &:focus {
  147. background-image: url('../img/actions/delete-white.svg?v=1');
  148. }
  149. }
  150. &:hover, &:focus {
  151. background-image: url('../img/actions/delete-hover.svg?v=1');
  152. }
  153. }
  154. .icon-details {
  155. background-image: url('../img/actions/details.svg?v=1');
  156. }
  157. .icon-download {
  158. background-image: url('../img/actions/download.svg?v=1');
  159. }
  160. .icon-download-white {
  161. background-image: url('../img/actions/download-white.svg?v=1');
  162. }
  163. .icon-edit {
  164. background-image: url('../img/actions/edit.svg?v=1');
  165. }
  166. .icon-error {
  167. background-image: url('../img/actions/error.svg?v=1');
  168. }
  169. .icon-error-white {
  170. background-image: url('../img/actions/error-white.svg?v=1');
  171. }
  172. .icon-error-color {
  173. background-image: url('../img/actions/error-color.svg?v=1');
  174. }
  175. .icon-external {
  176. background-image: url('../img/actions/external.svg?v=1');
  177. }
  178. .icon-fullscreen {
  179. background-image: url('../img/actions/fullscreen.svg?v=1');
  180. }
  181. .icon-fullscreen-white {
  182. background-image: url('../img/actions/fullscreen-white.svg?v=2');
  183. }
  184. .icon-history {
  185. background-image: url('../img/actions/history.svg?v=1');
  186. }
  187. .icon-info {
  188. background-image: url('../img/actions/info.svg?v=1');
  189. }
  190. .icon-info-white {
  191. background-image: url('../img/actions/info-white.svg?v=1');
  192. }
  193. .icon-logout {
  194. background-image: url('../img/actions/logout.svg?v=1');
  195. }
  196. .icon-mail {
  197. background-image: url('../img/actions/mail.svg?v=1');
  198. }
  199. .icon-menu {
  200. background-image: url('../img/actions/menu.svg?v=1');
  201. }
  202. .icon-more {
  203. background-image: url('../img/actions/more.svg?v=1');
  204. }
  205. .icon-more-white {
  206. background-image: url('../img/actions/more-white.svg?v=1');
  207. }
  208. .icon-password {
  209. background-image: url('../img/actions/password.svg?v=1');
  210. }
  211. .icon-pause {
  212. background-image: url('../img/actions/pause.svg?v=1');
  213. }
  214. .icon-pause-big {
  215. background-image: url('../img/actions/pause-big.svg?v=1');
  216. }
  217. .icon-play {
  218. background-image: url('../img/actions/play.svg?v=1');
  219. }
  220. .icon-play-add {
  221. background-image: url('../img/actions/play-add.svg?v=1');
  222. }
  223. .icon-play-big {
  224. background-image: url('../img/actions/play-big.svg?v=1');
  225. }
  226. .icon-play-next {
  227. background-image: url('../img/actions/play-next.svg?v=1');
  228. }
  229. .icon-play-previous {
  230. background-image: url('../img/actions/play-previous.svg?v=1');
  231. }
  232. .icon-public {
  233. background-image: url('../img/actions/public.svg?v=1');
  234. }
  235. .icon-rename {
  236. background-image: url('../img/actions/rename.svg?v=1');
  237. }
  238. .icon-screen {
  239. background-image: url('../img/actions/screen.svg?v=1');
  240. }
  241. .icon-screen-white {
  242. background-image: url('../img/actions/screen-white.svg?v=1');
  243. }
  244. .icon-screen-off {
  245. background-image: url('../img/actions/screen-off.svg?v=1');
  246. }
  247. .icon-screen-off-white {
  248. background-image: url('../img/actions/screen-off-white.svg?v=1');
  249. }
  250. .icon-search {
  251. background-image: url('../img/actions/search.svg?v=1');
  252. }
  253. .icon-search-white {
  254. background-image: url('../img/actions/search-white.svg?v=1');
  255. }
  256. .icon-settings {
  257. background-image: url('../img/actions/settings.svg?v=1');
  258. }
  259. .icon-share {
  260. background-image: url('../img/actions/share.svg?v=1');
  261. }
  262. .icon-shared {
  263. background-image: url('../img/actions/shared.svg?v=1');
  264. }
  265. .icon-sound {
  266. background-image: url('../img/actions/sound.svg?v=1');
  267. }
  268. .icon-sound-off {
  269. background-image: url('../img/actions/sound-off.svg?v=1');
  270. }
  271. .icon-favorite {
  272. background-image: url('../img/actions/star-dark.svg?v=1');
  273. }
  274. .icon-star {
  275. background-image: url('../img/actions/star.svg?v=1');
  276. }
  277. .icon-starred {
  278. &:hover, &:focus {
  279. background-image: url('../img/actions/star.svg?v=1');
  280. }
  281. background-image: url('../img/actions/starred.svg?v=1');
  282. }
  283. .icon-star {
  284. &:hover, &:focus {
  285. background-image: url('../img/actions/starred.svg?v=1');
  286. }
  287. }
  288. .icon-tag {
  289. background-image: url('../img/actions/tag.svg?v=1');
  290. }
  291. .icon-toggle {
  292. background-image: url('../img/actions/toggle.svg?v=1');
  293. }
  294. .icon-triangle-e {
  295. background-image: url('../img/actions/triangle-e.svg?v=1');
  296. }
  297. .icon-triangle-n {
  298. background-image: url('../img/actions/triangle-n.svg?v=1');
  299. }
  300. .icon-triangle-s {
  301. background-image: url('../img/actions/triangle-s.svg?v=1');
  302. }
  303. .icon-upload {
  304. background-image: url('../img/actions/upload.svg?v=1');
  305. }
  306. .icon-upload-white {
  307. background-image: url('../img/actions/upload-white.svg?v=1');
  308. }
  309. .icon-user {
  310. background-image: url('../img/actions/user.svg?v=1');
  311. }
  312. .icon-video {
  313. background-image: url('../img/actions/video.svg?v=1');
  314. }
  315. .icon-video-white {
  316. background-image: url('../img/actions/video-white.svg?v=2');
  317. }
  318. .icon-video-off {
  319. background-image: url('../img/actions/video-off.svg?v=1');
  320. }
  321. .icon-video-off-white {
  322. background-image: url('../img/actions/video-off-white.svg?v=1');
  323. }
  324. .icon-view-close {
  325. background-image: url('../img/actions/view-close.svg?v=1');
  326. }
  327. .icon-view-download {
  328. background-image: url('../img/actions/view-download.svg?v=1');
  329. }
  330. .icon-view-next {
  331. background-image: url('../img/actions/view-next.svg?v=1');
  332. }
  333. .icon-view-pause {
  334. background-image: url('../img/actions/view-pause.svg?v=1');
  335. }
  336. .icon-view-play {
  337. background-image: url('../img/actions/view-play.svg?v=1');
  338. }
  339. .icon-view-previous {
  340. background-image: url('../img/actions/view-previous.svg?v=1');
  341. }
  342. /* PLACES ------------------------------------------------------------------- */
  343. .icon-calendar-dark {
  344. background-image: url('../img/places/calendar-dark.svg?v=1');
  345. }
  346. .icon-contacts-dark {
  347. background-image: url('../img/places/contacts-dark.svg?v=1');
  348. }
  349. .icon-files {
  350. background-image: url('../img/places/files.svg?v=1');
  351. }
  352. .icon-files-dark {
  353. background-image: url('../img/places/files-dark.svg?v=1');
  354. }
  355. .icon-file, .icon-filetype-text {
  356. background-image: url('../img/filetypes/text.svg?v=1');
  357. }
  358. .icon-folder, .icon-filetype-folder {
  359. background-image: url('../img/filetypes/folder.svg?v=1');
  360. }
  361. .icon-filetype-folder-drag-accept {
  362. background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
  363. }
  364. .icon-home {
  365. background-image: url('../img/places/home.svg?v=1');
  366. }
  367. .icon-link {
  368. background-image: url('../img/places/link.svg?v=1');
  369. }
  370. .icon-music {
  371. background-image: url('../img/places/music.svg?v=1');
  372. }
  373. .icon-picture {
  374. background-image: url('../img/places/picture.svg?v=1');
  375. }