CoCalc -- phui-badge.css

GitHub Repository: freebsd/phabricator
Path: blob/master/webroot/rsrc/css/phui/phui-badge.css
¹²²⁴¹ views
1
/**
2
 * @provides phui-badge-view-css
3
 */
4

5
.phui-badge-flex-view {
6
  padding: 0;
7
  overflow: hidden;
8
}
9

10
.phui-badge-flex-item {
11
  display: inline-block;
12
  padding: 4px 12px 4px 0;
13
}
14

15
.phui-badge-flex-view.flex-view-collapsed {
16
  padding: 0;
17
}
18

19
.flex-view-collapsed .phui-badge-flex-item {
20
  padding: 1px;
21
}
22

23
.phui-badge-view {
24
  display: inline-block;
25
  position: relative;
26
  perspective: 512px;
27
}
28

29
.phui-badge-card-container {
30
  transform-style: preserve-3d;
31
  -webkit-transform-style: preserve-3d;
32

33
  transition: transform 0.5s;
34
  -webkit-transition: -webkit-transform 0.5s;
35

36
  transform-origin: right center;
37
  -webkit-transform-origin: right center;
38

39
  width: 100%;
40
  height: 100%;
41
}
42

43
.phui-badge-card {
44
  cursor: pointer;
45
  padding: 12px;
46
  height: 180px;
47
  width: 128px;
48
  border: 1px solid {$lightgreyborder};
49
  background-color: {$lightbluebackground};
50
}
51

52
.phui-badge-card a {
53
  color: {$darkbluetext};
54
}
55

56
.card-flipped .phui-badge-card-container {
57
  transform: translateX( -100% ) rotateY( -180deg );
58
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
59
}
60

61
.phui-badge-card-front,
62
.phui-badge-card-back {
63
  display: block;
64
  position: absolute;
65
  width: 128px;
66
  height: 180px;
67
  overflow: hidden;
68

69
  backface-visibility: hidden;
70
  -webkit-backface-visibility: hidden;
71
  -moz-backface-visibility: hidden;
72
}
73

74

75
/* Firefox Fix */
76
.phui-badge-card-front {
77
  transform: rotateY(0deg);
78
  -webkit-trasform: rotateY(0deg);
79
}
80

81
.phui-badge-front-view,
82
.phui-badge-back-view {
83
  display: table;
84
  width: 100%;
85
}
86

87
.phui-badge-inner-front,
88
.phui-badge-inner-back {
89
  display: table-row;
90
}
91

92
.phui-badge-illustration {
93
  background-color: #fff;
94
  box-shadow: inset 0 -1px 1px 0 rgba({$alphablack},.1);
95
  text-align: center;
96
  height: 100px;
97
  width: 100%;
98
  vertical-align: middle;
99
  display: table-cell;
100
}
101

102
.phui-badge-illustration .phui-icon-view {
103
  font-size: 48px;
104
  height: 48px;
105
  width: 48px;
106
  color: {$bluetext};
107
}
108

109
.phui-badge-view-information {
110
  display: table-cell;
111
  text-align: center;
112
  color: {$greytext};
113
}
114

115
.phui-badge-view-header {
116
  color: {$darkgreytext};
117
  font-weight: bold;
118
  padding-top: 12px;
119
  display: block;
120
  word-break: break-word;
121
}
122

123
.phui-badge-quality {
124
  padding: 4px 0;
125
  color: {$darkbluetext};
126
  font-weight: bold;
127
}
128

129
.phui-badge-view-subhead {
130
  color: {$lightgreytext};
131
  font-size: {$smallerfontsize};
132
  word-break: break-word;
133
}
134

135
.phui-badge-card-back {
136
  transform: rotateY( 180deg );
137
  -webkit-transform: rotateY( 180deg );
138
}
139

140
/** Quality Levels ***********************************************************/
141

142
.phui-badge-view-grey .phui-badge-card {
143
  background-color: {$lightgreybackground};
144
}
145

146
.phui-badge-view-white .phui-badge-card {
147
  background-color: {$lightbluebackground};
148
}
149

150
.phui-badge-view-green .phui-badge-card {
151
  background-color: {$sh-greenbackground};
152
  border-color: {$sh-lightgreenborder};
153
}
154

155
.phui-badge-view-blue .phui-badge-card {
156
  background-color: {$sh-bluebackground};
157
  border-color: {$sh-lightblueborder};
158
}
159

160
.phui-badge-view-indigo .phui-badge-card {
161
  background-color: {$sh-indigobackground};
162
  border-color: {$sh-lightindigoborder};
163
}
164

165
.phui-badge-view-orange .phui-badge-card {
166
  background-color: {$sh-orangebackground};
167
  border-color: {$sh-lightorangeborder};
168
}
169

170
.phui-badge-view-yellow .phui-badge-card {
171
  background-color: {$sh-yellowbackground};
172
  border-color: {$sh-lightyellowborder};
173
}
174

175
/** Mini View ****************************************************************/
176

177
.phui-badge-mini {
178
  background-color: {$greyborder};
179
  border-radius: 18px;
180
  height: 25px;
181
  width: 25px;
182
  line-height: 24px;
183
  text-align: center;
184
  display: inline-block;
185
}
186

187
.phui-badge-mini .phui-icon-view {
188
  color: #fff;
189
  font-size: 12px;
190
  margin: 0;
191
}
192

193
.phui-badge-mini-grey {
194
  background-color: {$greyborder};
195
}
196

197
.phui-badge-mini-white {
198
  background-color: {$lightblueborder};
199
}
200

201
.phui-badge-mini-green {
202
  background-color: {$sh-greenicon};
203
}
204

205
.phui-badge-mini-blue {
206
  background-color: {$blue};
207
}
208

209
.phui-badge-mini-indigo {
210
  background-color: {$sh-indigoicon};
211
}
212

213
.phui-badge-mini-orange {
214
  background-color: {$sh-orangeicon};
215
}
216

217
.phui-badge-mini-yellow {
218
  background-color: {$sh-yellowicon};
219
}
220

221
Product

Resources

Company
