From 894a4849e06cbeebfeb3c665c41799bbc6a4484d Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sun, 19 Apr 2015 13:42:54 +0200 Subject: [PATCH] aadded gui_ck_fw --- js/gui_ck_fw/gui.js | 368 +++++++++++++++++++++ js/gui_ck_fw/gui.less | 592 ++++++++++++++++++++++++++++++++++ js/gui_ck_fw/gui.less.orig | 636 +++++++++++++++++++++++++++++++++++++ 3 files changed, 1596 insertions(+) create mode 100644 js/gui_ck_fw/gui.js create mode 100644 js/gui_ck_fw/gui.less create mode 100644 js/gui_ck_fw/gui.less.orig diff --git a/js/gui_ck_fw/gui.js b/js/gui_ck_fw/gui.js new file mode 100644 index 00000000..2bbad2e7 --- /dev/null +++ b/js/gui_ck_fw/gui.js @@ -0,0 +1,368 @@ +// * date 2011/10/19 * + +/** +* misc +*/ + +// ------ TRACE ------ + +function trace(s,o){ + if(window.console && window.console.debug){ + arguments.length === 2 ? window.console.debug(s,o) : window.console.debug(s); + }else if(window.console && window.console.log){ + arguments.length === 2 ? window.console.log(s,o) : window.console.log(s); + } +}; + +// ------ LOADJSCSSFILE ------ + +function loadjscssfile(filename, filetype){ + if (filetype=="js"){ //if filename is a external JavaScript file + var fileref=document.createElement('script') + fileref.setAttribute("type","text/javascript") + fileref.setAttribute("src", filename) + } + else if (filetype=="css"){ //if filename is an external CSS file + var fileref=document.createElement("link") + fileref.setAttribute("rel", "stylesheet") + fileref.setAttribute("type", "text/css") + fileref.setAttribute("href", filename) + } + if (typeof fileref!="undefined") + document.getElementsByTagName("head")[0].appendChild(fileref) +} + +// ------ TIMEOUT + +function Timeout(fn, interval) { + var id = setTimeout(fn, interval); + this.cleared = false; + this.clear = function () { + this.cleared = true; + clearTimeout(id); + }; +} + +// ------ HEXTORGB convert hex to rgb color ------ + +function HexToRGB(h){ + if(h.charAt(0)=="#"){ + var coul = h.substring(1,7); + var r = parseInt(coul.substring(0,2),16); + var g = parseInt(coul.substring(2,4),16); + var b = parseInt(coul.substring(4,6),16); + return 'rgb('+r+', '+g+', '+b+')'; + }else{ + return null; + } +} + +// ------ PAIR check if number is pair of impair ------ + +function pair(n){return typeof n=='number'?(n%2==0?true:false):null;} + +// ------ RANDOM ------ + +function random(n1,n2){ + return arguments.length === 1 && typeof n1 === 'number'? Math.random()*n1 : ( arguments.length === 2 && typeof n1 === typeof n2 && typeof n1 === 'number' ? n1 + Math.random()*(n2-n1) : NaN ); +} +function randomInt(n1,n2){ + var rand = arguments.length === 1 && typeof n1 === 'number'? Math.random()*n1 : ( arguments.length === 2 && typeof n1 === typeof n2 && typeof n1 === 'number' ? n1 + Math.random()*(n2-n1) : NaN ); + return parseInt(rand); +} + +// ------ ROUNDED ------ + +function round(n,granularity){ + if(arguments.length == 1){ + n = Math.round(n); + }else{ + granularity = granularity.toString(); + granularity = granularity.replace(/./gi, 0); + granularity = granularity.replace(/^./gi, 1); + granularity = parseInt(granularity); + n = Math.round(n*granularity)/granularity; + } + return n; +} + +// ------ FLOOR ------ + +function floor(n,granularity){ + if(arguments.length == 1){ + n = Math.floor(n); + }else{ + granularity = granularity.toString(); + granularity = granularity.replace(/./gi, 0); + granularity = granularity.replace(/^./gi, 1); + granularity = parseInt(granularity); + n = Math.floor(n*granularity)/granularity; + } + return n; +} + +// ------ CEIL ------ + +function ceil(n,granularity){ + if(arguments.length == 1){ + n = Math.ceil(n); + }else{ + granularity = granularity.toString(); + granularity = granularity.replace(/./gi, 0); + granularity = granularity.replace(/^./gi, 1); + granularity = parseInt(granularity); + n = Math.ceil(n*granularity)/granularity; + } + return n; +} + +/** +* String +*/ + +// ------ TRIM remove multiple, leading or trailing spaces ------ + +String.prototype.trim = function() { + return this.replace(/(^\s*)|(\s*$)/gi,"").replace(/[ ]{2,}/gi," ").replace(/\n /,"\n"); +} + +// ------ remove all accents, for sort() by example ------ + +var Latinise={};Latinise.latin_map={"Á":"A","Ă":"A","Ắ":"A","Ặ":"A","Ằ":"A","Ẳ":"A","Ẵ":"A","Ǎ":"A","Â":"A","Ấ":"A","Ậ":"A","Ầ":"A","Ẩ":"A","Ẫ":"A","Ä":"A","Ǟ":"A","Ȧ":"A","Ǡ":"A","Ạ":"A","Ȁ":"A","À":"A","Ả":"A","Ȃ":"A","Ā":"A","Ą":"A","Å":"A","Ǻ":"A","Ḁ":"A","Ⱥ":"A","Ã":"A","Ꜳ":"AA","Æ":"AE","Ǽ":"AE","Ǣ":"AE","Ꜵ":"AO","Ꜷ":"AU","Ꜹ":"AV","Ꜻ":"AV","Ꜽ":"AY","Ḃ":"B","Ḅ":"B","Ɓ":"B","Ḇ":"B","Ƀ":"B","Ƃ":"B","Ć":"C","Č":"C","Ç":"C","Ḉ":"C","Ĉ":"C","Ċ":"C","Ƈ":"C","Ȼ":"C","Ď":"D","Ḑ":"D","Ḓ":"D","Ḋ":"D","Ḍ":"D","Ɗ":"D","Ḏ":"D","Dz":"D","Dž":"D","Đ":"D","Ƌ":"D","DZ":"DZ","DŽ":"DZ","É":"E","Ĕ":"E","Ě":"E","Ȩ":"E","Ḝ":"E","Ê":"E","Ế":"E","Ệ":"E","Ề":"E","Ể":"E","Ễ":"E","Ḙ":"E","Ë":"E","Ė":"E","Ẹ":"E","Ȅ":"E","È":"E","Ẻ":"E","Ȇ":"E","Ē":"E","Ḗ":"E","Ḕ":"E","Ę":"E","Ɇ":"E","Ẽ":"E","Ḛ":"E","Ꝫ":"ET","Ḟ":"F","Ƒ":"F","Ǵ":"G","Ğ":"G","Ǧ":"G","Ģ":"G","Ĝ":"G","Ġ":"G","Ɠ":"G","Ḡ":"G","Ǥ":"G","Ḫ":"H","Ȟ":"H","Ḩ":"H","Ĥ":"H","Ⱨ":"H","Ḧ":"H","Ḣ":"H","Ḥ":"H","Ħ":"H","Í":"I","Ĭ":"I","Ǐ":"I","Î":"I","Ï":"I","Ḯ":"I","İ":"I","Ị":"I","Ȉ":"I","Ì":"I","Ỉ":"I","Ȋ":"I","Ī":"I","Į":"I","Ɨ":"I","Ĩ":"I","Ḭ":"I","Ꝺ":"D","Ꝼ":"F","Ᵹ":"G","Ꞃ":"R","Ꞅ":"S","Ꞇ":"T","Ꝭ":"IS","Ĵ":"J","Ɉ":"J","Ḱ":"K","Ǩ":"K","Ķ":"K","Ⱪ":"K","Ꝃ":"K","Ḳ":"K","Ƙ":"K","Ḵ":"K","Ꝁ":"K","Ꝅ":"K","Ĺ":"L","Ƚ":"L","Ľ":"L","Ļ":"L","Ḽ":"L","Ḷ":"L","Ḹ":"L","Ⱡ":"L","Ꝉ":"L","Ḻ":"L","Ŀ":"L","Ɫ":"L","Lj":"L","Ł":"L","LJ":"LJ","Ḿ":"M","Ṁ":"M","Ṃ":"M","Ɱ":"M","Ń":"N","Ň":"N","Ņ":"N","Ṋ":"N","Ṅ":"N","Ṇ":"N","Ǹ":"N","Ɲ":"N","Ṉ":"N","Ƞ":"N","Nj":"N","Ñ":"N","NJ":"NJ","Ó":"O","Ŏ":"O","Ǒ":"O","Ô":"O","Ố":"O","Ộ":"O","Ồ":"O","Ổ":"O","Ỗ":"O","Ö":"O","Ȫ":"O","Ȯ":"O","Ȱ":"O","Ọ":"O","Ő":"O","Ȍ":"O","Ò":"O","Ỏ":"O","Ơ":"O","Ớ":"O","Ợ":"O","Ờ":"O","Ở":"O","Ỡ":"O","Ȏ":"O","Ꝋ":"O","Ꝍ":"O","Ō":"O","Ṓ":"O","Ṑ":"O","Ɵ":"O","Ǫ":"O","Ǭ":"O","Ø":"O","Ǿ":"O","Õ":"O","Ṍ":"O","Ṏ":"O","Ȭ":"O","Ƣ":"OI","Ꝏ":"OO","Ɛ":"E","Ɔ":"O","Ȣ":"OU","Ṕ":"P","Ṗ":"P","Ꝓ":"P","Ƥ":"P","Ꝕ":"P","Ᵽ":"P","Ꝑ":"P","Ꝙ":"Q","Ꝗ":"Q","Ŕ":"R","Ř":"R","Ŗ":"R","Ṙ":"R","Ṛ":"R","Ṝ":"R","Ȑ":"R","Ȓ":"R","Ṟ":"R","Ɍ":"R","Ɽ":"R","Ꜿ":"C","Ǝ":"E","Ś":"S","Ṥ":"S","Š":"S","Ṧ":"S","Ş":"S","Ŝ":"S","Ș":"S","Ṡ":"S","Ṣ":"S","Ṩ":"S","Ť":"T","Ţ":"T","Ṱ":"T","Ț":"T","Ⱦ":"T","Ṫ":"T","Ṭ":"T","Ƭ":"T","Ṯ":"T","Ʈ":"T","Ŧ":"T","Ɐ":"A","Ꞁ":"L","Ɯ":"M","Ʌ":"V","Ꜩ":"TZ","Ú":"U","Ŭ":"U","Ǔ":"U","Û":"U","Ṷ":"U","Ü":"U","Ǘ":"U","Ǚ":"U","Ǜ":"U","Ǖ":"U","Ṳ":"U","Ụ":"U","Ű":"U","Ȕ":"U","Ù":"U","Ủ":"U","Ư":"U","Ứ":"U","Ự":"U","Ừ":"U","Ử":"U","Ữ":"U","Ȗ":"U","Ū":"U","Ṻ":"U","Ų":"U","Ů":"U","Ũ":"U","Ṹ":"U","Ṵ":"U","Ꝟ":"V","Ṿ":"V","Ʋ":"V","Ṽ":"V","Ꝡ":"VY","Ẃ":"W","Ŵ":"W","Ẅ":"W","Ẇ":"W","Ẉ":"W","Ẁ":"W","Ⱳ":"W","Ẍ":"X","Ẋ":"X","Ý":"Y","Ŷ":"Y","Ÿ":"Y","Ẏ":"Y","Ỵ":"Y","Ỳ":"Y","Ƴ":"Y","Ỷ":"Y","Ỿ":"Y","Ȳ":"Y","Ɏ":"Y","Ỹ":"Y","Ź":"Z","Ž":"Z","Ẑ":"Z","Ⱬ":"Z","Ż":"Z","Ẓ":"Z","Ȥ":"Z","Ẕ":"Z","Ƶ":"Z","IJ":"IJ","Œ":"OE","ᴀ":"A","ᴁ":"AE","ʙ":"B","ᴃ":"B","ᴄ":"C","ᴅ":"D","ᴇ":"E","ꜰ":"F","ɢ":"G","ʛ":"G","ʜ":"H","ɪ":"I","ʁ":"R","ᴊ":"J","ᴋ":"K","ʟ":"L","ᴌ":"L","ᴍ":"M","ɴ":"N","ᴏ":"O","ɶ":"OE","ᴐ":"O","ᴕ":"OU","ᴘ":"P","ʀ":"R","ᴎ":"N","ᴙ":"R","ꜱ":"S","ᴛ":"T","ⱻ":"E","ᴚ":"R","ᴜ":"U","ᴠ":"V","ᴡ":"W","ʏ":"Y","ᴢ":"Z","á":"a","ă":"a","ắ":"a","ặ":"a","ằ":"a","ẳ":"a","ẵ":"a","ǎ":"a","â":"a","ấ":"a","ậ":"a","ầ":"a","ẩ":"a","ẫ":"a","ä":"a","ǟ":"a","ȧ":"a","ǡ":"a","ạ":"a","ȁ":"a","à":"a","ả":"a","ȃ":"a","ā":"a","ą":"a","ᶏ":"a","ẚ":"a","å":"a","ǻ":"a","ḁ":"a","ⱥ":"a","ã":"a","ꜳ":"aa","æ":"ae","ǽ":"ae","ǣ":"ae","ꜵ":"ao","ꜷ":"au","ꜹ":"av","ꜻ":"av","ꜽ":"ay","ḃ":"b","ḅ":"b","ɓ":"b","ḇ":"b","ᵬ":"b","ᶀ":"b","ƀ":"b","ƃ":"b","ɵ":"o","ć":"c","č":"c","ç":"c","ḉ":"c","ĉ":"c","ɕ":"c","ċ":"c","ƈ":"c","ȼ":"c","ď":"d","ḑ":"d","ḓ":"d","ȡ":"d","ḋ":"d","ḍ":"d","ɗ":"d","ᶑ":"d","ḏ":"d","ᵭ":"d","ᶁ":"d","đ":"d","ɖ":"d","ƌ":"d","ı":"i","ȷ":"j","ɟ":"j","ʄ":"j","dz":"dz","dž":"dz","é":"e","ĕ":"e","ě":"e","ȩ":"e","ḝ":"e","ê":"e","ế":"e","ệ":"e","ề":"e","ể":"e","ễ":"e","ḙ":"e","ë":"e","ė":"e","ẹ":"e","ȅ":"e","è":"e","ẻ":"e","ȇ":"e","ē":"e","ḗ":"e","ḕ":"e","ⱸ":"e","ę":"e","ᶒ":"e","ɇ":"e","ẽ":"e","ḛ":"e","ꝫ":"et","ḟ":"f","ƒ":"f","ᵮ":"f","ᶂ":"f","ǵ":"g","ğ":"g","ǧ":"g","ģ":"g","ĝ":"g","ġ":"g","ɠ":"g","ḡ":"g","ᶃ":"g","ǥ":"g","ḫ":"h","ȟ":"h","ḩ":"h","ĥ":"h","ⱨ":"h","ḧ":"h","ḣ":"h","ḥ":"h","ɦ":"h","ẖ":"h","ħ":"h","ƕ":"hv","í":"i","ĭ":"i","ǐ":"i","î":"i","ï":"i","ḯ":"i","ị":"i","ȉ":"i","ì":"i","ỉ":"i","ȋ":"i","ī":"i","į":"i","ᶖ":"i","ɨ":"i","ĩ":"i","ḭ":"i","ꝺ":"d","ꝼ":"f","ᵹ":"g","ꞃ":"r","ꞅ":"s","ꞇ":"t","ꝭ":"is","ǰ":"j","ĵ":"j","ʝ":"j","ɉ":"j","ḱ":"k","ǩ":"k","ķ":"k","ⱪ":"k","ꝃ":"k","ḳ":"k","ƙ":"k","ḵ":"k","ᶄ":"k","ꝁ":"k","ꝅ":"k","ĺ":"l","ƚ":"l","ɬ":"l","ľ":"l","ļ":"l","ḽ":"l","ȴ":"l","ḷ":"l","ḹ":"l","ⱡ":"l","ꝉ":"l","ḻ":"l","ŀ":"l","ɫ":"l","ᶅ":"l","ɭ":"l","ł":"l","lj":"lj","ſ":"s","ẜ":"s","ẛ":"s","ẝ":"s","ḿ":"m","ṁ":"m","ṃ":"m","ɱ":"m","ᵯ":"m","ᶆ":"m","ń":"n","ň":"n","ņ":"n","ṋ":"n","ȵ":"n","ṅ":"n","ṇ":"n","ǹ":"n","ɲ":"n","ṉ":"n","ƞ":"n","ᵰ":"n","ᶇ":"n","ɳ":"n","ñ":"n","nj":"nj","ó":"o","ŏ":"o","ǒ":"o","ô":"o","ố":"o","ộ":"o","ồ":"o","ổ":"o","ỗ":"o","ö":"o","ȫ":"o","ȯ":"o","ȱ":"o","ọ":"o","ő":"o","ȍ":"o","ò":"o","ỏ":"o","ơ":"o","ớ":"o","ợ":"o","ờ":"o","ở":"o","ỡ":"o","ȏ":"o","ꝋ":"o","ꝍ":"o","ⱺ":"o","ō":"o","ṓ":"o","ṑ":"o","ǫ":"o","ǭ":"o","ø":"o","ǿ":"o","õ":"o","ṍ":"o","ṏ":"o","ȭ":"o","ƣ":"oi","ꝏ":"oo","ɛ":"e","ᶓ":"e","ɔ":"o","ᶗ":"o","ȣ":"ou","ṕ":"p","ṗ":"p","ꝓ":"p","ƥ":"p","ᵱ":"p","ᶈ":"p","ꝕ":"p","ᵽ":"p","ꝑ":"p","ꝙ":"q","ʠ":"q","ɋ":"q","ꝗ":"q","ŕ":"r","ř":"r","ŗ":"r","ṙ":"r","ṛ":"r","ṝ":"r","ȑ":"r","ɾ":"r","ᵳ":"r","ȓ":"r","ṟ":"r","ɼ":"r","ᵲ":"r","ᶉ":"r","ɍ":"r","ɽ":"r","ↄ":"c","ꜿ":"c","ɘ":"e","ɿ":"r","ś":"s","ṥ":"s","š":"s","ṧ":"s","ş":"s","ŝ":"s","ș":"s","ṡ":"s","ṣ":"s","ṩ":"s","ʂ":"s","ᵴ":"s","ᶊ":"s","ȿ":"s","ɡ":"g","ᴑ":"o","ᴓ":"o","ᴝ":"u","ť":"t","ţ":"t","ṱ":"t","ț":"t","ȶ":"t","ẗ":"t","ⱦ":"t","ṫ":"t","ṭ":"t","ƭ":"t","ṯ":"t","ᵵ":"t","ƫ":"t","ʈ":"t","ŧ":"t","ᵺ":"th","ɐ":"a","ᴂ":"ae","ǝ":"e","ᵷ":"g","ɥ":"h","ʮ":"h","ʯ":"h","ᴉ":"i","ʞ":"k","ꞁ":"l","ɯ":"m","ɰ":"m","ᴔ":"oe","ɹ":"r","ɻ":"r","ɺ":"r","ⱹ":"r","ʇ":"t","ʌ":"v","ʍ":"w","ʎ":"y","ꜩ":"tz","ú":"u","ŭ":"u","ǔ":"u","û":"u","ṷ":"u","ü":"u","ǘ":"u","ǚ":"u","ǜ":"u","ǖ":"u","ṳ":"u","ụ":"u","ű":"u","ȕ":"u","ù":"u","ủ":"u","ư":"u","ứ":"u","ự":"u","ừ":"u","ử":"u","ữ":"u","ȗ":"u","ū":"u","ṻ":"u","ų":"u","ᶙ":"u","ů":"u","ũ":"u","ṹ":"u","ṵ":"u","ᵫ":"ue","ꝸ":"um","ⱴ":"v","ꝟ":"v","ṿ":"v","ʋ":"v","ᶌ":"v","ⱱ":"v","ṽ":"v","ꝡ":"vy","ẃ":"w","ŵ":"w","ẅ":"w","ẇ":"w","ẉ":"w","ẁ":"w","ⱳ":"w","ẘ":"w","ẍ":"x","ẋ":"x","ᶍ":"x","ý":"y","ŷ":"y","ÿ":"y","ẏ":"y","ỵ":"y","ỳ":"y","ƴ":"y","ỷ":"y","ỿ":"y","ȳ":"y","ẙ":"y","ɏ":"y","ỹ":"y","ź":"z","ž":"z","ẑ":"z","ʑ":"z","ⱬ":"z","ż":"z","ẓ":"z","ȥ":"z","ẕ":"z","ᵶ":"z","ᶎ":"z","ʐ":"z","ƶ":"z","ɀ":"z","ff":"ff","ffi":"ffi","ffl":"ffl","fi":"fi","fl":"fl","ij":"ij","œ":"oe","st":"st","ₐ":"a","ₑ":"e","ᵢ":"i","ⱼ":"j","ₒ":"o","ᵣ":"r","ᵤ":"u","ᵥ":"v","ₓ":"x"}; +String.prototype.latinise=function(){return this.replace(/[^A-Za-z0-9\[\] ]/g,function(a){return Latinise.latin_map[a]||a})}; +String.prototype.latinize=String.prototype.latinise; +String.prototype.isLatin=function(){return this==this.latinise()} + +/** +* Array +*/ + +// ------ UNIQUE reduces duplicates ------ + +array_unique = function(ar){ + var r = new Array(); + o:for(var i = 0, n = ar.length; i < n; i++) + { + for(var x = 0, y = r.length; x < y; x++) + { + if(r[x]==ar[i]) + { + continue o; + } + } + r[r.length] = ar[i]; + } + return r; +}; + +// ------ SUBSTRACT substract two array ------ + +array_subtract = function(ara1,ara2) { + var aRes = new Array() ; + for (var i = ara1.length-1; i >= 0; i--) + if(array_contains(ara2,ara1[i])) + aRes.push(ara1[i]); + return aRes ; +} + +/* + SHUFFLE Add a shuffle function to Array object prototype + author: Stephane Roucheray + src: http://sroucheray.org/blog/2009/11/array-sort-should-not-be-used-to-shuffle-an-array/ + found 2011/09/08. +*/ +array_shuffle = function(ar){ + var i = ar.length, j, temp; + if ( i == 0 ) return; + while ( --i ) { + j = Math.floor( Math.random() * ( i + 1 ) ); + temp = ar[i]; + ar[i] = ar[j]; + ar[j] = temp; + } + return ar; +}; + +// ------ CONTAINS ------ + +array_contains = function(ar, obj) { + var i = ar.length; + while (i--) + if (ar[i] === obj) + return true; + return false; +}; + +// ------ REMOVE ------ + +// /!\ Found on the Internet, not sure of efficiency. +// Array.prototype.remove = function(v) { +// var x, _i, _len, _results; +// _results = []; +// for (_i = 0, _len = this.length; _i < _len; _i++) { +// x = this[_i]; +// if (x !== v) { +// _results.push(x); +// } +// } +// return _results; +// }; + +array_remove = function(ar){ + var what, a= arguments, L= a.length, ax; + while(L && ar.length){ + what= a[--L]; + while((ax= ar.indexOf(what))!= -1){ + ar.splice(ax, 1); + } + } + return ar; +}; + +// for IE +// if(!Array.prototype.indexOf){ +// Array.prototype.indexOf= function(what, i){ +// i= i || 0; +// var L= this.length; +// while(i< L){ +// if(this[i]=== what) return i; +// ++i; +// } +// return -1; +// }; +// } + +array_indexOf = function(ar, what, i){ + i= i || 0; + var L= ar.length; + while(i< L){ + if(ar[i]=== what) return i; + ++i; + } + return -1; +}; + +// ------ SUBSTRACT substract two array ------ + +function array_subtract(ara1,ara2) { + var aRes = new Array() ; + for (var i = ara1.length-1; i >= 0; i--) + if( !array_contains(ara1[i],ara2) ) + aRes.push(ara1[i]); + return aRes ; +}; + +/** +* Objects +* +*/ + +// ------ OBJECTSIZE get the length of objects ------ + +function objectSize(o) { + var len = o.length ? --o.length : 0; + for (var k in o) + len++; + return len; +} +// Object.prototype.size = function () { +// // var len = this.length ? --this.length : -1; // POURQUOI NE FONCTIONNE PAS? +// var len = this.length ? --this.length : -2; +// for (var k in this) +// len++; +// return len; +// } + +function objectIsEmpty(obj){ + for (var prop in obj) { + if (obj.hasOwnProperty(prop)) + return false; + } + return true; +}; + +// ------ OBJECTGETKEY get key of index ------ + +function objectGetKey(o,index){ + var i = 0; + for (var k in o){ + if (k === 'length' || !o.hasOwnProperty(k)) + continue; + if(i == index) + return k; + i ++; + } +} +// Object.prototype.getKey = function(index){ +// var i = 0; +// for (var key in this){ +// if (key === 'length' || !this.hasOwnProperty(key)) +// continue; +// if(i == index) +// return key; +// i ++; +// } +// } + +// ------ OBJECTSORT sort object ------ + +function objectSort(o,value) { + var connection = new Array(); + for (var i = objectSize(o) - 1; i >= 0; i--){ + var k = objectGetKey(o,i); + for (var j = objectSize(o[k].wit) - 1; j >= 0; j--){ + var k2 = objectGetKey(o[k].wit,j); + if (k2==value) { + var the_wit = parseFloat(o[k].wit[k2]); + connection.push( {wit:the_wit,nid:k} ); + }; + }; + }; + + connection.sort(function(a,b){ + // return (a.wit - b.wit);//ascending + return (b.wit - a.wit);//descending + }); + + var o_sort = {}; + for (var i = connection.length - 1; i >= 0; i--){ + // o_sort[connection[i].wit+'-'+connection[i].nid] = o[connection[i].nid]; + o_sort[connection[i].nid] = o[connection[i].nid]; + }; + + return o_sort; +} + +/** +* trigo +*/ + +// -------- getElementAngle ---------- +// L'angle 0 correspond au nord (vers le haut) +// Exemple : getElementAngle(posElementX, posElementY, posSourisX, posSourisY) +// Ceci retournera l'angle de l'élément par rapport à la position de la souris + +function getElementAngle(x1, y1, x2, y2) { + var adj = x2 - x1; + var opp = y2 - y1; + + var angle = Math.abs(Math.atan(opp/adj) * 180/Math.PI); + + if (adj > 0 && opp < 0 ) { + angle = 90 - angle; + } + else if (adj >= 0 && opp >= 0) { + angle += 90; + } + else if (adj < 0 && opp >= 0) { + angle = 180 + (90 - angle); + } + else { + angle += 270; + } + + return angle; +} + + + diff --git a/js/gui_ck_fw/gui.less b/js/gui_ck_fw/gui.less new file mode 100644 index 00000000..1a7f2d5d --- /dev/null +++ b/js/gui_ck_fw/gui.less @@ -0,0 +1,592 @@ +/* + * www.g-u-i.net + */ + +// = +// = +// = +// = +// = +// ===== TYPOGRAHIE ====================================================================================================== + +.8(){font-size:8px;} +.9(){font-size:9px;} +.10(){font-size:10px;} +.11(){font-size:10px;} +.12(){font-size:12px;} +.14(){font-size:14px;} +.16(){font-size:16px;} +.18(){font-size:18px;} +.20(){font-size:20px;} +.24(){font-size:24px;} +.28(){font-size:24px;} +.30(){font-size:30px;} +.36(){font-size:36px;} +.48(){font-size:48px;} +.60(){font-size:60px;} +.72(){font-size:72px;} + +.regular(){font-weight:normal;} +.bold(){font-weight:bold;} +.100(){font-weight:100;} +.200(){font-weight:200;} +.300(){font-weight:300;} +.400(){font-weight:400;} +.500(){font-weight:500;} +.600(){font-weight:600;} +.700(){font-weight:700;} +.800(){font-weight:800;} +.900(){font-weight:900;} + +.upper(){text-transform: uppercase;} +.italic(){font-style:italic;} +.normal(){font-style: normal;} + +.hyphens(@value: auto) +{ + -webkit-hyphens:@value; + -moz-hyphens:@value; + -ms-hyphens:@value; + -o-hyphens:@value; + hyphens:@value; +} +.font-size(@value: 1em,@lineheight:1.3em) +{ + font-size:@value; + line-height:@lineheight; +} + +@green:#17942A; +@red:#E60000; + +// = +// = +// = +// = +// = +// ===== SHORTCUTS ======================================================================================================= + +// padding +.p(@p){ padding:@arguments; } +.p(@v, @h){ padding:@arguments; } +.p(@t, @l, @b, @l){ padding:@arguments; } + +.pt(@p){ padding-top:@p; } +.pr(@p){ padding-right:@p; } +.pb(@p){ padding-bottom:@p; } +.pl(@p){ padding-left:@p; } + +// margin +.m(@p){ margin:@arguments; } +.m(@v, @h){ margin:@arguments; } +.m(@t, @l, @b, @l){ margin:@arguments; } + +.mt(@m){ margin-top:@m; } +.mr(@m){ margin-right:@m; } +.mb(@m){ margin-bottom:@m; } +.ml(@m){ margin-left:@m; } + +.0(){ margin:0; padding:0; } + +// border +.b(@b){ border: @b; } +.b(@size, @color){ border: @size solid @color; } + +.bt(@b){ border-top: @b;} +.bt(@size, @color){border-top: @size solid @color;} + +.br(@b){ border-right: @b;} +.br(@size, @color){border-right: @size solid @color;} + +.bb(@b){ border-bottom: @b;} +.bb(@size, @color){border-bottom: @size solid @color;} + +.bl(@b){ border-left: @b;} +.bl(@size, @color){border-left: @size solid @color;} + +.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) +{ + border-top : solid 1px @top-color; + border-right : solid 1px @right-color; + border-bottom: solid 1px @bottom-color; + border-left : solid 1px @left-color; +} + +// Background +.bg(@color, @url, @repeat, @scrollfixed, @pos){background: @arguments;} +.bgc(@color){background-color: @arguments;} +.bkgd(@params){background: @arguments;} +.bkgdc(@color){.bgc(@arguments);} + +.bgca(@r, @g, @b, @a){ + background-color: rgb(@r, @g, @b); // ie8 + background-color: rgba(@r, @g, @b, @a); + *background-color: rgb(@r, @g, @b); // ie7 +}; + +// Selection +.selection(@bgcolor,@color) +{ + &::selection { + background:@bgcolor; + color:@color; + } + &::-moz-selection { + background:@bgcolor; + color:@color; + } + &::-webkit-selection { + background:@bgcolor; + color:@color; + } +} + +// Colors +.color(@value) +{ + &, + & *{color:@value;} +} + +// Opacity +.opacity(@opacity: 0.5) +{ + -webkit-opacity: @opacity; + -khtml-opacity: @opacity; + -moz-opacity: @opacity; + opacity: @opacity; +} + +// size +.size(@height, @width) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size, @size); +} + +// center +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// = +// = +// = +// = +// = +// ===== DISPLAY UTILS =================================================================================================== + +// Inline blocks +.inlineblock(@align:top) +{ + display:moz-inline-stack; + display:inline-block; + vertical-align:@align; + zoom:1; + *display:inline; + .ie7 &, .ie8 &{display:block;float:left;} +} + +.db(){display:block;} +.dbn(){display:none;} +.dib(){.inlineblock;} +.dib(@align){.inlineblock(@align);} + +.float(@align:left){ + .db; float:@align; +} + +.abs(@value) { position:absolute; top:@value; left:@value; bottom:@value; right:@value; } +.abs(@top, @left) { position:absolute; top:@top; left:@left; } +.abs(@top, @right, @bottom, @left) { position:absolute; top:@top; left:@left; bottom:@bottom; right:@right; }; + +.fix(@value) { position:fixed; top:@value; left:@value; bottom:@value; right:@value; } +.fix(@top, @left) { position:fixed; top:@top; left:@left; } +.fix(@top, @right, @bottom, @left) { position:fixed; top:@top; left:@left; bottom:@bottom; right:@right; }; + +// Columns system +@g:0; +.g() { width:@g; } +.col(@col,@coltotal:@n,@gutter:@g) { + width: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + ((@col - 1) * @gutter); +} +.inside-left(@col,@coltotal:@n,@gutter:@g) { + padding-left: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter); +} +.inside-right(@col,@coltotal:@n,@gutter:@g) { + padding-right: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter); +} + + +// Vertical alignement +// +// ___ .align-child() +// | +// | Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct). +// | +// | 1 param : @vertical-align +// +.align-child(@align:middle){ + &:before { content: ""; .dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; } + & > * { .dib(@align); } +} + +.clear-after(){ + &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;} +} + +// For clearing floats like a boss h5bp.com/q +.clearix() { + *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; + } +} + +// = +// = +// = +// = +// = +// ===== CSS3 ============================================================================================================ + +// Gradients +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) +{ + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)); + background: -ms-linear-gradient(bottom, + @start, + @stop); + background: -moz-linear-gradient(center bottom, + @start 0%, + @stop 100%); +} +.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) +{ + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))); + background: -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@start,@start,@start) 100%); + background: -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); +} + +// Shadows +// +// ___ .box-shadow() +// | +// | Ombré extérieur. +// | +// | 1 param : @blur +// | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px +// +// ___ .inset-shadow() +// | +// | Ombré intérieur. +// | +// | 1 param : @blur +// | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px +// +.box-shadow(@blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 @blur #000; + -moz-box-shadow: 0 0 @blur #000; + -ms-box-shadow: 0 0 @blur #000; + box-shadow: 0 0 @blur #000; +} +.box-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@{x}, OffY=@{y}, Color='@{color}')"; + -webkit-box-shadow: @x @y @blur @spread @color; + -moz-box-shadow: @x @y @blur @spread @color; + -ms-box-shadow: @x @y @blur @spread @color; + box-shadow: @x @y @blur @spread @color; +} +.inset-shadow(@blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 @blur #000 inset; + -moz-box-shadow: 0 0 @blur #000 inset; + -ms-box-shadow: 0 0 @blur #000 inset; + box-shadow: 0 0 @blur #000 inset; +} +.inset-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='@{color}')"; + -webkit-box-shadow: @x @y @blur @spread @color inset; + -moz-box-shadow: @x @y @blur @spread @color inset; + -ms-box-shadow: @x @y @blur @spread @color inset; + box-shadow: @x @y @blur @spread @color inset; +} + +.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) +{ + -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); +} + +// Border radius +.rounded(@radius: 2px) +{ + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) +{ + -webkit-border-radius:@arguments; + -moz-border-radius:@arguments; + border-radius:@arguments; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +// transitions +.transition-simply-prefix(@string) { + -webkit-transition: @string; + -moz-transition: @string; + -o-transition: @string; + transition: @string; +} + +// +// ___ .transition() +// | +// | 1 param : @property +// | 2 params : @property / @duration +// | 3+ params : @property / @duration / @transitiondelay:0s , @timingfunction:ease-out +// +// ___ .transitions() +// | +// | Permet de fixer des paramètres spécifique par propriétés, exemple: +// | +// | .transitions( +// | 'height , padding , margin , box-shadow', +// | '.5s , .2s , .2s , .2s', +// | '0s , 0s , 0s , .3s', +// | 'linear , ease-out , linear , ease-out' +// | ); +// +.transition(@property: all) +{ + -webkit-transition: @property; + -moz-transition: @property; + -o-transition: @property; + transition: @property; +} +.transition(@property, @duration) +{ + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} +.transition(@property, @duration, @transitiondelay, @timingfunction:ease-out) +{ + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} +.transitions(@property: all, @duration:0s, @transitiondelay:0s, @timingfunction:ease-out) +{ + -webkit-transition-property :~'@{property}'; + -webkit-transition-duration :~'@{duration}'; + -webkit-transition-delay :~'@{transitiondelay}'; + -webkit-transition-timing-function:~'@{timingfunction}'; + -moz-transition-property :~'@{property}'; + -moz-transition-duration :~'@{duration}'; + -moz-transition-delay :~'@{transitiondelay}'; + -moz-transition-timing-function:~'@{timingfunction}'; + -o-transition-property :~'@{property}'; + -o-transition-duration :~'@{duration}'; + -o-transition-delay :~'@{transitiondelay}'; + -o-transition-timing-function:~'@{timingfunction}'; + transition-property :~'@{property}'; + transition-duration :~'@{duration}'; + transition-delay :~'@{transitiondelay}'; + transition-timing-function:~'@{timingfunction}'; +} + +.transitions-duration(@duration: 0s) +{ + -webkit-transition-duration: ~'@{duration}'; + -moz-transition-duration: ~'@{duration}'; + -o-transition-duration: ~'@{duration}'; + transition-duration: ~'@{duration}'; +} + +.transition-duration(@duration: 0.2s) +{ + -webkit-transition-duration: @duration; + -moz-transition-duration: @duration; + -o-transition-duration: @duration; + transition-duration: @duration; +} + +.transitions-delay(@delay: 0s) +{ + -webkit-transition-delay: ~'@{delay}'; + -moz-transition-delay: ~'@{delay}'; + -o-transition-delay: ~'@{delay}'; + transition-delay: ~'@{delay}'; +} + +// Rotate +// +// ___ .rotation() +// | +// | 1 param : @degree +// +// ___ .rotate() +// | +// | Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés). +// | +// | 1 param : @degree +// | 3 params : @degree / @originX / @originY +// +.rotation(@deg:5deg) +{ + -webkit-transform: rotate(@deg); + -moz-transform: rotate(@deg); + transform: rotate(@deg); +} +.rotate(@value, @originX:0%, @originY:0%, @unit:'deg') +{ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / @value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270 + -webkit-transform: rotate(~"@{value}@{unit}"); // ~"@{value}@{unit}" rather than @value@unit remove the spaces between value and unit. + -moz-transform: rotate(~"@{value}@{unit}"); + -ms-transform: rotate(~"@{value}@{unit}"); + -o-transform: rotate(~"@{value}@{unit}"); + transform: rotate(~"@{value}@{unit}"); + -webkit-transform-origin:@originX @originY; + -moz-transform-origin:@originX @originY; + -ms-transform-origin:@originX @originY; + -o-transform-origin:@originX @originY; + transform-origin:@originX @originY; +} + +// Scale +.scale(@ratio:1.5) +{ + -webkit-transform:scale(@ratio); + -moz-transform:scale(@ratio); + transform:scale(@ratio); +} + +// Translate +.translate(@x:0, @y:0) +{ + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} + +// Columns +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) +{ + -webkit-column-width : @colwidth; + -webkit-column-count : @colcount; + -webkit-column-gap : @colgap; + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + -moz-column-width : @colwidth; + -moz-column-count : @colcount; + -moz-column-gap : @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + column-width : @colwidth; + column-count : @colcount; + column-gap : @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; +} + +.edit-link(@bc:#CCFF2F,@c:#333) +{ + .dib; + background-color:@bc; + border:1px solid; + border-color:darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),20%); + .rounded; + color: @c; + cursor: pointer; + .font-size(.8em,1em); + font-weight: normal; + padding: 0.25em 0.75em; + margin-top:.5em; + + &:hover{background-color:darken(@bc, 20%);} + &:active{ + text-shadow: 0 1px 0 lighten(@bc,5%); + background-color:darken(@bc, 20%); + //.inset-shadow(0,0,2px,darken(@bc,60)); + } +} + +.loader(@fc:#000,@bc:#ccc,@h:8px,@radius:0px) +{ + // Safari/chrome + &::-webkit-progress-bar{background-color:@bc;.rounded(@radius);} + &::-webkit-progress-value{background-color:@fc;.rounded(@radius);} + // Firefox + &{background-color:@bc;.rounded(@radius);height:@h;} + &::-moz-progress-bar{background-color:@fc;.rounded(@radius);} +} + +// = +// = +// = +// = +// = +// ===== RETINA ========================================================================================================== + +// retina.less +// A helper mixin for applying high-resolution background images (http://www.retinajs.com) +.at2x(@path, @w: auto, @h: auto) { + background-image: url(@path); + @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`; + + @media all and (-webkit-min-device-pixel-ratio : 1.5) { + background-image: url(@at2x_path); + background-size: @w @h; + } +} diff --git a/js/gui_ck_fw/gui.less.orig b/js/gui_ck_fw/gui.less.orig new file mode 100644 index 00000000..5e84a944 --- /dev/null +++ b/js/gui_ck_fw/gui.less.orig @@ -0,0 +1,636 @@ +<<<<<<< HEAD +/** +* www.g-u-i.net +*/ + +/** font */ + +.8{font-size:8px;} +.9{font-size:9px;} +.10{font-size:10px;} +.11{font-size:10px;} +.12{font-size:12px;} +.14{font-size:14px;} +.16{font-size:16px;} +.18{font-size:18px;} +.20{font-size:18px;} +.24{font-size:24px;} +.28{font-size:28px;} +.30{font-size:30px;} +.36{font-size:36px;} +.48{font-size:48px;} +.60{font-size:60px;} +.72{font-size:72px;} + +.regular{font-weight:normal;} +.bold{font-weight:bold;} +.100{font-weight:100;} +.300{font-weight:300;} +.500{font-weight:500;} +.700{font-weight:700;} +.900{font-weight:900;} + +.upper{text-transform: uppercase;} +.italic{font-style:italic;} +.normal{font-style: normal;} + + +/** shortcuts */ +======= +/* + * www.g-u-i.net + */ + +// = +// = +// = +// = +// = +// ===== TYPOGRAHIE ====================================================================================================== + +.8(){font-size:8px;} +.9(){font-size:9px;} +.10(){font-size:10px;} +.11(){font-size:10px;} +.12(){font-size:12px;} +.14(){font-size:14px;} +.16(){font-size:16px;} +.18(){font-size:18px;} +.24(){font-size:24px;} +.30(){font-size:30px;} +.36(){font-size:36px;} +.48(){font-size:48px;} +.60(){font-size:60px;} +.72(){font-size:72px;} + +.regular(){font-weight:normal;} +.bold(){font-weight:bold;} +.100(){font-weight:100;} +.300(){font-weight:300;} +.500(){font-weight:500;} +.700(){font-weight:700;} +.900(){font-weight:900;} + +.upper(){text-transform: uppercase;} +.italic(){font-style:italic;} +.normal(){font-style: normal;} + +.hyphens(@value: auto) +{ + -webkit-hyphens:@value; + -moz-hyphens:@value; + -ms-hyphens:@value; + -o-hyphens:@value; + hyphens:@value; +} +.font-size(@value: 1em,@lineheight:1.3em) +{ + font-size:@value; + line-height:@lineheight; +} + +@green:#17942A; +@red:#E60000; + +// = +// = +// = +// = +// = +// ===== SHORTCUTS ======================================================================================================= +>>>>>>> bitbucket/master + +// padding +.p(@p){ padding:@arguments; } +.p(@v, @h){ padding:@arguments; } +.p(@t, @l, @b, @l){ padding:@arguments; } + +.pt(@p){ padding-top:@p; } +.pr(@p){ padding-right:@p; } +.pb(@p){ padding-bottom:@p; } +.pl(@p){ padding-left:@p; } + +// margin +.m(@p){ margin:@arguments; } +.m(@v, @h){ margin:@arguments; } +.m(@t, @l, @b, @l){ margin:@arguments; } + +.mt(@m){ margin-top:@m; } +.mr(@m){ margin-right:@m; } +.mb(@m){ margin-bottom:@m; } +.ml(@m){ margin-left:@m; } + +.0(){ margin:0; padding:0; } + +// border +.b(@b){ border: @b; } +.b(@size, @color){ border: @size solid @color; } + +.bt(@b){ border-top: @b;} +.bt(@size, @color){border-top: @size solid @color;} + +.br(@b){ border-right: @b;} +.br(@size, @color){border-right: @size solid @color;} + +.bb(@b){ border-bottom: @b;} +.bb(@size, @color){border-bottom: @size solid @color;} + +.bl(@b){ border-left: @b;} +.bl(@size, @color){border-left: @size solid @color;} + +.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) +{ + border-top : solid 1px @top-color; + border-right : solid 1px @right-color; + border-bottom: solid 1px @bottom-color; + border-left : solid 1px @left-color; +} + +// Background +.bg(@color, @url, @repeat, @scrollfixed, @pos){background: @arguments;} +.bgc(@color){background-color: @arguments;} +.bkgd(@params){background: @arguments;} +.bkgdc(@color){.bgc(@arguments);} + +<<<<<<< HEAD +// opacity +.opacity(@opacity: 0.5) { + -moz-opacity: @opacity; + -khtml-opacity: @opacity; + -webkit-opacity: @opacity; + opacity: @opacity; +} + +/** Inline blocks */ +.inlineblock(){ + display:moz-inline-stack; + display:inline-block; + vertical-align:top; + zoom:1; + *display:inline; + /* margin-right:-.25em;*/ + .ie7 &{display:inline;} +} + + +// selection style +.selection(@bgcolor,@color){ +======= +// Selection +.selection(@bgcolor,@color) +{ +>>>>>>> bitbucket/master + &::selection { + background:@bgcolor; + color:@color; + } + &::-moz-selection { + background:@bgcolor; + color:@color; + } + &::-webkit-selection { + background:@bgcolor; + color:@color; + } +} + +// Colors +.color(@value) +{ + &, + & *{color:@value;} +} + +// Opacity +.opacity(@opacity: 0.5) +{ + -webkit-opacity: @opacity; + -khtml-opacity: @opacity; + -moz-opacity: @opacity; + opacity: @opacity; +} + +// size +.size(@height, @width) { + width: @width; + height: @height; +} +.square(@size) { + .size(@size, @size); +} + +// center +.center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// = +// = +// = +// = +// = +// ===== DISPLAY UTILS =================================================================================================== + +// Inline blocks +.inlineblock(@align:top) +{ + display:moz-inline-stack; + display:inline-block; + vertical-align:@align; + zoom:1; + *display:inline; + .ie7 &, .ie8 &{display:block;float:left;} +} + +.db(){display:block;} +.dib(){.inlineblock;} +.dib(@align){.inlineblock(@align);} + +// Vertical alignement +// +// ___ .align-child() +// | +// | Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct). +// | +// | 1 param : @vertical-align +// +.align-child(@align:middle){ + &:before { content: ""; .dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; } + & > * { .dib(@align); } +} + +.clear-after(){ + &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;} +} + +// For clearing floats like a boss h5bp.com/q +.clearix() { + *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; + } +} + +// = +// = +// = +// = +// = +// ===== CSS3 ============================================================================================================ + +// Gradients +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) +{ + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)); + background: -ms-linear-gradient(bottom, + @start, + @stop); + background: -moz-linear-gradient(center bottom, + @start 0%, + @stop 100%); +} +.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) +{ + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))); + background: -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@start,@start,@start) 100%); + background: -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); +} + +// Shadows +// +// ___ .box-shadow() +// | +// | Ombré extérieur. +// | +// | 1 param : @blur +// | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px +// +// ___ .inset-shadow() +// | +// | Ombré intérieur. +// | +// | 1 param : @blur +// | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px +// +.box-shadow(@blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 @blur #000; + -moz-box-shadow: 0 0 @blur #000; + -ms-box-shadow: 0 0 @blur #000; + box-shadow: 0 0 @blur #000; +} +.box-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@{x}, OffY=@{y}, Color='@{color}')"; + -webkit-box-shadow: @x @y @blur @spread @color; + -moz-box-shadow: @x @y @blur @spread @color; + -ms-box-shadow: @x @y @blur @spread @color; + box-shadow: @x @y @blur @spread @color; +} +.inset-shadow(@blur: 9px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')"; + -webkit-box-shadow: 0 0 @blur #000 inset; + -moz-box-shadow: 0 0 @blur #000 inset; + -ms-box-shadow: 0 0 @blur #000 inset; + box-shadow: 0 0 @blur #000 inset; +} +.inset-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px) +{ + filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}'); + -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='@{color}')"; + -webkit-box-shadow: @x @y @blur @spread @color inset; + -moz-box-shadow: @x @y @blur @spread @color inset; + -ms-box-shadow: @x @y @blur @spread @color inset; + box-shadow: @x @y @blur @spread @color inset; +} + +// Border radius +.rounded(@radius: 2px) +{ + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) +{ + -webkit-border-radius:@arguments; + -moz-border-radius:@arguments; + border-radius:@arguments; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +<<<<<<< HEAD +// transitions +.transition-simply-prefix(@string) { + -webkit-transition: @string; + -moz-transition: @string; + -o-transition: @string; + transition: @string; +======= +// Transition +// +// ___ .transition() +// | +// | 1 param : @property +// | 2 params : @property / @duration +// | 3+ params : @property / @duration / @transitiondelay:0s , @timingfunction:ease-out +// +// ___ .transitions() +// | +// | Permet de fixer des paramètres spécifique par propriétés, exemple: +// | +// | .transitions( +// | 'height , padding , margin , box-shadow', +// | '.5s , .2s , .2s , .2s', +// | '0s , 0s , 0s , .3s', +// | 'linear , ease-out , linear , ease-out' +// | ); +// +.transition(@property: all) +{ + -webkit-transition: @property; + -moz-transition: @property; + -o-transition: @property; + transition: @property; +>>>>>>> bitbucket/master +} +.transition(@property, @duration) +{ + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} +.transition(@property, @duration, @transitiondelay, @timingfunction:ease-out) +{ + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} +.transitions(@property: all, @duration:0s, @transitiondelay:0s, @timingfunction:ease-out) +{ + -webkit-transition-property :~'@{property}'; + -webkit-transition-duration :~'@{duration}'; + -webkit-transition-delay :~'@{transitiondelay}'; + -webkit-transition-timing-function:~'@{timingfunction}'; + -moz-transition-property :~'@{property}'; + -moz-transition-duration :~'@{duration}'; + -moz-transition-delay :~'@{transitiondelay}'; + -moz-transition-timing-function:~'@{timingfunction}'; + -o-transition-property :~'@{property}'; + -o-transition-duration :~'@{duration}'; + -o-transition-delay :~'@{transitiondelay}'; + -o-transition-timing-function:~'@{timingfunction}'; + transition-property :~'@{property}'; + transition-duration :~'@{duration}'; + transition-delay :~'@{transitiondelay}'; + transition-timing-function:~'@{timingfunction}'; +} +<<<<<<< HEAD +.transition(@p, @d, @e, @de) { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} +.transition-delay(@delay: 0s) { + -webkit-transition-delay: @delay; + -moz-transition-delay: @delay; + -o-transition-delay: @delay; + transition-delay: @delay; +} +// rotation +.rotation(@deg:5deg){ +======= + +.transitions-duration(@duration: 0s) +{ + -webkit-transition-duration: ~'@{duration}'; + -moz-transition-duration: ~'@{duration}'; + -o-transition-duration: ~'@{duration}'; + transition-duration: ~'@{duration}'; +} + +.transition-duration(@duration: 0.2s) +{ + -webkit-transition-duration: @duration; + -moz-transition-duration: @duration; + -o-transition-duration: @duration; + transition-duration: @duration; +} + +// Rotate +// +// ___ .rotation() +// | +// | 1 param : @degree +// +// ___ .rotate() +// | +// | Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés). +// | +// | 1 param : @degree +// | 3 params : @degree / @originX / @originY +// +.rotation(@deg:5deg) +{ +>>>>>>> bitbucket/master + -webkit-transform: rotate(@deg); + -moz-transform: rotate(@deg); + transform: rotate(@deg); +} +.rotate(@value, @originX:0%, @originY:0%, @unit:'deg') +{ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / @value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270 + -webkit-transform: rotate(~"@{value}@{unit}"); // ~"@{value}@{unit}" rather than @value@unit remove the spaces between value and unit. + -moz-transform: rotate(~"@{value}@{unit}"); + -ms-transform: rotate(~"@{value}@{unit}"); + -o-transform: rotate(~"@{value}@{unit}"); + transform: rotate(~"@{value}@{unit}"); + -webkit-transform-origin:@originX @originY; + -moz-transform-origin:@originX @originY; + -ms-transform-origin:@originX @originY; + -o-transform-origin:@originX @originY; + transform-origin:@originX @originY; +} + +// Scale +.scale(@ratio:1.5) +{ + -webkit-transform:scale(@ratio); +<<<<<<< HEAD + -moz-transform:scale(@ratio); + transform:scale(@ratio); +} + +// columns +.columns(@colwidth: 250px) { + -moz-column-width: @colwidth; + -webkit-column-width: @colwidth; + column-width: @colwidth; +} + +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { + -moz-column-width: @colwidth; + -moz-column-count: @colcount; + -moz-column-gap: @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + -webkit-column-width: @colwidth; + -webkit-column-count: @colcount; + -webkit-column-gap: @colgap; +======= + -moz-transform:scale(@ratio); + transform:scale(@ratio); +} + +// Translate +.translate(@x:0, @y:0) +{ + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} + +// Columns +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) +{ + -webkit-column-width : @colwidth; + -webkit-column-count : @colcount; + -webkit-column-gap : @colgap; +>>>>>>> bitbucket/master + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + -moz-column-width : @colwidth; + -moz-column-count : @colcount; + -moz-column-gap : @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + column-width : @colwidth; + column-count : @colcount; + column-gap : @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; +} + +.edit-link(@bc:#CCFF2F,@c:#333) +{ + .dib; + background-color:@bc; + border:1px solid; + border-color:darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),20%); + .rounded; + color: @c; + cursor: pointer; + .font-size(.8em,1em); + font-weight: normal; + padding: 0.25em 0.75em; + margin-top:.5em; + + &:hover{background-color:darken(@bc, 20%);} + &:active{ + text-shadow: 0 1px 0 lighten(@bc,5%); + background-color:darken(@bc, 20%); + //.inset-shadow(0,0,2px,darken(@bc,60)); + } +} + +// = +// = +// = +// = +// = +// ===== RETINA ========================================================================================================== + +// retina.less +// A helper mixin for applying high-resolution background images (http://www.retinajs.com) +.at2x(@path, @w: auto, @h: auto) { + background-image: url(@path); + @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`; + + @media all and (-webkit-min-device-pixel-ratio : 1.5) { + background-image: url(@at2x_path); + background-size: @w @h; + } +}