From 4fa515db71482605141c622056973f58ac4512f5 Mon Sep 17 00:00:00 2001 From: Moe <444984@qq.com> Date: Tue, 14 May 2013 19:37:42 +0800 Subject: [PATCH 1/5] 1 --- examples/layout/fluid/fluid.html | 2 +- examples/layout/waterfalls/demo.less | 18 ++++++++ examples/layout/waterfalls/waterfall.html | 53 +++++++++++++++++++++++ examples/layout/waterfalls/waterfall.less | 21 +++++++++ src/layout/_waterfall.less | 11 +++++ 5 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 examples/layout/waterfalls/demo.less create mode 100644 examples/layout/waterfalls/waterfall.html create mode 100644 examples/layout/waterfalls/waterfall.less create mode 100644 src/layout/_waterfall.less diff --git a/examples/layout/fluid/fluid.html b/examples/layout/fluid/fluid.html index bc1a118..f133e0e 100644 --- a/examples/layout/fluid/fluid.html +++ b/examples/layout/fluid/fluid.html @@ -7,7 +7,7 @@ -
+
diff --git a/examples/layout/waterfalls/demo.less b/examples/layout/waterfalls/demo.less new file mode 100644 index 0000000..4e4e6e6 --- /dev/null +++ b/examples/layout/waterfalls/demo.less @@ -0,0 +1,18 @@ +@import '../../veryless-1.0.0.less'; +@import 'waterfall.less'; +.makeWaterfall(); + +*{margin:0;padding: 0;} +body{ + font-size: 100%; + background: #260810 url(http://img01.taobaocdn.com/tps/i1/T1I0MdXfFgXXcvIGcw-1680-1005.jpg) no-repeat 50% 0; +} +.row-fluid{ + margin-bottom: 1em; +} +.span{ + background: blue; + opacity: 0.6; + height: 3em; + margin:10px; +} \ No newline at end of file diff --git a/examples/layout/waterfalls/waterfall.html b/examples/layout/waterfalls/waterfall.html new file mode 100644 index 0000000..12c51a6 --- /dev/null +++ b/examples/layout/waterfalls/waterfall.html @@ -0,0 +1,53 @@ + + + + Fluid Grid - VeryLess + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/examples/layout/waterfalls/waterfall.less b/examples/layout/waterfalls/waterfall.less new file mode 100644 index 0000000..8e12d92 --- /dev/null +++ b/examples/layout/waterfalls/waterfall.less @@ -0,0 +1,21 @@ +//** +// * +// * Fluid Layout +// * +// * @author 飞长 +// * +// */ + + +.makeWaterfall(@columnWidth: 300px){ + + .fall (@columnWidth) { + .row-fall{ + width:@columnWidth; + } + } + + .fall{ + .fall (@columnWidth); + } +} \ No newline at end of file diff --git a/src/layout/_waterfall.less b/src/layout/_waterfall.less new file mode 100644 index 0000000..31953eb --- /dev/null +++ b/src/layout/_waterfall.less @@ -0,0 +1,11 @@ +//** +// * +// * Waterfalls Layout +// * +// * @author moe <444984@qq.com> +// * +// */ + +.makeFalls(@colums: 3, @columMaxHeight: 200px, @margin: 10px){ + +} \ No newline at end of file From 34159dd712b3894f1cae77de097ecdf281c8f1f2 Mon Sep 17 00:00:00 2001 From: Moe <444984@qq.com> Date: Wed, 15 May 2013 18:53:14 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/layout/waterfalls/demo.less | 2 +- examples/layout/waterfalls/less.js | 9 + .../layout/waterfalls/veryless-1.0.0.less | 659 ++++++++++++++++++ examples/layout/waterfalls/waterfall.html | 12 +- examples/layout/waterfalls/waterfall.less | 27 +- 5 files changed, 698 insertions(+), 11 deletions(-) create mode 100644 examples/layout/waterfalls/less.js create mode 100644 examples/layout/waterfalls/veryless-1.0.0.less diff --git a/examples/layout/waterfalls/demo.less b/examples/layout/waterfalls/demo.less index 4e4e6e6..a8c5499 100644 --- a/examples/layout/waterfalls/demo.less +++ b/examples/layout/waterfalls/demo.less @@ -1,4 +1,4 @@ -@import '../../veryless-1.0.0.less'; +@import 'veryless-1.0.0.less'; @import 'waterfall.less'; .makeWaterfall(); diff --git a/examples/layout/waterfalls/less.js b/examples/layout/waterfalls/less.js new file mode 100644 index 0000000..309bf55 --- /dev/null +++ b/examples/layout/waterfalls/less.js @@ -0,0 +1,9 @@ +// +// LESS - Leaner CSS v1.3.0 +// http://lesscss.org +// +// Copyright (c) 2009-2011, Alexis Sellier +// Licensed under the Apache 2.0 License. +// +(function(a,b){function c(b){return a.less[b.split("/")[1]]}function l(){var a=document.getElementsByTagName("style");for(var b=0;b0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function q(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0||g.status>=200&&g.status<300?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return t("browser doesn't support AJAX."),null}}function s(a){return a&&a.parentNode.removeChild(a)}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function u(a,b){var c="less-error-message:"+o(b),e='
  • {content}
    • ',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="

    "+(a.message||"There is an error in your .less file")+"

    "+'

    in '+j+" ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="
    "+a.stack.split("\n").slice(1).join("
    "):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":

    "+"
      "+i.join("")+"
    "),f.innerHTML=h,p([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d>>0,c=new Array(b),d=arguments[1];for(var e=0;e>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c=b)return-1;c<0&&(c+=b);for(;cl&&(k[g]=k[g].slice(f-l),l=f)}function t(a){var c,d,e,h,i,j,n,o;if(a instanceof Function)return a.call(m.parsers);if(typeof a=="string")c=b.charAt(f)===a?a:null,e=1,s();else{s();if(c=a.exec(k[g]))e=c[0].length;else return null}if(c){o=f+=e,j=f+k[g].length-e;while(f=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function A(a,b){var c=y(a,b),d=z(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&z(a.call,c).line+1,this.callExtract=g[z(a.call,c).line],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var b,f,g,h,i,j,k,l,m,n=this,o=function(){},p=this.imports={paths:a&&a.paths||[],queue:[],files:{},contents:{},mime:a&&a.mime,error:null,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a,d,f){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=d,e.contents[b]=f,a&&!e.error&&(e.error=a),c(a,d),e.queue.length===0&&o()},a)}};return this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,m={imports:p,parse:function(h,i){var n,p,q,r,s,u,v=[],w,x=null;f=g=l=j=0,b=h.replace(/\r\n/g,"\n"),k=function(c){var d=0,e=/[^"'`\{\}\/\(\)\\]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=c[0],k;for(var l=0,m,n;l0&&(x=new A({index:l,type:"Parse",message:"missing closing `}`",filename:a.filename},a)),c.map(function(a){return a.join("")})}([[]]);if(x)return i(x);try{n=new e.Ruleset([],t(this.parsers.primary)),n.root=!0}catch(y){return i(new A(y,a))}n.toCSS=function(b){var f,g,h;return function(f,g){var h=[],i;f=f||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b])),new e.Rule("@"+a,b,!1,0)}),h=[new e.Ruleset(null,g)]);try{var j=b.call(this,{frames:h}).toCSS([],{compress:f.compress||!1})}catch(k){throw new A(k,a)}if(i=m.imports.error)throw i instanceof A?i:new A(i,a);return f.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):f.compress?j.replace(/(\s)+/g,"$1"):j}}(n.eval);if(f=0&&b.charAt(z)!=="\n";z--)B++;x={type:"Parse",message:"Syntax Error on line "+s,index:f,filename:a.filename,line:s,column:B,extract:[u[s-2],u[s-1],u[s]]}}this.imports.queue.length>0?o=function(){i(x,n)}:i(x,n)},parsers:{primary:function(){var a,b=[];while((a=t(this.mixin.definition)||t(this.rule)||t(this.ruleset)||t(this.mixin.call)||t(this.comment)||t(this.directive))||t(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(f)!=="/")return;if(b.charAt(f+1)==="/")return new e.Comment(t(/^\/\/.*/),!0);if(a=t(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)},entities:{quoted:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=='"'&&b.charAt(c)!=="'")return;d&&t("~");if(a=t(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],d)},keyword:function(){var a;if(a=t(/^[_A-Za-z-][_A-Za-z0-9-]*/))return e.colors.hasOwnProperty(a)?new e.Color(e.colors[a].slice(1)):new e.Keyword(a)},call:function(){var b,c,d=f;if(!(b=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(k[g])))return;b=b[1].toLowerCase();if(b==="url")return null;f+=b.length;if(b==="alpha")return t(this.alpha);t("("),c=t(this.entities.arguments);if(!t(")"))return;if(b)return new e.Call(b,c,d,a.filename)},arguments:function(){var a=[],b;while(b=t(this.entities.assignment)||t(this.expression)){a.push(b);if(!t(","))break}return a},literal:function(){return t(this.entities.dimension)||t(this.entities.color)||t(this.entities.quoted)},assignment:function(){var a,b;if((a=t(/^\w+(?=\s?=)/i))&&t("=")&&(b=t(this.entity)))return new e.Assignment(a,b)},url:function(){var a;if(b.charAt(f)!=="u"||!t(/^url\(/))return;return a=t(this.entities.quoted)||t(this.entities.variable)||t(this.entities.dataURI)||t(/^[-\w%@$\/.&=:;#+?~]+/)||"",u(")"),new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),p.paths)},dataURI:function(){var a;if(t(/^data:/)){a={},a.mime=t(/^[^\/]+\/[^,;)]+/)||"",a.charset=t(/^;\s*charset=[^,;)]+/)||"",a.base64=t(/^;\s*base64/)||"",a.data=t(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var c,d=f;if(b.charAt(f)==="@"&&(c=t(/^@@?[\w-]+/)))return new e.Variable(c,d,a.filename)},color:function(){var a;if(b.charAt(f)==="#"&&(a=t(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,c=b.charCodeAt(f);if(c>57||c<45||c===47)return;if(a=t(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=="`")return;d&&t("~");if(a=t(/^`([^`]*)`/))return new e.JavaScript(a[1],f,d)}},variable:function(){var a;if(b.charAt(f)==="@"&&(a=t(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!w(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=t(this.entity))&&t("/")&&(b=t(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var c=[],d,g,h,i=f,j=b.charAt(f),k=!1;if(j!=="."&&j!=="#")return;while(d=t(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))c.push(new e.Element(g,d,f)),g=t(">");t("(")&&(h=t(this.entities.arguments))&&t(")"),t(this.important)&&(k=!0);if(c.length>0&&(t(";")||w("}")))return new e.mixin.Call(c,h||[],i,a.filename,k)},definition:function(){var a,c=[],d,g,h,i,j,k=!1;if(b.charAt(f)!=="."&&b.charAt(f)!=="#"||w(/^[^{]*(;|})/))return;q();if(d=t(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=d[1];do{if(b.charAt(f)==="."&&t(/^\.{3}/)){k=!0;break}if(!(h=t(this.entities.variable)||t(this.entities.literal)||t(this.entities.keyword)))break;if(h instanceof e.Variable)if(t(":"))i=u(this.expression,"expected expression"),c.push({name:h.name,value:i});else{if(t(/^\.{3}/)){c.push({name:h.name,variadic:!0}),k=!0;break}c.push({name:h.name})}else c.push({value:h})}while(t(","));u(")"),t(/^when/)&&(j=u(this.conditions,"expected condition")),g=t(this.block);if(g)return new e.mixin.Definition(a,c,g,j,k);r()}}},entity:function(){return t(this.entities.literal)||t(this.entities.variable)||t(this.entities.url)||t(this.entities.call)||t(this.entities.keyword)||t(this.entities.javascript)||t(this.comment)},end:function(){return t(";")||w("}")},alpha:function(){var a;if(!t(/^\(opacity=/i))return;if(a=t(/^\d+/)||t(this.entities.variable))return u(")"),new e.Alpha(a)},element:function(){var a,b,c,d;c=t(this.combinator),a=t(/^(?:\d+\.\d+|\d+)%/)||t(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||t("*")||t(this.attribute)||t(/^\([^)@]+\)/),a||t("(")&&(d=t(this.entities.variable))&&t(")")&&(a=new e.Paren(d));if(a)return new e.Element(c,a,f);if(c.value&&c.value.charAt(0)==="&")return new e.Element(c,null,f)},combinator:function(){var a,c=b.charAt(f);if(c===">"||c==="+"||c==="~"){f++;while(b.charAt(f)===" ")f++;return new e.Combinator(c)}if(c==="&"){a="&",f++,b.charAt(f)===" "&&(a="& ");while(b.charAt(f)===" ")f++;return new e.Combinator(a)}return b.charAt(f-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,c,d=[],g,h;if(t("("))return a=t(this.entity),u(")"),new e.Selector([new e.Element("",a,f)]);while(c=t(this.element)){g=b.charAt(f),d.push(c);if(g==="{"||g==="}"||g===";"||g===",")break}if(d.length>0)return new e.Selector(d)},tag:function(){return t(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||t("*")},attribute:function(){var a="",b,c,d;if(!t("["))return;if(b=t(/^[a-zA-Z-]+/)||t(this.entities.quoted))(d=t(/^[|~*$^]?=/))&&(c=t(this.entities.quoted)||t(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!t("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(t("{")&&(a=t(this.primary))&&t("}"))return a},ruleset:function(){var b=[],c,d,g;q();while(c=t(this.selector)){b.push(c),t(this.comment);if(!t(","))break;t(this.comment)}if(b.length>0&&(d=t(this.block)))return new e.Ruleset(b,d,a.strictImports);j=f,r()},rule:function(){var a,c,d=b.charAt(f),h,l;q();if(d==="."||d==="#"||d==="&")return;if(a=t(this.variable)||t(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(k[g]))?(f+=l[0].length-1,c=new e.Anonymous(l[1])):a==="font"?c=t(this.font):c=t(this.value),h=t(this.important);if(c&&t(this.end))return new e.Rule(a,c,h,i);j=f,r()}},"import":function(){var a,b,c=f;if(t(/^@import\s+/)&&(a=t(this.entities.quoted)||t(this.entities.url))){b=t(this.mediaFeatures);if(t(";"))return new e.Import(a,p,b,c)}},mediaFeature:function(){var a,b,c=[];do if(a=t(this.entities.keyword))c.push(a);else if(t("(")){b=t(this.property),a=t(this.entity);if(!t(")"))return null;if(b&&a)c.push(new e.Paren(new e.Rule(b,a,null,f,!0)));else if(a)c.push(new e.Paren(a));else return null}while(a);if(c.length>0)return new e.Expression(c)},mediaFeatures:function(){var a,b=[];do if(a=t(this.mediaFeature)){b.push(a);if(!t(","))break}else if(a=t(this.entities.variable)){b.push(a);if(!t(","))break}while(a);return b.length>0?b:null},media:function(){var a,b;if(t(/^@media/)){a=t(this.mediaFeatures);if(b=t(this.block))return new e.Media(b,a)}},directive:function(){var a,c,d,g,h,i;if(b.charAt(f)!=="@")return;if(c=t(this["import"])||t(this.media))return c;if(a=t(/^@page|@keyframes/)||t(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){g=(t(/^[^{]+/)||"").trim();if(d=t(this.block))return new e.Directive(a+" "+g,d)}else if(a=t(/^@[-a-z]+/))if(a==="@font-face"){if(d=t(this.block))return new e.Directive(a,d)}else if((c=t(this.entity))&&t(";"))return new e.Directive(a,c)},font:function(){var a=[],b=[],c,d,f,g;while(g=t(this.shorthand)||t(this.entity))b.push(g);a.push(new e.Expression(b));if(t(","))while(g=t(this.expression)){a.push(g);if(!t(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=t(this.expression)){b.push(a);if(!t(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(f)==="!")return t(/^! *important/)},sub:function(){var a;if(t("(")&&(a=t(this.expression))&&t(")"))return a},multiplication:function(){var a,b,c,d;if(a=t(this.operand)){while(!w(/^\/\*/)&&(c=t("/")||t("*"))&&(b=t(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,c,d,g;if(a=t(this.multiplication)){while((d=t(/^[-+]\s+/)||b.charAt(f-1)!=" "&&(t("+")||t("-")))&&(c=t(this.multiplication)))g=new e.Operation(d,[g||a,c]);return g||a}},conditions:function(){var a,b,c=f,d;if(a=t(this.condition)){while(t(",")&&(b=t(this.condition)))d=new e.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,g=f,h=!1;t(/^not/)&&(h=!0),u("(");if(a=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))return(d=t(/^(?:>=|=<|[<=>])/))?(b=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))?c=new e.Condition(d,a,b,g,h):v("expected expression"):c=new e.Condition("=",a,new e.Keyword("true"),g,h),u(")"),t(/^and/)?new e.Condition("and",c,t(this.condition)):c},operand:function(){var a,c=b.charAt(f+1);b.charAt(f)==="-"&&(c==="@"||c==="(")&&(a=t("-"));var d=t(this.sub)||t(this.entities.dimension)||t(this.entities.color)||t(this.entities.variable)||t(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),d]):d},expression:function(){var a,b,c=[],d;while(a=t(this.addition)||t(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=t(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),n({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else if(c.compare)e=c.compare(b);else throw{type:"Type",message:"Unable to perform comparison",index:d};switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e1){var d=new a.Element("&",null,0),e=[new a.Selector([d])];c=new a.Ruleset(e,b.mediaBlocks),c.multiMedia=!0}return delete b.mediaBlocks,delete b.mediaPath,c},evalNested:function(b){var c,d,e=b.mediaPath.concat([this]);for(c=0;c0;c--)b.splice(c,0,new a.Anonymous("and"));return new a.Expression(b)})),new a.Ruleset([],[])},permute:function(a){if(a.length===0)return[];if(a.length===1)return a[0];var b=[],c=this.permute(a.slice(1));for(var d=0;d0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;gthis.params.length)return!1;if(this.required>0&&c>this.params.length)return!1}if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;fe.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var f=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&m(function(a,b,c,d,e){b&&p(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k +// */ + +.clearfix() { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; + } + &:after { + clear: both; + } +} +//** +// * background-clip 背景覆盖的位置 +// * @params [ border-box || padding-box || content-box] +// * @author 飞长 +// */ + +.background-clip(@background-clip: border-box){ + -moz-background-clip: @background-clip; + -webkit-background-clip: @background-clip; + background-clip: @background-clip; +} +//** +// * background-origin 背景开始的位置 +// * @params [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]* +// * @author 飞长 +// */ + +.background-origin(@background-origin: padding-box){ + -moz-background-origin: @background-origin; + -webkit-background-origin: @background-origin; + background-origin: @background-origin; +} +//** +// * background-size 背景尺寸 +// * @params [ [ | | auto ]{1,2} | cover | contain ]# +// * @author 飞长 +// */ + +.background-size(@background-size: auto){ + -moz-background-size: @background-size; + -webkit-background-size: @background-size; + -o-background-size: @background-size; + background-size: @background-size; +} + +//** +// * border-image +// * @params <'border-image-source'> || <'border-image-slice'> +// * [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> +// * @author 飞长 +// * 存在问题 +// */ + +.border-image(@url, @width, @repeat){ + border: '@{width} solid transparent'; + -moz-border-image:'url(@{url}) @width @width @repeat'; + -webkit-border-image:'url(@{url}) @width @width @repeat'; + -o-border-image:'url(@{url}) @width @width @repeat'; + border-image:'url(@{url}) @width @width @repeat'; +} +//** +// * border-radius +// * @author 飞长 +// */ + +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +//单角 +.border-top-left-radius(@radius: 5px) { + -webkit-border-top-left-radius: @radius; + -moz-border-radius-topleft: @radius; + border-top-left-radius: @radius; +} +.border-top-right-radius(@radius: 5px) { + -webkit-border-top-right-radius: @radius; + -moz-border-radius-topright: @radius; + border-top-right-radius: @radius; +} +.border-bottom-right-radius(@radius: 5px) { + -webkit-border-bottom-right-radius: @radius; + -moz-border-radius-bottomright: @radius; + border-bottom-right-radius: @radius; +} +.border-bottom-left-radius(@radius: 5px) { + -webkit-border-bottom-left-radius: @radius; + -moz-border-radius-bottomleft: @radius; + border-bottom-left-radius: @radius; +} + +//单边 +.border-top-radius(@radius: 5px) { + .border-top-right-radius(@radius); + .border-top-left-radius(@radius); +} +.border-right-radius(@radius: 5px) { + .border-top-right-radius(@radius); + .border-bottom-right-radius(@radius); +} +.border-bottom-radius(@radius: 5px) { + .border-bottom-right-radius(@radius); + .border-bottom-left-radius(@radius); +} +.border-left-radius(@radius: 5px) { + .border-top-left-radius(@radius); + .border-bottom-left-radius(@radius); +} +//** +// * border-shadow +// * @params none | [inset? && [ ? ? ? ] ]# +// * none | [内映射? && [横向平移 纵向平移 模糊? 扩散? 颜色?]]# +// * @author 飞长 +// */ + +.box-shadow(@shadow: 5px 5px 10px #cccccc) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; +} + +//** +// * box-sizing 盒模型计算方式 +// * @params content-box padding-box border-box +// * @author 飞长 +// */ + +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} +//** +// * column-count +// * @type {[type]} +// * @author 飞长 +// */ +.content-columns(@columnCount, @columnGap: @gridGutterWidth) { + -webkit-column-count: @columnCount; + -moz-column-count: @columnCount; + column-count: @columnCount; + -webkit-column-gap: @columnGap; + -moz-column-gap: @columnGap; + column-gap: @columnGap; +} +//** +// * font-face 自定义字体 +// * @params @path: 字体路径; @font-name: 字体名字; 需要同时存在eot woff ttf svg +// * @author 飞长 +// */ + +.font-face(@path, @font-name){ + @font-face{ + font-family: @font-name; + src: url('@path/@{font-name}.eot'); /* IE9 Compat Modes */ + src: url('@path/@{font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('@path/@{font-name}.woff') format('woff'), /* Modern Browsers */ + url('@path/@{font-name}.ttf') format('truetype'), /* Safari, Android, iOS */ + url('@path/@{font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */ + } +} + +//** +// * hyphens +// * @author 飞长 +// * 可能存在问题 +// */ + +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; + -o-hyphens: @mode; + hyphens: @mode; +} +.word-break(@word-break){ + -ms-word-break: @word-break; + word-break: @word-break; +} +.hyphenation(){ + .word-break(break-all); + .hyphens(); +} +//** +// * opacity +// * @author 飞长 +// */ + +.opacity(@opacity: 80) { + opacity: @opacity / 100; + filter: ~"alpha(opacity=@{opacity})"; +} +//** +// * resize +// * @params horizontal, vertical, both +// * @author 飞长 +// */ + +.resizable(@direction) { + resize: @direction; + overflow: auto; // Safari fix +} +//** +// * text-shadow +// * @params [ ? ? | ? ? ] +// * 采用第一种参数方式，并不支持多重阴影 +// * @author 飞长 +//*/ + +.text-shadow(@color, @x, @y, @blur){ + text-shadow: '@{color} @{x} @{y} @{blur}'; +} +//** +// * transformation +// * @params +// * @author 飞长 +// */ + +//** +// * transform: none +// * transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) +// * transform: translate(12px, 50%) +// * transform: translateX(2em) +// * transform: translateY(3in) +// * transform: scale(2, 0.5) +// * transform: scaleX(2) +// * transform: scaleY(0.5) +// * transform: rotate(0.5turn) +// * transform: skewX(30deg) +// * transform: skewY(1.07rad) +// * transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) +// * transform: translate3d(12px, 50%, 3em) +// * transform: translateZ(2px) +// * transform: scale3d(2.5, 1.2, 0.3) +// * transform: scaleZ(0.3) +// * transform: rotate3d(1, 2.0, 3.0, 10deg) +// * transform: rotateX(10deg) +// * transform: rotateY(10deg) +// * transform: rotateZ(10deg) +// * transform: perspective(17px) +// * transform: translateX(10px) rotate(10deg) translateY(5px) +// */ + +// 旋转 +.rotate(@degrees) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.rotate3d(@x, @y, @z, @degress){ + -webkit-transform: rotate3d(@x, @y, @z, @degress); + -moz-transform: rotate3d(@x, @y, @z, @degress); + -ms-transform: rotate3d(@x, @y, @z, @degress); + -o-transform: rotate3d(@x, @y, @z, @degress); + transform: rotate3d(@x, @y, @z, @degress); +} +.rotateX(@degress){ + -webkit-transform: rotateX(@degrees); + -moz-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); + -o-transform: rotateX(@degrees); + transform: rotateX(@degrees); +} +.rotateY(@degress){ + -webkit-transform: rotateY(@degrees); + -moz-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); + -o-transform: rotateY(@degrees); + transform: rotateY(@degrees); +} +.rotateZ(@degress){ + -webkit-transform: rotateZ(@degrees); + -moz-transform: rotateZ(@degrees); + -ms-transform: rotateZ(@degrees); + -o-transform: rotateZ(@degrees); + transform: rotateZ(@degrees); +} + + +//缩放 +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -moz-transform: scale(@ratio); + -ms-transform: scale(@ratio); + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.scaleX(@ratio) { + -webkit-transform: scaleX(@ratio); + -moz-transform: scaleX(@ratio); + -ms-transform: scaleX(@ratio); + -o-transform: scaleX(@ratio); + transform: scaleX(@ratio); +} +.scaleY(@ratio) { + -webkit-transform: scaleY(@ratio); + -moz-transform: scaleY(@ratio); + -ms-transform: scaleY(@ratio); + -o-transform: scaleY(@ratio); + transform: scaleY(@ratio); +} + +//重定位元素 +.translate(@x, @y) { + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} +.translate3d(@x, @y, @z) { + -webkit-transform: translate3d(@x, @y, @z); + -moz-transform: translate3d(@x, @y, @z); + -o-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} +.translateX(@x){ + -webkit-transform: translateX(@x); + -moz-transform: translateX(@x); + -ms-transform: translateX(@x); + -o-transform: translateX(@x); + transform: translateX(@x); +} +.translateY(@y){ + -webkit-transform: translateY(@y); + -moz-transform: translateY(@y); + -ms-transform: translateY(@y); + -o-transform: translateY(@y); + transform: translateY(@y); +} +.translateZ(@z){ + -webkit-transform: translateZ(@z); + -moz-transform: translateZ(@z); + -ms-transform: translateZ(@z); + -o-transform: translateZ(@z); + transform: translateZ(@z); +} + +//倾斜 +.skew(@x, @y) { + -webkit-transform: skew(@x, @y); + -moz-transform: skew(@x, @y); + -ms-transform: skewX(@x) skewY(@y); + -o-transform: skew(@x, @y); + transform: skew(@x, @y); + -webkit-backface-visibility: hidden; +} +.skewX(@x) { + -webkit-transform: skewX(@x); + -moz-transform: skewX(@x); + -ms-transform: skewX(@x); + -o-transform: skewX(@x); + transform: skewX(@x); + -webkit-backface-visibility: hidden; + //Webkit gives a pixelated edge. This can be resolved by adding the following line to the mixin. -webkit-backface-visibility: hidden; +} +.skewY(@y) { + -webkit-transform: skewY(@y); + -moz-transform: skewY(@y); + -ms-transform: skewY(@y); + -o-transform: skewY(@y); + transform: skewY(@y); + -webkit-backface-visibility: hidden; +} + +//** +// * transition +// * @params [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> +// * [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* +// * 详细可以查看 http://www.w3.org/TR/css3-transitions/ +// * @author 飞长 +// */ + + +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +//** +// * 延迟时间 +// * @type {time} 如0s +// */ +.transition-delay(@transition-delay: 0s) { + -webkit-transition-delay: @transition-delay; + -moz-transition-delay: @transition-delay; + -o-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} + +//** +// * 持续时间 +// * @type {time} 如0s +// */ +.transition-duration(@transition-duration: 0s){ + -webkit-transition-delay: @transition-duration; + -moz-transition-delay: @transition-duration; + -o-transition-delay: @transition-duration; + transition-delay: @transition-duration; +} + +//** +// * 需要transition的属性 +// * @type: {css-property} +// */ +.transition-property(@transition-property){ + -webkit-transition-delay: @transition-property; + -moz-transition-delay: @transition-property; + -o-transition-delay: @transition-property; + transition-delay: @transition-property; +} + +//** +// * 时间函数 +// * @param { +// * [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | +// * steps([, [ start | end ] ]?) | cubic-bezier(, , , ) ] +// * [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | +// * steps([, [ start | end ] ]?) | cubic-bezier(, , , ) ] ]* +// * } +// * @transition-timing: ease [description] +// */ +.transition-timing-function(@transition-timing: ease){ + -webkit-transition-delay: @transition-timing; + -moz-transition-delay: @transition-timing; + -o-transition-delay: @transition-timing; + transition-delay: @transition-timing; +} + + +//** +// * user-select +// * @params none | text | all | element +// * @author 飞长 +//*/ + +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; + -o-user-select: @select; + user-select: @select; +} +//** +// * +// * Grid Layout +// * +// * @author 飞长 +// * +// */ + + +.makeGrid(@colnum: 24, @colwidth: 30px, @margin: 10px){ + + @gridColumns: @colnum; + @gridColumnWidth: @colwidth; + @gridGutterWidth: @margin; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + + + .gridX (@gridColumnWidth, @gridGutterWidth) { + .spanX (@index) when (@index > 0) { + (~".span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .offsetX (@index) when (@index > 0) { + (~".offset@{index}") { .offset(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); + } + + .span (@columns) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + + .row { + margin-left: @gridGutterWidth * -1; + .clearfix(); + } + + .span{ + float: left; + min-height: 1px; // prevent collapsing columns + margin-left: @gridGutterWidth; + } + + // generate .spanX and .offsetX + .spanX (@gridColumns); + .offsetX (@gridColumns); + + } + .grid{ + .gridX(@gridColumnWidth, @gridGutterWidth); + } + +} + +//** +// * +// * Fluid Layout +// * +// * @author 飞长 +// * +// */ + + +.makeFluid(@colnum: 24, @colwidth: 30px, @margin: 10px){ + @gridColumns: @colnum; + @gridColumnWidth: @colwidth; + @gridGutterWidth: @margin; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); + @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); + .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { + + .spanX (@index) when (@index > 0) { + (~".span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .offsetX (@index) when (@index > 0) { + (~'.offset@{index}') { .offset(@index); } + (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); + } + + .offsetFirstChild (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + } + + .span (@columns) { + width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); + *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); + } + + .row-fluid { + width: 100%; + .clearfix(); + .span { + float: left; + margin-left: @fluidGridGutterWidth; + *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + } + .first-child { + margin-left: 0; + } + + // Space grid-sized controls properly if multiple per line + .controls-row [class*="span"] + [class*="span"] { + margin-left: @fluidGridGutterWidth; + } + + // generate .spanX and .offsetX + .spanX (@gridColumns); + .offsetX (@gridColumns); + } + } + + .fluid{ + .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth); + } +} +//** +// * +// * Metro Layout +// * +// * @author 飞长 +// * +// */ +.makeMetro(@colnum: 6, @colwidth: 150px, @margin: 10px){ + + @gridColumns: @colnum; + @gridColumnWidth: @colwidth; + @gridGutterWidth: @margin; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + + + .metroX (@gridColumnWidth, @gridGutterWidth) { + .spanX (@index) when (@index > 0) { + (~".span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + .lineX (@index) when (@index > 0) { + (~".line@{index}") { .line(@index); } + .lineX(@index - 1); + } + .lineX (0) {} + + .offsetX (@index) when (@index > 0) { + (~".offset@{index}") { .offset(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); + } + + .span (@columns) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + .line (@columns){ + height: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + margin-bottom: @margin; + } + + .row { + margin-left: @gridGutterWidth * -1; + .clearfix(); + } + + .span{ + float: left; + min-height: 1px; // prevent collapsing columns + margin-left: @gridGutterWidth; + } + + // generate .spanX and .offsetX + .spanX (@gridColumns); + .lineX (@gridColumns); + .offsetX (@gridColumns); + + } + .metro{ + .metroX(@gridColumnWidth, @gridGutterWidth); + } + +} diff --git a/examples/layout/waterfalls/waterfall.html b/examples/layout/waterfalls/waterfall.html index 12c51a6..f2fe5ae 100644 --- a/examples/layout/waterfalls/waterfall.html +++ b/examples/layout/waterfalls/waterfall.html @@ -4,12 +4,12 @@ Fluid Grid - VeryLess - + -
    -
    -
    +
    +
    +
    @@ -23,7 +23,7 @@
    -
    +
    @@ -36,7 +36,7 @@
    -
    +
    diff --git a/examples/layout/waterfalls/waterfall.less b/examples/layout/waterfalls/waterfall.less index 8e12d92..dbf4e74 100644 --- a/examples/layout/waterfalls/waterfall.less +++ b/examples/layout/waterfalls/waterfall.less @@ -2,20 +2,39 @@ // * // * Fluid Layout // * -// * @author 飞长 +// * @author Moe <444984@qq.com> // * // */ -.makeWaterfall(@columnWidth: 300px){ +.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ + + @fallContainerWidth: @containerWidth; + @fallColumn: @column; + @fallColumnMargin: @columnMargin; + @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; + - .fall (@columnWidth) { + .fall (@containerWidth,@column,@columnMargin) { + .row-fall{ + .clearfix(); width:@columnWidth; + margin-left:@columnMargin; + float:left; + } + .first-column{ + margin-left:0; } } .fall{ - .fall (@columnWidth); + .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); + width:@containerWidth; + } + .fall:after{ + content: " "; + clear:both; + display: block; } } \ No newline at end of file From 71933a004861045fe2e4b44e76ee9470bb969fc2 Mon Sep 17 00:00:00 2001 From: Moe <444984@qq.com> Date: Sat, 18 May 2013 16:54:25 +0800 Subject: [PATCH 3/5] Waterfalls Layout --- src/layout/_waterfall.less | 39 +++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/src/layout/_waterfall.less b/src/layout/_waterfall.less index 31953eb..f75536b 100644 --- a/src/layout/_waterfall.less +++ b/src/layout/_waterfall.less @@ -1,11 +1,40 @@ //** -// * -// * Waterfalls Layout // * -// * @author moe <444984@qq.com> +// * Fluid Layout +// * +// * @author Moe <444984@qq.com> // * // */ -.makeFalls(@colums: 3, @columMaxHeight: 200px, @margin: 10px){ - + +.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ + + @fallContainerWidth: @containerWidth; + @fallColumn: @column; + @fallColumnMargin: @columnMargin; + @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; + + + .fall (@containerWidth,@column,@columnMargin) { + + .row-fall{ + .clearfix(); + width:@columnWidth; + margin-left:@columnMargin; + float:left; + } + .first-column{ + margin-left:0; + } + } + + .fall{ + .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); + width:@containerWidth; + } + .fall:after{ + content: " "; + clear:both; + display: block; + } } \ No newline at end of file From 60554666a9d9868cbca57239dca4e1c6bb54f90d Mon Sep 17 00:00:00 2001 From: Moe <444984@qq.com> Date: Sat, 18 May 2013 16:55:55 +0800 Subject: [PATCH 4/5] Update _waterfall.less --- src/layout/_waterfall.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layout/_waterfall.less b/src/layout/_waterfall.less index f75536b..59e9ac0 100644 --- a/src/layout/_waterfall.less +++ b/src/layout/_waterfall.less @@ -1,6 +1,6 @@ //** // * -// * Fluid Layout +// * Waterfall Layout // * // * @author Moe <444984@qq.com> // * @@ -37,4 +37,4 @@ clear:both; display: block; } -} \ No newline at end of file +} From cd5ad7d69e9a73a46e0d1158630e6585b1a75f77 Mon Sep 17 00:00:00 2001 From: Moe <444984@qq.com> Date: Sat, 18 May 2013 16:58:54 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E6=95=B4=E7=90=86=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{waterfall.less => _waterfall.less} | 78 +-- examples/layout/waterfalls/demo.less | 4 +- examples/layout/waterfalls/less.js | 9 - .../layout/waterfalls/veryless-1.0.0.less | 659 ------------------ examples/layout/waterfalls/waterfall.html | 2 +- 5 files changed, 42 insertions(+), 710 deletions(-) rename examples/layout/waterfalls/{waterfall.less => _waterfall.less} (95%) delete mode 100644 examples/layout/waterfalls/less.js delete mode 100644 examples/layout/waterfalls/veryless-1.0.0.less diff --git a/examples/layout/waterfalls/waterfall.less b/examples/layout/waterfalls/_waterfall.less similarity index 95% rename from examples/layout/waterfalls/waterfall.less rename to examples/layout/waterfalls/_waterfall.less index dbf4e74..f75536b 100644 --- a/examples/layout/waterfalls/waterfall.less +++ b/examples/layout/waterfalls/_waterfall.less @@ -1,40 +1,40 @@ -//** -// * -// * Fluid Layout -// * -// * @author Moe <444984@qq.com> -// * -// */ - - -.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ - - @fallContainerWidth: @containerWidth; - @fallColumn: @column; - @fallColumnMargin: @columnMargin; - @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; - - - .fall (@containerWidth,@column,@columnMargin) { - - .row-fall{ - .clearfix(); - width:@columnWidth; - margin-left:@columnMargin; - float:left; - } - .first-column{ - margin-left:0; - } - } - - .fall{ - .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); - width:@containerWidth; - } - .fall:after{ - content: " "; - clear:both; - display: block; - } +//** +// * +// * Fluid Layout +// * +// * @author Moe <444984@qq.com> +// * +// */ + + +.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ + + @fallContainerWidth: @containerWidth; + @fallColumn: @column; + @fallColumnMargin: @columnMargin; + @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; + + + .fall (@containerWidth,@column,@columnMargin) { + + .row-fall{ + .clearfix(); + width:@columnWidth; + margin-left:@columnMargin; + float:left; + } + .first-column{ + margin-left:0; + } + } + + .fall{ + .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); + width:@containerWidth; + } + .fall:after{ + content: " "; + clear:both; + display: block; + } } \ No newline at end of file diff --git a/examples/layout/waterfalls/demo.less b/examples/layout/waterfalls/demo.less index a8c5499..1f4d142 100644 --- a/examples/layout/waterfalls/demo.less +++ b/examples/layout/waterfalls/demo.less @@ -1,5 +1,5 @@ -@import 'veryless-1.0.0.less'; -@import 'waterfall.less'; +@import '../../veryless-1.0.0.less'; +@import '_waterfall.less'; .makeWaterfall(); *{margin:0;padding: 0;} diff --git a/examples/layout/waterfalls/less.js b/examples/layout/waterfalls/less.js deleted file mode 100644 index 309bf55..0000000 --- a/examples/layout/waterfalls/less.js +++ /dev/null @@ -1,9 +0,0 @@ -// -// LESS - Leaner CSS v1.3.0 -// http://lesscss.org -// -// Copyright (c) 2009-2011, Alexis Sellier -// Licensed under the Apache 2.0 License. -// -(function(a,b){function c(b){return a.less[b.split("/")[1]]}function l(){var a=document.getElementsByTagName("style");for(var b=0;b0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function q(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0||g.status>=200&&g.status<300?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return t("browser doesn't support AJAX."),null}}function s(a){return a&&a.parentNode.removeChild(a)}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function u(a,b){var c="less-error-message:"+o(b),e='
  • {content}
    • ',f=document.createElement("div"),g,h,i=[],j=a.filename||b;f.id=c,f.className="less-error-message",h="

    "+(a.message||"There is an error in your .less file")+"

    "+'

    in '+j+" ";var k=function(a,b,c){a.extract[b]&&i.push(e.replace(/\{line\}/,parseInt(a.line)+(b-1)).replace(/\{class\}/,c).replace(/\{content\}/,a.extract[b]))};a.stack?h+="
    "+a.stack.split("\n").slice(1).join("
    "):a.extract&&(k(a,0,""),k(a,1,"line"),k(a,2,""),h+="on line "+a.line+", column "+(a.column+1)+":

    "+"
      "+i.join("")+"
    "),f.innerHTML=h,p([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}typeof define=="function"&&define.amd&&define("less",[],function(){return d}),Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d>>0,c=new Array(b),d=arguments[1];for(var e=0;e>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c=b)return-1;c<0&&(c+=b);for(;cl&&(k[g]=k[g].slice(f-l),l=f)}function t(a){var c,d,e,h,i,j,n,o;if(a instanceof Function)return a.call(m.parsers);if(typeof a=="string")c=b.charAt(f)===a?a:null,e=1,s();else{s();if(c=a.exec(k[g]))e=c[0].length;else return null}if(c){o=f+=e,j=f+k[g].length-e;while(f=0&&b.charAt(c)!=="\n";c--)d++;return{line:typeof a=="number"?(b.slice(0,a).match(/\n/g)||"").length:null,column:d}}function A(a,b){var c=y(a,b),d=z(a.index,c),e=d.line,f=d.column,g=c.split("\n");this.type=a.type||"Syntax",this.message=a.message,this.filename=a.filename||b.filename,this.index=a.index,this.line=typeof e=="number"?e+1:null,this.callLine=a.call&&z(a.call,c).line+1,this.callExtract=g[z(a.call,c).line],this.stack=a.stack,this.column=f,this.extract=[g[e-1],g[e],g[e+1]]}var b,f,g,h,i,j,k,l,m,n=this,o=function(){},p=this.imports={paths:a&&a.paths||[],queue:[],files:{},contents:{},mime:a&&a.mime,error:null,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a,d,f){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=d,e.contents[b]=f,a&&!e.error&&(e.error=a),c(a,d),e.queue.length===0&&o()},a)}};return this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,m={imports:p,parse:function(h,i){var n,p,q,r,s,u,v=[],w,x=null;f=g=l=j=0,b=h.replace(/\r\n/g,"\n"),k=function(c){var d=0,e=/[^"'`\{\}\/\(\)\\]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`\\\r\n]|\\.)*)`/g,h=0,i,j=c[0],k;for(var l=0,m,n;l0&&(x=new A({index:l,type:"Parse",message:"missing closing `}`",filename:a.filename},a)),c.map(function(a){return a.join("")})}([[]]);if(x)return i(x);try{n=new e.Ruleset([],t(this.parsers.primary)),n.root=!0}catch(y){return i(new A(y,a))}n.toCSS=function(b){var f,g,h;return function(f,g){var h=[],i;f=f||{},typeof g=="object"&&!Array.isArray(g)&&(g=Object.keys(g).map(function(a){var b=g[a];return b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b])),new e.Rule("@"+a,b,!1,0)}),h=[new e.Ruleset(null,g)]);try{var j=b.call(this,{frames:h}).toCSS([],{compress:f.compress||!1})}catch(k){throw new A(k,a)}if(i=m.imports.error)throw i instanceof A?i:new A(i,a);return f.yuicompress&&d.mode==="node"?c("./cssmin").compressor.cssmin(j):f.compress?j.replace(/(\s)+/g,"$1"):j}}(n.eval);if(f=0&&b.charAt(z)!=="\n";z--)B++;x={type:"Parse",message:"Syntax Error on line "+s,index:f,filename:a.filename,line:s,column:B,extract:[u[s-2],u[s-1],u[s]]}}this.imports.queue.length>0?o=function(){i(x,n)}:i(x,n)},parsers:{primary:function(){var a,b=[];while((a=t(this.mixin.definition)||t(this.rule)||t(this.ruleset)||t(this.mixin.call)||t(this.comment)||t(this.directive))||t(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(f)!=="/")return;if(b.charAt(f+1)==="/")return new e.Comment(t(/^\/\/.*/),!0);if(a=t(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)},entities:{quoted:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=='"'&&b.charAt(c)!=="'")return;d&&t("~");if(a=t(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],d)},keyword:function(){var a;if(a=t(/^[_A-Za-z-][_A-Za-z0-9-]*/))return e.colors.hasOwnProperty(a)?new e.Color(e.colors[a].slice(1)):new e.Keyword(a)},call:function(){var b,c,d=f;if(!(b=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(k[g])))return;b=b[1].toLowerCase();if(b==="url")return null;f+=b.length;if(b==="alpha")return t(this.alpha);t("("),c=t(this.entities.arguments);if(!t(")"))return;if(b)return new e.Call(b,c,d,a.filename)},arguments:function(){var a=[],b;while(b=t(this.entities.assignment)||t(this.expression)){a.push(b);if(!t(","))break}return a},literal:function(){return t(this.entities.dimension)||t(this.entities.color)||t(this.entities.quoted)},assignment:function(){var a,b;if((a=t(/^\w+(?=\s?=)/i))&&t("=")&&(b=t(this.entity)))return new e.Assignment(a,b)},url:function(){var a;if(b.charAt(f)!=="u"||!t(/^url\(/))return;return a=t(this.entities.quoted)||t(this.entities.variable)||t(this.entities.dataURI)||t(/^[-\w%@$\/.&=:;#+?~]+/)||"",u(")"),new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),p.paths)},dataURI:function(){var a;if(t(/^data:/)){a={},a.mime=t(/^[^\/]+\/[^,;)]+/)||"",a.charset=t(/^;\s*charset=[^,;)]+/)||"",a.base64=t(/^;\s*base64/)||"",a.data=t(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var c,d=f;if(b.charAt(f)==="@"&&(c=t(/^@@?[\w-]+/)))return new e.Variable(c,d,a.filename)},color:function(){var a;if(b.charAt(f)==="#"&&(a=t(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,c=b.charCodeAt(f);if(c>57||c<45||c===47)return;if(a=t(/^(-?\d*\.?\d+)(px|%|em|rem|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,c=f,d;b.charAt(c)==="~"&&(c++,d=!0);if(b.charAt(c)!=="`")return;d&&t("~");if(a=t(/^`([^`]*)`/))return new e.JavaScript(a[1],f,d)}},variable:function(){var a;if(b.charAt(f)==="@"&&(a=t(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!w(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=t(this.entity))&&t("/")&&(b=t(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var c=[],d,g,h,i=f,j=b.charAt(f),k=!1;if(j!=="."&&j!=="#")return;while(d=t(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))c.push(new e.Element(g,d,f)),g=t(">");t("(")&&(h=t(this.entities.arguments))&&t(")"),t(this.important)&&(k=!0);if(c.length>0&&(t(";")||w("}")))return new e.mixin.Call(c,h||[],i,a.filename,k)},definition:function(){var a,c=[],d,g,h,i,j,k=!1;if(b.charAt(f)!=="."&&b.charAt(f)!=="#"||w(/^[^{]*(;|})/))return;q();if(d=t(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=d[1];do{if(b.charAt(f)==="."&&t(/^\.{3}/)){k=!0;break}if(!(h=t(this.entities.variable)||t(this.entities.literal)||t(this.entities.keyword)))break;if(h instanceof e.Variable)if(t(":"))i=u(this.expression,"expected expression"),c.push({name:h.name,value:i});else{if(t(/^\.{3}/)){c.push({name:h.name,variadic:!0}),k=!0;break}c.push({name:h.name})}else c.push({value:h})}while(t(","));u(")"),t(/^when/)&&(j=u(this.conditions,"expected condition")),g=t(this.block);if(g)return new e.mixin.Definition(a,c,g,j,k);r()}}},entity:function(){return t(this.entities.literal)||t(this.entities.variable)||t(this.entities.url)||t(this.entities.call)||t(this.entities.keyword)||t(this.entities.javascript)||t(this.comment)},end:function(){return t(";")||w("}")},alpha:function(){var a;if(!t(/^\(opacity=/i))return;if(a=t(/^\d+/)||t(this.entities.variable))return u(")"),new e.Alpha(a)},element:function(){var a,b,c,d;c=t(this.combinator),a=t(/^(?:\d+\.\d+|\d+)%/)||t(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||t("*")||t(this.attribute)||t(/^\([^)@]+\)/),a||t("(")&&(d=t(this.entities.variable))&&t(")")&&(a=new e.Paren(d));if(a)return new e.Element(c,a,f);if(c.value&&c.value.charAt(0)==="&")return new e.Element(c,null,f)},combinator:function(){var a,c=b.charAt(f);if(c===">"||c==="+"||c==="~"){f++;while(b.charAt(f)===" ")f++;return new e.Combinator(c)}if(c==="&"){a="&",f++,b.charAt(f)===" "&&(a="& ");while(b.charAt(f)===" ")f++;return new e.Combinator(a)}return b.charAt(f-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,c,d=[],g,h;if(t("("))return a=t(this.entity),u(")"),new e.Selector([new e.Element("",a,f)]);while(c=t(this.element)){g=b.charAt(f),d.push(c);if(g==="{"||g==="}"||g===";"||g===",")break}if(d.length>0)return new e.Selector(d)},tag:function(){return t(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||t("*")},attribute:function(){var a="",b,c,d;if(!t("["))return;if(b=t(/^[a-zA-Z-]+/)||t(this.entities.quoted))(d=t(/^[|~*$^]?=/))&&(c=t(this.entities.quoted)||t(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!t("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(t("{")&&(a=t(this.primary))&&t("}"))return a},ruleset:function(){var b=[],c,d,g;q();while(c=t(this.selector)){b.push(c),t(this.comment);if(!t(","))break;t(this.comment)}if(b.length>0&&(d=t(this.block)))return new e.Ruleset(b,d,a.strictImports);j=f,r()},rule:function(){var a,c,d=b.charAt(f),h,l;q();if(d==="."||d==="#"||d==="&")return;if(a=t(this.variable)||t(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(k[g]))?(f+=l[0].length-1,c=new e.Anonymous(l[1])):a==="font"?c=t(this.font):c=t(this.value),h=t(this.important);if(c&&t(this.end))return new e.Rule(a,c,h,i);j=f,r()}},"import":function(){var a,b,c=f;if(t(/^@import\s+/)&&(a=t(this.entities.quoted)||t(this.entities.url))){b=t(this.mediaFeatures);if(t(";"))return new e.Import(a,p,b,c)}},mediaFeature:function(){var a,b,c=[];do if(a=t(this.entities.keyword))c.push(a);else if(t("(")){b=t(this.property),a=t(this.entity);if(!t(")"))return null;if(b&&a)c.push(new e.Paren(new e.Rule(b,a,null,f,!0)));else if(a)c.push(new e.Paren(a));else return null}while(a);if(c.length>0)return new e.Expression(c)},mediaFeatures:function(){var a,b=[];do if(a=t(this.mediaFeature)){b.push(a);if(!t(","))break}else if(a=t(this.entities.variable)){b.push(a);if(!t(","))break}while(a);return b.length>0?b:null},media:function(){var a,b;if(t(/^@media/)){a=t(this.mediaFeatures);if(b=t(this.block))return new e.Media(b,a)}},directive:function(){var a,c,d,g,h,i;if(b.charAt(f)!=="@")return;if(c=t(this["import"])||t(this.media))return c;if(a=t(/^@page|@keyframes/)||t(/^@(?:-webkit-|-moz-|-o-|-ms-)[a-z0-9-]+/)){g=(t(/^[^{]+/)||"").trim();if(d=t(this.block))return new e.Directive(a+" "+g,d)}else if(a=t(/^@[-a-z]+/))if(a==="@font-face"){if(d=t(this.block))return new e.Directive(a,d)}else if((c=t(this.entity))&&t(";"))return new e.Directive(a,c)},font:function(){var a=[],b=[],c,d,f,g;while(g=t(this.shorthand)||t(this.entity))b.push(g);a.push(new e.Expression(b));if(t(","))while(g=t(this.expression)){a.push(g);if(!t(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=t(this.expression)){b.push(a);if(!t(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(f)==="!")return t(/^! *important/)},sub:function(){var a;if(t("(")&&(a=t(this.expression))&&t(")"))return a},multiplication:function(){var a,b,c,d;if(a=t(this.operand)){while(!w(/^\/\*/)&&(c=t("/")||t("*"))&&(b=t(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,c,d,g;if(a=t(this.multiplication)){while((d=t(/^[-+]\s+/)||b.charAt(f-1)!=" "&&(t("+")||t("-")))&&(c=t(this.multiplication)))g=new e.Operation(d,[g||a,c]);return g||a}},conditions:function(){var a,b,c=f,d;if(a=t(this.condition)){while(t(",")&&(b=t(this.condition)))d=new e.Condition("or",d||a,b,c);return d||a}},condition:function(){var a,b,c,d,g=f,h=!1;t(/^not/)&&(h=!0),u("(");if(a=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))return(d=t(/^(?:>=|=<|[<=>])/))?(b=t(this.addition)||t(this.entities.keyword)||t(this.entities.quoted))?c=new e.Condition(d,a,b,g,h):v("expected expression"):c=new e.Condition("=",a,new e.Keyword("true"),g,h),u(")"),t(/^and/)?new e.Condition("and",c,t(this.condition)):c},operand:function(){var a,c=b.charAt(f+1);b.charAt(f)==="-"&&(c==="@"||c==="(")&&(a=t("-"));var d=t(this.sub)||t(this.entities.dimension)||t(this.entities.color)||t(this.entities.variable)||t(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),d]):d},expression:function(){var a,b,c=[],d;while(a=t(this.addition)||t(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=t(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){!/^([a-z]+:)?\//.test(a)&&b.length>0&&(a=b[0]+a),n({href:a,title:a,type:d.mime},function(e){e&&typeof d.errback=="function"?d.errback.call(null,a,b,c,d):c.apply(null,arguments)},!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Condition=function(a,b,c,d,e){this.op=a.trim(),this.lvalue=b,this.rvalue=c,this.index=d,this.negate=e},a.Condition.prototype.eval=function(a){var b=this.lvalue.eval(a),c=this.rvalue.eval(a),d=this.index,e,e=function(a){switch(a){case"and":return b&&c;case"or":return b||c;default:if(b.compare)e=b.compare(c);else if(c.compare)e=c.compare(b);else throw{type:"Type",message:"Unable to perform comparison",index:d};switch(e){case-1:return a==="<"||a==="=<";case 0:return a==="="||a===">="||a==="=<";case 1:return a===">"||a===">="}}}(this.op);return this.negate?!e:e}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)},compare:function(b){return b instanceof a.Dimension?b.value>this.value?-1:b.value":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS?b.toCSS(a):""}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c,d,e){var f=this;this.index=e,this._path=b,this.features=d&&new a.Value(d),b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(b,c){b&&(b.index=e),f.root=c||new a.Ruleset([],[])})},a.Import.prototype={toCSS:function(a){var b=this.features?" "+this.features.toCSS(a):"";return this.css?"@import "+this._path.toCSS()+b+";\n":""},eval:function(b){var c,d=this.features&&this.features.eval(b);if(this.css)return this;c=new a.Ruleset([],this.root.rules.slice(0));for(var e=0;e1){var d=new a.Element("&",null,0),e=[new a.Selector([d])];c=new a.Ruleset(e,b.mediaBlocks),c.multiMedia=!0}return delete b.mediaBlocks,delete b.mediaPath,c},evalNested:function(b){var c,d,e=b.mediaPath.concat([this]);for(c=0;c0;c--)b.splice(c,0,new a.Anonymous("and"));return new a.Expression(b)})),new a.Ruleset([],[])},permute:function(a){if(a.length===0)return[];if(a.length===1)return a[0];var b=[],c=this.permute(a.slice(1));for(var d=0;d0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;gthis.params.length)return!1;if(this.required>0&&c>this.params.length)return!1}if(this.condition&&!this.condition.eval({frames:[this.evalParams(b,a)].concat(b.frames)}))return!1;d=Math.min(c,this.arity);for(var f=0;fe.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":",\n"),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l0&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b,c){this.name=a,this.index=b,this.file=c},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{type:"Name",message:"variable "+e+" is undefined",filename:this.file,index:this.index}}}}(c("../tree")),function(a){a.find=function(a,b){for(var c=0,d;c1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)}}(c("./tree"));var f=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&m(function(a,b,c,d,e){b&&p(b.toCSS(),d,e.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k -// */ - -.clearfix() { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} -//** -// * background-clip 背景覆盖的位置 -// * @params [ border-box || padding-box || content-box] -// * @author 飞长 -// */ - -.background-clip(@background-clip: border-box){ - -moz-background-clip: @background-clip; - -webkit-background-clip: @background-clip; - background-clip: @background-clip; -} -//** -// * background-origin 背景开始的位置 -// * @params [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]* -// * @author 飞长 -// */ - -.background-origin(@background-origin: padding-box){ - -moz-background-origin: @background-origin; - -webkit-background-origin: @background-origin; - background-origin: @background-origin; -} -//** -// * background-size 背景尺寸 -// * @params [ [ | | auto ]{1,2} | cover | contain ]# -// * @author 飞长 -// */ - -.background-size(@background-size: auto){ - -moz-background-size: @background-size; - -webkit-background-size: @background-size; - -o-background-size: @background-size; - background-size: @background-size; -} - -//** -// * border-image -// * @params <'border-image-source'> || <'border-image-slice'> -// * [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> -// * @author 飞长 -// * 存在问题 -// */ - -.border-image(@url, @width, @repeat){ - border: '@{width} solid transparent'; - -moz-border-image:'url(@{url}) @width @width @repeat'; - -webkit-border-image:'url(@{url}) @width @width @repeat'; - -o-border-image:'url(@{url}) @width @width @repeat'; - border-image:'url(@{url}) @width @width @repeat'; -} -//** -// * border-radius -// * @author 飞长 -// */ - -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -//单角 -.border-top-left-radius(@radius: 5px) { - -webkit-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - border-top-left-radius: @radius; -} -.border-top-right-radius(@radius: 5px) { - -webkit-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - border-top-right-radius: @radius; -} -.border-bottom-right-radius(@radius: 5px) { - -webkit-border-bottom-right-radius: @radius; - -moz-border-radius-bottomright: @radius; - border-bottom-right-radius: @radius; -} -.border-bottom-left-radius(@radius: 5px) { - -webkit-border-bottom-left-radius: @radius; - -moz-border-radius-bottomleft: @radius; - border-bottom-left-radius: @radius; -} - -//单边 -.border-top-radius(@radius: 5px) { - .border-top-right-radius(@radius); - .border-top-left-radius(@radius); -} -.border-right-radius(@radius: 5px) { - .border-top-right-radius(@radius); - .border-bottom-right-radius(@radius); -} -.border-bottom-radius(@radius: 5px) { - .border-bottom-right-radius(@radius); - .border-bottom-left-radius(@radius); -} -.border-left-radius(@radius: 5px) { - .border-top-left-radius(@radius); - .border-bottom-left-radius(@radius); -} -//** -// * border-shadow -// * @params none | [inset? && [ ? ? ? ] ]# -// * none | [内映射? && [横向平移 纵向平移 模糊? 扩散? 颜色?]]# -// * @author 飞长 -// */ - -.box-shadow(@shadow: 5px 5px 10px #cccccc) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -//** -// * box-sizing 盒模型计算方式 -// * @params content-box padding-box border-box -// * @author 飞长 -// */ - -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} -//** -// * column-count -// * @type {[type]} -// * @author 飞长 -// */ -.content-columns(@columnCount, @columnGap: @gridGutterWidth) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; - column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; - column-gap: @columnGap; -} -//** -// * font-face 自定义字体 -// * @params @path: 字体路径; @font-name: 字体名字; 需要同时存在eot woff ttf svg -// * @author 飞长 -// */ - -.font-face(@path, @font-name){ - @font-face{ - font-family: @font-name; - src: url('@path/@{font-name}.eot'); /* IE9 Compat Modes */ - src: url('@path/@{font-name}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('@path/@{font-name}.woff') format('woff'), /* Modern Browsers */ - url('@path/@{font-name}.ttf') format('truetype'), /* Safari, Android, iOS */ - url('@path/@{font-name}.svg#svgFontName') format('svg'); /* Legacy iOS */ - } -} - -//** -// * hyphens -// * @author 飞长 -// * 可能存在问题 -// */ - -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} -.word-break(@word-break){ - -ms-word-break: @word-break; - word-break: @word-break; -} -.hyphenation(){ - .word-break(break-all); - .hyphens(); -} -//** -// * opacity -// * @author 飞长 -// */ - -.opacity(@opacity: 80) { - opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; -} -//** -// * resize -// * @params horizontal, vertical, both -// * @author 飞长 -// */ - -.resizable(@direction) { - resize: @direction; - overflow: auto; // Safari fix -} -//** -// * text-shadow -// * @params [ ? ? | ? ? ] -// * 采用第一种参数方式，并不支持多重阴影 -// * @author 飞长 -//*/ - -.text-shadow(@color, @x, @y, @blur){ - text-shadow: '@{color} @{x} @{y} @{blur}'; -} -//** -// * transformation -// * @params -// * @author 飞长 -// */ - -//** -// * transform: none -// * transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) -// * transform: translate(12px, 50%) -// * transform: translateX(2em) -// * transform: translateY(3in) -// * transform: scale(2, 0.5) -// * transform: scaleX(2) -// * transform: scaleY(0.5) -// * transform: rotate(0.5turn) -// * transform: skewX(30deg) -// * transform: skewY(1.07rad) -// * transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) -// * transform: translate3d(12px, 50%, 3em) -// * transform: translateZ(2px) -// * transform: scale3d(2.5, 1.2, 0.3) -// * transform: scaleZ(0.3) -// * transform: rotate3d(1, 2.0, 3.0, 10deg) -// * transform: rotateX(10deg) -// * transform: rotateY(10deg) -// * transform: rotateZ(10deg) -// * transform: perspective(17px) -// * transform: translateX(10px) rotate(10deg) translateY(5px) -// */ - -// 旋转 -.rotate(@degrees) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.rotate3d(@x, @y, @z, @degress){ - -webkit-transform: rotate3d(@x, @y, @z, @degress); - -moz-transform: rotate3d(@x, @y, @z, @degress); - -ms-transform: rotate3d(@x, @y, @z, @degress); - -o-transform: rotate3d(@x, @y, @z, @degress); - transform: rotate3d(@x, @y, @z, @degress); -} -.rotateX(@degress){ - -webkit-transform: rotateX(@degrees); - -moz-transform: rotateX(@degrees); - -ms-transform: rotateX(@degrees); - -o-transform: rotateX(@degrees); - transform: rotateX(@degrees); -} -.rotateY(@degress){ - -webkit-transform: rotateY(@degrees); - -moz-transform: rotateY(@degrees); - -ms-transform: rotateY(@degrees); - -o-transform: rotateY(@degrees); - transform: rotateY(@degrees); -} -.rotateZ(@degress){ - -webkit-transform: rotateZ(@degrees); - -moz-transform: rotateZ(@degrees); - -ms-transform: rotateZ(@degrees); - -o-transform: rotateZ(@degrees); - transform: rotateZ(@degrees); -} - - -//缩放 -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.scaleX(@ratio) { - -webkit-transform: scaleX(@ratio); - -moz-transform: scaleX(@ratio); - -ms-transform: scaleX(@ratio); - -o-transform: scaleX(@ratio); - transform: scaleX(@ratio); -} -.scaleY(@ratio) { - -webkit-transform: scaleY(@ratio); - -moz-transform: scaleY(@ratio); - -ms-transform: scaleY(@ratio); - -o-transform: scaleY(@ratio); - transform: scaleY(@ratio); -} - -//重定位元素 -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} -.translateX(@x){ - -webkit-transform: translateX(@x); - -moz-transform: translateX(@x); - -ms-transform: translateX(@x); - -o-transform: translateX(@x); - transform: translateX(@x); -} -.translateY(@y){ - -webkit-transform: translateY(@y); - -moz-transform: translateY(@y); - -ms-transform: translateY(@y); - -o-transform: translateY(@y); - transform: translateY(@y); -} -.translateZ(@z){ - -webkit-transform: translateZ(@z); - -moz-transform: translateZ(@z); - -ms-transform: translateZ(@z); - -o-transform: translateZ(@z); - transform: translateZ(@z); -} - -//倾斜 -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); - -o-transform: skew(@x, @y); - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; -} -.skewX(@x) { - -webkit-transform: skewX(@x); - -moz-transform: skewX(@x); - -ms-transform: skewX(@x); - -o-transform: skewX(@x); - transform: skewX(@x); - -webkit-backface-visibility: hidden; - //Webkit gives a pixelated edge. This can be resolved by adding the following line to the mixin. -webkit-backface-visibility: hidden; -} -.skewY(@y) { - -webkit-transform: skewY(@y); - -moz-transform: skewY(@y); - -ms-transform: skewY(@y); - -o-transform: skewY(@y); - transform: skewY(@y); - -webkit-backface-visibility: hidden; -} - -//** -// * transition -// * @params [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> -// * [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* -// * 详细可以查看 http://www.w3.org/TR/css3-transitions/ -// * @author 飞长 -// */ - - -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} - -//** -// * 延迟时间 -// * @type {time} 如0s -// */ -.transition-delay(@transition-delay: 0s) { - -webkit-transition-delay: @transition-delay; - -moz-transition-delay: @transition-delay; - -o-transition-delay: @transition-delay; - transition-delay: @transition-delay; -} - -//** -// * 持续时间 -// * @type {time} 如0s -// */ -.transition-duration(@transition-duration: 0s){ - -webkit-transition-delay: @transition-duration; - -moz-transition-delay: @transition-duration; - -o-transition-delay: @transition-duration; - transition-delay: @transition-duration; -} - -//** -// * 需要transition的属性 -// * @type: {css-property} -// */ -.transition-property(@transition-property){ - -webkit-transition-delay: @transition-property; - -moz-transition-delay: @transition-property; - -o-transition-delay: @transition-property; - transition-delay: @transition-property; -} - -//** -// * 时间函数 -// * @param { -// * [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | -// * steps([, [ start | end ] ]?) | cubic-bezier(, , , ) ] -// * [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | -// * steps([, [ start | end ] ]?) | cubic-bezier(, , , ) ] ]* -// * } -// * @transition-timing: ease [description] -// */ -.transition-timing-function(@transition-timing: ease){ - -webkit-transition-delay: @transition-timing; - -moz-transition-delay: @transition-timing; - -o-transition-delay: @transition-timing; - transition-delay: @transition-timing; -} - - -//** -// * user-select -// * @params none | text | all | element -// * @author 飞长 -//*/ - -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; -} -//** -// * -// * Grid Layout -// * -// * @author 飞长 -// * -// */ - - -.makeGrid(@colnum: 24, @colwidth: 30px, @margin: 10px){ - - @gridColumns: @colnum; - @gridColumnWidth: @colwidth; - @gridGutterWidth: @margin; - @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - - - .gridX (@gridColumnWidth, @gridGutterWidth) { - .spanX (@index) when (@index > 0) { - (~".span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - (~".offset@{index}") { .offset(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); - } - - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - - .span{ - float: left; - min-height: 1px; // prevent collapsing columns - margin-left: @gridGutterWidth; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - - } - .grid{ - .gridX(@gridColumnWidth, @gridGutterWidth); - } - -} - -//** -// * -// * Fluid Layout -// * -// * @author 飞长 -// * -// */ - - -.makeFluid(@colnum: 24, @colwidth: 30px, @margin: 10px){ - @gridColumns: @colnum; - @gridColumnWidth: @colwidth; - @gridGutterWidth: @margin; - @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - @fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); - @fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { - - .spanX (@index) when (@index > 0) { - (~".span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - (~'.offset@{index}') { .offset(@index); } - (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); - } - - .offsetFirstChild (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - - .span (@columns) { - width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); - *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); - } - - .row-fluid { - width: 100%; - .clearfix(); - .span { - float: left; - margin-left: @fluidGridGutterWidth; - *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - .first-child { - margin-left: 0; - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @fluidGridGutterWidth; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - } - } - - .fluid{ - .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth); - } -} -//** -// * -// * Metro Layout -// * -// * @author 飞长 -// * -// */ -.makeMetro(@colnum: 6, @colwidth: 150px, @margin: 10px){ - - @gridColumns: @colnum; - @gridColumnWidth: @colwidth; - @gridGutterWidth: @margin; - @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - - - .metroX (@gridColumnWidth, @gridGutterWidth) { - .spanX (@index) when (@index > 0) { - (~".span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - .lineX (@index) when (@index > 0) { - (~".line@{index}") { .line(@index); } - .lineX(@index - 1); - } - .lineX (0) {} - - .offsetX (@index) when (@index > 0) { - (~".offset@{index}") { .offset(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); - } - - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .line (@columns){ - height: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - margin-bottom: @margin; - } - - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - - .span{ - float: left; - min-height: 1px; // prevent collapsing columns - margin-left: @gridGutterWidth; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .lineX (@gridColumns); - .offsetX (@gridColumns); - - } - .metro{ - .metroX(@gridColumnWidth, @gridGutterWidth); - } - -} diff --git a/examples/layout/waterfalls/waterfall.html b/examples/layout/waterfalls/waterfall.html index f2fe5ae..4b14d59 100644 --- a/examples/layout/waterfalls/waterfall.html +++ b/examples/layout/waterfalls/waterfall.html @@ -4,7 +4,7 @@ Fluid Grid - VeryLess - +