dolibarr  17.0.4
badges.inc.php
1 <?php
2 if (!defined('ISLOADEDBYSTEELSHEET')) {
3  die('Must be call by steelsheet');
4 }
5 ?>
6 /* <style type="text/css" > */
7 /*
8  Badge style is based on boostrap framework
9  */
10 
11 .badge {
12  display: inline-block;
13  padding: .1em .35em;
14  font-size: 80%;
15  font-weight: 700 !important;
16  line-height: 1;
17  text-align: center;
18  white-space: nowrap;
19  vertical-align: baseline;
20  border-radius: .25rem;
21  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
22  border-width: 2px;
23  border-style: solid;
24  border-color: rgba(255,255,255,0);
25  box-sizing: border-box;
26 }
27 
28 .badge-status {
29  font-size: 1em;
30  padding: .19em .35em; /* more than 0.19 generate a change into heigth of lines */
31 }
32 .tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
33  font-size: 1.1em;
34  padding: .4em .4em;
35 }
36 /* Force values for small screen 767 */
37 @media only screen and (max-width: 767px)
38 {
39  .tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
40  font-size: 0.95em;
41  padding: .3em .2em;
42  }
43 }
44 
45 .badge-pill, .tabs .badge {
46  padding-right: .5em;
47  padding-left: .5em;
48  border-radius: 0.25rem;
49 }
50 
51 .badge-dot {
52  padding: 0;
53  border-radius: 50%;
54  padding: 0.45em;
55  vertical-align: unset;
56 }
57 
58 a.badge:focus, a.badge:hover {
59  text-decoration: none;
60 }
61 
62 .liste_titre .badge:not(.nochangebackground) {
63  background-color: <?php print $badgeSecondary; ?>;
64  color: #fff;
65 }
66 
67 span.badgeneutral {
68  padding: 2px 7px 2px 7px;
69  background-color: #e4e4e4;
70  color: #666;
71  border-radius: 10px;
72  white-space: nowrap;
73 }
74 
75 
76 /* PRIMARY */
77 .badge-primary{
78  color: #fff !important;
79  background-color: <?php print $badgePrimary; ?>;
80 }
81 a.badge-primary.focus, a.badge-primary:focus {
82  outline: 0;
83  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgePrimary, 0.5); ?>;
84 }
85 a.badge-primary:focus, a.badge-primary:hover {
86  color: #fff !important;
87  background-color: <?php print colorDarker($badgePrimary, 10); ?>;
88 }
89 
90 /* SECONDARY */
91 .badge-secondary, .tabs .badge {
92  color: #fff !important;
93  background-color: <?php print $badgeSecondary; ?>;
94 }
95 a.badge-secondary.focus, a.badge-secondary:focus {
96  outline: 0;
97  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSecondary, 0.5); ?>;
98 }
99 a.badge-secondary:focus, a.badge-secondary:hover {
100  color: #fff !important;
101  background-color: <?php print colorDarker($badgeSecondary, 10); ?>;
102 }
103 
104 /* SUCCESS */
105 .badge-success {
106  color: #fff !important;
107  background-color: <?php print $badgeSuccess; ?>;
108 }
109 a.badge-success.focus, a.badge-success:focus {
110  outline: 0;
111  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeSuccess, 0.5); ?>;
112 }
113 a.badge-success:focus, a.badge-success:hover {
114  color: #fff !important;
115  background-color: <?php print colorDarker($badgeSuccess, 10); ?>;
116 }
117 
118 /* DANGER */
119 .badge-danger {
120  color: #fff !important;
121  background-color: <?php print $badgeDanger; ?>;
122 }
123 a.badge-danger.focus, a.badge-danger:focus {
124  outline: 0;
125  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDanger, 0.5); ?>;
126 }
127 a.badge-danger:focus, a.badge-danger:hover {
128  color: #fff !important;
129  background-color: <?php print colorDarker($badgeDanger, 10); ?>;
130 }
131 
132 /* WARNING */
133 .badge-warning {
134  color: #fff !important;
135  background-color: <?php print $badgeWarning; ?>;
136 }
137 a.badge-warning.focus, a.badge-warning:focus {
138  outline: 0;
139  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeWarning, 0.5); ?>;
140 }
141 a.badge-warning:focus, a.badge-warning:hover {
142  color: #212529 !important;
143  background-color: <?php print colorDarker($badgeWarning, 10); ?>;
144 }
145 
146 /* WARNING colorblind */
147 body[class*="colorblind-"] .badge-warning {
148  background-color: <?php print $colorblind_deuteranopes_badgeWarning; ?>;
149  }
150 body[class*="colorblind-"] a.badge-warning.focus,body[class^="colorblind-"] a.badge-warning:focus {
151  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($colorblind_deuteranopes_badgeWarning, 0.5); ?>;
152 }
153 body[class*="colorblind-"] a.badge-warning:focus, a.badge-warning:hover {
154  background-color: <?php print colorDarker($colorblind_deuteranopes_badgeWarning, 10); ?>;
155 }
156 
157 /* INFO */
158 .badge-info {
159  color: #fff !important;
160  background-color: <?php print $badgeInfo; ?>;
161 }
162 a.badge-info.focus, a.badge-info:focus {
163  outline: 0;
164  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeInfo, 0.5); ?>;
165 }
166 a.badge-info:focus, a.badge-info:hover {
167  color: #fff !important;
168  background-color: <?php print colorDarker($badgeInfo, 10); ?>;
169 }
170 
171 /* LIGHT */
172 .badge-light {
173  color: #212529 !important;
174  background-color: <?php print $badgeLight; ?>;
175 }
176 a.badge-light.focus, a.badge-light:focus {
177  outline: 0;
178  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeLight, 0.5); ?>;
179 }
180 a.badge-light:focus, a.badge-light:hover {
181  color: #212529 !important;
182  background-color: <?php print colorDarker($badgeLight, 10); ?>;
183 }
184 
185 /* DARK */
186 .badge-dark {
187  color: #fff !important;
188  background-color: <?php print $badgeDark; ?>;
189 }
190 a.badge-dark.focus, a.badge-dark:focus {
191  outline: 0;
192  box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($badgeDark, 0.5); ?>;
193 }
194 a.badge-dark:focus, a.badge-dark:hover {
195  color: #fff !important;
196  background-color: <?php print colorDarker($badgeDark, 10); ?>;
197 }
198 
199 
200 @media only screen and (max-width: 570px)
201 {
202  span.badge.badge-status {
203  overflow: hidden;
204  max-width: 130px;
205  text-overflow: ellipsis;
206  }
207 }
208 
209 
210 /* STATUS BADGES */
211 <?php
212 for ($i = 0; $i <= 10; $i++) {
213  /* Default Status */
214  _createStatusBadgeCss($i, '', "STATUS".$i);
215 
216  // create status for accessibility
217  _createStatusBadgeCss($i, 'colorblind_deuteranopes_', "COLORBLIND STATUS".$i, 'body[class*="colorblind-"] ');
218 }
219 
220 _createStatusBadgeCss('1b', '', "STATUS1b");
221 _createStatusBadgeCss('4b', '', "STATUS4b");
222 
232 function _createStatusBadgeCss($statusName, $statusVarNamePrefix = '', $commentLabel = '', $cssPrefix = '')
233 {
234 
235  global ${$statusVarNamePrefix.'badgeStatus'.$statusName}, ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
236 
237  if (!empty(${$statusVarNamePrefix.'badgeStatus'.$statusName})) {
238  print "\n/* ".strtoupper($commentLabel)." */\n";
239 
240  $thisBadgeBackgroundColor = $thisBadgeBorderColor = ${$statusVarNamePrefix.'badgeStatus'.$statusName};
241 
242 
243  $TBadgeBorderOnly = array('0', '1b', '3', '4b', '5', '7', '10');
244  $thisBadgeTextColor = colorIsLight(${$statusVarNamePrefix.'badgeStatus'.$statusName}) ? '#212529' : '#ffffff';
245 
246  if (!empty(${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName})) {
247  $thisBadgeTextColor = ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
248  }
249 
250  if (in_array((string) $statusName, $TBadgeBorderOnly)) {
251  $thisBadgeTextColor = '#212529';
252  $thisBadgeBackgroundColor = "#fff";
253  }
254 
255  if (in_array((string) $statusName, array('0', '5', '9'))) {
256  $thisBadgeTextColor = '#999999';
257  }
258  if (in_array((string) $statusName, array('6'))) {
259  $thisBadgeTextColor = '#777777';
260  }
261 
262  print $cssPrefix.".badge-status".$statusName." {\n";
263  print " color: ".$thisBadgeTextColor." !important;\n";
264  if (in_array((string) $statusName, $TBadgeBorderOnly)) {
265  print " border-color: ".$thisBadgeBorderColor." !important;\n";
266  }
267  print " background-color: ".$thisBadgeBackgroundColor." !important;\n";
268  print "}\n";
269 
270  print $cssPrefix.".font-status".$statusName." {\n";
271  print " color: ".$thisBadgeBackgroundColor." !important;\n";
272  print "}\n";
273 
274  print $cssPrefix.".badge-status".$statusName.".focus, ".$cssPrefix.".badge-status".$statusName.":focus {\n";
275  print " outline: 0;\n";
276  print " box-shadow: 0 0 0 0.2rem ".colorHexToRgb($thisBadgeBackgroundColor, 0.5)." !important;\n";
277  print "}\n";
278 
279  print $cssPrefix.".badge-status".$statusName.":focus, ".$cssPrefix.".badge-status".$statusName.":hover {\n";
280  print " color: ".$thisBadgeTextColor." !important;\n";
281  //print " background-color: ".colorDarker($thisBadgeBackgroundColor, 10).";\n";
282  if (in_array((string) $statusName, $TBadgeBorderOnly)) {
283  print " border-color: ".colorDarker($thisBadgeBorderColor, 10)." !important;\n";
284  }
285  print "}\n";
286  }
287 }
288 
colorHexToRgb($hex, $alpha=false, $returnArray=false)
colorDarker($hex, $percent)
colorIsLight($stringcolor)
Return true if the color is light.