CoCalc -- phui-icon.css

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

5
.phui-icon-example .phui-icon-view {
6
  display: inline-block;
7
  vertical-align: top;
8
}
9

10
.phui-icon-view.sprite-tokens {
11
  height: 18px;
12
  width: 18px;
13
  display: inline-block;
14
  vertical-align: top;
15
}
16

17
.phui-icon-view.sprite-login {
18
  height: 28px;
19
  width: 28px;
20
}
21

22
.phui-icon-view.phuihead-medium {
23
  height: 50px;
24
  width: 50px;
25
}
26

27
.phui-icon-view.phuihead-small {
28
  height: 35px;
29
  width: 35px;
30
  background-size: 35px;
31
}
32

33
.phui-icon-has-text:before {
34
  margin-right: 6px;
35
}
36

37
a.phui-icon-view:hover {
38
  text-decoration: none;
39
  color: {$sky};
40
}
41

42
img.phui-image-disabled {
43
  opacity: .8;
44
  -webkit-filter: grayscale(100%);
45
  filter: grayscale(100%);
46
}
47

48
.phui-icon-view.bluetext {
49
  color: {$bluetext};
50
}
51

52
.phui-icon-view.invisible {
53
  visibility: hidden;
54
}
55

56
/* - Icon in a Circle ------------------------------------------------------- */
57

58
.phui-icon-circle {
59
  border: 1px solid {$lightblueborder};
60
  border-radius: 24px;
61
  height: 24px;
62
  width: 24px;
63
  text-align: center;
64
  display: inline-block;
65
  cursor: pointer;
66
  background: transparent;
67
  padding: 0;
68
  position: relative;
69
}
70

71
.phui-icon-circle.circle-medium {
72
  height: 36px;
73
  width: 36px;
74
  border-radius: 36px;
75
}
76

77
.phui-icon-circle.phui-icon-circle-state {
78
  border-color: transparent;
79
  background-color: {$bluebackground};
80
}
81

82
.phui-icon-circle.phui-icon-circle-state .phui-icon-circle-icon {
83
  color: {$bluetext};
84
  font-size: 16px;
85
}
86

87
a.phui-icon-circle.phui-icon-circle-state:hover {
88
  border-color: transparent !important;
89
}
90

91
.phui-icon-circle .phui-icon-circle-icon {
92
  height: 24px;
93
  width: 24px;
94
  font-size: 11px;
95
  line-height: 24px;
96
  color: {$lightblueborder};
97
  cursor: pointer;
98
}
99

100
.phui-icon-circle.circle-medium .phui-icon-circle-icon {
101
  font-size: 18px;
102
  line-height: 36px;
103
}
104

105
a.phui-icon-circle.hover-sky:hover {
106
  text-decoration: none;
107
  border-color: {$sky};
108
  cursor: pointer;
109
}
110

111
a.phui-icon-circle.hover-sky:hover .phui-icon-view {
112
  color: {$sky};
113
}
114

115
a.phui-icon-circle.hover-violet:hover {
116
  text-decoration: none;
117
  border-color: {$violet};
118
  cursor: pointer;
119
}
120

121
a.phui-icon-circle.hover-violet:hover .phui-icon-view {
122
  color: {$violet};
123
}
124

125
a.phui-icon-circle.hover-pink:hover {
126
  text-decoration: none;
127
  border-color: {$pink};
128
  cursor: pointer;
129
}
130

131
a.phui-icon-circle.hover-pink:hover .phui-icon-view {
132
  color: {$pink};
133
}
134

135
a.phui-icon-circle.hover-green:hover {
136
  text-decoration: none;
137
  border-color: {$green};
138
  cursor: pointer;
139
}
140

141
a.phui-icon-circle.hover-green:hover .phui-icon-view {
142
  color: {$green};
143
}
144

145
a.phui-icon-circle.hover-red:hover {
146
  text-decoration: none;
147
  border-color: {$red};
148
  cursor: pointer;
149
}
150

151
a.phui-icon-circle.hover-red:hover .phui-icon-view {
152
  color: {$red};
153
}
154

155
.phui-icon-circle .phui-icon-view.phui-icon-circle-state-icon {
156
  position: absolute;
157
  width: 14px;
158
  height: 14px;
159
  display: inline-block;
160
  font-size: 12px;
161
  right: -3px;
162
  top: -4px;
163
  text-shadow:
164
    -1px -1px 0 #fff,
165
    1px -1px 0 #fff,
166
    -1px 1px 0 #fff,
167
    1px 1px 0 #fff;
168
}
169

170
/* - Icon in a Square ------------------------------------------------------- */
171

172
.phui-icon-view.phui-icon-square {
173
  height: 40px;
174
  width: 40px;
175
  color: #fff;
176
  font-size: 26px;
177
  text-align: center;
178
  line-height: 38px;
179
  border-radius: 3px;
180
}
181

182
a.phui-icon-view.phui-icon-square:hover {
183
  text-decoration: none;
184
  color: #fff;
185
}
186

187

188
.phui-icon-emblem {
189
  border-radius: 4px;
190
}
191

192
.phui-timeline-extra .phui-icon-emblem {
193
  padding: 4px 6px;
194
}
195

196
.phui-icon-emblem-violet {
197
  background-color: {$violet};
198
}
199

200
.phui-icon-emblem-red {
201
  background-color: {$red};
202
}
203

204
.phui-icon-emblem-pink {
205
  background-color: {$pink};
206
}
207

208
Product

Resources

Company
