Commit e933d815 authored by catch's avatar catch

Issue #1845728 by sun, ry5n: Refactor and introduce generic button CSS styles for forms and links.

parent 81861b40
......@@ -4110,9 +4110,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';
......
......@@ -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 = '<li>';
$output .= l($link['title'], $link['href'], $link['localized_options']);
......
......@@ -23,14 +23,14 @@ function contact_help($path, $arg) {
$output .= '<dt>' . t('Site-wide contact forms') . '</dt>';
$output .= '<dd>' . t('The <a href="@contact">Contact page</a> provides a simple form for users with the <em>Use the site-wide contact form</em> permission to send comments, feedback, or other requests. You can create categories for directing the contact form messages to a set of defined recipients. Common categories for a business site, for example, might include "Website feedback" (messages are forwarded to website administrators) and "Product information" (messages are forwarded to members of the sales department). E-mail addresses defined within a category are not displayed publicly.', array('@contact' => url('contact'))) . '</p>';
$output .= '<dt>' . t('Navigation') . '</dt>';
$output .= '<dd>' . t('When the site-wide contact form is enabled, a link in the <em>Main navigation</em> menu is created, but the link is disabled by default. This menu link can be enabled on the <a href="@menu">Menus administration page</a>.', array('@menu' => url('admin/structure/menu'))) . '</dd>';
$output .= '<dd>' . t('When the site-wide contact form is enabled, a link in the <em>Footer</em> menu is created, which you can modify on the <a href="@menu">Menus administration page</a>.', array('@menu' => url('admin/structure/menu'))) . '</dd>';
$output .= '<dt>' . t('Customization') . '</dt>';
$output .= '<dd>' . t('If you would like additional text to appear on the site-wide or personal contact page, use a block. You can create and edit blocks on the <a href="@blocks">Blocks administration page</a>.', array('@blocks' => url('admin/structure/block'))) . '</dd>';
$output .= '</dl>';
return $output;
case 'admin/structure/contact':
$output = '<p>' . t('Add one or more categories on this page to set up your site-wide <a href="@form">contact form</a>.', array('@form' => url('contact'))) . '</p>';
$output .= '<p>' . t('A <em>Contact</em> menu item (disabled by default) is added to the Tools menu, which you can modify on the <a href="@menu-settings">Menus administration page</a>.', array('@menu-settings' => url('admin/structure/menu'))) . '</p>';
$output .= '<p>' . t('A <em>Contact</em> menu item is added to the <em>Footer</em> menu, which you can modify on the <a href="@menu-settings">Menus administration page</a>.', array('@menu-settings' => url('admin/structure/menu'))) . '</p>';
$output .= '<p>' . t('If you would like additional text to appear on the site-wide contact page, use a block. You can create and edit blocks on the <a href="@blocks">Blocks administration page</a>.', array('@blocks' => url('admin/structure/block'))) . '</p>';
return $output;
}
......
......@@ -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 ")]')));
}
}
......@@ -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;
......
......@@ -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 */
......
......@@ -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;
}
......@@ -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 ------------- */
......
......@@ -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;
......
......@@ -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,
......
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment