1
1
mirror of https://github.com/primer/css.git synced 2024-12-24 22:53:58 +03:00
css/scss/_forms.scss

757 lines
12 KiB
SCSS

// 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 - `<dl.form>` with a `<dt>` containing the label and
// `<dd> 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 `<div.hfields>` 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 <input type="number"> 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
}