rsuite 5.0.0-beta.8 → 5.0.0

package/dist/rsuite-rtl.css

@@ -224,6 +224,20 @@
   --rs-navbar-subtle-selected-text: #1675e0;
   --rs-navbar-subtle-hover-bg: #f7f7fa;
   --rs-navbar-subtle-hover-text: #575757;
+  --rs-sidenav-default-bg: #f7f7fa;
+  --rs-sidenav-default-text: #575757;
+  --rs-sidenav-default-selected-text: #1675e0;
+  --rs-sidenav-default-hover-bg: #e5e5ea;
+  --rs-sidenav-default-hover-text: #575757;
+  --rs-sidenav-inverse-bg: #3498ff;
+  --rs-sidenav-inverse-text: #fff;
+  --rs-sidenav-inverse-selected-bg: #1675e0;
+  --rs-sidenav-inverse-hover-bg: #2589f5;
+  --rs-sidenav-subtle-bg: #fff;
+  --rs-sidenav-subtle-text: #8e8e93;
+  --rs-sidenav-subtle-selected-text: #1675e0;
+  --rs-sidenav-subtle-hover-bg: #f7f7fa;
+  --rs-sidenav-subtle-hover-text: #575757;
   --rs-input-bg: #fff;
   --rs-input-focus-border: #3498ff;
   --rs-input-disabled-bg: #f7f7fa;
@@ -525,6 +539,20 @@
   --rs-navbar-subtle-selected-text: #34c3ff;
   --rs-navbar-subtle-hover-bg: #292d33;
   --rs-navbar-subtle-hover-text: #e9ebf0;
+  --rs-sidenav-default-bg: #1a1d24;
+  --rs-sidenav-default-text: #a4a9b3;
+  --rs-sidenav-default-selected-text: #34c3ff;
+  --rs-sidenav-default-hover-bg: #292d33;
+  --rs-sidenav-default-hover-text: #e9ebf0;
+  --rs-sidenav-inverse-bg: #169de0;
+  --rs-sidenav-inverse-text: #fff;
+  --rs-sidenav-inverse-selected-bg: #59d0ff;
+  --rs-sidenav-inverse-hover-bg: #25b3f5;
+  --rs-sidenav-subtle-bg: transparent;
+  --rs-sidenav-subtle-text: #a4a9b3;
+  --rs-sidenav-subtle-selected-text: #34c3ff;
+  --rs-sidenav-subtle-hover-bg: #292d33;
+  --rs-sidenav-subtle-hover-text: #e9ebf0;
   --rs-input-bg: #1a1d24;
   --rs-input-focus-border: #34c3ff;
   --rs-input-disabled-bg: #292d33;
@@ -834,6 +862,21 @@
   --rs-navbar-subtle-selected-text: #ffff00;
   --rs-navbar-subtle-hover-bg: transparent;
   --rs-navbar-subtle-hover-text: #ffff00;
+  --rs-sidenav-default-bg: #1a1d24;
+  --rs-sidenav-default-text: #e9ebf0;
+  --rs-sidenav-default-selected-text: #ffff00;
+  --rs-sidenav-default-hover-bg: transparent;
+  --rs-sidenav-default-hover-text: #ffff00;
+  --rs-sidenav-inverse-bg: #1a1d24;
+  --rs-sidenav-inverse-text: #e9ebf0;
+  --rs-sidenav-inverse-selected-bg: transparent;
+  --rs-sidenav-inverse-selected-text: #ffff00;
+  --rs-sidenav-inverse-hover-bg: transparent;
+  --rs-sidenav-subtle-bg: #1a1d24;
+  --rs-sidenav-subtle-text: #e9ebf0;
+  --rs-sidenav-subtle-selected-text: #ffff00;
+  --rs-sidenav-subtle-hover-bg: transparent;
+  --rs-sidenav-subtle-hover-text: #ffff00;
   --rs-input-bg: #1a1d24;
   --rs-input-focus-border: #ffff00;
   --rs-input-disabled-bg: #292d33;
