icons.scss 9.7 KB

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