jquery-canvas-animation/src/less/_controls.less

jQuery Plugin - Canvas Animation

.jca-controls {
    width: 100%;
    padding: @jca-controls-padding;
    text-align: center;
    
    & > div {
        position: relative;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        line-height: 1;
        border: @jca-controls-box-border;
        width: 25px * @jca-controls-size;
        height: 25px * @jca-controls-size;
        margin: @jca-controls-box-margin;
        background: @jca-controls-box-background;
        border-radius: @jca-controls-box-border-radius;
        
        &:after,
        &:before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            content: '';
            box-sizing: border-box;
        }
        
        &:last-child {
            margin-right: 0;
        }
    }
    
    .jca-backward {
        &:after {
            width: 3px * @jca-controls-size;
            height: 17px * @jca-controls-size;
            background-color: @jca-controls-icon-color;
            left: 25%;
        }
        
        &:before {
            left: 65%;
            border-right: 10px * @jca-controls-size solid @jca-controls-icon-color;
            border-top: 10px * @jca-controls-size solid transparent;
            border-bottom: 10px * @jca-controls-size solid transparent;
        }
    }
    
    .jca-play:before {
        border-left: 10px * @jca-controls-size solid @jca-controls-icon-color;
        border-top: 10px * @jca-controls-size solid transparent;
        border-bottom: 10px * @jca-controls-size solid transparent;
    }
    
    .jca-pause:before {
        width: 10px * @jca-controls-size;
        height: 17px * @jca-controls-size;
        border-left: 3px * @jca-controls-size solid @jca-controls-icon-color;
        border-right: 3px * @jca-controls-size solid @jca-controls-icon-color;
    }
    
    .jca-stop:before {
        width: 15px * @jca-controls-size;
        height: 15px * @jca-controls-size;
        background-color: @jca-controls-icon-color;
    }
    
    .jca-forward {
        &:after {
            width: 3px * @jca-controls-size;
            height: 17px * @jca-controls-size;
            background-color: @jca-controls-icon-color;
            left: 80%;
        }
        
        &:before {
            left: 40%;
            border-left: 10px * @jca-controls-size solid @jca-controls-icon-color;
            border-top: 10px * @jca-controls-size solid transparent;
            border-bottom: 10px * @jca-controls-size solid transparent;
        }
    }
    
    .jca-expand:before {
        border: 2px * @jca-controls-size solid @jca-controls-icon-color;
        width: 17px * @jca-controls-size;
        height: 13px * @jca-controls-size;
    }
    
    .jca-editor:before {
        width: 5px * @jca-controls-size;
        height: 22px * @jca-controls-size;
        left: 40%;
        border-bottom: 15px * @jca-controls-size solid @jca-controls-icon-color;
        border-top: 5px * @jca-controls-size solid @jca-controls-icon-color;
        transform: rotate(45deg);
        top: 5%;
        border-radius: 10px * @jca-controls-size;
    }
}

.jca-icons {
    .jca-controls {
        & > div {
            & > * {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                font-size: 1rem * @jca-controls-size;
                color: @jca-controls-icon-color;
            }
            
            // reset default settings
            &.jca-forward:before,
            &.jca-play:before,
            &.jca-pause:before,
            &.jca-stop:before,
            &.jca-backward:before,
            &.jca-expand:before,
            &.jca-editor:before,
            &.jca-backward:after,
            &.jca-forward:after {
                border: 0 none;
                background-color: transparent;
            }
        }
    }
}

.jca-goto {
    cursor: pointer;
}