/
components-buttons.html
252 lines (204 loc) · 51.3 KB
/
components-buttons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html><html><head><title>buttons | Style Guide
</title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})(),window.PR_SHOULD_USE_CONTINUATION=!0,function(){function C(a){function i(a){var b=a.charCodeAt(0);if(b!==92)return b;var c=a.charAt(1);return b=h[c],b?b:"0"<=c&&c<="7"?parseInt(a.substring(1),8):c==="u"||c==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function j(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);var b=String.fromCharCode(a);if(b==="\\"||b==="-"||b==="["||b==="]")b="\\"+b;return b}function k(a){var b=a.substring(1,a.length-1).match(new RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g")),c=[],d=[],e=b[0]==="^";for(var f=e?1:0,g=b.length;f<g;++f){var h=b[f];if(/\\[bdsw]/i.test(h))c.push(h);else{var k=i(h),l;f+2<g&&"-"===b[f+1]?(l=i(b[f+2]),f+=2):l=k,d.push([k,l]),l<65||k>122||(l<65||k>90||d.push([Math.max(65,k)|32,Math.min(l,90)|32]),l<97||k>122||d.push([Math.max(97,k)&-33,Math.min(l,122)&-33]))}}d.sort(function(a,b){return a[0]-b[0]||b[1]-a[1]});var m=[],n=[NaN,NaN];for(var f=0;f<d.length;++f){var o=d[f];o[0]<=n[1]+1?n[1]=Math.max(n[1],o[1]):m.push(n=o)}var p=["["];e&&p.push("^"),p.push.apply(p,c);for(var f=0;f<m.length;++f){var o=m[f];p.push(j(o[0])),o[1]>o[0]&&(o[1]+1>o[0]&&p.push("-"),p.push(j(o[1])))}return p.push("]"),p.join("")}function l(a){var d=a.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),e=d.length,f=[];for(var g=0,h=0;g<e;++g){var i=d[g];if(i==="(")++h;else if("\\"===i.charAt(0)){var j=+i.substring(1);j&&j<=h&&(f[j]=-1)}}for(var g=1;g<f.length;++g)-1===f[g]&&(f[g]=++b);for(var g=0,h=0;g<e;++g){var i=d[g];if(i==="(")++h,f[h]===undefined&&(d[g]="(?:");else if("\\"===i.charAt(0)){var j=+i.substring(1);j&&j<=h&&(d[g]="\\"+f[h])}}for(var g=0,h=0;g<e;++g)"^"===d[g]&&"^"!==d[g+1]&&(d[g]="");if(a.ignoreCase&&c)for(var g=0;g<e;++g){var i=d[g],l=i.charAt(0);i.length>=2&&l==="["?d[g]=k(i):l!=="\\"&&(d[g]=i.replace(/[a-zA-Z]/g,function(a){var b=a.charCodeAt(0);return"["+String.fromCharCode(b&-33,b|32)+"]"}))}return d.join("")}var b=0,c=!1,d=!1;for(var e=0,f=a.length;e<f;++e){var g=a[e];if(g.ignoreCase)d=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){c=!0,d=!1;break}}var h={b:8,t:9,n:10,v:11,f:12,r:13},m=[];for(var e=0,f=a.length;e<f;++e){var g=a[e];if(g.global||g.multiline)throw new Error(""+g);m.push("(?:"+l(g)+")")}return new RegExp(m.join("|"),d?"gi":"g")}function D(a){function i(a){switch(a.nodeType){case 1:if(b.test(a.className))return;for(var g=a.firstChild;g;g=g.nextSibling)i(g);var j=a.nodeName;if("BR"===j||"LI"===j)c[f]="\n",e[f<<1]=d++,e[f++<<1|1]=a;break;case 3:case 4:var k=a.nodeValue;k.length&&(h?k=k.replace(/\r\n?/g,"\n"):k=k.replace(/[ \t\r\n]+/g," "),c[f]=k,e[f<<1]=d,d+=k.length,e[f++<<1|1]=a)}}var b=/(?:^|\s)nocode(?:\s|$)/,c=[],d=0,e=[],f=0,g;a.currentStyle?g=a.currentStyle.whiteSpace:window.getComputedStyle&&(g=document.defaultView.getComputedStyle(a,null).getPropertyValue("white-space"));var h=g&&"pre"===g.substring(0,3);return i(a),{sourceCode:c.join("").replace(/\n$/,""),spans:e}}function E(a,b,c,d){if(!b)return;var e={sourceCode:b,basePos:a};c(e),d.push.apply(d,e.decorations)}function G(a){var b=undefined;for(var c=a.firstChild;c;c=c.nextSibling){var d=c.nodeType;b=d===1?b?a:c:d===3?F.test(c.nodeValue)?a:b:b}return b===a?undefined:b}function H(a,b){var c={},d;(function(){var e=a.concat(b),f=[],g={};for(var h=0,i=e.length;h<i;++h){var j=e[h],k=j[3];if(k)for(var l=k.length;--l>=0;)c[k.charAt(l)]=j;var m=j[1],n=""+m;g.hasOwnProperty(n)||(f.push(m),g[n]=null)}f.push(/[\0-\uffff]/),d=C(f)})();var e=b.length,f=function(a){var g=a.sourceCode,h=a.basePos,i=[h,u],j=0,k=g.match(d)||[],l={};for(var m=0,n=k.length;m<n;++m){var o=k[m],p=l[o],q=void 0,r;if(typeof p=="string")r=!1;else{var s=c[o.charAt(0)];if(s)q=o.match(s[1]),p=s[0];else{for(var t=0;t<e;++t){s=b[t],q=o.match(s[1]);if(q){p=s[0];break}}q||(p=u)}r=p.length>=5&&"lang-"===p.substring(0,5),r&&(!q||typeof q[1]!="string")&&(r=!1,p=x),r||(l[o]=p)}var v=j;j+=o.length;if(!r)i.push(h+v,p);else{var w=q[1],y=o.indexOf(w),z=y+w.length;q[2]&&(z=o.length-q[2].length,y=z-w.length);var A=p.substring(5);E(h+v,o.substring(0,y),f,i),E(h+v+y,w,O(A,w),i),E(h+v+z,o.substring(z),f,i)}}a.decorations=i};return f}function I(a){var b=[],c=[];a.tripleQuotedStrings?b.push([o,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""]):a.multiLineStrings?b.push([o,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):b.push([o,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]),a.verbatimStrings&&c.push([o,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var d=a.hashComments;d&&(a.cStyleComments?(d>1?b.push([q,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):b.push([q,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]),c.push([o,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])):b.push([q,/^#[^\r\n]*/,null,"#"])),a.cStyleComments&&(c.push([q,/^\/\/[^\r\n]*/,null]),c.push([q,/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(a.regexLiterals){var e="/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/";c.push(["lang-regex",new RegExp("^"+B+"("+e+")")])}var f=a.types;f&&c.push([r,f]);var g=(""+a.keywords).replace(/^ | $/g,"");return g.length&&c.push([p,new RegExp("^(?:"+g.replace(/[\s,]+/g,"|")+")\\b"),null]),b.push([u,/^\s+/,null," \r\n "]),c.push([s,/^@[a-z_$][a-z_$@0-9]*/i,null],[r,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[u,/^[a-z_$][a-z_$@0-9]*/i,null],[s,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[u,/^\\[\s\S]?/,null],[t,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]),H(b,c)}function K(a,b){function j(a){switch(a.nodeType){case 1:if(c.test(a.className))break;if("BR"===a.nodeName)k(a),a.parentNode&&a.parentNode.removeChild(a);else for(var b=a.firstChild;b;b=b.nextSibling)j(b);break;case 3:case 4:if(g){var f=a.nodeValue,h=f.match(d);if(h){var i=f.substring(0,h.index);a.nodeValue=i;var l=f.substring(h.index+h[0].length);if(l){var m=a.parentNode;m.insertBefore(e.createTextNode(l),a.nextSibling)}k(a),i||a.parentNode.removeChild(a)}}}}function k(a){function b(a,c){var d=c?a.cloneNode(!1):a,e=a.parentNode;if(e){var f=b(e,1),g=a.nextSibling;f.appendChild(d);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return d}while(!a.nextSibling){a=a.parentNode;if(!a)return}var c=b(a.nextSibling,0);for(var d;(d=c.parentNode)&&d.nodeType===1;)c=d;i.push(c)}var c=/(?:^|\s)nocode(?:\s|$)/,d=/\r\n?|\n/,e=a.ownerDocument,f;a.currentStyle?f=a.currentStyle.whiteSpace:window.getComputedStyle&&(f=e.defaultView.getComputedStyle(a,null).getPropertyValue("white-space"));var g=f&&"pre"===f.substring(0,3),h=e.createElement("LI");while(a.firstChild)h.appendChild(a.firstChild);var i=[h];for(var l=0;l<i.length;++l)j(i[l]);b===(b|0)&&i[0].setAttribute("value",b);var m=e.createElement("OL");m.className="linenums";var n=Math.max(0,b-1|0)||0;for(var l=0,o=i.length;l<o;++l)h=i[l],h.className="L"+(l+n)%10,h.firstChild||h.appendChild(e.createTextNode(" ")),m.appendChild(h);a.appendChild(m)}function L(a){var b=/\bMSIE\b/.test(navigator.userAgent),c=/\n/g,d=a.sourceCode,e=d.length,f=0,g=a.spans,h=g.length,i=0,j=a.decorations,k=j.length,l=0;j[k]=e;var m,n;for(n=m=0;n<k;)j[n]!==j[n+2]?(j[m++]=j[n++],j[m++]=j[n++]):n+=2;k=m;for(n=m=0;n<k;){var o=j[n],p=j[n+1],q=n+2;while(q+2<=k&&j[q+1]===p)q+=2;j[m++]=o,j[m++]=p,n=q}k=j.length=m;var r=null;while(i<h){var s=g[i],t=g[i+2]||e,u=j[l],v=j[l+2]||e,q=Math.min(t,v),w=g[i+1],x;if(w.nodeType!==1&&(x=d.substring(f,q))){b&&(x=x.replace(c,"\r")),w.nodeValue=x;var y=w.ownerDocument,z=y.createElement("SPAN");z.className=j[l+1];var A=w.parentNode;A.replaceChild(z,w),z.appendChild(w),f<t&&(g[i+1]=w=y.createTextNode(d.substring(q,t)),A.insertBefore(w,z.nextSibling))}f=q,f>=t&&(i+=2),f>=v&&(l+=2)}}function N(a,b){for(var c=b.length;--c>=0;){var d=b[c];M.hasOwnProperty(d)?window.console&&console.warn("cannot override language handler %s",d):M[d]=a}}function O(a,b){if(!a||!M.hasOwnProperty(a))a=/^\s*</.test(b)?"default-markup":"default-code";return M[a]}function P(a){var b=a.langExtension;try{var c=D(a.sourceNode),d=c.sourceCode;a.sourceCode=d,a.spans=c.spans,a.basePos=0,O(b,d)(a),L(a)}catch(e){"console"in window&&console.log(e&&e.stack?e.stack:e)}}function Q(a,b,c){var d=document.createElement("PRE");d.innerHTML=a,c&&K(d,c);var e={langExtension:b,numberLines:c,sourceNode:d};return P(e),d.innerHTML}function R(a){function b(a){return document.getElementsByTagName(a)}function m(){var b=window.PR_SHOULD_USE_CONTINUATION?h.now()+250:Infinity;for(;i<d.length&&h.now()<b;i++){var c=d[i],e=c.className;if(e.indexOf("prettyprint")>=0){var f=e.match(k),g;!f&&(g=G(c))&&"CODE"===g.tagName&&(f=g.className.match(k)),f&&(f=f[1]);var l=!1;for(var n=c.parentNode;n;n=n.parentNode)if((n.tagName==="pre"||n.tagName==="code"||n.tagName==="xmp")&&n.className&&n.className.indexOf("prettyprint")>=0){l=!0;break}if(!l){var o=c.className.match(/\blinenums\b(?::(\d+))?/);o=o?o[1]&&o[1].length?+o[1]:!0:!1,o&&K(c,o),j={langExtension:f,sourceNode:c,numberLines:o},P(j)}}}i<d.length?setTimeout(m,250):a&&a()}var c=[b("pre"),b("code"),b("xmp")],d=[];for(var e=0;e<c.length;++e)for(var f=0,g=c[e].length;f<g;++f)d.push(c[e][f]);c=null;var h=Date;h.now||(h={now:function(){return+(new Date)}});var i=0,j,k=/\blang(?:uage)?-([\w.]+)(?!\S)/,l=/\bprettyprint\b/;m()}var a=["break,continue,do,else,for,if,return,while"],b=[a,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],c=[b,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],d=[c,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],e=[c,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],f=[e,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],g="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",h=[c,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],i="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",j=[a,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],k=[a,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],l=[a,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],m=[d,f,h,i+j,k,l],n=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,o="str",p="kwd",q="com",r="typ",s="lit",t="pun",u="pln",v="tag",w="dec",x="src",y="atn",z="atv",A="nocode",B="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*",F=/\S/,J=I({keywords:m,hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),M={};N(J,["default-code"]),N(H([],[[u,/^[^<?]+/],[w,/^<!\w[^>]*(?:>|$)/],[q,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[t,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]),N(H([[u,/^[\s]+/,null," \r\n"],[z,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[v,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[y,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[t,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]),N(H([],[[z,/^[\s\S]+/]]),["uq.val"]),N(I({keywords:d,hashComments:!0,cStyleComments:!0,types:n}),["c","cc","cpp","cxx","cyc","m"]),N(I({keywords:"null,true,false"}),["json"]),N(I({keywords:f,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:n}),["cs"]),N(I({keywords:e,cStyleComments:!0}),["java"]),N(I({keywords:l,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]),N(I({keywords:j,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py"]),N(I({keywords:i,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]),N(I({keywords:k,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]),N(I({keywords:h,cStyleComments:!0,regexLiterals:!0}),["js"]),N(I({keywords:g,hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]),N(H([],[[o,/^[\s\S]+/]]),["regex"]),window.prettyPrintOne=Q,window.prettyPrint=R,window.PR={createSimpleLexer:H,registerLangHandler:N,sourceDecorator:I,PR_ATTRIB_NAME:y,PR_ATTRIB_VALUE:z,PR_COMMENT:q,PR_DECLARATION:w,PR_KEYWORD:p,PR_LITERAL:s,PR_NOCODE:A,PR_PLAIN:u,PR_PUNCTUATION:t,PR_SOURCE:x,PR_STRING:o,PR_TAG:v,PR_TYPE:r}}()</script><style type="text/preview">/*!
* Bootstrap v2.1.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 14px;margin-bottom:0;font-size:14px;line-height:20px;*line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,.75);background-color:whitesmoke;background-image:-moz-linear-gradient(top,white, #e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(white),to( #e6e6e6));background-image:-webkit-linear-gradient(top,white, #e6e6e6);background-image:-o-linear-gradient(top,white, #e6e6e6);background-image:linear-gradient(to bottom, #fff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#e3e3e3', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);border:1px solid #bbb;*border:0;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{color:#333;background-color:#e6e6e6;*background-color:#d9d9d9}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;*background-color:#d9d9d9;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{background-color:#e6e6e6;background-color:#d9d9d9 \9;background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)}.btn.disabled,.btn[disabled]{cursor:default;background-color:#e6e6e6;background-image:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-large{padding:9px 14px;font-size:16px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.btn-large [class^="icon-"]{margin-top:2px}.btn-small{padding:3px 9px;font-size:12px;line-height:18px}.btn-small [class^="icon-"]{margin-top:0}.btn-mini{padding:2px 6px;font-size:11px;line-height:16px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255,255,255,.75)}.btn{border-color:#c5c5c5;border-color:rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25)}.btn-primary{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#006ecc;background-image:-moz-linear-gradient(top, #08c, #04c);background-image:-webkit-gradient(linear,0 0,0 100%,from( #08c),to( #04c));background-image:-webkit-linear-gradient(top, #08c, #04c);background-image:-o-linear-gradient(top, #08c, #04c);background-image:linear-gradient(to bottom, #08c, #04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0085c7', endColorstr='#0042c7', GradientType=0);border-color:#04c #0044cc #002a80;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#04c;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{color:#fff;background-color:#04c;*background-color:#003bb3}.btn-primary:active,.btn-primary.active{background-color:#039 \9}.btn-warning{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#f9a834;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fbb450),to( #f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(to bottom, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb24b', endColorstr='#f39106', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#f89406;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{color:#fff;background-color:#f89406;*background-color:#df8505}.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}.btn-danger{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#db4f4a;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from( #ee5f5b),to( #bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5a56', endColorstr='#b9352e', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#bd362f;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{color:#fff;background-color:#bd362f;*background-color:#a9302a}.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}.btn-success{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from( #62c462),to( #51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(to bottom, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ec35e', endColorstr='#4fa04f', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#51a351;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{color:#fff;background-color:#51a351;*background-color:#499249}.btn-success:active,.btn-success.active{background-color:#408140 \9}.btn-info{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#4ab0ce;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(to bottom, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#57bedd', endColorstr='#2e93b0', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#2f96b4;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{color:#fff;background-color:#2f96b4;*background-color:#2a85a0}.btn-info:active,.btn-info.active{background-color:#24748c \9}.btn-inverse{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-color:#373737;background-image:-moz-linear-gradient(top, #444, #222);background-image:-webkit-gradient(linear,0 0,0 100%,from( #444),to( #222));background-image:-webkit-linear-gradient(top, #444, #222);background-image:-o-linear-gradient(top, #444, #222);background-image:linear-gradient(to bottom, #444, #222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#414141', endColorstr='#1f1f1f', GradientType=0);border-color:#222 #222222 black;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#222;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{color:#fff;background-color:#222;*background-color:#151515}.btn-inverse:active,.btn-inverse.active{background-color:#090909 \9}button.btn,input[type="submit"].btn{*padding-top:3px;*padding-bottom:3px}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px}button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px}button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px}.btn-link,.btn-link:active{background-color:transparent;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-link{border-color:transparent;cursor:pointer;color:#08c;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.btn-link:hover{color:#005580;text-decoration:underline;background-color:transparent}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">Style Guide</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">components</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="components-buttons.html">buttons</a></li><li><a href="components-mixins.html">mixins</a></li><li><a href="components-variables.html">variables</a></li></ul></li><li><a href="#" data-toggle="dropdown-2" unselectable="on" class="dropdown-toggle">sass</a><ul id="dropdown-2" hidden class="dropdown"><li><a href="main.html">main</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="" class="section"><div class="docs"><a href="#" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><p> A button suitable for giving stars to someone.</p>
<p> :hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a star.
.stars-given:hover - Subtle hover highlight on top of stars-given styling.
.disabled - Dims the button to indicate it cannot be used.</p>
<p> Styleguide 2.1.3.</p>
<h2 id="states"> States</h2>
<p> Hover state</p>
<textarea class="preview-code" spellcheck="false"><button class="btn :hover">Default</button></textarea><p> Focus state for keyboard and accessibility</p>
<textarea class="preview-code" spellcheck="false"><button class="btn :focus">Default</button></textarea><p> Active state</p>
<textarea class="preview-code" spellcheck="false"><button class="btn active">Active</button></textarea><p> Add the <code>disabled</code> class to links and the <code>disabled</code> attribute for <code>button</code> elements.</p>
<textarea class="preview-code" spellcheck="false"><button class="btn" disabled>Disabled</button></textarea>
</div><div class="code"><pre><code>.btn {
display: inline-block;
@include ie7-inline-block();
padding: 4px 14px;
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
line-height: $baseLineHeight;
*line-height: $baseLineHeight;
text-align: center;
vertical-align: middle;
cursor: pointer;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid $btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken($btnBorder, 10%);
@include border-radius(4px);
@include ie7-restore-left-whitespace(); // Give IE7 some love
@include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
&:hover {
color: $grayDark;
text-decoration: none;
background-color: darken($white, 10%);
*background-color: darken($white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
@include transition(background-position .1s linear);
}
// Focus state for keyboard and accessibility
&:focus {
@include tab-focus();
}
&.active,
&:active {
background-color: darken($white, 10%);
background-color: darken($white, 15%) \9;
background-image: none;
outline: 0;
@include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
}
// Disabled state
&.disabled,
&[disabled] {
cursor: default;
background-color: darken($white, 10%);
background-image: none;
@include opacity(65);
@include box-shadow(none);
}
}</code></pre></div></article><article id="multiple-sizes" class="section"><div class="docs"><a href="#multiple-sizes" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="multiple-sizes"> Multiple sizes</h1>
<p> Fancy larger or smaller buttons?</p>
<p> Large</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-large">Large</button></textarea><p> Small</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-small">Small</button></textarea><p> Mini</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-mini">Mini</button></textarea><p> Block button</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-block">Block</button></textarea><h2 id="alternate-buttons"> Alternate buttons</h2>
<p> Provide <em>some</em> extra contrast for those who can get it</p>
<h2 id="set-the-backgrounds"> Set the backgrounds</h2>
<p> Provides extra visual weight and identifies the primary action in a set of buttons.</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-primary">Primary</button>
<button class="btn btn-primary :hover">Hover</button>
<button class="btn btn-primary :active">Active</button></textarea><p> Indicates caution should be taken with this action</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-warning">Warning</button>
<button class="btn btn-warning :hover">Hover</button>
<button class="btn btn-warning :active">Active</button></textarea><p> Indicates a dangerous or potentially negative action</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-danger">Danger</button>
<button class="btn btn-danger :hover">Hover</button>
<button class="btn btn-danger :active">Active</button></textarea><p> Indicates a successful or positive action</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-success">Success</button>
<button class="btn btn-success :hover">Hover</button>
<button class="btn btn-success :active">Active</button></textarea><p> Used as an alternate to the default styles</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-info">Info</button>
<button class="btn btn-info :hover">Hover</button>
<button class="btn btn-info :active">Active</button></textarea><p> Alternate dark gray button, not tied to a semantic action or use</p>
<textarea class="preview-code" spellcheck="false"><button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse :hover">Hover</button>
<button class="btn btn-inverse :active">Active</button></textarea><h2 id="crossbrowser-jank"> Cross-browser Jank</h2>
<h2 id="link-buttons"> Link buttons</h2>
<p> Make a button look and behave like a link</p>
</div><div class="code"><pre><code>.btn-large {
padding: 9px 14px;
font-size: $baseFontSize + 2px;
line-height: normal;
@include border-radius(5px);
}
.btn-large [class^="icon-"] {
margin-top: 2px;
}
.btn-small {
padding: 3px 9px;
font-size: $baseFontSize - 2px;
line-height: $baseLineHeight - 2px;
}
.btn-small [class^="icon-"] {
margin-top: 0px;
}
.btn-mini {
padding: 2px 6px;
font-size: $baseFontSize - 3px;
line-height: $baseLineHeight - 4px;
}
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
@include box-sizing(border-box);
}
.btn-block + .btn-block {
margin-top: 5px;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
.btn {
// reset here as of 2.0.3 due to Recess property order
border-color: #c5c5c5;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
// Set the backgrounds
.btn-primary {
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
}
.btn-warning {
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
}
.btn-danger {
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
}
.btn-success {
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
}
.btn-info {
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
}
.btn-inverse {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
}
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
.btn-link,
.btn-link:active {
background-color: transparent;
background-image: none;
@include box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: $linkColor;
@include border-radius(0);
}
.btn-link:hover {
color: $linkColorHover;
text-decoration: underline;
background-color: transparent;
}</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 386" height="24" width="26" class="icon"><path d="m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z"></path></svg></button><button title="Laptop (1024)" data-width='1024'><svg viewBox="0 0 384 312" height="23" width="28" class="icon"><path d="m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z"></path></svg></button><button title="Tablet (768)" data-width='768'><svg viewBox="0 0 317 412" height="24" width="18" class="icon"><path d="M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-32 H 32 C 14.3,0 0,14.3 0,32 v 348 c 0,17.7 14.3,32 32,32 h 252.5 c 17.7,0 32,-14.3 32,-32 z M 40,367 V 45 H 276.5 V 367 H 40 z m 109.8,22.7 c 0,-4.7 3.8,-8.5 8.5,-8.5 4.7,0 8.5,3.8 8.5,8.5 0,4.7 -3.8,8.5 -8.5,8.5 -4.7,0 -8.5,-3.8 -8.5,-8.5 z"></path></svg></button><button title="Smart phone (320)" data-width='320'><svg viewBox="0 0 224 412" height="24" width="13" class="icon"><path d="M 190.7,0 H 33 C 14.8,0 0,14.8 0,33 v 346 c 0,18.2 14.8,33 33,33 h 157.7 c 18.2,0 33,-14.8 33,-33 V 33 c 0,-18.2 -14.8,-33 -33,-33 z M 94.3,30.2 h 37 c 2.2,0 4,1.8 4,4 0,2.2 -1.8,4 -4,4 h -37 c -2.2,0 -4,-1.8 -4,-4 0,-2.2 1.8,-4 4,-4 z m 18.5,362.8 c -8.8,0 -16,-7.2 -16,-16 0,-8.8 7.2,-16 16,-16 8.8,0 16,7.2 16,16 0,8.8 -7.2,16 -16,16 z M 198.6,343.8 H 25.1 V 68.2 h 173.5 v 275.5 z"></path></svg></button><button title="Feature phone (240)" data-width='240'><svg viewBox="0 0 201 412" height="24" width="12" class="icon"><path d="M 165.5,0.2 V 45 H 25 c -13.8,0 -25,11.2 -25,25 V 387 c 0,13.8 11.2,25 25,25 h 150.5 c 13.8,0 25,-11.2 25,-25 V 0.2 h -35 z M 65.2,366.5 H 34.2 v -24.5 h 31 v 24.5 z m 0,-44.3 H 34.2 v -24.5 h 31 v 24.5 z m 50.5,44.3 H 84.7 v -24.5 h 31 v 24.5 z m 0,-44.3 H 84.7 v -24.5 h 31 v 24.5 z m 50.5,44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-44.3 h -31 v -24.5 h 31 v 24.5 z m 0,-59.3 h -132 V 95.4 h 132 V 262.9 z"></path></svg></button><button title="Auto (100%)" data-width="auto" class="auto is-active">Auto</button></div></div><script>(function(){var a=[{title:"buttons",filename:"components/buttons",url:"components-buttons.html"},{title:"",filename:"components/buttons",url:"components-buttons.html#"},{title:"Multiple sizes",filename:"components/buttons",url:"components-buttons.html#multiple-sizes"},{title:"mixins",filename:"components/mixins",url:"components-mixins.html"},{title:"Mixins",filename:"components/mixins",url:"components-mixins.html#mixins"},{title:"variables",filename:"components/variables",url:"components-variables.html"},{title:"Variables",filename:"components/variables",url:"components-variables.html#variables"},{title:"main",filename:"main",url:"main.html"},{title:"",filename:"main",url:"main.html#"}];(function(){"use strict";var b=function(a,b){return Array.prototype.indexOf.call(a,b)!==-1},c=function(a,b){return Array.prototype.filter.call(a,b)},d=function(a,b){return Array.prototype.forEach.call(a,b)},e=document.getElementsByTagName("body")[0];e.addEventListener("click",function(a){var b=a.target;b.tagName.toLowerCase()==="svg"&&(b=b.parentNode);var c=!1;b.dataset.toggle!=null&&(a.preventDefault(),b.classList.contains("is-active")||(c=!0)),d(e.querySelectorAll("[data-toggle]"),function(a){a.classList.remove("is-active"),document.getElementById(a.dataset.toggle).hidden=!0}),c&&(b.classList.add("is-active"),document.getElementById(b.dataset.toggle).hidden=!1)}),function(){var f=e.getElementsByClassName("nav")[0];if(!f)return;var g=document.createElement("ul");g.className="nav-results",g.id="nav-search",g.hidden=!0,d(a,function(a){var b,c,d;b=document.createElement("li"),b._title=a.title.toLowerCase(),b.hidden=!0,b.appendChild(c=document.createElement("a")),c.href=a.url,c.innerHTML=a.title,c.appendChild(d=document.createElement("span")),d.innerHTML=a.filename,d.className="nav-results-filename",g.appendChild(b)}),f.appendChild(g);var h=g.children,i=function(a){d(h,function(a){a.hidden=!0});var b=this.value.toLowerCase(),e=[];b!==""&&(e=c(h,function(a){return a._title.indexOf(b)!==-1})),e.length>0?(d(e,function(a){a.hidden=!1}),g.hidden=!1):g.hidden=!0},j=f.querySelector('input[type="search"]');j.addEventListener("keyup",i),j.addEventListener("focus",i),e.addEventListener("click",function(a){if(a.target.classList&&a.target.classList.contains("search"))return;g.hidden=!0}),g.addEventListener("click",function(a){j.value=""});var k=document.createElement("ul");k.id="nav-toc",k.hidden=!0,k.className="nav-results toc-list",c(e.getElementsByTagName("*"),function(a){return b(["h1","h2","h3"],a.tagName.toLowerCase())}).map(function(a){var b=document.createElement("li"),c=document.createElement("a"),d=a.tagName.toLowerCase()[1];c.classList.add("level-"+d),b.appendChild(c),c.href="#"+a.id,c.innerHTML=a.innerHTML,k.appendChild(b)}),f.appendChild(k)}()})(),function(){"use strict";if(location.hash==="#__preview__"||location.protocol==="data:")return;var a=function(a,b){return Array.prototype.forEach.call(a,b)},b=function(a,b){var e=Array.prototype.slice.call(arguments,2);return d(a,function(a){return(c(b)?b||a:a[b]).apply(a,e)})},c=function(a){return Object.prototype.toString.call(a)==="[object Function]"},d=function(a,b){return Array.prototype.map.call(a,b)},e=function(a,b){return d(a,function(a){return a[b]})},f=function(a){var b={},c=a.split(";");for(var d=0;c.length>d;d++){var e=c[d].trim().split("=");b[e[0]]=e[1]}return b},g=function(a,c){return b(e(a,"classList"),"remove",c)},h=function(a,b){a.contentDocument.defaultView.postMessage(b,"*")},i=document.getElementsByTagName("head")[0],j=document.getElementsByTagName("body")[0],k=e(i.querySelectorAll('style[type="text/preview"]'),"innerHTML").join(""),l=e(i.querySelectorAll('script[type="text/preview"]'),"innerHTML").join(""),m=location.href.split("#")[0]+"#__preview__",n=document.createElement("iframe");n.src="data:text/html,",j.appendChild(n),n.addEventListener("load",function(){var b={sameOriginDataUri:!0};try{this.contentDocument,this.contentDocument||(b.sameOriginDataUri=!1)}catch(c){b.sameOriginDataUri=!1}this.parentNode.removeChild(this),a(j.getElementsByTagName("textarea"),function(a,c){o(a,b,c),q(),p(a)})});var o=function(a,b,c){var d,e,f;d=document.createElement("div"),d.appendChild(e=document.createElement("div")),d.className="preview",e.appendChild(f=document.createElement("iframe")),e.className="resizeable",f.setAttribute("scrolling","no"),f.name="iframe"+c++,f.addEventListener("load",function(){var c,d,e,f,g,i,j;j=this.contentDocument;if(!b.sameOriginDataUri&&this.src!==m)return;this.src===m&&(c=j.createElement("html"),c.appendChild(j.createElement("head")),c.appendChild(d=j.createElement("body")),d.innerHTML=a.textContent,j.replaceChild(c,j.documentElement)),g=j.createElement("head"),g.appendChild(f=j.createElement("style")),g.appendChild(e=j.createElement("script")),e.textContent=l,f.textContent=k,i=j.getElementsByTagName("head")[0],i.parentNode.replaceChild(g,i),h(this,"getHeight")});var g;b.sameOriginDataUri?g="data:text/html;charset=utf-8,"+encodeURIComponent("<!doctype html><html><head></head></body>"+a.textContent):g=m,f.setAttribute("src",g);var i=function(){f.contentDocument.body.innerHTML=this.value,h(f,"getHeight")};a.addEventListener("keypress",i),a.addEventListener("keyup",i),a.parentNode.insertBefore(d,a)},p=function(a){var b=document.createElement("div");b.className="preview-code",b.style.position="absolute",b.style.left="-9999px",j.appendChild(b);var c=parseInt(window.getComputedStyle(a).getPropertyValue("max-height"),10),d=function(a){b.textContent=this.value+"\n";var d=b.offsetHeight+2;d>=c?this.style.overflow="auto":this.style.overflow="hidden",this.style.height=b.offsetHeight+2+"px"};a.addEventListener("keypress",d),a.addEventListener("keyup",d),d.call(a)},q=function(){var b=j.getElementsByClassName("settings")[0],c=j.getElementsByClassName("resizeable"),d=30,e=function(b){document.cookie="preview-width="+b,a(c,function(a){b==="auto"&&(b=a.parentNode.offsetWidth),a.style.width=b+"px",h(a.getElementsByTagName("iframe")[0],"getHeight")})},i=f(document.cookie)["preview-width"];if(i){e(i),g(b.getElementsByClassName("is-active"),"is-active");var k=b.querySelector('button[data-width="'+i+'"]');k&&k.classList.add("is-active")}window.addEventListener("message",function(a){if(a.data==null||!a.source)return;var b=a.data,c=document.getElementsByName(a.source.name)[0];b.height!=null&&c&&(c.parentNode.style.height=b.height+d+"px")},!1),b&&c.length>0&&(b.hidden=!1,b.addEventListener("click",function(a){var c=a.target.tagName.toLowerCase(),d;if(c==="button")d=a.target;else{if(c!=="svg")return;d=a.target.parentNode}a.preventDefault(),g(b.getElementsByClassName("is-active"),"is-active"),d.classList.add("is-active");var f=d.dataset.width;e(f)}))}}()})()</script></body></html><!-- Generated with StyleDocco (http://jacobrask.github.com/styledocco). -->