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 |
|
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 |
|
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 |
|