eliace/ergo-js

View on GitHub
css/widgets/basic/caret.less

Summary

Maintainability
Test Coverage


.caret {
    transition: transform 0.15s ease-in-out 0s;
}









.caret, 
.caret.point-down, 
.expanded > .toggle .caret.point-right,
.down.caret, 
.down > .caret, 
.dropdown > .caret {
    &:before {
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-top: 4px solid;
    border-bottom: none;
    display: inline-block;
    vertical-align: middle;
    height: 0;
    width: 0;
    content: "";
//    margin-top: -2px;
    margin-top: -0.2857em;
  }
}


.up.caret, .caret.point-up, .up > .caret, .drop-up > .button > .caret {
//    border-left: 4px solid rgba(0, 0, 0, 0);
//    border-right: 4px solid rgba(0, 0, 0, 0);
    &:before {
        border-bottom: 4px solid;
        border-top: none;
        margin-top: -0.2857em;
    }
}







/*
.up > .caret, .up.caret, 
.desc > .caret, .desc.caret, 
.dropup > .caret {
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;
    border-top: none;    
}

.down > .caret, .down.caret, .asc > .caret, .dropdown > .caret {
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: none;
    border-top: 4px solid;    
}

*/

.right > .caret, .drop-right > .caret, .point-right.caret, .toggle.caret {
    &:before {
        border-left: 4px solid;
        border-right: none;
        border-bottom: 4px solid rgba(0, 0, 0, 0);
        border-top: 4px solid rgba(0, 0, 0, 0);    
    
        margin-top: -0.2857em; //?
    }
}




.left > .caret, .drop-left > .caret, .point-left.caret {
    &:before {
        border-left: none;
        border-right: 4px solid;
        border-bottom: 4px solid rgba(0, 0, 0, 0);
        border-top: 4px solid rgba(0, 0, 0, 0);    
    }
}



/*
.expanded > .toggle {

    .caret.point-right:before {
//        margin-top: 0;
        border-left: 4px solid rgba(0, 0, 0, 0);
        border-right: 4px solid rgba(0, 0, 0, 0);
        border-top: 4px solid;
        border-bottom: none;
    }

}
*/





.nw.caret:before {
    border-left: none;
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-bottom: none;
    border-top: 6px solid;  
}

.ne.caret:before {
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: none;
    border-bottom: none;
    border-top: 6px solid;  
}

.se.caret:before {
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: none;
    border-bottom: 6px solid;
    border-top: none;   
}

.sw.caret:before {
    border-left: none;
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid;
    border-top: none;   
}





//.side {
//}


/*
.expanded > .toggle .caret.point-right {
    -ms-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
*/