advanced code snippet search

Posted By

sherakama on 02/02/12


Tagged

css textmate less mixins


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

outer-edge


Less CSS mixins

 / Published in: CSS
 

Mixins for your mixing pleasure

Expand | Embed | Plain Text 
  1. /* Image replacements */
  2. .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
  3.  
  4. .hidden { display: none; visibility: hidden; }
  5. .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  6. .visuallyhidden.focusable:active,
  7. .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  8. .invisible { visibility: hidden; }
  9.  
  10. .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
  11. .clearfix:after { clear: both; }
  12. .clearfix { zoom: 1; }
  13.  
  14. .float-left { float:left; }
  15. .float-right { float:right; }
  16.  
  17. .clear { clear:both; }
  18. .clear-left { clear: left; }
  19. .clear-left { clear: right; }
  20.  
  21.  
  22. .clearmix {
  23.   :after {
  24.     content: "\0020"; display: block; height: 0; overflow: hidden; clear: both;
  25.   }
  26.   :before {
  27.     content: "\0020"; display: block; height: 0; overflow: hidden;
  28.   }
  29.   zoom: 1;
  30. }
  31.  
  32. .inline-block {
  33.   display: -moz-inline-stack;
  34.   display: inline-block;
  35.   vertical-align: top;
  36.   zoom: 1;
  37.   *display: inline;
  38. }
  39.  
  40. .pie { behavior: url('/PATH-TO-PIE/PIE/PIE.htc'); } // IE fixes  
  41.  
  42. /*Border Radius Functions*/
  43.  
  44. .border_radius(@radius_top_left, @radius_top_right, @radius_bottom_right, @radius_bottom_left) {
  45. -webkit-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
  46. -moz-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
  47. border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
  48. .pie;
  49. }
  50.  
  51. /*Shadows*/
  52. .box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#888) {
  53. box-shadow: @shadow_x @shadow_y @shadow_rad @shadow_color;
  54. -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
  55. -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
  56. .pie;
  57. }
  58.  
  59. .text_shadow(@shadow_color:#fff) {
  60. text-shadow:0 1px 0 @shadow_color;
  61. .pie;
  62. }
  63.  
  64. .opacity(@op:100) {
  65. filter:alpha(opacity=@op);
  66. -moz-opacity:@op/100;
  67. -khtml-opacity:@op/100;
  68. opacity:@op/100;
  69. .pie;
  70. }
  71.  
  72. .background_gradient(@from:#000, @to:#EEE) {
  73. background: @from;
  74. background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
  75. background-image: -moz-linear-gradient(top, @from, @to);
  76. filter: formatstring("progid:DXImageTransform.Microsoft.gradient(startColorstr='{0}', endColorstr='{1}')", @from, @to); /* IE6,IE7 */
  77. -ms-filter: formatstring("\"progid:DXImageTransform.Microsoft.gradient(startColorStr='{0}', EndColorStr='{1}')\"", @from, @to); /* IE8 */
  78. /*.pie;*/
  79. }
  80.  
  81. .transition(@range: all, @time: 1s, @ease: ease-in-out) {
  82. -moz-transition: @range @time @ease;
  83. -webkit-transition: @range @time @ease;
  84. -o-transition: @range @time @ease;
  85. transition: @range @time @ease;
  86. }
  87.  
  88. /*Transformations*/
  89. .skew(@angle_x:35, @angle_y:0) {
  90. -webkit-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  91. -moz-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  92. -o-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  93. -ms-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  94. transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  95. }
  96.  
  97. .scale(@scale_x: 1) {
  98. -webkit-transform: scale(@scale_x);
  99. -moz-transform: scale(@scale_x);
  100. -o-transform: scale(@scale_x);
  101. -ms-transform: scale(@scale_x);
  102. transform: scale(@scale_x);
  103. }
  104.  
  105. .rotate(@deg:35) {
  106. -webkit-transform: rotate(formatstring("{0}deg", @deg));
  107. -moz-transform: rotate(formatstring("{0}deg", @deg));
  108. -o-transform: rotate(formatstring("{0}deg", @deg));
  109. -ms-transform: rotate(formatstring("{0}deg", @deg));
  110. transform: rotate(formatstring("{0}deg", @deg));
  111. }
  112.  
  113. .translate(@move_x: 10px, @move_y: 10px) {
  114. -webkit-transform: translate(@move_x, @move_y);
  115. -moz-transform: translate(@move_x, @move_y);
  116. -o-transform: translate(@move_x, @move_y);
  117. -ms-transform:translate(@move_x, @move_y);
  118. transform: translate(@move_x, @move_y);
  119. }

Report this snippet  

You need to login to post a comment.