├── README.md └── elements.less /README.md: -------------------------------------------------------------------------------- 1 | LESS Elements 2 | ============= 3 | 4 | A set of useful mixins for LESS, the CSS pre-processor: 5 | 6 | More information and usage examples over at: 7 | 8 | Oreolek has a good fork with the mixins organized under namespaces here: https://github.com/Oreolek/elements 9 | I recommend going with that if you use other frameworks like Bootstrap to avoid clashes. 10 | 11 | TextMate bundle: 12 | 13 | License: This work is dedicated to the public domain and is free for all uses, commercial or otherwise. No form of credit required. -------------------------------------------------------------------------------- /elements.less: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------- 2 | LESS Elements 0.7 3 | --------------------------------------------------- 4 | A set of useful LESS mixins 5 | More info at: http://lesselements.com 6 | ---------------------------------------------------*/ 7 | 8 | .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { 9 | background: @color; 10 | background: -webkit-gradient(linear, 11 | left bottom, 12 | left top, 13 | color-stop(0, @start), 14 | color-stop(1, @stop)); 15 | background: -ms-linear-gradient(bottom, 16 | @start, 17 | @stop); 18 | background: -moz-linear-gradient(center bottom, 19 | @start 0%, 20 | @stop 100%); 21 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); 22 | } 23 | .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { 24 | background: @color; 25 | background: -webkit-gradient(linear, 26 | left bottom, 27 | left top, 28 | color-stop(0, rgb(@start,@start,@start)), 29 | color-stop(1, rgb(@stop,@stop,@stop))); 30 | background: -ms-linear-gradient(bottom, 31 | rgb(@start,@start,@start) 0%, 32 | rgb(@stop,@stop,@stop) 100%); 33 | background: -moz-linear-gradient(center bottom, 34 | rgb(@start,@start,@start) 0%, 35 | rgb(@stop,@stop,@stop) 100%); 36 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); 37 | } 38 | .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { 39 | border-top: solid 1px @top-color; 40 | border-left: solid 1px @left-color; 41 | border-right: solid 1px @right-color; 42 | border-bottom: solid 1px @bottom-color; 43 | } 44 | .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { 45 | -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 46 | -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 47 | box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 48 | } 49 | .rounded(@radius: 2px) { 50 | -webkit-border-radius: @radius; 51 | -moz-border-radius: @radius; 52 | border-radius: @radius; 53 | -moz-background-clip: padding; 54 | -webkit-background-clip: padding-box; 55 | background-clip: padding-box; 56 | } 57 | .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { 58 | -webkit-border-top-right-radius: @topright; 59 | -webkit-border-bottom-right-radius: @bottomright; 60 | -webkit-border-bottom-left-radius: @bottomleft; 61 | -webkit-border-top-left-radius: @topleft; 62 | -moz-border-radius-topright: @topright; 63 | -moz-border-radius-bottomright: @bottomright; 64 | -moz-border-radius-bottomleft: @bottomleft; 65 | -moz-border-radius-topleft: @topleft; 66 | border-top-right-radius: @topright; 67 | border-bottom-right-radius: @bottomright; 68 | border-bottom-left-radius: @bottomleft; 69 | border-top-left-radius: @topleft; 70 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 71 | } 72 | .opacity(@opacity: 0.5) { 73 | -moz-opacity: @opacity; 74 | -khtml-opacity: @opacity; 75 | -webkit-opacity: @opacity; 76 | opacity: @opacity; 77 | @opperc: @opacity * 100; 78 | -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; 79 | filter: ~"alpha(opacity=@{opperc})"; 80 | } 81 | .transition-duration(@duration: 0.2s) { 82 | -moz-transition-duration: @duration; 83 | -webkit-transition-duration: @duration; 84 | transition-duration: @duration; 85 | } 86 | .rotation(@deg:5deg){ 87 | -webkit-transform: rotate(@deg); 88 | -moz-transform: rotate(@deg); 89 | -ms-transform: rotate(@deg); 90 | transform: rotate(@deg); 91 | } 92 | .scale(@ratio:1.5){ 93 | -webkit-transform:scale(@ratio); 94 | -moz-transform:scale(@ratio); 95 | transform:scale(@ratio); 96 | } 97 | .transition(@duration:0.2s, @ease:ease-out) { 98 | -webkit-transition: all @duration @ease; 99 | -moz-transition: all @duration @ease; 100 | transition: all @duration @ease; 101 | } 102 | .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { 103 | -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 104 | -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 105 | box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 106 | } 107 | .box-shadow(@arguments) { 108 | -webkit-box-shadow: @arguments; 109 | -moz-box-shadow: @arguments; 110 | box-shadow: @arguments; 111 | } 112 | .box-sizing(@sizing: border-box) { 113 | -ms-box-sizing: @sizing; 114 | -moz-box-sizing: @sizing; 115 | -webkit-box-sizing: @sizing; 116 | box-sizing: @sizing; 117 | } 118 | .user-select(@argument: none) { 119 | -webkit-user-select: @argument; 120 | -moz-user-select: @argument; 121 | -ms-user-select: @argument; 122 | user-select: @argument; 123 | } 124 | .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { 125 | -moz-column-width: @colwidth; 126 | -moz-column-count: @colcount; 127 | -moz-column-gap: @colgap; 128 | -moz-column-rule-color: @columnRuleColor; 129 | -moz-column-rule-style: @columnRuleStyle; 130 | -moz-column-rule-width: @columnRuleWidth; 131 | -webkit-column-width: @colwidth; 132 | -webkit-column-count: @colcount; 133 | -webkit-column-gap: @colgap; 134 | -webkit-column-rule-color: @columnRuleColor; 135 | -webkit-column-rule-style: @columnRuleStyle; 136 | -webkit-column-rule-width: @columnRuleWidth; 137 | column-width: @colwidth; 138 | column-count: @colcount; 139 | column-gap: @colgap; 140 | column-rule-color: @columnRuleColor; 141 | column-rule-style: @columnRuleStyle; 142 | column-rule-width: @columnRuleWidth; 143 | } 144 | .translate(@x:0, @y:0) { 145 | -moz-transform: translate(@x, @y); 146 | -webkit-transform: translate(@x, @y); 147 | -o-transform: translate(@x, @y); 148 | -ms-transform: translate(@x, @y); 149 | transform: translate(@x, @y); 150 | } 151 | 152 | --------------------------------------------------------------------------------