@nutui/nutui 3.1.10 → 3.1.12-beta.1

package/dist/styles/variables.scss

@@ -44,6 +44,7 @@ $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;
 $button-small-height: 28px !default;
+$button-mini-height: 24px !default;
 $button-default-height: 38px !default;
 $button-large-height: 48px !default;
 $button-large-line-height: 46px !default;
@@ -109,8 +110,8 @@ $icon-line-height: 20px !default;
 
 // uploader
 
-$uploader-width: 100px !default;
-$uploader-height: 100px !default;
+$uploader-picture-width: 100px !default;
+$uploader-picture-height: 100px !default;
 $uploader-background: #f7f8fa !default;
 
 //input
@@ -258,10 +259,13 @@ $checkbox-label-disable-color: #999 !default;
 $checkbox-icon-disable-color: #d6d6d6 !default;
 
 //radio
-$radio-label-color: #1d1e1e !default;
+$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-active-color: #f0250f !default;
 $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
 
+$radio-label-button-border-color: #f0250f !default;
+$radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
 //fixednav
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
@@ -357,10 +361,48 @@ $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
 
+// menu
+$nut-menu-bar-line-height: 46px !default;
+$nut-menu-bar-border-bottom-color: #eaf0fb !default;
+$nut-menu-bar-opened-z-index: 2001 !default;
+$nut-menu-item-disabled-color: #969799 !default;
+$nut-menu-title-text-padding-left: 8px !default;
+$nut-menu-title-text-padding-right: 8px !default;
+$nut-menu-item-content-padding: 12px 24px !default;
+$nut-menu-item-content-max-height: 214px !default;
+$nut-menu-item-option-padding-top: 12px !default;
+$nut-menu-item-option-padding-bottom: 12px !default;
+$nut-menu-item-option-i-margin-right: 6px !default;
+
 // searchbar
 $searchbar-background: $white !default;
 $searchbar-input-background: #f7f7f7 !default;
 $searchbar-right-out-color: $black !default;
 
+// form
+$form-item-error-line-color: $primary-color !default;
+$form-item-required-color: $primary-color !default;
+$form-item-error-message-color: $primary-color !default;
+
+// sku
+$sku-item-border: 1px solid $primary-color;
+$sku-item-disable-line: line-through;
+$sku-opetate-bg-default: linear-gradient(
+  135deg,
+  rgba(242, 20, 12, 1) 0%,
+  rgba(242, 39, 12, 1) 70%,
+  rgba(242, 77, 12, 1) 100%
+);
+$sku-opetate-bg-buy: linear-gradient(
+  135deg,
+  rgba(255, 186, 13, 1) 0%,
+  rgba(255, 195, 13, 1) 69%,
+  rgba(255, 207, 13, 1) 100%
+);
+// card
+$card-font-size-0: $font-size-0;
+$card-font-size-1: $font-size-1;
+$card-font-size-2: $font-size-2;
+$card-font-size-3: $font-size-3;
 @import './mixins/index';
 @import './animation/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.1.10",
+  "version": "3.1.12-beta.1",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.js",
   "module": "dist/nutui.es.js",
