style: addresslist、category增加暗黑主题 (#1539)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* feat: input组件新增input slot插槽

* fix: navBar组件占位问题 #1359

* fix: category 自定义分类增加回调参数、解决点击下的报错

* fix: 修改 Input 组件的 readonly 和 disable 的应用逻辑 #1441#1441

* fix: 修复小程序input自动获取焦点

* fix: navbar taro

* feat: addresslist、category暗黑主题

* fix: 删除navbar demo上的fixed

* fix: compileHotReLoad

src/packages/__VUE/addresslist/index.scss

@@ -1,3 +1,43 @@
+.nut-theme-dark {
+  .nut-addresslist {
+    .nut-long-press-shell {
+      &__contain {
+        background-color: $dark-background2;
+        border-bottom: 1px solid $dark-color-gray;
+        color: $dark-color;
+        &-mask {
+          background-color: $dark-color3;
+          &-copy {
+            color: $dark-color-gray;
+            background-color: $dark-color;
+          }
+        }
+      }
+    }
+    .nut-swipe-shell,
+    .nut-general-shell {
+      background-color: $dark-background2;
+      border-bottom: 1px solid $dark-color-gray;
+      color: $dark-color;
+    }
+    .nut-item-contents {
+      &__info {
+        &-contact {
+          &-default {
+            background: $addresslist-contnts-contact-default;
+            color: $addresslist-contnts-contact-color;
+          }
+        }
+      }
+      &__addr {
+        color: $dark-color-gray;
+      }
+    }
+    &__bottom {
+      background-color: $dark-background2;
+    }
+  }
+}
 .nut-addresslist {
   overflow: hidden;
   .nut-long-press-shell {
@@ -5,10 +45,10 @@
       width: 100%;
       min-height: 76px;
       padding: 5px 10px;
-      background-color: #fff;
-      border-bottom: 1px solid #f0f0f0;
-      color: #333333;
-      font-size: 16px;
+      background-color: $addresslist-bg;
+      border-bottom: 1px solid $addresslist-border;
+      color: $addresslist-font-color;
+      font-size: $addresslist-font-size;
       display: flex;
       align-items: center;
       position: relative;
@@ -19,7 +59,7 @@
         left: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: $addresslist-mask-bg;
         display: flex;
         justify-content: space-around;
         align-items: center;
@@ -32,19 +72,19 @@
           width: 55px;
           border-radius: 50%;
           text-align: center;
-          background-color: #fff;
+          background-color: $white;
           font-size: 14px;
           display: flex;
           justify-content: center;
           align-items: center;
         }
         &-set {
-          color: #fff;
-          background-color: #f5a623;
+          color: $white;
+          background-color: $addresslist-set-bg;
         }
         &-del {
-          color: #fff;
-          background-color: #e1251b;
+          color: $white;
+          background-color: $addresslist-del-bg;
         }
       }
     }
@@ -69,10 +109,10 @@
     // width:100%;
     min-height: 76px;
     padding: 5px 10px;
-    background-color: #fff;
-    border-bottom: 1px solid #f0f0f0;
-    color: #333333;
-    font-size: 16px;
+    background-color: $addresslist-bg;
+    border-bottom: 1px solid $addresslist-border;
+    color: $addresslist-font-color;
+    font-size: $addresslist-font-size;
     display: flex;
     align-items: center;
     position: relative;
@@ -120,8 +160,8 @@
       }
     }
     &__addr {
-      color: #666666;
-      font-size: 12px;
+      color: $addresslist-addr-font-color;
+      font-size: $addresslist-addr-font-size;
       margin-top: 5px;
     }
   }
@@ -135,7 +175,7 @@
     width: 100%;
     padding: 12px 18px 24px;
     z-index: 100000;
-    background-color: #fff;
+    background-color: $addresslist-bg;
     box-sizing: border-box;
   }
 }

src/packages/__VUE/category/demo.vue

@@ -4,7 +4,6 @@
     <nut-category :category="category" @change="change">
       <nut-categorypane :categoryChild="categoryChild" @onChange="onChange"> </nut-categorypane>
     </nut-category>