@@ -12388,13 +12431,21 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-sidenav-nav > .rs-sidenav-item,
 .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle,
-.rs-sidenav-nav .rs-dropdown-item {
+.rs-sidenav-nav .rs-dropdown-item,
+.rs-sidenav-nav .rs-dropdown-item-toggle {
   padding: 15px 20px;
   -webkit-transition: color 0.3s linear, background-color 0.3s linear;
   transition: color 0.3s linear, background-color 0.3s linear;
   border-radius: 0;
   color: inherit;
 }
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-sidenav-item,
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle,
+.rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-item,
+.rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-item-toggle {
+  -webkit-transition: none;
+  transition: none;
+}
 .rs-sidenav-nav > .rs-sidenav-item,
 .rs-sidenav-nav > .rs-dropdown {
   margin: 0 !important;
@@ -12729,22 +12780,39 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-sidenav-default {
   background-color: #f7f7fa;
-  background-color: var(--rs-navbar-default-bg);
+  background-color: var(--rs-sidenav-default-bg);
   color: #575757;
-  color: var(--rs-navbar-default-text);
+  color: var(--rs-sidenav-default-text);
+}
+.rs-sidenav-default .rs-sidenav-item,
+.rs-sidenav-default .rs-dropdown-toggle {
+  background-color: #f7f7fa;
+  background-color: var(--rs-sidenav-default-bg);
 }
-.rs-sidenav-default .rs-navbar-item:hover,
+.rs-sidenav-default .rs-sidenav-item:hover,
 .rs-sidenav-default .rs-dropdown .rs-dropdown-toggle:hover,
 .rs-sidenav-default .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
   background-color: #e5e5ea;
-  background-color: var(--rs-navbar-default-hover-bg);
+  background-color: var(--rs-sidenav-default-hover-bg);
   color: #575757;
-  color: var(--rs-navbar-default-hover-text);
+  color: var(--rs-sidenav-default-hover-text);
 }
-.rs-sidenav-default .rs-navbar-item.rs-navbar-item-active,
-.rs-sidenav-default .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
+.rs-sidenav-default .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav-default .rs-dropdown-item.rs-dropdown-item-active,
+.rs-sidenav-default .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
   color: #1675e0;
-  color: var(--rs-navbar-default-selected-text);
+  color: var(--rs-sidenav-default-selected-text);
+}
+.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active {
+  background-color: rgba(204, 233, 255, 0.5);
+  background-color: var(--rs-menuitem-active-bg);
+  color: #1675e0;
+  color: var(--rs-menuitem-active-text);
+}
+.rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active {
+  text-decoration: underline;
+  -webkit-box-shadow: inset 0 0 0 2px #fff;
+          box-shadow: inset 0 0 0 2px #fff;
 }
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu),
 .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu),
@@ -12753,7 +12821,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
 .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle {
   color: #575757;
-  color: var(--rs-navbar-default-text);
+  color: var(--rs-sidenav-default-text);
 }
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
 .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
@@ -12774,16 +12842,16 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
 .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus {
   background-color: #e5e5ea;
-  background-color: var(--rs-navbar-default-hover-bg);
+  background-color: var(--rs-sidenav-default-hover-bg);
   color: #575757;
-  color: var(--rs-navbar-default-hover-text);
+  color: var(--rs-sidenav-default-hover-text);
 }
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
 .rs-sidenav-default.rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
 .rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
 .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
   color: #1675e0;
-  color: var(--rs-navbar-default-selected-text);
+  color: var(--rs-sidenav-default-selected-text);
 }
 .rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapse-in .rs-sidenav-item.rs-sidenav-item-active,
 .rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapsing .rs-sidenav-item.rs-sidenav-item-active,
@@ -12791,56 +12859,59 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-theme-high-contrast .rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
   text-decoration: underline;
 }
