🇮🇳India @Santosh_Verma

In this Patch addressing the comment #27,
attaching interdiff file.

Testing stepps
1.Install drupal 11.x.
2.navigate to /admin/structure/types/add

Before

After

working on it

working on this

I have verified the MR changes in #46 asked in #45 all are points are addressed
2. I think margin: 0 is simpler and acceptable- addressed
3. Do we need @nest here? (@nest &:focus )- @nest removed
4. Do we need @nest here? (@nest &:hover )- @nest removed
5. Do we need @nest here? (@nest &::before {) - @nest removed

Tested the impact on the site nothing is breaking looks similar as screenshot attached in comment #6 that's why not adding before after screenshot :)

reviewing it

In this patch, I have addressed the comment #42 by adjusting the styling. The issue was that the padding on the ul(primary-nav__menu--level-2) element was causing the animation to break. To fix this, I have removed the padding from the ul(primary-nav__menu--level-2) and instead added padding to the first and last child of the second level items (primary-nav__menu-item--level-2). This solution addresses both the problem of focus cut off and the animation breaking.

working on it

@smustgrave i have added the before and after screenshot as you asked

Before

After

The patch #17 was tested on D11.x, but it failed. I have created a new patch file, and I am uploading it

working on it

Addressing the comment #36, and created a patch along with interdiff. No additional screenshots are being added as they are the same as the ones uploaded in comment #33.

working on it

Hello @smustgrave, I have tested the issue on both versions, 10.1 and 11.x, and issue persists in both of them. I have tried applying both patch #2 and patch #9, but both of them have failed to apply. From my evaluation, it seems that patch #2 is more useful. Therefore, I am re-rolling the patch #2 created on Drupal 11.x.

Before

After

I have tested patch #9, and it applied cleanly without any issues. The nesting and logical properties of the code changes appear to good to me. Nothing is appearing broken, for reference attaching the screenshot.

RTBC + 1

working on it

i am working on it

I am addressing the comment #19 in this patch, I have made the necessary adjustment to the padding by changing it from var(--sp0-5) to var(--sp0-25), which is the smallest value available. This change successfully resolved the issue related to the “Focus states on mobile second level.” attaching the patch and inderdiff.

I attempted to create a merge request but encountered an error on my local machine. As a workaround, I am creating a patch file in the hopes that this solution will be helpful.

I thoroughly tested patch #6 and verified that it functions correctly, successfully resolving the issue on popular browsers including Chrome, Safari, and Mozilla

@Anuja Surve Certainly! Instead of directly modifying the CSS file, it is generally considered good practice to modify the source file and compile it to generate the final CSS file. Here's how you can approach it:

1. Locate the dropbutton.pcss.css source file that needs to be modified. This file is typically written in a preprocessor language like Sass or Less.
2. Make the necessary changes to the dropbutton.pcss.css source file.
3. Compile the modified source file to generate the final CSS file.
4. After compiling the modified source file, verify that the generated CSS file reflects your changes and create a patch.

for reference
https://www.drupal.org/docs/8/modules/claro/development →

and after uploading the patch please change the status to need review

Santosh_Verma → created an issue.

screenshot after patch applied

@ebrahimjmi I have tested the patch #14 and its applied cleanly and resolving the issue.

working on it

Hi @ebrahimjmi, I did a little mistake while creating the issue. It was actually supposed to be for Claro theme and the patch provided doesn't apply to Claro. Attaching Screenshots and also added more details in the Issue summery

I have initiated another test in queue. it's a random test failure and have no relation with my patch as their is no config change or any key change in the patch provided in #4. Hence reverting the status to the previous one (RTBC) changed by @smustgrave

please review.

working on it

“I noticed that comment #22 did not incorporate the feedback provided in comment #21 regarding the nesting opportunities. I have worked on the suggestions provided in and made the necessary changes. Tested the ui nothing broken. Please review the MR.

working on it

@adriancid, I have been able to reproduce the problem and have developed a patch to address the issue..
Needs review

got the issue working on it

Reviewed the comment #9 MR,
Nothing changed into css file after nesting, it looks good to me

RTBC +1

@bnjmnm i have tested the patch # 32, and it's applying clearly

Drupal : 10.1.x

santosh.verma@FVFYJ11AHV2D drupal % git apply -v 3332729-32.patch 
Checking patch core/themes/claro/css/components/vertical-tabs.css...
Checking patch core/themes/claro/css/components/vertical-tabs.pcss.css...
Applied patch core/themes/claro/css/components/vertical-tabs.css cleanly.
Applied patch core/themes/claro/css/components/vertical-tabs.pcss.css cleanly.

Worked upon the suggestion given in #7, I believe that declaring variables in the styles block is redundant and unnecessary. I have addressed this issue in commit #8. Please take a look

Hi #smustgrave, Yes If we set the Claro theme as the default, it appears to be causing an issue as described. However, when using the Olivero theme, everything seems to be working fine.

Tested Drupal Version: 10.1.x-dev
The steps to reproduce is the same as mention above
1) Go to edit node
2) Click on Preview button at the bottom.
3) Click on logo or website title on Navbar.

