Color inheritance #15
Description
If you leave off the color when writing a border rule, color will be used.
Something like this:
.lb-iconname {
/* ... */
border-bottom: 12px solid;
}Instead of this:
.lb-iconname {
/* ... */
border-bottom: 12px solid #3498DB;
}Color can still be set with border-color by you (with your color class names) or by the consumer, but additionally it will inherit color. This is a huge win because it means an icon in a button will inherit the button text color, in a link will inherit the link color, etc.
One thing to note: in some older browsers, there are painting bugs which require the color to be explicitly inherited (even though this is the default for most elements), particularly for :hover, :active and pseudo-elements. But this can be handled for all icons with a few simple rules. Something like this would work:
.lb-icon, .lb-icon:hover, .lb-icon:active, .lb-icon:hover:before, .lb-icon:hover:after, .lb-icon:active:before, .lb-icon:active:after {
color: inherit
}