dio-v
6/6/2013 - 9:23 AM

Nice clean CSS only pagination making use of these mixins: http://lesselements.com/

Nice clean CSS only pagination making use of these mixins: http://lesselements.com/

pagination
content_copyfile_download
.pagination{
    margin-bottom:100px;
    .columns{
        margin:0 auto;
        text-align:center;
        a{  
            position:relative;
            font-family:arial;
            font-size:13px;
            color:darken(@borderColor,30%);
            background:#FFF;
            .border-radius(3px);
            width:26px;
            height:26px;
            line-height:24px;
            border:1px solid @borderColor;
            display:inline-block;zoom:1; *display: inline; _height: 16px;
            margin:0 2px 0 2px;
            &.active,&:hover{
                text-decoration:none;
                border:1px solid darken(@attention,15%);
                .gradient( @attention, darken(@attention,5%));
                color:#FFF;
                .box-shadow(~"0px 1px 1px 0px rgba(150, 150, 150, 0.5), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5)");
            }
            &:hover{top:-1px;position:relative;
                    &.previous{
                        &:hover,&.active{
                            &:before{border-color: rgba(255,255,255,0) #FFF rgba(255,255,255,0) rgba(255,255,255,0);}
                        }
                    }
                    &.next{
                        &:hover,&.active{
                            &:before{border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #FFF;}
                        }
                    }
            }
            &:active{
                top:0px;
                .gradient( darken(@attention,5%), @attention);
                .box-shadow(none);
            }
            &.previous{.removeText;
                       &:before{
                          content: '';
                          border-style: solid;
                          border-width: 4px;
                          border-color: rgba(255,255,255,0) darken(@borderColor,30%) rgba(255,255,255,0) rgba(255,255,255,0);
                          margin-right: -2px;
                          right:50%;
                          top:50%;
                          margin-top:-4px;
                          position: absolute;
                          z-index: 3; /* stay in front */
                       }
            }
            &.next{.removeText;
                       &:before{
                          content: '';
                          border-style: solid;
                          border-width: 4px;
                          border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) darken(@borderColor,30%);
                          margin-left: -2px;
                          left:50%;
                          top:50%;
                          margin-top:-4px;
                          position: absolute;
                          z-index: 3; /* stay in front */
                       }
            }

        }
    }
}