You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.0 KiB
150 lines
3.0 KiB
@layer components { |
|
|
|
/** |
|
* @file |
|
* Visual styles for form components. |
|
*/ |
|
|
|
/* Text-like inputs, select, and textarea — shared baseline. |
|
Uses Drupal's Form API class hooks, applied by core to every rendered |
|
form element. The .form-textarea-wrapper rule in textarea.css makes |
|
textareas full-width inside their wrapper; this file handles the skin. */ |
|
.form-text, |
|
.form-email, |
|
.form-tel, |
|
.form-url, |
|
.form-password, |
|
.form-search, |
|
.form-number, |
|
.form-date, |
|
.form-time, |
|
.form-datetime, |
|
.form-month, |
|
.form-week, |
|
.form-select, |
|
.form-textarea { |
|
padding: var(--size-2) var(--size-3); |
|
border: 1px solid var(--border-1); |
|
border-radius: var(--radius-2); |
|
background-color: var(--surface-1); |
|
color: var(--text-1); |
|
font: inherit; |
|
line-height: 1.4; |
|
max-width: 100%; |
|
|
|
&:hover { |
|
border-color: var(--text-2); |
|
} |
|
&:focus { |
|
outline: 2px solid var(--upei-red); |
|
outline-offset: 2px; |
|
border-color: var(--upei-red); |
|
} |
|
} |
|
|
|
.form-textarea { |
|
min-height: 8em; |
|
resize: vertical; |
|
} |
|
|
|
form .field-multiple-table { |
|
margin: 0; |
|
} |
|
form .field-multiple-table .field-multiple-drag { |
|
width: 30px; |
|
padding-right: 0; /* LTR */ |
|
} |
|
[dir="rtl"] form .field-multiple-table .field-multiple-drag { |
|
padding-left: 0; |
|
} |
|
form .field-multiple-table .field-multiple-drag .tabledrag-handle { |
|
padding-right: 0.5em; /* LTR */ |
|
} |
|
[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle { |
|
padding-right: 0; |
|
padding-left: 0.5em; |
|
} |
|
form .field-add-more-submit { |
|
margin: 0.5em 0 0; |
|
} |
|
|
|
/** |
|
* Markup generated by Form API. |
|
*/ |
|
.form-item, |
|
.form-actions { |
|
margin-top: 1em; |
|
margin-bottom: 1em; |
|
} |
|
tr.odd .form-item, |
|
tr.even .form-item { |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
} |
|
.form-composite > .fieldset-wrapper > .description, |
|
.form-item .description { |
|
font-size: 0.85em; |
|
} |
|
label.option { |
|
display: inline; |
|
font-weight: normal; |
|
} |
|
.form-composite > legend, |
|
.label { |
|
display: inline; |
|
margin: 0; |
|
padding: 0; |
|
font-size: inherit; |
|
font-weight: bold; |
|
} |
|
.form-checkboxes .form-item, |
|
.form-radios .form-item { |
|
margin-top: 0.4em; |
|
margin-bottom: 0.4em; |
|
} |
|
.form-type-radio .description, |
|
.form-type-checkbox .description { |
|
margin-left: 2.4em; /* LTR */ |
|
} |
|
[dir="rtl"] .form-type-radio .description, |
|
[dir="rtl"] .form-type-checkbox .description { |
|
margin-right: 2.4em; |
|
margin-left: 0; |
|
} |
|
.marker { |
|
color: #e00; |
|
} |
|
.form-required::after { |
|
display: inline-block; |
|
width: 6px; |
|
height: 6px; |
|
margin: 0 0.3em; |
|
content: ""; |
|
vertical-align: super; |
|
/* Use a background image to prevent screen readers from announcing the text. */ |
|
background-image: url(../../images/icons/required.svg); |
|
background-repeat: no-repeat; |
|
background-size: 6px 6px; |
|
} |
|
abbr.tabledrag-changed, |
|
abbr.ajax-changed { |
|
border-bottom: none; |
|
} |
|
.form-item input.error, |
|
.form-item textarea.error, |
|
.form-item select.error { |
|
border: 2px solid red; |
|
} |
|
|
|
/* Inline error messages. */ |
|
.form-item--error-message::before { |
|
display: inline-block; |
|
width: 14px; |
|
height: 14px; |
|
content: ""; |
|
vertical-align: sub; |
|
background: url(../../images/icons/error.svg) no-repeat; |
|
background-size: contain; |
|
} |
|
|
|
}
|
|
|