/*============================
17. Dark Mode
============================*/
@use "../utils/mixins" as *;
@use '../variables' as *;
[dir="rtl"] {
header {
right: 0;
&.header-one {
right: 0;
}
&.fixed {
right: 0;
}
.header-nav {
.main-menu-wrapper {
@include respond-below(lg) {
right: 0;
left: auto;
@include rounded(10px 0 0 10px);
@include transform(translateX(320px));
}
.main-nav {
>li {
> a {
@include respond-below(lg) {
i {
@include respond-below(lg) {
float: left;
}
}
}
}
&.active {
&.has-submenu {
& > a {
&::after {
right: calc(50% - 6px);
}
}
}
}
.submenu {
li {
a {
@include respond-below(lg) {
padding: 8px 0 8px 20px;
}
&:hover {
padding-right: 20px;
@include respond-below(lg) {
padding-right: 20px;
}
}
}
}
}
}
}
}
}
.navbar-header {
.navbar-brand {
@include respond-below(lg) {
margin-left: 0;
}
}
#mobile_btn {
margin: 0 30px 0 0;
}
}
.main-menu-wrapper {
.main-nav {
&:last-child {
margin-left: 0;
}
> li {
.submenu {
>li {
.submenu {
@include respond-above(lg) {
right: 100%;
padding-right: 0;
}
@include respond-below(lg) {
right: 0;
}
}
}
}
@include respond-above(xxl) {
margin: 0 0 0 30px !important;
&:last-child {
margin: 0;
}
}
@include respond-below(xxl) {
margin: 0 0 0 18px !important;
&:last-child {
margin: 0;
}
}
@include respond-below(xl) {
margin: 0 0 0 10px !important;
&:last-child {
margin: 0;
}
}
@include respond-below(lg) {
margin: 0 !important;
&:last-child {
margin: 0;
}
}
& > a {
&::before {
left: calc(50% - -8px);
}
}
a {
i {
margin: 0 4px 0 0;
}
@include respond-below(lg) {
i {
@include respond-below(lg) {
float: left;
}
}
}
}
&:last-child {
margin-left: 0;
}
@include respond-above(lg) {
margin-left: 30px;
&:last-child {
margin-left: 0;
}
}
@include respond-below(xl) {
margin-left: 20px;
}
&.megamenu {
.mega-submenu {
@include respond-above(lg) {
right: -220px;
}
@include respond-above(xl) {
right: -300px;
}
}
}
& > ul {
@include respond-above(lg) {
right: 0;
@include rounded(0 0 10px 10px);
}
&::before {
@include respond-above(lg) {
border: 7px solid var(--white);
border-color: transparent transparent var(--white) var(--white);
right: 45px;
@include box-shadow(null, -2px, 2px, 2px, -1px, rgba(0, 0, 0, 0.1));
}
}
&.mega-submenu {
@include respond-above(lg) {
right: -100px;
border-radius: 0 0 10px 10px;
}
}
}
&.mega-innermenu {
& > ul {
&.mega-submenu {
.megamenu-wrapper {
border-radius: 0 0 10px 10px;
&::before {
left: 0;
background-position: bottom right;
}
}
ul {
li {
a {
padding: 0 20px 0 0;
&::before {
right: 0;
}
}
}
}
}
}
}
}
@include respond-above(lg) {
li.has-submenu {
&:hover {
>.submenu {
border-radius: 0 0 10px 10px;
}
}
}
}
}
}
}
.menu-opened .main-menu-wrapper {
transform: translateX(0) !important;
}
.menu-wrapper {
@include respond-below(lg) {
right: 0;
transform: translateX(100%);
transform-origin: right center;
}
}
.menu-opened .menu-wrapper {
opacity: 1;
transform: translateX(0%);
}
.megamenu-wrapper {
.single-demo {
a {
@include respond-below(lg) {
padding: 8px 0 8px 20px !important;
}
}
@include respond-below(lg) {
text-align: right;
}
}
.btn {
&:hover {
padding-right: 15px !important;
}
}
}
.menu-img {
margin-right: auto;
margin-left: 0;
}
.sidebar-overlay {
right: 0;
}
.menu-dropdown {
.dropdown {
.dropdown-toggle:after {
left: 12px;
right: auto;
}
}
}
.badge-icon {
left: 2px;
}
.notification-item {
.notification-item-close {
left: 0;
}
.avatar {
margin-left: 12px;
}
.notification-badge {
left: -8px;
}
}
.banner-section {
.banner-img {
text-align: start;
margin-right: 60px;
@include respond-below(xl) {
margin-right: 0;
}
.banner-bg {
left: 0;
}
.banner-bg-01 {
left: 20%;
}
.banner-bg-02 {
left: 5%;
}
.app-view {
left: 15px;
right: auto;
@include respond-below(xxl) {
left: 0;
}
&::before {
right: -2px;
left: auto;
border-color: $white $white transparent transparent;
}
}
}
}
.feature-item {
.feature-icon {
margin: 0 0 0 12px;
}
}
.counter-item {
.counter-icon {
margin: 0 0 0 16px;
}
}
.about-img {
margin: 0 0 0 43px;
@include respond-below(lg) {
margin: 0 0 24px 23px;
}
.about-exp {
left: 20px;
right: auto;
}
.about-shape {
left: -20px;
right: auto;
}
}
.about-content {
.about-list {
p {
padding: 0 0 0 26px;
&::before {
right: 0;
}
}
}
}
.booking-wrap {
&::before {
left: 0;
border-width: 60px 0 0 60px;
border-color: transparent transparent transparent var(--white);
}
&::after {
right: 0;
border-width: 0 60px 60px 0;
border-color: transparent var(--white) transparent transparent;
}
.booking-img {
padding: 0 56px 0 0;
text-align: end;
img {
left: 10px;
}
}
.booking-bg {
right: 40px;
left: auto;
@include respond-below(md) {
right: 0;
}
}
}
footer {
&.footer {
&::before {
left: 0;
right: auto;
}
.footer-subscribe {
.input-group {
.form-control {
padding: 0 16px 0 12px;
}
.input-group-text {
border-right: 0;
border-left: 1px solid $darkmode-gray-800;
padding: 7px 0 7px 7px;
}
}
}
&-dark {
.footer-widget {
.footer-title {
padding: 0 0 0 21px;
&::before {
left: 0;
right: auto;
}
}
}
}
}
.footer-bottom {
.policy-link {
a {
margin: 0 0 0 12px;
&:last-child {
margin-left: 0;
}
}
}
}
}
.input-group-flat .form-control:not(:last-child) {
border-left: 0;
border-right: 1px solid $border-color;
}
.form-control {
direction: rtl;
}
.horizontal-slide {
&[data-direction="right"] {
--_animation-direction: reverse;
}
&[data-direction="left"] {
--_animation-direction: backwards;
}
.slide-list {
animation: scrolls var(--_animation-duration, 60s) var(--_animation-direction, forwards) linear infinite;
}
}
@keyframes scrolls {
to {
transform: translate(calc(50% - .5rem));
}
}
.about-content-three {
padding-right: 24px;
}
.categories-item-four {
.categories-img {
&::before {
right: 10px;
left: auto;
}
}
}
.inner-content {
padding: 0 0 0 40px;
}
.card-shape {
border-top-left-radius: 0;
border-top-right-radius: 2em;
inset: auto auto 0 0;
&::before {
border-top-right-radius: 2.5em;
border-top-left-radius: 2.5em;
}
.shape-one {
right: auto;
left: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 0;
box-shadow: -0.313rem 0.313rem -0 0.313rem $primary-transparent;
}
.shape-two {
right: -16px;
left: auto;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 0;
box-shadow: -0.313rem 0.313rem -0 0.313rem $primary-transparent;
}
.view-icon {
inset: auto auto 0 0;
}
}
.listing-item-two .listing-content .card-shape .shape-one, .listing-item-two .listing-content .card-shape .shape-two {
box-shadow: -0.313rem 0.313rem 0 0.313rem var(--light);
}
.blog-item-four .blog-img .card-shape .shape-one, .blog-item-four .blog-img .card-shape .shape-two {
box-shadow: -0.313rem 0.313rem 0 0.313rem var(--white);
}
.testimonial-item-three .card-shape .shape-one, .testimonial-item-three .card-shape .shape-two {
box-shadow: -0.313rem 0.313rem 0 0.313rem var(--light);
}
.listing-item-two {
.listing-img {
.favourite {
left: auto;
right: 20px;
}
}
.listing-content {
.inner-content {
padding: 0 0 0 30px;
}
}
}
footer.footer-four {
.footer-top {
.footer-widget {
.footer-menu {
li a {
padding: 0 20px 0 0;
&::before {
right: 0;
left: auto;
}
}
}
}
}
}
.banner-section-four {
.wave-container {
&::before {
right: -3%;
}
&::after {
left: -5%;
right: auto;
}
}
.banner-03 {
left: 10%;
right: auto;
}
.banner-04 {
right: 10%;
left: auto;
}
}
.blog-item-four {
.blog-img {
.badge {
right: 20px;
left: auto;
}
}
}
.categories-section {
&-four {
.categories-bg {
right: auto;
left: 0;
@include transform(translate(-14%, -55%));
animation: spin-1-rtl 30s linear infinite;
@keyframes spin-1-rtl {
from {
transform: translate(-14%, -55%) rotate(0deg);
}
to {
transform: translate(-14%, -55%) rotate(360deg);
}
}
}
}
}
.testimonial-section {
&-four {
overflow: hidden;
background: $light;
z-index: 1;
.blog-bg-01 {
left: 0;
right: auto;
@include transform(translate(-30%, -93%));
opacity: 0.2;
animation: spins-rtl 30s linear infinite;
@keyframes spins-rtl {
from {
transform: translate(-30%, -93%) rotate(0deg);
}
to {
transform: translate(-30%, -93%) rotate(360deg);
}
}
}
.blog-bg-02 {
right: 2%;
left: auto;
}
}
}
.listing-section .listing-bg {
left: auto;
right: 0;
@include transform(translate(28%, -31%));
z-index: -1;
animation: spin-2-rtl 30s linear infinite;
@keyframes spin-2-rtl {
from {
transform: translate(28%, -31%) rotate(0deg);
}
to {
transform: translate(28%, -31%) rotate(360deg);
}
}
}
.feature-section .feature-bg-01 {
right: -3%;
left: auto;
animation: updown-rtl 3.5s ease-in-out 0s infinite alternate;
@keyframes updown-rtl {
0% {
@include transform(translateY(0) rotate(260deg));
}
50% {
@include transform(translateY(-4px) rotate(260deg));
}
100% {
@include transform(translateY(0) rotate(260deg));
}
}
}
.feature-section .feature-bg-02 {
left: 3%;
right: auto;
}
}