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

maartenverbaarschot’s picture

Status:Active» Needs review
StatusFileSize
new406 bytes

how about this..

JohnAlbin’s picture

Component:CSS/HTML markup» layout.css

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

JohnAlbin’s picture

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

Blargh. I hate when I have to rename components.

JohnAlbin’s picture

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?

Dave Reid’s picture

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 {
Dave Reid’s picture

Status:Postponed (maintainer needs more info)» Active
JohnAlbin’s picture

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.

Dave Reid’s picture

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" ...>

Dave Reid’s picture

Status:Needs work» Active
JohnAlbin’s picture

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.

Dave Reid’s picture

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

JohnAlbin’s picture

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