angular-three-state-checkbox/dist/three-state-checkbox.css

Angular directive of three-state checkbox. Useful for sorting. Default template: 'Material design'

.tri-sta-che {
    display: inline-block;
    cursor: pointer;
    outline: none;
    text-align: left;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    position: relative;
    vertical-align: top;
    margin: 0 5px;
}

.tri-sta-che.checked {
    transform-origin: 80% 20%;
    -webkit-transform: rotateZ(38deg);
    -moz-transform: rotateZ(38deg);
    -ms-transform: rotateZ(38deg);
    -o-transform: rotateZ(38deg);
    transform: rotateZ(38deg);
}

.tri-sta-che.unchecked {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
}

.md {
    width: 16px;
    height: 16px;
}

.tri-sta-che > .tsc-b {
    position: absolute;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;

}
.tri-sta-che.md > .tsc-b.tsc-b-l, .tri-sta-che.md > .tsc-b.tsc-b-r {
    width: 3px;
}
.tri-sta-che.md > .tsc-b.tsc-b-t, .tri-sta-che.md > .tsc-b.tsc-b-b {
    height: 3px;
}

.tri-sta-che.clear > .tsc-b {
    background: #ccc;
}

.tri-sta-che.checked > .tsc-b {
    background: #56c254;
}

.tri-sta-che.unchecked > .tsc-b {
    background: #c24f4c;
}

.tri-sta-che > .tsc-b.tsc-b-t {
    top: 0;
    width: 100%;
}
.tri-sta-che > .tsc-b.tsc-b-l {
    left: 0;
    height: 100%;
}
.tri-sta-che > .tsc-b.tsc-b-r {
    right: 0;
    height: 100%;
}
.tri-sta-che > .tsc-b.tsc-b-b {
    bottom: 0;
    width: 100%;
}
.tri-sta-che.checked > .tsc-b.tsc-b-t {
    transform-origin: 100% 100%;
    transform: rotateZ(-90deg) scaleX(0.7);
    opacity:.5;
}
.tri-sta-che.checked > .tsc-b.tsc-b-l {
    transform-origin: 350% 34%;
    transform: rotateZ(-90deg) scaleY(0.6) translateY(-25%);
    opacity: .5;
}
.tri-sta-che.checked > .tsc-b.tsc-b-b {
    transform-origin: 100% 100%;
    transform: scaleX(0.7);
}
.tri-sta-che.unchecked > .tsc-b.tsc-b-l {
    transform-origin: 111% 0;
    transform: rotateZ(-45deg);;
}
.tri-sta-che.unchecked > .tsc-b.tsc-b-r {
    transform-origin: 0 90%;
    transform: rotateZ(-45deg);
}
.tri-sta-che.unchecked > .tsc-b.tsc-b-t {
    transform-origin: 95% 100%;
    transform: rotateZ(-45deg);
}
.tri-sta-che.unchecked > .tsc-b.tsc-b-b {
    transform-origin: 5% -5%;
    transform: rotateZ(-45deg);
}