coreui
diff --git a/‎scss/sidebar/_sidebar-narrow.scss
Lines changed: 8 additions & 8 deletions b/‎scss/sidebar/_sidebar-narrow.scss
Lines changed: 8 additions & 8 deletions
diff --git a/‎scss/sidebar/_sidebar.scss
Lines changed: 4 additions & 1 deletion b/‎scss/sidebar/_sidebar.scss
Lines changed: 4 additions & 1 deletion
@@ -3,11 +3,6 @@
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
   // scss-docs-end sidebar-narrow-css-vars
 
-  .sidebar-nav {
-    --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
-    --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
-  }
-
   @include media-breakpoint-up($mobile-breakpoint) {
     flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
     width: var(--#{$prefix}sidebar-narrow-width);
@@ -32,6 +27,11 @@
       padding-left: 0;
     }
 
+    .sidebar-nav {
+      --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
+      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
+    }
+
     .nav-icon {
       flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
     }
@@ -49,7 +49,7 @@
       opacity: 0;
     }
 
-    .sidebar-toggler {
+    .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
@@ -90,11 +90,11 @@
   &:hover {
     box-shadow: $box-shadow;
 
-    .sidebar-toggler {
+    .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
-    &.sidebar-end .sidebar-toggler {
+    &.sidebar-end .sidebar-toggler::before {
       transform: rotate(0deg);
     }
   }
 
@@ -229,7 +229,6 @@
   background-color: transparent;
   border: 0;
   @include border-radius();
-  @include transition(var(--#{$prefix}sidebar-toggler-transition));
 
   &::before {
     position: absolute;
@@ -240,6 +239,10 @@
     content: "";
     background-color: var(--#{$prefix}sidebar-toggler-color);
     mask: var(--#{$prefix}sidebar-toggler-bg) no-repeat center;
+    @include transition(var(--#{$prefix}sidebar-toggler-transition));
+    @include rtl() {
+      transform: rotate(-180deg);
+    }
   }
 
   // Override <a>'s hover style
Original file line number	Diff line number	Diff line change
`@@ -3,11 +3,6 @@`
`3`	`3`	`--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};`
`4`	`4`	`// scss-docs-end sidebar-narrow-css-vars`
`5`	`5`
`6`		`- .sidebar-nav {`
`7`		`- --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};`
`8`		`- --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};`
`9`		`- }`
`10`		`-`
`11`	`6`	`@include media-breakpoint-up($mobile-breakpoint) {`
`12`	`7`	`flex: 0 0 var(--#{$prefix}sidebar-narrow-width);`
`13`	`8`	`width: var(--#{$prefix}sidebar-narrow-width);`
`@@ -32,6 +27,11 @@`
`32`	`27`	`padding-left: 0;`
`33`	`28`	`}`
`34`	`29`
	`30`	`+ .sidebar-nav {`
	`31`	`+ --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};`
	`32`	`+ --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};`
	`33`	`+ }`
	`34`	`+`
`35`	`35`	`.nav-icon {`
`36`	`36`	`flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list`
`37`	`37`	`}`
`@@ -49,7 +49,7 @@`
`49`	`49`	`opacity: 0;`
`50`	`50`	`}`
`51`	`51`
`52`		`- .sidebar-toggler {`
	`52`	`+ .sidebar-toggler::before {`
`53`	`53`	`@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));`
`54`	`54`	`}`
`55`	`55`
`@@ -90,11 +90,11 @@`
`90`	`90`	`&:hover {`
`91`	`91`	`box-shadow: $box-shadow;`
`92`	`92`
`93`		`- .sidebar-toggler {`
	`93`	`+ .sidebar-toggler::before {`
`94`	`94`	`@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));`
`95`	`95`	`}`
`96`	`96`
`97`		`- &.sidebar-end .sidebar-toggler {`
	`97`	`+ &.sidebar-end .sidebar-toggler::before {`
`98`	`98`	`transform: rotate(0deg);`
`99`	`99`	`}`
`100`	`100`	`}`