Fix RTL errors

[shabib-m]

fix RTL error in tobar

gin\dist\css\layout/gin_admin_bar.css:44
delete

`[dir="ltr"] #admin-bar {
inset-inline-start: 0;
text-align: start;
}

[dir="rtl"] #admin-bar {
inset-inline-start: 0;
/* text-align: end; */
}`

add
inset-inline-start: 0; text-align: start;
to
gin\dist\css\layout/gin_admin_bar.css:24

#admin-bar { font-family: var(--gin-font); font-size: small; background: var(--gin-color-contextual); box-shadow: none; min-height: var(--gin-toolbar-y-offset); top: 0; position: absolute; width: 100%; line-height: 1; padding: 0; margin: 0; z-index: 999; }

[laryn]

Thank you @shabib-m -- it looks like some CSS that is not using logical properties snuck in in a few places. Thanks for the catch! I made a PR linked above. Are you comfortable testing that PR and letting me know how it looks? If not I think I can merge it in as is just with my own review, but if possible it would be great to get your input.

[shabib-m]

With pleasure @laryn pr#184 It's working perfectly.
but could you please wait until all the errors in the toolbar are fixed with rtl?

fix Third-and-above-level lists. with rtl

edit
gin\dist\css\layout/gin_admin_bar.css:499 and 505

`[dir="ltr"] #admin-bar .dropdown li li.expandable ul {
margin-block: -32px 0;
margin-inline: 180px 0;
border-radius: 0 var(--gin-border-s) var(--gin-border-s) 0;
}

[dir="rtl"] #admin-bar .dropdown li li.expandable ul {
margin-block: -32px 0;
margin-inline: 0 180px;
border-radius: var(--gin-border-s) 0 0 var(--gin-border-s);
}`

just delete
margin-inline: 180px 0;
and
margin-inline: 0 180px;

add after Third-and-above-level lists. line:497
#admin-bar .dropdown li li.expandable ul { margin-inline: 180px 0; }

[laryn]

I just pushed some more changes to the PR. Let me know how things are looking on your end.

[shabib-m]

pr#184 It's working perfectly.
but (More tasks) needs more work

show icon work with rtl & ltr

edit
gin\dist\css\layout/gin_admin_bar.css:83

#admin-bar #admin-bar-icon .icon::before,
#admin-bar #admin-bar-extra .dropdown > li > span::before,
#admin-bar #admin-bar-extra .dropdown > li > a::before,
#admin-bar #admin-bar-menu > li > .dropdown > li > a::before,
#admin-bar #admin-bar-menu.dropdown li > span.menu::before {
  content: "";
  float: inline-start;
  display: block;
  width: 16px;
  height: 16px;
  margin-inline-end: var(--gin-spacing-xs);
  background-color: var(--gin-color-text);
  -webkit-mask-position: center center;
          mask-position: center center;
}

to

#admin-bar #admin-bar-icon .icon::before,
#admin-bar #admin-bar-extra.dropdown > li > span.extra::before,
#admin-bar #admin-bar-extra .dropdown > li > a::before,
#admin-bar #admin-bar-menu > li > .dropdown > li > a::before,
#admin-bar #admin-bar-menu.dropdown li > span.menu::before {
  content: "";
  float: inline-start;
  display: block;
  width: 16px;
  height: 16px;
  margin-inline-end: var(--gin-spacing-xs);
  background-color: var(--gin-color-text);
  -webkit-mask-position: center center;
          mask-position: center center;
}

[shabib-m]

show icon form-search in more tasks work with rtl & ltr

edit
gin\dist\css\layout/gin_admin_bar.css:261

#admin-bar .form-type-search::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: var(--gin-icon-size-toolbar);
  background-color: var(--gin-color-text);
  -webkit-mask-image: url("../../media/sprite.svg#search-view");
          mask-image: url("../../media/sprite.svg#search-view");
  -webkit-mask-position: center right;
          mask-position: center right;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin-block-start: calc((var(--gin-toolbar-height) - var(--gin-icon-size-toolbar)) / 2 + 1px);
  margin-block-end: calc((var(--gin-toolbar-height) - var(--gin-icon-size-toolbar)) / 2 + 1px);
  margin-inline-end: var(--gin-spacing-m);
}

just add height

#admin-bar .form-type-search::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: var(--gin-icon-size-toolbar);
height: var(--gin-icon-size-toolbar);
  background-color: var(--gin-color-text);
  -webkit-mask-image: url("../../media/sprite.svg#search-view");
          mask-image: url("../../media/sprite.svg#search-view");
  -webkit-mask-position: center right;
          mask-position: center right;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin-block-start: calc((var(--gin-toolbar-height) - var(--gin-icon-size-toolbar)) / 2 + 1px);
  margin-block-end: calc((var(--gin-toolbar-height) - var(--gin-icon-size-toolbar)) / 2 + 1px);
  margin-inline-end: var(--gin-spacing-m);
}

[laryn]

@shabib-m Ready for another review with the latest on the PR.

[shabib-m]

@laryn perfect and fix Third-and-above-level lists with more task.
just need fix border-radius in admin-bar-extra

[dir="ltr"] #admin-bar #admin-bar-extra.dropdown li li.expandable ul {
  border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
}
[dir="rtl"] #admin-bar #admin-bar-extra.dropdown li li.expandable ul {
  border-radius: 0 var(--gin-border-s) var(--gin-border-s) 0;
}

[laryn]

@shabib-m And again?

Thanks for your help on this!