// Needs refactoring // stylelint-disable selector-no-qualifying-type, selector-max-type dl.form-group > dd, // TODO: Deprecate .form-group > .form-group-body {
.form-control { &.is-autocheck-loading, &.is-autocheck-successful, &.is-autocheck-errored { // stylelint-disable-next-line primer/spacing padding-right: 30px; // Leave some space for our validation icons } &.is-autocheck-loading { background-image: url("/images/spinners/octocat-spinner-16px.gif"); } &.is-autocheck-successful { background-image: url("/images/modules/ajax/success.png"); } &.is-autocheck-errored { background-image: url("/images/modules/ajax/error.png"); } }
}
// Retinization of form validation icons that aren't octicons yet @include retina-media-query {
dl.form-group > dd, // TODO: Deprecate .form-group > .form-group-body { .form-control { &.is-autocheck-loading, &.is-autocheck-successful, &.is-autocheck-errored { background-size: 16px 16px; } &.is-autocheck-loading { background-image: url("/images/spinners/octocat-spinner-32.gif"); } &.is-autocheck-successful { background-image: url("/images/modules/ajax/success@2x.png"); } &.is-autocheck-errored { background-image: url("/images/modules/ajax/error@2x.png"); } } }
}
// Inline verification // This overrides primer's inline form stuff .status-indicator {
display: inline-block; width: 16px; height: 16px; // stylelint-disable-next-line primer/spacing margin-left: 5px; .octicon { display: none; }
}
.status-indicator-success {
// Override primer &::before { content: ""; } .octicon-check { display: inline-block; color: var(--color-text-success); fill: var(--color-icon-success); } .octicon-x { display: none; }
}
.status-indicator-failed {
// Override primer &::before { content: ""; } .octicon-check { display: none; } .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; .btn-plain { background-color: transparent; border: 0; }
}
// Drag and drop // // Previously part of `_forms.scss` in Primer. Needs accounting for.
.drag-and-drop {
// stylelint-disable-next-line primer/spacing padding: 7px 10px; margin: 0; // stylelint-disable-next-line primer/typography font-size: 13px; // stylelint-disable-next-line primer/typography line-height: 16px; color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border: $border-width $border-style var(--color-drag-and-drop-border); border-top: 0; border-bottom-right-radius: $border-radius; border-bottom-left-radius: $border-radius; .default, .loading, .error { display: none; } .error { color: var(--color-text-danger); } // 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-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: $font-weight-normal; color: var(--color-text-secondary); a { color: var(--color-text-link); }
}
.is-failed .drag-and-drop .failed-request {
display: inline-block;
}
.manual-file-chooser {
position: absolute; width: 240px; // stylelint-disable-next-line primer/spacing padding: 5px; // stylelint-disable-next-line primer/spacing 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; // stylelint-disable-next-line primer/typography line-height: 34px; }
}
// Focused Textarea styles .upload-enabled {
textarea { display: block; // stylelint-disable-next-line primer/borders border-bottom: $border-width dashed var(--color-upload-enabled-border); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } &.focused { border-radius: $border-radius; box-shadow: var(--color-input-shadow), var(--color-state-focus-shadow); .form-control { box-shadow: none; } .drag-and-drop { border-color: var(--color-upload-enabled-border-focused); } }
}
// Dropping a file on top .dragover textarea, .dragover .drag-and-drop {
// stylelint-disable-next-line primer/box-shadow box-shadow: rgba(#c9ff00, 1) 0 0 3px;
}
.write-content {
position: relative;
}
// Form style with a write and a preview tab .previewable-comment-form {
position: relative; .tabnav { position: relative; padding: $spacer-2 $spacer-2 0; } .comment { border: $border-width $border-style var(--color-previewable-comment-form-border); } .comment-form-error { margin-bottom: $spacer-2; } .write-content, .preview-content { display: none; margin: 0 $spacer-2 $spacer-2; } &.write-selected .write-content, &.preview-selected .preview-content { display: block; } textarea { display: block; width: 100%; min-height: 100px; max-height: 500px; padding: $spacer-2; resize: vertical; }
}
// Used in our boxed-group-less form styles. Give the sumbit button enough space // to breathe without the need for the extra hr. .form-action-spacious {
// stylelint-disable-next-line primer/spacing margin-top: 10px;
}
// 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;
}
// stylelint-disable-next-line primer/spacing .composer .tabnav { margin: 0 0 10px; }
// Misc CSS // // Previously part of `_forms.scss` in Primer. Needs accounting for.
h2.account {
// stylelint-disable-next-line primer/spacing margin: 15px 0 0; // stylelint-disable-next-line primer/typography font-size: 18px; font-weight: $font-weight-normal; color: var(--color-text-secondary);
}
p.explain {
position: relative; font-size: $font-size-small; color: var(--color-text-secondary); strong { color: var(--color-text-primary); } .octicon { // stylelint-disable-next-line primer/spacing margin-right: 5px; // stylelint-disable-next-line primer/colors color: var(--color-icon-tertiary); } .minibutton { top: -4px; float: right; }
}
// fix for chrome bug, see github.com/github/github/issues/53931 .form-group label {
position: static;
}