rsuite 5.0.3 → 5.2.2

package/dist/rsuite.css

@@ -260,6 +260,8 @@
   --rs-rate-symbol-checked: #ffb300;
   --rs-toggle-bg: #d9d9d9;
   --rs-toggle-thumb: #fff;
+  --rs-toggle-loader-ring: rgba(247, 247, 250, 0.3);
+  --rs-toggle-loader-rotor: #fff;
   --rs-toggle-hover-bg: #c5c6c7;
   --rs-toggle-disabled-bg: #f7f7fa;
   --rs-toggle-disabled-thumb: #fff;
@@ -2055,6 +2057,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-700);
   --rs-btn-link-hover-text: var(--rs-red-800);
   --rs-btn-link-active-text: var(--rs-red-900);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-800);
 }
 .rs-theme-dark .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2073,6 +2078,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-500);
   --rs-btn-link-hover-text: var(--rs-red-400);
   --rs-btn-link-active-text: var(--rs-red-200);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-400);
 }
 .rs-theme-high-contrast .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2109,6 +2117,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-700);
   --rs-btn-link-hover-text: var(--rs-orange-800);
   --rs-btn-link-active-text: var(--rs-orange-900);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-800);
 }
 .rs-theme-dark .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2127,6 +2138,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-500);
   --rs-btn-link-hover-text: var(--rs-orange-400);
   --rs-btn-link-active-text: var(--rs-orange-200);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-400);
 }
 .rs-theme-high-contrast .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2163,6 +2177,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-700);
   --rs-btn-link-hover-text: var(--rs-yellow-800);
   --rs-btn-link-active-text: var(--rs-yellow-900);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-800);
 }
 .rs-theme-dark .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2181,6 +2198,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-500);
   --rs-btn-link-hover-text: var(--rs-yellow-400);
   --rs-btn-link-active-text: var(--rs-yellow-200);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-400);
 }
 .rs-theme-high-contrast .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2217,6 +2237,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-700);
   --rs-btn-link-hover-text: var(--rs-green-800);
   --rs-btn-link-active-text: var(--rs-green-900);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-800);
 }
 .rs-theme-dark .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2235,6 +2258,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-500);
   --rs-btn-link-hover-text: var(--rs-green-400);
   --rs-btn-link-active-text: var(--rs-green-200);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-400);
 }
 .rs-theme-high-contrast .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2271,6 +2297,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-700);
   --rs-btn-link-hover-text: var(--rs-cyan-800);
   --rs-btn-link-active-text: var(--rs-cyan-900);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-800);
 }
 .rs-theme-dark .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2289,6 +2318,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-500);
   --rs-btn-link-hover-text: var(--rs-cyan-400);
   --rs-btn-link-active-text: var(--rs-cyan-200);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-400);
 }
 .rs-theme-high-contrast .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2325,6 +2357,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-700);
   --rs-btn-link-hover-text: var(--rs-blue-800);
   --rs-btn-link-active-text: var(--rs-blue-900);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-800);
 }
 .rs-theme-dark .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2343,6 +2378,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-500);
   --rs-btn-link-hover-text: var(--rs-blue-400);
   --rs-btn-link-active-text: var(--rs-blue-200);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-400);
 }
 .rs-theme-high-contrast .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2379,6 +2417,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-700);
   --rs-btn-link-hover-text: var(--rs-violet-800);
   --rs-btn-link-active-text: var(--rs-violet-900);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-800);
 }
 .rs-theme-dark .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -2397,6 +2438,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-500);
   --rs-btn-link-hover-text: var(--rs-violet-400);
   --rs-btn-link-active-text: var(--rs-violet-200);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-400);
 }
 .rs-theme-high-contrast .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -10031,13 +10075,13 @@ textarea.rs-picker-search-input {
   border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
 }
