Posted By

julioantuneztarin on 06/17/11


Tagged

classes less


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

israelnoguera


Less: Classes


 / Published in: CSS
 

URL: http://snipplr.com/view/47181/less-classes/

  1. .border-radius( @radius: 3px )
  2. {
  3. -webkit-border-radius: @radius;
  4. -moz-border-radius: @radius;
  5. border-radius: @radius;
  6. }
  7.  
  8. .outline-radius( @radius: 3px )
  9. {
  10. -webkit-outline-radius: @radius;
  11. -moz-outline-radius: @radius;
  12. outline-radius: @radius;
  13. }
  14.  
  15. .box-shadow(
  16. @x : 2px,
  17. @y : 2px,
  18. @blur : 5px,
  19. @spread : 0,
  20. @color : rgba(0,0,0,.6)
  21. ) {
  22. -webkit-box-shadow: @x @y @blur @spread @color;
  23. -moz-box-shadow: @x @y @blur @spread @color;
  24. box-shadow: @x @y @blur @spread @color;
  25. }
  26.  
  27. .transition(
  28. @what : all,
  29. @length : 1s,
  30. @easing : ease-in-out
  31. ) {
  32. -webkit-transition: @what @length @easing;
  33. -moz-transition: @what @length @easing;
  34. -o-transition: @what @length @easing;
  35. transition: @what @length @easing;
  36. }
  37.  
  38. .transform(
  39. @params
  40. ) {
  41. -webkit-transform: @params;
  42. -moz-transform: @params;
  43. transform: @params;
  44. }
  45.  
  46. .box(
  47. @orient : horizontal,
  48. @pack : center,
  49. @align : center
  50. ) {
  51. display: -webkit-box;
  52. display: -moz-box;
  53. display: box;
  54.  
  55. -webkit-box-orient: @orient;
  56. -moz-box-orient: @orient;
  57. box-orient: @orient;
  58.  
  59. -webkit-box-pack: @pack;
  60. -moz-box-pack: @pack;
  61. box-pack: @pack;
  62.  
  63. -webkit-box-align: @align;
  64. -moz-box-align: @align;
  65. box-align: @align;
  66. }
  67.  
  68. .flex( @val : 1 )
  69. {
  70. -webkit-box-flex: @val;
  71. -moz-box-flex: @val;
  72. box-flex: @val;
  73. }
  74.  
  75. .resize( @direction )
  76. {
  77. -webkit-resize: @direction;
  78. -moz-resize: @direction;
  79. resize: @direction;
  80. }
  81.  
  82. .linear-gradient(
  83. @begin: black,
  84. @end: white,
  85. @switch : 100%
  86. ) {
  87. background: @begin;
  88. background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
  89. background: -moz-linear-gradient(top, @begin, @end @switch);
  90. background: -o-linear-gradient(top, @begin, @end @switch);
  91. background: linear-gradient(top, @begin, @end @switch);
  92. }
  93.  
  94. .double-borders(
  95. @colorOne : green,
  96. @colorTwo : red,
  97. @radius : 0
  98. ) {
  99. border: 1px solid @colorOne;
  100.  
  101. -webkit-box-shadow: 0 0 0 1px @colorTwo;
  102. -moz-box-shadow: 0 0 0 1px @colorTwo;
  103. box-shadow: 0 0 0 1px @colorTwo;
  104.  
  105. .border-radius( @radius );
  106. }
  107.  
  108. .triple-borders(
  109. @colorOne : green,
  110. @colorTwo : red,
  111. @colorThree : blue,
  112. @radius : 0
  113. ) {
  114. border: 1px solid @colorOne;
  115.  
  116. .border-radius( @radius );
  117.  
  118. -webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  119. -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  120. box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
  121. }
  122.  
  123. .columns(
  124. @count : 3,
  125. @gap : 10
  126. ) {
  127. -webkit-column-count: @count;
  128. -moz-column-count: @count;
  129. column-count: @count;
  130.  
  131. -webkit-column-gap: @gap;
  132. -moz-column-gap: @gap;
  133. column-gap: @gap;
  134. }
  135.  
  136. .box-sizing( @type : border-box )
  137. {
  138. -webkit-box-sizing: @type;
  139. -moz-box-sizing: @type;
  140. box-sizing: @type;
  141. }

Report this snippet  

You need to login to post a comment.