@primer/css/dist/buttons.css

The CSS implementation of GitHub's Primer Design System

.btn{position:relative;display:inline-block;padding:5px var(--base-size-16);font-size:14px;font-weight:var(--base-text-weight-medium, 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;appearance:none}.btn:hover{text-decoration:none}.btn:disabled,.btn.disabled,.btn[aria-disabled=true]{cursor:default}.btn i{font-style:normal;font-weight:var(--base-text-weight-medium, 500);opacity:.75}.btn .octicon{margin-right:var(--base-size-4);color:var(--fgColor-muted, var(--color-fg-muted));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(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg))}.btn .dropdown-caret{margin-left:var(--base-size-4);opacity:.8}.btn{color:var(--button-default-fgColor-rest, var(--color-btn-text));background-color:var(--button-default-bgColor-rest, var(--color-btn-bg));border-color:var(--button-default-borderColor-rest, var(--color-btn-border));box-shadow:var(--button-default-shadow-resting, var(--color-btn-shadow)),var(--button-default-shadow-inset, var(--color-btn-inset-shadow));transition:80ms cubic-bezier(0.33, 1, 0.68, 1);transition-property:color,background-color,box-shadow,border-color}.btn:hover,.btn.hover,[open]>.btn{background-color:var(--button-default-bgColor-hover, var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover, var(--color-btn-hover-border));transition-duration:.1s}.btn:active{background-color:var(--button-default-bgColor-active, var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active, var(--color-btn-active-border));transition:none}.btn.selected,.btn[aria-selected=true]{background-color:var(--button-default-bgColor-selected, var(--color-btn-selected-bg));box-shadow:var(--shadow-inset, var(--color-primer-shadow-inset))}.btn:disabled,.btn.disabled,.btn[aria-disabled=true]{color:var(--fgColor-disabled, var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled, var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled, var(--color-btn-border))}.btn:disabled .octicon,.btn.disabled .octicon,.btn[aria-disabled=true] .octicon{color:var(--fgColor-disabled, var(--color-primer-fg-disabled))}.btn-primary{color:var(--button-primary-fgColor-rest, var(--color-btn-primary-text));background-color:var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest, var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small, var(--color-btn-primary-shadow)),var(--shadow-highlight, var(--color-btn-primary-inset-shadow))}.btn-primary:hover,.btn-primary.hover,[open]>.btn-primary{background-color:var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border))}.btn-primary:focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.btn-primary:focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.btn-primary:focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.btn-primary:active,.btn-primary.selected,.btn-primary[aria-selected=true]{background-color:var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow))}.btn-primary:disabled,.btn-primary.disabled,.btn-primary[aria-disabled=true]{color:var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border))}.btn-primary:disabled .octicon,.btn-primary.disabled .octicon,.btn-primary[aria-disabled=true] .octicon{color:var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text))}.btn-primary .Counter{color:inherit;background-color:var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg))}.btn-primary .octicon{color:var(--button-primary-iconColor-rest, var(--color-btn-primary-icon))}a.btn-primary:focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}a.btn-primary:focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}a.btn-primary:focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.btn-outline{color:var(--button-outline-fgColor-rest, var(--color-btn-outline-text))}.btn-outline:hover,[open]>.btn-outline{color:var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));background-color:var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));border-color:var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));box-shadow:var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)),var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow))}.btn-outline:hover .Counter,[open]>.btn-outline .Counter{background-color:var(--buttonCounter-outline-bgColor-hover, 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(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));background-color:var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));border-color:var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));box-shadow:var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow))}.btn-outline:active:focus,.btn-outline.selected:focus,.btn-outline[aria-selected=true]:focus{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.btn-outline:active:focus:not(:focus-visible),.btn-outline.selected:focus:not(:focus-visible),.btn-outline[aria-selected=true]:focus:not(:focus-visible){outline:solid 1px rgba(0,0,0,0);box-shadow:none}.btn-outline:active:focus-visible,.btn-outline.selected:focus-visible,.btn-outline[aria-selected=true]:focus-visible{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))}.btn-outline:disabled,.btn-outline.disabled,.btn-outline[aria-disabled=true]{color:var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));background-color:var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));border-color:var(--button-default-borderColor-rest, var(--color-btn-border));box-shadow:none}.btn-outline:disabled .Counter,.btn-outline.disabled .Counter,.btn-outline[aria-disabled=true] .Counter{background-color:var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg))}.btn-outline .Counter{color:inherit;background-color:var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg))}.btn-danger{color:var(--button-danger-fgColor-rest, var(--color-btn-danger-text))}.btn-danger .octicon{color:var(--button-danger-iconColor-rest, var(--color-btn-danger-icon))}.btn-danger:hover,[open]>.btn-danger{color:var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)),var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow))}.btn-danger:hover .Counter,[open]>.btn-danger .Counter{background-color:var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg))}.btn-danger:hover .octicon,[open]>.btn-danger .octicon{color:var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon))}.btn-danger:active,.btn-danger.selected,.btn-danger[aria-selected=true]{color:var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow))}.btn-danger:disabled,.btn-danger.disabled,.btn-danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-rest, var(--color-btn-border));box-shadow:none}.btn-danger:disabled .Counter,.btn-danger.disabled .Counter,.btn-danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg))}.btn-danger:disabled .octicon,.btn-danger.disabled .octicon,.btn-danger[aria-disabled=true] .octicon{color:var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text))}.btn-danger .Counter{color:inherit;background-color:var(--buttonCounter-danger-bgColor-rest, 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:.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:var(--base-size-4)}.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(--fgColor-accent, var(--color-accent-fg));text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:rgba(0,0,0,0);border:0;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(--fgColor-disabled, var(--color-primer-fg-disabled));cursor:default}.btn-link:not(.dropdown-item):focus,.btn-link:not(.dropdown-item):focus-visible{border-radius:6px;outline-offset:0}.btn-invisible{color:var(--fgColor-accent, var(--color-accent-fg));background-color:rgba(0,0,0,0);border:0;border-radius:6px;box-shadow:none}.btn-invisible:hover,.btn-invisible.zeroclipboard-is-hover{color:var(--fgColor-accent, var(--color-accent-fg));background-color:var(--button-default-bgColor-hover, var(--color-btn-hover-bg));outline:none;box-shadow:none}.btn-invisible:active,.btn-invisible.selected,.btn-invisible[aria-selected=true],.btn-invisible.zeroclipboard-is-active{color:var(--fgColor-accent, var(--color-accent-fg));background:none;border-color:var(--button-default-borderColor-active, var(--color-btn-active-border));outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:none}.btn-invisible:active .btn-invisible.zeroclipboard-is-active{background-color:var(--button-default-bgColor-selected, var(--color-btn-selected-bg))}.btn-invisible:disabled,.btn-invisible.disabled,.btn-invisible[aria-disabled=true]{color:var(--fgColor-disabled, var(--color-primer-fg-disabled));background-color:rgba(0,0,0,0)}.btn-octicon{display:inline-block;padding:5px;margin-left:5px;line-height:1;color:var(--fgColor-muted, var(--color-fg-muted));vertical-align:middle;background:rgba(0,0,0,0);border:0;box-shadow:none}.btn-octicon:hover{color:var(--fgColor-accent, var(--color-accent-fg))}.btn-octicon:focus,.btn-octicon:focus-visible{border-radius:6px}.btn-octicon.disabled,.btn-octicon[aria-disabled=true]{color:var(--fgColor-disabled, var(--color-primer-fg-disabled));cursor:default}.btn-octicon.disabled:hover,.btn-octicon[aria-disabled=true]:hover{color:var(--fgColor-disabled, var(--color-primer-fg-disabled))}.btn-octicon-danger:hover{color:var(--fgColor-danger, var(--color-danger-fg))}.close-button{padding:0;color:var(--fgColor-muted, var(--color-fg-muted));background:rgba(0,0,0,0);border:0}.close-button:hover{color:var(--fgColor-default, var(--color-fg-default))}.close-button:active{outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px;box-shadow:none}.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:var(--base-text-weight-semibold, 600);line-height:6px;color:var(--fgColor-default, var(--color-fg-default));text-decoration:none;vertical-align:middle;background:var(--bgColor-neutral-muted, var(--color-neutral-muted));border:0;border-radius:1px}.hidden-text-expander a:hover,.ellipsis-expander:hover{text-decoration:none;background-color:var(--bgColor-accent-muted, var(--color-accent-muted))}.hidden-text-expander a:active,.ellipsis-expander:active{color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));background-color:var(--bgColor-accent-emphasis, var(--color-accent-emphasis))}.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:var(--base-text-weight-semibold, 600);line-height:20px;color:var(--fgColor-default, var(--color-fg-default));vertical-align:middle;background-color:var(--bgColor-default, var(--color-canvas-default));border:1px solid var(--button-default-borderColor-rest, var(--color-btn-border));border-left:0;border-top-right-radius:6px;border-bottom-right-radius:6px;box-shadow:var(--shadow-resting-small, var(--color-shadow-small)),var(--shadow-highlight, var(--color-primer-shadow-highlight))}.social-count:hover,.social-count:active{text-decoration:none}.social-count:hover{color:var(--fgColor-accent, var(--color-accent-fg));cursor:pointer}
/*# sourceMappingURL=buttons.css.map */