// # Icons
// SVG and activity icons. A few things to note about SVGs:
//
// - Use these class options on your SVG. Only size them in your CSS if absolutely necessary.
// - The color of the SVG will inherit the parent's `color`.
// - Note: To use this icons make sure that the SVG source sprite
// is placed immediately after the ``, like so:
//[c]
//
//[/c]
// ## Activity Icons
//
//
//
//
//
//
//
This is the active item.
//
//
//
//
//
//
//
//
This is good.
//
//
//
//
//
//
//
//
This is probably not good.
//
//
//
//
//
//
//
//
This is not active but holds the space if needed.
//
//
//
//
//
// ## SVG Icons
// Click to copy.
//
//
icon examples are generated by javascript
.#{$namespace}icon {
width: 16px;
height: 16px;
display: inline-block;
fill: currentColor;
&--small {
width: 12px;
height: 12px;
}
&--large {
width: 32px;
height: 32px;
}
// This is a vertical alignment fix when used to the right of `.#{$namespace}icon`.
+ [class^="#{$namespace}-arrow-inline"] {
vertical-align: super;
}
}
// Fix for icons inside buttons with text.
.#{$namespace}button .#{$namespace}icon {
vertical-align: sub;
}
// Fix for icons inside tabs.
.#{$namespace}tabs-nav__item .#{$namespace}icon {
vertical-align: sub;
}
// ## Activity Icons
// Used for showing the status item.
.icon-status {
&--active,
&--bad-news,
&--good-news,
&--empty {
&::before {
content: '';
border-radius: map-fetch($border-radius, full);
display: inline-block;
width: 10px;
height: 10px;
}
}
&--active::before {
background: map-fetch($color, ui brand);
}
&--bad-news::before {
background: map-fetch($color, ui bad-news);
}
&--good-news::before {
background: map-fetch($color, ui good-news);
}
}