tag black

baishancloud · Oct 31, 2017 · 71a091b · 71a091b
1 parent 62587b6
commit 71a091b
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 1 deletion.
diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Tag v-for="item in count" :key="item" :name="item">标签</Tag>
         <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag>
         <div><Tag v-for="item in count" :key="item" :name="item" color="yellow" @on-close="close" @on-check="check" checkable>可选标签{{ item + 1 }}</Tag></div>
         <div><Tag v-for="item in count" :key="item" :name="item" type="dot" color="blue" @on-close="close" @on-check="check" closable checkable>可选可关闭标签{{ item + 1 }}</Tag></div>

diff --git a/src/styles/components/index-dark.less b/src/styles/components/index-dark.less
@@ -14,7 +14,7 @@
 @import "switch";
 @import "input-number-dark";
 @import "scroll";
-@import "tag";
+@import "tag-dark";
 @import "loading-bar";
 @import "progress";
 @import "timeline";

diff --git a/src/styles/components/tag-dark.less b/src/styles/components/tag-dark.less
@@ -0,0 +1,199 @@
+@tag-prefix-cls: ~"@{css-prefix}tag";
+@tag-close-prefix-cls: bsc-icon-ios-close-empty;
+
+.@{tag-prefix-cls} {
+    display: inline-block;
+    height: 22px;
+    line-height: 22px;
+    margin: 2px 4px 2px 0;
+    padding: 0 8px;
+    border: 1px solid @border-color-split;
+    border-radius: @btn-border-radius-small;
+    background: @table-thead-bg;
+    font-size: @tag-font-size;
+    vertical-align: middle;
+    opacity: 1;
+    overflow: hidden;
+    cursor: pointer;
+    //transition: all @transition-time @ease-in-out;
+
+    // for color and unchecked
+    &:not(&-border):not(&-dot):not(&-checked){
+        background: transparent;
+        border: 0;
+    }
+
+    &-dot{
+        height: 32px;
+        line-height: 32px;
+        border: 1px solid @border-color-split !important;
+        color: @text-color !important;
+        background: @table-thead-bg !important;
+        padding: 0 12px;
+
+        &-inner{
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            margin-right: 8px;
+            border-radius: 50%;
+            background: @border-color-split;
+            position: relative;
+            top: 1px;
+        }
+        .@{tag-close-prefix-cls} {
+            color: #c0ccda !important;
+            margin-left: 12px !important;
+        }
+    }
+
+    &-border{
+        height: 24px;
+        line-height: 24px;
+        border: 1px solid @border-color-split !important;
+        color: @text-color !important;
+        background: @table-thead-bg !important;
+        position: relative;
+
+        .@{tag-close-prefix-cls} {
+            color: #c0ccda !important;
+            margin-left: 12px !important;
+        }
+
+        &:after{
+            content: "";
+            display: none;
+            width: 1px;
+            background: @border-color-split;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 22px;
+        }
+
+        &.@{tag-prefix-cls}-closable {
+            &:after{
+                display: block;
+            }
+            .@{tag-close-prefix-cls} {
+                margin-left: 18px !important;
+            }
+        }
+
+        &.@{tag-prefix-cls}-blue {
+            color: @link-color !important;
+            border: 1px solid @link-color !important;
+
+            &:after{
+                background: @link-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @link-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-green {
+            color: @success-color !important;
+            border: 1px solid @success-color !important;
+
+            &:after{
+                background: @success-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @success-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-yellow {
+            color: @warning-color !important;
+            border: 1px solid @warning-color !important;
+
+            &:after{
+                background: @warning-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @warning-color !important;
+            }
+        }
+        &.@{tag-prefix-cls}-red {
+            color: @error-color !important;
+            border: 1px solid @error-color !important;
+
+            &:after{
+                background: @error-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @error-color !important;
+            }
+        }
+    }
+
+    &:hover {
+        opacity: 0.85;
+    }
+
+    &,
+    a,
+    a:hover {
+        color: @text-color;
+    }
+
+    &-text {
+        a:first-child:last-child {
+            display: inline-block;
+            margin: 0 -8px;
+            padding: 0 8px;
+        }
+    }
+
+    .@{tag-close-prefix-cls} {
+        .iconfont-size-under-12px(20px);
+        cursor: pointer;
+        margin-left: 8px;
+        color: #c0ccda;
+        opacity: 0.66;
+        position: relative;
+        top: 1px;
+        //transition: all @transition-time @ease-in-out;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &-blue,
+    &-green,
+    &-yellow,
+    &-red {
+        border: 0;
+        &,
+        a,
+        a:hover,
+        .@{tag-close-prefix-cls},
+        .@{tag-close-prefix-cls}:hover {
+            color: #fff;
+        }
+    }
+
+    &-blue,
+    &-blue&-dot &-dot-inner
+    {
+        background: @link-color;
+    }
+
+    &-green,
+    &-green&-dot &-dot-inner
+    {
+        background: @success-color;
+    }
+
+    &-yellow,
+    &-yellow&-dot &-dot-inner
+    {
+        background: @warning-color;
+    }
+
+    &-red,
+    &-red&-dot &-dot-inner
+    {
+        background: @error-color;
+    }
+}