Category: LESS

UL/OL with different colored bullets

  ol,ul{
    margin-left: 3.2em;
    ol,ul{
      margin-bottom: 0;
    }
  }
  ol{
    counter-reset: item; 
    li{
      list-style-type: none;
      &:before{
        margin-left: -1.2em;
        content: counter(item,decimal) ". ";
        counter-increment: item;
        color: @orange;
      }
    }
    ol{
      li{
        &:before{
          content: counter(item,lower-alpha) ". ";
        }
      }
    }
  }
  ul{    
    counter-reset: item; 
    li{
      list-style-type: none;    
      &:before{
        margin-left: -1.2em;
        margin-right: 0.5em;
        line-height: 0;
        content: "\26AB ";
        color: @orange;
      }
    }
    ul{
      li{
        &:before{
          content:"\25CB ";
        }
      }
    }
  }

Vertical lines in the background

adam. urg.

/* Centered Vertical Line - using CSS3 gradients */
.centered-vert-line(@midColor: #ccc, @width: 1px, @startColor: transparent, @endColor: transparent, @deg: 90deg) {
  background-image: -moz-linear-gradient(@deg, @startColor, @midColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @midColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @midColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @midColor, @endColor); // Standard, IE10
  background-position: 50%;
  background-repeat: repeat-y;
  background-size: @width 100px;
 }