Media module (and core too) makes use of a.button as links that should look like buttons. These currently appear just as normal links when used with Zen.

Files: 
CommentFileSizeAuthor
#1 zen-1420476-1.patch406 bytesmaartenverbaarschot

Comments

Status:Active» Needs review
StatusFileSize
new406 bytes

how about this..

Component:CSS/HTML markup» layout.css

Before and after screenshots or instructions how to test this would be appreciated.

Component:layout.css» CSS/SASS/HTML markup

Blargh. I hate when I have to rename components.

Status:Needs review» Postponed (maintainer needs more info)

The only core styling I see for .button is:

#dashboard .canvas-content a.button {
  margin: 0 0 0 10px; /* LTR */
  color: #5a5a5a;
  text-decoration: none;
}

So how is Zen broken in this regard? We're not overriding a core style or media module's styles.

These currently appear just as normal links when used with Zen.

They appear unstyled in ALL themes if I'm not mistaken. Are you wanting to patch every contributed theme to add button styling for media module?

It's used extensively by Media module and is definitely something that we're encountering more often, especially with things like Twitter Bootstrap which uses a.btn.

Please consider that core does actually style this often:

bartik/css/style-rtl.css:a.button {
bartik/css/style.css:a.button {
bartik/css/style.css:a.button {
bartik/css/style.css:  background: #fff url(../images/buttons.png) 0 0 repeat-x;
bartik/css/style.css:a.button:link,
bartik/css/style.css:a.button:visited,
bartik/css/style.css:a.button:hover,
bartik/css/style.css:a.button:focus,
bartik/css/style.css:a.button:active {
bartik/css/style.css:input.form-button-disabled,
bartik/css/style.css:input.form-button-disabled:hover,
bartik/css/style.css:input.form-button-disabled:focus,
bartik/css/style.css:input.form-button-disabled:active,
bartik/css/style.css:  background: url(../images/search-button.png) no-repeat ce
garland/style-rtl.css:.form-button,
garland/style.css:.vertical-tab-button .summary {
garland/style.css:.form-button,
seven/jquery.ui.theme.css:.ui-dialog .ui-dialog-buttonpane {
seven/jquery.ui.theme.css:.ui-dialog .ui-dialog-buttonpane button {
seven/jquery.ui.theme.css:  background: url(images/buttons.png) 0 0 repeat-x;
seven/jquery.ui.theme.css:.ui-dialog .ui-dialog-buttonpane button:active {
seven/jquery.ui.theme.css:  background: url(images/buttons.png) 0 0 repeat-x;
seven/style-rtl.css:a.button {
seven/style.css:a.button {
seven/style.css:  background: url(images/buttons.png) 0 0 repeat-x;
seven/style.css:a.button:link,
seven/style.css:a.button:visited,
seven/style.css:a.button:hover,
seven/style.css:a.button:active {
seven/style.css:input.form-button-disabled,
seven/style.css:input.form-button-disabled:active {
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button {
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button a {
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button strong {
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button .summary {
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button a:hover,
seven/vertical-tabs.css:div.vertical-tabs ul li.vertical-tab-button a:focus {

Status:Postponed (maintainer needs more info)» Active

Status:Active» Needs work

Please consider that core does actually style this often:

I didn't explain myself well. I don't need a list of places where core themes are doing styling.

I don't know where in core modules it is being used. I can see that none of core's modules are providing styling for a.button, but I don't which modules are actually outputting that markup. It seems like a core bug to be printing something like <a href="#" class="button> and expecting every theme in the world to style that.

In addition to the actual CSS, Zen has a habit of documenting what the styling applies to. Right now, I don't know what to add as a code comment.

Yeah the problem is that core doesn't use it except for on the dashboard UI (see dashboard.js and Drupal.behaviors.dashboard.setupDrawer. It's mostly used in contrib because we can't easily do theme_button and actually get output as <button ...> that is not <input type="submit" ...>

Status:Needs work» Active

Status:Active» Needs work

There's a patch that needs work. :-)

We should use this in the Sass version: http://compass-style.org/reference/compass/css3/appearance/

And add this change to the forms stylesheets.

Gah, had a brain fart and didn't see the patch in #1.

Automatically closed -- issue fixed for 2 weeks with no activity.