All files / src/TagWithIcon TagWithIcon.module.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.varClass {
  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
  --tag_text_color: var(--zdt_tagWithIconGrey_text);
  --tag_border_color: var(--zdt_tagWithIconGrey_border);
  --tag_small_fontSize: 10px;
  --tag_large_fontSize: 12px;
}
 
.wrapper {
  composes: varClass;
  background-color: var(--tag_bg_color);
  color: var(--tag_text_color);
}
 
.small,
.large {
  border: 1px solid var(--tag_border_color);
  border-radius: var(--zd_size4);
  max-width: 100%;
  height: 18px;
  padding: 0 6px;
}
 
.bold {
  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
}
 
.small_text {
  font-size: var(--tag_small_fontSize);
}
 
.large_text {
  font-size: var(--tag_large_fontSize);
}
 
.text {
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
}
 
.iconSpace {
  margin-right: 4px;
}
 
.yellow {
  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
  --tag_text_color: var(--zdt_tagWithIconYellow_text);
  --tag_border_color: var(--zdt_tagWithIconYellow_border);
}
 
.grey {
  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
  --tag_text_color: var(--zdt_tagWithIconGrey_text);
  --tag_border_color: var(--zdt_tagWithIconGrey_border);
}
 
.blue {
  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
  --tag_text_color: var(--zdt_tagWithIconBlue_text);
  --tag_border_color: var(--zdt_tagWithIconBlue_border);
}