@nutui/nutui 3.1.19-beta.1 → 3.1.19-beta.4

package/dist/packages/_es/{index.taro.js → index5.js}

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,14 +16,15 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.4 Tue Apr 12 2022 17:39:20 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, reactive, onMounted, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, createVNode, withCtx, normalizeStyle, createTextVNode } from "vue";
+import { ref, computed, reactive, watch, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import Taro from "@tarojs/taro";
+import { r as requestAniFrame } from "./raf.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const Utils = {
   isLeapYear: function(y) {
@@ -104,8 +107,7 @@ const Utils = {
     return false;
   }
 };
-const { create } = createComponent("calendar-item");
-let TARO_ENV = {}.TARO_ENV;
+const { create, translate } = createComponent("calendar-item");
 const _sfc_main = create({
   props: {
     type: {
@@ -134,19 +136,19 @@ const _sfc_main = create({
     },
     title: {
       type: String,
-      default: "\u65E5\u5386\u9009\u62E9"
+      default: ""
     },
     confirmText: {
       type: String,
-      default: "\u786E\u8BA4"
+      default: ""
     },
     startText: {
       type: String,
-      default: "\u5F00\u59CB"
+      default: ""
     },
     endText: {
       type: String,
-      default: "\u7ED3\u675F"
+      default: ""
     },
     defaultValue: {
       type: [String, Array],
@@ -163,11 +165,13 @@ const _sfc_main = create({
   },
   emits: ["choose", "update", "close", "select"],
   setup(props, { emit, slots }) {
-    const weeks = ref(["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"]);
-    const scalePx = ref(2);
-    const viewHeight = ref(0);
+    const weeks = ref(translate("weekdays"));
     const months = ref(null);
-    computed(() => {
+    const monthsPanel = ref(null);
+    const weeksPanel = ref(null);
+    const viewArea = ref(null);
+    const viewHeight = ref(0);
+    const compConthsData = computed(() => {
       return state.monthsData.slice(state.defaultRange[0], state.defaultRange[1]);
     });
     const showTopBtn = computed(() => {
@@ -181,9 +185,7 @@ const _sfc_main = create({
     });
     const state = reactive({
       yearMonthTitle: "",
-      defaultRange: [0, 1],
-      compConthsDatas: [],
-      containerHeight: "",
+      defaultRange: [],
       currDate: "",
       propStartDate: "",
       propEndDate: "",
@@ -209,7 +211,6 @@ const _sfc_main = create({
       timer: 0,
       currentIndex: 0,
       avgHeight: 0,
-      scrollTop: 0,
       monthsNum: 0
     });
     const splitDate = (date) => {
@@ -229,7 +230,7 @@ const _sfc_main = create({
       if (day.type == "curr") {
         if (!state.isRange && Utils.isEqual(state.currDate, currDate) || state.isRange && (isStart(currDate) || isEnd(currDate))) {
           return `${state.dayPrefix}-active`;
-        } else if (props.startDate && Utils.compareDate(currDate, props.startDate) || props.endDate && Utils.compareDate(props.endDate, currDate)) {
+        } else if (state.propStartDate && Utils.compareDate(currDate, state.propStartDate) || state.propEndDate && Utils.compareDate(state.propEndDate, currDate)) {
           return `${state.dayPrefix}-disabled`;
         } else if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length == 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
           return `${state.dayPrefix}-choose`;
@@ -346,21 +347,13 @@ const _sfc_main = create({
       };
       const monthInfo = {
         curData,
-        title: `${title.year}\u5E74${title.month}\u6708`,
+        title: translate("monthTitle", title.year, title.month),
         monthData: [
           ...getPreDaysStatus(preMonthDays, "prev", { month: preMonth, year: preYear }, preCurrMonthDays),
           ...getDaysStatus(currMonthDays, "curr", title)
         ]
       };
-      let titleHeight, itemHeight;
-      if (TARO_ENV === "h5") {
-        titleHeight = 46 * scalePx.value + 16 * scalePx.value * 2;
-        itemHeight = 128 * scalePx.value;
-      } else {
-        titleHeight = Math.floor(46 * scalePx.value) + Math.floor(16 * scalePx.value) * 2;
-        itemHeight = Math.floor(128 * scalePx.value);
-      }
-      monthInfo.cssHeight = titleHeight + (monthInfo.monthData.length > 35 ? itemHeight * 6 : itemHeight * 5);
+      monthInfo.cssHeight = 39 + (monthInfo.monthData.length > 35 ? 384 : 320);
       let cssScrollHeight = 0;
       if (state.monthsData.length > 0) {
         cssScrollHeight = state.monthsData[state.monthsData.length - 1].cssScrollHeight + state.monthsData[state.monthsData.length - 1].cssHeight;
@@ -427,11 +420,11 @@ const _sfc_main = create({
       let current = 0;
       let lastCurrent = 0;
       state.monthsData.forEach((item, index) => {
-        if (item.title == `${state.defaultData[0]}\u5E74${state.defaultData[1]}\u6708`) {
+        if (item.title == translate("monthTitle", state.defaultData[0], state.defaultData[1])) {
           current = index;
         }
         if (state.isRange) {
-          if (item.title == `${state.defaultData[3]}\u5E74${state.defaultData[4]}\u6708`) {
+          if (item.title == translate("monthTitle", state.defaultData[3], state.defaultData[4])) {
             lastCurrent = index;
           }
         }
@@ -447,37 +440,26 @@ const _sfc_main = create({
       }
       let lastItem = state.monthsData[state.monthsData.length - 1];
       let containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;
-      state.containerHeight = `${containerHeight}px`;
-      state.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+      requestAniFrame(() => {
+        if ((months == null ? void 0 : months.value) && (monthsPanel == null ? void 0 : monthsPanel.value) && (viewArea == null ? void 0 : viewArea.value)) {
+          viewHeight.value = months.value.clientHeight;
+          monthsPanel.value.style.height = `${containerHeight}px`;
+          months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+        }
+      });
       state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
-      if (months == null ? void 0 : months.value) {
-        viewHeight.value = months.value.clientHeight;
-      }
-      if (TARO_ENV === "h5") {
-        Taro.nextTick(() => {
-          Taro.createSelectorQuery().select(".nut-calendar-content").boundingClientRect((res) => {
-            viewHeight.value = res.height;
-          }).exec();
-        });
-      }
     };
     const setDefaultRange = (monthsNum, current) => {
-      let rangeArr = [];
       if (monthsNum >= 3) {
         if (current > 0 && current < monthsNum) {
-          rangeArr = [current - 1, current + 3];
+          state.defaultRange = [current - 1, current + 3];
         } else if (current == 0) {
-          rangeArr = [current, current + 4];
+          state.defaultRange = [current, current + 4];
         } else if (current == monthsNum) {
-          rangeArr = [current - 2, current + 2];
+          state.defaultRange = [current - 2, current + 2];
         }
       } else {
-        rangeArr = [0, monthsNum + 1];
-      }
-      if (JSON.stringify(state.defaultRange) !== JSON.stringify(rangeArr)) {
-        state.defaultRange[0] = rangeArr[0];
-        state.defaultRange[1] = rangeArr[1];
-        state.compConthsDatas = state.monthsData.slice(rangeArr[0], rangeArr[1]);
+        state.defaultRange = [0, monthsNum + 2];
       }
       let defaultScrollTop = state.monthsData[state.defaultRange[0]].cssScrollHeight;
       state.translateY = defaultScrollTop;
@@ -519,7 +501,7 @@ const _sfc_main = create({
         }
       } else {
         const viewPosition = Math.round(currentScrollTop + viewHeight.value);
-        if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop < state.monthsData[current].cssScrollHeight) {
+        if (viewPosition < state.monthsData[current].cssScrollHeight + state.monthsData[current].cssHeight && currentScrollTop > state.monthsData[current - 1].cssScrollHeight) {
           current -= 1;
         }
         if (current + 1 <= state.monthsNum && viewPosition >= state.monthsData[current + 1].cssScrollHeight + state.monthsData[current + 1].cssHeight) {
@@ -540,21 +522,7 @@ const _sfc_main = create({
       state.monthsData.splice(0);
       initData();
     };
-    onMounted(() => {
-      Taro.getSystemInfo({
-        success(res) {
-          let scale = 2;
-          let screenWidth = res.screenWidth;
-          let toFixed = 3;
-          if (TARO_ENV === "h5") {
-            toFixed = 5;
-          }
-          scale = Number((screenWidth / 750).toFixed(toFixed));
-          scalePx.value = scale;
-          initData();
-        }
-      });
-    });
+    initData();
     watch(() => props.defaultValue, (val) => {
       if (val) {
         if (props.poppable) {
@@ -562,8 +530,9 @@ const _sfc_main = create({
         }
       }
     });
-    return __spreadValues(__spreadValues({
+    return __spreadProps(__spreadValues(__spreadValues({
       weeks,
+      compConthsData,
       showTopBtn,
       topInfo,
       bottomInfo,
@@ -575,8 +544,13 @@ const _sfc_main = create({
       chooseDay,
       isCurrDay,
       confirm,
-      months
-    }, toRefs(state)), toRefs(props));
+      monthsPanel,
+      months,
+      weeksPanel,
+      viewArea
+    }, toRefs(state)), toRefs(props)), {
+      translate
+    });
   }
 });
 const _hoisted_1 = {
@@ -591,10 +565,13 @@ const _hoisted_3 = {
   key: 2,
   class: "calendar-curr-month"
 };
-const _hoisted_4 = { class: "calendar-weeks" };
+const _hoisted_4 = {
+  class: "calendar-weeks",
+  ref: "weeksPanel"
+};
 const _hoisted_5 = {
   class: "calendar-months-panel",
-  style: { "{{heihgt": "containerHeight}}" }
+  ref: "monthsPanel"
 };
 const _hoisted_6 = { class: "calendar-month-title" };
 const _hoisted_7 = { class: "calendar-month-con" };
@@ -613,7 +590,7 @@ const _hoisted_12 = {
   class: "calendar-curr-tip-curr"
 };
 const _hoisted_13 = {
-  key: 3,
+  key: 4,
   class: "calendar-day-tip"
 };
 const _hoisted_14 = {
@@ -621,7 +598,6 @@ const _hoisted_14 = {
   class: "nut-calendar-footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_scroll_view = resolveComponent("scroll-view");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(["nut-calendar nut-calendar-taro", {
       "nut-calendar-tile": !_ctx.poppable,
@@ -631,7 +607,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("view", {
       class: normalizeClass(["nut-calendar-header", { "nut-calendar-header-tile": !_ctx.poppable }])
     }, [
-      _ctx.showTitle ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+      _ctx.showTitle ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.title || _ctx.translate("title")), 1)) : createCommentVNode("", true),
       _ctx.showTopBtn ? (openBlock(), createElementBlock("view", _hoisted_2, [
         renderSlot(_ctx.$slots, "btn")
       ])) : createCommentVNode("", true),
@@ -643,75 +619,72 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: index
           }, toDisplayString(item), 1);
         }), 128))
-      ])
+      ], 512)
     ], 2),
-    createVNode(_component_scroll_view, {
-      "scroll-top": _ctx.scrollTop,
-      "scroll-y": true,
+    createElementVNode("view", {
       class: "nut-calendar-content",
-      onScroll: _ctx.mothsViewScroll,
-      ref: "months"
-    }, {
-      default: withCtx(() => [
-        createElementVNode("view", _hoisted_5, [
-          createElementVNode("view", {
-            class: "viewArea",
-            style: normalizeStyle({ transform: `translateY(${_ctx.translateY}px)` })
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compConthsDatas, (month, index) => {
-              return openBlock(), createElementBlock("view", {
-                class: "calendar-month",
-                key: index
-              }, [
-                createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
-                createElementVNode("view", _hoisted_7, [
-                  createElementVNode("view", {
-                    class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
-                  }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
-                      return openBlock(), createElementBlock("view", {
-                        key: i,
-                        class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
-                        onClick: ($event) => _ctx.chooseDay(day, month)
-                      }, [
-                        createElementVNode("view", _hoisted_9, [
-                          renderSlot(_ctx.$slots, "day", {
-                            date: day.type == "curr" ? day : ""
-                          }, () => [
-                            createTextVNode(toDisplayString(day.type == "curr" ? day.day : ""), 1)
-                          ])
-                        ]),
-                        _ctx.topInfo ? (openBlock(), createElementBlock("view", _hoisted_10, [
-                          renderSlot(_ctx.$slots, "topInfo", {
-                            date: day.type == "curr" ? day : ""
-                          })
-                        ])) : createCommentVNode("", true),
-                        _ctx.bottomInfo ? (openBlock(), createElementBlock("view", _hoisted_11, [
-                          renderSlot(_ctx.$slots, "bottomInfo", {
-                            date: day.type == "curr" ? day : ""
-                          })
-                        ])) : createCommentVNode("", true),
-                        !_ctx.bottomInfo && _ctx.showToday && _ctx.isCurrDay(day) ? (openBlock(), createElementBlock("view", _hoisted_12, " \u4ECA\u5929 ")) : createCommentVNode("", true),
-                        createElementVNode("view", {
-                          class: normalizeClass({ "calendar-curr-tips-top": _ctx.rangeTip(day, month), "calendar-day-tip": true })
-                        }, toDisplayString(_ctx.isStartTip(day, month) ? _ctx.startText : ""), 3),
-                        _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_13, toDisplayString(_ctx.endText), 1)) : createCommentVNode("", true)
-                      ], 10, _hoisted_8);
-                    }), 128))
-                  ], 2)
-                ])
-              ]);
-            }), 128))
-          ], 4)
-        ])
-      ]),
-      _: 3
-    }, 8, ["scroll-top", "onScroll"]),
+      ref: "months",
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.mothsViewScroll && _ctx.mothsViewScroll(...args))
+    }, [
+      createElementVNode("view", _hoisted_5, [
+        createElementVNode("view", {
+          class: "viewArea",
+          ref: "viewArea",
+          style: normalizeStyle({ transform: `translateY(${_ctx.translateY}px)` })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compConthsData, (month, index) => {
+            return openBlock(), createElementBlock("view", {
+              class: "calendar-month",
+              key: index
+            }, [
+              createElementVNode("view", _hoisted_6, toDisplayString(month.title), 1),
+              createElementVNode("view", _hoisted_7, [
+                createElementVNode("view", {
+                  class: normalizeClass(["calendar-month-item", _ctx.type === "range" ? "month-item-range" : ""])
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(month.monthData, (day, i) => {
+                    return openBlock(), createElementBlock("view", {
+                      key: i,
+                      class: normalizeClass(["calendar-month-day", _ctx.getClass(day, month)]),
+                      onClick: ($event) => _ctx.chooseDay(day, month)
+                    }, [
+                      createElementVNode("view", _hoisted_9, [
+                        renderSlot(_ctx.$slots, "day", {
+                          date: day.type == "curr" ? day : ""
+                        }, () => [
+                          createTextVNode(toDisplayString(day.type == "curr" ? day.day : ""), 1)
+                        ])
+                      ]),
+                      _ctx.topInfo ? (openBlock(), createElementBlock("view", _hoisted_10, [
+                        renderSlot(_ctx.$slots, "topInfo", {
+                          date: day.type == "curr" ? day : ""
+                        })
+                      ])) : createCommentVNode("", true),
+                      _ctx.bottomInfo ? (openBlock(), createElementBlock("view", _hoisted_11, [
+                        renderSlot(_ctx.$slots, "bottomInfo", {
+                          date: day.type == "curr" ? day : ""
+                        })
+                      ])) : createCommentVNode("", true),
+                      !_ctx.bottomInfo && _ctx.showToday && _ctx.isCurrDay(day) ? (openBlock(), createElementBlock("view", _hoisted_12, toDisplayString(_ctx.translate("today")), 1)) : createCommentVNode("", true),
+                      _ctx.isStartTip(day, month) ? (openBlock(), createElementBlock("view", {
+                        key: 3,
+                        class: normalizeClass(["calendar-day-tip", { "calendar-curr-tips-top": _ctx.rangeTip(day, month) }])
+                      }, toDisplayString(_ctx.startText || _ctx.translate("start")), 3)) : createCommentVNode("", true),
+                      _ctx.isEndTip(day, month) ? (openBlock(), createElementBlock("view", _hoisted_13, toDisplayString(_ctx.endText || _ctx.translate("end")), 1)) : createCommentVNode("", true)
+                    ], 10, _hoisted_8);
+                  }), 128))
+                ], 2)
+              ])
+            ]);
+          }), 128))
+        ], 4)
+      ], 512)
+    ], 544),
     _ctx.poppable && !_ctx.isAutoBackFill ? (openBlock(), createElementBlock("view", _hoisted_14, [
       createElementVNode("view", {
         class: "calendar-confirm-btn",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.confirm && _ctx.confirm(...args))
-      }, toDisplayString(_ctx.confirmText), 1)
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.confirm && _ctx.confirm(...args))
+      }, toDisplayString(_ctx.confirmText || _ctx.translate("confirm")), 1)
     ])) : createCommentVNode("", true)
   ], 2);
 }