I reviewed the Mr #3959,
patch applied successfully and solved the issue

before

after

but there a little more space to improve the code like
1. we can write more logical and nested css for block

 .ui-dialog-buttonpane .ui-dialog-buttonset {
+  display: flex;
+  float: none;
+  gap: 0.7rem;
   justify-content: flex-end;
-  margin: 0 var(--space-s);
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding-inline-end: 5px;
 }
and
+.ui-dialog .ui-dialog-buttonpane button {
+  margin: 0;
+}

2. we can remove float: none as there is no use of this.

working on it

working on this

#Chris64 : Regarding the recent modifications and changes in CSS that you requested in the last patch, implementing them may have an adverse impact on the styling of other sections of the website.While I agree that your suggested solution is better than creating a generic rule for all tables, I have encountered an issue where the even/odd classes are not being applied when I copied the table.html.twig file from Claro to Olivero.
Could you provide more information, such as the folder structure (mine is core/themes/olivero/templates/dataset/table.html.twig) and how to view the table in the frontend (I am creating a view with a format:table)?

#Gauravvvv I have changed the --color-blue-070 color hex code according to Drupal Design system

reference link
https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/%F0%9F%92%A7-Drupal-...

Hi @smustgrave, I have provided some context for my MR on issue #4. I am happy to update the purposed solution but I waiting for review of my MR and get some feedback.

Santosh_Verma → made their first commit to this issue’s fork.

#superlolo95, The file "bootstrap/scss/_reboot.scss" is not part of the default installation of Claro theme in Drupal 9.5.x.

#quietone sorry for patch #43
rerolling the patch again for Drupal 10.1.x with interdiff

#quietone i am rerolling the patch for Drupal 10.1.x

#Chris64 i have attached the latest patch please test with this.

Rerolling the patch for D10.0.x

Rerolling the patch for D10 with Custom Commands Failed issue fixes.

Adding a patch for table zebra styling

before

after

@infohome i tested it with Drupal 9,

The side bar is not sticky in the D9 as well attaching the screenshot

Hi #harish

i tried to reproduce but menu is appearing fine for Gin theme

Working on it

Tested the MR#3546

Patch applied Clearly
Set the direction RTL and tested UI and popup is aligned perfectly center for reference attaching the screenshot

RTBC + 1

this is a duplicate issue, and already fixed in
https://www.drupal.org/project/seven/issues/3304752 🐛 Icons are missing Fixed
=> icon path is changed(background: url(../../images/icons/ffffff/ex.svg) 0 0 no-repeat;)
and also icons copied into seven theme from core

The fix is not released only for Composer with git close working perfectly refer the below ticket comment #6
https://www.drupal.org/project/seven/issues/3354837 📌 Icons are missing Needs review

#coaston i tested it with the 2 approaches

1. Fresh setup of D 10.1.x and installed the theme Seven via Git clone
=> icon path is changed(background: url(../../images/icons/ffffff/ex.svg) 0 0 no-repeat;)
and also icons copied into seven theme from core

