picasso 0.0.1 → 0.0.2

data/docs/js/docs.js

@@ -0,0 +1,16 @@
+
+$(document).ready(function() {
+
+    $codesTags = $('pre code');
+
+	$codesTags.each(function(idx, el) {
+
+		var $el = $(el);
+		var _class = $el.attr('class');
+		var lang = _class.split('-');
+		lang = lang[1];
+		$el.attr('data-language', lang);
+		
+	});
+
+});

data/docs/js/rainbow-custom.min.js

@@ -0,0 +1,13 @@
+/* Rainbow v1.1.8 rainbowco.de | included languages: generic, javascript, html, css */
+window.Rainbow=function(){function q(a){var b,c=a.getAttribute&&a.getAttribute("data-language")||0;if(!c){a=a.attributes;for(b=0;b<a.length;++b)if("data-language"===a[b].nodeName)return a[b].nodeValue}return c}function B(a){var b=q(a)||q(a.parentNode);if(!b){var c=/\blang(?:uage)?-(\w+)/;(a=a.className.match(c)||a.parentNode.className.match(c))&&(b=a[1])}return b}function C(a,b){for(var c in e[d]){c=parseInt(c,10);if(a==c&&b==e[d][c]?0:a<=c&&b>=e[d][c])delete e[d][c],delete j[d][c];if(a>=c&&a<e[d][c]||
+b>c&&b<e[d][c])return!0}return!1}function r(a,b){return'<span class="'+a.replace(/\./g," ")+(l?" "+l:"")+'">'+b+"</span>"}function s(a,b,c,h){var f=a.exec(c);if(f){++t;!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);var k=f[0],i=f.index,u=f[0].length+i,g=function(){function f(){s(a,b,c,h)}t%100>0?f():setTimeout(f,0)};if(C(i,u))g();else{var m=v(b.matches),l=function(a,c,h){if(a>=c.length)h(k);else{var d=f[c[a]];if(d){var e=b.matches[c[a]],i=e.language,g=e.name&&e.matches?
+e.matches:e,j=function(b,d,e){var i;i=0;var g;for(g=1;g<c[a];++g)f[g]&&(i=i+f[g].length);d=e?r(e,d):d;k=k.substr(0,i)+k.substr(i).replace(b,d);l(++a,c,h)};i?n(d,i,function(a){j(d,a)}):typeof e==="string"?j(d,d,e):w(d,g.length?g:[g],function(a){j(d,a,e.matches?e.name:0)})}else l(++a,c,h)}};l(0,m,function(a){b.name&&(a=r(b.name,a));if(!j[d]){j[d]={};e[d]={}}j[d][i]={replace:f[0],"with":a};e[d][i]=u;g()})}}else h()}function v(a){var b=[],c;for(c in a)a.hasOwnProperty(c)&&b.push(c);return b.sort(function(a,
+b){return b-a})}function w(a,b,c){function h(b,k){k<b.length?s(b[k].pattern,b[k],a,function(){h(b,++k)}):D(a,function(a){delete j[d];delete e[d];--d;c(a)})}++d;h(b,0)}function D(a,b){function c(a,b,h,e){if(h<b.length){++x;var g=b[h],l=j[d][g],a=a.substr(0,g)+a.substr(g).replace(l.replace,l["with"]),g=function(){c(a,b,++h,e)};0<x%250?g():setTimeout(g,0)}else e(a)}var h=v(j[d]);c(a,h,0,b)}function n(a,b,c){var d=m[b]||[],f=m[y]||[],b=z[b]?d:d.concat(f);w(a.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/&(?![\w\#]+;)/g,
+"&amp;"),b,c)}function o(a,b,c){if(b<a.length){var d=a[b],f=B(d);return!(-1<(" "+d.className+" ").indexOf(" rainbow "))&&f?(f=f.toLowerCase(),d.className+=d.className?" rainbow":"rainbow",n(d.innerHTML,f,function(k){d.innerHTML=k;j={};e={};p&&p(d,f);setTimeout(function(){o(a,++b,c)},0)})):o(a,++b,c)}c&&c()}function A(a,b){var a=a&&"function"==typeof a.getElementsByTagName?a:document,c=a.getElementsByTagName("pre"),d=a.getElementsByTagName("code"),f,e=[];for(f=0;f<d.length;++f)e.push(d[f]);for(f=0;f<
+c.length;++f)c[f].getElementsByTagName("code").length||e.push(c[f]);o(e,0,b)}var j={},e={},m={},z={},d=0,y=0,t=0,x=0,l,p;return{extend:function(a,b,c){1==arguments.length&&(b=a,a=y);z[a]=c;m[a]=b.concat(m[a]||[])},b:function(a){p=a},a:function(a){l=a},color:function(a,b,c){if("string"==typeof a)return n(a,b,c);if("function"==typeof a)return A(0,a);A(a,b)}}}();window.addEventListener?window.addEventListener("load",Rainbow.color,!1):window.attachEvent("onload",Rainbow.color);Rainbow.onHighlight=Rainbow.b;
+Rainbow.addClass=Rainbow.a;Rainbow.extend([{matches:{1:{name:"keyword.operator",pattern:/\=/g},2:{name:"string",matches:{name:"constant.character.escape",pattern:/\\('|"){1}/g}}},pattern:/(\(|\s|\[|\=|:)(('|")([^\\\1]|\\.)*?(\3))/gm},{name:"comment",pattern:/\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm},{name:"constant.numeric",pattern:/\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi},{matches:{1:"keyword"},pattern:/\b(and|array|as|bool(ean)?|c(atch|har|lass|onst)|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi},
+{name:"constant.language",pattern:/true|false|null/g},{name:"keyword.operator",pattern:/\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g},{matches:{1:"function.call"},pattern:/(\w+?)(?=\()/g},{matches:{1:"storage.function",2:"entity.name.function"},pattern:/(function)\s(.*?)(?=\()/g}]);Rainbow.extend("javascript",[{name:"selector",pattern:/(\s|^)\$(?=\.|\()/g},{name:"support",pattern:/\b(window|document)\b/g},{matches:{1:"support.property"},pattern:/\.(length|node(Name|Value))\b/g},{matches:{1:"support.function"},pattern:/(setTimeout|setInterval)(?=\()/g},{matches:{1:"support.method"},pattern:/\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g},{matches:{1:"support.tag.script",2:[{name:"string",pattern:/('|")(.*?)(\1)/g},{name:"entity.tag.script",
+pattern:/(\w+)/g}],3:"support.tag.script"},pattern:/(&lt;\/?)(script.*?)(&gt;)/g},{name:"string.regexp",matches:{1:"string.regexp.open",2:{name:"constant.regexp.escape",pattern:/\\(.){1}/g},3:"string.regexp.close",4:"string.regexp.modifier"},pattern:/(\/)(?!\*)(.+)(\/)([igm]{0,3})/g},{matches:{1:"storage",3:"entity.function"},pattern:/(var)?(\s|^)(.*)(?=\s?=\s?function\()/g},{name:"entity.function",pattern:/(\w+)(?=:\s{0,}function)/g}]);Rainbow.extend("html",[{name:"source.php.embedded",matches:{2:{language:"php"}},pattern:/&lt;\?=?(?!xml)(php)?([\s\S]*?)(\?&gt;)/gm},{name:"source.css.embedded",matches:{"0":{language:"css"}},pattern:/&lt;style(.*?)&gt;([\s\S]*?)&lt;\/style&gt;/gm},{name:"source.js.embedded",matches:{"0":{language:"javascript"}},pattern:/&lt;script(?! src)(.*?)&gt;([\s\S]*?)&lt;\/script&gt;/gm},{name:"comment.html",pattern:/&lt;\!--[\S\s]*?--&gt;/g},{matches:{1:"support.tag.open",2:"support.tag.close"},pattern:/(&lt;)|(\/?\??&gt;)/g},
+{name:"support.tag",matches:{1:"support.tag",2:"support.tag.special",3:"support.tag-name"},pattern:/(&lt;\??)(\/|\!?)(\w+)/g},{matches:{1:"support.attribute"},pattern:/([a-z-]+)(?=\=)/g},{matches:{1:"support.operator",2:"string.quote",3:"string.value",4:"string.quote"},pattern:/(=)('|")(.*?)(\2)/g},{matches:{1:"support.operator",2:"support.value"},pattern:/(=)([a-zA-Z\-0-9]*)\b/g},{matches:{1:"support.attribute"},pattern:/\s(\w+)(?=\s|&gt;)(?![\s\S]*&lt;)/g}],!0);Rainbow.extend("css",[{name:"comment",pattern:/\/\*[\s\S]*?\*\//gm},{name:"constant.hex-color",pattern:/#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s)/gi},{matches:{1:"constant.numeric",2:"keyword.unit"},pattern:/(\d+)(px|em|cm|s|%)?/g},{name:"string",pattern:/('|")(.*?)\1/g},{name:"support.css-property",matches:{1:"support.vendor-prefix"},pattern:/(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g},{matches:{1:[{name:"entity.name.sass",pattern:/&amp;/g},{name:"direct-descendant",pattern:/&gt;/g},{name:"entity.name.class",
+pattern:/\.[\w\-_]+/g},{name:"entity.name.id",pattern:/\#[\w\-_]+/g},{name:"entity.name.pseudo",pattern:/:[\w\-_]+/g},{name:"entity.name.tag",pattern:/\w+/g}]},pattern:/([\w\ ,:\.\#\&\;\-_]+)(?=.*\{)/g},{matches:{2:"support.vendor-prefix",3:"support.css-value"},pattern:/(:|,)\s?(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g},{matches:{1:"support.tag.style",2:[{name:"string",pattern:/('|")(.*?)(\1)/g},{name:"entity.tag.style",pattern:/(\w+)/g}],3:"support.tag.style"},pattern:/(&lt;\/?)(style.*?)(&gt;)/g}],
+!0);

data/docs/sass/style.scss

@@ -0,0 +1,215 @@
+@import "picasso";
+
+body{
+
+}
+
+//
+//Components
+//
+
+//Buttons
+.button-demo-1{
+	@include button();
+}
+
+.button-demo-2{
+	@include button(70px, 30px, #0088CC, white);
+}
+
+.button-demo-3{
+	@include button(80px, 30px, #FBB450, white);
+}
+
+.button-demo-4{
+	@include button(250px, 30px, #62C462, white);
+}
+
+//Mini-Buttons
+.mini-button-demo-1{
+	@include mini-button();
+}
+
+.mini-button-demo-2{
+	@include mini-button(#0088CC, white);
+}
+
+.mini-button-demo-3{
+	@include mini-button(#DA4F49, white);
+}
+
+.mini-button-demo-4{
+	@include mini-button(#414141, white);
+}
+
+//Arrows
+.arrow-demo-1{
+	@include arrow();
+}
+
+.arrow-demo-2{
+	@include arrow(#B94A48, white);
+}
+
+.arrow-demo-3{
+	@include arrow(#F89406, white);
+}
+
+.arrow-demo-4{
+	@include arrow(#468847, white);
+}
+
+
+//Bubbles
+.bubble-demo-1{
+	@include bubble();
+}
+
+.bubble-demo-2{
+	@include bubble(400px, #E6E6E6, #333333, true);
+}
+
+.bubble-demo-1, .bubble-demo-2{
+	margin: 20px 0;
+}
+
+
+//Despegar
+
+.despegar-size-1-demo{
+	font-size: $despegar-size-1;
+}
+
+.despegar-size-2-demo{
+	font-size: $despegar-size-2;
+}
+
+.despegar-size-3-demo{
+	font-size: $despegar-size-3;
+}
+
+.despegar-size-4-demo{
+	font-size: $despegar-size-4;
+}
+
+.despegar-size-5-demo{
+	font-size: $despegar-size-5;
+}
+
+.despegar-size-6-demo{
+	font-size: $despegar-size-6;
+}
+
+.despegar-black-demo{
+	padding: 10px;
+	background: $despegar-black;
+	color: white;
+}
+
+.despegar-white-demo{
+	padding: 10px;
+	background: $despegar-white;
+}
+
+.despegar-yellow-demo{
+	padding: 10px;
+	background: $despegar-yellow;
+}
+
+.despegar-red-demo{
+	padding: 10px;
+	background: $despegar-red;
+}
+
+.despegar-blue-demo{
+	padding: 10px;
+	background: $despegar-blue;
+	color: white;
+}
+
+.despegar-gray-1-demo{
+	padding: 10px;
+	background: $despegar-gray-1;
+	color: white;
+}
+
+.despegar-gray-2-demo{
+	padding: 10px;
+	background: $despegar-gray-2;
+	color: white;
+}
+
+.despegar-gray-3-demo{
+	padding: 10px;
+	background: $despegar-gray-3;
+	color: white;
+}
+
+.despegar-gray-4-demo{
+	padding: 10px;
+	background: $despegar-gray-4;
+	color: white;
+}
+
+.despegar-gray-5-demo{
+	padding: 10px;
+	background: $despegar-gray-5;
+	color: white;
+}
+
+.despegar-gray-6-demo{
+	padding: 10px;
+	background: $despegar-gray-6;
+}
+
+.despegar-gray-7-demo{
+	padding: 10px;
+	background: $despegar-gray-7;
+}
+
+.despegar-searchbox-bg-demo{
+	padding: 10px;
+	background: $despegar-searchbox-bg;
+}
+
+.despegar-title-color-demo{
+	padding: 10px;
+	background: $despegar-title-color;
+	color: white;
+}
+
+.despegar-titlealt-color-demo{
+	padding: 10px;
+	background: $despegar-titlealt-color;
+}
+
+.despegar-link-color-demo{
+	padding: 10px;
+	background: $despegar-link-color;
+}
+
+.despegar-link-color-hover-demo{
+	padding: 10px;
+	background: $despegar-link-color-hover;
+}
+
+.despegar-error-bg-demo{
+	padding: 10px;
+	background: $despegar-error-bg;
+}
+
+.despegar-error-border-demo{
+	padding: 10px;
+	background: $despegar-error-border;
+}
+
+.despegar-warning-bg-demo{
+	padding: 10px;
+	background: $despegar-warning-bg;
+}
+
+.despegar-warning-border-demo{
+	padding: 10px;
+	background: $despegar-warning-border;
+}
+

data/docs/utils.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Picasso Docs</title>
+    
+    <link type="text/css" rel="stylesheet" href="./css/markdown.css">
+    <link type="text/css" rel="stylesheet" href="./css/github.css">
+    <link type="text/css" rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+
+    
+
+    
+    <aside>
+        <nav>
+            <ol>
+                
+                    <li>
+                        <a href="./intro.html#picasso-framework-css-sass">Picasso. Framework CSS/Sass.</a>
+                        
+                            <ol>
+                                
+                            </ol>
+                        
+                    </li>
+                
+                    <li>
+                        <a href="./components.html#components">Components</a>
+                        
+                            <ol>
+                                
+                                    <li><a href="./buttons.html#buttons">Buttons</a></li>
+                                
+                                    <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
+                                
+                                    <li><a href="./arrows.html#arrows">Arrows</a></li>
+                                
+                                    <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
+                                
+                            </ol>
+                        
+                    </li>
+                
+                    <li>
+                        <a href="./utils.html#utils">Utils</a>
+                        
+                            <ol>
+                                
+                                    <li><a href="./utils.html#clearfix">Clearfix</a></li>
+                                
+                            </ol>
+                        
+                    </li>
+                
+                    <li>
+                        <a href="./despegar.html#despegar">Despegar</a>
+                        
+                            <ol>
+                                
+                                    <li><a href="./despegar.html#variables">Variables</a></li>
+                                
+                            </ol>
+                        
+                    </li>
+                
+            </ol>
+        </nav>
+    </aside>
+
+
+<article>
+    <a name="utils"></a><h1>Utils</h1>
+<a name="clearfix"></a><h2>Clearfix</h2>
+<p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
+
+</p>
+<a name="sass"></a><h3>Sass</h3>
+<pre><code class="lang-css">@import &quot;picasso/utils/clearfix&quot;;
+
+//Clearfix
+.container{
+    @include clearfix;
+}</code></pre>
+
+</article>
+
+
+    <footer>
+        <a href="./all.html">Everything on a single page</a>
+        
+    </footer>
+
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script src="./js/docs.js"></script>
+  <script src="./js/rainbow-custom.min.js"></script>
+
+</body>
+
+</html>

data/lib/picasso/version.rb

@@ -1,3 +1,3 @@
 module Picasso
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/stylesheets/_picasso.scss

@@ -0,0 +1,3 @@
+@import "picasso/utils";
+@import "picasso/components";
+@import "picasso/despegar";

data/stylesheets/picasso/_components.scss

@@ -0,0 +1,3 @@
+@import "components/buttons";
+@import "components/arrows";
+@import "components/bubbles";

data/stylesheets/picasso/_despegar.scss

@@ -0,0 +1 @@
+@import "despegar/variables";

data/stylesheets/picasso/_utils.scss

@@ -0,0 +1 @@
+@import "utils/clearfix";

data/stylesheets/picasso/components/_arrows.scss

@@ -0,0 +1,54 @@
+//
+// Arrows
+//
+
+$arrow-default-background: #888;
+$arrow-default-color: white;
+
+@mixin arrow(
+
+	// Background del elemento
+	$background: $arrow-default-background,
+
+	// Color del elemento
+	$color: $arrow-default-color){
+
+	@include arrow-layout();
+	@include arrow-visual($background, $color);
+
+}
+
+@mixin arrow-visual($background, $color) {
+
+    background: $background;
+    color: $color;
+    font-family: sans-serif;
+    font-style: normal;
+    font-size: 9px;
+
+    &:after{
+        border-top: 7px solid transparent;
+        border-bottom: 7px solid transparent;
+        border-left: 7px solid $background;
+    }
+
+}
+
+@mixin arrow-layout() {
+
+    padding: 0px 5px;
+    display: inline-block;
+    height: 14px;
+    line-height: 16px;
+    position: relative;
+
+    &:after{
+        content: "";                
+        position: absolute;
+        top: 0;
+        right: -7px;
+        width: 0;
+        height: 0;
+    }
+
+}

data/stylesheets/picasso/components/_bubbles.scss

@@ -0,0 +1,76 @@
+//
+// Bubbles
+//
+
+@import "compass/css3/border-radius";
+@import "compass/typography/text/ellipsis";
+//@import "compass/css3/pie";
+
+$bubble-default-width : auto;
+$bubble-default-background : #EEE;
+$bubble-default-color : #999;
+$bubble-default-ellipsis : false;
+
+@mixin bubble(
+
+	// Ancho del elemento
+	$width: $bubble-default-width, 
+
+	// Background del elemento
+	$background: $bubble-default-background, 
+
+	// Color del texto del elemento
+	$color: $bubble-default-color,
+
+    // Seteo de ellipsis
+    $ellipsis: $bubble-default-ellipsis
+    ){
+
+	@include bubble-layout($width);
+	@include bubble-visual($background, $color, $ellipsis);
+
+}
+
+@mixin bubble-visual($background, $color, $ellipsis){
+
+	background: $background;
+	@include border-radius(5px);
+
+    blockquote{
+        color: $color;
+        @if $ellipsis {
+            @include ellipsis(true);
+        }
+    }
+
+    h4{
+        @if $ellipsis {
+            @include ellipsis(true);
+        } 
+    }
+
+    &:after{
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 15px solid  $background;
+    }
+
+}
+
+@mixin bubble-layout($width){
+
+    padding: 10px;
+    display: block;
+    width: $width;
+    position: relative;
+
+    &:after{
+        content: "";                
+        position: absolute;
+        bottom: -15px;
+        right: 20px;
+        width: 0;
+        height: 0;
+    }
+
+}