diff --git a/core/includes/form.inc b/core/includes/form.inc index f5f5b98..d89bcb1 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -3957,9 +3957,9 @@ function theme_button($variables) { $element['#attributes']['type'] = 'submit'; element_set_attributes($element, array('id', 'name', 'value')); - $element['#attributes']['class'][] = 'form-button'; + $element['#attributes']['class'][] = 'button'; if (!empty($element['#button_type'])) { - $element['#attributes']['class'][] = 'form-button-' . $element['#button_type']; + $element['#attributes']['class'][] = 'button-' . $element['#button_type']; } // @todo Various JavaScript depends on this button class. $element['#attributes']['class'][] = 'form-submit'; diff --git a/core/includes/menu.inc b/core/includes/menu.inc index 6492b10..7d419ac 100644 --- a/core/includes/menu.inc +++ b/core/includes/menu.inc @@ -1659,7 +1659,7 @@ function theme_menu_local_action($variables) { 'localized_options' => array(), ); $link['localized_options']['attributes']['class'][] = 'button'; - $link['localized_options']['attributes']['class'][] = 'add'; + $link['localized_options']['attributes']['class'][] = 'button-action'; $output = '
  • '; $output .= l($link['title'], $link['href'], $link['localized_options']); diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php index b8ebfbc..3b7f935 100644 --- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php +++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php @@ -98,12 +98,13 @@ function testOptions() { */ function testButtonClasses() { $this->drupalGet('form-test/button-class'); - // Just contains(@class, "form-button") won't do because then - // form-button-foo would contain form-button. Instead, check - // ' form-button '. Make sure it matches in the beginning and the end too + // Just contains(@class, "button") won't do because then + // "button-foo" would contain "button". Instead, check + // " button ". Make sure it matches in the beginning and the end too // by adding a space before and after. - $this->assertEqual(1, count($this->xpath('//*[contains(concat(" ", @class, " "), " form-button ")]'))); - $this->assertEqual(1, count($this->xpath('//*[contains(concat(" ", @class, " "), " form-button-foo ")]'))); + $this->assertEqual(2, count($this->xpath('//*[contains(concat(" ", @class, " "), " button ")]'))); + $this->assertEqual(1, count($this->xpath('//*[contains(concat(" ", @class, " "), " button-foo ")]'))); + $this->assertEqual(1, count($this->xpath('//*[contains(concat(" ", @class, " "), " button-danger ")]'))); } } diff --git a/core/modules/system/system.theme-rtl.css b/core/modules/system/system.theme-rtl.css index 0b860b4..b2ee453 100644 --- a/core/modules/system/system.theme-rtl.css +++ b/core/modules/system/system.theme-rtl.css @@ -82,10 +82,10 @@ ul.menu { * RTL Styles for link buttons and action links. */ .action-links li:first-child { - margin-left: auto; + margin-left: 0.3em; margin-right: 0; } -a.button.add:before { +.button-action:before { margin-left: 0; margin-right: -0.1em; padding-left: 0.2em; diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css index e5ddb28..b56d4b5 100644 --- a/core/modules/system/system.theme.css +++ b/core/modules/system/system.theme.css @@ -133,6 +133,16 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed { .form-item select.error { border: 2px solid red; } +.button, +.image-button { + margin-left: 1em; + margin-right: 1em; +} +.button:first-child, +.image-button:first-child { + margin-left: 0; + margin-right: 0; +} /** * Inline items. @@ -384,13 +394,13 @@ ul.tabs { .action-links li:first-child { margin-left: 0; /* LTR */ } -a.button { +.button-action { display: inline-block; line-height: 160%; padding: 0.2em 0.5em 0.3em; text-decoration: none; } -a.button.add:before { +.button-action:before { content: '+'; font-weight: 900; margin-left: -0.1em; /* LTR */ diff --git a/core/modules/system/tests/modules/form_test/form_test.module b/core/modules/system/tests/modules/form_test/form_test.module index 1801809..7120c7e 100644 --- a/core/modules/system/tests/modules/form_test/form_test.module +++ b/core/modules/system/tests/modules/form_test/form_test.module @@ -2322,10 +2322,14 @@ function form_test_html_id($form, &$form_state) { */ function form_test_button_class($form, &$form_state) { $form['button'] = array( - '#value' => 'test', '#type' => 'button', + '#value' => 'test', '#button_type' => 'foo', ); - + $form['delete'] = array( + '#type' => 'button', + '#value' => 'Delete', + '#button_type' => 'danger', + ); return $form; } diff --git a/core/themes/bartik/css/style-rtl.css b/core/themes/bartik/css/style-rtl.css index cdd3f1d..2f4841b 100644 --- a/core/themes/bartik/css/style-rtl.css +++ b/core/themes/bartik/css/style-rtl.css @@ -144,14 +144,6 @@ ul.tips { clear: right; } -/* ----------------- Buttons ------------------ */ - -.form-button, -a.button { - margin-right: 0; - margin-left: 0.6em; -} - /* --------------- Search Form ---------------- */ #search-form input#edit-keys, @@ -203,11 +195,6 @@ a.button { .tabs ul.secondary li:last-child { border-left: none; } -ul.action-links li a { - background-position: right center; - padding-left: 0; - padding-right: 15px; -} /* -------------- Form Elements ------------- */ diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index a748fd4..db19d88 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -1030,10 +1030,6 @@ div.tabs { border-bottom: none; border-radius: 5px; } -ul.action-links li a { - padding-left: 15px; - margin: 0; -} /* ---------------- Messages ----------------- */ @@ -1086,8 +1082,7 @@ div.password-confirm { /* ---------------- Buttons ---------------- */ -.form-button, -a.button { +.button { background: #fff url(../images/buttons.png) 0 0 repeat-x; border: 1px solid #e4e4e4; border-bottom: 1px solid #b4b4b4; @@ -1098,17 +1093,12 @@ a.button { font-size: 0.929em; font-weight: normal; text-align: center; - margin-bottom: 1em; - margin-right: 0.6em; /* LTR */ padding: 4px 17px; border-radius: 15px; } -.form-button:focus, -.form-button:hover, -.form-button:active, -a.button:focus, -a.button:hover, -a.button:active { +.button:hover, +.button:focus, +.button:active { text-decoration: none; color: #5a5a5a; background: #dedede; diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css index 8930370..f31d1d3 100644 --- a/core/themes/seven/style-rtl.css +++ b/core/themes/seven/style-rtl.css @@ -108,21 +108,6 @@ body div.form-type-checkbox div.description { margin-left: 0; margin-right: 1.5em; } -a.button, -.form-button, -.image-button { - margin-left: 1em; - margin-right: 0; -} -ul.action-links li { - float: right; - margin: 0 0 0 1em; -} -ul.action-links a { - padding-left: 0; - padding-right: 15px; - background-position: right center; -} /* Update options. */ div.admin-options label, diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index c5a82a8..dfe73b1 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -567,14 +567,7 @@ body div.form-type-radio div.description, body div.form-type-checkbox div.description { margin-left: 1.5em; /* LTR */ } -a.button, -.form-button, -.image-button { - margin-bottom: 1em; - margin-right: 1em; /* LTR */ -} -a.button, -.form-button { +.button { cursor: pointer; padding: 4px 17px; color: #5a5a5a; @@ -588,53 +581,49 @@ a.button, border-right-color: #d2d2d2; background-color: #e4e4e4; border-radius: 20px; -} -a.button:hover, -a.button:active, -.form-button:hover, -.form-button:active { text-decoration: none; } -a.button:focus, -a.button:hover, -.form-button:focus, -.form-button:hover { +.button:focus, +.button:hover { background-color: #c0c0c0; border: 1px solid #bebebe; border-left-color: #afafaf; border-right-color: #afafaf; border-bottom-color: #9b9b9b; color: #2e2e2e; + text-decoration: none; } -a.button:active, -.form-button:active { +.button:active { background-color: #565656; border: 1px solid #333; border-left-color: #222; border-right-color: #222; border-bottom-color: #111; color: #fff; + text-decoration: none; text-shadow: #222 0 -1px 0; } -.form-button-primary { +.button-primary { background-color: #9dcae7; border: 1px solid #8eB7cd; border-bottom-color: #7691a2; color: #133B54; } -.form-button-primary:focus, -.form-button-primary:hover { +.button-primary:focus, +.button-primary:hover { background-color: #73b3dd; border: 1px solid #6ea3bf; border-bottom-color: #4680a0; } -.form-button-primary:active { +.button-primary:active { background-color: #3981b1; border: 1px solid #36647c; border-bottom-color: #284657; } -.form-button-disabled, -.form-button-disabled:active { +.button-disabled, +.button-disabled:active, +.button[disabled], +.button[disabled]:active { background-color: #eee; border-color: #eee; text-shadow: none; @@ -682,7 +671,7 @@ select.form-select:focus { .js input.throbbing { background-position: 100% -16px; } -a.button.add { +.button-action { background: #1078d4; background-image: -webkit-linear-gradient(top, #419ff1, #1076d5); background-image: -moz-linear-gradient(top, #419ff1, #1076d5); @@ -699,22 +688,24 @@ a.button.add { padding: 4px 1em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } -a.button.add:focus, -a.button.add:hover { +.button-action:focus, +.button-action:hover { background-color: #419cf1; background-image: -webkit-linear-gradient(top, #59abf3, #2a90ef); background-image: -moz-linear-gradient(top, #59abf3, #2a90ef); background-image: -o-linear-gradient(top, #59abf3, #2a90ef); background-image: linear-gradient(to bottom, #59abf3, #2a90ef); + border: 1px solid #0048c8; color: #fff; } -a.button.add:active { +.button-action:active { background-color: #0e69be; background-image: -webkit-linear-gradient(top, #0e69be, #2a93ef); background-image: -moz-linear-gradient(top, #0e69be, #2a93ef); background-image: -o-linear-gradient(top, #0e69be, #2a93ef); background-image: -ms-linear-gradient(top, #0e69be, #2a93ef); background-image: linear-gradient(to bottom, #0e69be, #2a93ef); + border: 1px solid #0048c8; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } @@ -758,6 +749,7 @@ a.button.add:active { .form-actions input, .form-wrapper input[type="submit"] { float: none; + margin-left: 0; margin-right: 0; margin-top: 10px; padding-bottom: 6px;