Bartik footer block menu-item misaligned in RTL

Thank you @munzirtaha for finding the visual bug. I reviewed your patch and noticed a few improvements that need to be made. See below.

1. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -159,6 +159,9 @@
    .site-footer__bottom .menu {
      padding: 0;
    }
   +[dir="rtl"] .site-footer__bottom .menu {
   +  padding: 0;
   +}
   

   From only reviewing the code it looks like there is absolutely no need to add a RTL rule here. The LTR style does not warrant it. However from inspecting the browser we see that we are forced to add this style regardless of the browser being set to LTR or RTL to override a style being set by block.css

   See screenshot of inspected code:
    
   

   Therefore adding the RTL style is valid in this case. But please can you add a comment on a line above the padding:0; saying the following...
   /* This is required to win over specifity of <em>*insert selector*</em> */

   This is to help people who look at the code and can't automatically understand why we have added that style in.

   Also I will raise a follow up issue to deal with the code in block.css it is causing issues all over the place.

2. +++ b/core/themes/bartik/css/components/site-footer.css
   @@ -184,6 +187,5 @@
    [dir="rtl"] .site-footer__bottom .menu-item:last-child a {
      padding-left: 0;
   -  padding-right: 12px;
      border-left: none;
    }
   -- 
   

   We should not remove the padding here as it's needed to add spacing for all other menu items after the 1st one. Add another menu item to the Footer menu to test this out. See screenshot below.
    
   

   Can you please remove this change from the next patch.

Made the suggested edits

Oh I am so sorry I didn't spot the <em> tags within the comment I suggested, I wrapped it in a code tag on Drupal.org last minute and they showed up. Please can you remove them? Thank you so much.

Here it is!

Oh. Thanks for the contribution. It 's what I was looking for.

I think, need to remove padding-top for menu-item and for [dir="rtl"] .site-footer .menu remove padding-right;

Renamed pach for #11 comment.

I reviewed the patch in #6 and agree with @munzirtaha that yes the solution does not fix one menu item only. Yes we should remove either the first-child or last-child styles as they are conflicting.

I will review the patch in #9 now.

@Chernous_dn in future can you please create a patch from the most recent patch in the issue. Your patch contains a different solution to the patch before which had valid things to keep for this issue. Thanks.

Thanks all for your work in this issue!

The patch in #9 fixes the horizontal alignment issue of the footer menu when the site is set to RTL. I am very happy with this approach.

Screenshots.

 

 

 

 

 

 
Block.css having to much specificity in Bartik will be dealt with in this issue #2509902: Remove block.css list styles and add the code to other components..

The vertical alignment of the footer menu is not relevant to this issue and will be fixed in this issue #2509890: Fix footer menus in Bartik being vertically misaligned if you have +1 items.. @Chernous_dn the work in your patches is applicable to that problem and not the one in this issue, so you can post your work there and I will review it also :)

Please note: Patch 9 to review for commit

#11 and #14 do not contain any work we need for this issue and focus on vertical alignment only. Please review the patch in Comment #9 please.

#9 needs a reroll and new screenshots in light of #2470233: Fix the visual bugs in the Bartik footer.

Re-rolled the patch. Auto-merged with no conflicts.

This issue #2548805: Add sensible base layout styles for lists in Bartik. tidied up and fixed a lot of list issues in Bartik. The problem in this issue is no longer occurring.