@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

package/dist/cjs/packages/progress/progress.js

@@ -22,7 +22,7 @@ var _components = require("@tarojs/components");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
-var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-uuid"));
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
 var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     percent: 0,
@@ -144,7 +144,7 @@ var Progress = function Progress(props) {
     (0, _react.useEffect)(function() {
         if ((0, _platformtaro.web)()) {
             handleWebObserver();
-        } else if (!(0, _platformtaro.harmonyAndRn)()) {
+        } else if (!(0, _platformtaro.harmony)()) {
             handleOtherObserver();
         }
     }, []);
@@ -159,19 +159,16 @@ var Progress = function Progress(props) {
         if (children) {
             return 0;
         }
-        if (!(0, _platformtaro.harmonyAndRn)()) {
+        if (!(0, _platformtaro.harmony)()) {
             return Math.floor("".concat(percent, "%").length * 9 / 2);
         }
-        if ((0, _platformtaro.rn)()) {
-            return "".concat(percent, "%").length * 9 + 4;
-        }
         return Math.floor(("".concat(percent, "%").length * 9 + 4) / 2);
     };
     var computeInnerStyle = function computeInnerStyle() {
         var style = {
             backgroundColor: color || '#ff0f23'
         };
-        if ((0, _platformtaro.harmonyAndRn)()) {
+        if ((0, _platformtaro.harmony)()) {
             style.width = (0, _platformtaro.harmony)() ? (0, _pxtransform.default)("".concat(percent, "%").length * 9 + 4) : "".concat(percent, "%").length * 9 + 4;
         }
         return style;

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

@@ -12,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-gray-3));
+  background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";

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

@@ -0,0 +1,77 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-progress {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+.nut-progress-outer {
+  flex: auto;
+  border-radius: 12px;
+  height: 10px;
+  background: #f2f3f5;
+}
+.nut-progress-outer .nut-progress-active:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 12px;
+  animation: progressActive 2s ease-in-out infinite;
+}
+.nut-progress-inner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: all 0.4s;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+}
+.nut-progress-text {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  transition: all 0.4s;
+  transform: translate(-50%);
+}
+.nut-progress-text-inner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: #ffffff;
+  padding: 0 5px;
+  border-radius: 5px;
+  font-size: 9px;
+  line-height: 1;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+}
+@keyframes progressActive {
+  0% {
+    background: rgba(255, 255, 255, 0.1);
+    width: 0;
+  }
+  20% {
+    background: rgba(255, 255, 255, 0.5);
+    width: 0;
+  }
+  to {
+    background: rgba(255, 255, 255, 0);
+    width: 100%;
+  }
+}
+
+[dir=rtl] .nut-progress-text,
+.nut-rtl .nut-progress-text {
+  transform: translate(50%);
+}

package/dist/cjs/packages/pulltorefresh/pulltorefresh.js

@@ -22,12 +22,12 @@ var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
 var _index = require("../configprovider/index");
-var _usetouch = require("../../utils/use-touch");
+var _usetouch = require("../../hooks/use-touch");
 var _rubberband = require("../../utils/rubberband");
 var _sleep = require("../../utils/sleep");
 var _typings = require("../../utils/typings");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _platformtaro = require("../../utils/platform-taro");
+var _getsysteminfo = require("../../utils/get-system-info");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     type: 'default',
     pullingText: '',
@@ -36,7 +36,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     completeText: '',
     completeDelay: 500,
     disabled: false,
-    headHeight: 50,
+    headHeight: 80,
     threshold: 60,
     scrollTop: 0,
     onRefresh: function onRefresh() {}
@@ -99,11 +99,6 @@ var PullToRefresh = function PullToRefresh(p) {
             setStatus(height > threshold ? 'canRelease' : 'pulling');
         }
         clearTimeout(timer.current);
