1 | @import '../../styles/common/colors';
|
2 |
|
3 | .chip-wrapper {
|
4 | background-color: $neutral-4;
|
5 | border-radius: 2px;
|
6 | color: $primary-4;
|
7 | display: inline-flex;
|
8 | font-size: 12px;
|
9 | font-weight: normal;
|
10 | padding: 3px 12px;
|
11 |
|
12 | span {
|
13 | line-height: 1.6;
|
14 | position: relative;
|
15 | }
|
16 |
|
17 | &.larger {
|
18 | font-size: 14px;
|
19 | }
|
20 |
|
21 | &.smaller {
|
22 | font-size: 10px;
|
23 | font-weight: 200;
|
24 | padding: 5px 8px 3px;
|
25 | text-transform: uppercase;
|
26 | }
|
27 |
|
28 | &.primary, &.primary-1 {
|
29 | background-color: $primary-1;
|
30 | color: $white;
|
31 | }
|
32 |
|
33 | &.primary-2 {
|
34 | background-color: $primary-2;
|
35 | color: $white;
|
36 | }
|
37 |
|
38 | &.primary-3 {
|
39 | background-color: $primary-3;
|
40 | color: $white;
|
41 | }
|
42 |
|
43 | &.primary-4 {
|
44 | background-color: $primary-4;
|
45 | color: $white;
|
46 | }
|
47 |
|
48 | &.primary-5 {
|
49 | background-color: $primary-5;
|
50 | color: $white;
|
51 | }
|
52 |
|
53 | &.primary-darker, &.primary-6 {
|
54 | background-color: $primary-6;
|
55 | color: $white;
|
56 | }
|
57 |
|
58 | &.neutral-1 {
|
59 | background-color: $neutral-1;
|
60 | }
|
61 |
|
62 | &.neutral-2 {
|
63 | background-color: $neutral-2;
|
64 | }
|
65 |
|
66 | &.neutral-3 {
|
67 | background-color: $neutral-3;
|
68 | }
|
69 |
|
70 | &.neutral-4 {
|
71 | background-color: $neutral-4;
|
72 | }
|
73 |
|
74 | &.danger {
|
75 | background-color: $danger;
|
76 | color: $white;
|
77 | }
|
78 |
|
79 | &.success {
|
80 | background-color: $success;
|
81 | color: $white;
|
82 | }
|
83 |
|
84 | &.warning {
|
85 | background-color: $warning;
|
86 | color: $white;
|
87 | }
|
88 |
|
89 | &.info {
|
90 | background-color: $info;
|
91 | color: $white;
|
92 | }
|
93 |
|
94 | &.is-actionable {
|
95 | cursor: pointer;
|
96 | }
|
97 | }
|