dolibarr 18.0.6
badges.inc.php
1<?php
2if (!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
58a.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
67span.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}
81a.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}
85a.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}
95a.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}
99a.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}
109a.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}
113a.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}
123a.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}
127a.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}
137a.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}
141a.badge-warning:focus, a.badge-warning:hover {
142 color: #212529 !important;
143 background-color: <?php print colorDarker($badgeWarning, 10); ?>;
144}
145
146/* WARNING colorblind */
147body[class*="colorblind-"] .badge-warning {
148 background-color: <?php print $colorblind_deuteranopes_badgeWarning; ?>;
149 }
150body[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}
153body[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}
162a.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}
166a.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}
176a.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}
180a.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}
190a.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}
194a.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
212for ($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
232function _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.