diff --git a/CREDITS b/CREDITS new file mode 100644 index 0000000..0d8e97e --- /dev/null +++ b/CREDITS @@ -0,0 +1,15 @@ +--------------------------------------------------- + LESS Elements 0.6.x +--------------------------------------------------- + A set of useful LESS mixins by Dmitry Fadeyev + Special thanks for their contributions to: + Kris Van Herzeele, + Benoit Adam, + Portenart Emile-Victor, + Ryan Faerman, + Ivan E. Mendoza, + melat0nin, + Alexander Yakovlev + + More info at: http://lesselements.com +----------------------------------------------------- \ No newline at end of file diff --git a/elements.less b/elements.less index 0f55551..0e64511 100644 --- a/elements.less +++ b/elements.less @@ -1,138 +1,133 @@ -<<<<<<< HEAD /*! --------------------------------------------------- - LESS Elements 0.6.x + LESS Elements 0.7 --------------------------------------------------- - A set of useful LESS mixins by Dmitry Fadeyev - Special thanks for mixin suggestions to: - Kris Van Herzeele, - Benoit Adam, - Portenart Emile-Victor, - Ryan Faerman - Ivan E. Mendoza + A set of useful LESS mixins. + See CREDITS file for full author list. More info at: http://lesselements.com -----------------------------------------------------*/ #gradients{ - .vertical(@color: #F5F5F5, @start: #EEE, @stop: #FFF, @posStart: 0, @posEnd: 1) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(@posStart, @start), - color-stop(@posEnd, @stop)); - background: -moz-linear-gradient(center bottom, - @start @posStart*100%, - @stop @posEnd*100%); - background: -ms-linear-gradient(bottom, @start @posStart*100%,@stop @posEnd*100%); - filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{stop}', endColorstr='@{start}',GradientType=0)"; - } - .horizontal(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { - background: @color; - background-image: linear-gradient(right , @stop 0%, @start 100%); - background-image: -o-linear-gradient(right , @stop 0%, @start 100%); - background-image: -moz-linear-gradient(right , @stop 0%, @start 100%); - background-image: -webkit-linear-gradient(right , @stop 0%, @start 100%); - background-image: -ms-linear-gradient(right , @stop 0%, @start 100%); - background-image: -webkit-gradient( - linear, - right top, - left top, - color-stop(0, @stop), - color-stop(0.5, @start) - ); - background: -ms-linear-gradient(left, @start 0%,@stop 100%); - filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{stop}', endColorstr='@{start}',GradientType=1)"; - } - .bw(@color: #F5F5F5, @start: 0, @stop: 255) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0, rgb(@start,@start,@start)), - color-stop(1, rgb(@stop,@stop,@stop))); - background: -ms-linear-gradient(bottom, - rgb(@start,@start,@start) 0%, - rgb(@start,@start,@start) 100%); - background: -moz-linear-gradient(center bottom, - rgb(@start,@start,@start) 0%, - rgb(@stop,@stop,@stop) 100%); - } - .none{ - background:none; - filter:none; - } + .vertical(@color: #F5F5F5, @start: #EEE, @stop: #FFF, @posStart: 0, @posEnd: 1) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(@posStart, @start), + color-stop(@posEnd, @stop)); + background: -moz-linear-gradient(center bottom, + @start @posStart*100%, + @stop @posEnd*100%); + background: -ms-linear-gradient(bottom, @start @posStart*100%,@stop @posEnd*100%); + filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{stop}', endColorstr='@{start}',GradientType=0)"; + } + .horizontal(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color; + background-image: linear-gradient(right , @stop 0%, @start 100%); + background-image: -o-linear-gradient(right , @stop 0%, @start 100%); + background-image: -moz-linear-gradient(right , @stop 0%, @start 100%); + background-image: -webkit-linear-gradient(right , @stop 0%, @start 100%); + background-image: -ms-linear-gradient(right , @stop 0%, @start 100%); + background-image: -webkit-gradient( + linear, + right top, + left top, + color-stop(0, @stop), + color-stop(0.5, @start) + ); + background: -ms-linear-gradient(left, @start 0%,@stop 100%); + filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{stop}', endColorstr='@{start}',GradientType=1)"; + } + .bw(@color: #F5F5F5, @start: 0, @stop: 255) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))); + background: -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@start,@start,@start) 100%); + background: -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); + } + .none{ + background:none; + filter:none; + } } #borders{ - .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { - border-top: solid 1px @top-color; - border-left: solid 1px @left-color; - border-right: solid 1px @right-color; - border-bottom: solid 1px @bottom-color; - } - .rounded(@radius: 2px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; - -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; - } - - .radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { - -webkit-border-top-right-radius: @topright; - -webkit-border-bottom-right-radius: @bottomright; - -webkit-border-bottom-left-radius: @bottomleft; - -webkit-border-top-left-radius: @topleft; - -moz-border-radius-topright: @topright; - -moz-border-radius-bottomright: @bottomright; - -moz-border-radius-bottomleft: @bottomleft; - -moz-border-radius-topleft: @topleft; - border-top-right-radius: @topright; - border-bottom-right-radius: @bottomright; - border-bottom-left-radius: @bottomleft; - border-top-left-radius: @topleft; - -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; - } + .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { + border-top: solid 1px @top-color; + border-left: solid 1px @left-color; + border-right: solid 1px @right-color; + border-bottom: solid 1px @bottom-color; + } + .rounded(@radius: 2px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; + } + + .radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { + -webkit-border-top-right-radius: @topright; + -webkit-border-bottom-right-radius: @bottomright; + -webkit-border-bottom-left-radius: @bottomleft; + -webkit-border-top-left-radius: @topleft; + -moz-border-radius-topright: @topright; + -moz-border-radius-bottomright: @bottomright; + -moz-border-radius-bottomleft: @bottomleft; + -moz-border-radius-topleft: @topleft; + border-top-right-radius: @topright; + border-bottom-right-radius: @bottomright; + border-bottom-left-radius: @bottomleft; + border-top-left-radius: @topleft; + -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; + } } #shadows{ - .drop(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1, @color: #000) { - -webkit-box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); - -moz-box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); - box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); - } - .inner(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4, @color: #000) { - -webkit-box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); - -moz-box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); - box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); - } - .box(@arguments) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; - } + .drop(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1, @color: #000) { + -webkit-box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); + -moz-box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); + box-shadow: @x-axis @y-axis @blur fadeout(@color, 100-(@alpha*100)); + } + .inner(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4, @color: #000) { + -webkit-box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); + -moz-box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); + box-shadow: inset @horizontal @vertical @blur fadeout(@color, 100-(@alpha*100)); + } + .box(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; + } } #transform{ - .rotation(@deg:5deg){ - -webkit-transform: rotate(@deg); - -moz-transform: rotate(@deg); - transform: rotate(@deg); - } - .scale(@ratio:1.5){ - -webkit-transform:scale(@ratio); - -moz-transform:scale(@ratio); - transform:scale(@ratio); - } - .translate(@x:0, @y:0) { - -moz-transform: translate(@x, @y); - -webkit-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - transform: translate(@x, @y); - } - .opacity(@opacity: 0.5) { + .rotation(@deg:5deg){ + -webkit-transform: rotate(@deg); + -moz-transform: rotate(@deg); + transform: rotate(@deg); + -ms-transform: rotate(@deg); + } + .scale(@ratio:1.5){ + -webkit-transform:scale(@ratio); + -moz-transform:scale(@ratio); + transform:scale(@ratio); + } + .translate(@x:0, @y:0) { + -moz-transform: translate(@x, @y); + -webkit-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + transform: translate(@x, @y); + } + .opacity(@opacity: 0.5) { @percent: @opacity * 100; /* IE 8 */ -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{percent})"; @@ -150,43 +145,43 @@ } #transition{ - .all(@duration:0.2s, @ease:ease-out) { - -webkit-transition: all @duration @ease; - -moz-transition: all @duration @ease; - transition: all @duration @ease; - } - .property(@property: width,@delay: 200ms, @ease:ease-out){ - transition: @property @delay @ease; - -moz-transition: @property @delay @ease; - -webkit-transition: @property @delay @ease; - -o-transition: @property @delay @ease; - } - .duration(@duration: 0.2s) { - -moz-transition-duration: @duration; - -webkit-transition-duration: @duration; - transition-duration: @duration; - } + .all(@duration:0.2s, @ease:ease-out) { + -webkit-transition: all @duration @ease; + -moz-transition: all @duration @ease; + transition: all @duration @ease; + } + .property(@property: width,@delay: 200ms, @ease:ease-out){ + transition: @property @delay @ease; + -moz-transition: @property @delay @ease; + -webkit-transition: @property @delay @ease; + -o-transition: @property @delay @ease; + } + .duration(@duration: 0.2s) { + -moz-transition-duration: @duration; + -webkit-transition-duration: @duration; + transition-duration: @duration; + } } #content{ - .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { - -moz-column-width: @colwidth; - -moz-column-count: @colcount; - -moz-column-gap: @colgap; - -moz-column-rule-color: @columnRuleColor; - -moz-column-rule-style: @columnRuleStyle; - -moz-column-rule-width: @columnRuleWidth; - -webkit-column-width: @colwidth; - -webkit-column-count: @colcount; - -webkit-column-gap: @colgap; - -webkit-column-rule-color: @columnRuleColor; - -webkit-column-rule-style: @columnRuleStyle; - -webkit-column-rule-width: @columnRuleWidth; - column-width: @colwidth; - column-count: @colcount; - column-gap: @colgap; - column-rule-color: @columnRuleColor; - column-rule-style: @columnRuleStyle; - column-rule-width: @columnRuleWidth; - } + .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { + -moz-column-width: @colwidth; + -moz-column-count: @colcount; + -moz-column-gap: @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + -webkit-column-width: @colwidth; + -webkit-column-count: @colcount; + -webkit-column-gap: @colgap; + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + column-width: @colwidth; + column-count: @colcount; + column-gap: @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; + } } \ No newline at end of file