-.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon,
-.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon,
-.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon {
+.rs-sidenav-default.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon,
+.rs-sidenav-default.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon,
+.rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
   color: #1675e0;
-  color: var(--rs-navbar-default-selected-text);
+  color: var(--rs-sidenav-default-selected-text);
 }
 .rs-sidenav-inverse {
   background-color: #3498ff;
-  background-color: var(--rs-navbar-inverse-bg);
+  background-color: var(--rs-sidenav-inverse-bg);
   color: #fff;
-  color: var(--rs-navbar-inverse-text);
+  color: var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse .rs-navbar-item:hover,
+.rs-sidenav-inverse .rs-sidenav-item,
+.rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle,
+.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
+  background-color: #3498ff;
+  background-color: var(--rs-sidenav-inverse-bg);
+}
+.rs-sidenav-inverse .rs-sidenav-item:hover,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:hover,
-.rs-sidenav-inverse .rs-navbar-item:focus,
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:hover,
+.rs-sidenav-inverse .rs-sidenav-item:focus,
+.rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:focus,
+.rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:focus {
   background-color: #2589f5;
-  background-color: var(--rs-navbar-inverse-hover-bg);
-}
-.rs-sidenav-inverse .rs-navbar-item.rs-navbar-item-active,
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
-  background-color: #1675e0;
-  background-color: var(--rs-navbar-inverse-selected-bg);
+  background-color: var(--rs-sidenav-inverse-hover-bg);
 }
-.rs-theme-high-contrast .rs-sidenav-inverse .rs-navbar-item.rs-navbar-item-active,
-.rs-theme-high-contrast .rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
-  color: var(--rs-navbar-inverse-selected-text);
+.rs-theme-high-contrast .rs-sidenav-inverse .rs-sidenav-item.rs-sidenav-item-active,
+.rs-theme-high-contrast .rs-sidenav-inverse .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+  color: var(--rs-sidenav-inverse-selected-text);
 }
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle,
+.rs-sidenav-inverse .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
 .rs-sidenav-inverse .rs-sidenav-item,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle {
   color: #fff;
-  color: var(--rs-navbar-inverse-text);
+  color: var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle:hover,
+.rs-sidenav-inverse .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle:hover,
 .rs-sidenav-inverse .rs-sidenav-item:hover,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:hover,
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle:focus,
+.rs-sidenav-inverse .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle:focus,
 .rs-sidenav-inverse .rs-sidenav-item:focus,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:focus,
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle.rs-dropdown-item-focus,
+.rs-sidenav-inverse .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle.rs-dropdown-item-focus,
 .rs-sidenav-inverse .rs-sidenav-item.rs-dropdown-item-focus,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle.rs-dropdown-item-focus {
   color: #fff;
-  color: var(--rs-navbar-inverse-text);
+  color: var(--rs-sidenav-inverse-text);
 }
-.rs-sidenav-inverse .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle,
-.rs-sidenav-inverse .rs-sidenav-item.rs-sidenav-item-active {
+.rs-sidenav-inverse .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav-inverse .rs-dropdown-item.rs-dropdown-item-active {
   background-color: #1675e0;
-  background-color: var(--rs-navbar-inverse-selected-bg);
+  background-color: var(--rs-sidenav-inverse-selected-bg);
 }
 .rs-sidenav-inverse.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu),
 .rs-sidenav-inverse.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu),
@@ -12849,7 +12920,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-inverse.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
 .rs-sidenav-inverse.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle {
   color: #fff;
-  color: var(--rs-navbar-inverse-text);
+  color: var(--rs-sidenav-inverse-text);
 }
 .rs-sidenav-inverse.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
 .rs-sidenav-inverse.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
