diff --git a/core/includes/form.inc b/core/includes/form.inc index 54feee0..0ef2b3a 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -2943,7 +2943,7 @@ function theme_form_required_marker($variables) { * @param $variables * An associative array containing: * - element: An associative array containing the properties of the element. - * Properties used: #required, #title, #id, #value, #description. + * Properties used: #required, #title, #id, #value, #description, #class. * * @ingroup themeable */ @@ -2969,11 +2969,15 @@ function theme_form_element_label($variables) { $attributes = array(); // Style the label as class option to display inline with the element. if ($element['#title_display'] == 'after') { - $attributes['class'] = 'option'; + $attributes['class'][] = 'option'; } // Show label only to screen readers to avoid disruption in visual flows. elseif ($element['#title_display'] == 'invisible') { - $attributes['class'] = 'visually-hidden'; + $attributes['class'][] = 'visually-hidden'; + } + // If the element already has a class, append this. + if (!empty($element['#class'])) { + $attributes['class'][] = $element['#class']; } // A #for property of a dedicated #type 'label' element as precedence. diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css index 6d2c51e..bd163db 100644 --- a/core/modules/user/css/user.module.css +++ b/core/modules/user/css/user.module.css @@ -79,7 +79,7 @@ div.password-suggestions ul { clear: left; /* LTR */ margin: 0; max-width: 33em; - overflow: hidden; + width: auto; } [dir="rtl"] .confirm-parent, [dir="rtl"] .password-parent { diff --git a/core/themes/seven/install-page.css b/core/themes/seven/install-page.css index 5c3bf83..543d934 100644 --- a/core/themes/seven/install-page.css +++ b/core/themes/seven/install-page.css @@ -27,23 +27,28 @@ /** * Password widget */ -.install-page .password-parent, -.install-page .confirm-parent { - width: auto; -} .install-page .form-item .password-suggestions { - float: none; - width: auto; + float: left; + clear: left; + width: 100%; } @media all and (max-width: 1010px) and (min-width: 48em) { .install-page .password-strength, - .install-page .confirm-parent, - .install-page .password-confirm { - float: none; - width: auto; + .install-page .confirm-parent { + width: 100%; + } + .form-type-password { + float: left; + width: 100%; } input.password-confirm, input.password-field { float: none; } + div.password-confirm { + float: none; + width: auto; + max-width: 100%; + } + } diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index dbd5513..1aa07b9 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -8,6 +8,8 @@ use Drupal\Component\Utility\Xss; use Drupal\Core\Template\RenderWrapper; use Drupal\Component\Utility\String; +use Drupal\Core\Template\Attribute; + /** * Implements hook_preprocess_HOOK() for page templates. @@ -346,3 +348,18 @@ function seven_form_node_form_alter(&$form, &$form_state) { $form['revision_information']['#type'] = 'container'; $form['revision_information']['#group'] = 'meta'; } + +/** + * Implements template_preprocess_form_element. + * + * Add error class to the form item wrapper div, if it has got an error. + */ +function seven_preprocess_form_element(&$variables) { + $element = &$variables['element']; + if (!empty($element['#errors'])) { + $variables['label'] += array('#class' => 'error'); + if (!empty($element['#description'])) { + $variables['description']['attributes'] = new Attribute(array('class' => array('error', 'description'))); + } + } +} \ No newline at end of file diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 33b3eee..cfb9f66 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -755,24 +755,31 @@ fieldset { } } .form-item { - margin: 1em 0; + margin: 0.75em 0; } .form-type-checkbox { padding: 0; } label { display: block; - margin: 0; + margin: 0 0 0.2em; padding: 0; - font-weight: bold; + font-weight: normal; +} +label.error { + color: #e62600; } .form-item label.option { - font-size: 0.923em; text-transform: none; + display: inline-block; } .form-item label.option input { vertical-align: middle; } +.form-disabled label { + color: #737373; +} + .form-disabled input.form-text, .form-disabled input.form-tel, .form-disabled input.form-email, @@ -783,9 +790,35 @@ label { .form-disabled input.form-file, .form-disabled textarea.form-textarea, .form-disabled select.form-select { - background-color: #eee; - color: #777; + border-color: #d4d4d4; + background-color: hsla(0, 0%, 0%, .08); + box-shadow: none; +} + +.form-item input.error, +.form-item textarea.error, +.form-item select.error { + border-width: 2px; + border-color: #e62600; + background-color: hsla(15, 75%, 97%, 1); + box-shadow: inset 0 5px 5px -5px #b8b8b8; + color: #e62600; +} +.form-item input.error:focus, +.form-item textarea.error:focus, +.form-item select.error:focus { + border-color: #e62600; + outline: 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px 1px #e62600; + background-color: #fcf4f2; } +.form-required { + font-weight: bold; + color: #e62600; + font-size: 1.1em; + padding-left: 2px; +} + /* Filter */ .filter-wrapper { @@ -793,27 +826,37 @@ label { } ul.tips, div.description, -.form-item div.description { - margin: 5px 0; - line-height: 1.231em; - font-size: 0.923em; - color: #555; +.form-item .description { + margin: 0.2em 0 0 0; + color: #595959; + font-size: 0.9em; } +.form-item .description.error { + color: #e62600; +} + ul.tips li { margin: 0.25em 0 0.25em 1.5em; /* LTR */ } [dir="rtl"] ul.tips li { margin: 0.25em 1.5em 0.25em 0; } -body div.form-type-radio div.description, -body div.form-type-checkbox div.description { +.form-type-radio .description, +.form-type-checkbox .description { margin-left: 1.5em; /* LTR */ } -[dir="rtl"] body div.form-type-radio div.description, -[dir="rtl"] body div.form-type-checkbox div.description { +[dir="rtl"] .form-type-radio .description, +[dir="rtl"] .form-type-checkbox .description { margin-left: 0; margin-right: 1.5em; } +.form-text, +.form-textarea { + border-radius: 2px; + font-size: 1em; + line-height: normal; +} + input.form-autocomplete, input.form-text, input.form-tel, @@ -823,36 +866,58 @@ input.form-search, input.form-number, input.form-color, input.form-file, +input.form-date, textarea.form-textarea, select.form-select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - padding: 2px; + padding: .3em .4em .3em .5em; max-width: 100%; - border: 1px solid #ccc; + border: 1px solid #b8b8b8; border-top-color: #999; background: #fff; color: #333; + border-radius: 2px; + background: #fcfcfa; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125); + font-size: 1em; + color: #595959; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } -input.form-text:focus, -input.form-tel:focus, -input.form-email:focus, -input.form-url:focus, -input.form-search:focus, -input.form-number:focus, -input.form-color:focus, -input.form-file:focus, -textarea.form-textarea:focus, -select.form-select:focus { - color: #000; - border-color: rgba(0, 116, 189, 0.8); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4); - outline-color: rgba(0, 116, 189, 0.5); +.form-text:focus, +.form-tel:focus, +.form-email:focus, +.form-url:focus, +.form-search:focus, +.form-number:focus, +.form-color:focus, +.form-file:focus, +.form-textarea:focus, +.form-date:focus, +.form-select:focus { + border-color: #40b6ff; + outline: 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff; + background-color: #fff; +} +.form-search { + border-radius: 0; + border-top-left-radius: .9em; + border-bottom-left-radius: .9em; + border-right: none; + margin-right: -3px; + padding-left: .8em; + padding-right: .7em; } +.form-search:last-child { + border-radius: .9em; + border-right: 1px #b8b8b8 solid; +} + + /** * Improve spacing of cancel link.