1
0

icons.css 7.8 KB

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