@@ -12870,32 +12941,31 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-inverse.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
 .rs-sidenav-inverse.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus {
   background-color: #2589f5;
-  background-color: var(--rs-navbar-inverse-hover-bg);
+  background-color: var(--rs-sidenav-inverse-hover-bg);
   color: #fff;
-  color: var(--rs-navbar-inverse-text);
-}
-.rs-sidenav-inverse.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active:not(.rs-dropdown-item-submenu),
-.rs-sidenav-inverse.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active:not(.rs-dropdown-item-submenu) {
-  background-color: #2589f5;
-  background-color: var(--rs-navbar-inverse-hover-bg);
+  color: var(--rs-sidenav-inverse-text);
 }
 .rs-sidenav-subtle {
   background-color: transparent;
   color: #8e8e93;
-  color: var(--rs-navbar-subtle-text);
+  color: var(--rs-sidenav-subtle-text);
+}
+.rs-sidenav-subtle .rs-sidenav-item,
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle {
+  background-color: transparent;
 }
-.rs-sidenav-subtle .rs-navbar-item:hover,
+.rs-sidenav-subtle .rs-sidenav-item:hover,
 .rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle:hover,
-.rs-sidenav-subtle .rs-navbar-item:focus,
+.rs-sidenav-subtle .rs-sidenav-item:focus,
 .rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle:focus {
   background-color: transparent;
   color: #575757;
-  color: var(--rs-navbar-subtle-hover-text);
+  color: var(--rs-sidenav-subtle-hover-text);
 }
-.rs-sidenav-subtle .rs-navbar-item.rs-navbar-item-active,
-.rs-sidenav-subtle .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
+.rs-sidenav-subtle .rs-sidenav-item.rs-sidenav-item-active,
+.rs-sidenav-subtle .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
   color: #1675e0;
-  color: var(--rs-navbar-subtle-selected-text);
+  color: var(--rs-sidenav-subtle-selected-text);
 }
 .rs-sidenav-subtle .rs-dropdown-open > .rs-dropdown-toggle.btn {
   background-color: transparent;
@@ -12903,7 +12973,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-subtle .rs-dropdown-open > .rs-dropdown-toggle.btn:hover,
 .rs-sidenav-subtle .rs-dropdown-open > .rs-dropdown-toggle.btn:focus {
   background-color: #f7f7fa;
-  background-color: var(--rs-navbar-subtle-hover-bg);
+  background-color: var(--rs-sidenav-subtle-hover-bg);
 }
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu),
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu),
@@ -12912,7 +12982,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle {
   color: #8e8e93;
-  color: var(--rs-navbar-subtle-text);
+  color: var(--rs-sidenav-subtle-text);
 }
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
@@ -12927,32 +12997,32 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-item-toggle:focus {
   background-color: #f7f7fa;
-  background-color: var(--rs-navbar-subtle-hover-bg);
+  background-color: var(--rs-sidenav-subtle-hover-bg);
   color: #575757;
-  color: var(--rs-navbar-subtle-hover-text);
+  color: var(--rs-sidenav-subtle-hover-text);
 }
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active,
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-menu > .rs-dropdown-item.rs-dropdown-item-active {
   color: #1675e0;
-  color: var(--rs-navbar-subtle-selected-text);
+  color: var(--rs-sidenav-subtle-selected-text);
 }
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle,
-.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle {
+.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
+.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
+.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
   color: #8e8e93;
-  color: var(--rs-navbar-subtle-text);
+  color: var(--rs-sidenav-subtle-text);
 }
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle:hover,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle:hover,
-.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle:hover {
+.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle:hover,
+.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle:hover,
+.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle:hover {
   background-color: #f7f7fa;
-  background-color: var(--rs-navbar-subtle-hover-bg);
+  background-color: var(--rs-sidenav-subtle-hover-bg);
 }
-.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon,
-.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon,
-.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown-menu.rs-dropdown-menu-active ~ .rs-dropdown-toggle > .rs-icon {
+.rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon,
+.rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon,
+.rs-sidenav-subtle.rs-sidenav-collapse-out .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
   color: #1675e0;
-  color: var(--rs-navbar-subtle-selected-text);
+  color: var(--rs-sidenav-subtle-selected-text);
 }
 @-webkit-keyframes sideNavFoldedText {
   0% {