All files / components/badge badge.styled.js

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

import styled from 'styled-components'
 
const BadgeStyled = styled.div`
border-radius: 100px;
display:flex;
justify-content:center;
${p => {
    if (p.width === 'full')
      return 'width:100%;'
    else if (p.width === 'content')
      return `width:fit-content;`
    else
      return `width:${p.width};`;
  }};
margin: 3px;
 
&.primary {
  color: #2870b2;
  background-color: #e7f0f7;
}
 
&.success
{
  color: #6f9e32;
  background-color: #dcecc9;
}
 
&.warning
{
  color: #e8b007;
  background-color: #fff2d2;
}
 
&.secondary {
  color: #95a3b7;
  background-color: #f4f5f8;
}
 
&.default {
  color: #333;
  background-color: #eee;
}
 
&.danger {
  color: #de4246;
  background-color: #fcdfdf;
}
 
&.dark {
  color: #ffffff;
  background-color: #3b495e;
}
 
>.badge-prefix, >.badge-suffix{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 100%;
}
 
.badge-label
{
  text-align:center;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}
 
&.badge-small{
  padding:1px 1px;
  height: 15px;
  >.badge-label{
    padding: 0px 10px;
  }
 
}
 
&.badge-medium{
  padding:2px 2px;
  height: 20px;
  >.badge-label{
    padding: 1px 20px;
  }
}
 
&.badge-large{
  padding:2px 4px;
  height: 30px;
  >.badge-label{
    padding: 2px 30px;
    line-height: 24px;
  }
}
`
export default BadgeStyled