/** * Direction Utilities for RTL/LTR Support * * This file provides CSS utilities for proper RTL (Right-to-Left) and LTR (Left-to-Right) * layout support. It handles text alignment, flexbox direction, margins, padding, and more. * * Usage: * - The tag receives dir="ltr" or dir="rtl" attribute * - The tag receives class="dir-ltr" or class="dir-rtl" * - These utilities automatically adjust layout based on direction */ /* ─── Base Direction ────────────────────────────────────────────────────── */ .dir-ltr { direction: ltr; text-align: left; } .dir-rtl { direction: rtl; text-align: right; } /* ─── Text Alignment Overrides ─────────────────────────────────────────── */ .dir-rtl .text-start { text-align: right !important; } .dir-rtl .text-end { text-align: left !important; } .dir-ltr .text-start { text-align: left !important; } .dir-ltr .text-end { text-align: right !important; } /* ─── Flexbox Direction ────────────────────────────────────────────────── */ .dir-rtl .flex-row { flex-direction: row-reverse !important; } .dir-rtl .flex-row-reverse { flex-direction: row !important; } /* ─── Margin Utilities ─────────────────────────────────────────────────── */ /* Margin Start (left in LTR, right in RTL) */ .dir-rtl .ms-auto { margin-left: 0 !important; margin-right: auto !important; } .dir-rtl .ms-0 { margin-right: 0 !important; margin-left: auto; } .dir-rtl .ms-1 { margin-right: 0.25rem !important; margin-left: auto; } .dir-rtl .ms-2 { margin-right: 0.5rem !important; margin-left: auto; } .dir-rtl .ms-3 { margin-right: 1rem !important; margin-left: auto; } .dir-rtl .ms-4 { margin-right: 1.5rem !important; margin-left: auto; } .dir-rtl .ms-5 { margin-right: 3rem !important; margin-left: auto; } /* Margin End (right in LTR, left in RTL) */ .dir-rtl .me-auto { margin-right: 0 !important; margin-left: auto !important; } .dir-rtl .me-0 { margin-left: 0 !important; margin-right: auto; } .dir-rtl .me-1 { margin-left: 0.25rem !important; margin-right: auto; } .dir-rtl .me-2 { margin-left: 0.5rem !important; margin-right: auto; } .dir-rtl .me-3 { margin-left: 1rem !important; margin-right: auto; } .dir-rtl .me-4 { margin-left: 1.5rem !important; margin-right: auto; } .dir-rtl .me-5 { margin-left: 3rem !important; margin-right: auto; } /* ─── Padding Utilities ────────────────────────────────────────────────── */ /* Padding Start (left in LTR, right in RTL) */ .dir-rtl .ps-0 { padding-right: 0 !important; padding-left: auto; } .dir-rtl .ps-1 { padding-right: 0.25rem !important; padding-left: auto; } .dir-rtl .ps-2 { padding-right: 0.5rem !important; padding-left: auto; } .dir-rtl .ps-3 { padding-right: 1rem !important; padding-left: auto; } .dir-rtl .ps-4 { padding-right: 1.5rem !important; padding-left: auto; } .dir-rtl .ps-5 { padding-right: 3rem !important; padding-left: auto; } /* Padding End (right in LTR, left in RTL) */ .dir-rtl .pe-0 { padding-left: 0 !important; padding-right: auto; } .dir-rtl .pe-1 { padding-left: 0.25rem !important; padding-right: auto; } .dir-rtl .pe-2 { padding-left: 0.5rem !important; padding-right: auto; } .dir-rtl .pe-3 { padding-left: 1rem !important; padding-right: auto; } .dir-rtl .pe-4 { padding-left: 1.5rem !important; padding-right: auto; } .dir-rtl .pe-5 { padding-left: 3rem !important; padding-right: auto; } /* ─── Border Radius ────────────────────────────────────────────────────── */ .dir-rtl .rounded-start { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; } .dir-rtl .rounded-end { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important; } /* ─── Float ────────────────────────────────────────────────────────────── */ .dir-rtl .float-start { float: right !important; } .dir-rtl .float-end { float: left !important; } /* ─── Position ─────────────────────────────────────────────────────────── */ .dir-rtl .start-0 { right: 0 !important; left: auto !important; } .dir-rtl .start-50 { right: 50% !important; left: auto !important; } .dir-rtl .start-100 { right: 100% !important; left: auto !important; } .dir-rtl .end-0 { left: 0 !important; right: auto !important; } .dir-rtl .end-50 { left: 50% !important; right: auto !important; } .dir-rtl .end-100 { left: 100% !important; right: auto !important; } /* ─── Navbar & Navigation ──────────────────────────────────────────────── */ .dir-rtl .navbar-nav { flex-direction: row-reverse; } .dir-rtl .navbar-brand { margin-right: 0; margin-left: 1rem; } .dir-rtl .dropdown-menu { text-align: right; } .dir-rtl .dropdown-menu-end { right: auto !important; left: 0 !important; } /* ─── Forms ────────────────────────────────────────────────────────────── */ .dir-rtl .form-check { padding-left: 0; padding-right: 1.5em; } .dir-rtl .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } .dir-rtl .form-select { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2.25rem; } /* ─── Buttons & Button Groups ──────────────────────────────────────────── */ .dir-rtl .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } .dir-rtl .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } /* ─── Cards ────────────────────────────────────────────────────────────── */ .dir-rtl .card-img-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .dir-rtl .card-img-right { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } /* ─── Modals ───────────────────────────────────────────────────────────── */ .dir-rtl .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } /* ─── Alerts ───────────────────────────────────────────────────────────── */ .dir-rtl .alert-dismissible .btn-close { left: 0; right: auto; } /* ─── Breadcrumbs ──────────────────────────────────────────────────────── */ .dir-rtl .breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: 0.5rem; content: var(--bs-breadcrumb-divider, "/"); } /* ─── List Groups ──────────────────────────────────────────────────────── */ .dir-rtl .list-group { padding-right: 0; } /* ─── Pagination ───────────────────────────────────────────────────────── */ .dir-rtl .page-link { margin-left: 0; margin-right: -1px; } .dir-rtl .page-item:first-child .page-link { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .dir-rtl .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); } /* ─── Tooltips & Popovers ──────────────────────────────────────────────── */ .dir-rtl .bs-tooltip-start .tooltip-arrow, .dir-rtl .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow { right: 0; left: auto; } .dir-rtl .bs-tooltip-end .tooltip-arrow, .dir-rtl .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow { left: 0; right: auto; } /* ─── Custom Utilities ─────────────────────────────────────────────────── */ /* Force LTR for specific elements (e.g., code blocks, numbers) */ .force-ltr { direction: ltr !important; text-align: left !important; } /* Force RTL for specific elements */ .force-rtl { direction: rtl !important; text-align: right !important; } /* Bidirectional text support */ .bidi-text { unicode-bidi: embed; } /* ─── Icons & Images ───────────────────────────────────────────────────── */ .dir-rtl .icon-flip { transform: scaleX(-1); } /* Flip chevrons and arrows in RTL */ .dir-rtl .ki-arrow-right::before, .dir-rtl .fa-arrow-right::before, .dir-rtl .bi-arrow-right::before { transform: scaleX(-1); display: inline-block; } .dir-rtl .ki-arrow-left::before, .dir-rtl .fa-arrow-left::before, .dir-rtl .bi-arrow-left::before { transform: scaleX(-1); display: inline-block; } /* ─── DataTables RTL Support ───────────────────────────────────────────── */ .dir-rtl .dataTables_wrapper .dataTables_filter { text-align: left; } .dir-rtl .dataTables_wrapper .dataTables_paginate { text-align: left; } .dir-rtl .dataTables_wrapper .dataTables_info { text-align: right; } /* ─── Dashboard language menu ─────────────────────────────────────────────── */ .dashboard-lang-switcher .dashboard-lang-menu .menu-link { color: #3f4254 !important; } .dashboard-lang-switcher .dashboard-lang-menu .menu-link.active { color: #009ef7 !important; background-color: #f1faff !important; } /* ─── Admin / Student panel sidebar (KT Theme) ───────────────────────────── */ /* Metronic fixed sidebar: see public/css/panel-rtl.css (loaded when html[dir="rtl"]). */ .dir-rtl .app-sidebar-logo .app-sidebar-toggle { left: auto !important; right: 100% !important; transform: translate(50%, -50%) rotate(0deg) !important; } .dir-rtl .app-sidebar-menu .menu-item .menu-link { padding-right: 1rem; padding-left: 0.5rem; flex-direction: row-reverse; text-align: right; } .dir-rtl .app-sidebar-menu .menu-item .menu-link .menu-icon { margin-left: 0.75rem; margin-right: 0; } .dir-rtl .app-sidebar-menu .menu-title { text-align: right; } .dir-rtl .card-title, .dir-rtl .card-label, .dir-rtl .card-header .text-gray-400 { text-align: right; } .dir-rtl .app-navbar { flex-direction: row-reverse; } .dir-rtl #kt_app_toolbar .d-flex.flex-stack { flex-direction: row-reverse; } /* ─── Responsive Adjustments ───────────────────────────────────────────── */ @media (max-width: 991.98px) { .dir-rtl .navbar-collapse { text-align: right; } } /* ─── Scroll to top ─────────────────────────────────────────────────────── */ #kt_scrolltop.scrolltop { right: auto; left: auto; inset-inline-end: 1.25rem; inset-inline-start: auto; bottom: 2.5rem; background-color: var(--color-primary, var(--bs-primary, #337ab7)) !important; box-shadow: 0 4px 16px rgba(51, 122, 183, 0.35); opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } #kt_scrolltop.scrolltop .ki-arrow-up, #kt_scrolltop.scrolltop > i, #kt_scrolltop.scrolltop .svg-icon { color: #fff !important; } #kt_scrolltop.scrolltop:hover { background-color: var(--color-primary-hover, var(--bs-primary, #2563a8)) !important; opacity: 1 !important; } #kt_scrolltop.scrolltop:hover .ki-arrow-up, #kt_scrolltop.scrolltop:hover > i, #kt_scrolltop.scrolltop:hover .svg-icon { color: #fff !important; } body[data-kt-scrolltop="on"] #kt_scrolltop.scrolltop { display: flex; opacity: 1; } body[data-kt-scrolltop="on"] #kt_scrolltop.scrolltop:hover { transform: translateY(-2px); } @media (max-width: 991.98px) { #kt_scrolltop.scrolltop { inset-inline-end: 0.9375rem; bottom: 1.875rem; width: 2.25rem; height: 2.25rem; } } /* ─── Print Styles ─────────────────────────────────────────────────────── */ @media print { .dir-rtl { direction: rtl; } .dir-ltr { direction: ltr; } #kt_scrolltop.scrolltop { display: none !important; } }