Add .button:not(a.button--danger) so that no reset is needed on button--danger

Patch attached.

Moved changes to the Seven theme.

Note that #216064: Entity form "Delete" button triggers server-side + HTML5 form validation; change "Delete" button to a link is about to replace all Delete buttons with

a.button.button--danger

That change is both a win and also a conflict for Seven. ;)

You want the a.button--danger part.

You do not want the .button part. :)

If you're overriding the full button CSS anyway already, then you could simply do this though:

.button:not(a.button--danger) {
  [button styles here]
}
.button--danger {
  color: red;
}
a.button--danger {
  text-decoration: underline;
}

I'm working on it

btw, I would not recommend to do what the issue title suggests (using link--danger instead of button--danger).

That is, because doing so would require you to write some very sophisticated preprocess (or whatever) code in seven.theme that is guaranteed to replace all buttons of #button_type 'danger' with links. — Contributed modules will use danger buttons in their forms, so you'd have to ensure that every possible instance is replaced accordingly.

I'd recommend to change the issue title + summary; basically to implement #5.

Thanks sun, I changed the title!

Hi,

So I changed the css, added :not on button css so that the reset on the button--danger is minimum. I wasn't sure if there would be any occasion where .button-danger and .button-primary so I also added :not on Button primary, but if there would be no such occasion I will remove it.

Hope it works!

@yuki77 it seems that you have to update your codebase and try to apply the patch. It's what we call a Re-roll.

Try: git fetch (to get latest codebase)
And then try to apply your patch changes. It seems that some files has been changed while you were working on this patch.

Let me know if you need more help and thanks for your contribution!

Hi,

So I created a new one, Hope this one works...! And Please let me know if I can remove :not from .button--primary

Changing status to Needs review to run tests.

Updating patch with changes said in #15. Please review.

Another try at patch.

With this patch I add the code from the class ".button--danger" to "button.css", witch contains the same property the clases format that it was declarated before.

I've cleaned the "buttons.theme.css" and the other elements with "button" class will not be rendered.

@Lewis Can this go in?

I combined all the previous patches and created one which uses :not(.button--danger) because :not selector can accept a simple selector as argument.
No additional reset of .button--danger is needed.

Visually, it looks good on desktop. It doesn't look good on mobile though (see screenshot), so it needs a bit of work there.

Apart from this, I really get a bit nauseous from using a 'button' class on a link, that looks like a link (not a button). Don't know of a better solution now thought.

And the screenshot.

'Save' and 'Delete' buttons styled for rwd.
'Save' centered with parent element text alignment set to center.
Padding and margins on buttons changed in order to fit 780px screen and to be centered for mobile devices.

I tried another approach to the issue. Fixed only the overriding of button--danger with button:not(.button--danger).

Retest to 8.1.x and add tag for DrupalCampES

#33 Patch failed

#44 Please review the patch

Verified and tested patch #44.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Any content
# Edit the content
# Check the delete button
# Inspect it and check the CSS classes

Expected Results:
# Remove the button classes completely.

Looks good to me.
Can be a move to RTBC.

Re-test on #44 and its pass, Move to NR.

Removing Needs reroll tag as it is no longer needed.

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.

I applied patch #44 With this patch i add the code from the class like ".button--danger" witch contains the same property the clases format that it was declarated before. its work fine.

Drupal Version :10.1.2
PHP Version 8.1.16
Seven Theme : 1.0.0-alpha1
No patch applied.
I have shared a screenshot in which the 'delete' button style appeared correct.

The existing patches are for Drupal core.

I am working on it.

I apologize: I did not refresh the page, and I did not see the new comments.

I checked the MR and it resolved the issue and we dont need to reset css provide by .button class in .button--danger class. So moving this issue to RTBC.

Thank you for the patches!

This is not really playing nice, because

.button:not(.button--danger)

has a high CSS specifity and can therefore easily interfere with other styles.

I encountered this already in two places. One even interfering with

/**
 * For anything you want to hide on page load when JS is enabled, so
 * that you can use the JS to control visibility and avoid flicker.
 */
.js .js-hide {
  display: none;
}

from
https://git.drupalcode.org/project/drupal/-/blob/875f19af4634a6b6618fe1a...