custom-rtl.scss 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. // ================================================================================================
  2. // File Name: custom-rtl.scss
  3. // Description: RTL support SCSS file.
  4. // ----------------------------------------------------------------------------------------------
  5. // Item Name: Vuexy - Vuejs, React, Angular, HTML & Laravel Admin Dashboard Template
  6. // Author: PIXINVENT
  7. // Author URL: http://www.themeforest.net/user/pixinvent
  8. // ================================================================================================
  9. // Variables
  10. // ------------------------------
  11. @import 'bootstrap-extended/include'; // Bootstrap includes
  12. @import 'components/include'; // Components includes
  13. // Align icons position
  14. .main-menu {
  15. .navigation li > a > svg,
  16. .navigation li > a > i,
  17. .dropdown-menu svg,
  18. .dropdown-menu i,
  19. .dropdown-user > a > svg,
  20. .dropdown-user > a > i,
  21. .navigation > li > a > svg,
  22. .navigation > li > a > i {
  23. float: right;
  24. }
  25. .navigation > li ul li > a {
  26. display: flex;
  27. align-items: center;
  28. }
  29. }
  30. // Transformed menu icons
  31. .vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after,
  32. .vertical-layout.vertical-overlay-menu.menu-open .main-menu .navigation li.has-sub > a:after {
  33. transform: rotate(180deg);
  34. }
  35. .vertical-layout.vertical-menu-modern.menu-expanded
  36. .main-menu
  37. .navigation
  38. li.has-sub.open:not(.menu-item-closing)
  39. > a:after {
  40. transform: rotate(90deg);
  41. }
  42. // Horizontal menu
  43. .horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-toggle::after {
  44. background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $body-color), '#', '%23'));
  45. }
  46. // Dropdown RTL Changes
  47. .header-navbar .navbar-container ul.nav li.dropdown {
  48. .dropdown-menu {
  49. top: 41px !important;
  50. &::before {
  51. top: 1px;
  52. }
  53. }
  54. }
  55. .header-navbar {
  56. .dropdown,
  57. .dropup {
  58. .dropdown-menu.dropdown-menu-right::before {
  59. right: auto;
  60. left: 0.5rem;
  61. }
  62. }
  63. }
  64. .dropdown,
  65. .dropup,
  66. .btn-group {
  67. .dropdown-menu {
  68. right: auto !important;
  69. top: 0 !important;
  70. left: auto !important;
  71. &.dropdown-menu-right {
  72. left: 0 !important;
  73. &::before {
  74. right: 0.6rem;
  75. left: auto;
  76. }
  77. }
  78. }
  79. }
  80. .dropleft {
  81. .dropdown-toggle {
  82. &::before {
  83. background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $white), '#', '%23')) !important;
  84. }
  85. }
  86. .dropdown-menu {
  87. left: 0 !important;
  88. margin-left: 0;
  89. margin-right: 0.5rem;
  90. }
  91. }
  92. .dropright {
  93. .dropdown-toggle {
  94. &::after {
  95. background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $white), '#', '%23')) !important;
  96. }
  97. }
  98. .dropdown-menu {
  99. left: 0 !important;
  100. margin-right: 0;
  101. margin-left: 0.5rem;
  102. }
  103. }
  104. // Input Group dropdown
  105. .input-group {
  106. .dropdown-menu.show {
  107. top: 0 !important;
  108. right: auto !important;
  109. left: 0px !important;
  110. }
  111. }
  112. // BS Toast
  113. .toast {
  114. right: 1rem;
  115. }
  116. // Select2
  117. .select2-container--default .select2-selection--single .select2-selection__arrow {
  118. left: 1px;
  119. }
  120. .select2-container--default .select2-selection--multiple .select2-selection__choice {
  121. float: right;
  122. }
  123. .select2-search__field {
  124. direction: rtl;
  125. }
  126. .apexcharts-canvas .apexcharts-text.apexcharts-yaxis-label{
  127. transform: translate(14px, 0);
  128. }
  129. // Chartist
  130. .chartjs-render-monitor {
  131. margin-right: 1rem;
  132. }
  133. // Datatable
  134. div.dataTables_wrapper div.dataTables_filter {
  135. text-align: left !important;
  136. }
  137. table.dataTable thead .sorting:before,
  138. table.dataTable thead .sorting_asc:before,
  139. table.dataTable thead .sorting_desc:before {
  140. right: 0.45rem;
  141. }
  142. // Avatar group
  143. .avatar-group {
  144. // Avatar Group Sizings
  145. .avatar {
  146. margin-right: -0.785rem;
  147. margin-left: 0;
  148. }
  149. .avatar-sm {
  150. margin-right: -0.65rem;
  151. }
  152. .avatar-lg {
  153. margin-right: -1.5rem;
  154. }
  155. .avatar-xl {
  156. margin-right: -1.85rem;
  157. }
  158. }
  159. // Breadcrumb
  160. .breadcrumb:not([class*='breadcrumb-']),
  161. .breadcrumb.breadcrumb-chevron {
  162. .breadcrumb-item + .breadcrumb-item {
  163. &:before {
  164. transform: rotate(180deg);
  165. }
  166. }
  167. }
  168. // Pagination
  169. .pagination .page-item {
  170. &.prev-item,
  171. &.prev,
  172. &.previous {
  173. .page-link {
  174. &:before {
  175. transform: rotate(180deg);
  176. }
  177. &:hover,
  178. &:active {
  179. &:before {
  180. transform: rotate(180deg);
  181. }
  182. }
  183. }
  184. &.disabled {
  185. .page-link {
  186. &:before {
  187. transform: rotate(180deg);
  188. }
  189. }
  190. }
  191. }
  192. &.next-item,
  193. &.next {
  194. .page-link {
  195. &:after {
  196. transform: rotate(180deg);
  197. }
  198. &:hover,
  199. &:active {
  200. &:after {
  201. transform: rotate(180deg);
  202. }
  203. }
  204. }
  205. &.disabled {
  206. .page-link {
  207. &:before {
  208. transform: rotate(180deg);
  209. }
  210. }
  211. }
  212. }
  213. }
  214. code[class*='language-'],
  215. pre[class*='language-'] {
  216. direction: ltr;
  217. }
  218. @media print {
  219. code[class*='language-'],
  220. pre[class*='language-'] {
  221. text-shadow: none;
  222. }
  223. }
  224. // Calendar
  225. .fc .fc-header-toolbar .fc-right .fc-button.fc-prev-button .fc-icon {
  226. right: 4px !important;
  227. }
  228. .fc .fc-header-toolbar .fc-right .fc-button.fc-next-button .fc-icon {
  229. left: -3px !important;
  230. }
  231. // carousel changes
  232. .carousel-control-next {
  233. left: auto;
  234. right: 0;
  235. }
  236. .carousel-control-prev {
  237. left: 0;
  238. right: auto;
  239. }
  240. // Tooltip
  241. .bs-tooltip-left .arrow::before,
  242. .bs-tooltip-auto[x-placement^='left'] .arrow::before {
  243. border-width: 0.4rem 0 0.4rem 0.4rem;
  244. border-left-color: $tooltip-bg;
  245. }
  246. .bs-tooltip-left .arrow,
  247. .bs-tooltip-auto[x-placement^='left'] .arrow {
  248. right: 0;
  249. left: auto;
  250. }
  251. .bs-tooltip-right .arrow::before,
  252. .bs-tooltip-auto[x-placement^='right'] .arrow::before {
  253. border-width: 0.4rem 0.4rem 0.4rem 0;
  254. border-right-color: $tooltip-bg;
  255. }
  256. .bs-tooltip-right .arrow,
  257. .bs-tooltip-auto[x-placement^='right'] .arrow {
  258. left: 0;
  259. right: auto;
  260. }
  261. // Popover Style
  262. .popover {
  263. right: auto !important;
  264. }
  265. // Progress
  266. .progress-bar-animated {
  267. animation: progress-bar-stripes 40s linear infinite;
  268. }
  269. // Perfect scrollbar RTL fix
  270. body .ps__rail-y {
  271. right: auto !important;
  272. left: 1px !important;
  273. }
  274. // FAQ and Pricing page
  275. .faq-navigation img,
  276. .pricing-free-trial .pricing-trial-img {
  277. transform: scaleX(-1);
  278. }
  279. .feather-chevron-left,
  280. .feather-chevron-right {
  281. transform: rotate(-180deg) !important;
  282. }
  283. // Kanban
  284. .kanban-application {
  285. .kanban-container {
  286. .kanban-item {
  287. i,
  288. svg {
  289. margin-right: 0 !important;
  290. margin-left: 0.25rem;
  291. }
  292. }
  293. }
  294. }
  295. // Invoice List
  296. .invoice-list-wrapper {
  297. .dataTables_filter {
  298. input {
  299. margin-left: 0 !important;
  300. margin-right: 0.5rem;
  301. }
  302. }
  303. .dropdown .dropdown-menu.dropdown-menu-right {
  304. left: 2rem !important;
  305. }
  306. }
  307. // File Manager
  308. .file-manager-application {
  309. .sidebar-file-manager {
  310. .sidebar-inner {
  311. .my-drive .jstree-node.jstree-closed > .jstree-icon {
  312. transform: rotate(180deg);
  313. }
  314. }
  315. }
  316. }