UNPKG

6.61 kBSCSSView Raw
1@charset "UTF-8";
2@import "../core/index-noreset.scss";
3@import "./scss/variable.scss";
4@import "./scss/animation.scss";
5@import "./scss/mixin.scss";
6@import "./scss/placeholder.scss";
7@import "./rtl.scss";
8
9.#{$css-prefix} {
10 &tag-group {
11 .#{$css-prefix}tag-medium,
12 .#{$css-prefix}tag-large {
13 @include tag-group-margin($tag-size-m-margin);
14 }
15
16 .#{$css-prefix}tag-small {
17 @include tag-group-margin($tag-size-s-margin);
18 }
19 }
20
21 &tag {
22 @include box-sizing();
23 display: inline-block;
24 max-width: 100%;
25 vertical-align: middle;
26 border-width: $tag-border-width;
27 border-radius: $tag-corner-radius;
28 box-shadow: $tag-shadow;
29 border-style: solid; /* 可配置??? */
30 overflow: hidden;
31 white-space: nowrap;
32 transition: all $motion-duration-immediately $motion-linear;
33 font-size: 0;
34 outline: 0;
35
36 > .#{$css-prefix}tag-body {
37 position: relative;
38 display: inline-block;
39 height: 100%;
40 text-align: center;
41 vertical-align: middle;
42 @extend %ellipsis;
43 max-width: 100%;
44 cursor: default;
45
46 > a {
47 text-decoration: none;
48 color: inherit;
49 &:before {
50 content: " ";
51 @include placeholder-full;
52 }
53 }
54
55 /* 用户手动传的 icon 的大小也保持一致? */
56 .#{$css-prefix}icon {
57 line-height: 1;
58 vertical-align: baseline;
59
60 &:before {
61 font-size: inherit;
62 }
63 }
64 }
65
66 &.#{$css-prefix}tag-body-pointer {
67 cursor: pointer;
68 }
69
70 &[disabled], &.disabled {
71 cursor: not-allowed;
72 pointer-events: none;
73 }
74
75 /* 预设颜色值 */
76 @include tag-preset-color('blue', $tag-color-preset-blue);
77 @include tag-preset-color('green', $tag-color-preset-green);
78 @include tag-preset-color('orange', $tag-color-preset-orange);
79 @include tag-preset-color('red', $tag-color-preset-red);
80 @include tag-preset-color('turquoise', $tag-color-preset-turquoise);
81 @include tag-preset-color('yellow', $tag-color-preset-yellow);
82 }
83
84 &tag-large {
85 @include tag-size(
86 $tag-size-l-height,
87 $tag-size-line-height,
88 $tag-border-width,
89 $tag-size-l-padding-lr,
90 $tag-size-l-text-size,
91 $tag-size-l-icon-font,
92 $tag-size-l-content-min-width,
93 $tag-size-l-spacing
94 );
95 }
96
97 &tag-medium {
98 @include tag-size(
99 $tag-size-m-height,
100 $tag-size-line-height,
101 $tag-border-width,
102 $tag-size-m-padding-lr,
103 $tag-size-m-text-size,
104 $tag-size-m-icon-font,
105 $tag-size-m-content-min-width,
106 $tag-size-m-spacing
107 );
108 }
109
110 &tag-small {
111 @include tag-size(
112 $tag-size-s-height,
113 $tag-size-line-height,
114 $tag-border-width,
115 $tag-size-s-padding-lr,
116 $tag-size-s-text-size,
117 $tag-size-s-icon-font,
118 $tag-size-s-content-min-width,
119 $tag-size-s-spacing
120 );
121 }
122
123 &tag-default {
124 cursor: default;
125
126 &.#{$css-prefix}tag-level-normal {
127 @extend %tag-statement-bordered;
128 }
129
130 &.#{$css-prefix}tag-level-primary {
131 @extend %tag-statement-primary;
132 }
133 }
134
135 &tag-closable {
136 position: relative;
137 > .#{$css-prefix}tag-close-btn {
138 display: inline-block;
139 vertical-align: middle;
140 height: 100%;
141 text-align: center;
142 cursor: pointer;
143 }
144
145 &.#{$css-prefix}tag-level-normal {
146 @extend %tag-statement-closable-bordered;
147 @extend %tag-closable-normal-tick;
148 }
149
150 &.#{$css-prefix}tag-level-primary {
151 @extend %tag-statement-closable-primary;
152 }
153 }
154
155 &tag-checkable {
156 cursor: pointer;
157 position: relative;
158 border-radius: $tag-corner-radius;
159
160 &.checked {
161 &:before {
162 animation: fadeInRightForTag .4s $ease-in-out-circ;
163 }
164 &:after {
165 animation: zoomIn .4s $ease-in-out-circ;
166 }
167 }
168
169 &.#{$css-prefix}tag-small {
170 &:not(.#{$css-prefix}tag-level-primary) {
171 @include checkable-tag-tick-size(
172 $tag-size-s-tick-icon-bg-size,
173 $tag-size-s-tick-icon-size
174 );
175 }
176 }
177
178 &.#{$css-prefix}tag-medium {
179 &:not(.#{$css-prefix}tag-level-primary) {
180 @include checkable-tag-tick-size(
181 $tag-size-m-tick-icon-bg-size,
182 $tag-size-m-tick-icon-size
183 );
184 }
185 }
186
187 &.#{$css-prefix}tag-large {
188 &:not(.#{$css-prefix}tag-level-primary) {
189 @include checkable-tag-tick-size(
190 $tag-size-l-tick-icon-bg-size,
191 $tag-size-l-tick-icon-size
192 );
193 }
194 }
195
196 &.#{$css-prefix}tag-level-normal {
197 @extend %tag-selectable-normal;
198
199 &.checked {
200 @extend %tag-statement-normal;
201 @extend %tag-checkable-normal-tick;
202 }
203 }
204
205 &.#{$css-prefix}tag-level-primary {
206 @extend %tag-statement-checkable-fill;
207
208 &.checked {
209 @extend %tag-statement-checkable-fill-checked;
210 }
211 }
212
213 &.#{$css-prefix}tag-level-secondary {
214 @extend %tag-statement-text;
215
216 &.checked {
217 @extend %tag-statement-secondary;
218 @extend %tag-checkable-secondary-tick;
219 }
220
221 &[disabled], &.disabled {
222 color: $tag-text-color-disabled;
223 border-color: $tag-border-color-disabled;
224 background-color: $tag-fill-bg-color-disabled;
225 }
226 }
227 }
228
229 /* Animation */
230 /* ----------- */
231 &tag-zoom-enter,
232 &tag-zoom-appear {
233 animation: fadeInLeft .4s $ease-in-out-circ;
234 animation-fill-mode: both;
235 }
236
237 &tag-zoom-leave {
238 animation: zoomOut .3s ease-in;
239 animation-fill-mode: both;
240 }
241}
242