UNPKG

@primer/css

Version:

The CSS implementation of GitHub's Primer Design System

3 lines (2 loc) 5.32 kB
.btn-mktg{position:relative;z-index:1;display:inline-block;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;padding:.9rem 1.5rem 1.1rem;font-size:1rem;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;border:0;border-radius:.375rem;color:var(--color-mktg-btn-text);background-color:var(--color-mktg-btn-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-bg-top) 0%, var(--color-mktg-btn-bg-bottom) 100%)}.btn-mktg::before{background-image:linear-gradient(-180deg, var(--color-mktg-btn-bg-overlay-top) 0%, var(--color-mktg-btn-bg-overlay-bottom) 100%)}.btn-mktg:hover,.btn-mktg.hover,.btn-mktg:active,.btn-mktg.selected,.btn-mktg[aria-selected=true],[open]>.btn-mktg{background-color:var(--color-mktg-btn-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-bg-top) 0%, var(--color-mktg-btn-bg-bottom) 100%)}.btn-mktg:focus,.btn-mktg.focus{outline:0;box-shadow:0 0 0 0.2em rgba(var(--color-mktg-btn-bg-bottom), 0.4)}.btn-mktg:disabled,.btn-mktg.disabled,.btn-mktg[aria-disabled=true]{pointer-events:none;cursor:default;opacity:0.5}.btn-mktg::before{background-blend-mode:overlay, normal;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;content:"";border-radius:.375rem;opacity:0;transition:opacity 0.4s}.btn-mktg:hover{text-decoration:none}.btn-mktg:hover::before{opacity:1;transition:opacity 0.4s}.btn-primary-mktg{color:var(--color-mktg-btn-primary-text);background-color:var(--color-mktg-btn-primary-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-primary-bg-top) 0%, var(--color-mktg-btn-primary-bg-bottom) 100%)}.btn-primary-mktg::before{background-image:linear-gradient(-180deg, var(--color-mktg-btn-primary-bg-overlay-top) 0%, var(--color-mktg-btn-primary-bg-overlay-bottom) 100%)}.btn-primary-mktg:hover,.btn-primary-mktg.hover,.btn-primary-mktg:active,.btn-primary-mktg.selected,.btn-primary-mktg[aria-selected=true],[open]>.btn-primary-mktg{background-color:var(--color-mktg-btn-primary-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-primary-bg-top) 0%, var(--color-mktg-btn-primary-bg-bottom) 100%)}.btn-primary-mktg:focus,.btn-primary-mktg.focus{outline:0;box-shadow:0 0 0 0.2em rgba(var(--color-mktg-btn-primary-bg-bottom), 0.4)}.btn-primary-mktg:disabled,.btn-primary-mktg.disabled,.btn-primary-mktg[aria-disabled=true]{pointer-events:none;cursor:default;opacity:0.5}.btn-enterprise-mktg{color:var(--color-mktg-btn-enterprise-text);background-color:var(--color-mktg-btn-enterprise-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-enterprise-bg-top) 0%, var(--color-mktg-btn-enterprise-bg-bottom) 100%)}.btn-enterprise-mktg::before{background-image:linear-gradient(-180deg, var(--color-mktg-btn-enterprise-bg-overlay-top) 0%, var(--color-mktg-btn-enterprise-bg-overlay-bottom) 100%)}.btn-enterprise-mktg:hover,.btn-enterprise-mktg.hover,.btn-enterprise-mktg:active,.btn-enterprise-mktg.selected,.btn-enterprise-mktg[aria-selected=true],[open]>.btn-enterprise-mktg{background-color:var(--color-mktg-btn-enterprise-bg-bottom);background-image:linear-gradient(-180deg, var(--color-mktg-btn-enterprise-bg-top) 0%, var(--color-mktg-btn-enterprise-bg-bottom) 100%)}.btn-enterprise-mktg:focus,.btn-enterprise-mktg.focus{outline:0;box-shadow:0 0 0 0.2em rgba(var(--color-mktg-btn-enterprise-bg-bottom), 0.4)}.btn-enterprise-mktg:disabled,.btn-enterprise-mktg.disabled,.btn-enterprise-mktg[aria-disabled=true]{pointer-events:none;cursor:default;opacity:0.5}.btn-outline-mktg{color:var(--color-mktg-btn-outline-text);background:none;box-shadow:0 0 0 1px var(--color-mktg-btn-outline-border) inset;transition:box-shadow 0.4s, color 0.4s}.btn-outline-mktg::before{display:none}.btn-outline-mktg:hover,.btn-outline-mktg.hover,.btn-outline-mktg:active,.btn-outline-mktg.selected,.btn-outline-mktg[aria-selected=true],[open]>.btn-outline-mktg{color:var(--color-mktg-btn-outline-hover-text);background:none;box-shadow:0 0 0 2px var(--color-mktg-btn-outline-hover-border) inset}.btn-outline-mktg:focus,.btn-outline-mktg.focus{outline:0;box-shadow:0 0 0 2px var(--color-mktg-btn-outline-focus-border) inset,0 0 0 4px var(--color-mktg-btn-outline-focus-border-inset)}.btn-outline-mktg:disabled,.btn-outline-mktg.disabled,.btn-outline-mktg[aria-disabled=true]{opacity:0.5}.btn-transparent{color:var(--color-mktg-btn-dark-text);background:none;box-shadow:0 0 0 1px var(--color-mktg-btn-dark-border) inset;transition:box-shadow 0.4s, color 0.4s}.btn-transparent::before{display:none}.btn-transparent:hover,.btn-transparent.hover,.btn-transparent:active,.btn-transparent.selected,.btn-transparent[aria-selected=true],[open]>.btn-transparent{color:var(--color-mktg-btn-dark-hover-text);background:none;box-shadow:0 0 0 2px var(--color-mktg-btn-dark-hover-border) inset}.btn-transparent:focus,.btn-transparent.focus{outline:0;box-shadow:0 0 0 2px var(--color-mktg-btn-dark-focus-border) inset,0 0 0 4px var(--color-mktg-btn-dark-focus-border-inset)}.btn-transparent:disabled,.btn-transparent.disabled,.btn-transparent[aria-disabled=true]{opacity:0.5}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{padding:20px 30px 23px !important} /*# sourceMappingURL=marketing-buttons.css.map */