@@ -64,7 +64,7 @@
     }
   },
   "dependencies": {
-    "sass": "^1.34.0",
+    "sass": "~1.32.0",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
@@ -90,6 +90,7 @@
     "fs-extra": "^9.1.0",
     "highlight.js": "^10.3.1",
     "husky": "^6.0.0",
+    "inquirer": "^8.2.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.0",
     "prettier": "^2.0.0",

package/dist/packages/_es/Video.js

@@ -1,405 +0,0 @@
-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;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-/*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
-* Released under the MIT License.
-*/
-import { reactive, ref, computed, watch, nextTick, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createCommentVNode, withDirectives, vShow, normalizeClass, toDisplayString, normalizeStyle, withModifiers } from "vue";
-import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
-const throttle = (func, wait, type) => {
-  if (type === 1) {
-    var previous = 0;
-  } else if (type === 2) {
-    var timeout;
-  }
-  return function() {
-    let context = this;
-    let args = arguments;
-    if (type === 1) {
-      let now = Date.now();
-      if (now - previous > wait) {
-        func.apply(context, args);
-        previous = now;
-      }
-    } else if (type === 2) {
-      if (!timeout) {
-        timeout = setTimeout(() => {
-          timeout = null;
-          func.apply(context, args);
-        }, wait);
-      }
-    }
-  };
-};
-const { create } = createComponent("video");
-const _sfc_main = create({
-  props: {
-    source: {
-      type: Object,
-      default: {}
-    },
-    options: {
-      type: Object,
-      default: {
-        autoplay: false,
-        volume: 0.5,
-        poster: "",
-        loop: false,
-        controls: true,
-        muted: false,
-        disabled: false,
-        playsinline: false,
-        touchPlay: false,
-        preload: ""
-      },
-      required: true
-    },
-    model: {
-      type: String,
-      default: ""
-    }
-  },
-  components: {},
-  emits: ["click", "play", "pause", "playend"],
-  setup(props, { emit }) {
-    const state = reactive({
-      videoElm: null,
-      initial: true,
-      showToolbox: false,
-      player: {
-        $player: null,
-        pos: null
-      },
-      progressBar: {
-        progressElm: null,
-        pos: null
-      },
-      videoSet: {
-        loaded: 0,
-        displayTime: "00:00",
-        totalTime: "00:00",
-        progress: {
-          width: 0,
-          current: 0
-        }
-      },
-      state: {
-        controlShow: true,
-        vol: 0.5,
-        currentTime: 0,
-        fullScreen: false,
-        playing: false,
-        isLoading: false,
-        isEnd: false,
-        isError: false,
-        isMuted: false
-      },
-      showTouchMask: false
-    });
-    const root = ref();
-    const isDisabled = computed(() => {
-      return props.options.disabled;
-    });
-    watch(props.source, (newValue) => {
-      if (newValue.src) {
-        nextTick(() => {
-          state.videoElm.load();
-        });
-      }
-    });
-    watch(props.options, (newValue) => {
-      state.state.isMuted = newValue.muted ? newValue.muted : false;
-    }, { immediate: true });
-    const init = () => {
-      state.videoElm = root.value;
-      if (props.options.autoplay) {
-        state.videoElm.play();
-      }
-      if (props.options.touchPlay) {
-        state.showTouchMask = true;
-      }
-      if (props.options.playsinline) {
-        state.videoElm.setAttribute("playsinline", props.options.playsinline);
-        state.videoElm.setAttribute("webkit-playsinline", props.options.playsinline);
-        state.videoElm.setAttribute("x5-video-player-type", "h5-page");
-        state.videoElm.setAttribute("x5-video-player-fullscreen", false);
-      }
-      volumeHandle();
-      if (state.showToolbox) {
-        customerInit();
-      } else {
-        state.videoElm.addEventListener("play", () => {
-          state.state.playing = true;
-          emit("play", state.videoElm);
-        });
-        state.videoElm.addEventListener("pause", () => {
-          state.state.playing = false;
-          emit("pause", state.videoElm);
-        });
-        state.videoElm.addEventListener("ended", playEnded);
-        state.videoElm.addEventListener("timeupdate", throttle(getPlayTime, 100, 1));
-      }
-    };
-    const customerInit = () => {
-      const $player = root.value;
-      const $progress = root.value.getElementsByClassName("progress")[0];
-      state.player.$player = $player;
-      state.progressBar.progressElm = $progress;
-      state.progressBar.pos = $progress.getBoundingClientRect();
-      state.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
-    };
-    const play = () => {
-      if (props.options.autoplay && props.options.disabled) {
-        state.state.playing = true;
-        return false;
-      }
-      state.state.playing = !state.state.playing;
-      if (state.videoElm) {
-        if (state.state.playing) {
-          try {
-            state.videoElm.play();
-            state.videoElm.addEventListener("progress", () => {
-              getLoadTime();
-            });
-            state.videoElm.addEventListener("timeupdate", throttle(getPlayTime, 100, 1));
-            state.videoElm.addEventListener("ended", playEnded);
-            emit("play", state.videoElm);
-          } catch (e) {
-            handleError();
-          }
-        } else {
-          state.videoElm.pause();
-          emit("pause", state.videoElm);
-        }
-      }
-    };
-    const timeFormat = (t) => {
-      var h = Math.floor(t / 3600);
-      if (h < 10) {
-        h = "0" + h;
-      }
-      var m = Math.floor(t % 3600 / 60);
-      if (m < 10) {
-        m = "0" + m;
-      }
-      var s = Math.round(t % 3600 % 60);
-      if (s < 10) {
-        s = "0" + s;
-      }
-      var str = "";
-      if (h != 0) {
-        str = h + ":" + m + ":" + s;
-      } else {
-        str = m + ":" + s;
-      }
-      return str;
-    };
-    const getLoadTime = () => {
-      if (state.videoSet.loaded)
-        state.videoSet.loaded = state.videoElm.buffered.end(0) / state.videoElm.duration * 100;
-    };
-    const getPlayTime = () => {
-      const percent = state.videoElm.currentTime / state.videoElm.duration;
-      state.videoSet.progress.current = Math.round(state.videoSet.progress.width * percent);
-      state.videoSet.totalTime = timeFormat(state.videoElm.duration);
-      state.videoSet.displayTime = timeFormat(state.videoElm.currentTime);
-    };
-    const playEnded = () => {
-      state.state.playing = false;
-      state.state.isEnd = true;
-      state.videoSet.displayTime = "00:00";
-      state.videoSet.progress.current = 0;
-      state.videoElm.currentTime = 0;
-      emit("playend", state.videoElm);
-    };
-    const handleError = () => {
-      state.state.isError = true;
-    };
-    const volumeHandle = () => {
-      state.state.vol = props.options.volume;
-    };
-    const handleMuted = () => {
-      state.state.isMuted = !state.state.isMuted;
-      state.videoElm.muted = state.state.isMuted;
-    };
-    const touchSlidSrart = () => {
-    };
-    const touchSlidMove = (e) => {
-      let currentX = e.targetTouches[0].pageX;
-      let offsetX = currentX - state.progressBar.pos.left;
-      if (offsetX <= 0) {
-        offsetX = 0;
-      }
-      if (offsetX >= state.videoSet.progress.width) {
-        offsetX = state.videoSet.progress.width;
-      }
-      state.videoSet.progress.current = offsetX;
-      let percent = state.videoSet.progress.current / state.videoSet.progress.width;
-      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
-    };
-    const touchSlidEnd = (e) => {
-      let currentX = e.changedTouches[0].pageX;
-      let offsetX = currentX - state.progressBar.pos.left;
-      state.videoSet.progress.current = offsetX;
-      let percent = offsetX / state.videoSet.progress.width;
-      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
-    };
-    const setPlayTime = (percent, totalTime) => {
-      state.videoElm.currentTime = Math.floor(percent * totalTime);
-    };
-    const retry = () => {
-      state.state.isError = false;
-      init();
-    };
-    const fullScreen = () => {
-      if (!state.state.fullScreen) {
-        state.state.fullScreen = true;
-        state.videoElm.webkitRequestFullScreen();
-      } else {
-        state.state.fullScreen = false;
-        document.webkitCancelFullScreen();
-      }
-    };
-    onMounted(() => {
-      init();
-    });
-    return __spreadProps(__spreadValues(__spreadValues({
-      root
-    }, toRefs(props)), toRefs(state)), {
-      handleError,
-      isDisabled,
-      play,
-      handleMuted,
-      touchSlidSrart,
-      touchSlidMove,
-      touchSlidEnd,
-      retry,
-      fullScreen
-    });
-  }
-});
-const _hoisted_1 = {
-  class: "nut-video",
-  ref: "videocon"
-};
-const _hoisted_2 = ["muted", "autoplay", "loop", "poster", "controls", "preload"];
-const _hoisted_3 = ["src", "type"];
-const _hoisted_4 = { class: "current-time" };
-const _hoisted_5 = { class: "progress-container" };
-const _hoisted_6 = {
-  class: "progress",
-  ref: "progressBar"
-};
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "move-handle" }, null, -1);
-const _hoisted_8 = [
-  _hoisted_7
-];
-const _hoisted_9 = {
-  class: "played",
-  ref: "playedBar"
-};
-const _hoisted_10 = { class: "duration-time" };
-const _hoisted_11 = { class: "nut-video-error" };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("p", { class: "lose" }, "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25", -1);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("video", {
-      ref: "root",
-      class: "nut-video-player",
-      muted: _ctx.options.muted,
-      autoplay: _ctx.options.autoplay,
-      loop: _ctx.options.loop,
-      poster: _ctx.options.poster,
-      controls: _ctx.options.controls,
-      preload: _ctx.options.preload,
-      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-    }, [
-      createElementVNode("source", {
-        src: _ctx.source.src,
-        type: _ctx.source.type
-      }, null, 8, _hoisted_3)
-    ], 40, _hoisted_2),
-    _ctx.showToolbox && !_ctx.isDisabled ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: "playing-mask",
-      ref: "touchMask",
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.play && _ctx.play(...args))
-    }, null, 512)) : createCommentVNode("", true),
-    _ctx.showToolbox && !_ctx.isDisabled ? withDirectives((openBlock(), createElementBlock("div", {
-      key: 1,
-      class: "nut-video-play-btn",
-      ref: "palyBtn",
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.play && _ctx.play(...args))
-    }, null, 512)), [
-      [vShow, !_ctx.state.playing]
-    ]) : createCommentVNode("", true),
-    withDirectives(createElementVNode("div", {
-      class: normalizeClass(["nut-video-controller", { "show-control": !_ctx.state.playing, "hide-control": _ctx.state.playing }])
-    }, [
-      createElementVNode("div", {
-        class: "control-play-btn",
-        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.play && _ctx.play(...args))
-      }),
-      createElementVNode("div", _hoisted_4, toDisplayString(_ctx.videoSet.displayTime), 1),
-      createElementVNode("div", _hoisted_5, [
-        createElementVNode("div", _hoisted_6, [
-          createElementVNode("div", {
-            class: "buffered",
-            style: normalizeStyle({ width: `${_ctx.videoSet.loaded}%` })
-          }, null, 4),
-          createElementVNode("div", {
-            class: "video-ball",
-            style: normalizeStyle({
-              transform: `translate3d(${_ctx.videoSet.progress.current}px, -50%, 0)`
-            }),
-            onTouchmove: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.touchSlidMove($event), ["stop", "prevent"])),
-            onTouchstart: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.touchSlidSrart($event), ["stop"])),
-            onTouchend: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.touchSlidEnd($event), ["stop"]))
-          }, _hoisted_8, 36),
-          createElementVNode("div", _hoisted_9, null, 512)
-        ], 512)
-      ]),
-      createElementVNode("div", _hoisted_10, toDisplayString(_ctx.videoSet.totalTime), 1),
-      createElementVNode("div", {
-        class: normalizeClass(["volume", { muted: _ctx.state.isMuted }]),
-        onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleMuted && _ctx.handleMuted(...args))
-      }, null, 2),
-      createElementVNode("div", {
-        class: "fullscreen-icon",
-        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.fullScreen && _ctx.fullScreen(...args))
-      })
-    ], 2), [
-      [vShow, _ctx.showToolbox && !_ctx.isDisabled]
-    ]),
-    withDirectives(createElementVNode("div", _hoisted_11, [
-      _hoisted_12,
-      createElementVNode("p", {
-        class: "retry",
-        onClick: _cache[9] || (_cache[9] = (...args) => _ctx.retry && _ctx.retry(...args))
-      }, "\u70B9\u51FB\u91CD\u8BD5")
-    ], 512), [
-      [vShow, _ctx.state.isError]
-    ])
-  ], 512);
-}
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };

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

