1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vars';
|
9 | @import '../../globals/scss/helper-mixins';
|
10 | @import '../../globals/scss/typography';
|
11 | @import '../../globals/scss/component-tokens';
|
12 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
13 | @import 'mixins';
|
14 | @import 'tokens';
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | @mixin tags {
|
20 | .#{$prefix}--tag {
|
21 | @include button-reset($width: false);
|
22 | @include type-style('label-01');
|
23 | @include tag-theme(
|
24 | get-token-value($tag-colors, 'tag-background-gray'),
|
25 | get-token-value($tag-colors, 'tag-color-gray'),
|
26 | get-token-value($tag-colors, 'tag-hover-gray')
|
27 | );
|
28 |
|
29 | display: inline-flex;
|
30 | align-items: center;
|
31 | justify-content: center;
|
32 |
|
33 | min-width: rem(32px);
|
34 |
|
35 | max-width: 100%;
|
36 | min-height: 1.5rem;
|
37 | margin: $carbon--spacing-02;
|
38 | padding: $carbon--spacing-02 $carbon--spacing-03;
|
39 | word-break: break-word;
|
40 | border-radius: rem(15px);
|
41 | cursor: default;
|
42 |
|
43 | &:not(:first-child) {
|
44 | margin-left: 0;
|
45 | }
|
46 | }
|
47 |
|
48 | .#{$prefix}--tag--red {
|
49 | @include tag-theme(
|
50 | get-token-value($tag-colors, 'tag-background-red'),
|
51 | get-token-value($tag-colors, 'tag-color-red'),
|
52 | get-token-value($tag-colors, 'tag-hover-red')
|
53 | );
|
54 | }
|
55 |
|
56 | .#{$prefix}--tag--magenta {
|
57 | @include tag-theme(
|
58 | get-token-value($tag-colors, 'tag-background-magenta'),
|
59 | get-token-value($tag-colors, 'tag-color-magenta'),
|
60 | get-token-value($tag-colors, 'tag-hover-magenta')
|
61 | );
|
62 | }
|
63 |
|
64 | .#{$prefix}--tag--purple {
|
65 | @include tag-theme(
|
66 | get-token-value($tag-colors, 'tag-background-purple'),
|
67 | get-token-value($tag-colors, 'tag-color-purple'),
|
68 | get-token-value($tag-colors, 'tag-hover-purple')
|
69 | );
|
70 | }
|
71 |
|
72 | .#{$prefix}--tag--blue {
|
73 | @include tag-theme(
|
74 | get-token-value($tag-colors, 'tag-background-blue'),
|
75 | get-token-value($tag-colors, 'tag-color-blue'),
|
76 | get-token-value($tag-colors, 'tag-hover-blue')
|
77 | );
|
78 | }
|
79 |
|
80 | .#{$prefix}--tag--cyan {
|
81 | @include tag-theme(
|
82 | get-token-value($tag-colors, 'tag-background-cyan'),
|
83 | get-token-value($tag-colors, 'tag-color-cyan'),
|
84 | get-token-value($tag-colors, 'tag-hover-cyan')
|
85 | );
|
86 | }
|
87 |
|
88 | .#{$prefix}--tag--teal {
|
89 | @include tag-theme(
|
90 | get-token-value($tag-colors, 'tag-background-teal'),
|
91 | get-token-value($tag-colors, 'tag-color-teal'),
|
92 | get-token-value($tag-colors, 'tag-hover-teal')
|
93 | );
|
94 | }
|
95 |
|
96 | .#{$prefix}--tag--green {
|
97 | @include tag-theme(
|
98 | get-token-value($tag-colors, 'tag-background-green'),
|
99 | get-token-value($tag-colors, 'tag-color-green'),
|
100 | get-token-value($tag-colors, 'tag-hover-green')
|
101 | );
|
102 | }
|
103 |
|
104 | .#{$prefix}--tag--gray {
|
105 | @include tag-theme(
|
106 | get-token-value($tag-colors, 'tag-background-gray'),
|
107 | get-token-value($tag-colors, 'tag-color-gray'),
|
108 | get-token-value($tag-colors, 'tag-hover-gray')
|
109 | );
|
110 | }
|
111 |
|
112 | .#{$prefix}--tag--cool-gray {
|
113 | @include tag-theme(
|
114 | get-token-value($tag-colors, 'tag-background-cool-gray'),
|
115 | get-token-value($tag-colors, 'tag-color-cool-gray'),
|
116 | get-token-value($tag-colors, 'tag-hover-cool-gray')
|
117 | );
|
118 | }
|
119 |
|
120 | .#{$prefix}--tag--warm-gray {
|
121 | @include tag-theme(
|
122 | get-token-value($tag-colors, 'tag-background-warm-gray'),
|
123 | get-token-value($tag-colors, 'tag-color-warm-gray'),
|
124 | get-token-value($tag-colors, 'tag-hover-warm-gray')
|
125 | );
|
126 | }
|
127 |
|
128 | .#{$prefix}--tag--high-contrast {
|
129 | @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
|
130 | }
|
131 |
|
132 | .#{$prefix}--tag--disabled,
|
133 | .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
|
134 | @include tag-theme($disabled-01, $disabled-02);
|
135 |
|
136 | &:hover {
|
137 | cursor: not-allowed;
|
138 | }
|
139 | }
|
140 |
|
141 | .#{$prefix}--tag__label {
|
142 | max-width: 100%;
|
143 | overflow: hidden;
|
144 | white-space: nowrap;
|
145 | text-overflow: ellipsis;
|
146 | }
|
147 |
|
148 |
|
149 | .#{$prefix}--tag--filter {
|
150 | padding-right: rem(2px);
|
151 | cursor: pointer;
|
152 |
|
153 | &:focus,
|
154 | &:hover {
|
155 | outline: none;
|
156 | }
|
157 | }
|
158 |
|
159 | .#{$prefix}--tag__close-icon {
|
160 | flex-shrink: 0;
|
161 | width: rem(16px);
|
162 | height: rem(16px);
|
163 | margin: 0 0 0 rem(4px);
|
164 | padding: 0;
|
165 | color: currentColor;
|
166 | background-color: transparent;
|
167 | border: 0;
|
168 | border-radius: 50%;
|
169 | cursor: pointer;
|
170 |
|
171 | svg {
|
172 | fill: currentColor;
|
173 | }
|
174 | }
|
175 |
|
176 | .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
|
177 | cursor: not-allowed;
|
178 | }
|
179 |
|
180 | .#{$prefix}--tag__close-icon:focus {
|
181 | border-radius: 50%;
|
182 | outline: none;
|
183 | box-shadow: inset 0 0 0 2px $focus;
|
184 | }
|
185 |
|
186 | .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
|
187 | .#{$prefix}--tag__close-icon:hover {
|
188 | background-color: transparent;
|
189 | }
|
190 |
|
191 | .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
|
192 | fill: $disabled-02;
|
193 | }
|
194 |
|
195 |
|
196 | .#{$prefix}--tag.#{$prefix}--skeleton {
|
197 | @include skeleton;
|
198 | @include tag-theme($bg-color: $ui-03, $text-color: $text-01);
|
199 |
|
200 | width: rem(60px);
|
201 | overflow: hidden;
|
202 | }
|
203 | }
|
204 |
|
205 | @include exports('tags') {
|
206 | @include tags;
|
207 | }
|