UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

2 lines (1 loc) 4.96 kB
.Primer_Brand__Select-module__Select___EmI6J{appearance:none;color:var(--brand-control-color-fg-default);cursor:pointer;background-color:var(--brand-color-canvas-default);border-radius:var(--brand-borderRadius-medium);line-height:var(--brand-text-lineHeight-200);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);border:none;grid-area:1/1/auto/-1;width:100%;transition-property:color,background-color,box-shadow,border-color}@media screen and (forced-colors:active){.Primer_Brand__Select-module__Select___EmI6J:disabled{background-color:-moz-combobox}}.Primer_Brand__Select-module__Select___EmI6J::placeholder{color:var(--brand-color-text-muted);opacity:1}.Primer_Brand__Select-module__Select___EmI6J:focus-visible{border-color:var(--brand-control-color-focus);box-shadow:0 0 0 2px var(--brand-control-color-focus);outline:none}@media (forced-colors:active){.Primer_Brand__Select-module__Select___EmI6J:focus-visible{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}}.Primer_Brand__Select-module__Select___EmI6J[disabled]{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-color-canvas-disabled);border-color:var(--brand-control-color-border-disabled);opacity:1}.Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg.Primer_Brand__Select-module__Select-wrapper___sX7AR:after{background-color:var(--brand-control-color-fg-disabled)}.Primer_Brand__Select-module__Select-wrapper--medium___0yHXL{height:var(--brand-control-medium-size)}.Primer_Brand__Select-module__Select-wrapper--medium___0yHXL:after{margin-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) / 2)}.Primer_Brand__Select-module__Select--medium___LTm_N{font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);padding-inline:var(--brand-control-medium-paddingInline-condensed);padding-block:0;padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16))}.Primer_Brand__Select-module__Select-wrapper--large___yWcVy{height:var(--brand-control-large-size)}.Primer_Brand__Select-module__Select-wrapper--large___yWcVy:after{margin-inline-end:var(--base-size-8)}.Primer_Brand__Select-module__Select--large___zrjHD{font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);padding-inline:var(--brand-control-large-paddingInline-condensed);padding-block:0;padding-inline-end:calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-16))}.Primer_Brand__Select-module__Select-wrapper___sX7AR{border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thin,1px) var(--brand-control-color-border-default);border-radius:6px;border-radius:var(--brand-borderRadius-medium,6px);font-family:var(--brand-body-fontFamily);grid-template-columns:minmax(0, auto) var(--base-size-16);display:inline-grid;position:relative}.Primer_Brand__Select-module__Select-wrapper___sX7AR:after{content:"";width:var(--base-size-16);height:var(--base-size-16);pointer-events:none;background-color:var(--brand-control-color-fg-default);grid-area:1/2;place-self:center flex-end;position:absolute;right:0;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=) 0 0/contain no-repeat;mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=) 0 0/contain no-repeat}.Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg{border-color:var(--brand-control-color-border-disabled)}.Primer_Brand__Select-module__Select-wrapper--fullWidth___UNSe5{width:100%}.Primer_Brand__Select-module__Select--success___0WbjI{border-color:var(--brand-color-success-fg)}.Primer_Brand__Select-module__Select--error___FxIYn{border-color:var(--brand-color-danger-fg)}@media (prefers-reduced-motion:reduce){.Primer_Brand__Select-module__Select___EmI6J,.Primer_Brand__Select-module__Select___EmI6J:before,.Primer_Brand__Select-module__Select___EmI6J:after,.Primer_Brand__Select-module__Select___EmI6J *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}