-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbutton.html
More file actions
45 lines (38 loc) · 12.5 KB
/
button.html
File metadata and controls
45 lines (38 loc) · 12.5 KB
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
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="_loader.html" />
</head>
<body>
<template>
<style type="text/css">/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;line-height:1.5;color:#24292e;background-color:#fff}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress,sub,sup{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#0366d6;text-decoration:none}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:600}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:90%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}kbd,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*{box-sizing:border-box}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a:hover{text-decoration:underline}.rule,hr{height:0;margin:15px 0;overflow:hidden;background:0 0;border:0;border-bottom:1px solid #dfe2e5}.rule::after,.rule::before,hr::after,hr::before{display:table;content:""}.rule::after,hr::after{clear:both}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}button{cursor:pointer}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:0}h1,h2,h3,h4,h5,h6{font-size:32px;font-weight:600}h2,h3,h4,h5,h6{font-size:24px}h3,h4,h5,h6{font-size:20px}h4,h5,h6{font-size:16px}h5,h6{font-size:14px}h6{font-size:12px}p{margin-bottom:10px}blockquote{margin:0}ol,ul{padding-left:0}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}dd{margin-left:0}code,pre,tt{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px}ol,pre,ul{margin-top:0;margin-bottom:0}.octicon{vertical-align:text-bottom}</style>
<style type="text/css">.btn{position:relative;display:inline-block;padding:6px 12px;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid rgba(27,31,35,.2);border-radius:.25em;appearance:none;color:#24292e;background-color:#eff3f6;background-image:linear-gradient(-180deg,#fafbfc 0%,#eff3f6 90%)}.btn i{font-style:normal;font-weight:500;opacity:.6}.btn .octicon{vertical-align:text-top}.btn .Counter{color:#586069;text-shadow:none;background-color:rgba(27,31,35,.1)}.btn:hover{text-decoration:none;background-repeat:repeat-x}.btn:focus{outline:0}.btn.disabled,.btn:disabled{cursor:default;background-position:0 0}.btn.focus,.btn:focus{box-shadow:0 0 0 .2em rgba(3,102,214,.3)}.btn.hover,.btn:hover{background-color:#e6ebf1;background-image:linear-gradient(-180deg,#f0f3f6 0%,#e6ebf1 90%);background-position:0 -.5em;border-color:rgba(27,31,35,.35)}.btn.selected,.btn:active,[open]>.btn{background-color:#e9ecef;background-image:none;border-color:rgba(27,31,35,.35);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15)}.btn.disabled,.btn:disabled{color:rgba(36,41,46,.4);background-color:#eff3f6;background-image:none;border-color:rgba(27,31,35,.2);box-shadow:none}.btn-primary{color:#fff;background-color:#28a745;background-image:linear-gradient(-180deg,#34d058 0%,#28a745 90%)}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2em rgba(52,208,88,.3)}.btn-primary.hover,.btn-primary:hover{background-color:#269f42;background-image:linear-gradient(-180deg,#2fcb53 0%,#269f42 90%);background-position:0 -.5em;border-color:rgba(27,31,35,.5)}.btn-primary.selected,.btn-primary:active,[open]>.btn-primary{background-color:#279f43;background-image:none;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15)}.btn-primary.disabled,.btn-primary:disabled{color:rgba(255,255,255,.75);background-color:#94d3a2;background-image:none;border-color:rgba(27,31,35,.2);box-shadow:none}.btn-primary .Counter{color:#29b249;background-color:#fff}.btn-purple{color:#fff;background-color:#643ab0;background-image:linear-gradient(-180deg,#7e55c7 0%,#643ab0 90%)}.btn-purple.focus,.btn-purple:focus{box-shadow:0 0 0 .2em rgba(126,85,199,.3)}.btn-purple.hover,.btn-purple:hover{background-color:#5f37a8;background-image:linear-gradient(-180deg,#784ec5 0%,#5f37a8 90%);background-position:0 -.5em;border-color:rgba(27,31,35,.5)}.btn-purple.selected,.btn-purple:active,[open]>.btn-purple{background-color:#613ca4;background-image:none;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15)}.btn-purple.disabled,.btn-purple:disabled{color:rgba(255,255,255,.75);background-color:#b19cd7;background-image:none;border-color:rgba(27,31,35,.2);box-shadow:none}.btn-purple .Counter{color:#683cb8;background-color:#fff}.btn-blue{color:#fff;background-color:#0361cc;background-image:linear-gradient(-180deg,#0679fc 0%,#0361cc 90%)}.btn-blue.focus,.btn-blue:focus{box-shadow:0 0 0 .2em rgba(6,121,252,.3)}.btn-blue.hover,.btn-blue:hover{background-color:#035cc2;background-image:linear-gradient(-180deg,#0374f4 0%,#035cc2 90%);background-position:0 -.5em;border-color:rgba(27,31,35,.5)}.btn-blue.selected,.btn-blue:active,[open]>.btn-blue{background-color:#045cc1;background-image:none;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15)}.btn-blue.disabled,.btn-blue:disabled{color:rgba(255,255,255,.75);background-color:#81b0e5;background-image:none;border-color:rgba(27,31,35,.2);box-shadow:none}.btn-blue .Counter{color:#0366d6;background-color:#fff}.btn-danger{color:#cb2431;background-color:#fafbfc;background-image:linear-gradient(-180deg,#fafbfc 0%,#eff3f6 90%)}.btn-danger:focus{box-shadow:0 0 0 .2em rgba(203,36,49,.3)}.btn-danger:hover{color:#fff;background-color:#cb2431;background-image:linear-gradient(-180deg,#de4450 0%,#cb2431 90%);border-color:rgba(27,31,35,.5)}.btn-danger:hover .Counter{color:#fff}.btn-danger.selected,.btn-danger:active,[open]>.btn-danger{color:#fff;background-color:#b5202c;background-image:none;border-color:rgba(27,31,35,.5);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15)}.btn-danger.disabled,.btn-danger:disabled{color:rgba(203,36,49,.4);background-color:#eff3f6;background-image:none;border-color:rgba(27,31,35,.2);box-shadow:none}.btn-outline{background-image:none}.btn-outline .Counter{background-color:rgba(27,31,35,.07)}.btn-outline.selected,.btn-outline:active,.btn-outline:hover,[open]>.btn-outline{color:#fff;background-color:#0366d6;background-image:none;border-color:#0366d6}.btn-outline,.btn-outline.selected .Counter,.btn-outline:active .Counter,.btn-outline:hover .Counter,[open]>.btn-outline .Counter{color:#0366d6;background-color:#fff}.btn-outline:focus{border-color:#0366d6;box-shadow:0 0 0 .2em rgba(3,102,214,.3)}.btn-outline.disabled,.btn-outline:disabled{color:rgba(27,31,35,.3);background-color:#fff;border-color:rgba(27,31,35,.15);box-shadow:none}.btn-with-count{float:left;border-top-right-radius:0;border-bottom-right-radius:0}.btn-sm{padding:3px 10px;font-size:12px;line-height:20px}.btn-large{padding:.75em 1.25em;font-size:inherit;border-radius:6px}.hidden-text-expander{display:block}.hidden-text-expander.inline{position:relative;top:-1px;display:inline-block;margin-left:5px;line-height:0}.ellipsis-expander,.hidden-text-expander a{display:inline-block;height:12px;padding:0 5px 5px;font-size:12px;font-weight:600;line-height:6px;color:#444d56;text-decoration:none;vertical-align:middle;background:#dfe2e5;border:0;border-radius:1px}.ellipsis-expander:hover,.hidden-text-expander a:hover{text-decoration:none;background-color:#c6cbd1}.ellipsis-expander:active,.hidden-text-expander a:active{color:#fff;background-color:#2188ff}.social-count{float:left;padding:3px 10px;font-size:12px;font-weight:600;line-height:20px;color:#24292e;vertical-align:middle;background-color:#fff;border:1px solid rgba(27,31,35,.2);border-left:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.social-count:active,.social-count:hover{text-decoration:none}.social-count:hover{color:#0366d6;cursor:pointer}.btn-block{display:block;width:100%;text-align:center}.btn-link{display:inline-block;padding:0;font-size:inherit;color:#0366d6;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none}.btn-link:hover{text-decoration:underline}.btn-link:disabled,.btn-link:disabled:hover{color:rgba(88,96,105,.5);cursor:default}.BtnGroup{display:inline-block;vertical-align:middle}.BtnGroup::after,.BtnGroup::before{display:table;content:""}.BtnGroup::after{clear:both}.BtnGroup+.BtnGroup,.BtnGroup+.btn{margin-left:5px}.BtnGroup-item{position:relative;float:left;border-right-width:0;border-radius:0}.BtnGroup-item:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.BtnGroup-item:last-child{border-right-width:1px;border-top-right-radius:3px;border-bottom-right-radius:3px}.BtnGroup-item.selected,.BtnGroup-item:active,.BtnGroup-item:focus,.BtnGroup-item:hover{border-right-width:1px}.BtnGroup-item.selected+.BtnGroup-form .BtnGroup-item,.BtnGroup-item.selected+.BtnGroup-item,.BtnGroup-item:active+.BtnGroup-form .BtnGroup-item,.BtnGroup-item:active+.BtnGroup-item,.BtnGroup-item:focus+.BtnGroup-form .BtnGroup-item,.BtnGroup-item:focus+.BtnGroup-item,.BtnGroup-item:hover+.BtnGroup-form .BtnGroup-item,.BtnGroup-item:hover+.BtnGroup-item{border-left-width:0}.BtnGroup-form{float:left}.BtnGroup-form:first-child .BtnGroup-item{border-top-left-radius:3px;border-bottom-left-radius:3px}.BtnGroup-form:last-child .BtnGroup-item{border-right-width:1px;border-top-right-radius:3px;border-bottom-right-radius:3px}.BtnGroup-form .BtnGroup-item{border-right-width:0;border-radius:0}.BtnGroup-form.selected .BtnGroup-item,.BtnGroup-form:active .BtnGroup-item,.BtnGroup-form:focus .BtnGroup-item,.BtnGroup-form:hover .BtnGroup-item{border-right-width:1px}.BtnGroup-form.selected+.BtnGroup-form .BtnGroup-item,.BtnGroup-form.selected+.BtnGroup-item,.BtnGroup-form:active+.BtnGroup-form .BtnGroup-item,.BtnGroup-form:active+.BtnGroup-item,.BtnGroup-form:focus+.BtnGroup-form .BtnGroup-item,.BtnGroup-form:focus+.BtnGroup-item,.BtnGroup-form:hover+.BtnGroup-form .BtnGroup-item,.BtnGroup-form:hover+.BtnGroup-item{border-left-width:0}</style>
</template>
<script>
(function() {
githubPrimer.registerElement('primer-button', {
create: function (ownerDocument, document) {
var el = document.createElement("button");
el.setAttribute("type", "button");
// apply classes
['m-1', 'btn']
.forEach(className => el.classList.add(className));
// button types
['primary', 'danger', 'outline']
.forEach((buttonType) => {
if (this.hasAttribute(buttonType)) {
el.classList.add('btn-' + buttonType);
}
});
Array.from(this.childNodes)
.forEach((node) => el.appendChild(node))
var shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(el);
return shadowRoot;
}
});
})();
</script>
</body>
</html>