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