npm - @nutui/nutui-react-taro - Versions diffs - 3.0.18 → 3.0.19-beta.1 - Mend

@nutui/nutui-react-taro 3.0.18 → 3.0.19-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (920) hide show

package/dist/es/packages/tag/style/style.css CHANGED Viewed

@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

package/dist/es/packages/tag/style/style.harmony.css CHANGED Viewed

@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

package/dist/es/packages/tag/style/tag.scss CHANGED Viewed

@@ -62,7 +62,12 @@
   }
   &-custom-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;

package/dist/es/packages/tag/style-jmapp/style.css CHANGED Viewed

@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-text-xs));

package/dist/es/packages/tag/style-jmapp/tag.scss CHANGED Viewed

@@ -62,7 +62,12 @@
   }
   &-custom-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;

package/dist/es/packages/tag/style-jrkf/style.css CHANGED Viewed

@@ -54,7 +54,12 @@
   cursor: pointer;
 }
 .nut-tag-custom-icon {
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-tag-font-size, var(--nutui-font-text-xs));

package/dist/es/packages/tag/style-jrkf/tag.scss CHANGED Viewed

@@ -62,7 +62,12 @@
   }
   &-custom-icon {
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
     align-items: center;
     justify-content: center;
     font-size: $tag-font-size;

package/dist/es/packages/textarea/textarea.js CHANGED Viewed

@@ -22,7 +22,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
         "className",
         "value",
         "defaultValue",
@@ -36,6 +36,7 @@ export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
         "style",
         "plain",
         "status",
+        "viewId",
         "onChange",
         "onBlur",
         "onFocus"
@@ -97,6 +98,7 @@ export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
     });
     var _obj;
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+        id: viewId,
         className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix, "-plain"), plain), _define_property(_obj, "".concat(classPrefix, "-container"), !plain), _define_property(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
     }, /*#__PURE__*/ React.createElement(Textarea, _object_spread_props(_object_spread({}, rest), {
         ref: textareaRef,
@@ -121,7 +123,8 @@ export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
         onFocus: handleFocus,
         autoHeight: autoSize,
         maxlength: maxLength,
-        placeholder: placeholder !== undefined ? placeholder : locale.placeholder
+        placeholder: placeholder !== undefined ? placeholder : locale.placeholder,
+        showCount: showCount
     })), showCount && /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-limit"), _define_property({}, "".concat(classPrefix, "-limit-disabled"), disabled))
     }, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));

package/dist/es/packages/timeselect/style/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-color-background-sunken, #f7f8fc);
 }

package/dist/es/packages/timeselect/style/style.harmony.css CHANGED Viewed

@@ -83,8 +83,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -145,6 +142,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;
@@ -427,7 +427,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-color-background-sunken, #f7f8fc);
 }

package/dist/es/packages/timeselect/style/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/es/packages/timeselect/style-jmapp/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-gray-2, #f8f8f8);
 }

package/dist/es/packages/timeselect/style-jmapp/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/es/packages/timeselect/style-jrkf/style.css CHANGED Viewed

@@ -16,7 +16,9 @@
   width: var(--nutui-timeselect-date-width, 140px);
   min-width: var(--nutui-timeselect-date-width, 140px);
   height: 100%;
+  /* #ifndef dynamic*/
   overflow: auto;
+  /* #endif */
   background: var(--nutui-gray-2, #f0f0f0);
 }

package/dist/es/packages/timeselect/style-jrkf/timeselect.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     width: $timeselect-date-width;
     min-width: $timeselect-date-width;
     height: 100%;
+    /* #ifndef dynamic*/
     overflow: auto;
+    /* #endif */
     background: $color-background-sunken;
   }
 }

package/dist/es/packages/toast/style/style.css CHANGED Viewed

