You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
7.3 KiB
367 lines
7.3 KiB
// ================================================================================================ |
|
// File Name: custom-rtl.scss |
|
// Description: RTL support SCSS file. |
|
// ---------------------------------------------------------------------------------------------- |
|
// Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template |
|
// Author: PIXINVENT |
|
// Author URL: http://www.themeforest.net/user/pixinvent |
|
// ================================================================================================ |
|
|
|
// Variables |
|
// ------------------------------ |
|
|
|
@import 'bootstrap-extended/include'; // Bootstrap includes |
|
@import 'components/include'; // Components includes |
|
|
|
pre, |
|
code, |
|
kbd, |
|
samp { |
|
direction: ltr; |
|
} |
|
// Align icons position |
|
.main-menu { |
|
.navigation li > a > svg, |
|
.navigation li > a > i, |
|
.dropdown-menu svg, |
|
.dropdown-menu i, |
|
.dropdown-user > a > svg, |
|
.dropdown-user > a > i, |
|
.navigation > li > a > svg, |
|
.navigation > li > a > i { |
|
float: right; |
|
} |
|
|
|
.navigation > li ul li > a { |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
[type='tel'], |
|
[type='url'], |
|
[type='email'], |
|
[type='number'] { |
|
direction: rtl; |
|
} |
|
|
|
// Transformed menu icons |
|
.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after, |
|
.vertical-layout.vertical-overlay-menu.menu-open .main-menu .navigation li.has-sub > a:after { |
|
transform: rotate(180deg); |
|
} |
|
.vertical-layout.vertical-menu-modern.menu-expanded |
|
.main-menu |
|
.navigation |
|
li.has-sub.open:not(.menu-item-closing) |
|
> a:after { |
|
transform: rotate(90deg); |
|
} |
|
|
|
// Horizontal menu |
|
.horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-toggle::after { |
|
background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $body-color), '#', '%23')); |
|
} |
|
|
|
// Dropdown RTL Changes |
|
.header-navbar .navbar-container ul.nav li.dropdown { |
|
.dropdown-menu { |
|
&::before { |
|
top: 1px; |
|
} |
|
} |
|
} |
|
|
|
.header-navbar { |
|
.dropdown, |
|
.dropup { |
|
.dropdown-menu.dropdown-menu-end::before { |
|
right: auto; |
|
left: 0.5rem; |
|
} |
|
} |
|
} |
|
|
|
.dropdown, |
|
.dropup, |
|
.btn-group { |
|
.dropdown-menu { |
|
right: auto !important; |
|
left: auto !important; |
|
|
|
&.dropdown-menu-end { |
|
left: 0 !important; |
|
|
|
&::before { |
|
right: 0.6rem; |
|
left: auto; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.dropstart { |
|
.dropdown-toggle { |
|
&::before { |
|
background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $white), '#', '%23')) !important; |
|
} |
|
} |
|
.dropdown-menu { |
|
margin-right: $dropdown_spacing !important; |
|
} |
|
} |
|
|
|
.dropend { |
|
.dropdown-toggle { |
|
&::after { |
|
background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $white), '#', '%23')) !important; |
|
} |
|
} |
|
.dropdown-menu { |
|
left: 0 !important; |
|
margin-left: $dropdown_spacing !important; |
|
} |
|
} |
|
|
|
// BS Toast |
|
.toast { |
|
right: auto; |
|
} |
|
|
|
// Select2 |
|
.select2-container--default .select2-selection--single .select2-selection__arrow { |
|
left: 1px; |
|
} |
|
.select2-container--default .select2-selection--multiple .select2-selection__choice { |
|
float: right; |
|
} |
|
.select2-search__field { |
|
direction: rtl; |
|
} |
|
.select2, |
|
.select2-container { |
|
text-align: right; |
|
} |
|
|
|
.apexcharts-canvas .apexcharts-text.apexcharts-yaxis-label { |
|
transform: translate(14px, 0); |
|
} |
|
|
|
// Chartist |
|
.chartjs-render-monitor { |
|
margin-right: 1rem; |
|
} |
|
|
|
// Datatable |
|
div.dataTables_wrapper div.dataTables_filter { |
|
text-align: left !important; |
|
} |
|
table.dataTable thead .sorting:before, |
|
table.dataTable thead .sorting_asc:before, |
|
table.dataTable thead .sorting_desc:before { |
|
right: 0.45rem; |
|
} |
|
|
|
// Datatable responsive modal |
|
.dtr-modal .dtr-modal-close { |
|
left: 6px; |
|
right: auto !important; |
|
} |
|
|
|
// Avatar group |
|
.avatar-group { |
|
// Avatar Group Sizings |
|
.avatar { |
|
margin-right: -0.785rem; |
|
margin-left: 0; |
|
} |
|
.avatar-sm { |
|
margin-right: -0.65rem; |
|
} |
|
.avatar-lg { |
|
margin-right: -1.5rem; |
|
} |
|
.avatar-xl { |
|
margin-right: -1.85rem; |
|
} |
|
} |
|
|
|
// Breadcrumb |
|
.breadcrumb:not([class*='breadcrumb-']), |
|
.breadcrumb.breadcrumb-chevron { |
|
.breadcrumb-item + .breadcrumb-item { |
|
&:before { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
|
|
// Pagination |
|
.pagination .page-item { |
|
&.prev-item, |
|
&.prev, |
|
&.previous { |
|
.page-link { |
|
&:before { |
|
transform: rotate(180deg); |
|
} |
|
&:hover, |
|
&:active { |
|
&:before { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
&.disabled { |
|
.page-link { |
|
&:before { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&.next-item, |
|
&.next { |
|
.page-link { |
|
&:after { |
|
transform: rotate(180deg); |
|
} |
|
&:hover, |
|
&:active { |
|
&:after { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
&.disabled { |
|
.page-link { |
|
&:before { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
code[class*='language-'], |
|
pre[class*='language-'] { |
|
direction: ltr; |
|
} |
|
|
|
@media print { |
|
code[class*='language-'], |
|
pre[class*='language-'] { |
|
text-shadow: none; |
|
} |
|
} |
|
|
|
// Calendar |
|
.fc .fc-header-toolbar .fc-right .fc-button.fc-prev-button .fc-icon { |
|
right: 4px !important; |
|
} |
|
|
|
.fc .fc-header-toolbar .fc-right .fc-button.fc-next-button .fc-icon { |
|
left: -3px !important; |
|
} |
|
|
|
// Popover & Tooltip |
|
.bs-popover-start .popover-arrow::before, |
|
.bs-tooltip-start .tooltip-arrow::before, |
|
.bs-popover-auto[data-popper-placement^='left'] .popover-arrow::before { |
|
border-width: 0.4rem 0 0.4rem 0.4rem; |
|
border-left-color: $tooltip-bg; |
|
left: -1px; |
|
} |
|
.bs-tooltip-start .tooltip-arrow::before { |
|
left: -6px; |
|
} |
|
.bs-popover-start > .popover-arrow::after, |
|
.bs-tooltip-start > .tooltip-arrow::after { |
|
left: -1px; |
|
border-width: 0.4rem 0 0.4rem 0.4rem; |
|
border-left-color: $tooltip-color; |
|
} |
|
.bs-popover-start .popover-arrow, |
|
.bs-tooltip-start .tooltip-arrow, |
|
.bs-popover-auto[data-popper-placement^='left'] .popover-arrow { |
|
right: auto; |
|
left: 100%; |
|
} |
|
|
|
.bs-popover-end .popover-arrow::before, |
|
.bs-tooltip-end .tooltip-arrow::before, |
|
.bs-popover-auto[data-popper-placement^='right'] .popover-arrow::before { |
|
border-width: 0.4rem 0.4rem 0.4rem 0; |
|
border-right-color: $tooltip-bg; |
|
right: -1px; |
|
} |
|
.bs-tooltip-end .tooltip-arrow::before { |
|
right: -6px; |
|
} |
|
.bs-popover-end > .popover-arrow::after, |
|
.bs-tooltip-end > .tooltip-arrow::after { |
|
right: -1px; |
|
border-width: 0.4rem 0.4rem 0.4rem 0; |
|
border-right-color: $tooltip-color; |
|
} |
|
.bs-popover-end .popover-arrow, |
|
.bs-tooltip-end .tooltip-arrow, |
|
.bs-popover-auto[data-popper-placement^='right'] .popover-arrow { |
|
left: auto; |
|
right: 100%; |
|
} |
|
|
|
// Perfect scrollbar RTL fix |
|
body .ps__rail-y { |
|
right: auto !important; |
|
left: 1px !important; |
|
} |
|
|
|
// FAQ and Pricing page |
|
.faq-navigation img, |
|
.pricing-free-trial .pricing-trial-img { |
|
transform: scaleX(-1); |
|
} |
|
|
|
.feather-chevron-left, |
|
.feather-chevron-right { |
|
transform: rotate(-180deg) !important; |
|
} |
|
|
|
// Kanban |
|
.kanban-application { |
|
.kanban-container { |
|
.kanban-item { |
|
i, |
|
svg { |
|
margin-right: 0 !important; |
|
margin-left: 0.25rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Invoice List |
|
.invoice-list-wrapper { |
|
.dataTables_filter { |
|
input { |
|
margin-left: 0 !important; |
|
margin-right: 0.5rem; |
|
} |
|
} |
|
|
|
.dropdown .dropdown-menu.dropdown-menu-end { |
|
left: 2rem !important; |
|
} |
|
} |
|
|
|
// File Manager |
|
.file-manager-application { |
|
.sidebar-file-manager { |
|
.sidebar-inner { |
|
.my-drive .jstree-node.jstree-closed > .jstree-icon { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
}
|
|
|