tabs dark

baishancloud · Nov 3, 2017 · bb38adf · bb38adf
1 parent 90713f1
commit bb38adf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
@@ -132,11 +132,16 @@
 
 <template>
     <div>
-        <Tabs type="card">
+        <Tabs closable type="card">
             <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
         </Tabs>
         <Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>
         <Button type="ghost" @click="handleTabsMin" size="small">减少</Button>
+        <Tabs>
+            <TabPane label="标签一">标签一的内容</TabPane>
+            <TabPane label="标签二" disabled>标签二的内容</TabPane>
+            <TabPane label="标签三">标签三的内容</TabPane>
+        </Tabs>
     </div>
 </template>
 <script>

diff --git a/src/styles/components/tabs.less b/src/styles/components/tabs.less
@@ -1,5 +1,45 @@
 @tabs-prefix-cls: ~"@{css-prefix}tabs";
 
+.dark .@{tabs-prefix-cls} {
+    color: @text-color-dark;
+
+    &-ink-bar {
+        background-color: @primary-color-blue;
+    }
+
+    &-bar {
+        border-bottom: 1px solid @border-color-base-dark;
+    }
+
+    &-nav {
+        .@{tabs-prefix-cls}-tab-disabled {
+            color: #666;
+        }
+
+        .@{tabs-prefix-cls}-tab-active {
+            color: @primary-color-blue;
+        }
+    }
+
+    // card style
+    &.@{tabs-prefix-cls}-card > .@{tabs-prefix-cls}-bar .@{tabs-prefix-cls}-tab {
+        border: 1px solid @border-color-base-dark;
+        border-bottom: 0;
+        background: @tabs-card-bar-tab-bg;
+    }
+    &.@{tabs-prefix-cls}-card > .@{tabs-prefix-cls}-bar .@{tabs-prefix-cls}-tab-active {
+        background: @tabs-card-bar-tab-active-bg;
+        border-color: @border-color-base-dark;
+        color: @primary-color-blue;
+    }
+    &.@{tabs-prefix-cls}-card > .@{tabs-prefix-cls}-bar .@{tabs-prefix-cls}-tab .@{css-prefix-iconfont}-ios-close-empty {
+        color: @legend-color-dark;
+        &:hover {
+            color: #fff;
+        }
+    }
+}
+
 .@{tabs-prefix-cls} {
     box-sizing: border-box;
     position: relative;

diff --git a/src/styles/custom.less b/src/styles/custom.less
@@ -225,4 +225,8 @@
 
 // Checkbox
 @checkbox-border-color-dark    : #8492a6;
-@checkbox-selection-color-dark : #bbbec4;
+@checkbox-selection-color-dark : #bbbec4;
+
+// Tabs
+@tabs-card-bar-tab-bg          : #414e55;
+@tabs-card-bar-tab-active-bg   : #39434b;