icons.css 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. /* Font Icons */
  2. .icon {
  3. display: inline-block;
  4. font-family: 'ios7-icon';
  5. -webkit-text-rendering: geometricPrecision;
  6. -moz-text-rendering: geometricPrecision;
  7. -ms-text-rendering: geometricPrecision;
  8. -o-text-rendering: geometricPrecision;
  9. text-rendering: geometricPrecision;
  10. -webkit-font-smoothing: antialiased;
  11. -moz-font-smoothing: antialiased;
  12. -ms-font-smoothing: antialiased;
  13. -o-font-smoothing: antialiased;
  14. font-smoothing: antialiased;
  15. font-style: normal;
  16. text-shadow: none;
  17. }
  18. [class*="sa-"] {
  19. background-position: center;
  20. background-repeat: no-repeat;
  21. }
  22. /* Left Menu */
  23. [class*="sa-side-"] {
  24. width: 44px;
  25. height: 44px;
  26. }
  27. .sa-side-home { background-image: url(../img/icon/home.png); }
  28. .sa-side-typography { background-image: url(../img/icon/typography.png); }
  29. .sa-side-widget { background-image: url(../img/icon/widgets.png); }
  30. .sa-side-table { background-image: url(../img/icon/table.png); }
  31. .sa-side-form { background-image: url(../img/icon/form.png); }
  32. .sa-side-ui { background-image: url(../img/icon/ui.png); }
  33. .sa-side-folder { background-image: url(../img/icon/folder.png); }
  34. .sa-side-calendar { background-image: url(../img/icon/calendar.png); }
  35. .sa-side-page { background-image: url(../img/icon/pages.png); }
  36. .sa-side-chart { background-image: url(../img/icon/chart.png); }
  37. .sa-side-photos { background-image: url(../img/icon/photos.png); }
  38. /* Top Menu */
  39. [class*="sa-top-"] {
  40. width: 40px;
  41. height: 48px;
  42. float: left;
  43. }
  44. .sa-top-message { background-image: url(../img/icon/message.png); }
  45. .sa-top-updates { background-image: url(../img/icon/updates.png); }
  46. /* Editor */
  47. [class*="editor-"] {
  48. width: 13px;
  49. height: 22px;
  50. background-position: center;
  51. background-repeat: no-repeat;
  52. float: left;
  53. }
  54. .editor-text { background-image: url(../img/editor/text.png); }
  55. .editor-bold { background-image: url(../img/editor/bold.png); }
  56. .editor-italic { background-image: url(../img/editor/italic.png); }
  57. .editor-underline { background-image: url(../img/editor/underline.png); }
  58. .editor-unstyle { background-image: url(../img/editor/unstyle.png); }
  59. .editor-unlist { background-image: url(../img/editor/unlist.png); }
  60. .editor-orderlist { background-image: url(../img/editor/orderlist.png); }
  61. .editor-align { background-image: url(../img/editor/align.png); }
  62. .editor-line-height { background-image: url(../img/editor/line-height.png); }
  63. .editor-table { background-image: url(../img/editor/table.png); }
  64. .editor-link { background-image: url(../img/editor/link.png); }
  65. .editor-picture { background-image: url(../img/editor/picture.png); }
  66. .editor-video { background-image: url(../img/editor/video.png); }
  67. .editor-full-screen { background-image: url(../img/editor/full-screen.png); }
  68. .editor-code { background-image: url(../img/editor/code.png); }
  69. .editor-help { background-image: url(../img/editor/help.png); }
  70. .editor-font { background-image: url(../img/editor/font.png); }
  71. .editor-heading { background-image: url(../img/editor/heading.png); }
  72. /* List Icons */
  73. [class*="sa-list-"] {
  74. display: inline-block;
  75. height: 21px;
  76. width: 21px;
  77. background-position: center;
  78. background-repeat: no-repeat;
  79. }
  80. .sa-list-add { background-image: url(../img/icon/add.png); }
  81. .sa-list-refresh { background-image: url(../img/icon/refresh.png); }
  82. .sa-list-move { background-image: url(../img/icon/move.png); }
  83. .sa-list-delete { background-image: url(../img/icon/delete.png); }
  84. .sa-list-back { background-image: url(../img/icon/back.png); }
  85. .sa-list-forwad { background-image: url(../img/icon/forwad.png); }
  86. .sa-list-day { background-image: url(../img/icon/day.png); }
  87. .sa-list-week { background-image: url(../img/icon/week.png); }
  88. .sa-list-month { background-image: url(../img/icon/month.png); }
  89. .sa-list-spam { background-image: url(../img/icon/spam.png); }
  90. .sa-list-archive { background-image: url(../img/icon/archive.png); }
  91. /* Others */
  92. #menu-toggle { background-image: url(../img/icon/menu.png); }
  93. /* Form */
  94. .sa-plus {
  95. width: 13px;
  96. height: 13px;
  97. background-image: url(../img/icon/plus-sm.png);
  98. display: inline-block;
  99. }
  100. /* For Higher DPI */
  101. @media
  102. only screen and (-webkit-min-device-pixel-ratio: 1.25),
  103. only screen and ( min--moz-device-pixel-ratio: 1.25),
  104. only screen and ( -o-min-device-pixel-ratio: 2/1),
  105. only screen and ( min-device-pixel-ratio: 1.25),
  106. only screen and ( min-resolution: 120dpi),
  107. only screen and ( min-resolution: 1.25dppx) {
  108. /* Left Menu */
  109. .sa-side-typography, .sa-side-widget, .sa-side-table, .sa-side-ui, .sa-side-folder { background-size: 23px 21px; }
  110. .sa-side-home { background-image: url(../img/icon/home@2x.png); background-size: 25px 25px; }
  111. .sa-side-typography { background-image: url(../img/icon/typography@2x.png); }
  112. .sa-side-widget { background-image: url(../img/icon/widgets@2x.png); }
  113. .sa-side-table { background-image: url(../img/icon/table@2x.png); }
  114. .sa-side-form { background-image: url(../img/icon/form@2x.png); background-size: 19px 25px; }
  115. .sa-side-ui { background-image: url(../img/icon/ui@2x.png); }
  116. .sa-side-folder { background-image: url(../img/icon/folder@2x.png); }
  117. .sa-side-calendar { background-image: url(../img/icon/calendar@2x.png); background-size: 23px 23px; }
  118. .sa-side-page { background-image: url(../img/icon/pages@2x.png); background-size: 25px 21px; }
  119. .sa-side-chart { background-image: url(../img/icon/chart@2x.png); background-size: 24px 19px; }
  120. .sa-side-photos { background-image: url(../img/icon/photos@2x.png); background-size: 23px 19px; }
  121. /* Top Menu */
  122. .sa-top-message { background-image: url(../img/icon/message@2x.png); background-size: 25px 17px; }
  123. .sa-top-updates { background-image: url(../img/icon/updates@2x.png); background-size: 25px 25px; }
  124. /* Editor */
  125. .editor-text { background-image: url(../img/editor/text@2x.png); background-size: 11px 13px; }
  126. .editor-bold { background-image: url(../img/editor/bold@2x.png); background-size: 10px 13px;}
  127. .editor-italic { background-image: url(../img/editor/italic@2x.png); background-size: 5px 13px; }
  128. .editor-underline { background-image: url(../img/editor/underline@2x.png); background-size: 10px 13px; }
  129. .editor-unstyle { background-image: url(../img/editor/unstyle@2x.png); background-size: 11px 13px; }
  130. .editor-unlist { background-image: url(../img/editor/unlist@2x.png); background-size: 13px 13px; }
  131. .editor-orderlist { background-image: url(../img/editor/orderlist@2x.png); background-size: 13px 13px; }
  132. .editor-align { background-image: url(../img/editor/align@2x.png); background-size: 13px 13px; }
  133. .editor-line-height { background-image: url(../img/editor/line-height@2x.png); background-size: 11px 13px; }
  134. .editor-table { background-image: url(../img/editor/table@2x.png); background-size: 13px 13px; }
  135. .editor-link { background-image: url(../img/editor/link@2x.png); background-size: 9px 13px; }
  136. .editor-picture { background-image: url(../img/editor/picture@2x.png); background-size: 13px 13px; }
  137. .editor-video { background-image: url(../img/editor/video@2x.png); background-size: 13px 13px; }
  138. .editor-full-screen { background-image: url(../img/editor/full-screen@2x.png); background-size: 13px 13px; }
  139. .editor-code { background-image: url(../img/editor/code@2x.png); background-size: 10px 13px;}
  140. .editor-help { background-image: url(../img/editor/help@2x.png); background-size: 10px 13px; }
  141. .editor-font { background-image: url(../img/editor/font@2x.png); background-size: 10px 13px; }
  142. .editor-heading { background-image: url(../img/editor/heading@2x.png); background-size: 10px 13px; }
  143. /* List Icons */
  144. .sa-list-add { background-image: url(../img/icon/add@2x.png); background-size: 19px 19px; }
  145. .sa-list-refresh { background-image: url(../img/icon/refresh@2x.png); background-size: 18px 19px; }
  146. .sa-list-move { background-image: url(../img/icon/move@2x.png); background-size: 19px 19px; }
  147. .sa-list-delete { background-image: url(../img/icon/delete@2x.png); background-size: 15px 19px; }
  148. .sa-list-back { background-image: url(../img/icon/back@2x.png); background-size: 12px 21px; }
  149. .sa-list-forwad { background-image: url(../img/icon/forwad@2x.png); background-size: 12px 21px; }
  150. .sa-list-day { background-image: url(../img/icon/day@2x.png); background-size: 21px 21px; }
  151. .sa-list-week { background-image: url(../img/icon/week@2x.png); background-size: 21px 21px; }
  152. .sa-list-month { background-image: url(../img/icon/month@2x.png); background-size: 21px 21px; }
  153. .sa-list-spam { background-image: url(../img/icon/spam@2x.png); background-size: 17px 17px; }
  154. .sa-list-archive { background-image: url(../img/icon/archive@2x.png); background-size: 17px 17px; }
  155. /* Form */
  156. .sa-plus { background-image: url(../img/icon/plus-sm@2x.png); background-size: 13px 13px; }
  157. /* Others */
  158. #menu-toggle { background-image: url(../img/icon/menu@2x.png); background-size: 18px 13px; }
  159. .main-search { background-image: url(../img/icon/search@2x.png); background-size: 25px 25px; }
  160. .tile-config > .tile-menu { background-image: url(../img/icon/tile-actions@2x.png); background-size: 13px 3px; }
  161. .message-search:not(:focus) { background-image: url(../img/icon/search@2x.png); background-size: 25px 25px; }
  162. }