Added support for RTL languages in dropdowns

This commit is contained in:
Connor Yoh
2025-02-21 16:20:04 +00:00
parent 4704f96f5d
commit a291837d38

View File

@@ -89,10 +89,14 @@
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
} }
.lang-dropdown-item-wrapper { html[dir="ltr"] .lang-dropdown-item-wrapper {
border-right: 2px solid var(--md-sys-color-inverse-surface); border-right: 2px solid var(--md-sys-color-inverse-surface);
} }
html[dir="rtl"] .lang-dropdown-item-wrapper {
border-left: 2px solid var(--md-sys-color-inverse-surface);
}
/* Responsive adjustments */ /* Responsive adjustments */
@media (min-width: 1200px){ @media (min-width: 1200px){
.lang_dropdown-mw{ .lang_dropdown-mw{
@@ -106,7 +110,7 @@
} }
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) { .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
border-right: 0px border: 0px
} }
} }
@@ -115,7 +119,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) { .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
border-right: 0px border: 0px
} }
} }
@media (min-width: 901px) { @media (min-width: 901px) {
@@ -124,7 +128,7 @@
} }
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) { .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) {
border-right: 0px border: 0px
} }
} }
@@ -337,20 +341,34 @@ span.icon-text::after {
} }
/* Dropdown open on hover */ /* Dropdown open on hover */
.dropdown-menu { html[dir="ltr"] .dropdown-menu {
padding-top: 0.5rem; padding-top: 0.5rem;
top: auto; top: auto;
left: auto; left: auto;
right: 0; right: 0;
} }
.dropdown-menu[data-bs-popper] { html[dir="rtl"] .dropdown-menu {
padding-top: 0.5rem;
top: auto;
left: 0;
right: auto;
}
html[dir="ltr"] .dropdown-menu[data-bs-popper] {
top: auto; top: auto;
left: auto; left: auto;
right: 0; right: 0;
margin-top: 0 !important; margin-top: 0 !important;
} }
html[dir="rtl"] .dropdown-menu[data-bs-popper] {
top: auto;
left: 0;
right: auto;
margin-top: 0 !important;
}
.dropdown-menu-wrapper { .dropdown-menu-wrapper {
padding: 1.5rem 0; padding: 1.5rem 0;
border-radius: 1rem; border-radius: 1rem;