Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complement for Abesh's traffic lights in SAP UI5
/*
This is an alternative colorcircle.css for the following Gist: https://gist.github.com/abesh/9504351
This alternative CSS displays the different colors (red, yellow/orange, green)
as different shapes (rounded rectangle, triange, circle)
This makes them less ambigous especially for color-blind folks
Tested in Chrome and IE10
*/
.circlered-text {
width:46px;
}
.circlered-text:after {
content: "";
display: block;
width: 40px;
height:0;
padding-bottom: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #ff0000;
margin:3px;
}
.circlered-text div {
float: left;
width: 46px;
height: 40px;
line-height: 40px;
color: white;
text-align: center;
}
.circlegreen-text {
width:46px;
}
.circlegreen-text:after {
content: " ";
display: block;
width: 40px;
height:0;
padding-bottom: 40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: #32CD32;
margin:3px;
}
.circlegreen-text div {
float: left;
width: 46px;
height: 40px;
line-height: 40px;
color: white;
text-align: center;
}
.circleyellow-text {
width:46px;
}
.circleyellow-text:after {
content: "";
display: block;
background: transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #ffbf66;
margin:3px;
}
.circleyellow-text div {
float: left;
width: 46px;
height: 40px;
line-height: 55px;
color: white;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.