Bartik dropbutton styling looks bad

Yay, thanks!

@James Am I correct that your last patch is incomplete?

See also #2282599: Dropdown menus in most of core are broken in Stark

+++ b/core/themes/bartik/css/style.css
@@ -1763,18 +1767,60 @@ div.admin-panel .description {
-.js .dropbutton-widget {
-  background-color: white;
-  border-radius: 5px;
...
+.js .form-actions .dropbutton-widget {

Why introduce extra specificity here?

Gonna test this one with and without the extra specifity.

I tested this one with and without the extra specificity, mentioned in #9. This is a correct remark, because the result wasn't changed.
I created a patch (and interdiff.txt) for this.

This is screenshot with patch #3:

This is screenshot when removed the extra specificity:

1) I tested this on Firefox and it looks like this:

2) Shouldn't we use .svg instead of .png?

Edit: there's only file removals so ignore point 2.

gonna test and fix this.

Lauriii: I think you didn't take the last patch?

oh nooo, that styling is also in /core/misc/dropbutton/dropbutton.css.

Going to make a new patch.

OK, I figured it out...

I have to put the status of this issue to "postponed", because /core/misc/dropbutton/dropbutton.css overwrites the patch from #11.
The overwriting part can't be fixed in this ticket, it must be fixed in #1989470: Dropbutton style update for Seven

So, the last patch I committed (#11) is the right one for this issue!

See screenshot for more details:

From postponed to need review, because I fixed the overwriting part of "#1989470: Dropdown styling" with an !important. Normally I'm not so happy with !importants, but in this case we don't have to change the css from #1989470 + bartik uses !importants a lot, so...

This issue looks fixed now. New patch in attach.

Any reason not to use a SVG file? I'm not sure how to do a png to svg conversion, but...

The png is removed in the patch, so there is no png and no svg.

Tested here - http://s7945023a9d9e93f.s2.simplytest.me/node/add/article

It looks fine to me...

Added a bit of RTL CSS.

RTL Before:

RTL After:

Can we get up to date screenshots in the issue summary of the after state in LTR and RTL? Visually it looks great, I guess we need a frontend reviewer on this for CSS.

Updated the issue summary with screenshots.

Good work! The dropbutton mark up is so confusing... See #2278473: Simplify Dropbutton markup in line with our CSS standards

I did find a few low level points.

1. +++ b/core/themes/bartik/css/style.css
   @@ -1373,9 +1373,13 @@ div.messages,
   +  background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: -moz-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: -o-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
   
   @@ -1855,18 +1859,74 @@ div.admin-panel .description {
   +  background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: -moz-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: -o-linear-gradient(top, #f3f3f3, #e8e8e8);
   +  background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
   ...
   +  background-image: -webkit-linear-gradient(top, #e8e8e8, #d2d2d2);
   +  background-image: -moz-linear-gradient(top, #e8e8e8, #d2d2d2);
   +  background-image: -o-linear-gradient(top, #e8e8e8, #d2d2d2);
   +  background-image: linear-gradient(to bottom, #e8e8e8, #d2d2d2);
   

   We can remove -moz- and -o- lines. See http://caniuse.com/#feat=css-gradients

2. +++ b/core/themes/bartik/css/style.css
   @@ -1855,18 +1859,74 @@ div.admin-panel .description {
   +  margin: 2px 0;
   +  border-radius: 15px;
   ...
   +  padding: 4px 17px;
   

   These units should in ems

Removed the -moz- and -o- lines on gradients + converted px to em.

New patch in attach.

I found a few issues that effect normal buttons:

The borders of the drop buttons on the content type table look a little weird:

Also, is it me or do the normal buttons look better with a border radius of 1em?

Sorry that second screenshot should of been:

No, it isn't just you: #2334363: Open hoverstate dropbutton to overflow on border

Well, I adjusted the border radius for all buttons -not only de dropdown buttons-. Correct the border-bottom for the dropdown, and its hover.

If there is something wrong, tell me please :)

Sorry, forget the patch :P

@Karmen: Could you provide an interdiff please?

There is :)

I applied the above patch #32, but there was a problem with the border-radius in :hover state. See screenshot of the problem:

I fixed this issue, so new patch in attach.

Screenshots of fixed hover states RTL and LTR:

Thanks for all the work! For some reason now the buttons don't look as rounded, I think we're better off keep normal buttons the same border-radius as before and just changing the dropbutton border-radius. They need to be different to look good:

This looks much better indeed. I reverted the border-radius of the normal button. Also changed the border-radius of the dropdown button styling from 0.9em to 1em .
New patch.
See screenshots of the result:

Thanks for providing the screenshots. I also manually tested the patch to check RTL and it looks good. Just one or two picky CSS comments.

1. +++ b/core/themes/bartik/css/style.css
   @@ -1372,7 +1372,7 @@ div.messages,
   -  border-bottom-color: #b4b4b4;
   +  border-bottom: 1px solid #b4b4b4;
   

   I don't think we need to make this change because the other border properties are defined on the line above

2. +++ b/core/themes/bartik/css/style.css
   @@ -1380,8 +1380,8 @@ div.messages,
   -  padding: 0.32em 1.063em;
   -  border-radius: 0.9em;
   +  padding: 4px 17px;
   

   I think we should stick to defining units in ems in all cases

Thx for the follow-up!

Fixed the comments:
- changed the "border-bottom: 1px solid #b4b4b4" to "border-bottom-color: #b4b4b4".
- converted the padding and border-radius from px to em

New patch in attach.

Here some screenshots of the result (RTL + LTR):

These are some nice buttons. Found however some glitches with dropbuttons (single and multiple) created with links rather than buttons or inputs:

So these were fixed, please check it out. Let me know if there's need for some css refactoring.

D

Great, I tested the patch to verify the changes. The code changes look good

One less PNG more than offsets the extra CSS. Great work!

Here's some RTL nitpick.

1. +++ b/core/themes/bartik/css/style.css
   @@ -1892,18 +1894,115 @@ div.admin-panel .description {
   +.js .dropbutton-widget .button:hover {
   +  border-radius: 1em 0 0 1em;
   +}
   ...
   +[dir="rtl"].js  .dropbutton-widget .button:hover {
   +  border-radius: 0 1em 1em 0;
   +}
   

   Add the RTL rule immediately after its LTR equivalent.

2. +++ b/core/themes/bartik/css/style.css
   @@ -1892,18 +1894,115 @@ div.admin-panel .description {
   +.js .dropbutton-multiple .dropbutton-widget .dropbutton-action:first-child a:hover {
   +  border-radius: 1em 0 0 1em;
   +}
   ...
   +.js .dropbutton-multiple.open .dropbutton-widget .dropbutton-action:first-child a:hover {
   +  border-radius: 1em 0 0 0;
   +}
   

   Add an /* LTR */ comment after the properties here.

Here we go.

Sending to testbot :)

Great work. Thanks @herom for the RTL review.

This issue is a normal bug fix, and doesn't include any disruptive changes, so it is allowed per https://www.drupal.org/core/beta-changes. Committed f6fb464 and pushed to 8.0.x. Thanks!