badges.inc.php 8.1 KB

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