Fix color badges and status for color blind
This commit is contained in:
John Botella
parent
450878cd92
commit
af4d5aa549
@ -115,6 +115,17 @@ a.badge-warning:focus, a.badge-warning:hover {
|
|||||||
background-color: <?php print colorDarker($badgeWarning, 10); ?>;
|
background-color: <?php print colorDarker($badgeWarning, 10); ?>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* WARNING colorblind */
|
||||||
|
body[class^="colorblind-"] .badge-warning {
|
||||||
|
background-color: <?php print $colorblind_deuteranopes_badgeWarning; ?>;
|
||||||
|
}
|
||||||
|
body[class^="colorblind-"] a.badge-warning.focus,body[class^="colorblind-"] a.badge-warning:focus {
|
||||||
|
box-shadow: 0 0 0 0.2rem <?php print colorHexToRgb($colorblind_deuteranopes_badgeWarning, 0.5); ?>;
|
||||||
|
}
|
||||||
|
body[class^="colorblind-"] a.badge-warning:focus, a.badge-warning:hover {
|
||||||
|
background-color: <?php print colorDarker($colorblind_deuteranopes_badgeWarning, 10); ?>;
|
||||||
|
}
|
||||||
|
|
||||||
/* INFO */
|
/* INFO */
|
||||||
.badge-info {
|
.badge-info {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
@ -160,44 +171,66 @@ a.badge-dark:focus, a.badge-dark:hover {
|
|||||||
/*
|
/*
|
||||||
* STATUS BADGES
|
* STATUS BADGES
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Default Status */
|
|
||||||
|
|
||||||
<?php for ($i = 0; $i <= 9; $i++){
|
<?php for ($i = 0; $i <= 9; $i++){
|
||||||
|
/* Default Status */
|
||||||
|
_createStatusBadgeCss($i, '', "STATUS".$i);
|
||||||
|
|
||||||
print "\n/* STATUS".$i." */\n";
|
// create status for accessibility
|
||||||
|
_createStatusBadgeCss($i, 'colorblind_deuteranopes_', "COLORBLIND STATUS".$i, 'body[class*="colorblind-"] ');
|
||||||
$thisBadgeBackgroundColor = $thisBadgeBorderColor = ${'badgeStatus'.$i};
|
|
||||||
|
|
||||||
|
|
||||||
$TBadgeBorderOnly = array(0,3,5,7);
|
|
||||||
$thisBadgeTextColor = colorIsLight(${'badgeStatus'.$i})?'#212529':'#ffffff';
|
|
||||||
if(in_array($i, $TBadgeBorderOnly)){
|
|
||||||
$thisBadgeTextColor = '#212529';
|
|
||||||
$thisBadgeBackgroundColor = "#fff";
|
|
||||||
}
|
|
||||||
|
|
||||||
print ".badge-status".$i." {\n";
|
|
||||||
print " color: ".$thisBadgeTextColor." !important;\n";
|
|
||||||
|
|
||||||
if(in_array($i, $TBadgeBorderOnly)){
|
|
||||||
print " border-color: ".$thisBadgeBorderColor.";\n";
|
|
||||||
}
|
|
||||||
|
|
||||||
print " background-color: ".$thisBadgeBackgroundColor.";\n";
|
|
||||||
print "}\n";
|
|
||||||
|
|
||||||
print ".badge-status".$i.".focus, .badge-status".$i.":focus {\n";
|
|
||||||
print " outline: 0;\n";
|
|
||||||
print " box-shadow: 0 0 0 0.2rem ".colorHexToRgb($thisBadgeBackgroundColor, 0.5).";\n";
|
|
||||||
print "}\n";
|
|
||||||
|
|
||||||
print ".badge-status".$i.":focus, .badge-status".$i.":hover {\n";
|
|
||||||
print " color: ".$thisBadgeTextColor." !important;\n";
|
|
||||||
print " background-color: ".colorDarker($thisBadgeBackgroundColor, 10).";\n";
|
|
||||||
if(in_array($i, $TBadgeBorderOnly)){
|
|
||||||
print " border-color: ".colorDarker($thisBadgeBorderColor, 10).";\n";
|
|
||||||
}
|
|
||||||
print "}\n";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* create status badge
|
||||||
|
* @param string $statusName name of status
|
||||||
|
* @param string $statusVarNamePrefix a prefix for var ${$statusVarNamePrefix.'badgeStatus'.$statusName}
|
||||||
|
* @param string $commentLabel a comment label
|
||||||
|
* @param string $cssPrefix a css prefix
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
function _createStatusBadgeCss($statusName, $statusVarNamePrefix = '', $commentLabel = '', $cssPrefix = '')
|
||||||
|
{
|
||||||
|
|
||||||
|
global ${$statusVarNamePrefix.'badgeStatus'.$statusName}, ${$statusVarNamePrefix.'badgeStatus_textColor'.$statusName};
|
||||||
|
|
||||||
|
if(!empty(${$statusVarNamePrefix.'badgeStatus'.$statusName})) {
|
||||||
|
print "\n/* " . strtoupper($commentLabel) . " */\n";
|
||||||
|
$thisBadgeBackgroundColor = $thisBadgeBorderColor = ${$statusVarNamePrefix . 'badgeStatus' . $statusName};
|
||||||
|
|
||||||
|
|
||||||
|
$TBadgeBorderOnly = array(0, 3, 5, 7);
|
||||||
|
$thisBadgeTextColor = colorIsLight(${$statusVarNamePrefix . 'badgeStatus' . $statusName}) ? '#212529' : '#ffffff';
|
||||||
|
|
||||||
|
|
||||||
|
if (!empty(${$statusVarNamePrefix . 'badgeStatus_textColor' . $statusName})) {
|
||||||
|
$thisBadgeTextColor = ${$statusVarNamePrefix . 'badgeStatus_textColor' . $statusName};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (in_array($statusName, $TBadgeBorderOnly)) {
|
||||||
|
$thisBadgeTextColor = '#212529';
|
||||||
|
$thisBadgeBackgroundColor = "#fff";
|
||||||
|
}
|
||||||
|
|
||||||
|
print $cssPrefix . ".badge-status" . $statusName . " {\n";
|
||||||
|
print " color: " . $thisBadgeTextColor . " !important;\n";
|
||||||
|
|
||||||
|
if (in_array($statusName, $TBadgeBorderOnly)) {
|
||||||
|
print " border-color: " . $thisBadgeBorderColor . ";\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
print " background-color: " . $thisBadgeBackgroundColor . ";\n";
|
||||||
|
print "}\n";
|
||||||
|
|
||||||
|
print $cssPrefix . ".badge-status" . $statusName . ".focus, " . $cssPrefix . ".badge-status" . $statusName . ":focus {\n";
|
||||||
|
print " outline: 0;\n";
|
||||||
|
print " box-shadow: 0 0 0 0.2rem " . colorHexToRgb($thisBadgeBackgroundColor, 0.5) . ";\n";
|
||||||
|
print "}\n";
|
||||||
|
|
||||||
|
print $cssPrefix . ".badge-status" . $statusName . ":focus, " . $cssPrefix . ".badge-status" . $statusName . ":hover {\n";
|
||||||
|
print " color: " . $thisBadgeTextColor . " !important;\n";
|
||||||
|
print " background-color: " . colorDarker($thisBadgeBackgroundColor, 10) . ";\n";
|
||||||
|
if (in_array($statusName, $TBadgeBorderOnly)) {
|
||||||
|
print " border-color: " . colorDarker($thisBadgeBorderColor, 10) . ";\n";
|
||||||
|
}
|
||||||
|
print "}\n";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -77,6 +77,11 @@ $badgeInfo ='#17a2b8';
|
|||||||
$badgeDark ='#343a40';
|
$badgeDark ='#343a40';
|
||||||
$badgeLight ='#f8f9fa';
|
$badgeLight ='#f8f9fa';
|
||||||
|
|
||||||
|
// badge color ajustement for color blind
|
||||||
|
$colorblind_deuteranopes_badgeSuccess ='#37de5d'; //! text color black
|
||||||
|
$colorblind_deuteranopes_badgeSuccess_textColor7='#000';
|
||||||
|
$colorblind_deuteranopes_badgeWarning ='#e4e411';
|
||||||
|
|
||||||
/* default color for status : After a quick check, somme status can have oposite function according to objects
|
/* default color for status : After a quick check, somme status can have oposite function according to objects
|
||||||
* So this badges status uses default value according to theme eldy status img
|
* So this badges status uses default value according to theme eldy status img
|
||||||
* TODO: use color definition vars above for define badges color status X -> expemple $badgeStatusValidate, $badgeStatusClosed, $badgeStatusActive ....
|
* TODO: use color definition vars above for define badges color status X -> expemple $badgeStatusValidate, $badgeStatusClosed, $badgeStatusActive ....
|
||||||
@ -91,3 +96,9 @@ $badgeStatus6='#cad2d2';
|
|||||||
$badgeStatus7='#baa32b';
|
$badgeStatus7='#baa32b';
|
||||||
$badgeStatus8='#be3013';
|
$badgeStatus8='#be3013';
|
||||||
$badgeStatus9='#e7f0f0';
|
$badgeStatus9='#e7f0f0';
|
||||||
|
|
||||||
|
// status color ajustement for color blind
|
||||||
|
$colorblind_deuteranopes_badgeStatus4=$colorblind_deuteranopes_badgeStatus7=$colorblind_deuteranopes_badgeSuccess; //! text color black
|
||||||
|
$colorblind_deuteranopes_badgeStatus_textColor4=$colorblind_deuteranopes_badgeStatus_textColor7='#000';
|
||||||
|
$colorblind_deuteranopes_badgeStatus1=$colorblind_deuteranopes_badgeWarning;
|
||||||
|
$colorblind_deuteranopes_badgeStatus_textColor1='#000';
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user