more nested less rules - pager component

Created by: ArturKwiatkowski

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