@nutui/nutui-react-taro 3.0.0-beta.10 → 3.0.0-beta.12

package/dist/cjs/packages/step/style/style.harmony.css

@@ -0,0 +1,201 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-step {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+}
+.nut-step-head {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.nut-step-line {
+  position: absolute;
+  top: calc(25px / 2);
+  left: calc(50% + (100% - 70%) / 2);
+  height: 1px;
+  width: 70%;
+  background: #888b94;
+}
+.nut-step-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  background-color: #888b94;
+  border-color: #888b94;
+  color: #ffffff;
+  z-index: 1;
+}
+.nut-step-icon .nut-icon {
+  width: 100%;
+  height: 100%;
+}
+.nut-step-icon.is-text {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-icon.is-icon {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-main {
+  padding: 0 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-step-title {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+.nut-step-description {
+  display: block;
+  font-size: 12px;
+  color: #505259;
+}
+.nut-step:last-child .nut-step-line {
+  display: none;
+}
+.nut-step.nut-step-process .nut-step-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-step.nut-step-process .nut-step-title {
+  color: #ff0f23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.nut-step.nut-step-process .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-wait .nut-step-title {
+  color: #1a1a1a;
+}
+.nut-step.nut-step-wait .nut-step-description {
+  color: #505259;
+}
+.nut-step.nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-line {
+  background: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-title {
+  color: #ff0f23;
+}
+.nut-step.nut-step-finish .nut-step-description {
+  color: #505259;
+}
+
+.nut-steps-dot .nut-step-head {
+  margin: 10px 0;
+}
+.nut-steps-dot .nut-step-line {
+  top: 7px;
+}
+.nut-steps-dot .nut-step-icon {
+  width: 6px;
+  height: 6px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+.nut-steps-dot .nut-step-wait .nut-step-icon {
+  background-color: #888b94;
+}
+.nut-steps-dot .nut-step-finish .nut-step-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon {
+  position: relative;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -7px;
+  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  background-color: #ff0f23;
+  border-radius: 50%;
+  opacity: 0.23;
+}
+
+.nut-steps-horizontal.nut-steps-dot .nut-step-line {
+  top: 50%;
+  bottom: -50%;
+}
+
+.nut-steps-vertical .nut-step {
+  display: flex;
+  height: 33.34%;
+}
+.nut-steps-vertical .nut-step-line {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: 70%;
+  background: #888b94;
+  top: calc(25px + (100% - 70% - 12px) / 2);
+  left: calc(50% - 1px);
+}
+.nut-steps-vertical.nut-steps-dot .nut-step-line {
+  top: calc(6px + (100% - 70%) / 2);
+}
+.nut-steps-vertical .nut-step-main {
+  display: inline-block;
+  padding-left: 6%;
+  text-align: start;
+}
+
+[dir=rtl] .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+.nut-rtl .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
+.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
+  left: auto;
+  right: 50%;
+  margin-left: 0;
+  margin-right: -7px;
+}
+
+[dir=rtl] .nut-steps-vertical .nut-step-line,
+.nut-rtl .nut-steps-vertical .nut-step-line {
+  left: auto;
+  right: calc(50% - 1px);
+}
+[dir=rtl] .nut-steps-vertical .nut-step-main,
+.nut-rtl .nut-steps-vertical .nut-step-main {
+  padding-left: 0;
+  padding-right: 6%;
+}

package/dist/cjs/packages/steps/style/style.css

@@ -21,7 +21,7 @@
   left: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
   height: var(--nutui-steps-base-line-height, 1px);
   width: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
 }
 .nut-step-icon {
   position: relative;
@@ -32,8 +32,8 @@
   height: var(--nutui-steps-base-icon-height, 25px);
   line-height: var(--nutui-steps-base-icon-line-height, 25px);
   font-size: var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-s, 12px));
-  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
-  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5));
+  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
+  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
   color: var(--nutui-steps-wait-icon-color, #ffffff);
   z-index: 1;
 }
@@ -62,48 +62,48 @@
   display: block;
   margin-bottom: var(--nutui-steps-base-title-margin-bottom, 10px);
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-steps-base-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step-description {
   display: block;
   font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-steps-base-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-base-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step:last-child .nut-step-line {
   display: none;
 }
 .nut-step.nut-step-process .nut-step-icon {
-  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
-  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-brand-6));
+  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
   color: var(--nutui-steps-process-icon-color, #ffffff);
 }
 .nut-step.nut-step-process .nut-step-title {
-  color: var(--nutui-steps-process-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
   font-size: var(--nutui-steps-process-title-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-step.nut-step-process .nut-step-description {
-  color: var(--nutui-steps-process-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-wait .nut-step-title {
-  color: var(--nutui-steps-wait-title-color, var(--nutui-gray-7));
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-step.nut-step-wait .nut-step-description {
-  color: var(--nutui-steps-wait-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
 }
 .nut-step.nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
-  color: var(--nutui-steps-finish-icon-color, var(--nutui-brand-6));
+  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
+  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-line {
-  background: var(--nutui-steps-finish-line-background, var(--nutui-brand-6));
+  background: var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-title {
-  color: var(--nutui-steps-finish-title-color, var(--nutui-brand-6));
+  color: var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-step.nut-step-finish .nut-step-description {
-  color: var(--nutui-steps-finish-description-color, var(--nutui-gray-6));
+  color: var(--nutui-steps-finish-description-color, var(--nutui-color-text, #505259));
 }
 
 .nut-steps-dot .nut-step-head {
@@ -120,11 +120,11 @@
   box-sizing: content-box;
 }
 .nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5)));
+  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94)));
 }
 .nut-steps-dot .nut-step-finish .nut-step-icon {
   background-color: var(--nutui-steps-finish-icon-bg-color, #ffffff);
-  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-brand-6)));
+  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
 }
 .nut-steps-dot .nut-step-process .nut-step-icon {
   position: relative;
@@ -158,7 +158,7 @@
   display: inline-block;
   width: 1px;
   height: var(--nutui-steps-base-line-width, 70%);
-  background: var(--nutui-steps-base-line-background, var(--nutui-gray-5));
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
   top: calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);
   left: calc(50% - 1px);
 }

package/dist/cjs/packages/steps/style/style.harmony.css

@@ -0,0 +1,12 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-steps {
+  display: flex;
+}
+
+.nut-steps-vertical {
+  height: 100%;
+  flex-flow: column;
+}

package/dist/cjs/packages/sticky/style/style.harmony.css

@@ -0,0 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-sticky-fixed {
+  position: fixed;
+}

package/dist/cjs/packages/subsidenavbar/style/style.css

@@ -6,8 +6,8 @@
   height: var(--nutui-sidenavbar-item-height, 40px);
   padding: var(--nutui-sidenavbar-sub-title-padding, 10px 8px 10px 35px);
   box-sizing: border-box;
-  background-color: var(--nutui-sidenavbar-sub-title-background, var(--nutui-color-background-sunken, var(--nutui-gray-2)));
-  color: var(--nutui-sidenavbar-sub-title-color, var(--nutui-gray-7));
+  background-color: var(--nutui-sidenavbar-sub-title-background, var(--nutui-color-background-sunken, #f7f8fc));
+  color: var(--nutui-sidenavbar-sub-title-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
 }
 .nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {

package/dist/cjs/packages/subsidenavbar/style/style.harmony.css

@@ -0,0 +1,20 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-subsidenavbar-title {
+  height: 40px;
+  padding: 10px 8px 10px 35px;
+  box-sizing: border-box;
+  background-color: #f7f8fc;
+  color: #1a1a1a;
+  box-sizing: border-box;
+}
+.nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {
+  height: auto;
+  overflow: inherit;
+}
+.nut-subsidenavbar-list.sidenavbar-hide .nut-subsidenavbar-content {
+  height: 0;
+  overflow: hidden;
+}

package/dist/cjs/packages/swipe/style/style.harmony.css

@@ -0,0 +1,33 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swipe {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #ffffff;
+}
+.nut-swipe-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-self: stretch;
+  width: 100%;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
+}
+.nut-swipe-left, .nut-swipe-right {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+}
+.nut-swipe-left {
+  left: 0;
+}
+.nut-swipe-right {
+  left: 100%;
+}

package/dist/cjs/packages/swipe/swipe.js

@@ -297,7 +297,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         };
     });
     (0, _react.useEffect)(function() {
-        if ((0, _platformtaro.harmonyAndRn)()) return;
+        if ((0, _platformtaro.harmony)()) return;
         var handler = function handler(event) {
             var targets = [
                 root

package/dist/cjs/packages/swiper/style/style.css

@@ -18,7 +18,7 @@
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   opacity: 0.4;
 }
@@ -31,7 +31,7 @@
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 6px);
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
@@ -62,7 +62,7 @@
 }
 .nut-indicator-line-active {
   transition: transform 0.3s ease-in-out;
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-indicator-track {
@@ -76,7 +76,7 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
 
@@ -171,15 +171,7 @@
   display: flex;
   position: relative;
 }
-.nut-swiper-inner-horizontal {
-  /* #ifndef rn */
-  transform: translateX(var(--swiper-offset));
-  /* #ifndef rn */
-}
 .nut-swiper-inner-vertical {
-  /* #ifndef rn */
-  transform: translateY(var(--swiper-offset));
-  /* #ifndef rn */
   flex-direction: column;
 }
 
@@ -199,9 +191,6 @@
 .nut-rtl .nut-swiper-indicator {
   left: auto;
   right: 50%;
-  /* #ifndef rn */
-  transform: translateX(50%);
-  /* #endif */
 }
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {

package/dist/cjs/packages/swiper/style/style.harmony.css

@@ -0,0 +1,63 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  touch-action: none;
+  position: relative;
+}
+.nut-swiper-indicator {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  top: 89.33%;
+  z-index: 10;
+}
+.nut-swiper-indicator-vertical {
+  width: 8px;
+  height: 100%;
+  top: 0;
+  left: 12px;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.nut-swiper-inner-vertical {
+  flex-direction: column;
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir=rtl] .nut-swiper-indicator,
+.nut-rtl .nut-swiper-indicator {
+  left: auto;
+  right: 50%;
+}
+[dir=rtl] .nut-swiper-indicator-vertical,
+.nut-rtl .nut-swiper-indicator-vertical {
+  left: auto;
+  right: 12px;
+}

package/dist/cjs/packages/swiper/style/swiper.scss

@@ -31,16 +31,8 @@
   height: 100%;
   display: flex;
   position: relative;
-  &-horizontal {
-    /* #ifndef rn */
-    transform: translateX(var(--swiper-offset));
-    /* #ifndef rn */
-  }
 
   &-vertical {
-    /* #ifndef rn */
-    transform: translateY(var(--swiper-offset));
-    /* #ifndef rn */
     flex-direction: column;
   }
 }
@@ -62,9 +54,6 @@
   &-indicator {
     left: auto;
     right: 50%;
-    /* #ifndef rn */
-    transform: translateX(50%);
-    /* #endif */
   }
   &-indicator-vertical {
     left: auto;

package/dist/cjs/packages/swiperitem/style/style.harmony.css

@@ -0,0 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper-item {
+  height: 100%;
+}

package/dist/cjs/packages/switch/style/style.css

@@ -11,7 +11,7 @@
   min-width: var(--nutui-switch-width, 46px);
   height: var(--nutui-switch-height, 28px);
   line-height: var(--nutui-switch-line-height, 28px);
-  background-color: var(--nutui-switch-active-background-color, var(--nutui-brand-6));
+  background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-switch-border-radius, 50px);
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -46,7 +46,7 @@
   left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-gray-4));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-close-line {
   width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
@@ -78,14 +78,14 @@
   margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-close-disabled {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-label-close-disabled .nut-icon {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-disabled {
-  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-brand-3));
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-switch-disabled-close {
-  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-gray-3));
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
 }

package/dist/cjs/packages/switch/style/style.harmony.css

@@ -0,0 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 46px;
+  height: 28px;
+  line-height: 28px;
+  background-color: #ff0f23;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto;
+}
+.nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: calc(28px - 2px * 2);
+  width: calc(28px - 2px * 2);
+  border-radius: 50%;
+  background: #ffffff;
+  transition: left 0.3s linear;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.nut-switch-button-open {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-button-open-rtl {
+  left: 2px;
+}
+.nut-switch-button-close {
+  left: 2px;
+}
+.nut-switch-button-close-rtl {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-close {
+  background-color: #c2c4cc;
+}
+.nut-switch-close-line {
+  width: calc((28px - 2px * 2) / 2);
+  height: 2px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.nut-switch-label {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: #ffffff;
+  font-size: 12px;
+}
+.nut-switch-label .nut-icon {
+  color: #ffffff;
+}
+.nut-switch-label-open {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-open-rtl {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close-rtl {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: #c2c4cc;
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: #c2c4cc;
+}
+.nut-switch-disabled {
+  background-color: #ffadbe;
+}
+.nut-switch-disabled-close {
+  background-color: #f2f3f5;
+}