icono/less/icons/caret.less

Pure CSS Icons

//* Carets *\\
.icono-caretRight {
    width: @12;
    height: @20;
    margin: @7 @11;
    &:before, &:after {
        width: @14;
        height: @2;
        position: absolute;
        bottom: 0;
        margin: auto 0;
        right: @2;
        box-shadow: inset 0 0 0 @32;
        transform-origin: right;
    }
    &:before {
        top: @2;
        transform: rotate(45deg);
    }
    &:after {
        top: 0;
        transform: rotate(-45deg);
    }
}

.icono-caretRightCircle, .icono-caretRightSquare {
    &:extend(.icono-caretRight all);
}

.icono-caretLeft {
    &:extend(.icono-caretRight all);
    transform: rotate(180deg);
}
.icono-caretLeftCircle, .icono-caretLeftSquare {
    &:extend(.icono-caretLeft all);
}

.icono-caretUp {
    &:extend(.icono-caretRight all);
    transform: rotate(-90deg);
}
.icono-caretUpCircle, .icono-caretUpSquare {
    &:extend(.icono-caretUp all);
}

.icono-caretDown {
    &:extend(.icono-caretRight all);
    transform: rotate(90deg);
}
.icono-caretDownCircle, .icono-caretDownSquare {
    &:extend(.icono-caretDown all);
}
[class*="icono-caret"] {
    &[class*="Circle"], &[class*="Square"] {
        &:before, &:after {
            width: @11;
            right: @8;
        }
    }
}