react-zeanium-ui-ui/less/base/graph.less

Zeanium UI Framework for React.js

/*
 * Toggle Switch
 */

.c-flow-canvas {
    position: absolute;
    background: url("../images/grids.jpg");
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    overflow: auto;
    &, & *{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /*pointer-events: none;*/
    }

    width: 100%;
    height: 100%;

    &>.graph-node{
        z-index: 2;
        background-color: transparent;
        border: 1px solid transparent;
        position: absolute;

        &[data-highlight=true]{
            border: 1px solid #f0ad4e;
            background-color: #f0ad4e;
        }

        @-webkit-keyframes  shineRed {
            from { -webkit-box-shadow: 0 0 5px #bbb; }
            50% { -webkit-box-shadow: 0 0 10px red; }
            to { -webkit-box-shadow: 0 0 5px #bbb; }
        }
        @-webkit-keyframes shineBlue {
            from { -webkit-box-shadow: 0 0 4px #f0ad4a; }
            50% { -webkit-box-shadow: 0 0 8px #f5ad2e; }
            to { -webkit-box-shadow: 0 0 4px #f0ad4e; }
        }

        &[data-selected=true]{
            border: 1px solid #f0ad4e;
            border-radius: 50%;
            -webkit-animation-name: shineRed;
            -webkit-animation-duration: 1.5s;
            -webkit-animation-iteration-count: infinite;
        }
        .manual-connect {
            position: absolute;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -4px;
            margin-left: -4px;
            width: 8px;
            height: 8px;
            background-color: red;
        }
        &:hover{
            .manual-connect{
                /*display: block;*/
            }
        }
        .node-content{
            width: 48px;
            height: 48px;
            background-color: #FFF;
            border-radius: 50%;
            border: 1px solid #0C72A5;
            &>.type-child{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: 1px solid transparent;
                background-color: #5bc0de;
                &[data-draggable=false]{
                    float: right;
                    margin: 2px;
                }
                &:hover{
                    background-color: #f0ad4e;
                    border: 1px solid #f0ad4e;
                }
            }
        }
    }

    &>.graph-link{
        position: absolute;
        z-index: 1;
        &>line:hover{
            stroke: #f0ad4e !important;
        }
    }
}