// Base form controls // // Overrides for common inputs for easier styling. fieldset { padding: 0; margin: 0; border: 0; } label { font-size: 13px; font-weight: bold; } .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], textarea { min-height: 34px; padding: 7px 8px; font-size: 13px; color: #333; vertical-align: middle; background-color: #fff; background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-position: right center; border: 1px solid #ccc; border-radius: 3px; outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); &.focus, &:focus { border-color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } } // Inputs with contrast for easy light gray backgrounds against white. // input.class is needed here to increase specifity over input[…] input.input-contrast, .input-contrast { background-color: #fafafa; &:focus { background-color: #fff; } } // Custom styling for HTML5 validation bubbles (WebKit only) ::-webkit-input-placeholder, :-moz-placeholder { color: #aaa; } ::-webkit-validation-bubble-message { font-size: 12px; color: #fff; background: #9c2400; border: 0; border-radius: 3px; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } input::-webkit-validation-bubble-icon { display: none; } ::-webkit-validation-bubble-arrow { background-color: #9c2400; border: solid 1px #9c2400; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } // Mini inputs, to match .minibutton input.input-mini { min-height: 26px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; } // Large inputs input.input-large { padding: 6px 10px; font-size: 16px; } // Full-width inputs .input-block { display: block; width: 100%; } // Inputs with monospace text .input-monospace { font-family: $mono-font; } // Form groups // // Typical form groups - `` with a `
` containing the label and // `
containing the form elements. dl.form { margin: 15px 0; input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea { background-color: #fafafa; &:focus { background-color: #fff; } } // The Label > dt { margin: 0 0 6px; label { position: relative; } } &.flattened > dt { float: left; margin: 0; line-height: 32px; } &.flattened > dd { line-height: 32px; } // // Form Elements // > dd { // Text fields input[type="text"], input[type="password"], input[type="email"], input[type="url"] { width: 440px; max-width: 100%; margin-right: 5px; background-position-x: 98%; } input { &.shorter { width: 130px; } &.short { width: 250px; } &.long { width: 100%; } } // Textarea textarea { width: 100%; height: 200px; min-height: 200px; &.short { height: 50px; min-height: 50px; } } h4 { margin: 4px 0 0; &.is-error { color: $brand-red; } &.is-success { color: $brand-green; } } h4 + p.note { margin-top: 0; } } // // Variants // &.required { > dt > label:after { padding-left: 5px; color: #9f1006; content: "*"; } } } .note { min-height: 17px; margin: 4px 0 2px; font-size: 12px; color: #777; .spinner { margin-right: 3px; vertical-align: middle; } } // Checkboxes and Radiobuttons // // For checkboxes and radio button selections. .form-checkbox { padding-left: 20px; margin: 15px 0; vertical-align: middle; label { em.highlight { position: relative; left: -4px; padding: 2px 4px; font-style: normal; background: #fffbdc; border-radius: 3px; } } input[type=checkbox], input[type=radio] { float: left; margin: 2px 0 0 -20px; vertical-align: middle; } .note { display: block; margin: 0; font-size: 12px; font-weight: normal; color: #666; } } // Form AJAX states // // Form fields that need feedback for AJAX loading, success // states and errored states. dl.form { .success, .error, .indicator { display: none; font-size: 12px; font-weight: bold; } &.loading { opacity: 0.5; .indicator { display: inline; } .spinner { display: inline-block; vertical-align: middle; } } &.successful { .success { display: inline; color: #390; } } &.errored { > dt label { color: #900; } // General text next to the field .error { display: inline; color: #900; } // Specific error explanations from the server dd.error, dd.warning { display: inline-block; padding: 5px; font-size: 11px; color: #494620; background: #f7ea57; border: 1px solid #c0b536; border-top-color: #fff; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } } &.warn { // General text next to the field .warning { display: inline; color: #900; } // Specific warning explanations from the server dd.warning { display: inline-block; padding: 5px; font-size: 11px; color: #494620; background: #f7ea57; border: 1px solid #c0b536; border-top-color: #fff; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } } .form-note { display: inline-block; padding: 5px; margin-top: -1px; font-size: 11px; color: #494620; background: #f7ea57; border: 1px solid #c0b536; border-top-color: #fff; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } } // Field groups // // Wrap field groups in `` to lay them out horizontally - great for // the top of pages with autosave. .hfields { margin: 15px 0; @include clearfix; dl.form { float: left; margin: 0 30px 0 0; & > dt label { display: inline-block; margin: 5px 0 0; color: #666; img { position: relative; top: -2px; } } } .btn { float: left; margin: 28px 25px 0 -20px; } select { margin-top: 5px; } } // IE 9 html.no-dnd-uploads { .drag-and-drop { min-height: 32px; .default { display: none; } } .upload-enabled textarea { border-bottom: 1px solid #ddd; } } .drag-and-drop { padding: 7px 10px; margin: 0; font-size: 13px; line-height: 16px; color: #aaa; background-color: #fafafa; border: 1px solid #ccc; border-top: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; .default, .loading, .error { display: none; } .error { color: $brand-red; } // Spinner 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-too-big .drag-and-drop .too-big { display: inline-block; } .is-empty .drag-and-drop .empty { display: inline-block; } .is-bad-browser .drag-and-drop .bad-browser { display: inline-block; } .drag-and-drop-error-info { font-weight: normal; color: #aaa; a { color: $brand-blue; } } .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 { // align manual-file-chooser inside a button .manual-file-chooser { top: 0; padding: 0; line-height: 34px; } } // Focused Textarea styles .upload-enabled textarea { display: block; border-bottom: 1px dashed #ddd; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .focused .drag-and-drop { @extend input[type="text"]:focus; box-shadow: rgba(#51a7e8, 0.5) 0 0 3px; } // Dropping a file on top .dragover textarea, .dragover .drag-and-drop { box-shadow: rgba(#c9ff00, 1) 0 0 3px; } // Form style with a write and a preview tab .previewable-comment-form { position: relative; .tabnav { position: relative; padding: 10px 10px 0; } .comment { border: 1px solid #cacaca; } .comment-header .comment-header-actions { display: none; } .comment-form-error { margin-bottom: 10px; } .write-content, .preview-content { display: none; padding: 0 10px 10px; } &.write-selected .write-content, &.preview-selected .preview-content { display: block; } textarea { display: block; width: 100%; min-height: 100px; max-height: 500px; padding: 10px; resize: vertical; &.fullscreen-contents:focus { border: 0; box-shadow: none; } } } // A two column form, with a .main and a .sidebar column // // Override some `.timeline-comment-wrapper` defaults. // The `div` is needed to be more specific than the other class. div.composer { margin-top: 0; border: 0; } // Override the previewable comment form defaults .composer .comment-form-textarea { height: 200px; min-height: 200px; } .composer-infobar { height: 35px; padding: 0 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; } .composer .tabnav { margin: 0 0 10px; } .infobar-widget { &.milestone { position: relative; // requires so that the `right: 0;` below works float: right; .select-menu-modal-holder { right: 0; } } &.assignee { float: left; .css-truncate-target { max-width: 110px; } } .text, .avatar, .select-menu { display: inline-block; vertical-align: top; } .text { margin-top: 3px; a { font-weight: bold; color: #333; } } .progress-bar { width: 200px; overflow: hidden; // round the corners if 100% line-height: 18px; } } // Hide the up/down buttons in in the login form, the // input is used for two-factor auth codes, type="number" makes it more usable // on phones input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } // Input groups .input-group { display: table; input { position: relative; width: 100%; &:focus { z-index: 2; } } input[type="text"] + .btn { margin-left: 0; } // For when you want the input group to behave like inline-block. &.inline { display: inline-table; } } .input-group input, .input-group-button { display: table-cell; } .input-group-button { width: 1%; vertical-align: middle; // Match the inputs } .input-group input: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 input: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; } h2.account { margin: 15px 0 0; font-size: 18px; font-weight: normal; color: #666; } p.explain { position: relative; font-size: 12px; color: #666; strong { color: #333; } .octicon { margin-right: 5px; color: #bbb; } .minibutton { top: -4px; float: right; } } .options-content p.explain { padding: 10px 10px 0; margin-top: 0; border-top: 1px solid #ddd; } .form-actions { @include clearfix; .btn { float: right; + .btn { margin-right: 5px; } } } .form-warning { padding: 8px 10px; margin: 10px 0; font-size: 14px; color: #333; background: #ffffe2; border: 1px solid #e7e4c2; border-radius: 4px; p { margin: 0; line-height: 1.5; } strong { color: #000; } a { font-weight: bold; } } // Inline verification // // Used for example when autosaving checkboxes in settings. .status-indicator { @include icon-bootstrap(16px); margin-left: 5px; } .status-indicator-success:before { color: $brand-green; content: "\f03a"; // octicon-check } .status-indicator-failed:before { color: $brand-red; content: "\f02d"; // octicon-x }