@primer/css/dist/forms.css

The CSS implementation of GitHub's Primer Design System

fieldset{padding:0;margin:0;border:0}label{font-weight:600}.form-control,.form-select{padding:5px 12px;font-size:14px;line-height:20px;color:var(--color-text-primary);vertical-align:middle;background-color:var(--color-input-bg);background-repeat:no-repeat;background-position:right 8px center;border:1px solid var(--color-input-border);border-radius:6px;outline:none;box-shadow:var(--color-shadow-inset)}.form-control.focus,.form-control:focus,.form-select.focus,.form-select:focus{border-color:var(--color-state-focus-border);outline:none;box-shadow:var(--color-state-focus-shadow)}.form-control[disabled],.form-select[disabled]{color:var(--color-text-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-input-disabled-border)}@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:8px;padding-bottom:8px;line-height:1.5}.input-contrast{background-color:var(--color-input-contrast-bg)}.input-contrast:focus{background-color:var(--color-input-bg)}::placeholder{color:var(--color-text-placeholder);opacity:1}.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:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,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:-4px;padding:2px 4px;font-style:normal;background:var(--color-auto-yellow-1);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:400;color:var(--color-text-secondary)}.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(--color-text-secondary)}.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;-webkit-appearance:none;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:8px 10px;margin:10px 0;font-size:14px;color:var(--color-text-warning);background:var(--color-bg-warning);border:1px solid var(--color-border-warning);border-radius:6px}.form-warning p{margin:0;line-height:1.5}.form-warning a{font-weight:600}.form-select{display:inline-block;max-width:100%;height:32px;padding-right:24px;background-color:var(--color-bg-primary);background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");background-repeat:no-repeat;background-position:right 4px center;background-size:16px;-webkit-appearance:none;-moz-appearance:none;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{width:440px;max-width:100%;margin-right:5px;background-color:var(--color-input-contrast-bg)}.form-group .form-control:focus{background-color:var(--color-input-bg)}.form-group .form-control.shorter{width:130px}.form-group .form-control.short{width:250px}.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:relative}.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:4px 0 0}.form-group dd h4.is-error,.form-group .form-group-body h4.is-error{color:var(--color-text-danger)}.form-group dd h4.is-success,.form-group .form-group-body h4.is-success{color:var(--color-text-success)}.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(--color-text-danger);content:"*"}.form-group .success,.form-group .error,.form-group .indicator{display:none;font-size:12px;font-weight:600}.form-group.loading{opacity:0.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(--color-text-success)}.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:4px 8px;margin:8px 0 0;font-size:12px;font-weight: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 transparent}.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(--color-input-tooltip-success-text);background-color:var(--color-input-tooltip-success-bg);border-color:var(--color-input-tooltip-success-border)}.form-group.successed .success::after{border-bottom-color:var(--color-input-tooltip-success-bg)}.form-group.successed .success::before{border-bottom-color:var(--color-input-tooltip-success-border)}.form-group.warn .form-control{border-color:var(--color-input-warning-border)}.form-group.warn .warning{color:var(--color-input-tooltip-warning-text);background-color:var(--color-input-tooltip-warning-bg);border-color:var(--color-input-tooltip-warning-border)}.form-group.warn .warning::after{border-bottom-color:var(--color-input-tooltip-warning-bg)}.form-group.warn .warning::before{border-bottom-color:var(--color-input-tooltip-warning-border)}.form-group.errored .form-control{border-color:var(--color-input-error-border)}.form-group.errored label{color:var(--color-text-danger)}.form-group.errored .error{color:var(--color-input-tooltip-error-text);background-color:var(--color-input-tooltip-error-bg);border-color:var(--color-input-tooltip-error-border)}.form-group.errored .error::after{border-bottom-color:var(--color-input-tooltip-error-bg)}.form-group.errored .error::before{border-bottom-color:var(--color-input-tooltip-error-border)}.note{min-height:17px;margin:4px 0 2px;font-size:12px;color:var(--color-text-secondary)}.note .spinner{margin-right:3px;vertical-align:middle}dl.form-group>dd .form-control.is-autocheck-loading,dl.form-group>dd .form-control.is-autocheck-successful,dl.form-group>dd .form-control.is-autocheck-errored,.form-group>.form-group-body .form-control.is-autocheck-loading,.form-group>.form-group-body .form-control.is-autocheck-successful,.form-group>.form-group-body .form-control.is-autocheck-errored{padding-right:30px}dl.form-group>dd .form-control.is-autocheck-loading,.form-group>.form-group-body .form-control.is-autocheck-loading{background-image:url("/images/spinners/octocat-spinner-16px.gif")}dl.form-group>dd .form-control.is-autocheck-successful,.form-group>.form-group-body .form-control.is-autocheck-successful{background-image:url("/images/modules/ajax/success.png")}dl.form-group>dd .form-control.is-autocheck-errored,.form-group>.form-group-body .form-control.is-autocheck-errored{background-image:url("/images/modules/ajax/error.png")}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){dl.form-group>dd .form-control.is-autocheck-loading,dl.form-group>dd .form-control.is-autocheck-successful,dl.form-group>dd .form-control.is-autocheck-errored,.form-group>.form-group-body .form-control.is-autocheck-loading,.form-group>.form-group-body .form-control.is-autocheck-successful,.form-group>.form-group-body .form-control.is-autocheck-errored{background-size:16px 16px}dl.form-group>dd .form-control.is-autocheck-loading,.form-group>.form-group-body .form-control.is-autocheck-loading{background-image:url("/images/spinners/octocat-spinner-32.gif")}dl.form-group>dd .form-control.is-autocheck-successful,.form-group>.form-group-body .form-control.is-autocheck-successful{background-image:url("/images/modules/ajax/success@2x.png")}dl.form-group>dd .form-control.is-autocheck-errored,.form-group>.form-group-body .form-control.is-autocheck-errored{background-image:url("/images/modules/ajax/error@2x.png")}}.status-indicator{display:inline-block;width:16px;height:16px;margin-left:5px}.status-indicator .octicon{display:none}.status-indicator-success::before{content:""}.status-indicator-success .octicon-check{display:inline-block;color:var(--color-text-success);fill:var(--color-icon-success)}.status-indicator-success .octicon-x{display:none}.status-indicator-failed::before{content:""}.status-indicator-failed .octicon-check{display:none}.status-indicator-failed .octicon-x{display:inline-block;color:var(--color-text-danger);fill:var(--color-icon-danger)}.status-indicator-loading{width:16px;background-image:url("/images/spinners/octocat-spinner-32-EAF2F5.gif");background-repeat:no-repeat;background-position:0 0;background-size:16px}.inline-form{display:inline-block}.inline-form .btn-plain{background-color:transparent;border:0}.drag-and-drop{padding:7px 10px;margin:0;font-size:13px;line-height:16px;color:var(--color-text-secondary);background-color:var(--color-bg-secondary);border:1px solid var(--color-drag-and-drop-border);border-top:0;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.drag-and-drop .default,.drag-and-drop .loading,.drag-and-drop .error{display:none}.drag-and-drop .error{color:var(--color-text-danger)}.drag-and-drop img{vertical-align:top}.is-default .drag-and-drop .default{display:inline-block}.is-uploading .drag-and-drop .loading{display:inline-block}.is-bad-file .drag-and-drop .bad-file{display:inline-block}.is-duplicate-filename .drag-and-drop .duplicate-filename{display:inline-block}.is-too-big .drag-and-drop .too-big{display:inline-block}.is-hidden-file .drag-and-drop .hidden-file{display:inline-block}.is-empty .drag-and-drop .empty{display:inline-block}.is-bad-permissions .drag-and-drop .bad-permissions{display:inline-block}.is-repository-required .drag-and-drop .repository-required{display:inline-block}.drag-and-drop-error-info{font-weight:400;color:var(--color-text-secondary)}.drag-and-drop-error-info a{color:var(--color-text-link)}.is-failed .drag-and-drop .failed-request{display:inline-block}.manual-file-chooser{position:absolute;width:240px;padding:5px;margin-left:-80px;cursor:pointer;opacity:0.0001}.manual-file-chooser:hover+.manual-file-chooser-text{text-decoration:underline}.btn .manual-file-chooser{top:0;padding:0;line-height:34px}.upload-enabled textarea{display:block;border-bottom:1px dashed var(--color-upload-enabled-border);border-bottom-right-radius:0;border-bottom-left-radius:0}.upload-enabled.focused{border-radius:6px;box-shadow:var(--color-input-shadow),var(--color-state-focus-shadow)}.upload-enabled.focused .form-control{box-shadow:none}.upload-enabled.focused .drag-and-drop{border-color:var(--color-upload-enabled-border-focused)}.dragover textarea,.dragover .drag-and-drop{box-shadow:#c9ff00 0 0 3px}.write-content{position:relative}.previewable-comment-form{position:relative}.previewable-comment-form .tabnav{position:relative;padding:8px 8px 0}.previewable-comment-form .comment{border:1px solid var(--color-previewable-comment-form-border)}.previewable-comment-form .comment-form-error{margin-bottom:8px}.previewable-comment-form .write-content,.previewable-comment-form .preview-content{display:none;margin:0 8px 8px}.previewable-comment-form.write-selected .write-content,.previewable-comment-form.preview-selected .preview-content{display:block}.previewable-comment-form textarea{display:block;width:100%;min-height:100px;max-height:500px;padding:8px;resize:vertical}.form-action-spacious{margin-top:10px}div.composer{margin-top:0;border:0}.composer .comment-form-textarea{height:200px;min-height:200px}.composer .tabnav{margin:0 0 10px}h2.account{margin:15px 0 0;font-size:18px;font-weight:400;color:var(--color-text-secondary)}p.explain{position:relative;font-size:12px;color:var(--color-text-secondary)}p.explain strong{color:var(--color-text-primary)}p.explain .octicon{margin-right:5px;color:var(--color-icon-tertiary)}p.explain .minibutton{top:-4px;float:right}.form-group label{position:static}.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 .form-control,.input-group-button{display:table-cell}.input-group-button{width:1%;vertical-align:middle}.input-group .form-control:first-child,.input-group-button:first-child .btn{border-top-right-radius:0;border-bottom-right-radius:0}.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-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 16px 6px 36px;margin-left:-1px;font-size:14px;line-height:20px;color:var(--color-text-primary);cursor:pointer;border:1px solid var(--color-border-primary)}:checked+.radio-label{position:relative;z-index:1;border-color:var(--color-border-info)}.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-input{z-index:3;float:left;margin:10px -32px 0 16px}

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