Browse Source

feat(cascader、cell、uploader): dark color

richard1015 3 years ago
parent
commit
38006deae0

+ 13 - 0
src/packages/__VUE/cascader/index.scss

@@ -1,3 +1,16 @@
+.nut-theme-dark {
+  .nut-cascader__bar {
+    background: $dark-background2;
+    color: $dark-color;
+  }
+  .nut-tabs__titles {
+    background: $dark-background3 !important;
+  }
+  .nut-cascader-item {
+    color: $dark-color-gray;
+  }
+}
+
 .nut-cascader {
   width: 100%;
   font-size: $cascader-font-size;

+ 2 - 1
src/packages/__VUE/cell/index.scss

@@ -1,7 +1,8 @@
 .nut-theme-dark {
   .nut-cell {
-    background: $dark-background;
+    background: $dark-background2;
     color: $dark-color;
+    box-shadow: none;
   }
 }
 .nut-cell {

+ 10 - 0
src/packages/__VUE/uploader/index.scss

@@ -1,3 +1,12 @@
+.nut-theme-dark {
+  .nut-uploader__preview-list {
+    background: $dark-background2;
+    color: $dark-color;
+  }
+  .close {
+    color: $dark-color !important;
+  }
+}
 .nut-uploader {
   position: relative;
   display: flex;
@@ -101,6 +110,7 @@
         position: absolute;
         right: 0;
         top: 0;
+        color: rgba(0, 0, 0, 0.6);
         transform: translate(50%, -50%);
       }
       .tips {

+ 1 - 7
src/packages/__VUE/uploader/index.taro.vue

@@ -16,13 +16,7 @@
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
-        <nut-icon
-          v-if="isDeletable"
-          color="rgba(0,0,0,0.6)"
-          @click="onDelete(item, index)"
-          class="close"
-          name="failure"
-        ></nut-icon>
+        <nut-icon v-if="isDeletable" @click="onDelete(item, index)" class="close" name="failure"></nut-icon>
         <img
           class="nut-uploader__preview-img__c"
           @click="fileItemClick(item)"

+ 1 - 7
src/packages/__VUE/uploader/index.vue

@@ -36,13 +36,7 @@
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
-        <nut-icon
-          v-if="isDeletable"
-          color="rgba(0,0,0,0.6)"
-          @click="onDelete(item, index)"
-          class="close"
-          name="failure"
-        ></nut-icon>
+        <nut-icon v-if="isDeletable" @click="onDelete(item, index)" class="close" name="failure"></nut-icon>
         <img
           class="nut-uploader__preview-img__c"
           @click="fileItemClick(item)"

+ 3 - 3
src/packages/styles/variables-jdb.scss

@@ -87,8 +87,8 @@ $white: #fff !default;
 $black: #000 !default;
 $required-color: #fa2c19 !default;
 
-$dark-background: #1a1919 !default;
-$dark-background2: #1d1b1c !default;
+$dark-background: #131313 !default;
+$dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
@@ -177,7 +177,7 @@ $cell-border-radius: 6px !default;
 $cell-padding: 13px 16px !default;
 $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
-$cell-after-border-bottom: 2px solid #f5f6f7 !default;
+$cell-after-border-bottom: 1px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
 $cell-background: $white !default;
 

+ 3 - 3
src/packages/styles/variables-jdt.scss

@@ -17,8 +17,8 @@ $white: #fff !default;
 $black: #000 !default;
 $required-color: #fa2c19 !default;
 
-$dark-background: #1a1919 !default;
-$dark-background2: #1d1b1c !default;
+$dark-background: #131313 !default;
+$dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
@@ -95,7 +95,7 @@ $cell-border-radius: 0px !default;
 $cell-padding: 14px 16px !default;
 $cell-line-height: 22px !default;
 $cell-after-right: 0 !default;
-$cell-after-border-bottom: 2px solid rgba(0, 0, 0, 0.1) !default;
+$cell-after-border-bottom: 1px solid rgba(0, 0, 0, 0.1) !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
 $cell-large-title-font: $font-size-large !default;
 $cell-large-title-desc-font: $font-size-base !default;

+ 3 - 3
src/packages/styles/variables.scss

@@ -18,8 +18,8 @@ $white: #fff !default;
 $black: #000 !default;
 $required-color: #fa2c19 !default;
 
-$dark-background: #1a1919 !default;
-$dark-background2: #1d1b1c !default;
+$dark-background: #131313 !default;
+$dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
@@ -108,7 +108,7 @@ $cell-border-radius: 6px !default;
 $cell-padding: 13px 16px !default;
 $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
-$cell-after-border-bottom: 2px solid #f5f6f7 !default;
+$cell-after-border-bottom: 1px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
 $cell-large-title-font: $font-size-large !default;
 $cell-large-title-desc-font: $font-size-base !default;

+ 6 - 0
src/sites/mobile/App.vue

@@ -106,6 +106,12 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+.nut-theme-dark {
+  .demo {
+    background: #131313 !important;
+  }
+}
+
 #app {
   background: #fff;
   height: 100%;