package/dist/packages/_es/plugin-vue_export-helper.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.4 Tue Apr 12 2022 17:39:20 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/pxCheck.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.19-beta.4 Tue Apr 12 2022 17:39:20 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/raf.js

@@ -0,0 +1,19 @@
+/*!
+* @nutui/nutui v3.1.19-beta.4 Tue Apr 12 2022 17:39:20 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+const _window = window;
+function requestAniFrame() {
+  if (typeof _window !== "undefined") {
+    return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
+      _window.setTimeout(callback, 1e3 / 60);
+    };
+  } else {
+    return function(callback) {
+      setTimeout(callback, 1e3 / 60);
+    };
+  }
+}
+var requestAniFrame$1 = requestAniFrame();
+export { requestAniFrame$1 as r };

package/dist/packages/actionsheet/index.scss

@@ -1,5 +1,9 @@
 .nut-actionsheet-panel {
   display: block;
+  &.nut-actionsheet-safebottom {
+    margin-bottom: constant(safe-area-inset-bottom);
+    margin-bottom: env(safe-area-inset-bottom);
+  }
   .nut-actionsheet-title {
     display: block;
     padding: 10px;
@@ -49,6 +53,7 @@
   .desc {
     font-size: $actionsheet-item-font-size;
     color: #999;
+    cursor: default;
   }
 
   .subdesc {
@@ -61,6 +66,9 @@
     color: #e1e1e1 !important;
     cursor: not-allowed;
   }
+  .nut-actionsheet-item-loading {
+    cursor: default;
+  }
 
   .nut-actionsheet-cancel {
     margin-top: 5px;

package/dist/packages/ecard/index.scss

@@ -0,0 +1,83 @@
+.nut-ecard {
+  width: 100%;
+
+  &__title {
+    line-height: 1;
+    font-size: 15px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  &__list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 15px;
+
+    &__item {
+      width: 48%;
+      height: 46px;
+      background: $ecard-bg-color;
+      border-radius: 4px;
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.active {
+        background: $white;
+        border: 1px solid $primary-color;
+        border-radius: 4px;
+      }
+    }
+
+    &__input {
+      width: 100%;
+      height: 46px;
+      background: $ecard-bg-color;
+      color: rgba(0, 0, 0, 0.8);
+      border-radius: 4px;
+      display: flex;
+      padding: 0 15px 0 20px;
+      font-size: 14px;
+      justify-content: space-between;
+      align-items: center;
+
+      &--con {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        > input {
+          caret-color: $primary-color; //光标颜色
+          text-align: right;
+          background: $ecard-bg-color;
+          margin-right: 10px;
+          outline: 0 none;
+          border: 0;
+          text-decoration: none;
+        }
+      }
+
+      &.active {
+        background: $white;
+        border: 1px solid $primary-color;
+
+        > view > input {
+          background: $white;
+        }
+      }
+    }
+
+    &__step {
+      width: 100%;
+      margin-top: 17px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 20px;
+      font-family: PingFangSC;
+      font-weight: normal;
+      color: $primary-color;
+    }
+  }
+}