Browse Source

feat(table、timeselect): dark color (#1491)

水风车 3 years ago
parent
commit
76259b1e53

+ 33 - 0
src/packages/__VUE/table/index.scss

@@ -1,3 +1,36 @@
+.nut-theme-dark {
+  .nut-table {
+    &__main {
+      color: $dark-color;
+      background-color: $dark-background2;
+      &--striped {
+        .nut-table__main__head {
+          &__tr {
+            background-color: $dark-background3;
+          }
+        }
+        .nut-table__main__body {
+          &__tr:nth-child(odd) {
+            background-color: $dark-color-gray;
+          }
+        }
+        .nut-table__main__body {
+          &__tr:nth-child(even) {
+            background-color: $dark-background3;
+          }
+        }
+      }
+    }
+    &__summary {
+      color: $dark-color;
+      background-color: $dark-background;
+    }
+    &__nodata {
+      color: $dark-color;
+      background-color: $dark-background;
+    }
+  }
+}
 .nut-table {
   display: flex;
   width: 100%;

+ 16 - 0
src/packages/__VUE/timedetail/index.scss

@@ -1,3 +1,19 @@
+.nut-theme-dark {
+  .nut-timedetail {
+    background-color: $dark-background2;
+    &__detail {
+      &__list {
+        &__item {
+          background-color: $dark-background;
+          color: $dark-color;
+          &--curr {
+            color: $timeselect-timedetail-item-cur-text-color;
+          }
+        }
+      }
+    }
+  }
+}
 .nut-timedetail {
   display: flex;
   width: 100%;

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

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-timepannel {
+    background-color: $dark-background3;
+    color: $dark-color-gray;
+    &--curr {
+      background-color: $dark-background2;
+      color: $dark-color;
+    }
+  }
+}
 .nut-timepannel {
   display: flex;
   width: $timeselect-timepannel-width;

+ 19 - 1
src/packages/__VUE/timeselect/index.scss

@@ -1,3 +1,21 @@
+.nut-theme-dark {
+  .nut-timeselect {
+    background-color: $dark-background2;
+    &__title {
+      background-color: $dark-background2;
+      color: $dark-color;
+    }
+    &__content {
+      &__pannel {
+        background-color: $dark-background3;
+        color: $dark-color;
+      }
+      &__detail {
+        background-color: $dark-background2;
+      }
+    }
+  }
+}
 .nut-timeselect {
   width: 100%;
   height: 100%;
@@ -8,7 +26,7 @@
     width: $timeselect-title-width;
     height: $timeselect-title-height;
     line-height: $timeselect-title-line-height;
-    margin-bottom: 10px;
+    padding-bottom: 10px;
     font-size: $timeselect-title-font-size;
     color: $timeselect-title-color;
     text-align: center;