@primer/css/dist/forms.css

The CSS implementation of GitHub's Primer Design System

.form-control,.form-select{padding:5px 12px;font-size:14px;line-height:20px;color:var(--fgColor-default, var(--color-fg-default));vertical-align:middle;background-color:var(--bgColor-default, var(--color-canvas-default));background-repeat:no-repeat;background-position:right 8px center;border:1px solid var(--control-borderColor-rest, var(--color-border-default));border-radius:6px;box-shadow:var(--shadow-inset, var(--color-primer-shadow-inset));transition:80ms cubic-bezier(0.33, 1, 0.68, 1);transition-property:color,background-color,box-shadow,border-color}.form-control:focus,.form-select:focus{border-color:var(--focus-outlineColor, var(--color-accent-fg));outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor, var(--color-accent-fg))}.form-control:focus:not(:focus-visible),.form-select:focus:not(:focus-visible){border-color:rgba(0,0,0,0);border-color:var(--focus-outlineColor, var(--color-accent-fg));outline:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,0)}.form-control:focus-visible,.form-select:focus-visible{border-color:var(--focus-outlineColor, var(--color-accent-fg));outline:none;box-shadow:inset 0 0 0 1px var(--focus-outlineColor, var(--color-accent-fg))}.form-control.border-0:focus,.form-control.border-0:focus-visible,.form-select.border-0:focus,.form-select.border-0:focus-visible{border:1px solid var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important}.form-control[disabled],fieldset[disabled] .form-control,.form-select[disabled],fieldset[disabled] .form-select{color:var(--control-fgColor-disabled, var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled, var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled, var(--color-border-default));-webkit-text-fill-color:var(--control-fgColor-disabled, var(--color-primer-fg-disabled));opacity:1}.form-control[disabled]::placeholder,fieldset[disabled] .form-control::placeholder,.form-select[disabled]::placeholder,fieldset[disabled] .form-select::placeholder{color:var(--control-fgColor-disabled, var(--color-primer-fg-disabled))}@supports(-webkit-touch-callout: none){.form-control,.form-select{font-size:16px}@media(min-width: 768px){.form-control,.form-select{font-size:14px}}}textarea.form-control{padding-top:var(--base-size-8);padding-bottom:var(--base-size-8);line-height:1.5}.input-contrast{background-color:var(--bgColor-muted, var(--color-canvas-inset))}.input-contrast:focus{background-color:var(--bgColor-default, var(--color-canvas-default))}.input-sm{min-height:28px;padding-top:3px;padding-bottom:3px;font-size:12px;line-height:20px}.input-lg{font-size:16px}.input-block{display:block;width:100%}.input-monospace{font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace)}.input-hide-webkit-autofill::-webkit-contacts-auto-fill-button{position:absolute;right:0;display:none !important;pointer-events:none;visibility:hidden}.form-checkbox{padding-left:20px;margin:15px 0;vertical-align:middle}.form-checkbox label em.highlight{position:relative;left:calc(var(--base-size-4)*-1);padding:2px var(--base-size-4);font-style:normal;background:var(--bgColor-attention-muted, var(--color-attention-subtle));border-radius:6px}.form-checkbox input[type=checkbox],.form-checkbox input[type=radio]{float:left;margin:5px 0 0 -20px;vertical-align:middle}.form-checkbox .note{display:block;margin:0;font-size:12px;font-weight:var(--base-text-weight-normal, 400);color:var(--fgColor-muted, var(--color-fg-muted))}.form-checkbox-details{display:none}.form-checkbox-details-trigger:checked~* .form-checkbox-details,.form-checkbox-details-trigger:checked~.form-checkbox-details{display:block}.hfields{margin:15px 0}.hfields::before{display:table;content:""}.hfields::after{display:table;clear:both;content:""}.hfields .form-group{float:left;margin:0 30px 0 0}.hfields .form-group dt label,.hfields .form-group .form-group-header label{display:inline-block;margin:5px 0 0;color:var(--fgColor-muted, var(--color-fg-muted))}.hfields .form-group dt img,.hfields .form-group .form-group-header img{position:relative;top:-2px}.hfields .btn{float:left;margin:28px 25px 0 -20px}.hfields .form-select{margin-top:5px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;appearance:none}.form-actions::before{display:table;content:""}.form-actions::after{display:table;clear:both;content:""}.form-actions .btn{float:right}.form-actions .btn+.btn{margin-right:5px}.form-warning{padding:var(--base-size-8) 10px;margin:10px 0;font-size:14px;color:var(--fgColor-attention, var(--color-attention-fg));background:var(--bgColor-attention-muted, var(--color-attention-subtle));border:1px solid var(--borderColor-attention-emphasis, var(--color-attention-emphasis));border-radius:6px}.form-warning p{margin:0;line-height:1.5}.form-warning a{font-weight:var(--base-text-weight-semibold, 600)}.form-select{display:inline-block;max-width:100%;height:32px;padding-right:var(--base-size-24);background-color:var(--bgColor-default, var(--color-canvas-default));background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");background-repeat:no-repeat;background-position:right 4px center;background-size:16px;appearance:none}.form-select::-ms-expand{opacity:0}.form-select[multiple]{height:auto}[data-color-mode=light][data-light-theme*=dark] .form-select,[data-color-mode=dark][data-dark-theme*=dark] .form-select{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=")}@media(prefers-color-scheme: light){[data-color-mode=auto][data-light-theme*=dark] .form-select{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=")}}@media(prefers-color-scheme: dark){[data-color-mode=auto][data-dark-theme*=dark] .form-select{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=")}}.select-sm{height:28px;padding-top:3px;padding-bottom:3px;font-size:12px}.select-sm[multiple]{height:auto;min-height:0}.form-group{margin:15px 0}.form-group .form-control.autocomplete-embedded-icon-wrap:focus-within{background-color:var(--bgColor-default, var(--color-canvas-default))}.form-group .form-control{width:440px;max-width:100%;margin-right:5px;background-color:var(--bgColor-muted, var(--color-canvas-inset))}.form-group .form-control:focus{background-color:var(--bgColor-default, var(--color-canvas-default))}.form-group .form-control.shorter{width:130px}.form-group .form-control.short{width:250px}.form-group .form-control.input-block,.form-group .form-control.long{width:100%}.form-group textarea.form-control{width:100%;height:200px;min-height:200px}.form-group textarea.form-control.short{height:50px;min-height:50px}.form-group dt,.form-group .form-group-header{margin:0 0 6px}.form-group label{position:static}.form-group.flattened dt,.form-group.flattened .form-group-header{float:left;margin:0;line-height:32px}.form-group.flattened dd,.form-group.flattened .form-group-body{line-height:32px}.form-group dd h4,.form-group .form-group-body h4{margin:var(--base-size-4) 0 0}.form-group dd h4.is-error,.form-group .form-group-body h4.is-error{color:var(--fgColor-danger, var(--color-danger-fg))}.form-group dd h4.is-success,.form-group .form-group-body h4.is-success{color:var(--fgColor-success, var(--color-success-fg))}.form-group dd h4+.note,.form-group .form-group-body h4+.note{margin-top:0}.form-group.required dt label::after,.form-group.required .form-group-header label::after{padding-left:5px;color:var(--fgColor-danger, var(--color-danger-fg));content:"*"}.form-group .success,.form-group .error,.form-group .indicator{display:none;font-size:12px;font-weight:var(--base-text-weight-semibold, 600)}.form-group.loading{opacity:.5}.form-group.loading .indicator{display:inline}.form-group.loading .spinner{display:inline-block;vertical-align:middle}.form-group.successful .success{display:inline;color:var(--fgColor-success, var(--color-success-fg))}.form-group.successed .success,.form-group.successed .warning,.form-group.successed .error,.form-group.warn .success,.form-group.warn .warning,.form-group.warn .error,.form-group.errored .success,.form-group.errored .warning,.form-group.errored .error{position:absolute;z-index:10;display:block;max-width:450px;padding:var(--base-size-4) var(--base-size-8);margin:var(--base-size-8) 0 0;font-size:12px;font-weight:var(--base-text-weight-normal, 400);border-style:solid;border-width:1px;border-radius:6px}.form-group.successed .success::after,.form-group.successed .success::before,.form-group.successed .warning::after,.form-group.successed .warning::before,.form-group.successed .error::after,.form-group.successed .error::before,.form-group.warn .success::after,.form-group.warn .success::before,.form-group.warn .warning::after,.form-group.warn .warning::before,.form-group.warn .error::after,.form-group.warn .error::before,.form-group.errored .success::after,.form-group.errored .success::before,.form-group.errored .warning::after,.form-group.errored .warning::before,.form-group.errored .error::after,.form-group.errored .error::before{position:absolute;bottom:100%;left:10px;z-index:15;width:0;height:0;pointer-events:none;content:" ";border:solid rgba(0,0,0,0)}.form-group.successed .success::after,.form-group.successed .warning::after,.form-group.successed .error::after,.form-group.warn .success::after,.form-group.warn .warning::after,.form-group.warn .error::after,.form-group.errored .success::after,.form-group.errored .warning::after,.form-group.errored .error::after{border-width:5px}.form-group.successed .success::before,.form-group.successed .warning::before,.form-group.successed .error::before,.form-group.warn .success::before,.form-group.warn .warning::before,.form-group.warn .error::before,.form-group.errored .success::before,.form-group.errored .warning::before,.form-group.errored .error::before{margin-left:-1px;border-width:6px}.form-group.successed .success{color:var(--fgColor-default, var(--color-fg-default));background-color:var(--bgColor-default, var(--color-canvas-default));background-image:linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));border-color:var(--borderColor-success-muted, var(--color-success-muted))}.form-group.successed .success::after{border-bottom-color:var(--borderColor-success-muted, var(--color-success-muted))}.form-group.successed .success::before{border-bottom-color:var(--borderColor-success-muted, var(--color-success-muted))}.form-group.warn .form-control:not(:focus,:focus-visible){border-color:var(--borderColor-attention-emphasis, var(--color-attention-emphasis))}.form-group.warn .warning{color:var(--fgColor-default, var(--color-fg-default));background-color:var(--bgColor-default, var(--color-canvas-default));background-image:linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));border-color:var(--borderColor-attention-muted, var(--color-attention-muted))}.form-group.warn .warning::after{border-bottom-color:var(--borderColor-attention-muted, var(--color-attention-muted))}.form-group.warn .warning::before{border-bottom-color:var(--borderColor-attention-muted, var(--color-attention-muted))}.form-group.errored .form-control:not(:focus,:focus-visible){border-color:var(--borderColor-danger-emphasis, var(--color-danger-emphasis))}.form-group.errored label{color:var(--fgColor-danger, var(--color-danger-fg))}.form-group.errored .error{color:var(--fgColor-default, var(--color-fg-default));background-color:var(--bgColor-default, var(--color-canvas-default));background-image:linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));border-color:var(--borderColor-danger-muted, var(--color-danger-muted))}.form-group.errored .error::after{border-bottom-color:var(--borderColor-danger-muted, var(--color-danger-muted))}.form-group.errored .error::before{border-bottom-color:var(--borderColor-danger-muted, var(--color-danger-muted))}.note{min-height:17px;margin:var(--base-size-4) 0 2px;font-size:12px;color:var(--fgColor-muted, var(--color-fg-muted))}.note .spinner{margin-right:3px;vertical-align:middle}.input-group{display:table}.input-group .form-control{position:relative;width:100%}.input-group .form-control:focus{z-index:2}.input-group .form-control+.btn{margin-left:0}.input-group.inline{display:inline-table}.input-group:focus-within button{outline-offset:0}.input-group .form-control.autocomplete-embedded-icon-wrap{display:inline-flex;padding:calc(var(--base-size-4)*1.25) var(--base-size-8)}.input-group .form-control,.input-group-button{display:table-cell}.input-group-button{width:1%;vertical-align:middle}.input-group-button--autocomplete-embedded-icon{vertical-align:bottom}.input-group .form-control:first-child,.input-group-button:first-child .btn{border-top-right-radius:0;border-bottom-right-radius:0}.input-group .form-control:first-child,.input-group-button:first-child .btn:not(.btn-primary){border-color:var(--control-borderColor-rest, var(--color-border-default))}.input-group-button:first-child .btn{margin-right:-1px}.input-group .form-control:last-child,.input-group-button:last-child .btn{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .form-control:last-child,.input-group-button:last-child .btn:not(.btn-primary){border-color:var(--control-borderColor-rest, var(--color-border-default))}.input-group-button:last-child .btn{margin-left:-1px}.radio-group::before{display:table;content:""}.radio-group::after{display:table;clear:both;content:""}.radio-label{float:left;padding:6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8));margin-left:-1px;font-size:14px;line-height:20px;color:var(--fgColor-default, var(--color-fg-default));cursor:pointer;border:1px solid var(--borderColor-default, var(--color-border-default))}:checked+.radio-label{position:relative;z-index:1;border-color:var(--borderColor-accent-emphasis, var(--color-accent-emphasis))}.radio-label:first-of-type{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px}.radio-label:last-of-type{border-top-right-radius:6px;border-bottom-right-radius:6px}.radio-label .octicon{margin-left:var(--base-size-4);color:var(--fgColor-muted, var(--color-fg-subtle))}.radio-input{z-index:3;float:left;margin:10px calc(var(--base-size-32)*-1) 0 var(--base-size-16)}.radio-input:disabled{position:relative}.radio-input:disabled+.radio-label{color:var(--fgColor-disabled, var(--color-primer-fg-disabled));cursor:default;background-color:var(--bgColor-neutral-muted, var(--color-neutral-subtle))}.radio-input:disabled+.radio-label .octicon{color:inherit}
/*# sourceMappingURL=forms.css.map */