The content/behavior tabs on the paragraphs widget don't render properly in Claro.

The desktop version looks great!

Tests seems to be failing because the tabs are no longer sticky at the top of the page.
Also the tabs are no longer shown on mobile screens:

I took a bit of a different approach.

I removed the tab classes and created dedicated styling for this element.
The advantage of this approach is that every theme uses these styles as default.
Every theme that wants to improve these element, can override the styles.

Seven:

Gin (or Claro):

Started from the beginning and created new patch.
This is how claro looks like with this patch (based on the claro styleguide):
active and not active state:


hover:


focus:

NOTE:

- Seven looks different with this patch but it's not broken.

Seven now:
active and not active state:


hover:


Seven after add the patch:
active and not active state:


hover:


- The mobile view is broken now. I will continue to work on it and fix the mobile view.

added a new patch in which desktop and mobile design is fixed

Desktop view:

Mobile view:

created a new patch because I found the classes on claro which includes all styling (for mobile and desktop). Also with this patch seven looks exactly the same as bevor.

+++ b/css/paragraphs.widget.css
@@ -137,10 +137,6 @@
-.paragraphs-tabs-wrapper .paragraphs-tabs {
-  display: none;
-}

why is this removed? isn't this for cases when there are no behaviors? make sure it only shows up when you add paragraph types that have behaviors.

I'm not sure if this is originally written for that, but it's no longer needed. Also not to hide the tabs when there is no Behavior.

with the display: none rule added back-

Patch doesn't apply on 8.x-1.x-dev.

Rerolled patch #21, please review it.

Discussed, the none css breaks the display: flex through show(). lets change paragraphs-tabs to paragraphs-hide for the none selector and remove/add that class in our JS.

now with the class hide applied from the start

Committed.