Result- the close icon appearing,

2. Fresh setup of D 10.1.x and installed the theme Seven via composer
=> the image path is same as mention above (background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;) and also there is not any folder in the cion folder named(ffffff)

Result- the close icon missing

working on it

Tested the comment #19

class removed from the element

before

after

I have tested the #MR3615

there is error in the patch

Checking patch core/themes/claro/css/components/dropbutton.pcss.css...
error: while searching for:
  overflow: visible;
  margin: 0;
  list-style: none;
}
[dir="rtl"] .dropbutton {
  margin: 0;
}

.js .dropbutton {
  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
  height: var(--dropbutton-toggle-size);
}

/* Variants. */
.js.no-touchevents .dropbutton--small {
  height: var(--dropbutton-small-toggle-size);
}

.js.no-touchevents .dropbutton--extrasmall {
  height: var(--dropbutton-extrasmall-toggle-size);
}

/**
 * First dropbutton list item.
 */
.js .dropbutton--multiple .dropbutton__item:first-of-type {
  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
  margin-right: 0;
  margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
}

/* First dropbutton list item variants */
.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
  margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
  margin-right: 0;
  margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
}

.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
  margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
}
[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
  margin-right: 0;
  margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
}

/**

error: patch failed: core/themes/claro/css/components/dropbutton.pcss.css:62
error: core/themes/claro/css/components/dropbutton.pcss.css: patch does not apply

#catch i have tested the comment #27 mentioned issue, ( https://www.drupal.org/project/drupal/issues/3355904 📌 Removed unused CSS from tabledrag.css file Closed: duplicate ).

Unused css removed after the MR,
for reference i am also adding the screenshot here.

before

after

Tested the comment #3

Unused css removed after the MR

Before

after

working on it

@smustgrave your last comment #23 is response to #22 ? but you changed the status need review to need work if any change needed please mention so that we can work on this :)

I tested the #22 MR and working fine

Before

After

I have tested after applying the the 1st patch (3332729-32.patch)
https://www.drupal.org/project/drupal/issues/3332729 📌 Refactor Claro's vertical-tabs stylesheet Fixed
the issue appears
before patch

after patch

issue resolved with the current MR

Not able to reproducible it attaching screenshot below. can you please share the steps in brief so to that i can look and fix it.

@smustgrave Interdiff added

working on it

Hi @starshaped
In the last commit (7a272525 - Cleaned up CSS) you removed logical property and wrote normal css in place of that.
But I think this is wrong approach as in the Proposed resolution they asked to Use CSS Logical Properties where appropriate. :)

Tested the patch #52 which is is showing fail testing,
It is applying cleanly.I think failure is not related to patch

Rerolling the patch #23 failed due to linting issue.

@smustgrave Pcss.css not generating (0 2px 4px rgba(0, 0, 0, 0.1) into rem after compilation. I tasted in my local the output was 0 2px 0.25rem rgba(0, 0, 0, 0.1);.
you can also refer the commit #b3156b80

In the commit #75ef2986 PX converted with rem and we can go with that.

Comment #12 addressed in this current patch.
Rem replaced with PX as suggest in the comment #12

working on it to address comment #12

Add the logical properties for
1. Margin,
2. Padding,
3. Border,
4. Border-radius

Working on it to replace normal css to logical properties

Testwed MR #3421

Try to address comment #11 but not able to reproduce the issue.
It's looks good to me attaching the screenshot

RTBC +1

Tested the MR #3425

1. Nesting added
2. Normal css replaced with Logical Properties
3. Selector change reverted in the commit 3

Tested UI manually Nothing looks like broken

RTBC +1

I have tested the MR #3822,
Confirm password variables now shifted into local scope from :root

Nothing broken in the UI side

Week

Fair

Good

Strong

Tested the Patch #8,
Nesting and logical properties both are looking good to me.
patch applied cleanly, tested the UI manually nothing look like broken

RTBC +

Working on it

I had verified this issue with Drupal latest version 10. and It's looking fine attaching the screenshot bellow