@@ -1,12 +0,0 @@
-/*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
-* Released under the MIT License.
-*/
-var _export_sfc = (sfc, props) => {
-  for (const [key, val] of props) {
-    sfc[key] = val;
-  }
-  return sfc;
-};
-export { _export_sfc as _ };

package/dist/packages/_es/style.css

@@ -1,160 +0,0 @@
-.nut-menu {
-  position: relative;
-  font-size: 14px;
-  color: #1a1a1a;
-}
-.nut-menu .title-list {
-  display: flex;
-  line-height: 46px;
-  align-items: center;
-  background-color: #fff;
-  border-bottom: 1px solid #eaf0fb;
-}
-.nut-menu .title-list .title {
-  flex: 1;
-  text-align: center;
-}
-.nut-menu .title-list .title.is-active {
-  font-weight: 600;
-}
-.nut-menu .title-list .title.disabled {
-  color: #999;
-}
-.nut-menu .title-list .title [class*=nut-icon-arrow] {
-  vertical-align: middle;
-  margin-right: 2px;
-}
-.nut-menu .customer-item, .nut-menu .option-list {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-radius: 0 0 12px 12px;
-  background-color: #fff;
-}
-.nut-menu .option-list {
-  max-height: 214px;
-  overflow-y: auto;
-}
-.nut-menu .option-list ul {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.nut-menu .option-list li {
-  line-height: 38px;
-  padding-left: 24px;
-  box-sizing: border-box;
-}
-.nut-menu .option-list li .nut-icon-Check {
-  vertical-align: middle;
-  margin-right: 6px;
-}
-.nut-menu .customer-item {
-  padding-left: 24px;
-  padding-right: 24px;
-  box-sizing: border-box;
-}.nut-menu-item[data-v-02edb907] {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0 5px;
-}
-.nut-menu-item.disabled[data-v-02edb907] {
-  color: #999;
-}
-.nut-menu-item.nut-menu-item-active .nut-menu-title[data-v-02edb907] {
-  font-weight: bold;
-}
-.nut-menu-item.nut-menu-item-active .nut-menu-title .icon[data-v-02edb907] {
-  color: #1a1a1a;
-  transition: all ease 0.3s;
-  transform: rotate(-180deg);
-  background: url("https://img14.360buyimg.com/imagetools/jfs/t1/144044/16/20214/521/5fe5bb14Ebf213fe3/40f271b982f31898.png") no-repeat;
-  background-size: contain;
-}
-.nut-menu-item.nut-menu-item-active .nut-menu-panel[data-v-02edb907] {
-  display: block;
-}
-.nut-menu-title[data-v-02edb907] {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-.nut-menu-title .title-name[data-v-02edb907] {
-  white-space: nowrap;
-  max-width: 100px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.nut-menu-title .icon[data-v-02edb907] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: url("https://img13.360buyimg.com/imagetools/jfs/t1/152898/12/10149/452/5fd990b5Ec7c12d70/3bf06076b758bed1.png") no-repeat;
-  background-size: contain;
-  color: #909ca4;
-  transform: rotate(0deg);
-  transition: all ease 0.3s;
-  margin: 0 2px;
-}
-.nut-menu-panel[data-v-02edb907] {
-  display: none;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 46px;
-  color: #2d2d2d;
-  overflow: hidden;
-  background-color: #fff;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-  z-index: 9998;
-  border-top: 1px solid #f7f8fa;
-  border-radius: 0 0 15px 15px;
-  box-shadow: 0 4px 5px 0px rgba(236, 236, 236, 0.25);
-  overflow: auto;
-}
-.menu-list[data-v-02edb907] {
-  display: flex;
-  padding: 10px 15px;
-  flex-direction: column;
-}
-.menu-list.bubble-line[data-v-02edb907] {
-  flex-flow: wrap;
-}
-.menu-list.bubble-line .menu-option[data-v-02edb907] {
-  width: 50%;
-}
-.menu-list.three-line[data-v-02edb907] {
-  flex-flow: wrap;
-}
-.menu-list.three-line .menu-option[data-v-02edb907] {
-  width: 33%;
-}
-.menu-list .menu-option[data-v-02edb907] {
-  min-height: 24px;
-  line-height: 42px;
-  font-size: 14px;
-  color: #1a1a1a;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 5px;
-}
-.menu-list .menu-option.checked[data-v-02edb907] {
-  font-weight: bold;
-}
-.menu-list .check-icon[data-v-02edb907] {
-  width: 14px;
-  height: 14px;
-  margin-right: 5px;
-  color: #fa2c19;
-}