-        if ((0, _platformtaro.rn)()) {
-            timer.current = setTimeout(function() {
-                handleTouchEnd();
-            }, 300);
-        }
     };
     function _doRefresh() {
         _doRefresh = (0, _async_to_generator._)(function() {
@@ -173,7 +168,7 @@ var PullToRefresh = function PullToRefresh(p) {
         }
     };
     // 安卓微信小程序onTouchMove回调次数少导致下拉卡顿，增加动效会更顺畅
-    var isAndroidWeApp = _taro.default.getSystemInfoSync().platform === 'android' && _taro.default.getEnv() === 'WEAPP';
+    var isAndroidWeApp = (0, _getsysteminfo.getDeviceInfo)().platform === 'android' && _taro.default.getEnv() === 'WEAPP';
     var springStyles = (0, _object_spread._)({
         height: (0, _pxtransform.default)(height)
     }, !pullingRef.current || isAndroidWeApp ? {
@@ -183,6 +178,7 @@ var PullToRefresh = function PullToRefresh(p) {
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
         style: props.style,
+        catchMove: true,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd

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

@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;

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

@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-text-help, #888b94);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -24,13 +24,13 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
 }
 .nut-pulltorefresh-primary-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-head-content {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 .nut-pulltorefresh-primary-status-text {
   color: #ffffff;

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

@@ -0,0 +1,43 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pulltorefresh-head {
+  overflow: hidden;
+  position: relative;
+  font-size: 12px;
+}
+.nut-pulltorefresh-head-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: #888b94;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-pulltorefresh-head-content-icons {
+  width: 36px;
+  height: 26px;
+  margin-bottom: 4px;
+}
+.nut-pulltorefresh-primary {
+  background: #ff0f23;
+}
+.nut-pulltorefresh-primary-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-head-content {
+  color: rgba(255, 255, 255, 0.9);
+}
+.nut-pulltorefresh-primary-status-text {
+  color: #ffffff;
+}
+
+[dir=rtl] .nut-pulltorefresh-head-content,
+.nut-rtl .nut-pulltorefresh-head-content {
+  left: auto;
+  right: 0;
+}

package/dist/cjs/packages/radio/radio.js

@@ -21,7 +21,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _context = /*#__PURE__*/ _interop_require_default._(require("../radiogroup/context"));
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     disabled: false,
     shape: 'round',

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

@@ -3,11 +3,6 @@
   align-items: center;
   flex-shrink: 0;
 
-  &:last-child {
-    margin-bottom: 0 !important;
-    margin-right: 0 !important;
-  }
-
   &.nut-radio-reverse {
     flex-direction: row-reverse;
 
@@ -54,6 +49,7 @@
   &-button {
     display: inline-flex;
     align-items: center;
+    min-height: 30px;
     padding: $radio-button-padding;
     font-size: $radio-button-font-size;
     background: $radio-button-background;

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

@@ -11,6 +11,9 @@
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
 .nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
   width: 100%;
   justify-content: space-between;
@@ -19,23 +22,26 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
-.nut-radiogroup-horizontal .nut-radio {
-  display: inline-flex;
+.nut-radiogroup-horizontal {
+  display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -49,10 +55,6 @@
   align-items: center;
   flex-shrink: 0;
 }
-.nut-radio:last-child {
-  margin-bottom: 0 !important;
-  margin-right: 0 !important;
-}
 .nut-radio.nut-radio-reverse {
   flex-direction: row-reverse;
 }
@@ -63,53 +65,54 @@
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-gray-4));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-radio-icon {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-radio-icon-checked {
-  color: var(--nutui-brand-6);
+  color: var(--nutui-color-primary, #ff0f23);
   box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
   border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-brand-3);
+  color: var(--nutui-color-primary-disabled-special, #ffadbe);
   box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
 }
 .nut-radio-button {
   display: inline-flex;
   align-items: center;
+  min-height: 30px;
   padding: var(--nutui-radio-button-padding, 5px 18px);
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
   border-radius: var(--nutui-radio-button-border-radius, 15px);
-  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
+  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
   box-sizing: border-box;
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: var(--nutui-brand-1);
-  color: var(--nutui-brand-6);
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background: var(--nutui-color-primary-light-pressed, #ffebf1);
+  color: var(--nutui-color-primary, #ff0f23);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-gray-4);
+  color: var(--nutui-color-text-disabled, #c2c4cc);
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -0,0 +1,90 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-radio {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.nut-radio.nut-radio-reverse {
+  flex-direction: row-reverse;
+}
+.nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.nut-radio-label {
+  margin-left: 4px;
+  font-size: 12px;
+  color: #1a1a1a;
+}
+.nut-radio-label-disabled {
+  color: #c2c4cc;
+}
+.nut-radio-icon {
+  color: #c2c4cc;
+  transition-duration: 0.3s;
+  transition-property: color, border-color, background-color;
+  font-size: 16px;
+}
+.nut-radio-icon-checked {
+  color: #ff0f23;
+  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  border-radius: 50%;
+}
+.nut-radio-icon-checked.nut-radio-icon-disabled {
+  color: #ffadbe;
+  box-shadow: none;
+}
+.nut-radio-icon-disabled {
+  color: #c2c4cc;
+}
+.nut-radio-button {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 5px 18px;
+  font-size: 12px;
+  background: rgba(250, 44, 25, 0.05);
+  border-radius: 15px;
+  color: #1a1a1a;
+  box-sizing: border-box;
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radio-button-active {
+  background: #ffebf1;
+  color: #ff0f23;
+  border: 1px solid #ff0f23;
+}
+.nut-radio-button-disabled {
+  color: #c2c4cc;
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radio .nut-radio-button-active.nut-radio-button-disabled {
+  background: #c2c4cc;
+  color: #ffffff;
+  border: 1px solid #c2c4cc;
+}
+
+[dir=rtl] .nut-radio:last-child,
+.nut-rtl .nut-radio:last-child {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+[dir=rtl] .nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-left: 4px;
+  margin-right: 0;
+}
+.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label {
+  margin-left: 4px;
+  margin-right: 0;
+}
+[dir=rtl] .nut-radio-label {
+  margin-left: 0;
+  margin-right: 4px;
+}
+.nut-rtl .nut-radio-label {
+  margin-left: 0;
+  margin-right: 4px;
+}

package/dist/cjs/packages/radiogroup/radiogroup.js

@@ -20,7 +20,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
 var _index = /*#__PURE__*/ _interop_require_default._(require("../radio/index"));
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var defaultProps = {
     labelPosition: 'right',
     onChange: function onChange(value) {},

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

@@ -9,6 +9,10 @@
     &-button {
       background-color: $radio-button-background;
     }
+
+    &:last-child {
+      margin: 0;
+    }
   }
 
   &-vertical {
@@ -30,9 +34,9 @@
   }
 
   &-horizontal {
-    .nut-radio {
-      display: inline-flex;
+    display: flex;
 
+    .nut-radio {
       &-button {
         border: 1px solid $white;
       }
@@ -41,6 +45,10 @@
         border: $radio-button-active-border;
         background-color: $color-primary-light-pressed;
       }
+
+      &:last-child {
+        margin: 0 $radiogroup-radio-margin $radiogroup-radio-margin-bottom 0;
+      }
     }
   }
 

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

@@ -11,6 +11,9 @@
 .nut-radiogroup .nut-radio-button {
   background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
 .nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
   width: 100%;
   justify-content: space-between;
@@ -19,23 +22,26 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
 }
-.nut-radiogroup-horizontal .nut-radio {
-  display: inline-flex;
+.nut-radiogroup-horizontal {
+  display: flex;
 }
 .nut-radiogroup-horizontal .nut-radio-button {
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
-  background-color: var(--nutui-brand-1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-gray-4);
+  background: var(--nutui-color-text-disabled, #c2c4cc);
   color: #ffffff;
-  border: 1px solid var(--nutui-gray-4);
+  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -0,0 +1,55 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-radiogroup .nut-radio {
+  margin: 0 20px 5px 0;
+}
+.nut-radiogroup .nut-radio-label {
+  margin: 0 5px;
+}
+.nut-radiogroup .nut-radio-button {
+  background-color: rgba(250, 44, 25, 0.05);
+}
+.nut-radiogroup .nut-radio:last-child {
+  margin: 0;
+}
+.nut-radiogroup-vertical .nut-radio.nut-radio-reverse {
+  width: 100%;
+  justify-content: space-between;
+}
+.nut-radiogroup-vertical .nut-radio-button {
+  border: 1px solid rgba(250, 44, 25, 0.05);
+}
+.nut-radiogroup-vertical .nut-radio-button-active {
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
+}
+.nut-radiogroup-horizontal {
+  display: flex;
+}
+.nut-radiogroup-horizontal .nut-radio-button {
+  border: 1px solid #ffffff;
+}
+.nut-radiogroup-horizontal .nut-radio-button-active {
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
+}
+.nut-radiogroup-horizontal .nut-radio:last-child {
+  margin: 0 20px 5px 0;
+}
+.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
+  background: #c2c4cc;
+  color: #ffffff;
+  border: 1px solid #c2c4cc;
+}
+
+[dir=rtl] .nut-radiogroup .nut-radio {
+  margin-left: 20px;
+  margin-right: 0;
+}
+
+.nut-rtl .nut-radiogroup .nut-radio {
+  margin-left: 20px;
+  margin-right: 0;
+}