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;