Glyph Color
Highly customized unordered lists of bullets. Text Lists are more dependent upon HTML and CSS resets than other elements, particularly to control indents. For additional elements that use a list-bullet, see the link-bullet page. Pseudo classes for space :before and :after are available in space-padding and space-margin.
bullet-[color]
- list item 1
- list item 2
- list item 3
bullet-color which is the default evo-color.
- list item 1
- list item 2
- list item 3
bullet-black
- list item 1
- list item 2
- list item 3
bullet-gray-dark
- list item 1
- list item 2
- list item 3
bullet-gray
- list item 1
- list item 2
- list item 3
bullet-gray-light
<ul class="list-bullet bullet-x bullet-gray-light">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
To modify the color of a bullet, create a <ul> tag that contains <li> tags. Apply the list-bullet class followed by a color class such as bullet-gray-light. List variables can be adjusted in _evo_variables.scss
- list item 1
- list item 2
- list item 3
bullet-white
<ul class="list-bullet bullet-x bullet-white">
<li class="text-inverse">list item 1</li>
<li class="text-inverse">list item 2</li>
<li class="text-inverse">list item 3</li>
</ul>
Demonstration of white bullets on an inverse background. With this method, we use the list-bullet class to change the bullet color to white. The text-inverse class colorizes individual <li> items, and the bullet-white class colors the bullets.
bullet-[color]-after
- list item 1
- list item 2
- list item 3
bullet-color which is the default evo-color.
<ul class="list-bullet-after bullet-arrow-after bullet-gray-light-after">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Use the -after classes such as bullet-gray-light-after to apply a color.
bullet-[color]-hover-after
- list item 1
- list item 2
- list item 3
bullet-color which is the default evo-color.
<ul class="list-bullet-after bullet-arrow-after bullet-gray-light-after bullet-color-hover-after bullet-hover-after">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Add the a class such as bullet-color-hover-after to apply a hover color. Corresponding bullet-color-hover classes are available (which by default are :before classes). Use bullet-inherit-hover to apply the default color of the link or text.