more nested less rules - pager component

A more nested version of pager component

This is a continuation of #7590

Lets say that this time you have a section called #bottom and you have an unordered list in it. Next thing you would like to do is format this list from your LESS main stylesheet.

    <section id="#bottom">
      <ul>
        <li><a href="#">&larr; Older</a></li>
        <li><a href="#">Newer &rarr;</a></li>
      </ul>
    </section>

This is our base to mess with, open your LESS and put:

    #bottom {
        ul {
            .pager;
        }
    }
So that you'll get the same result as you would type class="pager" on that list.



    #bottom {
        ul {
            .pager;
                li {
                    &:first-child {
                      .previous;
                    }
                    &:last-child {
                      .next;
                    }
                }
          }
    }
Taking these steps will provide you same result for first and last list items. They will look exactly like they would have class="previous" and class="next" on the HTML side.




    #bottom {
        ul {
            .pager;
                li {
                    &:first-child {
                      .previous;
                      .disabled;
                    }
                    &:last-child {
                      .next;
                      .disabled;
                    }
                }
          }
    }
In this case both pager buttons will be disabled as they would be styled with "disabled" class.

Info for reviewer: There is no bootstrap.css to merge with docs because output of pager.less does not change a thing :)

Tested on: Firefox 20.0.1, Chrome 26.0.1410.64 m, Internet Explorer 10.0.9200.16521