@@ -68,7 +68,7 @@
   font-size: var(--nutui-font-size-s, 12px);
 }
 .nut-toast-inner-large {
-  font-size: var(--nutui-font-size-l, 16px);
+  font-size: var(--nutui-font-size-l, 15px);
 }
 .nut-toast-center {
   top: var(--nutui-toast-inner-top, 48%);
@@ -83,6 +83,10 @@
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 20px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
@@ -90,6 +94,9 @@
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 22px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/es/packages/toast/style/style.harmony.css CHANGED Viewed

@@ -122,7 +122,7 @@
   font-size: var(--nutui-font-size-s, 12px);
 }
 .nut-toast-inner-large {
-  font-size: var(--nutui-font-size-l, 16px);
+  font-size: var(--nutui-font-size-l, 15px);
 }
 .nut-toast-center {
   top: var(--nutui-toast-inner-top, 48%);
@@ -137,6 +137,10 @@
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 20px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
@@ -144,6 +148,9 @@
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 22px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/es/packages/toast/style/toast.scss CHANGED Viewed

@@ -94,6 +94,10 @@
     color: #ffffff;
     text-align: $toast-inner-text-align;
     line-height: 20px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    height: auto;
   }
   &-title {
@@ -102,6 +106,9 @@
     font-weight: 600;
     text-align: $toast-inner-text-align;
     line-height: 22px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
   }
   .nut-icon {

package/dist/es/packages/toast/style-jmapp/style.css CHANGED Viewed

@@ -83,6 +83,10 @@
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 20px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
@@ -90,6 +94,9 @@
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 22px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/es/packages/toast/style-jmapp/toast.scss CHANGED Viewed

@@ -94,6 +94,10 @@
     color: #ffffff;
     text-align: $toast-inner-text-align;
     line-height: 20px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    height: auto;
   }
   &-title {
@@ -102,6 +106,9 @@
     font-weight: 600;
     text-align: $toast-inner-text-align;
     line-height: 22px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
   }
   .nut-icon {

package/dist/es/packages/toast/style-jrkf/style.css CHANGED Viewed

@@ -83,6 +83,10 @@
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 20px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
+  height: auto;
 }
 .nut-toast-title {
   color: #ffffff;
@@ -90,6 +94,9 @@
   font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
   line-height: 22px;
+  /* #ifdef harmony dynamic*/
+  line-height: normal;
+  /* #endif */
 }
 .nut-toast .nut-icon {
   width: 24px;

package/dist/es/packages/toast/style-jrkf/toast.scss CHANGED Viewed

@@ -94,6 +94,10 @@
     color: #ffffff;
     text-align: $toast-inner-text-align;
     line-height: 20px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
+    height: auto;
   }
   &-title {
@@ -102,6 +106,9 @@
     font-weight: 600;
     text-align: $toast-inner-text-align;
     line-height: 22px;
+    /* #ifdef harmony dynamic*/
+    line-height: normal;
+    /* #endif */
   }
   .nut-icon {

package/dist/es/packages/toast/toast.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { defaultOverlayProps } from "../overlay/overlay";
 import { customEvents, useCustomEvent, useCustomEventsPath, useParams } from "../../hooks/taro/use-custom-event";
 import { usePropsValue } from "../../hooks/use-props-value";
 import { useRtl } from "../configprovider/index";
-import { harmony } from "../../utils/taro/platform";
+import { harmony, td } from "../../utils/taro/platform";
 import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     id: '',
@@ -132,12 +132,15 @@ export var Toast = function(props) {
         id: id
     }, /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix, "-inner-descrption"), content)),
-        style: _object_spread({}, styles, contentStyle)
+        style: _object_spread({}, styles, contentStyle),
+        ariaRole: "alert"
     }, renderIcon(), title && /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, "-title")
-    }, title), content && /*#__PURE__*/ React.createElement(Text, {
+    }, title), content && (td() ? /*#__PURE__*/ React.createElement(Text, {
         className: "".concat(classPrefix, "-text")
-    }, content)))));
+    }, content) : /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-text")
+    }, content))))));
 };
 export function show(selector, options) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/es/packages/tour/style/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/es/packages/tour/style/style.harmony.css CHANGED Viewed

@@ -83,8 +83,8 @@
 .nut-popup-title-title {
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
+  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
@@ -145,6 +142,9 @@
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
 }
+.nut-popup-bottom-top {
+  position: absolute;
+}
 .nut-popup-right {
   top: 0;
   right: 0;
@@ -446,8 +446,10 @@
   font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   line-height: 28px;
+  /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
+  /* #endif */
 }
 .nut-popover .nut-popover-content-group {
   padding: 0 var(--nutui-popover-padding, 8px);
@@ -680,7 +682,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/es/packages/tour/style/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/es/packages/tour/style-jmapp/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/es/packages/tour/style-jmapp/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/es/packages/tour/style-jrkf/style.css CHANGED Viewed

@@ -18,7 +18,9 @@
   display: block;
   padding: var(--nutui-tour-content-padding, 10px 12px);
   min-width: var(--nutui-tour-content-min-width, 200px);
+  /* #ifndef dynamic*/
   box-sizing: content-box;
+  /* #endif */
 }
 .nut-tour-content-top {
   display: block;

package/dist/es/packages/tour/style-jrkf/tour.scss CHANGED Viewed

@@ -18,7 +18,9 @@
     display: block;
     padding: $tour-content-padding;
     min-width: $tour-content-min-width;
+    /* #ifndef dynamic*/
     box-sizing: content-box;
+    /* #endif */
     &-top {
       display: block;

package/dist/es/packages/uploader/style/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, 4px);
 }
 .nut-uploader-preview-img-file {

package/dist/es/packages/uploader/style/style.harmony.css CHANGED Viewed

@@ -224,7 +224,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, 4px);
 }
 .nut-uploader-preview-img-file {

package/dist/es/packages/uploader/style/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }

package/dist/es/packages/uploader/style-jmapp/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
 }
 .nut-uploader-preview-img-file {

package/dist/es/packages/uploader/style-jmapp/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }

package/dist/es/packages/uploader/style-jrkf/style.css CHANGED Viewed

@@ -164,7 +164,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  /* #ifndef dynamic*/
   position: initial;
+  /* #endif */
   border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
 }
 .nut-uploader-preview-img-file {

package/dist/es/packages/uploader/style-jrkf/uploader.scss CHANGED Viewed

@@ -179,7 +179,9 @@
         justify-content: center;
         align-items: center;
         height: 100%;
+        /* #ifndef dynamic*/
         position: initial;
+        /* #endif */
         border-radius: $uploader-image-border-radius;
       }