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

jQuery Plugin - Canvas Animation

.jca-editor-container {
    margin-top: 25px;
    color: @jca-editor-color;
    background: @jca-editor-background;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 5;
    
    *, ::after, ::before {
        box-sizing: border-box;
        line-height: 1.25;
    }
    
    .jca-container {
        display: flex;
        flex-direction: row;
        max-width: 1200px;
        margin: auto;
    }
    
    .jca-col {
        flex: 25% 0 0;
        max-width: 25%;
        padding: 5px 15px;
    }
    
    .jca-cord-dimension {
        padding: 30px 15px;
        
        [type="number"] {
            width: 55px;
            position: relative;
            font: @jca-editor-button-font;
            
            &[name="jca_top"] {
                top: -10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            &[name="jca_left"] {
                top: 10%;
                left: -30px;
            }
            
            &[name="jca_width"] {
                bottom: -15px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            &[name="jca_height"] {
                top: -50%;
                right: -50px;
            }
        }
        
        .jca-label {
            position: absolute;
            height: 0;
            width: 55px;
            text-align: center;
            
            &:before {
                content: attr(data-label);
                font: @jca-editor-font;
                line-height: 1;
            }
            
            &.jca-top {
                top: -30px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            &.jca-left {
                left: -30px;
                top: 15%;
                height: 20px;
            }
            
            &.jca-width {
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            &.jca-height {
                right: -30px;
                top: 15%;
                height: 20px;
            }
        }
        
        .jca-box {
            position: relative;
            width: 75px;
            height: 75px;
            border: @jca-editor-box-border;
            margin: auto;
            
            &:before {
                content: '%';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font: @jca-editor-font;
                line-height: 1;
            }
        }
    }
    
    .jca-selector-breadcrumb {
        a {
            font: @jca-editor-font;
            color: @jca-editor-breadcrumb-color;
            text-decoration: @jca-editor-breadcrumb-decoration;
        }
        
        span {
            font: @jca-editor-font;
            line-height: 1;
            
            &:last-child {
                display: none;
            }
        }
        
    }
    
    .jca-code-col {
        #jca-html {
            overflow: hidden;
            white-space: nowrap;
            font: @jca-editor-font;
        }

        #jca-css {
            font: @jca-editor-font;
        }
    }
    
    .jca-button-col {
        span {
            font: @jca-editor-font;
            line-height: 1;
        }
    }
    
    
    [type="button"] {
        font: @jca-editor-button-font;
        cursor: pointer;
    }
}