-
     <h2>{{ translate('title2') }}</h2>
     <nut-category :category="category" @change="changeText">
       <nut-categorypane type="text" :categoryChild="categoryChild" @onChange="onChange"> </nut-categorypane
@@ -66,15 +65,15 @@ export default createDemo({
     };
 
     const change = (index: any) => {
-      data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
+      data.categoryChild = [].concat(data?.categoryInfo?.category[index + 1]?.children as any);
     };
 
     const changeText = (index: any) => {
       data.categoryChild = [].concat(data.categoryInfo.category[index + 1].children as any);
     };
 
-    const changeCustom = () => {
-      console.log('点击分类数据');
+    const changeCustom = (v: any) => {
+      console.log('点击分类数据:' + JSON.stringify(v));
     };
 
     const onChange = (v: any) => {

src/packages/__VUE/category/index.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-category {
+    &__cateList {
+      background: $dark-background2;
+    }
+
+    &__cateListLeft {
+      background: $dark-background4;
+    }
+    &__cateListItem {
+      color: $dark-color-gray;
+    }
+    &__cateListItemChecked {
+      color: $dark-color;
+      background: $dark-background2;
+      &::before {
+        background: $category-ListItemChecked-img-bg-color;
+      }
+    }
+  }
+}
 .nut-category {
   &__cateList {
     display: flex;

src/packages/__VUE/category/index.vue

@@ -7,7 +7,7 @@
             :class="[checkIndex == index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
             @click="getChildList(index)"
           >
-            {{ item.catName }}
+            {{ item?.catName }}
           </div>
         </div>
       </div>

src/packages/__VUE/categorypane/index.scss

@@ -1,44 +1,22 @@
-.nut-categorypane {
-  &__cateList {
-    display: flex;
-    background: rgba(255, 255, 255, 1);
-  }
-
-  &__cateListLeft {
-    background: rgba(246, 247, 249, 1);
-  }
-
-  &__cateListItemChecked,
-  &__cateListItem {
-    width: 100px;
-    height: 50px;
-    font-size: 13px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(51, 51, 51, 1);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.3s;
-  }
-  &__cateListItemChecked {
-    background: rgba(255, 255, 255, 1);
-    font-weight: 500;
-    transition: all 0.3s;
+.nut-theme-dark {
+  .nut-categorypane {
+    &__cateListRight {
+      background: $dark-background2;
+    }
   }
-
+}
+.nut-categorypane {
   &__cateListRight {
     padding-left: 15px;
-    background: rgba(255, 255, 255, 1);
+    background: $category-bg-color;
   }
-
   &__childTitle {
     margin-top: 15px;
     margin-bottom: 15px;
     font-size: 13px;
     font-family: PingFangSC;
     font-weight: 500;
-    color: rgba(51, 51, 51, 1);
+    color: $categorypane-title-color;
   }
 
   &__childItemList {
@@ -56,18 +34,21 @@
   }
 
   &__skuName {
+    margin-left: 15px;
+    margin-top: 15px;
     margin-right: 10px;
     width: 75px;
     height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
+    border: 1px solid $categorypane-border-color;
     border-radius: 5px;
     font-size: 12px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: rgba(102, 102, 102, 1);
+    color: $categorypane-gray-color;
     display: flex;
     justify-content: center;
     align-items: center;
+
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -80,7 +61,7 @@
     font-size: 12px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: rgba(102, 102, 102, 1);
+    color: $categorypane-gray-color;
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
@@ -90,35 +71,4 @@
     display: flex;
     flex-wrap: wrap;
   }
-  &__selfskuName {
-    margin-left: 15px;
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 75px;
-    height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
-    border-radius: 5px;
-    font-size: 12px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(102, 102, 102, 1);
-  }
-
-  &__skuName {
-    margin-left: 15px;
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 75px;
-    height: 40px;
-    border: 1px solid rgba(153, 153, 153, 1);
-    border-radius: 5px;
-    font-size: 12px;
-    font-family: PingFangSC;
-    font-weight: normal;
-    color: rgba(102, 102, 102, 1);
-  }
 }

src/packages/__VUE/categorypane/index.taro.vue

@@ -2,7 +2,7 @@
   <div class="nut-categorypane">
     <div v-if="type == 'classify'" class="nut-categorypane__cateListRight">
       <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-categorypane__childTitle">{{ item.catName }}</div>
+        <div class="nut-categorypane__childTitle">{{ item?.catName }}</div>
 
         <div v-if="item.catType == 1" class="nut-categorypane__childItemList">
           <div
@@ -12,7 +12,7 @@
             @click="onChange(sku)"
           >
             <img class="nut-categorypane__childImg" :src="sku.backImg" />
-            <div class="nut-categorypane__skuImg">{{ sku.catName }}</div>
+            <div class="nut-categorypane__skuImg">{{ sku?.catName }}</div>
           </div>
         </div>
       </div>
@@ -21,7 +21,7 @@
     <!-- text -->
     <div v-if="type == 'text'" class="nut-categorypane__cateListRight">
       <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-categorypane__childTitle">{{ item.catName }}</div>
+        <div class="nut-categorypane__childTitle">{{ item?.catName }}</div>
 
         <div v-if="item.catType == 1" class="nut-categorypane__childItemList">
           <div
@@ -30,7 +30,7 @@
             :key="key"
             @click="onChange(sku)"
           >
-            <div class="nut-categorypane__skuName">{{ sku.catName }}</div>
+            <div class="nut-categorypane__skuName">{{ sku?.catName }}</div>
           </div>
         </div>
       </div>
@@ -40,7 +40,7 @@
 
     <div v-if="type == 'custom'" class="nut-categorypane__selfItemList">
       <div v-for="(sku, key) in customCategory" class="nut-categorypane__skuName" :key="key" @click="onChange()">
-        {{ sku.catName }}
+        {{ sku?.catName }}
       </div>
     </div>
   </div>

src/packages/__VUE/categorypane/index.vue

@@ -2,9 +2,9 @@
   <div class="nut-categorypane">
     <div v-if="type == 'classify'" class="nut-categorypane__cateListRight">
       <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-categorypane__childTitle">{{ item.catName }}</div>
+        <div class="nut-categorypane__childTitle">{{ item?.catName }}</div>
 
-        <div v-if="item.catType == 1" class="nut-categorypane__childItemList">
+        <div v-if="item?.catType == 1" class="nut-categorypane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
             class="nut-categorypane__childItem"
@@ -12,7 +12,7 @@
             @click="onChange(sku)"
           >
             <img class="nut-categorypane__childImg" :src="sku.backImg" />
-            <div class="nut-categorypane__skuImg">{{ sku.catName }}</div>
+            <div class="nut-categorypane__skuImg">{{ sku?.catName }}</div>
           </div>
         </div>
       </div>
@@ -21,16 +21,16 @@
     <!-- text -->
     <div v-if="type == 'text'" class="nut-categorypane__cateListRight">
       <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-categorypane__childTitle">{{ item.catName }}</div>
+        <div class="nut-categorypane__childTitle">{{ item?.catName }}</div>
 
-        <div v-if="item.catType == 1" class="nut-categorypane__childItemList">
+        <div v-if="item?.catType == 1" class="nut-categorypane__childItemList">
           <div
             v-for="(sku, key) in item.childCateList"
             class="nut-categorypane__childItem"
             :key="key"
             @click="onChange(sku)"
           >
-            <div class="nut-categorypane__skuName">{{ sku.catName }}</div>
+            <div class="nut-categorypane__skuName">{{ sku?.catName }}</div>
           </div>
         </div>
       </div>
@@ -39,8 +39,8 @@
     <!-- 自定义 -->
 
     <div v-if="type == 'custom'" class="nut-categorypane__selfItemList">
-      <div v-for="(sku, key) in customCategory" class="nut-categorypane__skuName" :key="key" @click="onChange()">
-        {{ sku.catName }}
+      <div v-for="(sku, key) in customCategory" class="nut-categorypane__skuName" :key="key" @click="onChange(sku)">
+        {{ sku?.catName }}
       </div>
     </div>
   </div>

src/packages/__VUE/input/index.taro.vue

@@ -41,7 +41,7 @@
       </view>
       <view class="nut-input-value">
         <view class="nut-input-inner">
-          <div class="nut-input-box">
+          <view class="nut-input-box">
             <textarea
               v-if="type == 'textarea'"
               class="input-text"
@@ -54,7 +54,6 @@
               :readonly="readonly"
               :value="modelValue"
               :formatTrigger="formatTrigger"
-              :autofocus="autofocus"
               :adjust-position="adjustPosition"
               @input="onInput"
               @focus="onFocus"
@@ -74,7 +73,6 @@
               :readonly="readonly"
               :value="modelValue"
               :formatTrigger="formatTrigger"
-              :autofocus="autofocus"
               :confirm-type="confirmType"
               :adjust-position="adjustPosition"
               @input="onInput"
@@ -82,9 +80,9 @@
               @blur="onBlur"
               @click="onClickInput"
             />
-            <view v-if="readonly" class="nut-input-disabled-mask"></view>
-          </div>
-          <div class="nut-input-clear-box">
+            <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
+          </view>
+          <view class="nut-input-clear-box">
             <nut-icon
               class="nut-input-clear"
               v-if="clearable && !readonly"
@@ -94,7 +92,7 @@
               @click="clear"
             >
             </nut-icon>
-          </div>
+          </view>
           <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
             <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
           </view>
@@ -279,8 +277,7 @@ export default create({
   setup(props, { emit, slots }) {
     const active = ref(false);
 
-    const inputRef = ref<HTMLInputElement>();
-    const customValue = ref<() => unknown>();
+    const inputRef: any = ref(null);
     const getModelValue = () => String(props.modelValue ?? '');
     // const form = inject('form');
 
@@ -302,12 +299,12 @@ export default create({
       };
     });
 
-    const styles = computed(() => {
+    const styles: any = computed(() => {
       return {
         textAlign: props.inputAlign
       };
     });
-    const stylesTextarea = computed(() => {
+    const stylesTextarea: any = computed(() => {
       return {
         textAlign: props.inputAlign,
         height: Number(props.rows) * 24 + 'px'
@@ -324,13 +321,6 @@ export default create({
       }
     };
 
-    // const formValue = computed(() => {
-    //   if (customValue.value && slots.input) {
-    //     return customValue.value();
-    //   }
-    //   return props.modelValue;
-    // });
-
     const onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;
       let value = input.value;
@@ -342,9 +332,6 @@ export default create({
       emit('change', value, event);
     };
 
-    const blur = () => inputRef.value?.blur();
-    const focus = () => inputRef.value?.focus();
-
     const updateValue = (value: string, trigger: import('./type').InputFormatTrigger = 'onChange') => {
       if (props.type === 'digit') {
         value = formatNumber(value, false, false);
@@ -396,6 +383,7 @@ export default create({
     };
 
     const clear = (event: Event) => {
+      if (props.disabled) return;
       emit('update:modelValue', '', event);
       emit('change', '', event);
       emit('clear', '', event);
@@ -445,6 +433,9 @@ export default create({
     );
 
     onMounted(() => {
+      if (props.autofocus) {
+        inputRef.value.focus();
+      }
       updateValue(getModelValue(), props.formatTrigger);
     });
 

src/packages/__VUE/input/index.vue

@@ -40,49 +40,55 @@
         </view>
       </view>
       <view class="nut-input-value">
-        <view class="nut-input-inner" @click="onClickInput">
-          <textarea
-            v-if="type == 'textarea'"
-            class="input-text"
-            ref="inputRef"
-            :style="stylesTextarea"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :formatTrigger="formatTrigger"
-            :autofocus="autofocus"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-          />
-          <input
-            v-else
-            class="input-text"
-            ref="inputRef"
-            :style="styles"
-            :type="inputType(type)"
-            :maxlength="maxLength"
-            :placeholder="placeholder || translate('placeholder')"
-            :disabled="disabled"
-            :readonly="readonly"
-            :value="modelValue"
-            :formatTrigger="formatTrigger"
-            :autofocus="autofocus"
-            @input="onInput"
-            @focus="onFocus"
-            @blur="onBlur"
-          />
-          <nut-icon
-            class="nut-input-clear"
-            v-if="clearable && !readonly"
-            v-show="active && modelValue.length > 0"
-            :name="clearIcon"
-            :size="clearSize"
-            @click="clear"
-          >
-          </nut-icon>
+        <view class="nut-input-inner">
+          <view class="nut-input-box">
+            <textarea
+              v-if="type == 'textarea'"
+              class="input-text"
+              ref="inputRef"
+              :style="stylesTextarea"
+              :maxlength="maxLength"
+              :placeholder="placeholder || translate('placeholder')"
+              :disabled="disabled"
+              :readonly="readonly"
+              :value="modelValue"
+              :formatTrigger="formatTrigger"
+              :autofocus="autofocus"
+              @input="onInput"
+              @focus="onFocus"
+              @blur="onBlur"
+              @click="onClickInput"
+            />
+            <input
+              v-else
+              class="input-text"
+              ref="inputRef"
+              :style="styles"
+              :type="inputType(type)"
+              :maxlength="maxLength"
+              :placeholder="placeholder || translate('placeholder')"
+              :disabled="disabled"
+              :readonly="readonly"
+              :value="modelValue"
+              :formatTrigger="formatTrigger"
+              :autofocus="autofocus"
+              @input="onInput"
+              @focus="onFocus"
+              @blur="onBlur"
+              @click="onClickInput"
+            />
+          </view>
+          <view class="nut-input-clear-box">
+            <nut-icon
+              class="nut-input-clear"
+              v-if="clearable && !readonly"
+              v-show="active && modelValue.length > 0"
+              :name="clearIcon"
+              :size="clearSize"
+              @click="clear"
+            >
+            </nut-icon>
+          </view>
           <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
             <nut-icon :name="rightIcon" :size="rightIconSize"></nut-icon>
           </view>
@@ -282,12 +288,12 @@ export default create({
       };
     });
 
-    const styles = computed(() => {
+    const styles: any = computed(() => {
       return {
         textAlign: props.inputAlign
       };
     });
-    const stylesTextarea = computed(() => {
+    const stylesTextarea: any = computed(() => {
       return {
         textAlign: props.inputAlign,
         height: Number(props.rows) * 24 + 'px'
@@ -320,9 +326,6 @@ export default create({
       updateValue(value);
     };
 
-    const blur = () => inputRef.value?.blur();
-    const focus = () => inputRef.value?.focus();
-
     const updateValue = (value: string, trigger: import('./type').InputFormatTrigger = 'onChange') => {
       if (props.type === 'digit') {
         value = formatNumber(value, false, false);
@@ -377,6 +380,7 @@ export default create({
     };
 
     const clear = (event: Event) => {
+      if (props.disabled) return;
       emit('update:modelValue', '', event);
       emit('change', '', event);
       emit('clear', '', event);

src/packages/__VUE/navbar/index.taro.vue

@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { onMounted, computed, toRefs, ref } from 'vue';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { createComponent } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
 const { componentName, create } = createComponent('navbar');

src/packages/styles/variables-jdb.scss

@@ -852,6 +852,15 @@ $list-item-margin: 0 0 10px 0 !default;
 $ecard-bg-color: #f0f2f5 !default;
 
 //addresslist
+$addresslist-bg: #fff !default;
+$addresslist-border: #f0f0f0 !default;
+$addresslist-font-color: #333333 !default;
+$addresslist-font-size: 16px !default;
+$addresslist-mask-bg: rgba(0, 0, 0, 0.4) !default;
+$addresslist-addr-font-color: #666666 !default;
+$addresslist-addr-font-size: 12px !default;
+$addresslist-set-bg: #f5a623 !default;
+$addresslist-del-bg: #e1251b !default;
 $addresslist-contnts-contact-default: $primary-color !default;
 $addresslist-contnts-contact-color: $white !default;
 
@@ -861,6 +870,10 @@ $category-ListLeft-bg-color: rgba(246, 247, 249, 1) !default;
 $category-ListItem-color: $title-color !default;
 $category-ListItemChecked-color: rgba(255, 255, 255, 1) !default;
 $category-ListItemChecked-img-bg-color: $primary-color !default;
+$category-ListItemChecked-img-bg-color: $primary-color !default;
+$categorypane-gray-color: #666 !default;
+$categorypane-border-color: rgb(153, 153, 153) !default;
+$categorypane-title-color: rgba(51, 51, 51, 1) !default;
 
 // circleProgress
 $circleprogress-primary-color: $primary-color !default;

src/packages/styles/variables-jdt.scss

@@ -758,6 +758,15 @@ $list-item-margin: 0 0 10px 0 !default;
 $ecard-bg-color: #f0f2f5 !default;
 
 //addresslist
+$addresslist-bg: #fff !default;
+$addresslist-border: #f0f0f0 !default;
+$addresslist-font-color: #333333 !default;
+$addresslist-font-size: 16px !default;
+$addresslist-mask-bg: rgba(0, 0, 0, 0.4) !default;
+$addresslist-addr-font-color: #666666 !default;
+$addresslist-addr-font-size: 12px !default;
+$addresslist-set-bg: #f5a623 !default;
+$addresslist-del-bg: #e1251b !default;
 $addresslist-contnts-contact-default: $primary-color !default;
 $addresslist-contnts-contact-color: $white !default;
 
@@ -767,6 +776,10 @@ $category-ListLeft-bg-color: rgba(246, 247, 249, 1) !default;
 $category-ListItem-color: $title-color !default;
 $category-ListItemChecked-color: rgba(255, 255, 255, 1) !default;
 $category-ListItemChecked-img-bg-color: $primary-color !default;
+$category-ListItemChecked-img-bg-color: $primary-color !default;
+$categorypane-gray-color: #666 !default;
+$categorypane-border-color: rgb(153, 153, 153) !default;
+$categorypane-title-color: rgba(51, 51, 51, 1) !default;
 
 // circleProgress
 $circleprogress-primary-color: $primary-color !default;

src/packages/styles/variables.scss

@@ -783,6 +783,15 @@ $list-item-margin: 0 0 10px 0 !default;
 $ecard-bg-color: #f0f2f5 !default;
 
 //addresslist
+$addresslist-bg: #fff !default;
+$addresslist-border: #f0f0f0 !default;
+$addresslist-font-color: #333333 !default;
+$addresslist-font-size: 16px !default;
+$addresslist-mask-bg: rgba(0, 0, 0, 0.4) !default;
+$addresslist-addr-font-color: #666666 !default;
+$addresslist-addr-font-size: 12px !default;
+$addresslist-set-bg: #f5a623 !default;
+$addresslist-del-bg: #e1251b !default;
 $addresslist-contnts-contact-default: $primary-color !default;
 $addresslist-contnts-contact-color: $white !default;
 
@@ -792,6 +801,10 @@ $category-ListLeft-bg-color: rgba(246, 247, 249, 1) !default;
 $category-ListItem-color: $title-color !default;
 $category-ListItemChecked-color: rgba(255, 255, 255, 1) !default;
 $category-ListItemChecked-img-bg-color: $primary-color !default;
+$category-ListItemChecked-img-bg-color: $primary-color !default;
+$categorypane-gray-color: #666 !default;
+$categorypane-border-color: rgb(153, 153, 153) !default;
+$categorypane-title-color: rgba(51, 51, 51, 1) !default;
 
 // circleProgress
 $circleprogress-primary-color: $primary-color !default;

src/sites/assets/styles/md-style.scss

@@ -2,6 +2,7 @@
 
 .doc-content-document {
   position: relative;
+  min-width: 1000px;
   background: #fff;
   padding-top: 40px;
   padding-bottom: 40px;