-.rs-panel-group .rs-panel {
+.rs-panel-group > .rs-panel {
   border: none;
 }
-.rs-panel-group .rs-panel + .rs-panel {
+.rs-panel-group > .rs-panel + .rs-panel {
   position: relative;
 }
-.rs-panel-group .rs-panel + .rs-panel::before {
+.rs-panel-group > .rs-panel + .rs-panel::before {
   content: '';
   position: absolute;
   top: 0;
@@ -12579,6 +12623,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   outline: 0;
   overflow: hidden;
 }
+.rs-sidenav-item:hover {
+  text-decoration: none;
+}
 .rs-sidenav-item:focus-visible,
 .rs-sidenav-item.rs-sidenav-item-focus {
   -webkit-box-shadow: inset var(--rs-state-focus-shadow-slim);
@@ -13142,6 +13189,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
 }
+.rs-slider-vertical .rs-slider-handle {
+  top: unset;
+}
 .rs-slider-vertical .rs-slider-handle::before {
   left: 3px;
   margin-top: -6px;
@@ -13176,25 +13226,25 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-slider-graduator {
   width: 100%;
 }
-.rs-slider-graduator ul,
+.rs-slider-graduator ol,
 .rs-slider-graduator li {
   list-style: none;
 }
-.rs-slider-graduator > ul {
+.rs-slider-graduator > ol {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-left: 0;
   width: 100%;
 }
-.rs-slider-graduator > ul > li {
+.rs-slider-graduator > ol > li {
   -webkit-box-flex: 1;
       -ms-flex: 1 1 1%;
           flex: 1 1 1%;
   position: relative;
 }
-.rs-slider-graduator > ul > li:last-child::after,
-.rs-slider-graduator > ul > li::before {
+.rs-slider-graduator > ol > li:last-child::after,
+.rs-slider-graduator > ol > li::before {
   content: '';
   display: block;
   position: absolute;
@@ -13210,43 +13260,44 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   margin-left: -4px;
   top: -1px;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li:last-child::after,
-.rs-slider-vertical .rs-slider-graduator > ul > li::before {
-  top: -4px;
+.rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after,
+.rs-slider-vertical .rs-slider-graduator > ol > li::before {
+  top: unset;
+  bottom: -4px;
   margin-left: -1px;
 }
-.rs-slider-graduator > ul > li:last-child::after {
+.rs-slider-graduator > ol > li:last-child::after {
   right: -4px;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li:last-child::after {
+.rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after {
   left: 0;
-  top: auto;
-  bottom: -4px;
+  bottom: unset;
+  top: -4px;
 }
-.rs-slider-graduator > ul > li.rs-slider-pass::before {
+.rs-slider-graduator > ol > li.rs-slider-pass::before {
   border-color: #3498ff;
   border-color: var(--rs-slider-progress);
 }
-.rs-slider-graduator > ul > li.rs-slider-active::before {
+.rs-slider-graduator > ol > li.rs-slider-active::before {
   visibility: hidden;
 }
 .rs-slider-vertical .rs-slider-graduator {
   display: block;
   height: 100%;
 }
-.rs-slider-vertical .rs-slider-graduator > ul {
+.rs-slider-vertical .rs-slider-graduator > ol {
   width: 6px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
   height: 100%;
   padding: 0;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li {
+.rs-slider-vertical .rs-slider-graduator > ol > li {
   display: block;
   padding: 0;
 }
@@ -13259,21 +13310,22 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-slider-vertical .rs-slider-progress-bar {
   width: 6px;
-  border-radius: 3px 3px 0 0;
+  border-radius: 0 0 3px 3px;
 }
 .rs-slider-vertical {
   height: 100%;
 }
 .rs-slider-vertical .rs-slider-mark {
-  top: -8px;
+  top: unset;
+  bottom: -8px;
   left: 15px;
 }
 .rs-slider-vertical .rs-slider-mark-content {
   margin-left: auto;
 }
 .rs-slider-vertical .rs-slider-mark-last {
-  top: auto;
-  bottom: -8px;
+  bottom: unset;
+  top: -8px;
 }
 .rs-steps {
   min-height: 30px;
@@ -14229,59 +14281,82 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-timeline-align-alternate .rs-timeline-item:nth-child(2n) .rs-timeline-item-time {
   padding-left: 17px;
 }
-.rs-btn-toggle {
+.rs-toggle {
+  position: relative;
+}
+.rs-toggle .rs-toggle-loader {
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+}
+.rs-toggle .rs-toggle-presentation {
   height: 24px;
   min-width: 44px;
   border-radius: 12px;
-  position: relative;
-  display: inline-block;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  vertical-align: middle;
-  background-color: #d9d9d9;
-  background-color: var(--rs-toggle-bg);
-  color: #fff;
-  color: var(--rs-toggle-thumb);
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
 }
-.rs-btn-toggle::after {
+.rs-toggle .rs-toggle-presentation::after {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
   border-radius: 9px;
 }
-.rs-btn-toggle:active::after {
+.rs-toggle .rs-toggle-presentation:active::after {
   width: 21.6px;
 }
-.rs-btn-toggle .rs-btn-toggle-inner {
+.rs-toggle .rs-toggle-inner {
   margin-left: 24px;
   margin-right: 8px;
   height: 24px;
   line-height: 2;
   font-size: 12px;
 }
-.rs-btn-toggle .rs-btn-toggle-inner .rs-icon {
+.rs-toggle .rs-toggle-inner .rs-icon {
   font-size: 12px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked::after {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -21px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked:active::after {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -24.6px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 24px;
   margin-left: 8px;
 }
-.rs-theme-high-contrast .rs-btn-toggle {
+.rs-toggle.rs-toggle-checked .rs-toggle-loader {
+  left: 100%;
+  margin-left: -21px;
+}
+.rs-toggle-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+.rs-toggle-presentation {
+  position: relative;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  vertical-align: middle;
+  background-color: #d9d9d9;
+  background-color: var(--rs-toggle-bg);
+  color: #fff;
+  color: var(--rs-toggle-thumb);
+  cursor: pointer;
+  -webkit-transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.rs-theme-high-contrast .rs-toggle-presentation {
   -webkit-transition: none;
   transition: none;
   -webkit-box-shadow: inset 0 0 0 1px #fff;
@@ -14289,11 +14364,23 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
 }
-.rs-btn-toggle:hover {
+.rs-toggle-input:focus-visible + .rs-toggle-presentation {
+  -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
+  -webkit-box-shadow: var(--rs-state-focus-shadow);
+          box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
+          box-shadow: var(--rs-state-focus-shadow);
+}
+.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
+  -webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(52, 152, 255, 0.25);
+  -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
+          box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(52, 152, 255, 0.25);
+          box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
+}
+.rs-toggle-presentation:hover {
   background-color: #c5c6c7;
   background-color: var(--rs-toggle-hover-bg);
 }
-.rs-btn-toggle::after {
+.rs-toggle-presentation::after {
   content: '';
   cursor: pointer;
   position: absolute;
@@ -14301,11 +14388,11 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
   transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
 }
-.rs-theme-high-contrast .rs-btn-toggle::after {
+.rs-theme-high-contrast .rs-toggle-presentation::after {
   -webkit-transition: none;
   transition: none;
 }
-.rs-btn-toggle.rs-btn-toggle-disabled {
+.rs-toggle-disabled .rs-toggle-presentation {
   background-color: #f7f7fa;
   background-color: var(--rs-toggle-disabled-bg);
   color: #fff;
@@ -14316,7 +14403,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
   cursor: not-allowed;
 }
-.rs-btn-toggle.rs-btn-toggle-checked {
+.rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;
   background-color: var(--rs-toggle-checked-bg);
   color: #fff;
@@ -14324,133 +14411,179 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rs-btn-toggle.rs-btn-toggle-checked:hover {
+.rs-toggle-checked .rs-toggle-presentation:hover {
   background-color: #2589f5;
   background-color: var(--rs-toggle-checked-hover-bg);
 }
-.rs-btn-toggle.rs-btn-toggle-disabled.rs-btn-toggle-checked {
+.rs-toggle-disabled.rs-toggle-checked .rs-toggle-presentation {
   background-color: #cce9ff;
   background-color: var(--rs-toggle-checked-disabled-bg);
   color: #fff;
   color: var(--rs-toggle-checked-disabled-thumb);
 }
-.rs-btn-toggle-inner {
+.rs-toggle-loading .rs-toggle-presentation::after {
+  display: none;
+}
+.rs-toggle-inner {
   display: block;
   -webkit-transition: margin 0.2s ease-in-out;
   transition: margin 0.2s ease-in-out;
 }
-.rs-theme-high-contrast .rs-btn-toggle-inner {
+.rs-theme-high-contrast .rs-toggle-inner {
   -webkit-transition: none;
   transition: none;
 }
-.rs-btn-toggle-sm {
+.rs-toggle-loader {
+  position: absolute;
+  -webkit-transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
+}
+.rs-toggle-loader .rs-loader-spin::before {
+  border-color: rgba(247, 247, 250, 0.3);
+  border-color: var(--rs-toggle-loader-ring);
+}
+.rs-toggle-loader .rs-loader-spin::after {
+  border-top-color: #fff;
+  border-top-color: var(--rs-toggle-loader-rotor);
+}
+.rs-toggle-sm .rs-toggle-loader {
+  width: 10px;
+  height: 10px;
+  left: 2px;
+  top: 2px;
+}
+.rs-toggle-sm .rs-toggle-presentation {
   height: 14px;
   min-width: 26px;
   border-radius: 7px;
 }
-.rs-btn-toggle-sm::after {
+.rs-toggle-sm .rs-toggle-presentation::after {
   width: 10px;
   height: 10px;
   left: 2px;
   top: 2px;
   border-radius: 5px;
 }
-.rs-btn-toggle-sm:active::after {
+.rs-toggle-sm .rs-toggle-presentation:active::after {
   width: 12px;
 }
-.rs-btn-toggle-sm .rs-btn-toggle-inner {
+.rs-toggle-sm .rs-toggle-inner {
   margin-left: 14px;
   margin-right: 6px;
   height: 14px;
   line-height: 1.4;
   font-size: 10px;
 }
-.rs-btn-toggle-sm .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-sm .rs-toggle-inner .rs-icon {
   font-size: 10px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked::after {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -12px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked:active::after {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -14px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 14px;
   margin-left: 6px;
 }
-.rs-btn-toggle-md {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-loader {
+  left: 100%;
+  margin-left: -12px;
+}
+.rs-toggle-md .rs-toggle-loader {
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+}
+.rs-toggle-md .rs-toggle-presentation {
   height: 24px;
   min-width: 44px;
   border-radius: 12px;
 }
-.rs-btn-toggle-md::after {
+.rs-toggle-md .rs-toggle-presentation::after {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
   border-radius: 9px;
 }
-.rs-btn-toggle-md:active::after {
+.rs-toggle-md .rs-toggle-presentation:active::after {
   width: 21.6px;
 }
-.rs-btn-toggle-md .rs-btn-toggle-inner {
+.rs-toggle-md .rs-toggle-inner {
   margin-left: 24px;
   margin-right: 8px;
   height: 24px;
   line-height: 2;
   font-size: 12px;
 }
-.rs-btn-toggle-md .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-md .rs-toggle-inner .rs-icon {
   font-size: 12px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked::after {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -21px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked:active::after {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -24.6px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 24px;
   margin-left: 8px;
 }
-.rs-btn-toggle-lg {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-loader {
+  left: 100%;
+  margin-left: -21px;
+}
+.rs-toggle-lg .rs-toggle-loader {
+  width: 22px;
+  height: 22px;
+  left: 4px;
+  top: 4px;
+}
+.rs-toggle-lg .rs-toggle-presentation {
   height: 30px;
   min-width: 55px;
   border-radius: 15px;
 }
-.rs-btn-toggle-lg::after {
+.rs-toggle-lg .rs-toggle-presentation::after {
   width: 22px;
   height: 22px;
   left: 4px;
   top: 4px;
   border-radius: 11px;
 }
-.rs-btn-toggle-lg:active::after {
+.rs-toggle-lg .rs-toggle-presentation:active::after {
   width: 26.4px;
 }
-.rs-btn-toggle-lg .rs-btn-toggle-inner {
+.rs-toggle-lg .rs-toggle-inner {
   margin-left: 30px;
   margin-right: 10px;
   height: 30px;
   line-height: 2.14285714;
   font-size: 14px;
 }
-.rs-btn-toggle-lg .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-lg .rs-toggle-inner .rs-icon {
   font-size: 14px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked::after {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -26px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked:active::after {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -30.4px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 30px;
   margin-left: 10px;
 }
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-loader {
+  left: 100%;
+  margin-left: -26px;
+}
 /* rtl:begin:ignore */
 /* rtl:end:ignore */
 .rs-tooltip {