├── .gitignore ├── README.md └── vendor_prefixes.less /.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | LESSCSS mixins file of vendor prefixes for CSS3 2 | 3 | ###Use: 4 | 5 | #someElement { 6 | .box-shadow(); 7 | // or 8 | .transition(all, 1s); 9 | } 10 | 11 | ###Mixins available 12 | 13 | * .border-radius(); 14 | * .outline-radius(); 15 | * .box-shadow(); 16 | * .transition(); 17 | * .transform(); 18 | * .box(); 19 | * .flex(); 20 | * .resize(); 21 | * .linear-gradient(); 22 | * .double-borders(); 23 | * .triple-borders(); 24 | * .colomns(); 25 | * .box-sizing(); 26 | * .text-shadow(); -------------------------------------------------------------------------------- /vendor_prefixes.less: -------------------------------------------------------------------------------- 1 | // Vendor prefix mixin for LESS CSS 2 | // 3 | // Derek Allard 4 | // http://derekallard.com 5 | // 6 | // Note that only Safari, Chrome, Firefox are covered despite 7 | // the fact that there are at least 15 vendors using prefixes 8 | // today "in the wild" 9 | 10 | .border-radius( @radius: 3px ) { 11 | -webkit-border-radius: @radius; 12 | -moz-border-radius: @radius; 13 | border-radius: @radius; 14 | } 15 | 16 | .outline-radius( @radius: 3px ) { 17 | -webkit-outline-radius: @radius; 18 | -moz-outline-radius: @radius; 19 | outline-radius: @radius; 20 | } 21 | 22 | .box-shadow( 23 | @x : 2px, 24 | @y : 2px, 25 | @blur : 5px, 26 | @spread : 0, 27 | @color : rgba(0,0,0,.6) 28 | ) { 29 | -webkit-box-shadow: @x @y @blur @spread @color; 30 | -moz-box-shadow: @x @y @blur @spread @color; 31 | box-shadow: @x @y @blur @spread @color; 32 | } 33 | 34 | .transition( 35 | @what : all, 36 | @length : 1s, 37 | @easing : ease-in-out 38 | ) { 39 | -webkit-transition: @what @length @easing; 40 | -moz-transition: @what @length @easing; 41 | -o-transition: @what @length @easing; 42 | transition: @what @length @easing; 43 | } 44 | 45 | .transform( 46 | @params 47 | ) { 48 | -webkit-transform: @params; 49 | -moz-transform: @params; 50 | -o-transform: @params; 51 | transform: @params; 52 | } 53 | 54 | .box( 55 | @orient : horizontal, 56 | @pack : center, 57 | @align : center 58 | ) { 59 | display: -webkit-box; 60 | display: -moz-box; 61 | display: box; 62 | 63 | -webkit-box-orient: @orient; 64 | -moz-box-orient: @orient; 65 | box-orient: @orient; 66 | 67 | -webkit-box-pack: @pack; 68 | -moz-box-pack: @pack; 69 | box-pack: @pack; 70 | 71 | -webkit-box-align: @align; 72 | -moz-box-align: @align; 73 | box-align: @align; 74 | } 75 | 76 | .flex( @val : 1 ) { 77 | -webkit-box-flex: @val; 78 | -moz-box-flex: @val; 79 | box-flex: @val; 80 | } 81 | 82 | .resize( @direction ) { 83 | -webkit-resize: @direction; 84 | -moz-resize: @direction; 85 | resize: @direction; 86 | } 87 | 88 | .linear-gradient( 89 | @begin: black, 90 | @end: white, 91 | @switch : 100% 92 | ) { 93 | background: @begin; 94 | background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end)); 95 | background: -moz-linear-gradient(top, @begin, @end @switch); 96 | background: -o-linear-gradient(top, @begin, @end @switch); 97 | background: linear-gradient(top, @begin, @end @switch); 98 | } 99 | 100 | .radial-gradient( 101 | @begin: black, 102 | @end: white, 103 | @switch : 100% 104 | ) { 105 | background: @begin; 106 | 107 | background: -moz-radial-gradient(center, ellipse cover, @begin 0%, @end @switch); 108 | background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, @begin), color-stop(@switch, @end)); 109 | background: -webkit-radial-gradient(center, circle cover, @begin 0%, @end @switch); 110 | background: -o-radial-gradient(center, ellipse cover, @begin 0%, @end @switch); 111 | background: radial-gradient(ellipse at center, @begin 0%, @end @switch); 112 | 113 | /* ie support */ 114 | background: -ms-radial-gradient(center, ellipse cover, @begin 0%, @end @switch); 115 | filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{begin}', endColorstr='@{end}', GradientType=1)"; 116 | } 117 | 118 | .double-borders( 119 | @colorOne : green, 120 | @colorTwo : red, 121 | @radius : 0 122 | ) { 123 | border: 1px solid @colorOne; 124 | 125 | -webkit-box-shadow: 0 0 0 1px @colorTwo; 126 | -moz-box-shadow: 0 0 0 1px @colorTwo; 127 | box-shadow: 0 0 0 1px @colorTwo; 128 | 129 | .border-radius( @radius ); 130 | } 131 | 132 | .triple-borders( 133 | @colorOne : green, 134 | @colorTwo : red, 135 | @colorThree : blue, 136 | @radius : 0 137 | ) { 138 | border: 1px solid @colorOne; 139 | 140 | .border-radius( @radius ); 141 | 142 | -webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree; 143 | -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree; 144 | box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree; 145 | } 146 | 147 | .columns( 148 | @count : 3, 149 | @gap : 10 150 | ) { 151 | -webkit-column-count: @count; 152 | -moz-column-count: @count; 153 | column-count: @count; 154 | 155 | -webkit-column-gap: @gap; 156 | -moz-column-gap: @gap; 157 | column-gap: @gap; 158 | } 159 | 160 | .column-span-all () { 161 | -webkit-column-span: all; 162 | -moz-column-span: all; 163 | column-span: all; 164 | } 165 | 166 | .box-sizing( @type : border-box ) { 167 | -webkit-box-sizing: @type; 168 | -moz-box-sizing: @type; 169 | box-sizing: @type; 170 | } 171 | 172 | .text-shadow( 173 | @color : #000, 174 | @xPos : 0px, 175 | @yPos : 0px, 176 | @blur : 0px 177 | ) { 178 | -webkit-text-shadow: @xPos @yPos @blur @color; 179 | -moz-text-shadow: @xPos @yPos @blur @color; 180 | -ms-text-shadow: @xPos @yPos @blur @color; 181 | -o-text-shadow: @xPos @yPos @blur @color; 182 | text-shadow: @xPos @yPos @blur @color; 183 | } --------------------------------------------------------------------------------