/*! * Bootstrap 4 RTL Overrides for Arabic * This file provides RTL support for Bootstrap 4 components * when used with */ /* ===== Base ===== */ [dir="rtl"] { text-align: right; } /* ===== Grid System ===== */ [dir="rtl"] .row { flex-direction: row-reverse; } /* ===== Navbar ===== */ [dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .navbar-nav { padding-right: 0; } [dir="rtl"] .navbar-nav .nav-link { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .navbar-collapse { text-align: right; } /* ===== Dropdown ===== */ [dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } [dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; } [dir="rtl"] .dropright .dropdown-menu { top: 0; right: 100%; left: auto; margin-right: 0.125rem; margin-left: 0; } [dir="rtl"] .dropleft .dropdown-menu { top: 0; left: 100%; right: auto; margin-left: 0.125rem; margin-right: 0; } /* ===== Breadcrumb ===== */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: 0.5rem; content: "/"; } /* ===== Pagination ===== */ [dir="rtl"] .pagination { padding-right: 0; } [dir="rtl"] .page-item:first-child .page-link { margin-left: -1px; margin-right: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } [dir="rtl"] .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } /* ===== Input Group ===== */ [dir="rtl"] .input-group > .form-control + .form-control, [dir="rtl"] .input-group > .form-control + .custom-select, [dir="rtl"] .input-group > .form-control + .custom-file, [dir="rtl"] .input-group > .custom-select + .form-control, [dir="rtl"] .input-group > .custom-select + .custom-select, [dir="rtl"] .input-group > .custom-select + .custom-file, [dir="rtl"] .input-group > .custom-file + .form-control, [dir="rtl"] .input-group > .custom-file + .custom-select, [dir="rtl"] .input-group > .custom-file + .custom-file { margin-left: 0; margin-right: -1px; } [dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } [dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } [dir="rtl"] .input-group > .input-group-prepend > .btn, [dir="rtl"] .input-group > .input-group-prepend > .input-group-text, [dir="rtl"] .input-group > .input-group-append:not(:last-child) > .btn, [dir="rtl"] .input-group > .input-group-append:not(:last-child) > .input-group-text, [dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), [dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { border-radius: 0; } [dir="rtl"] .input-group > .input-group-prepend:first-child > .btn:not(:first-child), [dir="rtl"] .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ===== Modal ===== */ [dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; } [dir="rtl"] .modal-footer > :not(:first-child) { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .modal-footer > :not(:last-child) { margin-right: 0; margin-left: 0.25rem; } /* ===== Alert ===== */ [dir="rtl"] .alert-dismissible { padding-right: 1.25rem; padding-left: 4rem; } [dir="rtl"] .alert-dismissible .close { right: auto; left: 0; } /* ===== List Group ===== */ [dir="rtl"] .list-group { padding-right: 0; } /* ===== Button Group ===== */ [dir="rtl"] .btn-group > .btn-group:not(:last-child) > .btn, [dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn, [dir="rtl"] .btn-group > .btn:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] .btn-group > .btn:first-child { margin-left: -1px; margin-right: 0; } /* ===== Card ===== */ [dir="rtl"] .card-link + .card-link { margin-left: 0; margin-right: 1.25rem; } /* ===== Media Object ===== */ [dir="rtl"] .media > .media-body { text-align: right; } /* ===== Carousel ===== */ [dir="rtl"] .carousel-control-prev { left: auto; right: 0; } [dir="rtl"] .carousel-control-next { right: auto; left: 0; } [dir="rtl"] .carousel-item { transition: transform 0.6s ease; } [dir="rtl"] .carousel-item-next:not(.carousel-item-left), [dir="rtl"] .active.carousel-item-right { transform: translateX(100%); } [dir="rtl"] .carousel-item-prev:not(.carousel-item-right), [dir="rtl"] .active.carousel-item-left { transform: translateX(-100%); } /* ===== Tooltip / Popover ===== */ [dir="rtl"] .tooltip { text-align: right; } [dir="rtl"] .popover { text-align: right; } [dir="rtl"] .popover-header { text-align: right; } /* ===== Custom Controls ===== */ [dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .custom-control-label::before, [dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; } /* ===== Forms ===== */ [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; } [dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; } [dir="rtl"] .form-check-label { text-align: right; } /* ===== Tables ===== */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] .table-bordered th, [dir="rtl"] .table-bordered td { border-left: 0; border-right: 1px solid #dee2e6; } /* ===== Toast ===== */ [dir="rtl"] .toast-header .close { margin-left: -0.25rem; margin-right: 0.25rem; } /* ===== Close Button ===== */ [dir="rtl"] .close { float: left; } /* ===== Utilities: Text Alignment ===== */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .text-center { text-align: center !important; } /* ===== Utilities: Float ===== */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } /* ===== Utilities: Margin / Padding ===== */ [dir="rtl"] .mr-0 { margin-right: 0 !important; margin-left: 0 !important; } [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-0 { margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; } [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; } [dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; } /* ===== Utilities: Border Radius ===== */ [dir="rtl"] .rounded-left { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } [dir="rtl"] .rounded-right { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }