_icons.less 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. // /**
  2. // * Copyright © Magento, Inc. All rights reserved.
  3. // * See COPYING.txt for license details.
  4. // */
  5. // ==============================================
  6. // Generated content icon helpers
  7. // ----------------------------------------------
  8. // These can only be used on block or inline-block elements.
  9. // ==============================================
  10. // Non-sprited icons --------------------------------
  11. .prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
  12. .generatedcontent & {
  13. position: relative;
  14. padding-left: @width + @pad;
  15. }
  16. .generatedcontent &:before {
  17. ._generated-icon( @width, @height, @icon-image );
  18. top: @nudge-top;
  19. left: @nudge-left;
  20. }
  21. }
  22. .prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
  23. position: relative;
  24. padding-left: @width + @pad;
  25. &:before {
  26. ._generated-icon( @width, @height, @icon-image );
  27. top: @nudge-top;
  28. left: @nudge-left;
  29. }
  30. }
  31. .append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
  32. .generatedcontent & {
  33. position: relative;
  34. padding-right: @width + @pad;
  35. }
  36. .generatedcontent &:after {
  37. ._generated-icon( @width, @height, @icon-image );
  38. top: @nudge-top;
  39. right: @nudge-right;
  40. }
  41. }
  42. .append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
  43. position: relative;
  44. padding-right: @width + @pad;
  45. .generatedcontent &:after {
  46. ._generated-icon( @width, @height, @icon-image );
  47. top: @nudge-top;
  48. right: @nudge-right;
  49. }
  50. }
  51. // Sprited icons --------------------------------
  52. .prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
  53. .generatedcontent & {
  54. position: relative;
  55. padding-left: @width + @pad;
  56. }
  57. .generatedcontent &:before {
  58. ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
  59. top: @nudge-top;
  60. left: @nudge-left;
  61. }
  62. }
  63. .prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
  64. position: relative;
  65. padding-left: @width + @pad;
  66. &:before {
  67. ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
  68. top: @nudge-top;
  69. left: @nudge-left;
  70. }
  71. }
  72. .append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
  73. .generatedcontent & {
  74. padding-right: @width + @pad;
  75. position: relative;
  76. }
  77. .generatedcontent &:after {
  78. ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
  79. top: @nudge-top;
  80. right: @nudge-right;
  81. }
  82. }
  83. .append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
  84. position: relative;
  85. padding-right: @width + @pad;
  86. &:after {
  87. ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
  88. top: @nudge-top;
  89. right: @nudge-right;
  90. }
  91. }
  92. .prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
  93. .generatedcontent &:before {
  94. .sprite-pos(@x, @y, @sprite-grid);
  95. .nudge-l(@nudge-left);
  96. .nudge-t(@nudge-top);
  97. }
  98. }
  99. .prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
  100. &:before {
  101. .sprite-pos(@x, @y, @sprite-grid);
  102. .nudge-l(@nudge-left);
  103. .nudge-t(@nudge-top);
  104. }
  105. }
  106. .append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
  107. .generatedcontent &:after {
  108. .sprite-pos(@x, @y, @sprite-grid);
  109. .nudge-r(@nudge-right);
  110. .nudge-t(@nudge-top);
  111. }
  112. }
  113. .append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
  114. &:after {
  115. .sprite-pos(@x, @y, @sprite-grid);
  116. .nudge-r(@nudge-right);
  117. .nudge-t(@nudge-top);
  118. }
  119. }
  120. // ---- Partials -----------------------
  121. .prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
  122. .generatedcontent & {
  123. position: relative;
  124. ._pad-left(@width, @pad);
  125. }
  126. .generatedcontent &:before {
  127. position: absolute;
  128. display: block;
  129. content: ' ';
  130. top: 0;
  131. left: 0;
  132. ._size(@width, @height);
  133. }
  134. }
  135. .prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
  136. position: relative;
  137. ._pad-left(@width, @pad);
  138. &:before {
  139. position: absolute;
  140. display: block;
  141. content: ' ';
  142. top: 0;
  143. left: 0;
  144. ._size(@width, @height);
  145. }
  146. }
  147. .append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
  148. .generatedcontent & {
  149. position: relative;
  150. ._pad-right(@width, @pad);
  151. }
  152. .generatedcontent &:after {
  153. position: absolute;
  154. display: block;
  155. content: ' ';
  156. top: 0;
  157. right: 0;
  158. ._size(@width, @height);
  159. }
  160. }
  161. .append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
  162. position: relative;
  163. ._pad-right(@width, @pad);
  164. &:after {
  165. position: absolute;
  166. display: block;
  167. content: ' ';
  168. top: 0;
  169. right: 0;
  170. ._size(@width, @height);
  171. }
  172. }
  173. .prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
  174. ._gc-pad-left(@width, @pad);
  175. .generatedcontent &:before {
  176. background: url(@icon-image) no-repeat 0 0;
  177. ._size(@width, @height);
  178. .nudge-l(@nudge-left);
  179. .nudge-t(@nudge-top);
  180. }
  181. }
  182. .prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
  183. ._pad-left(@width, @pad);
  184. &:before {
  185. background: url(@icon-image) no-repeat 0 0;
  186. ._size(@width, @height);
  187. .nudge-l(@nudge-left);
  188. .nudge-t(@nudge-top);
  189. }
  190. }
  191. .append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
  192. ._gc-pad-right(@width, @pad);
  193. .generatedcontent &:after {
  194. background: url(@icon-image) no-repeat 0 0;
  195. ._size(@width, @height);
  196. .nudge-r(@nudge-right);
  197. .nudge-t(@nudge-top);
  198. }
  199. }
  200. .append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
  201. ._pad-right(@width, @pad);
  202. &:after {
  203. background: url(@icon-image) no-repeat 0 0;
  204. ._size(@width, @height);
  205. .nudge-r(@nudge-right);
  206. .nudge-t(@nudge-top);
  207. }
  208. }
  209. // ---- internal use mixins -----------------------
  210. ._generated-icon(@width, @height, @icon-image) {
  211. position: absolute;
  212. display: block;
  213. content: ' ';
  214. background: url(@icon-image) no-repeat 0 0;
  215. .size(@width, @height);
  216. }
  217. ._generated-sprite-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
  218. position: absolute;
  219. display: block;
  220. content: ' ';
  221. .sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid);
  222. }
  223. ._pad-left(@width, @pad) when (@width = 0) {
  224. }
  225. ._pad-left(@width, @pad) when not (@width = 0) {
  226. padding-left: @width + @pad;
  227. }
  228. ._pad-right(@width, @pad) when (@width = 0) {
  229. }
  230. ._pad-right(@width, @pad) when not (@width = 0) {
  231. padding-right: @width + @pad;
  232. }
  233. ._gc-pad-left(@width, @pad) when (@width = 0) {
  234. }
  235. ._gc-pad-right(@width, @pad) when (@width = 0) {
  236. }
  237. ._gc-pad-left(@width, @pad) when not (@width = 0) and (@using-modernizr) {
  238. .generatedcontent & {
  239. ._pad-left(@width, @pad);
  240. }
  241. }
  242. ._gc-pad-left(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
  243. ._pad-left(@width, @pad);
  244. }
  245. ._gc-pad-right(@width, @pad) when not (@width = 0) {
  246. .generatedcontent & {
  247. ._pad-right(@width, @pad);
  248. }
  249. }
  250. ._gc-pad-right(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
  251. ._pad-right(@width, @pad);
  252. }
  253. ._size(@width, @height) when (@width = 0) and (@height = 0) {
  254. }
  255. ._size(@width, @height) when (@width = 0) and not (@height = 0) {
  256. height: @height;
  257. }
  258. ._size(@width, @height) when not (@width = 0) and (@height = 0) {
  259. width: @width;
  260. }
  261. ._size(@width, @height) when not (@width = 0) and not (@height = 0) {
  262. width: @width;
  263. height: @height;
  264. }