elements.less 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /** COMMONS */
  2. .p(@p){ padding:@arguments; }
  3. .p(@v, @h){ padding:@arguments; }
  4. .p(@t, @l, @b, @l){ padding:@arguments; }
  5. .pt(@p){ padding-top:@p; }
  6. .pr(@p){ padding-right:@p; }
  7. .pb(@p){ padding-bottom:@p; }
  8. .pl(@p){ padding-left:@p; }
  9. .m(@p){ margin:@arguments; }
  10. .m(@v, @h){ margin:@arguments; }
  11. .m(@t, @l, @b, @l){ margin:@arguments; }
  12. .mt(@m){ margin-top:@m; }
  13. .mr(@m){ margin-right:@m; }
  14. .mb(@m){ margin-bottom:@m; }
  15. .ml(@m){ margin-left:@m; }
  16. .b(@b){ border: @b; }
  17. .b(@size, @color){ border: @size solid @color; }
  18. .bt(@b){ border-top: @b;}
  19. .bt(@size, @color){border-top: @size solid @color;}
  20. .br(@b){ border-right: @b;}
  21. .br(@size, @color){border-right: @size solid @color;}
  22. .bb(@b){ border-bottom: @b;}
  23. .bb(@size, @color){border-bottom: @size solid @color;}
  24. .bl(@b){ border-left: @b;}
  25. .bl(@size, @color){border-left: @size solid @color;}
  26. .bg(@color, @url, @repeat, @scrollfixed, @pos, ){background: @arguments;}
  27. .bgc(@color){background-color: @arguments;}
  28. .inlineblock(){
  29. display:moz-inline-stack;
  30. display:inline-block;
  31. vertical-align:top;
  32. zoom:1;
  33. *display:inline;
  34. /* margin-right:-.25em;*/
  35. .ie7 &, .ie8 &{display:inline;}
  36. }
  37. .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  38. background: @color;
  39. background: -webkit-gradient(linear,
  40. left bottom,
  41. left top,
  42. color-stop(0, @start),
  43. color-stop(1, @stop));
  44. background: -ms-linear-gradient(bottom,
  45. @start,
  46. @stop);
  47. background: -moz-linear-gradient(center bottom,
  48. @start 0%,
  49. @stop 100%);
  50. }
  51. .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
  52. background: @color;
  53. background: -webkit-gradient(linear,
  54. left bottom,
  55. left top,
  56. color-stop(0, rgb(@start,@start,@start)),
  57. color-stop(1, rgb(@stop,@stop,@stop)));
  58. background: -ms-linear-gradient(bottom,
  59. rgb(@start,@start,@start) 0%,
  60. rgb(@start,@start,@start) 100%);
  61. background: -moz-linear-gradient(center bottom,
  62. rgb(@start,@start,@start) 0%,
  63. rgb(@stop,@stop,@stop) 100%);
  64. }
  65. .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
  66. border-top: solid 1px @top-color;
  67. border-left: solid 1px @left-color;
  68. border-right: solid 1px @right-color;
  69. border-bottom: solid 1px @bottom-color;
  70. }
  71. .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
  72. -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  73. -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  74. box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  75. }
  76. .rounded(@radius: 2px) {
  77. -webkit-border-radius: @radius;
  78. -moz-border-radius: @radius;
  79. border-radius: @radius;
  80. -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
  81. }
  82. .border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
  83. -webkit-border-radius:@topleft @topright @bottomright @bottomleft;
  84. -moz-border-radius:@topleft @topright @bottomright @bottomleft;
  85. border-radius:@topleft @topright @bottomright @bottomleft;
  86. -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
  87. }
  88. .opacity(@opacity: 0.5) {
  89. -moz-opacity: @opacity;
  90. -khtml-opacity: @opacity;
  91. -webkit-opacity: @opacity;
  92. opacity: @opacity;
  93. }
  94. .transition-duration(@duration: 0.2s) {
  95. -webkit-transition-duration: @duration;
  96. -moz-transition-duration: @duration;
  97. -o-transition-duration: @duration;
  98. transition-duration: @duration;
  99. }
  100. .rotation(@deg:5deg){
  101. -webkit-transform: rotate(@deg);
  102. -moz-transform: rotate(@deg);
  103. transform: rotate(@deg);
  104. }
  105. .scale(@ratio:1.5){
  106. -webkit-transform:scale(@ratio);
  107. -moz-transform:scale(@ratio);
  108. transform:scale(@ratio);
  109. }
  110. .transition(@p, @d, @e) {
  111. -webkit-transition: @arguments;
  112. -moz-transition: @arguments;
  113. -o-transition: @arguments;
  114. transition: @arguments;
  115. }
  116. .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
  117. -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  118. -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  119. box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
  120. }
  121. .box-shadow(@arguments) {
  122. -webkit-box-shadow: @arguments;
  123. -moz-box-shadow: @arguments;
  124. box-shadow: @arguments;
  125. }
  126. .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
  127. -moz-column-width: @colwidth;
  128. -moz-column-count: @colcount;
  129. -moz-column-gap: @colgap;
  130. -moz-column-rule-color: @columnRuleColor;
  131. -moz-column-rule-style: @columnRuleStyle;
  132. -moz-column-rule-width: @columnRuleWidth;
  133. -webkit-column-width: @colwidth;
  134. -webkit-column-count: @colcount;
  135. -webkit-column-gap: @colgap;
  136. -webkit-column-rule-color: @columnRuleColor;
  137. -webkit-column-rule-style: @columnRuleStyle;
  138. -webkit-column-rule-width: @columnRuleWidth;
  139. column-width: @colwidth;
  140. column-count: @colcount;
  141. column-gap: @colgap;
  142. column-rule-color: @columnRuleColor;
  143. column-rule-style: @columnRuleStyle;
  144. column-rule-width: @columnRuleWidth;
  145. }
  146. .translate(@x:0, @y:0) {
  147. -moz-transform: translate(@x, @y);
  148. -webkit-transform: translate(@x, @y);
  149. -o-transform: translate(@x, @y);
  150. -ms-transform: translate(@x, @y);
  151. transform: translate(@x, @y);
  152. }