@primer/css/dist/buttons.css

The CSS implementation of GitHub's Primer Design System

.btn{position:relative;display:inline-block;padding:5px 16px;font-size:14px;font-weight:500;line-height:20px;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid;border-radius:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn:hover{text-decoration:none}.btn:disabled,.btn.disabled,.btn[aria-disabled=true]{cursor:default}.btn:disabled .octicon,.btn.disabled .octicon,.btn[aria-disabled=true] .octicon{color:var(--color-icon-tertiary)}.btn i{font-style:normal;font-weight:500;opacity:0.75}.btn .octicon{margin-right:4px;color:var(--color-text-tertiary);vertical-align:text-bottom}.btn .octicon:only-child{margin-right:0}.btn .Counter{margin-left:2px;color:inherit;text-shadow:none;vertical-align:top;background-color:var(--color-btn-counter-bg)}.btn .dropdown-caret{margin-left:4px;opacity:0.8}.btn{color:var(--color-btn-text);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);transition:0.2s cubic-bezier(0.3, 0, 0.5, 1);transition-property:color, background-color, border-color}.btn:hover,.btn.hover,[open]>.btn{background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border);transition-duration:0.1s}.btn:active{background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border);transition:none}.btn.selected,.btn[aria-selected=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-shadow-inset)}.btn:disabled,.btn.disabled,.btn[aria-disabled=true]{color:var(--color-text-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border)}.btn:focus,.btn.focus{border-color:var(--color-btn-focus-border);outline:none;box-shadow:var(--color-btn-focus-shadow)}.btn-primary{color:var(--color-btn-primary-text);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow)}.btn-primary:hover,.btn-primary.hover,[open]>.btn-primary{background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.btn-primary:active,.btn-primary.selected,.btn-primary[aria-selected=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.btn-primary:disabled,.btn-primary.disabled,.btn-primary[aria-disabled=true]{color:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border)}.btn-primary:focus,.btn-primary.focus{background-color:var(--color-btn-primary-focus-bg);border-color:var(--color-btn-primary-focus-border);box-shadow:var(--color-btn-primary-focus-shadow)}.btn-primary .Counter{color:inherit;background-color:var(--color-btn-primary-counter-bg)}.btn-primary .octicon{color:var(--color-btn-primary-icon)}.btn-outline{color:var(--color-btn-outline-text)}.btn-outline:hover,[open]>.btn-outline{color:var(--color-btn-outline-hover-text);background-color:var(--color-btn-outline-hover-bg);border-color:var(--color-btn-outline-hover-border);box-shadow:var(--color-btn-outline-hover-shadow),var(--color-btn-outline-hover-inset-shadow)}.btn-outline:hover .Counter,[open]>.btn-outline .Counter{background-color:var(--color-btn-outline-hover-counter-bg)}.btn-outline:hover .octicon,[open]>.btn-outline .octicon{color:inherit}.btn-outline:active,.btn-outline.selected,.btn-outline[aria-selected=true]{color:var(--color-btn-outline-selected-text);background-color:var(--color-btn-outline-selected-bg);border-color:var(--color-btn-outline-selected-border);box-shadow:var(--color-btn-outline-selected-shadow)}.btn-outline:disabled,.btn-outline.disabled,.btn-outline[aria-disabled=true]{color:var(--color-btn-outline-disabled-text);background-color:var(--color-btn-outline-disabled-bg);border-color:var(--color-btn-border);box-shadow:none}.btn-outline:disabled .Counter,.btn-outline.disabled .Counter,.btn-outline[aria-disabled=true] .Counter{background-color:var(--color-btn-outline-disabled-counter-bg)}.btn-outline:focus{border-color:var(--color-btn-outline-focus-border);box-shadow:var(--color-btn-outline-focus-shadow)}.btn-outline .Counter{color:inherit;background-color:var(--color-btn-outline-counter-bg)}.btn-danger{color:var(--color-btn-danger-text)}.btn-danger .octicon{color:var(--color-btn-danger-icon)}.btn-danger:hover,[open]>.btn-danger{color:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow)}.btn-danger:hover .Counter,[open]>.btn-danger .Counter{background-color:var(--color-btn-danger-hover-counter-bg)}.btn-danger:hover .octicon,[open]>.btn-danger .octicon{color:var(--color-btn-danger-hover-icon)}.btn-danger:active,.btn-danger.selected,.btn-danger[aria-selected=true]{color:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow)}.btn-danger:disabled,.btn-danger.disabled,.btn-danger[aria-disabled=true]{color:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);box-shadow:none}.btn-danger:disabled .Counter,.btn-danger.disabled .Counter,.btn-danger[aria-disabled=true] .Counter{background-color:var(--color-btn-danger-disabled-counter-bg)}.btn-danger:focus{border-color:var(--color-btn-danger-focus-border);box-shadow:var(--color-btn-danger-focus-shadow)}.btn-danger .Counter{color:inherit;background-color:var(--color-btn-danger-counter-bg)}.btn-sm{padding:3px 12px;font-size:12px;line-height:20px}.btn-sm .octicon{vertical-align:text-top}.btn-large{padding:.75em 1.5em;font-size:inherit;line-height:1.5;border-radius:0.5em}.btn-block{display:block;width:100%;text-align:center}.BtnGroup{display:inline-block;vertical-align:middle}.BtnGroup::before{display:table;content:""}.BtnGroup::after{display:table;clear:both;content:""}.BtnGroup+.BtnGroup,.BtnGroup+.btn{margin-left:4px}.BtnGroup-item{position:relative;float:left;border-right-width:0;border-radius:0}.BtnGroup-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.BtnGroup-item:last-child{border-right-width:1px;border-top-right-radius:6px;border-bottom-right-radius:6px}.BtnGroup-item.selected,.BtnGroup-item[aria-selected=true],.BtnGroup-item:focus,.BtnGroup-item:active,.BtnGroup-item:hover{border-right-width:1px}.BtnGroup-item.selected+.BtnGroup-item,.BtnGroup-item.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item[aria-selected=true]+.BtnGroup-item,.BtnGroup-item[aria-selected=true]+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item:focus+.BtnGroup-item,.BtnGroup-item:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item:active+.BtnGroup-item,.BtnGroup-item:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-item:hover+.BtnGroup-item,.BtnGroup-item:hover+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-parent{float:left}.BtnGroup-parent:first-child .BtnGroup-item{border-top-left-radius:6px;border-bottom-left-radius:6px}.BtnGroup-parent:last-child .BtnGroup-item{border-right-width:1px;border-top-right-radius:6px;border-bottom-right-radius:6px}.BtnGroup-parent .BtnGroup-item{border-right-width:0;border-radius:0}.BtnGroup-parent.selected .BtnGroup-item,.BtnGroup-parent[aria-selected=true] .BtnGroup-item,.BtnGroup-parent:focus .BtnGroup-item,.BtnGroup-parent:active .BtnGroup-item,.BtnGroup-parent:hover .BtnGroup-item{border-right-width:1px}.BtnGroup-parent.selected+.BtnGroup-item,.BtnGroup-parent.selected+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-item,.BtnGroup-parent[aria-selected=true]+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-item,.BtnGroup-parent:focus+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-item,.BtnGroup-parent:active+.BtnGroup-parent .BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-item,.BtnGroup-parent:hover+.BtnGroup-parent .BtnGroup-item{border-left-width:0}.BtnGroup-item:focus,.BtnGroup-item:active,.BtnGroup-parent:focus,.BtnGroup-parent:active{z-index:1}.btn-link{display:inline-block;padding:0;font-size:inherit;color:var(--color-text-link);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn-link:hover{text-decoration:underline}.btn-link:disabled,.btn-link:disabled:hover,.btn-link[aria-disabled=true],.btn-link[aria-disabled=true]:hover{color:var(--color-text-disabled);cursor:default}.btn-invisible{color:var(--color-text-link);background-color:transparent;border:0;border-radius:0;box-shadow:none}.btn-invisible:hover,.btn-invisible:active,.btn-invisible:focus,.btn-invisible.selected,.btn-invisible[aria-selected=true],.btn-invisible.zeroclipboard-is-hover,.btn-invisible.zeroclipboard-is-active{color:var(--color-text-link);background:none;outline:none;box-shadow:none}.btn-invisible:disabled,.btn-invisible.disabled,.btn-invisible[aria-disabled=true]{background-color:transparent}.btn-octicon{display:inline-block;padding:5px;margin-left:5px;line-height:1;color:var(--color-text-secondary);vertical-align:middle;background:transparent;border:0;box-shadow:none}.btn-octicon:hover{color:var(--color-text-link)}.btn-octicon.disabled,.btn-octicon[aria-disabled=true]{color:var(--color-text-disabled);cursor:default}.btn-octicon.disabled:hover,.btn-octicon[aria-disabled=true]:hover{color:var(--color-text-disabled)}.btn-octicon-danger:hover{color:var(--color-text-danger)}.close-button{padding:0;color:var(--color-text-secondary);background:transparent;border:0;outline:none}.close-button:hover{color:var(--color-text-primary)}.close-button:active{color:var(--color-text-tertiary)}.hidden-text-expander{display:block}.hidden-text-expander.inline{position:relative;top:-1px;display:inline-block;margin-left:5px;line-height:0}.hidden-text-expander a,.ellipsis-expander{display:inline-block;height:12px;padding:0 5px 5px;font-size:12px;font-weight:600;line-height:6px;color:var(--color-auto-gray-7);text-decoration:none;vertical-align:middle;background:var(--color-hidden-text-expander-bg);border:0;border-radius:1px}.hidden-text-expander a:hover,.ellipsis-expander:hover{text-decoration:none;background-color:var(--color-hidden-text-expander-bg-hover)}.hidden-text-expander a:active,.ellipsis-expander:active{color:var(--color-text-inverse);background-color:var(--color-bg-info-inverse)}.btn-with-count{float:left;border-top-right-radius:0;border-bottom-right-radius:0}.btn-with-count:focus{z-index:1}.social-count{position:relative;float:left;padding:3px 12px;font-size:12px;font-weight:600;line-height:20px;color:var(--color-text-primary);vertical-align:middle;background-color:var(--color-social-count-bg);border:1px solid var(--color-btn-border);border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px;box-shadow:var(--color-shadow-small),var(--color-shadow-highlight)}.social-count:hover,.social-count:active{text-decoration:none}.social-count:hover{color:var(--color-text-link);cursor:pointer}.social-count:focus{z-index:1;outline:0;box-shadow:var(--color-state-focus-shadow)}

/*# sourceMappingURL=buttons.css.map */