mixins.less 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  2. text-shadow: @string;
  3. }
  4. .box-shadow (@string) {
  5. -webkit-box-shadow: @string;
  6. -moz-box-shadow: @string;
  7. box-shadow: @string;
  8. }
  9. .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  10. -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  11. -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  12. box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
  13. }
  14. .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  15. -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  16. -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  17. box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  18. }
  19. .box-sizing (@type: border-box) {
  20. -webkit-box-sizing: @type;
  21. -moz-box-sizing: @type;
  22. box-sizing: @type;
  23. }
  24. .border-radius (@radius: 5px) {
  25. -webkit-border-radius: @radius;
  26. -moz-border-radius: @radius;
  27. -ms-border-radius: @radius;
  28. -o-border-radius: @radius;
  29. border-radius: @radius;
  30. -moz-background-clip: padding;
  31. -webkit-background-clip: padding-box;
  32. background-clip: padding-box;
  33. }
  34. .border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  35. -webkit-border-top-right-radius: @topright;
  36. -webkit-border-bottom-right-radius: @bottomright;
  37. -webkit-border-bottom-left-radius: @bottomleft;
  38. -webkit-border-top-left-radius: @topleft;
  39. -moz-border-radius-topright: @topright;
  40. -moz-border-radius-bottomright: @bottomright;
  41. -moz-border-radius-bottomleft: @bottomleft;
  42. -moz-border-radius-topleft: @topleft;
  43. border-top-right-radius: @topright;
  44. border-bottom-right-radius: @bottomright;
  45. border-bottom-left-radius: @bottomleft;
  46. border-top-left-radius: @topleft;
  47. -moz-background-clip: padding;
  48. -webkit-background-clip: padding-box;
  49. background-clip: padding-box;
  50. }
  51. .opacity (@opacity: 0.5) {
  52. -webkit-opacity: @opacity;
  53. -moz-opacity: @opacity;
  54. opacity: @opacity;
  55. }
  56. .gradient (@startColor: #eee, @endColor: white) {
  57. background-color: @startColor;
  58. background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  59. background: -webkit-linear-gradient(top, @startColor, @endColor);
  60. background: -moz-linear-gradient(top, @startColor, @endColor);
  61. background: -ms-linear-gradient(top, @startColor, @endColor);
  62. background: -o-linear-gradient(top, @startColor, @endColor);
  63. }
  64. .horizontal-gradient (@startColor: #eee, @endColor: white) {
  65. background-color: @startColor;
  66. background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  67. background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  68. background-image: -moz-linear-gradient(left, @startColor, @endColor);
  69. background-image: -ms-linear-gradient(left, @startColor, @endColor);
  70. background-image: -o-linear-gradient(left, @startColor, @endColor);
  71. }
  72. .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
  73. -webkit-animation: @name @duration @delay @ease;
  74. -moz-animation: @name @duration @delay @ease;
  75. -ms-animation: @name @duration @delay @ease;
  76. }
  77. .transition (@transition) {
  78. -webkit-transition: @transition;
  79. -moz-transition: @transition;
  80. -ms-transition: @transition;
  81. -o-transition: @transition;
  82. }
  83. .transform(@string){
  84. -webkit-transform: @string;
  85. -moz-transform: @string;
  86. -ms-transform: @string;
  87. -o-transform: @string;
  88. }
  89. .scale (@factor) {
  90. -webkit-transform: scale(@factor);
  91. -moz-transform: scale(@factor);
  92. -ms-transform: scale(@factor);
  93. -o-transform: scale(@factor);
  94. }
  95. .rotate (@deg) {
  96. -webkit-transform: rotate(@deg);
  97. -moz-transform: rotate(@deg);
  98. -ms-transform: rotate(@deg);
  99. -o-transform: rotate(@deg);
  100. }
  101. .skew (@deg, @deg2) {
  102. -webkit-transform: skew(@deg, @deg2);
  103. -moz-transform: skew(@deg, @deg2);
  104. -ms-transform: skew(@deg, @deg2);
  105. -o-transform: skew(@deg, @deg2);
  106. }
  107. .translate (@x, @y:0) {
  108. -webkit-transform: translate(@x, @y);
  109. -moz-transform: translate(@x, @y);
  110. -ms-transform: translate(@x, @y);
  111. -o-transform: translate(@x, @y);
  112. }
  113. .translate3d (@x, @y: 0, @z: 0) {
  114. -webkit-transform: translate3d(@x, @y, @z);
  115. -moz-transform: translate3d(@x, @y, @z);
  116. -ms-transform: translate3d(@x, @y, @z);
  117. -o-transform: translate3d(@x, @y, @z);
  118. }
  119. .perspective (@value: 1000) {
  120. -webkit-perspective: @value;
  121. -moz-perspective: @value;
  122. -ms-perspective: @value;
  123. perspective: @value;
  124. }
  125. .transform-origin (@x:center, @y:center) {
  126. -webkit-transform-origin: @x @y;
  127. -moz-transform-origin: @x @y;
  128. -ms-transform-origin: @x @y;
  129. -o-transform-origin: @x @y;
  130. }
  131. .reset-box-sizing (@size:content-box) {
  132. &,
  133. *,
  134. *:before,
  135. *:after {
  136. .box-sizing(@size);
  137. }
  138. }
  139. .truncate (@max-width: 250px) {
  140. max-width: @max-width;
  141. white-space: nowrap;
  142. overflow: hidden;
  143. text-overflow: ellipsis;
  144. }
  145. .background-size (@string: contain) {
  146. -webkit-background-size: @string;
  147. -moz-background-size: @string;
  148. -o-background-size: @string;
  149. background-size: @string;
  150. }
  151. // retina.less
  152. // A helper mixin for applying high-resolution background images (http://www.retinajs.com)
  153. @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
  154. .at2x(@path, @w: auto, @h: auto) {
  155. background-image: url(@path);
  156. @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
  157. @media @highdpi {
  158. background-image: url("@{at2x_path}");
  159. background-size: @w @h;
  160. }
  161. }